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 4 commits into
base: minor
Choose a base branch
from
+407 −231
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
4 commits
Select commit Hold shift + click to select a range
29149fb
fix(compile-vapor): don't generate unnecessary closing tags in templates
cyyynthia Jul 20, 2025
ebdb381
chore(compiler-vapor): update snapshots and tests
cyyynthia Jul 20, 2025
753f6e4
fix(compiler-vapor): deal with formatting elements and ambiguous cases
cyyynthia Jul 20, 2025
fb678dd
test(runtime-vapor): add tests for template parsing behavior
cyyynthia Jul 26, 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
46 changes: 23 additions & 23 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 { child as _child, 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, 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 { child as _child, 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 { child as _child, 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,7 +214,7 @@ export function render(_ctx) {

exports[`compile > execution order > with v-once 1`] = `
"import { child as _child, next as _next, nthChild as _nthChild, 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 @@ -252,9 +252,9 @@ exports[`compile > expression parsing > v-bind 1`] = `

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 @@ -266,8 +266,8 @@ export function render(_ctx) {

exports[`compile > 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 Down Expand Up @@ -301,7 +301,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
2 changes: 1 addition & 1 deletion packages/compiler-vapor/__tests__/compile.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,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
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, 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, 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
10 changes: 5 additions & 5 deletions packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@

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

exports[`compiler: children transform > children & sibling references 1`] = `
"import { child as _child, next as _next, 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()
Expand All @@ -39,7 +39,7 @@ export function render(_ctx) {

exports[`compiler: children transform > efficient find 1`] = `
"import { child as _child, nthChild as _nthChild, 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()
Expand All @@ -52,7 +52,7 @@ export function render(_ctx) {

exports[`compiler: children transform > efficient traversal 1`] = `
"import { child as _child, next as _next, 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()
Expand Down
Loading