codegen.spec.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681
  1. import { parse } from 'compiler/parser/index'
  2. import { optimize } from 'compiler/optimizer'
  3. import { generate } from 'compiler/codegen'
  4. import { isObject, extend } from 'shared/util'
  5. import { isReservedTag } from 'web/util/index'
  6. import { baseOptions } from 'web/compiler/options'
  7. function assertCodegen (template, generatedCode, ...args) {
  8. let staticRenderFnCodes = []
  9. let generateOptions = baseOptions
  10. let proc = null
  11. let len = args.length
  12. while (len--) {
  13. const arg = args[len]
  14. if (Array.isArray(arg)) {
  15. staticRenderFnCodes = arg
  16. } else if (isObject(arg)) {
  17. generateOptions = arg
  18. } else if (typeof arg === 'function') {
  19. proc = arg
  20. }
  21. }
  22. const ast = parse(template, baseOptions)
  23. optimize(ast, baseOptions)
  24. proc && proc(ast)
  25. const res = generate(ast, generateOptions)
  26. expect(res.render).toBe(generatedCode)
  27. expect(res.staticRenderFns).toEqual(staticRenderFnCodes)
  28. }
  29. /* eslint-disable quotes */
  30. describe('codegen', () => {
  31. it('generate directive', () => {
  32. assertCodegen(
  33. '<p v-custom1:arg1.modifier="value1" v-custom2></p>',
  34. `with(this){return _c('p',{directives:[{name:"custom1",rawName:"v-custom1:arg1.modifier",value:(value1),expression:"value1",arg:"arg1",modifiers:{"modifier":true}},{name:"custom2",rawName:"v-custom2"}]})}`
  35. )
  36. })
  37. it('generate filters', () => {
  38. assertCodegen(
  39. '<div :id="a | b | c">{{ d | e | f }}</div>',
  40. `with(this){return _c('div',{attrs:{"id":_f("c")(_f("b")(a))}},[_v(_s(_f("f")(_f("e")(d))))])}`
  41. )
  42. })
  43. it('generate filters with no arguments', () => {
  44. assertCodegen(
  45. '<div>{{ d | e() }}</div>',
  46. `with(this){return _c('div',[_v(_s(_f("e")(d)))])}`
  47. )
  48. })
  49. it('generate v-for directive', () => {
  50. assertCodegen(
  51. '<div><li v-for="item in items" :key="item.uid"></li></div>',
  52. `with(this){return _c('div',_l((items),function(item){return _c('li',{key:item.uid})}),0)}`
  53. )
  54. // iterator syntax
  55. assertCodegen(
  56. '<div><li v-for="(item, i) in items"></li></div>',
  57. `with(this){return _c('div',_l((items),function(item,i){return _c('li')}),0)}`
  58. )
  59. assertCodegen(
  60. '<div><li v-for="(item, key, index) in items"></li></div>',
  61. `with(this){return _c('div',_l((items),function(item,key,index){return _c('li')}),0)}`
  62. )
  63. // destructuring
  64. assertCodegen(
  65. '<div><li v-for="{ a, b } in items"></li></div>',
  66. `with(this){return _c('div',_l((items),function({ a, b }){return _c('li')}),0)}`
  67. )
  68. assertCodegen(
  69. '<div><li v-for="({ a, b }, key, index) in items"></li></div>',
  70. `with(this){return _c('div',_l((items),function({ a, b },key,index){return _c('li')}),0)}`
  71. )
  72. // v-for with extra element
  73. assertCodegen(
  74. '<div><p></p><li v-for="item in items"></li></div>',
  75. `with(this){return _c('div',[_c('p'),_l((items),function(item){return _c('li')})],2)}`
  76. )
  77. })
  78. it('generate v-if directive', () => {
  79. assertCodegen(
  80. '<p v-if="show">hello</p>',
  81. `with(this){return (show)?_c('p',[_v("hello")]):_e()}`
  82. )
  83. })
  84. it('generate v-else directive', () => {
  85. assertCodegen(
  86. '<div><p v-if="show">hello</p><p v-else>world</p></div>',
  87. `with(this){return _c('div',[(show)?_c('p',[_v("hello")]):_c('p',[_v("world")])])}`
  88. )
  89. })
  90. it('generate v-else-if directive', () => {
  91. assertCodegen(
  92. '<div><p v-if="show">hello</p><p v-else-if="hide">world</p></div>',
  93. `with(this){return _c('div',[(show)?_c('p',[_v("hello")]):(hide)?_c('p',[_v("world")]):_e()])}`
  94. )
  95. })
  96. it('generate v-else-if with v-else directive', () => {
  97. assertCodegen(
  98. '<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else>bye</p></div>',
  99. `with(this){return _c('div',[(show)?_c('p',[_v("hello")]):(hide)?_c('p',[_v("world")]):_c('p',[_v("bye")])])}`
  100. )
  101. })
  102. it('generate multi v-else-if with v-else directive', () => {
  103. assertCodegen(
  104. '<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else-if="3">elseif</p><p v-else>bye</p></div>',
  105. `with(this){return _c('div',[(show)?_c('p',[_v("hello")]):(hide)?_c('p',[_v("world")]):(3)?_c('p',[_v("elseif")]):_c('p',[_v("bye")])])}`
  106. )
  107. })
  108. it('generate ref', () => {
  109. assertCodegen(
  110. '<p ref="component1"></p>',
  111. `with(this){return _c('p',{ref:"component1"})}`
  112. )
  113. })
  114. it('generate ref on v-for', () => {
  115. assertCodegen(
  116. '<ul><li v-for="item in items" ref="component1"></li></ul>',
  117. `with(this){return _c('ul',_l((items),function(item){return _c('li',{ref:"component1",refInFor:true})}),0)}`
  118. )
  119. })
  120. it('generate v-bind directive', () => {
  121. assertCodegen(
  122. '<p v-bind="test"></p>',
  123. `with(this){return _c('p',_b({},'p',test,false))}`
  124. )
  125. })
  126. it('generate v-bind with prop directive', () => {
  127. assertCodegen(
  128. '<p v-bind.prop="test"></p>',
  129. `with(this){return _c('p',_b({},'p',test,true))}`
  130. )
  131. })
  132. it('generate v-bind directive with sync modifier', () => {
  133. assertCodegen(
  134. '<p v-bind.sync="test"></p>',
  135. `with(this){return _c('p',_b({},'p',test,false,true))}`
  136. )
  137. })
  138. it('generate v-model directive', () => {
  139. assertCodegen(
  140. '<input v-model="test">',
  141. `with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(test),expression:"test"}],domProps:{"value":(test)},on:{"input":function($event){if($event.target.composing)return;test=$event.target.value}}})}`
  142. )
  143. })
  144. it('generate multiline v-model directive', () => {
  145. assertCodegen(
  146. '<input v-model="\n test \n">',
  147. `with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(\n test \n),expression:"\\n test \\n"}],domProps:{"value":(\n test \n)},on:{"input":function($event){if($event.target.composing)return;\n test \n=$event.target.value}}})}`
  148. )
  149. })
  150. it('generate multiline v-model directive on custom component', () => {
  151. assertCodegen(
  152. '<my-component v-model="\n test \n" />',
  153. `with(this){return _c('my-component',{model:{value:(\n test \n),callback:function ($$v) {\n test \n=$$v},expression:"\\n test \\n"}})}`
  154. )
  155. })
  156. it('generate template tag', () => {
  157. assertCodegen(
  158. '<div><template><p>{{hello}}</p></template></div>',
  159. `with(this){return _c('div',[[_c('p',[_v(_s(hello))])]],2)}`
  160. )
  161. })
  162. it('generate single slot', () => {
  163. assertCodegen(
  164. '<div><slot></slot></div>',
  165. `with(this){return _c('div',[_t("default")],2)}`
  166. )
  167. })
  168. it('generate named slot', () => {
  169. assertCodegen(
  170. '<div><slot name="one"></slot></div>',
  171. `with(this){return _c('div',[_t("one")],2)}`
  172. )
  173. })
  174. it('generate slot fallback content', () => {
  175. assertCodegen(
  176. '<div><slot><div>hi</div></slot></div>',
  177. `with(this){return _c('div',[_t("default",[_c('div',[_v("hi")])])],2)}`
  178. )
  179. })
  180. it('generate slot target', () => {
  181. assertCodegen(
  182. '<p slot="one">hello world</p>',
  183. `with(this){return _c('p',{attrs:{"slot":"one"},slot:"one"},[_v("hello world")])}`
  184. )
  185. })
  186. it('generate scoped slot', () => {
  187. assertCodegen(
  188. '<foo><template slot-scope="bar">{{ bar }}</template></foo>',
  189. `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return [_v(_s(bar))]}}])})}`
  190. )
  191. assertCodegen(
  192. '<foo><div slot-scope="bar">{{ bar }}</div></foo>',
  193. `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return _c('div',{},[_v(_s(bar))])}}])})}`
  194. )
  195. })
  196. it('generate named scoped slot', () => {
  197. assertCodegen(
  198. '<foo><template slot="foo" slot-scope="bar">{{ bar }}</template></foo>',
  199. `with(this){return _c('foo',{scopedSlots:_u([{key:"foo",fn:function(bar){return [_v(_s(bar))]}}])})}`
  200. )
  201. assertCodegen(
  202. '<foo><div slot="foo" slot-scope="bar">{{ bar }}</div></foo>',
  203. `with(this){return _c('foo',{scopedSlots:_u([{key:"foo",fn:function(bar){return _c('div',{},[_v(_s(bar))])}}])})}`
  204. )
  205. })
  206. it('generate dynamic scoped slot', () => {
  207. assertCodegen(
  208. '<foo><template :slot="foo" slot-scope="bar">{{ bar }}</template></foo>',
  209. `with(this){return _c('foo',{scopedSlots:_u([{key:foo,fn:function(bar){return [_v(_s(bar))]}}],true)})}`
  210. )
  211. })
  212. it('generate scoped slot with multiline v-if', () => {
  213. assertCodegen(
  214. '<foo><template v-if="\nshow\n" slot-scope="bar">{{ bar }}</template></foo>',
  215. `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return (\nshow\n)?[_v(_s(bar))]:undefined}}])})}`
  216. )
  217. assertCodegen(
  218. '<foo><div v-if="\nshow\n" slot="foo" slot-scope="bar">{{ bar }}</div></foo>',
  219. `with(this){return _c(\'foo\',{scopedSlots:_u([{key:"foo",fn:function(bar){return (\nshow\n)?_c(\'div\',{},[_v(_s(bar))]):_e()}}])})}`
  220. )
  221. })
  222. it('generate class binding', () => {
  223. // static
  224. assertCodegen(
  225. '<p class="class1">hello world</p>',
  226. `with(this){return _c('p',{staticClass:"class1"},[_v("hello world")])}`,
  227. )
  228. // dynamic
  229. assertCodegen(
  230. '<p :class="class1">hello world</p>',
  231. `with(this){return _c('p',{class:class1},[_v("hello world")])}`
  232. )
  233. })
  234. it('generate style binding', () => {
  235. assertCodegen(
  236. '<p :style="error">hello world</p>',
  237. `with(this){return _c('p',{style:(error)},[_v("hello world")])}`
  238. )
  239. })
  240. it('generate v-show directive', () => {
  241. assertCodegen(
  242. '<p v-show="shown">hello world</p>',
  243. `with(this){return _c('p',{directives:[{name:"show",rawName:"v-show",value:(shown),expression:"shown"}]},[_v("hello world")])}`
  244. )
  245. })
  246. it('generate DOM props with v-bind directive', () => {
  247. // input + value
  248. assertCodegen(
  249. '<input :value="msg">',
  250. `with(this){return _c('input',{domProps:{"value":msg}})}`
  251. )
  252. // non input
  253. assertCodegen(
  254. '<p :value="msg"/>',
  255. `with(this){return _c('p',{attrs:{"value":msg}})}`
  256. )
  257. })
  258. it('generate attrs with v-bind directive', () => {
  259. assertCodegen(
  260. '<input :name="field1">',
  261. `with(this){return _c('input',{attrs:{"name":field1}})}`
  262. )
  263. })
  264. it('generate static attrs', () => {
  265. assertCodegen(
  266. '<input name="field1">',
  267. `with(this){return _c('input',{attrs:{"name":"field1"}})}`
  268. )
  269. })
  270. it('generate events with v-on directive', () => {
  271. assertCodegen(
  272. '<input @input="onInput">',
  273. `with(this){return _c('input',{on:{"input":onInput}})}`
  274. )
  275. })
  276. it('generate events with method call', () => {
  277. assertCodegen(
  278. '<input @input="onInput($event);">',
  279. `with(this){return _c('input',{on:{"input":function($event){return onInput($event);}}})}`
  280. )
  281. // empty arguments
  282. assertCodegen(
  283. '<input @input="onInput();">',
  284. `with(this){return _c('input',{on:{"input":function($event){return onInput();}}})}`
  285. )
  286. // without semicolon
  287. assertCodegen(
  288. '<input @input="onInput($event)">',
  289. `with(this){return _c('input',{on:{"input":function($event){return onInput($event)}}})}`
  290. )
  291. // multiple args
  292. assertCodegen(
  293. '<input @input="onInput($event, \'abc\', 5);">',
  294. `with(this){return _c('input',{on:{"input":function($event){return onInput($event, 'abc', 5);}}})}`
  295. )
  296. // expression in args
  297. assertCodegen(
  298. '<input @input="onInput($event, 2+2);">',
  299. `with(this){return _c('input',{on:{"input":function($event){return onInput($event, 2+2);}}})}`
  300. )
  301. // tricky symbols in args
  302. assertCodegen(
  303. `<input @input="onInput(');[\\'());');">`,
  304. `with(this){return _c('input',{on:{"input":function($event){onInput(');[\\'());');}}})}`
  305. )
  306. })
  307. it('generate events with multiple statements', () => {
  308. // normal function
  309. assertCodegen(
  310. '<input @input="onInput1();onInput2()">',
  311. `with(this){return _c('input',{on:{"input":function($event){onInput1();onInput2()}}})}`
  312. )
  313. // function with multiple args
  314. assertCodegen(
  315. '<input @input="onInput1($event, \'text\');onInput2(\'text2\', $event)">',
  316. `with(this){return _c('input',{on:{"input":function($event){onInput1($event, 'text');onInput2('text2', $event)}}})}`
  317. )
  318. })
  319. it('generate events with keycode', () => {
  320. assertCodegen(
  321. '<input @input.enter="onInput">',
  322. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput($event)}}})}`
  323. )
  324. // multiple keycodes (delete)
  325. assertCodegen(
  326. '<input @input.delete="onInput">',
  327. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}`
  328. )
  329. // multiple keycodes (esc)
  330. assertCodegen(
  331. '<input @input.esc="onInput">',
  332. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"esc",27,$event.key,["Esc","Escape"]))return null;return onInput($event)}}})}`
  333. )
  334. // multiple keycodes (space)
  335. assertCodegen(
  336. '<input @input.space="onInput">',
  337. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"space",32,$event.key,[" ","Spacebar"]))return null;return onInput($event)}}})}`
  338. )
  339. // multiple keycodes (chained)
  340. assertCodegen(
  341. '<input @keydown.enter.delete="onInput">',
  342. `with(this){return _c('input',{on:{"keydown":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}`
  343. )
  344. // number keycode
  345. assertCodegen(
  346. '<input @input.13="onInput">',
  347. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&$event.keyCode!==13)return null;return onInput($event)}}})}`
  348. )
  349. // custom keycode
  350. assertCodegen(
  351. '<input @input.custom="onInput">',
  352. `with(this){return _c('input',{on:{"input":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput($event)}}})}`
  353. )
  354. })
  355. it('generate events with generic modifiers', () => {
  356. assertCodegen(
  357. '<input @input.stop="onInput">',
  358. `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();return onInput($event)}}})}`
  359. )
  360. assertCodegen(
  361. '<input @input.prevent="onInput">',
  362. `with(this){return _c('input',{on:{"input":function($event){$event.preventDefault();return onInput($event)}}})}`
  363. )
  364. assertCodegen(
  365. '<input @input.self="onInput">',
  366. `with(this){return _c('input',{on:{"input":function($event){if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}`
  367. )
  368. })
  369. // GitHub Issues #5146
  370. it('generate events with generic modifiers and keycode correct order', () => {
  371. assertCodegen(
  372. '<input @keydown.enter.prevent="onInput">',
  373. `with(this){return _c('input',{on:{"keydown":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();return onInput($event)}}})}`
  374. )
  375. assertCodegen(
  376. '<input @keydown.enter.stop="onInput">',
  377. `with(this){return _c('input',{on:{"keydown":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();return onInput($event)}}})}`
  378. )
  379. })
  380. it('generate events with mouse event modifiers', () => {
  381. assertCodegen(
  382. '<input @click.ctrl="onClick">',
  383. `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;return onClick($event)}}})}`
  384. )
  385. assertCodegen(
  386. '<input @click.shift="onClick">',
  387. `with(this){return _c('input',{on:{"click":function($event){if(!$event.shiftKey)return null;return onClick($event)}}})}`
  388. )
  389. assertCodegen(
  390. '<input @click.alt="onClick">',
  391. `with(this){return _c('input',{on:{"click":function($event){if(!$event.altKey)return null;return onClick($event)}}})}`
  392. )
  393. assertCodegen(
  394. '<input @click.meta="onClick">',
  395. `with(this){return _c('input',{on:{"click":function($event){if(!$event.metaKey)return null;return onClick($event)}}})}`
  396. )
  397. assertCodegen(
  398. '<input @click.exact="onClick">',
  399. `with(this){return _c('input',{on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}`
  400. )
  401. assertCodegen(
  402. '<input @click.ctrl.exact="onClick">',
  403. `with(this){return _c('input',{on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}`
  404. )
  405. })
  406. it('generate events with multiple modifiers', () => {
  407. assertCodegen(
  408. '<input @input.stop.prevent.self="onInput">',
  409. `with(this){return _c('input',{on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}`
  410. )
  411. })
  412. it('generate events with capture modifier', () => {
  413. assertCodegen(
  414. '<input @input.capture="onInput">',
  415. `with(this){return _c('input',{on:{"!input":function($event){return onInput($event)}}})}`
  416. )
  417. })
  418. it('generate events with once modifier', () => {
  419. assertCodegen(
  420. '<input @input.once="onInput">',
  421. `with(this){return _c('input',{on:{"~input":function($event){return onInput($event)}}})}`
  422. )
  423. })
  424. it('generate events with capture and once modifier', () => {
  425. assertCodegen(
  426. '<input @input.capture.once="onInput">',
  427. `with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}`
  428. )
  429. })
  430. it('generate events with once and capture modifier', () => {
  431. assertCodegen(
  432. '<input @input.once.capture="onInput">',
  433. `with(this){return _c('input',{on:{"~!input":function($event){return onInput($event)}}})}`
  434. )
  435. })
  436. it('generate events with inline statement', () => {
  437. assertCodegen(
  438. '<input @input="current++">',
  439. `with(this){return _c('input',{on:{"input":function($event){current++}}})}`
  440. )
  441. })
  442. it('generate events with inline function expression', () => {
  443. // normal function
  444. assertCodegen(
  445. '<input @input="function () { current++ }">',
  446. `with(this){return _c('input',{on:{"input":function () { current++ }}})}`
  447. )
  448. // arrow with no args
  449. assertCodegen(
  450. '<input @input="()=>current++">',
  451. `with(this){return _c('input',{on:{"input":()=>current++}})}`
  452. )
  453. // arrow with parens, single arg
  454. assertCodegen(
  455. '<input @input="(e) => current++">',
  456. `with(this){return _c('input',{on:{"input":(e) => current++}})}`
  457. )
  458. // arrow with parens, multi args
  459. assertCodegen(
  460. '<input @input="(a, b, c) => current++">',
  461. `with(this){return _c('input',{on:{"input":(a, b, c) => current++}})}`
  462. )
  463. // arrow with destructuring
  464. assertCodegen(
  465. '<input @input="({ a, b }) => current++">',
  466. `with(this){return _c('input',{on:{"input":({ a, b }) => current++}})}`
  467. )
  468. // arrow single arg no parens
  469. assertCodegen(
  470. '<input @input="e=>current++">',
  471. `with(this){return _c('input',{on:{"input":e=>current++}})}`
  472. )
  473. // with modifiers
  474. assertCodegen(
  475. `<input @keyup.enter="e=>current++">`,
  476. `with(this){return _c('input',{on:{"keyup":function($event){if(('keyCode' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return (e=>current++)($event)}}})}`
  477. )
  478. })
  479. // #3893
  480. it('should not treat handler with unexpected whitespace as inline statement', () => {
  481. assertCodegen(
  482. '<input @input=" onInput ">',
  483. `with(this){return _c('input',{on:{"input":onInput}})}`
  484. )
  485. })
  486. it('generate unhandled events', () => {
  487. assertCodegen(
  488. '<input @input="current++">',
  489. `with(this){return _c('input',{on:{"input":function(){}}})}`,
  490. ast => {
  491. ast.events.input = undefined
  492. }
  493. )
  494. })
  495. it('generate multiple event handlers', () => {
  496. assertCodegen(
  497. '<input @input="current++" @input.stop="onInput">',
  498. `with(this){return _c('input',{on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput($event)}]}})}`
  499. )
  500. })
  501. it('generate component', () => {
  502. assertCodegen(
  503. '<my-component name="mycomponent1" :msg="msg" @notify="onNotify"><div>hi</div></my-component>',
  504. `with(this){return _c('my-component',{attrs:{"name":"mycomponent1","msg":msg},on:{"notify":onNotify}},[_c('div',[_v("hi")])])}`
  505. )
  506. })
  507. it('generate svg component with children', () => {
  508. assertCodegen(
  509. '<svg><my-comp><circle :r="10"></circle></my-comp></svg>',
  510. `with(this){return _c('svg',[_c('my-comp',[_c('circle',{attrs:{"r":10}})])],1)}`
  511. )
  512. })
  513. it('generate is attribute', () => {
  514. assertCodegen(
  515. '<div is="component1"></div>',
  516. `with(this){return _c("component1",{tag:"div"})}`
  517. )
  518. assertCodegen(
  519. '<div :is="component1"></div>',
  520. `with(this){return _c(component1,{tag:"div"})}`
  521. )
  522. // maybe a component and normalize type should be 1
  523. assertCodegen(
  524. '<div><div is="component1"></div></div>',
  525. `with(this){return _c('div',[_c("component1",{tag:"div"})],1)}`
  526. )
  527. })
  528. it('generate component with inline-template', () => {
  529. // have "inline-template'"
  530. assertCodegen(
  531. '<my-component inline-template><p><span>hello world</span></p></my-component>',
  532. `with(this){return _c('my-component',{inlineTemplate:{render:function(){with(this){return _m(0)}},staticRenderFns:[function(){with(this){return _c('p',[_c('span',[_v("hello world")])])}}]}})}`
  533. )
  534. // "have inline-template attrs, but not having exactly one child element
  535. assertCodegen(
  536. '<my-component inline-template><hr><hr></my-component>',
  537. `with(this){return _c('my-component',{inlineTemplate:{render:function(){with(this){return _c('hr')}},staticRenderFns:[]}})}`
  538. )
  539. try {
  540. assertCodegen(
  541. '<my-component inline-template></my-component>',
  542. ''
  543. )
  544. } catch (e) {}
  545. expect('Inline-template components must have exactly one child element.').toHaveBeenWarned()
  546. expect(console.error.calls.count()).toBe(2)
  547. })
  548. it('generate static trees inside v-for', () => {
  549. assertCodegen(
  550. `<div><div v-for="i in 10"><p><span></span></p></div></div>`,
  551. `with(this){return _c('div',_l((10),function(i){return _c('div',[_m(0,true)])}),0)}`,
  552. [`with(this){return _c('p',[_c('span')])}`]
  553. )
  554. })
  555. it('generate component with v-for', () => {
  556. // normalize type: 2
  557. assertCodegen(
  558. '<div><child></child><template v-for="item in list">{{ item }}</template></div>',
  559. `with(this){return _c('div',[_c('child'),_l((list),function(item){return [_v(_s(item))]})],2)}`
  560. )
  561. })
  562. it('generate component with comment', () => {
  563. const options = extend({
  564. comments: true
  565. }, baseOptions)
  566. const template = '<div><!--comment--></div>'
  567. const generatedCode = `with(this){return _c('div',[_e("comment")])}`
  568. const ast = parse(template, options)
  569. optimize(ast, options)
  570. const res = generate(ast, options)
  571. expect(res.render).toBe(generatedCode)
  572. })
  573. // #6150
  574. it('generate comments with special characters', () => {
  575. const options = extend({
  576. comments: true
  577. }, baseOptions)
  578. const template = '<div><!--\n\'comment\'\n--></div>'
  579. const generatedCode = `with(this){return _c('div',[_e("\\n'comment'\\n")])}`
  580. const ast = parse(template, options)
  581. optimize(ast, options)
  582. const res = generate(ast, options)
  583. expect(res.render).toBe(generatedCode)
  584. })
  585. // #8041
  586. it('does not squash templates inside v-pre', () => {
  587. const template = '<div v-pre><template><p>{{msg}}</p></template></div>'
  588. const generatedCode = `with(this){return _m(0)}`
  589. const renderFn = `with(this){return _c('div',{pre:true},[_c('template',[_c('p',[_v("{{msg}}")])])],2)}`
  590. const ast = parse(template, baseOptions)
  591. optimize(ast, baseOptions)
  592. const res = generate(ast, baseOptions)
  593. expect(res.render).toBe(generatedCode)
  594. expect(res.staticRenderFns).toEqual([renderFn])
  595. })
  596. it('not specified ast type', () => {
  597. const res = generate(null, baseOptions)
  598. expect(res.render).toBe(`with(this){return _c("div")}`)
  599. expect(res.staticRenderFns).toEqual([])
  600. })
  601. it('not specified directives option', () => {
  602. assertCodegen(
  603. '<p v-if="show">hello world</p>',
  604. `with(this){return (show)?_c('p',[_v("hello world")]):_e()}`,
  605. { isReservedTag }
  606. )
  607. })
  608. // #9142
  609. it('should compile single v-for component inside template', () => {
  610. assertCodegen(
  611. `<div><template v-if="ok"><foo v-for="i in 1" :key="i"></foo></template></div>`,
  612. `with(this){return _c('div',[(ok)?_l((1),function(i){return _c('foo',{key:i})}):_e()],2)}`
  613. )
  614. })
  615. })
  616. /* eslint-enable quotes */