perf(vapor): reduce codegen size for single DOM bindings

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -1,13 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compile > bindings 1`] = `
-"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<div> ", 1)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  const x0 = _txt(n0)
-  _renderEffect(() => _setText(x0, "count is " + _toDisplayString(_ctx.count) + "."))
+  _setTextBinding(n0, () => "count is " + _toDisplayString(_ctx.count) + ".")
   return n0
 }"
 `;
@@ -148,15 +147,15 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
-"import { setProp as _setProp, renderEffect as _renderEffect, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, child as _child, toDisplayString as _toDisplayString, setText as _setText, template as _template } from 'vue';
+"import { setPropBinding as _setPropBinding, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, child as _child, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div :id=foo><Comp></Comp>{{ bar }}", 2)
 const t1 = _template("<div> ")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
   const n3 = t1()
   const n2 = _child(n3, 1)
-  _renderEffect(() => _setProp(n3, "id", _ctx.foo))
+  _setPropBinding(n3, "id", () => _ctx.foo)
   _setInsertionState(n3, 0, 0)
   const n1 = _createAssetComponent("Comp")
   _renderEffect(() => _setText(n2, _toDisplayString(_ctx.bar)))
@@ -236,33 +235,32 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
 `;
 
 exports[`compile > execution order > flushes parent props before creating child component 1`] = `
-"import { setProp as _setProp, renderEffect as _renderEffect, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, template as _template } from 'vue';
+"import { setPropBinding as _setPropBinding, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, template as _template } from 'vue';
 const t0 = _template("<div>", 1)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = t0()
-  _renderEffect(() => _setProp(n1, "id", _ctx.useId()))
+  _setPropBinding(n1, "id", () => _ctx.useId())
   _setInsertionState(n1, null, 0)
   const n0 = _createAssetComponent("Child")
   return n1
 }"
 `;
 
 exports[`compile > execution order > flushes previous effects before creating child component 1`] = `
-"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, createAssetComponent as _createAssetComponent, template as _template } from 'vue';
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, createAssetComponent as _createAssetComponent, template as _template } from 'vue';
 const t0 = _template("<div> ")
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  const x0 = _txt(n0)
-  _renderEffect(() => _setText(x0, "parent: " + _toDisplayString(_ctx.useId())))
+  _setTextBinding(n0, () => "parent: " + _toDisplayString(_ctx.useId()))
   const n1 = _createAssetComponent("Child")
   return [n0, n1]
 }"
 `;
 
 exports[`compile > execution order > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
-"import { child as _child, next as _next, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, next as _next, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, nthChild as _nthChild, createIf as _createIf, setPropBinding as _setPropBinding, template as _template } from 'vue';
 const t0 = _template("<div>", 2)
 const t1 = _template("<div><div></div><!><div></div><!><div><button>", 1)
 
@@ -278,7 +276,7 @@ export function render(_ctx) {
     const n3 = t0()
     return n3
   }, null, 1, true)
-  _renderEffect(() => _setProp(n4, "disabled", _ctx.foo))
+  _setPropBinding(n4, "disabled", () => _ctx.foo)
   return n6
 }"
 `;
@@ -410,13 +408,12 @@ 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';
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding2, template as _template } from 'vue';
 const t0 = _template("<div> ", 1)
 
 export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n0 = t0()
-  const x0 = _txt2(n0)
-  _renderEffect(() => _setText(x0, _toDisplayString(_ctx.foo)))
+  _setTextBinding2(n0, () => _toDisplayString(_ctx.foo))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/__snapshots__/staticTemplate.spec.ts.snap

@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`static template marker > does not dedupe static and dynamic templates with identical html 1`] = `
-"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setPropBinding as _setPropBinding, template as _template } from 'vue';
 const t0 = _template("<span>", 2)
 const t1 = _template("<span>")
 
 export function render(_ctx) {
   const n0 = t0()
   const n1 = t1()
-  _renderEffect(() => _setProp(n1, "foo", _ctx.foo))
+  _setPropBinding(n1, "foo", () => _ctx.foo)
   return [n0, n1]
 }"
 `;
@@ -68,24 +68,23 @@ export function render(_ctx) {
 `;
 
 exports[`static template marker > does not mark single-root element with dynamic props 1`] = `
-"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setPropBinding as _setPropBinding, template as _template } from 'vue';
 const t0 = _template("<span>", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setProp(n0, "foo", _ctx.foo))
+  _setPropBinding(n0, "foo", () => _ctx.foo)
   return n0
 }"
 `;
 
 exports[`static template marker > does not mark single-root element with dynamic text content 1`] = `
-"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<span> ", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  const x0 = _txt(n0)
-  _renderEffect(() => _setText(x0, "hi " + _toDisplayString(_ctx.foo)))
+  _setTextBinding(n0, () => "hi " + _toDisplayString(_ctx.foo))
   return n0
 }"
 `;
@@ -103,24 +102,23 @@ export function render(_ctx) {
 `;
 
 exports[`static template marker > does not mark single-root element with v-html 1`] = `
-"import { setHtml as _setHtml, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setHtmlBinding as _setHtmlBinding, template as _template } from 'vue';
 const t0 = _template("<div>", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setHtml(n0, _ctx.foo))
+  _setHtmlBinding(n0, () => _ctx.foo)
   return n0
 }"
 `;
 
 exports[`static template marker > does not mark single-root element with v-text 1`] = `
-"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<div> ", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  const x0 = _txt(n0)
-  _renderEffect(() => _setText(x0, _toDisplayString(_ctx.foo)))
+  _setTextBinding(n0, () => _toDisplayString(_ctx.foo))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -304,7 +304,7 @@ describe('compile', () => {
       })
       expect(code).matchSnapshot()
       expect(code).contains(
-        `_renderEffect(() => _setText(x0, "parent: " + _toDisplayString(_ctx.useId())))
+        `_setTextBinding(n0, () => "parent: " + _toDisplayString(_ctx.useId()))
   const n1 = _createAssetComponent("Child")`,
       )
     })
@@ -316,7 +316,7 @@ describe('compile', () => {
         },
       })
       expect(code).contains(
-        `_renderEffect(() => _setProp(n1, "id", _ctx.useId()))
+        `_setPropBinding(n1, "id", () => _ctx.useId())
   _setInsertionState(n1, null, 0)
   const n0 = _createAssetComponent("Child")`,
       )
@@ -337,6 +337,7 @@ describe('compile', () => {
         },
       )
       expect(code).matchSnapshot()
+      expect(code).not.contains('setTextBinding as _setTextBinding')
       expect(code).contains(
         `const n3 = _createComponentWithFallback(_component_Child)
     const x4 = _txt(n4)
@@ -386,13 +387,15 @@ describe('compile', () => {
     test('should avoid conflicts with existing variable names', () => {
       const code = compile(`<div>{{ foo }}</div>`, {
         bindingMetadata: {
-          _txt: BindingTypes.LITERAL_CONST,
-          _txt1: BindingTypes.SETUP_REF,
+          _setTextBinding: BindingTypes.LITERAL_CONST,
+          _setTextBinding1: BindingTypes.SETUP_REF,
         },
       })
       expect(code).matchSnapshot()
-      expect(code).contains('txt as _txt2')
-      expect(code).contains('const x0 = _txt2(n0)')
+      expect(code).contains('setTextBinding as _setTextBinding2')
+      expect(code).contains(
+        '_setTextBinding2(n0, () => _toDisplayString(_ctx.foo))',
+      )
     })
   })
 

packages/compiler-vapor/__tests__/transforms/__snapshots__/expression.spec.ts.snap

@@ -104,34 +104,34 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: expression > cache expressions > not cache variable and member expression with the same name 1`] = `
-"import { setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setPropBinding as _setPropBinding, template as _template } from 'vue';
 const t0 = _template("<div>", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setProp(n0, "id", _ctx.bar + _ctx.obj.bar))
+  _setPropBinding(n0, "id", () => _ctx.bar + _ctx.obj.bar)
   return n0
 }"
 `;
 
 exports[`compiler: expression > cache expressions > not cache variable in function expression 1`] = `
-"import { setDynamicProps as _setDynamicProps, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setDynamicPropsBinding as _setDynamicPropsBinding, template as _template } from 'vue';
 const t0 = _template("<div>", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setDynamicProps(n0, [{ foo: bar => _ctx.foo = bar }]))
+  _setDynamicPropsBinding(n0, () => [{ foo: bar => _ctx.foo = bar }])
   return n0
 }"
 `;
 
 exports[`compiler: expression > cache expressions > not cache variable only used in property shorthand 1`] = `
-"import { setStyle as _setStyle, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setStyleBinding as _setStyleBinding, template as _template } from 'vue';
 const t0 = _template("<div>", 1)
 
 export function render(_ctx) {
   const n0 = t0()
-  _renderEffect(() => _setStyle(n0, {color: _ctx.color}))
+  _setStyleBinding(n0, () => ({color: _ctx.color}))
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/logicalIndex.spec.ts.snap

@@ -16,16 +16,15 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: logicalIndex > child/nthChild/next with logicalIndex > inline placeholder keeps logicalIndex when it differs from element index 1`] = `
-"import { setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, child as _child, nthChild as _nthChild, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, child as _child, nthChild as _nthChild, toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<div><i></i><b></b><section><span> ", 1)
 
 export function render(_ctx) {
   const n2 = t0()
   const n1 = _child(_nthChild(n2, 2, 3))
   _setInsertionState(n2, 0, 0)
   const n0 = _createAssetComponent("Comp")
-  const x1 = _txt(n1)
-  _renderEffect(() => _setText(x1, _toDisplayString(_ctx.msg)))
+  _setTextBinding(n1, () => _toDisplayString(_ctx.msg))
   return n2
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformChildren.spec.ts.snap

@@ -37,15 +37,29 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compiler: children transform > does not lower generated text binding when expressions need declarations 1`] = `
+"import { txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+const t0 = _template("<div> ", 1)
+
+export function render(_ctx) {
+  const n0 = t0()
+  const x0 = _txt(n0)
+  _renderEffect(() => {
+    const _foo = _ctx.foo
+    _setText(x0, _toDisplayString(_foo + _foo))
+  })
+  return n0
+}"
+`;
+
 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';
+"import { child as _child, nthChild as _nthChild, toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<div><div>x</div><div>x</div><div> ", 1)
 
 export function render(_ctx) {
   const n1 = t0()
   const n0 = _nthChild(n1, 2)
-  const x0 = _txt(n0)
-  _renderEffect(() => _setText(x0, _toDisplayString(_ctx.msg)))
+  _setTextBinding(n0, () => _toDisplayString(_ctx.msg))
   return n1
 }"
 `;
@@ -93,7 +107,7 @@ export function render(_ctx) {
 `;
 
 exports[`compiler: children transform > keep nested operation parent as node variable before sibling lookup 1`] = `
-"import { child as _child, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, next as _next, txt as _txt, toDisplayString as _toDisplayString, setText as _setText, renderEffect as _renderEffect, template as _template } from 'vue';
+"import { child as _child, setInsertionState as _setInsertionState, createAssetComponent as _createAssetComponent, next as _next, toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
 const t0 = _template("<div><section></section><section><span> ", 1)
 
 export function render(_ctx) {
@@ -102,12 +116,22 @@ export function render(_ctx) {
   const n2 = _child(_next(n1, 1))
   _setInsertionState(n1, null, 0)
   const n0 = _createAssetComponent("Comp")
-  const x2 = _txt(n2)
-  _renderEffect(() => _setText(x2, _toDisplayString(_ctx.msg)))
+  _setTextBinding(n2, () => _toDisplayString(_ctx.msg))
   return n3
 }"
 `;
 
+exports[`compiler: children transform > lowers mixed generated text binding without hiding segment display conversion 1`] = `
+"import { toDisplayString as _toDisplayString, setTextBinding as _setTextBinding, template as _template } from 'vue';
+const t0 = _template("<div> ", 1)
+
+export function render(_ctx) {
+  const n0 = t0()
+  _setTextBinding(n0, () => _toDisplayString(_ctx.a) + " - " + _toDisplayString(_ctx.b))
+  return n0
+}"
+`;
+
 exports[`compiler: children transform > materialize placeholder when inline would duplicate parent access 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><section><div><span> </div><i></i><div><span> ", 1)