const compiler = require('../lib') function assertCodegen (template, generatedCode, ...args) { const compiled = compiler.compile(template, { mp: { platform: 'app-plus' }, service: true }) expect(compiled.render).toBe(generatedCode) } /* eslint-disable quotes */ describe('codegen', () => { it('generate directive', () => { assertCodegen( '

', `with(this){return _c('p',{extras:{"v-custom1":value1},attrs:{"_i":0}})}` ) // extra assertCodegen( '

', `with(this){return _c('p',{extras:{"v-custom1":value1,"v-custom1-arg":arg1},attrs:{"_i":0}})}` ) }) it('generate filters', () => { assertCodegen( '
{{ d | e | f }}
', `with(this){return _c('div',{attrs:{"id":_f("c")(_f("b")(a)),"_i":0}},[_c('text',{extras:{t0:_s(_f("f")(_f("e")(d)))},attrs:{"_i":0}})])}` ) }) it('generate filters with no arguments', () => { assertCodegen( '
{{ d | e() }}
', `with(this){return _c('div',[_c('text',{extras:{t0:_s(_f("e")(d))},attrs:{"_i":0}})])}` ) }) it('generate v-for directive', () => { assertCodegen( '
  • ', `with(this){return _c('div',_l((_$f(1,{forItems:items})),function(item,$10,$20,$30){return _c('li',{key:_$f(1,{forIndex:$20,key:item.uid})})}),0)}` ) // iterator syntax assertCodegen( '
  • ', `with(this){return _c('div',_l((_$f(1,{forItems:items})),function(item,i,$20,$30){return _c('li',{key:_$f(1,{forIndex:$20,key:1+'-'+$30})})}),0)}` ) assertCodegen( '
  • ', `with(this){return _c('div',_l((_$f(1,{forItems:items})),function(item,key,index,$30){return _c('li',{key:_$f(1,{forIndex:index,key:1+'-'+$30})})}),0)}` ) // destructuring assertCodegen( '
  • ', `with(this){return _c('div',_l((_$f(1,{forItems:items})),function({ a, b },$10,$20,$30){return _c('li',{key:_$f(1,{forIndex:$20,key:1+'-'+$30})})}),0)}` ) assertCodegen( '
  • ', `with(this){return _c('div',_l((_$f(1,{forItems:items})),function({ a, b },key,index,$30){return _c('li',{key:_$f(1,{forIndex:index,key:1+'-'+$30})})}),0)}` ) // v-for with extra element assertCodegen( '

  • ', `with(this){return _c('div',[_c('p'),_l((_$f(2,{forItems:items})),function(item,$10,$20,$30){return _c('li',{key:_$f(2,{forIndex:$20,key:2+'-'+$30})})})],2)}` ) }) it('generate v-if directive', () => { assertCodegen( '

    hello

    ', `with(this){return (_$i(0,show))?_c('p'):_e()}` ) }) it('generate v-else directive', () => { assertCodegen( '

    hello

    world

    ', `with(this){return _c('div',[(_$i(1,show))?_c('p'):_c('p')])}` ) }) it('generate v-else-if directive', () => { assertCodegen( '

    hello

    world

    ', `with(this){return _c('div',[(_$i(1,show))?_c('p'):(_$e(2,hide))?_c('p'):_e()])}` ) }) it('generate v-else-if with v-else directive', () => { assertCodegen( '

    hello

    world

    bye

    ', `with(this){return _c('div',[(_$i(1,show))?_c('p'):(_$e(2,hide))?_c('p'):_c('p')])}` ) }) it('generate multi v-else-if with v-else directive', () => { assertCodegen( '

    hello

    world

    elseif

    bye

    ', `with(this){return _c('div',[(_$i(1,show))?_c('p'):(_$e(2,hide))?_c('p'):(3)?_c('p'):_c('p')])}` ) }) it('generate ref', () => { assertCodegen( '

    ', `with(this){return _c('p',{ref:"component1"})}` ) }) it('generate ref on v-for', () => { assertCodegen( '', `with(this){return _c('ul',_l((_$f(1,{forItems:items})),function(item,$10,$20,$30){return _c('li',{key:_$f(1,{forIndex:$20,key:1+'-'+$30}),ref:"component1",refInFor:true})}),0)}` ) }) it('generate v-bind directive', () => { assertCodegen( '

    ', `with(this){return _c('p',{extras:{"v-bind":test},attrs:{"_i":0}})}` ) }) it('generate v-bind with prop directive', () => { assertCodegen( '

    ', `with(this){return _c('p',{extras:{"v-bind":test},attrs:{"_i":0}})}` ) }) it('generate v-bind directive with sync modifier', () => { assertCodegen( '

    ', `with(this){return _c('p',{extras:{"v-bind":test},attrs:{"_i":0}})}` ) }) it('generate v-model directive', () => { assertCodegen( '', `with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(test),expression:"test"}],extras:{"v-model":test},attrs:{"_i":0},domProps:{"value":(test)},on:{"input":function($event){if($event.target.composing)return;test=$event.target.value}}})}` ) }) it('generate multiline v-model directive', () => { assertCodegen( '', `with(this){return _c('input',{directives:[{name:"model",rawName:"v-model",value:(\n test \n),expression:"\\n test \\n"}],extras:{"v-model":\n test \n},attrs:{"_i":0},domProps:{"value":(\n test \n)},on:{"input":function($event){if($event.target.composing)return;\n test \n=$event.target.value}}})}` ) }) it('generate multiline v-model directive on custom component', () => { assertCodegen( '', `with(this){return _c('my-component',{extras:{"v-model":\n test \n},attrs:{"_i":0},model:{value:(\n test \n),callback:function ($$v) {\n test \n=$$v},expression:"\\n test \\n"}})}` ) }) it('generate template tag', () => { assertCodegen( '
    ', `with(this){return _c('div',[[_c('p',[_c('text',{extras:{t0:_s(hello)},attrs:{"_i":2}})])]],2)}` ) }) it('generate single slot', () => { assertCodegen( '
    ', `with(this){return _c('div',[_t("default",null,{"_i":1})],2)}` ) }) it('generate named slot', () => { assertCodegen( '
    ', `with(this){return _c('div',[_t("one",null,{"_i":1})],2)}` ) }) it('generate slot fallback content', () => { assertCodegen( '
    hi
    ', `with(this){return _c('div',[_t("default",[_c('div')],{"_i":1})],2)}` ) }) it('generate slot target', () => { assertCodegen( '

    hello world

    ', `with(this){return _c('p',{slot:"one"})}` ) }) it('generate scoped slot', () => { assertCodegen( '', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"default",fn:function(bar){return [_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]}}])})}` ) assertCodegen( '
    {{ bar }}
    ', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"default",fn:function(bar){return _c('div',{attrs:{"_i":1}},[_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})])}}])})}` ) }) it('generate named scoped slot', () => { assertCodegen( '', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"foo",fn:function(bar){return [_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]}}])})}` ) assertCodegen( '
    {{ bar }}
    ', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"foo",fn:function(bar){return _c('div',{attrs:{"_i":1}},[_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})])}}])})}` ) }) it('generate dynamic scoped slot', () => { assertCodegen( '', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:foo,fn:function(bar){return [_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]}}],null,true)})}` ) }) it('generate scoped slot with multiline v-if', () => { assertCodegen( '', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"default",fn:function(bar){return (_$i(1,\nshow\n))?[_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]:undefined}}],null,true)})}` ) assertCodegen( '
    {{ bar }}
    ', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([{key:"foo",fn:function(bar){return (_$i(1,\nshow\n))?_c('div',{attrs:{"_i":1}},[_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]):_e()}}],null,true)})}` ) }) it('generate scoped slot with new slot syntax', () => { assertCodegen( '', `with(this){return _c('foo',{attrs:{"_i":0},scopedSlots:_u([(_$i(1,show))?{key:"default",fn:function(bar){return [_c('text',{extras:{t0:_s(bar)},attrs:{"_i":1}})]}}:null],null,true)})}` ) }) it('generate class binding', () => { // static assertCodegen( '

    hello world

    ', `with(this){return _c('p')}` ) // dynamic assertCodegen( '

    hello world

    ', `with(this){return _c('p',{extras:{c:class1},attrs:{"_i":0}})}` ) }) it('generate style binding', () => { assertCodegen( '

    hello world

    ', `with(this){return _c('p',{extras:{s:error},attrs:{"_i":0}})}` ) }) it('generate v-show directive', () => { assertCodegen( '

    hello world

    ', `with(this){return _c('p',{extras:{"v-show":shown},attrs:{"_i":0}})}` ) }) it('generate DOM props with v-bind directive', () => { // input + value assertCodegen( '', `with(this){return _c('input',{attrs:{"value":msg,"_i":0}})}` ) // non input assertCodegen( '

    ', `with(this){return _c('p',{attrs:{"value":msg,"_i":0}})}` ) }) it('generate attrs with v-bind directive', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"name":field1,"_i":0}})}` ) }) it('generate static attrs', () => { assertCodegen( '', `with(this){return _c('input')}` ) }) it('generate events with v-on directive', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":onInput}})}` ) }) it('generate events with method call', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return onInput($event);}}})}` ) // empty arguments assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return onInput();}}})}` ) // without semicolon assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return onInput($event)}}})}` ) // multiple args assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return onInput($event, 'abc', 5);}}})}` ) // expression in args assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return onInput($event, 2+2);}}})}` ) // tricky symbols in args assertCodegen( ``, `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){onInput(');[\\'());');}}})}` ) // function name including a `function` part (#9920) // 2.6.10 暂未修复此 bug // assertCodegen( // '', // `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){return functionName()}}})}` // ) }) it('generate events with multiple statements', () => { // normal function assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){onInput1();onInput2()}}})}` ) // function with multiple args assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){onInput1($event, 'text');onInput2('text2', $event)}}})}` ) }) it('generate events with keycode', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput($event)}}})}` ) // multiple keycodes (delete) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}` ) // multiple keycodes (esc) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"esc",27,$event.key,["Esc","Escape"]))return null;return onInput($event)}}})}` ) // multiple keycodes (space) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"space",32,$event.key,[" ","Spacebar"]))return null;return onInput($event)}}})}` ) // multiple keycodes (chained) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}` ) // number keycode assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&$event.keyCode!==13)return null;return onInput($event)}}})}` ) // custom keycode assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput($event)}}})}` ) }) it('generate events with generic modifiers', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){$event.stopPropagation();return onInput($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){$event.preventDefault();return onInput($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}` ) }) // GitHub Issues #5146 it('generate events with generic modifiers and keycode correct order', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();return onInput($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"keydown":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();return onInput($event)}}})}` ) }) it('generate events with mouse event modifiers', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if(!$event.ctrlKey)return null;return onClick($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if(!$event.shiftKey)return null;return onClick($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if(!$event.altKey)return null;return onClick($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if(!$event.metaKey)return null;return onClick($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}` ) assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"click":function($event){if(!$event.ctrlKey)return null;if($event.shiftKey||$event.altKey||$event.metaKey)return null;return onClick($event)}}})}` ) }) it('generate events with multiple modifiers', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){$event.stopPropagation();$event.preventDefault();if($event.target !== $event.currentTarget)return null;return onInput($event)}}})}` ) }) it('generate events with capture modifier', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"!input":function($event){return onInput($event)}}})}` ) }) it('generate events with once modifier', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"~input":function($event){return onInput($event)}}})}` ) }) it('generate events with capture and once modifier', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"~!input":function($event){return onInput($event)}}})}` ) }) it('generate events with once and capture modifier', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"~!input":function($event){return onInput($event)}}})}` ) }) it('generate events with inline statement', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){current++}}})}` ) }) it('generate events with inline function expression', () => { // normal function assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function () { current++ }}})}` ) // normal named function assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function fn () { current++ }}})}` ) // arrow with no args assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":()=>current++}})}` ) // arrow with parens, single arg assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":(e) => current++}})}` ) // arrow with parens, multi args assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":(a, b, c) => current++}})}` ) // arrow with destructuring assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":({ a, b }) => current++}})}` ) // arrow single arg no parens assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":e=>current++}})}` ) // with modifiers assertCodegen( ``, `with(this){return _c('input',{attrs:{"_i":0},on:{"keyup":function($event){if(!$event.type.indexOf('key')&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return (e=>current++)($event)}}})}` ) }) // #3893 it('should not treat handler with unexpected whitespace as inline statement', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":onInput}})}` ) }) it('generate unhandled events', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":function($event){current++}}})}`, ast => { ast.events.input = undefined } ) }) it('generate multiple event handlers', () => { assertCodegen( '', `with(this){return _c('input',{attrs:{"_i":0},on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput($event)}]}})}` ) }) it('generate component', () => { assertCodegen( '

    hi
    ', `with(this){return _c('my-component',{attrs:{"name":"mycomponent1","msg":msg,"_i":0},on:{"notify":onNotify}},[_c('div')])}` ) }) it('generate svg component with children', () => { assertCodegen( '', `with(this){return _c('svg',{attrs:{"_i":0}},[_c('my-comp',{attrs:{"_i":1}},[_c('circle',{attrs:{"r":10,"_i":2}})],1)],1)}` ) }) it('generate is attribute', () => { assertCodegen( '
    ', `with(this){return _c("component1",{tag:"div"})}` ) assertCodegen( '
    ', `with(this){return _c(component1,{tag:"div"})}` ) // maybe a component and normalize type should be 1 assertCodegen( '
    ', `with(this){return _c('div',[_c("component1",{tag:"div"})],1)}` ) }) it('generate component with inline-template', () => { // have "inline-template'" assertCodegen( '

    hello world

    ', `with(this){return _c('my-component',{attrs:{"_i":0},inlineTemplate:{render:function(){with(this){return _m(0)}},staticRenderFns:[function(){with(this){return _c('p',[_c('span')])}}]}})}` ) // "have inline-template attrs, but not having exactly one child element assertCodegen( '

    ', `with(this){return _c('my-component',{attrs:{"_i":0},inlineTemplate:{render:function(){with(this){return _c('hr')}},staticRenderFns:[]}})}` ) assertCodegen( '', `with(this){return _c('my-component',{attrs:{"_i":0}})}` ) // have "is" attribute assertCodegen( '
    ', `with(this){return _c("myComponent",{tag:"div",inlineTemplate:{render:function(){with(this){return _c('div')}},staticRenderFns:[]}})}` ) assertCodegen( '
    ', `with(this){return _c("myComponent",{tag:"div"})}` ) // expect('Inline-template components must have exactly one child element.').toHaveBeenWarned() // expect(console.error.calls.count()).toBe(3) }) it('generate static trees inside v-for', () => { assertCodegen( `

    `, `with(this){return _c('div',_l((10),function(i,$10,$20,$30){return _c('div',[_m(0,true)])}),0)}` // [`with(this){return _c('p',[_c('span')])}`] ) }) it('generate component with v-for', () => { // normalize type: 2 assertCodegen( '
    ', `with(this){return _c('div',[_c('child',{attrs:{"_i":1}}),_l((_$f(2,{forItems:list})),function(item,$10,$20,$30){return [_c('text',{key:_$f(2,{forIndex:$20,keyIndex:0,key:2+'-0'+$30}),extras:{t0:_s(item)},attrs:{"_i":("2-"+$30)}})]})],2)}` ) }) // it('generate component with comment', () => { // const options = extend({ // comments: true // }, baseOptions) // const template = '
    ' // const generatedCode = `with(this){return _c('div')}` // const ast = parse(template, options) // optimize(ast, options) // const res = generate(ast, options) // expect(res.render).toBe(generatedCode) // }) // #6150 // it('generate comments with special characters', () => { // const options = extend({ // comments: true // }, baseOptions) // const template = '
    ' // const generatedCode = `with(this){return _c('div')}` // const ast = parse(template, options) // optimize(ast, options) // const res = generate(ast, options) // expect(res.render).toBe(generatedCode) // }) // #8041 it('does not squash templates inside v-pre', () => { assertCodegen( '
    ', `with(this){return _m(0)}` ) // const template = '
    ' // const generatedCode = `with(this){return _m(0)}` // // const renderFn = `with(this){return _c('div',{pre:true},[_c('template',[_c('p',[_v("{{msg}}")])])],2)}` // const ast = parse(template, baseOptions) // optimize(ast, baseOptions) // const res = generate(ast, baseOptions) // expect(res.render).toBe(generatedCode) // // expect(res.staticRenderFns).toEqual([renderFn]) }) it('not specified ast type', () => { assertCodegen( '', `with(this){return _c("div")}` ) // const res = generate(null, baseOptions) // expect(res.render).toBe(`with(this){return _c("div")}`) // expect(res.staticRenderFns).toEqual([]) }) it('not specified directives option', () => { assertCodegen( '

    hello world

    ', `with(this){return (_$i(0,show))?_c('p'):_e()}`, { // isReservedTag } ) }) // #9142 it('should compile single v-for component inside template', () => { assertCodegen( `
    `, `with(this){return _c('div',[(_$i(1,ok))?_l((1),function(i,$10,$20,$30){return _c('foo',{key:i,attrs:{"_i":("2-"+$30)}})}):_e()],2)}` ) }) }) /* eslint-enable quotes */