Skip to content

refactor(compile-vapor): skip unnecessary closing tags in templates #13667

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: minor
Choose a base branch
from
+495 −336
Open

refactor(compile-vapor): skip unnecessary closing tags in templates #13667

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3bf27c9
fix(compile-vapor): don't generate unnecessary closing tags in templates
cyyynthia Jul 20, 2025
f6ced78
chore(compiler-vapor): update snapshots and tests
cyyynthia Jul 20, 2025
8059826
fix(compiler-vapor): deal with formatting elements and ambiguous cases
cyyynthia Jul 20, 2025
9a3468c
test(runtime-vapor): add tests for template parsing behavior
cyyynthia Jul 26, 2025
52a8fa2
fix: bugs detected by rebased tests, update expects
cyyynthia Nov 30, 2025
369b70b
chore: get rid of redundant tests
cyyynthia Nov 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 33 additions & 33 deletions packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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()
Expand All @@ -14,7 +14,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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")
Expand All @@ -27,7 +27,7 @@ export function render(_ctx) {

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")
Expand All @@ -53,7 +53,7 @@ export function render(_ctx) {

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()
Expand All @@ -64,7 +64,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -75,7 +75,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -86,7 +86,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -97,7 +97,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -108,7 +108,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -119,7 +119,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -130,7 +130,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -140,7 +140,7 @@ export function render(_ctx) {

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()
Expand All @@ -150,8 +150,8 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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")
Expand Down Expand Up @@ -181,7 +181,7 @@ export function render(_ctx) {

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) {
Expand All @@ -199,7 +199,7 @@ 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()
Expand All @@ -214,8 +214,8 @@ export function render(_ctx) {

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")
Expand All @@ -238,7 +238,7 @@ export function render(_ctx) {

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")
Expand All @@ -254,7 +254,7 @@ export function render(_ctx) {

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()
Expand Down Expand Up @@ -292,7 +292,7 @@ exports[`compile > expression parsing > v-bind 1`] = `

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) => {
Expand All @@ -305,7 +305,7 @@ export function render(_ctx) {

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) {
Expand Down Expand Up @@ -334,9 +334,9 @@ 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()
Expand All @@ -348,7 +348,7 @@ export function render(_ctx) {

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()
Expand All @@ -360,7 +360,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -378,7 +378,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -400,7 +400,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -414,9 +414,9 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand All @@ -439,7 +439,7 @@ export function render(_ctx) {

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()
Expand Down
6 changes: 3 additions & 3 deletions packages/compiler-vapor/__tests__/__snapshots__/scopeId.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`scopeId compiler support > should wrap default slot 1`] = `
"import { resolveComponent as _resolveComponent, 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_Child = _resolveComponent("Child")
Expand All @@ -18,7 +18,7 @@ export function render(_ctx) {

exports[`scopeId compiler support > should wrap dynamic slots 1`] = `
"import { resolveComponent as _resolveComponent, withVaporCtx as _withVaporCtx, 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")
Expand Down Expand Up @@ -49,7 +49,7 @@ export function render(_ctx) {
exports[`scopeId compiler support > should wrap named slots 1`] = `
"import { resolveComponent as _resolveComponent, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, withVaporCtx as _withVaporCtx, 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")
Expand Down
8 changes: 4 additions & 4 deletions packages/compiler-vapor/__tests__/compile.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ describe('compile', () => {

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')
})
Expand Down Expand Up @@ -353,9 +353,9 @@ describe('compile', () => {
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', () => {
Expand Down
16 changes: 8 additions & 8 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`compiler: transition > basic 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, 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: () => ("") }, {
Expand All @@ -18,7 +18,7 @@ export function render(_ctx) {

exports[`compiler: transition > inject persisted when child has v-show 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, 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: () => ("") }, {
Expand All @@ -34,9 +34,9 @@ export function render(_ctx) {

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, withVaporCtx as _withVaporCtx, 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, {
Expand Down Expand Up @@ -71,7 +71,7 @@ export function render(_ctx) {

exports[`compiler: transition > v-show + appear 1`] = `
"import { VaporTransition as _VaporTransition, applyVShow as _applyVShow, withVaporCtx as _withVaporCtx, 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 = []
Expand All @@ -92,7 +92,7 @@ export function render(_ctx) {

exports[`compiler: transition > work with dynamic keyed children 1`] = `
"import { VaporTransition as _VaporTransition, createKeyedFragment as _createKeyedFragment, withVaporCtx as _withVaporCtx, 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, {
Expand All @@ -110,7 +110,7 @@ export function render(_ctx) {

exports[`compiler: transition > work with v-if 1`] = `
"import { VaporTransition as _VaporTransition, createIf as _createIf, withVaporCtx as _withVaporCtx, 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, {
Expand Down
6 changes: 3 additions & 3 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function render(_ctx) {

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()
Expand All @@ -43,7 +43,7 @@ export function render(_ctx) {

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()
Expand Down Expand Up @@ -82,7 +82,7 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {

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()
Expand Down
Loading
Loading