exports[`compile > bindings 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > custom directive > basic 1`] = `
"import { resolveDirective as _resolveDirective, withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _directive_test = _resolveDirective("test")
exports[`compile > custom directive > component 1`] = `
"import { resolveComponent as _resolveComponent, resolveDirective as _resolveDirective, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, withVaporDirectives as _withVaporDirectives, createIf as _createIf, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_Bar = _resolveComponent("Bar")
exports[`compile > directives > custom directive > basic 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > binding value 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > dynamic parameters 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > modifiers 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > static parameters 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > custom directive > static parameters and modifiers 1`] = `
"import { withVaporDirectives as _withVaporDirectives, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > v-cloak > basic 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div>test</div>", true)
+const t0 = _template("<div>test", true)
export function render(_ctx) {
const n0 = t0()
exports[`compile > directives > v-pre > basic 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>", true)
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, child as _child, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
-const t1 = _template("<div> </div>")
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}")
+const t1 = _template("<div> ")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const _component_Comp = _resolveComponent("Comp")
exports[`compile > dynamic root nodes and interpolation 1`] = `
"import { txt as _txt, createInvoker as _createInvoker, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<button> </button>", true)
+const t0 = _template("<button> ", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`compile > execution order > basic 1`] = `
"import { txt as _txt, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n0 = t0()
exports[`compile > execution order > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
"import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<div><div></div><!><div></div><!><div><button></button></div></div>", true)
+const t0 = _template("<div>")
+const t1 = _template("<div><div></div><!><div></div><!><div><button>", true)
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compile > execution order > with insertionState 1`] = `
"import { resolveComponent as _resolveComponent, child as _child, setInsertionState as _setInsertionState, createSlot as _createSlot, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compile > execution order > with v-once 1`] = `
"import { child as _child, next as _next, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><span> </span> <br> </div>", true)
+const t0 = _template("<div><span> </span> <br> ", true)
export function render(_ctx) {
const n3 = t0()
exports[`compile > expression parsing > v-for 1`] = `
"import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.a.b), (_for_item0, _for_key0, _for_index0) => {
exports[`compile > expression parsing > v-on multi statements 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`compile > fragment 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<p></p>")
-const t1 = _template("<span></span>")
-const t2 = _template("<div></div>")
+const t0 = _template("<p>")
+const t1 = _template("<span>")
+const t2 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`compile > gen unique helper alias > should avoid conflicts with existing variable names 1`] = `
"import { txt as _txt2, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compile > gen unique node variables > should avoid binding conflicts for node vars (n*/x*) 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n1 = t0()
exports[`compile > gen unique node variables > should bump old ref var (r*) on conflict 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compile > gen unique node variables > should bump placeholder var (p*) on conflict 1`] = `
"import { child as _child, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div><div><span></span></div></div></div>", true)
+const t0 = _template("<div><div><div><span>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n1 = t0()
exports[`compile > gen unique node variables > should bump template var (t*) on conflict 1`] = `
"import { template as _template } from 'vue';
-const t1 = _template("<div></div>")
-const t3 = _template("<span></span>")
-const t4 = _template("<p></p>")
+const t1 = _template("<div>")
+const t3 = _template("<span>")
+const t4 = _template("<p>")
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t1()
exports[`compile > static template 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div><p>hello</p><input><span></span></div>", true)
+const t0 = _template("<div><p>hello</p><input><span>", true)
export function render(_ctx) {
const n0 = t0()
exports[`scopeId compiler support > should wrap default slot 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_Child = _resolveComponent("Child")
exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
"import { resolveComponent as _resolveComponent, createForSlots as _createForSlots, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div test></div>")
+const t0 = _template("<div test>")
export function render(_ctx) {
const _component_Child = _resolveComponent("Child")
exports[`scopeId compiler support > should wrap named slots 1`] = `
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" ")
-const t1 = _template("<div test></div>")
+const t1 = _template("<div test>")
export function render(_ctx) {
const _component_Child = _resolveComponent("Child")
* @vitest-environment jsdom
*/
+import { compile } from '../src'
+
const parser: DOMParser = new DOMParser()
function parseHTML(html: string): string {
return parser.parseFromString(html, 'text/html').body.innerHTML
}
+function getCompiledTemplates(template: string): string[] {
+ const { ast } = compile(template)
+ return Array.from(ast.template.keys())
+}
+
function checkAbbr(
template: string,
- abbrevation: string,
- expected: string,
+ abbreviation: string | string[],
+ expected: string | string[],
): void {
- // TODO do some optimzations to make sure template === abbrevation
- expect(parseHTML(abbrevation)).toBe(expected)
+ const abbreviations = Array.isArray(abbreviation)
+ ? abbreviation
+ : [abbreviation]
+ const expectations = Array.isArray(expected) ? expected : [expected]
+ // verify compiler generates the abbreviated templates
+ expect(getCompiledTemplates(template)).toEqual(abbreviations)
+ // verify browser parses each abbreviation back to expected HTML
+ abbreviations.forEach((abbr, i) => {
+ expect(parseHTML(abbr)).toBe(expectations[i])
+ })
}
test('template abbreviation', () => {
+ // basic - last child can omit closing tag
checkAbbr('<div>hello</div>', '<div>hello', '<div>hello</div>')
checkAbbr(
'<div><div>hello</div></div>',
'<div><div>hello',
'<div><div>hello</div></div>',
)
+
+ // non-last child needs closing tag
checkAbbr(
- '<div><span>foo</span><span/></div>',
+ '<div><span>foo</span><span></span></div>',
'<div><span>foo</span><span>',
'<div><span>foo</span><span></span></div>',
)
checkAbbr(
- '<div><hr/><div/></div>',
+ '<div><hr><div></div></div>',
'<div><hr><div>',
'<div><hr><div></div></div>',
)
checkAbbr(
- '<div><div/><hr/></div>',
+ '<div><div></div><hr></div>',
'<div><div></div><hr>',
'<div><div></div><hr></div>',
)
- checkAbbr('<span/>hello', '<span></span>hello', '<span></span>hello')
+ // multi-root: each root generates its own template
+ checkAbbr(
+ '<span></span>hello',
+ ['<span>', 'hello'],
+ ['<span></span>', 'hello'],
+ )
+})
+
+test('formatting tags', () => {
+ // formatting tags on rightmost path can omit closing tag
+ checkAbbr('<div><b>bold</b></div>', '<div><b>bold', '<div><b>bold</b></div>')
+ checkAbbr(
+ '<div><i><b>text</b></i></div>',
+ '<div><i><b>text',
+ '<div><i><b>text</b></i></div>',
+ )
+
+ // formatting tags NOT on rightmost path need closing tag
+ checkAbbr(
+ '<div><b>bold</b><span></span></div>',
+ '<div><b>bold</b><span>',
+ '<div><b>bold</b><span></span></div>',
+ )
+ checkAbbr(
+ '<div><b>1</b><b>2</b></div>',
+ '<div><b>1</b><b>2',
+ '<div><b>1</b><b>2</b></div>',
+ )
+})
+
+test('same-name nested tags', () => {
+ // same-name on rightmost path can omit
+ checkAbbr(
+ '<div><div>inner</div></div>',
+ '<div><div>inner',
+ '<div><div>inner</div></div>',
+ )
+
+ // same-name NOT on rightmost path needs closing tag
+ checkAbbr(
+ '<div><div>a</div><div>b</div></div>',
+ '<div><div>a</div><div>b',
+ '<div><div>a</div><div>b</div></div>',
+ )
+ checkAbbr(
+ '<span><span>1</span><span>2</span></span>',
+ '<span><span>1</span><span>2',
+ '<span><span>1</span><span>2</span></span>',
+ )
+})
+
+test('void tags', () => {
+ // void tags never need closing tags
+ checkAbbr('<div><br></div>', '<div><br>', '<div><br></div>')
+ checkAbbr('<div><hr></div>', '<div><hr>', '<div><hr></div>')
+ checkAbbr('<div><input></div>', '<div><input>', '<div><input></div>')
+ checkAbbr('<div><img></div>', '<div><img>', '<div><img></div>')
+})
+
+test('deeply nested', () => {
+ checkAbbr(
+ '<div><div><div><span>deep</span></div></div></div>',
+ '<div><div><div><span>deep',
+ '<div><div><div><span>deep</span></div></div></div>',
+ )
+ checkAbbr(
+ '<div><div><span>a</span><span>b</span></div></div>',
+ '<div><div><span>a</span><span>b',
+ '<div><div><span>a</span><span>b</span></div></div>',
+ )
})
expect(code).toMatchSnapshot()
expect(code).contains(
- JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}</div>'),
+ JSON.stringify('<div :id="foo"><Comp></Comp>{{ bar }}'),
)
expect(code).not.contains('effect')
})
expect(code).matchSnapshot()
expect(code).not.contains('const t0 =')
expect(code).not.contains('const t2 =')
- expect(code).contains('const t1 = _template("<div></div>")')
- expect(code).contains('const t3 = _template("<span></span>")')
- expect(code).contains('const t4 = _template("<p></p>")')
+ expect(code).contains('const t1 = _template("<div>")')
+ expect(code).contains('const t3 = _template("<span>")')
+ expect(code).contains('const t4 = _template("<p>")')
})
test('should bump placeholder var (p*) on conflict', () => {
exports[`compiler: transition > basic 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
exports[`compiler: transition > inject persisted when child has v-show 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, { persisted: () => ("") }, {
exports[`compiler: transition > the v-if/else-if/else branches in Transition should ignore comments 1`] = `
"import { VaporTransition as _VaporTransition, setInsertionState as _setInsertionState, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<div>hey</div>")
-const t1 = _template("<p></p>")
-const t2 = _template("<div></div>")
+const t0 = _template("<div>hey")
+const t1 = _template("<p>")
+const t2 = _template("<div>")
export function render(_ctx) {
const n16 = _createComponent(_VaporTransition, null, {
exports[`compiler: transition > v-show + appear 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
export function render(_ctx) {
const deferredApplyVShows = []
exports[`compiler: transition > work with dynamic keyed children 1`] = `
"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
export function render(_ctx) {
const n1 = _createComponent(_VaporTransition, null, {
exports[`compiler: transition > work with v-if 1`] = `
"import { VaporTransition as _VaporTransition, createIf as _createIf, createComponent as _createComponent, template as _template } from 'vue';
-const t0 = _template("<h1>foo</h1>")
+const t0 = _template("<h1>foo")
export function render(_ctx) {
const n3 = _createComponent(_VaporTransition, null, {
exports[`compiler: expression > empty interpolation 3`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: expression > empty interpolation 4`] = `
"import { child as _child, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler: expression > update expression 1`] = `
"import { child as _child, txt as _txt, setProp as _setProp, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
"import { template as _template } from 'vue';
import _imports_0 from '@svg/file.svg';
-const t0 = _template("<use href=\\"" + _imports_0 + '#fragment' + "\\"></use>", false, 1)
+const t0 = _template("<use href=\\"" + _imports_0 + '#fragment' + "\\">", false, 1)
export function render(_ctx) {
const n0 = t0()
exports[`compiler sfc: transform asset url > support uri is empty 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<use href=\\"\\"></use>", true, 1)
+const t0 = _template("<use href=\\"\\">", true, 1)
export function render(_ctx) {
const n0 = t0()
"import { template as _template } from 'vue';
import _imports_0 from './bar.png';
import _imports_1 from '/bar.png';
-const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\"></div>", true)
+const t0 = _template("<div><img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", true)
export function render(_ctx) {
const n0 = t0()
"import { template as _template } from 'vue';
import _imports_0 from './logo.png';
import _imports_1 from '/logo.png';
-const t0 = _template("<div><img src=\\"" + _imports_0 + "\\" srcset><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\"></div>", true)
+const t0 = _template("<div><img src=\\"" + _imports_0 + "\\" srcset><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_0 + "\\" srcset=\\"" + _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x' + "\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_1 + ' 2x' + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"" + _imports_1 + "\\" srcset=\\"" + _imports_1 + ', ' + _imports_0 + ' 2x' + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: children transform > anchor insertion in middle 1`] = `
"import { child as _child, next as _next, setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
-const t1 = _template("<div><div></div><!><div></div></div>", true)
+const t0 = _template("<div>")
+const t1 = _template("<div><div></div><!><div>", true)
export function render(_ctx) {
const n4 = t1()
exports[`compiler: children transform > children & sibling references 1`] = `
"import { child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><p> </p> <p> </p></div>", true)
+const t0 = _template("<div><p> </p> <p> ", true)
export function render(_ctx) {
const n3 = t0()
exports[`compiler: children transform > efficient find 1`] = `
"import { child as _child, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div>x</div><div>x</div><div> </div></div>", true)
+const t0 = _template("<div><div>x</div><div>x</div><div> ", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler: children transform > efficient traversal 1`] = `
"import { child as _child, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div><div>x</div><div><span> </span></div><div><span> </span></div><div><span> </span></div></div>", true)
+const t0 = _template("<div><div>x</div><div><span> </div><div><span> </div><div><span> ", true)
export function render(_ctx) {
const n3 = t0()
exports[`compiler: element transform > MathML 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<math><mrow><mi>x</mi></mrow></math>", true, 2)
+const t0 = _template("<math><mrow><mi>x", true, 2)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > b in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><b></b></div><div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > invalid html nesting 1`] = `
"import { insert as _insert, template as _template } from 'vue';
-const t0 = _template("<div>123</div>")
-const t1 = _template("<p></p>")
-const t2 = _template("<form></form>")
+const t0 = _template("<div>123")
+const t1 = _template("<p>")
+const t2 = _template("<form>")
export function render(_ctx) {
const n1 = t1()
}"
`;
+exports[`compiler: element transform > multiple roots 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><span>")
+
+export function render(_ctx) {
+ const n0 = t0()
+ const n1 = t0()
+ return [n0, n1]
+}"
+`;
+
+exports[`compiler: element transform > props + child 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div id=\\"foo\\"><span>", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
exports[`compiler: element transform > props + children 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\"><span></span></div>", true)
+const t0 = _template("<div id=\\"foo\\"><span><b></b></span><main><b></b><div><div><span></span><span>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > props merging: class 1`] = `
"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > props merging: event handlers 1`] = `
"import { createInvoker as _createInvoker, delegate as _delegate, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`compiler: element transform > props merging: style 1`] = `
"import { setStyle as _setStyle, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
}"
`;
+exports[`compiler: element transform > pure nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><div></div></div><div>", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
+exports[`compiler: element transform > span in nested divs 1`] = `
+"import { template as _template } from 'vue';
+const t0 = _template("<div><div><span></div><div>", true)
+
+export function render(_ctx) {
+ const n0 = t0()
+ return n0
+}"
+`;
+
exports[`compiler: element transform > static props 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>", true)
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\">", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > svg 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<svg><circle r=\\"40\\"></circle></svg>", true, 1)
+const t0 = _template("<svg><circle r=\\"40\\">", true, 1)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: element transform > v-on="obj" 1`] = `
"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: template ref transform > dynamic ref 1`] = `
"import { renderEffect as _renderEffect, setRef as _setRef, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`compiler: template ref transform > ref + v-for 1`] = `
"import { setRef as _setRef, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createFor(() => ([1,2,3]), (_block) => {
exports[`compiler: template ref transform > ref + v-if 1`] = `
"import { setRef as _setRef, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createIf(() => (true), () => {
exports[`compiler: template ref transform > static ref 1`] = `
"import { setRef as _setRef, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`compiler: transform <slot> outlets > default slot outlet with fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createSlot("default", null, () => {
exports[`compiler: transform <slot> outlets > default slot outlet with props & fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createSlot("default", { foo: () => (_ctx.bar) }, () => {
exports[`compiler: transform <slot> outlets > named slot outlet with fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createSlot("foo", null, () => {
exports[`compiler: transform <slot> outlets > named slot outlet with props & fallback 1`] = `
"import { createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createSlot("foo", { foo: () => (_ctx.bar) }, () => {
exports[`compiler: template ref transform > dynamic ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > function ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > ref + v-for 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > ref + v-if 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: template ref transform > static ref 1`] = `
"import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _setTemplateRef = _createTemplateRefSetter()
exports[`compiler: text transform > constant text 1`] = `
"import { child as _child, template as _template } from 'vue';
-const t0 = _template("<div>2 foo1 1 1 1</div>", true)
+const t0 = _template("<div>2 foo1 1 1 1", true)
export function render(_ctx) {
const n1 = t0()
exports[`cache multiple access > TSNonNullExpression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > cache variable used in both property shorthand and normal binding 1`] = `
"import { setStyle as _setStyle, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > dynamic key bindings with expressions 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > dynamic property access 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > dynamic property access with parentheses 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > function calls with arguments 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > not cache variable and member expression with the same name 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > not cache variable in function expression 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > not cache variable only used in property shorthand 1`] = `
"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > object property chain access 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > object property name substring cases 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > optional chaining 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > repeated expression in expressions 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > repeated expressions 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > repeated variable in expressions 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > repeated variables 1`] = `
"import { setClass as _setClass, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > shared member root 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > shared member root with TSNonNullExpression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > should cache method call with same arguments 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > should cache optional call expression with same arguments 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > should not cache method call with different arguments 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = t0()
exports[`cache multiple access > variable name substring edge cases 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ innerHTML 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ progress value 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ textContent 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .attr modifier w/ value 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier w/ dynamic arg + prefixIdentifiers 1`] = `
"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
"import { camelize as _camelize, setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ no expression 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ progress value 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ textContent 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier (shorthand) w/ value 1`] = `
"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ dynamic arg + prefixIdentifiers 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ progress value 1`] = `
"import { setDOMProp as _setDOMProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ textContent 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > .prop modifier w/ value 1`] = `
"import { setValue as _setValue, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :class w/ svg elements 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>", true, 1)
+const t0 = _template("<svg>", true, 1)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :textContext 1`] = `
"import { setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > :value w/ progress 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<progress></progress>", true)
+const t0 = _template("<progress>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > attributes must be set as attribute 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
const t1 = _template("<input>")
-const t2 = _template("<textarea></textarea>")
+const t2 = _template("<textarea>")
const t3 = _template("<img>")
-const t4 = _template("<video></video>")
-const t5 = _template("<canvas></canvas>")
+const t4 = _template("<video>")
+const t5 = _template("<canvas>")
const t6 = _template("<source>")
export function render(_ctx) {
exports[`compiler v-bind > basic 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > dynamic arg 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > no expression (shorthand) 1`] = `
"import { setAttr as _setAttr, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > no expression 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > should error if empty expression 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div arg></div>", true)
+const t0 = _template("<div arg>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > v-bind w/ svg elements 1`] = `
"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<svg></svg>", true, 1)
+const t0 = _template("<svg>", true, 1)
export function render(_ctx) {
const n0 = t0()
exports[`compiler v-bind > with constant value 1`] = `
"import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div e=\\"2\\" f=\\"foo1\\" g=\\"1\\" h=\\"1\\"></div>", true)
+const t0 = _template("<div e=\\"2\\" f=\\"foo1\\" g=\\"1\\" h=\\"1\\">", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`compiler: v-for > array de-structured value (with rest) 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
exports[`compiler: v-for > array de-structured value 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
exports[`compiler: v-for > basic v-for 1`] = `
"import { txt as _txt, createInvoker as _createInvoker, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
_delegateEvents("click")
export function render(_ctx) {
exports[`compiler: v-for > key only binding pattern 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>")
+const t0 = _template("<tr> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
exports[`compiler: v-for > multi effect 1`] = `
"import { setProp as _setProp, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0, _for_key0) => {
exports[`compiler: v-for > nested v-for 1`] = `
"import { setInsertionState as _setInsertionState, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span> </span>")
-const t1 = _template("<div></div>")
+const t0 = _template("<span> ")
+const t1 = _template("<div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
exports[`compiler: v-for > object de-structured value (with rest) 1`] = `
"import { getRestElement as _getRestElement, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0) => {
exports[`compiler: v-for > object de-structured value 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<span> </span>")
+const t0 = _template("<span> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
exports[`compiler: v-for > object value, key and index 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0, _for_key0, _for_index0) => {
exports[`compiler: v-for > selector pattern 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr> </tr>")
+const t0 = _template("<tr> ")
export function render(_ctx) {
let _selector0_0
exports[`compiler: v-for > selector pattern 2`] = `
"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>")
+const t0 = _template("<tr>")
export function render(_ctx) {
let _selector0_0
exports[`compiler: v-for > selector pattern 3`] = `
"import { setClass as _setClass, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>")
+const t0 = _template("<tr>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.rows), (_for_item0) => {
exports[`compiler: v-for > selector pattern 4`] = `
"import { setClass as _setClass, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<tr></tr>")
+const t0 = _template("<tr>")
export function render(_ctx) {
let _selector0_0
exports[`compiler: v-for > v-for aliases w/ complex expressions 1`] = `
"import { getDefaultValue as _getDefaultValue, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
exports[`compiler: v-for > w/o value 1`] = `
"import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div>item</div>")
+const t0 = _template("<div>item")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.items), (_for_item0) => {
exports[`v-html > should convert v-html to innerHTML 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-html > should raise error if has no expression 1`] = `
"import { setHtml as _setHtml, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-if > basic v-if 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > comment between branches 1`] = `
"import { createIf as _createIf, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
const t1 = _template("<!--foo-->")
-const t2 = _template("<p></p>")
+const t2 = _template("<p>")
const t3 = _template("<!--bar-->")
const t4 = _template("fine")
-const t5 = _template("<div> </div>")
+const t5 = _template("<div> ")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > dedupe same template 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hello</div>")
+const t0 = _template("<div>hello")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > multiple v-if at root 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>foo</div>")
-const t1 = _template("<div>bar</div>")
-const t2 = _template("<div>baz</div>")
+const t0 = _template("<div>foo")
+const t1 = _template("<div>bar")
+const t2 = _template("<div>baz")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > template v-if (multiple element) 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>")
-const t1 = _template("<div>ho</div>")
+const t0 = _template("<div>hi")
+const t1 = _template("<div>ho")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > template v-if (single element) 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>", true)
+const t0 = _template("<div>hi", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > template v-if (with v-for inside) 1`] = `
"import { createFor as _createFor, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > template v-if + normal v-else 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>hi</div>")
-const t1 = _template("<div>ho</div>")
-const t2 = _template("<div></div>", true)
+const t0 = _template("<div>hi")
+const t1 = _template("<div>ho")
+const t2 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > template v-if 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
const t1 = _template("hello")
-const t2 = _template("<p> </p>")
+const t2 = _template("<p> ")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > v-if + v-else 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > v-if + v-else-if + v-else 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
const t2 = _template("fine", true)
export function render(_ctx) {
exports[`compiler: v-if > v-if + v-else-if 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > v-if + v-if / v-else[-if] 1`] = `
"import { setInsertionState as _setInsertionState, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<span>foo</span>")
-const t1 = _template("<span>bar</span>")
-const t2 = _template("<span>baz</span>")
-const t3 = _template("<div></div>", true)
+const t0 = _template("<span>foo")
+const t1 = _template("<span>bar")
+const t2 = _template("<span>baz")
+const t3 = _template("<div>", true)
export function render(_ctx) {
const n8 = t3()
exports[`compiler: v-if > v-if and extra at root 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div>foo</div>")
-const t1 = _template("<div>bar</div>")
-const t2 = _template("<div>baz</div>")
+const t0 = _template("<div>foo")
+const t1 = _template("<div>bar")
+const t2 = _template("<div>baz")
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.foo), () => {
exports[`compiler: v-if > v-if with v-once 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.ok), () => {
exports[`compiler: v-if > v-on with v-if 1`] = `
"import { setDynamicEvents as _setDynamicEvents, renderEffect as _renderEffect, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<button>w/ v-if</button>", true)
+const t0 = _template("<button>w/ v-if", true)
export function render(_ctx) {
const n0 = _createIf(() => (true), () => {
exports[`compiler: vModel transform > should support select 1`] = `
"import { applySelectModel as _applySelectModel, template as _template } from 'vue';
-const t0 = _template("<select></select>", true)
+const t0 = _template("<select>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: vModel transform > should support textarea 1`] = `
"import { applyTextModel as _applyTextModel, template as _template } from 'vue';
-const t0 = _template("<textarea></textarea>", true)
+const t0 = _template("<textarea>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > complex member expression w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > dynamic arg 1`] = `
"import { createInvoker as _createInvoker, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
"import { createInvoker as _createInvoker, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > dynamic arg with prefixing 1`] = `
"import { createInvoker as _createInvoker, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > event modifier 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, on as _on, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<a></a>")
-const t1 = _template("<form></form>")
-const t2 = _template("<div></div>")
+const t0 = _template("<a>")
+const t1 = _template("<form>")
+const t2 = _template("<div>")
const t3 = _template("<input>")
_delegateEvents("click", "contextmenu", "mouseup", "keyup")
exports[`v-on > expression with type 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx, $props, $emit, $attrs, $slots) {
exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should delegate event 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should handle multi-line statement 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should handle multiple inline statement 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should not prefix member expression 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("keyup")
export function render(_ctx) {
exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click", "keyup")
export function render(_ctx) {
exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should transform click.middle 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("mouseup")
export function render(_ctx) {
exports[`v-on > should transform click.middle 2`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should transform click.right 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("contextmenu")
export function render(_ctx) {
exports[`v-on > should transform click.right 2`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should use delegate helper when have multiple events of same name 1`] = `
"import { createInvoker as _createInvoker, delegate as _delegate, withModifiers as _withModifiers, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should wrap as function if expression is inline statement 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx) {
exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, withKeys as _withKeys, on as _on, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = `
"import { createInvoker as _createInvoker, withModifiers as _withModifiers, withKeys as _withKeys, on as _on, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
"import { createInvoker as _createInvoker, withKeys as _withKeys, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("keyup")
export function render(_ctx) {
exports[`v-on > simple expression 1`] = `
"import { createInvoker as _createInvoker, delegateEvents as _delegateEvents, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
_delegateEvents("click")
export function render(_ctx, $props, $emit, $attrs, $slots) {
exports[`compiler: v-once > as root node 1`] = `
"import { setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-once > basic 1`] = `
"import { child as _child, next as _next, toDisplayString as _toDisplayString, setText as _setText, setClass as _setClass, template as _template } from 'vue';
-const t0 = _template("<div> <span></span></div>", true)
+const t0 = _template("<div> <span>", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n2 = t0()
exports[`compiler: v-once > inside v-once 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: v-once > on component 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: v-once > on nested plain element 1`] = `
"import { child as _child, setProp as _setProp, template as _template } from 'vue';
-const t0 = _template("<div><div></div></div>", true)
+const t0 = _template("<div><div>", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler: v-once > on slot outlet 1`] = `
"import { setInsertionState as _setInsertionState, createSlot as _createSlot, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n1 = t0()
exports[`compiler: v-once > with v-for 1`] = `
"import { createFor as _createFor, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const n0 = _createFor(() => (_ctx.list), (_for_item0) => {
exports[`compiler: v-once > with v-if 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.expr), () => {
exports[`compiler: v-once > with v-if/else 1`] = `
"import { createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
-const t1 = _template("<p></p>", true)
+const t0 = _template("<div>", true)
+const t1 = _template("<p>", true)
export function render(_ctx) {
const n0 = _createIf(() => (_ctx.expr), () => {
exports[`compiler: v-show transform > simple expression 1`] = `
"import { applyVShow as _applyVShow, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
exports[`compiler: transform slot > implicit default slot 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template("foo")
const t1 = _template("bar")
-const t2 = _template("<span></span>")
+const t2 = _template("<span>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: transform slot > slot + v-if / v-else[-if] should not cause error 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createSlot as _createSlot, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const _component_Foo = _resolveComponent("Foo")
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
const t0 = _template(" Header ")
const t1 = _template(" ")
-const t2 = _template("<p></p>")
+const t2 = _template("<p>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with component inside v-for should have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createFor as _createFor, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_ChildComp = _resolveComponent("ChildComp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with component inside v-if should have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_ChildComp = _resolveComponent("ChildComp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with custom element inside v-if should have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createPlainElement as _createPlainElement, createIf as _createIf, withVaporCtx as _withVaporCtx, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div></div>")
+const t0 = _template("<div>")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with nested v-if containing component should have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, createIf as _createIf, withVaporCtx as _withVaporCtx, template as _template } from 'vue';
-const t0 = _template("<span></span>")
-const t1 = _template("<div></div>")
+const t0 = _template("<span>")
+const t1 = _template("<div>")
export function render(_ctx) {
const _component_ChildComp = _resolveComponent("ChildComp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with only static elements should not have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div>static content</div>")
+const t0 = _template("<div>static content")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with v-for but no component should not have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createFor as _createFor, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div> </div>")
+const t0 = _template("<div> ")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`compiler: transform slot > withVaporCtx optimization > slot with v-if but no component should not have withVaporCtx 1`] = `
"import { resolveComponent as _resolveComponent, createIf as _createIf, createComponentWithFallback as _createComponentWithFallback, template as _template } from 'vue';
-const t0 = _template("<div>content</div>")
-const t1 = _template("<span>fallback</span>")
+const t0 = _template("<div>content")
+const t1 = _template("<span>fallback")
export function render(_ctx) {
const _component_Comp = _resolveComponent("Comp")
exports[`v-text > should convert v-text to setText 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx, $props, $emit, $attrs, $slots) {
const n0 = t0()
exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
-const t0 = _template("<div> </div>", true)
+const t0 = _template("<div> ", true)
export function render(_ctx) {
const n0 = t0()
exports[`v-text > should raise error if has no expression 1`] = `
"import { template as _template } from 'vue';
-const t0 = _template("<div></div>", true)
+const t0 = _template("<div>", true)
export function render(_ctx) {
const n0 = t0()
`<div id="foo" class="bar" />`,
)
- const template = '<div id="foo" class="bar"></div>'
+ const template = '<div id="foo" class="bar">'
expect(code).toMatchSnapshot()
expect(code).contains(JSON.stringify(template))
expect([...ir.template.keys()]).toMatchObject([template])
expect(code).toMatchSnapshot()
})
- test('props + children', () => {
+ test('props + child', () => {
const { code, ir } = compileWithElementTransform(
`<div id="foo"><span/></div>`,
)
- const template = '<div id="foo"><span></span></div>'
+ const template = '<div id="foo"><span>'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect([...ir.template.keys()]).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('props + children', () => {
+ const { code, ir } = compileWithElementTransform(
+ `<div id="foo"><span><b/></span><main><b/><div><div><span/><span/></div></div></main></div>`,
+ )
+
+ const template =
+ '<div id="foo"><span><b></b></span><main><b></b><div><div><span></span><span>'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect([...ir.template.keys()]).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('span in nested divs', () => {
+ const { code, ir } = compileWithElementTransform(
+ `<div><div><span/></div><div/></div>`,
+ )
+
+ const template = '<div><div><span></div><div>'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect([...ir.template.keys()]).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('b in nested divs', () => {
+ const { code, ir } = compileWithElementTransform(
+ `<div><div><b/></div><div/></div>`,
+ )
+
+ const template = '<div><div><b></b></div><div>'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect([...ir.template.keys()]).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('pure nested divs', () => {
+ const { code, ir } = compileWithElementTransform(
+ `<div><div><div/></div><div/></div>`,
+ )
+
+ const template = '<div><div><div></div></div><div>'
+ expect(code).toMatchSnapshot()
+ expect(code).contains(JSON.stringify(template))
+ expect([...ir.template.keys()]).toMatchObject([template])
+ expect(ir.block.effect).lengthOf(0)
+ })
+
+ test('multiple roots', () => {
+ const { code, ir } = compileWithElementTransform(
+ `<div><span/></div><div><span /></div>`,
+ )
+
+ const template = '<div><span>'
expect(code).toMatchSnapshot()
expect(code).contains(JSON.stringify(template))
expect([...ir.template.keys()]).toMatchObject([template])
<form><form/></form>`,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()]).toEqual([
- '<div>123</div>',
- '<p></p>',
- '<form></form>',
- ])
+ expect([...ir.template.keys()]).toEqual(['<div>123', '<p>', '<form>'])
expect(ir.block.dynamic).toMatchObject({
children: [
{ id: 1, template: 1, children: [{ id: 0, template: 0 }] },
const t = `<svg><circle r="40"></circle></svg>`
const { code, ir } = compileWithElementTransform(t)
expect(code).toMatchSnapshot()
- expect(code).contains(
- '_template("<svg><circle r=\\"40\\"></circle></svg>", true, 1)',
- )
- expect([...ir.template.keys()]).toMatchObject([t])
- expect(ir.template.get(t)).toBe(1)
+ expect(code).contains('_template("<svg><circle r=\\"40\\">", true, 1)')
+ expect([...ir.template.keys()]).toMatchObject(['<svg><circle r="40">'])
+ expect(ir.template.get('<svg><circle r="40">')).toBe(1)
})
test('MathML', () => {
const t = `<math><mrow><mi>x</mi></mrow></math>`
const { code, ir } = compileWithElementTransform(t)
expect(code).toMatchSnapshot()
- expect(code).contains(
- '_template("<math><mrow><mi>x</mi></mrow></math>", true, 2)',
- )
- expect([...ir.template.keys()]).toMatchObject([t])
- expect(ir.template.get(t)).toBe(2)
+ expect(code).contains('_template("<math><mrow><mi>x", true, 2)')
+ expect([...ir.template.keys()]).toMatchObject(['<math><mrow><mi>x'])
+ expect(ir.template.get('<math><mrow><mi>x')).toBe(2)
})
})
test('default slot outlet with fallback', () => {
const { ir, code } = compileWithSlotsOutlet(`<slot><div/></slot>`)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()][0]).toBe('<div></div>')
+ expect([...ir.template.keys()][0]).toBe('<div>')
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.SLOT_OUTLET_NODE,
id: 0,
`<slot name="foo"><div/></slot>`,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()][0]).toBe('<div></div>')
+ expect([...ir.template.keys()][0]).toBe('<div>')
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.SLOT_OUTLET_NODE,
id: 0,
`<slot :foo="bar"><div/></slot>`,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()][0]).toBe('<div></div>')
+ expect([...ir.template.keys()][0]).toBe('<div>')
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.SLOT_OUTLET_NODE,
id: 0,
`<slot name="foo" :foo="bar"><div/></slot>`,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()][0]).toBe('<div></div>')
+ expect([...ir.template.keys()][0]).toBe('<div>')
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.SLOT_OUTLET_NODE,
id: 0,
id: 0,
flags: DynamicFlag.REFERENCED,
})
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.operation).lengthOf(1)
expect(ir.block.operation[0]).toMatchObject({
type: IRNodeTypes.SET_TEMPLATE_REF,
id: 0,
flags: DynamicFlag.REFERENCED,
})
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.DECLARE_OLD_REF,
id: 0,
flags: DynamicFlag.REFERENCED,
})
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.operation).toMatchObject([
{
type: IRNodeTypes.DECLARE_OLD_REF,
it('escapes raw static text when generating the template string', () => {
const { ir } = compileWithTextTransform('<code><script></code>')
- expect([...ir.template.keys()]).toContain('<code><script></code>')
- expect([...ir.template.keys()]).not.toContain('<code><script></code>')
+ expect([...ir.template.keys()]).toContain('<code><script>')
+ expect([...ir.template.keys()]).not.toContain('<code><script>')
})
test('constant text', () => {
{{ '1' }}
</div>`,
)
- expect(code).includes(`_template("<div>2 foo1 1 1 1</div>", true)`)
+ expect(code).includes(`_template("<div>2 foo1 1 1 1", true)`)
expect(code).toMatchSnapshot()
})
})
id: 0,
flags: DynamicFlag.REFERENCED,
})
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.effect).lengthOf(1)
expect(ir.block.effect[0].expressions).lengthOf(1)
expect(ir.block.effect[0].operations).lengthOf(1)
end: { line: 1, column: 19 },
},
})
- expect([...ir.template.keys()]).toEqual(['<div arg></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div arg>'])
expect(code).matchSnapshot()
- expect(code).contains(JSON.stringify('<div arg></div>'))
+ expect(code).contains(JSON.stringify('<div arg>'))
})
test('error on invalid argument for same-name shorthand', () => {
expect(code).matchSnapshot()
expect(helpers).contains('createFor')
- expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+ expect([...ir.template.keys()]).toEqual(['<div> '])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.FOR,
id: 0,
`_createFor(() => (_for_item0.value), (_for_item1) => {`,
)
expect(code).contains(`_for_item1.value+_for_item0.value`)
- expect([...ir.template.keys()]).toEqual(['<span> </span>', '<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<span> ', '<div>'])
const parentOp = ir.block.dynamic.children[0].operation
expect(parentOp).toMatchObject({
type: IRNodeTypes.FOR,
expect(helpers).contains('setHtml')
// children should have been removed
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.operation).toMatchObject([])
expect(ir.block.effect).toMatchObject([
expect(code).matchSnapshot()
// children should have been removed
- expect(code).contains('template("<div></div>", true)')
+ expect(code).contains('template("<div>", true)')
})
test('should raise error if has no expression', () => {
expect(helpers).contains('createIf')
- expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+ expect([...ir.template.keys()]).toEqual(['<div> '])
const op = ir.block.dynamic.children[0].operation
expect(op).toMatchObject({
)
expect(code).toMatchSnapshot()
- expect(code).contains(`_template("<div>foo</div>")`)
- expect(code).contains(`_template("<div>bar</div>")`)
- expect(code).contains(`_template("<div>baz</div>")`)
+ expect(code).contains(`_template("<div>foo")`)
+ expect(code).contains(`_template("<div>bar")`)
+ expect(code).contains(`_template("<div>baz")`)
expect([...ir.template.keys()]).toMatchObject([
- '<div>foo</div>',
- '<div>bar</div>',
- '<div>baz</div>',
+ '<div>foo',
+ '<div>bar',
+ '<div>baz',
])
})
)
expect(code).toMatchSnapshot()
- expect(code).contains(`_template("<div>foo</div>")`)
- expect(code).contains(`_template("<div>bar</div>")`)
- expect(code).contains(`_template("<div>baz</div>")`)
+ expect(code).contains(`_template("<div>foo")`)
+ expect(code).contains(`_template("<div>bar")`)
+ expect(code).contains(`_template("<div>baz")`)
expect([...ir.template.keys()]).toMatchObject([
- '<div>foo</div>',
- '<div>bar</div>',
- '<div>baz</div>',
+ '<div>foo',
+ '<div>bar',
+ '<div>baz',
])
})
)
expect(code).matchSnapshot()
- expect([...ir.template.keys()]).toEqual([
- '<div></div>',
- 'hello',
- '<p> </p>',
- ])
+ expect([...ir.template.keys()]).toEqual(['<div>', 'hello', '<p> '])
expect(ir.block.effect).toEqual([])
const op = ir.block.dynamic.children[0].operation as IfIRNode
expect(op.positive.effect).toMatchObject([
)
expect(code).toMatchSnapshot()
- expect(code).toContain('_template("<div>hi</div>", true)')
- expect([...ir.template.keys()]).toMatchObject(['<div>hi</div>'])
+ expect(code).toContain('_template("<div>hi", true)')
+ expect([...ir.template.keys()]).toMatchObject(['<div>hi'])
})
test('template v-if (multiple element)', () => {
)
expect(code).toMatchSnapshot()
- expect(code).toContain('_template("<div>hi</div>")')
- expect(code).toContain('_template("<div>ho</div>")')
- expect([...ir.template.keys()]).toMatchObject([
- '<div>hi</div>',
- '<div>ho</div>',
- ])
+ expect(code).toContain('_template("<div>hi")')
+ expect(code).toContain('_template("<div>ho")')
+ expect([...ir.template.keys()]).toMatchObject(['<div>hi', '<div>ho'])
})
test('template v-if (with v-for inside)', () => {
)
expect(code).toMatchSnapshot()
- expect(code).toContain('_template("<div></div>")')
- expect([...ir.template.keys()]).toMatchObject(['<div></div>'])
+ expect(code).toContain('_template("<div>")')
+ expect([...ir.template.keys()]).toMatchObject(['<div>'])
})
test('template v-if + normal v-else', () => {
)
expect(code).toMatchSnapshot()
- expect(code).toContain('_template("<div>hi</div>")')
- expect(code).toContain('_template("<div>ho</div>")')
- expect(code).toContain('_template("<div></div>", true)')
+ expect(code).toContain('_template("<div>hi")')
+ expect(code).toContain('_template("<div>ho")')
+ expect(code).toContain('_template("<div>", true)')
expect([...ir.template.keys()]).toMatchObject([
- '<div>hi</div>',
- '<div>ho</div>',
- '<div></div>',
+ '<div>hi',
+ '<div>ho',
+ '<div>',
])
})
`<div v-if="ok">hello</div><div v-if="ok">hello</div>`,
)
expect(code).matchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<div>hello</div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>hello'])
expect(ir.block.returns).toEqual([0, 3])
})
)
expect(code).matchSnapshot()
expect(helpers).contains('createIf')
- expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+ expect([...ir.template.keys()]).toEqual(['<div> '])
})
test('component v-if', () => {
test('v-if + v-else', () => {
const { code, ir, helpers } = compileWithVIf(`<div v-if="ok"/><p v-else/>`)
expect(code).matchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<div></div>', '<p></p>'])
+ expect([...ir.template.keys()]).toEqual(['<div>', '<p>'])
expect(helpers).contains('createIf')
expect(ir.block.effect).lengthOf(0)
`<div v-if="ok"/><p v-else-if="orNot"/>`,
)
expect(code).matchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<div></div>', '<p></p>'])
+ expect([...ir.template.keys()]).toEqual(['<div>', '<p>'])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.IF,
`<div v-if="ok"/><p v-else-if="orNot"/><p v-else-if="false"/><template v-else>fine</template>`,
)
expect(code).matchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<div></div>', '<p></p>', 'fine'])
+ expect([...ir.template.keys()]).toEqual(['<div>', '<p>', 'fine'])
expect(ir.block.returns).toEqual([0])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
`)
expect(code).matchSnapshot()
expect([...ir.template.keys()]).toEqual([
- '<div></div>',
+ '<div>',
'<!--foo-->',
- '<p></p>',
+ '<p>',
'<!--bar-->',
'fine',
- '<div> </div>',
+ '<div> ',
])
})
`<button v-on="{ click: clickEvent }" v-if="true">w/ v-if</button>`,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<button>w/ v-if</button>'])
+ expect([...ir.template.keys()]).toEqual(['<button>w/ v-if'])
expect(ir.block.returns).toEqual([0])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
const { ir, code } = compileWithSlots(`<Comp><div/></Comp>`)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()]).toEqual(['<div></div>'])
+ expect([...ir.template.keys()]).toEqual(['<div>'])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.CREATE_COMPONENT_NODE,
id: 1,
)
expect(code).toMatchSnapshot()
- expect([...ir.template.keys()]).toEqual(['foo', 'bar', '<span></span>'])
+ expect([...ir.template.keys()]).toEqual(['foo', 'bar', '<span>'])
expect(ir.block.dynamic.children[0].operation).toMatchObject({
type: IRNodeTypes.CREATE_COMPONENT_NODE,
id: 4,
])
// children should have been removed
- expect([...ir.template.keys()]).toEqual(['<div> </div>'])
+ expect([...ir.template.keys()]).toEqual(['<div> '])
expect(ir.block.effect).toMatchObject([
{
expect(code).matchSnapshot()
// children should have been removed
- expect(code).contains('template("<div> </div>", true)')
+ expect(code).contains('template("<div> ", true)')
})
test('should raise error if has no expression', () => {
export class TransformContext<T extends AllNode = AllNode> {
selfName: string | null = null
parent: TransformContext<RootNode | ElementNode> | null = null
+ // cached parent that skips template tags
+ effectiveParent: TransformContext<RootNode | ElementNode> | null = null
root: TransformContext<RootNode>
index: number = 0
slots: IRSlots[] = []
+ // whether this node is the last effective child of its parent
+ // (all siblings after it are components, which don't appear in HTML template)
+ isLastEffectiveChild: boolean = true
+ // whether this node is on the rightmost path of the tree
+ // (all ancestors are also last effective children)
+ isOnRightmostPath: boolean = true
+
private globalId = 0
private nextIdMap: Map<number, number> | null = null
node: T,
index: number,
): TransformContext<T> {
+ // find effectiveParent (skip template tags)
+ let effectiveParent: TransformContext<RootNode | ElementNode> | null =
+ this as TransformContext<RootNode | ElementNode>
+ while (
+ effectiveParent &&
+ effectiveParent.node.type === NodeTypes.ELEMENT &&
+ (effectiveParent.node as ElementNode).tagType === ElementTypes.TEMPLATE
+ ) {
+ effectiveParent = effectiveParent.parent
+ }
+
+ // compute whether this node is effectively the last child
+ const isLastEffectiveChild = this.isEffectivelyLastChild(index)
+ const isOnRightmostPath = this.isOnRightmostPath && isLastEffectiveChild
+
return Object.assign(Object.create(TransformContext.prototype), this, {
node,
parent: this as any,
template: '',
childrenTemplate: [],
dynamic: newDynamic(),
+ effectiveParent,
+ isLastEffectiveChild,
+ isOnRightmostPath,
} satisfies Partial<TransformContext<T>>)
}
+
+ private isEffectivelyLastChild(index: number): boolean {
+ const children = (this.node as ElementNode).children
+ if (!children) return true
+
+ return children.every(
+ (c, i) =>
+ i <= index ||
+ (c.type === NodeTypes.ELEMENT && c.tagType === ElementTypes.COMPONENT),
+ )
+ }
}
const defaultOptions = {
capitalize,
extend,
isBuiltInDirective,
+ isFormattingTag,
isVoidTag,
makeMap,
} from '@vue/shared'
)
const singleRoot = isSingleRoot(context)
+
if (isComponent) {
transformComponentElement(
node as ComponentNode,
singleRoot,
context,
getEffectIndex,
+ // Root-level elements generate dedicated templates
+ // so closing tags can be omitted
+ context.root === context.effectiveParent ||
+ canOmitEndTag(node as PlainElementNode, context),
)
}
}
}
+function canOmitEndTag(
+ node: PlainElementNode,
+ context: TransformContext,
+): boolean {
+ const { block, parent } = context
+
+ if (!parent) return false
+
+ // If in a different block than parent, this is a block root element
+ // and can omit the closing tag
+ if (block !== parent.block) {
+ return true
+ }
+
+ // Formatting tags and same-name nested tags require explicit closing
+ // unless on the rightmost path of the tree:
+ // - Formatting tags: https://html.spec.whatwg.org/multipage/parsing.html#reconstruct-the-active-formatting-elements
+ // - Same-name tags: parent's close tag would incorrectly close the child
+ if (
+ isFormattingTag(node.tag) ||
+ (parent.node.type === NodeTypes.ELEMENT && node.tag === parent.node.tag)
+ ) {
+ return context.isOnRightmostPath
+ }
+
+ return context.isLastEffectiveChild
+}
+
function isSingleRoot(
context: TransformContext<RootNode | TemplateChildNode>,
): boolean {
singleRoot: boolean,
context: TransformContext,
getEffectIndex: () => number,
+ omitEndTag: boolean,
) {
const { tag } = node
const { scopeId } = context.options
}
template += `>` + context.childrenTemplate.join('')
- // TODO remove unnecessary close tag, e.g. if it's the last element of the template
- if (!isVoidTag(tag)) {
+ if (!isVoidTag(tag) && !omitEndTag) {
template += `</${tag}>`
}
const VOID_TAGS =
'area,base,br,col,embed,hr,img,input,link,meta,param,source,track,wbr'
+// https://html.spec.whatwg.org/multipage/parsing.html#formatting
+const FORMATTING_TAGS = 'a,b,big,code,em,font,i,nobr,s,small,strike,strong,tt,u'
+
/**
* Compiler only.
* Do NOT use in runtime code paths unless behind `__DEV__` flag.
*/
export const isVoidTag: (key: string) => boolean =
/*@__PURE__*/ makeMap(VOID_TAGS)
+/**
+ * Compiler only.
+ * Do NOT use in runtime code paths unless behind `__DEV__` flag.
+ */
+export const isFormattingTag: (key: string) => boolean =
+ /*@__PURE__*/ makeMap(FORMATTING_TAGS)
projects / thirdparty / vuejs / core.git / commitdiff
