From d10a1a3c08465b6e13e86db5899e4308347d67d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Tue, 6 Feb 2024 20:34:06 +0800
Subject: [PATCH] refactor(compiler-vapor): hoist template generator

---
 .../__snapshots__/compile.spec.ts.snap        | 64 ++++++++-----
 .../transformElement.spec.ts.snap             | 21 +++--
 .../__snapshots__/vBind.spec.ts.snap          | 48 ++++++----
 .../__snapshots__/vFor.spec.ts.snap           | 15 +--
 .../__snapshots__/vHtml.spec.ts.snap          |  9 +-
 .../transforms/__snapshots__/vIf.spec.ts.snap | 47 ++++++----
 .../transforms/__snapshots__/vOn.spec.ts.snap | 92 ++++++++++++-------
 .../__snapshots__/vOnce.spec.ts.snap          | 12 ++-
 .../__snapshots__/vText.spec.ts.snap          |  9 +-
 packages/compiler-vapor/src/generate.ts       | 10 +-
 10 files changed, 212 insertions(+), 115 deletions(-)

diff --git a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
index 05e3a5f51..b596e7977 100644
--- a/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`compile > bindings 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, insert as _insert, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("<div>count is <!>.</div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div>count is <!>.</div>")
   const n0 = t0()
   const { 0: [n3, { 1: [n2],}],} = _children(n0)
   const n1 = _createTextNode()
@@ -19,8 +20,9 @@ export function render(_ctx) {
 exports[`compile > custom directive > basic 1`] = `
 "import { template as _template, children as _children, resolveDirective as _resolveDirective, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_resolveDirective("vTest")], [_resolveDirective("vHello"), void 0, void 0, { world: true }]])
@@ -31,8 +33,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > basic 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample]])
@@ -43,8 +46,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > binding value 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, () => _ctx.msg]])
@@ -55,8 +59,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > dynamic parameters 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, () => _ctx.msg, _ctx.foo]])
@@ -67,8 +72,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > modifiers 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, () => _ctx.msg, void 0, { bar: true }]])
@@ -79,8 +85,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > modifiers w/o binding 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, void 0, void 0, { "foo-bar": true }]])
@@ -91,8 +98,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > static parameters 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, () => _ctx.msg, "foo"]])
@@ -103,8 +111,9 @@ export function render(_ctx) {
 exports[`compile > directives > custom directive > static parameters and modifiers 1`] = `
 "import { template as _template, children as _children, withDirectives as _withDirectives } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _withDirectives(n1, [[_ctx.vExample, () => _ctx.msg, "foo", { bar: true }]])
@@ -115,8 +124,9 @@ export function render(_ctx) {
 exports[`compile > directives > v-cloak > basic 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div>test</div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div>test</div>")
   const n0 = t0()
   return n0
 }"
@@ -125,8 +135,9 @@ export function render(_ctx) {
 exports[`compile > directives > v-pre > basic 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div>")
   const n0 = t0()
   return n0
 }"
@@ -135,8 +146,9 @@ export function render(_ctx) {
 exports[`compile > directives > v-pre > self-closing v-pre 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div><div><Comp></Comp></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div><div><Comp></Comp></div>")
   const n0 = t0()
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode()
@@ -154,8 +166,9 @@ export function render(_ctx) {
 exports[`compile > directives > v-pre > should not affect siblings after it 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div :id=\\"foo\\"><Comp></Comp>{{ bar }}</div><div><Comp></Comp></div>")
   const n0 = t0()
   const { 1: [n2],} = _children(n0)
   const n1 = _createTextNode()
@@ -173,8 +186,9 @@ export function render(_ctx) {
 exports[`compile > dynamic root 1`] = `
 "import { fragment as _fragment, createTextNode as _createTextNode, append as _append, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _fragment()
   const n0 = t0()
   const n1 = _createTextNode()
   const n2 = _createTextNode()
@@ -192,8 +206,9 @@ export function render(_ctx) {
 exports[`compile > dynamic root nodes and interpolation 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, on as _on, renderEffect as _renderEffect, setText as _setText, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<button>foo<!>foo</button>")
+
 export function render(_ctx) {
-  const t0 = _template("<button>foo<!>foo</button>")
   const n0 = t0()
   const { 0: [n4, { 1: [n5],}],} = _children(n0)
   const n1 = _createTextNode()
@@ -214,8 +229,9 @@ export function render(_ctx) {
 `;
 
 exports[`compile > expression parsing > interpolation 1`] = `
-"(() => {
-  const t0 = _fragment()
+"
+const t0 = _fragment()
+(() => {
   const n0 = t0()
   const n1 = _createTextNode()
   _append(n0, n1)
@@ -227,8 +243,9 @@ exports[`compile > expression parsing > interpolation 1`] = `
 `;
 
 exports[`compile > expression parsing > v-bind 1`] = `
-"(() => {
-  const t0 = _template("<div></div>")
+"
+const t0 = _template("<div></div>")
+(() => {
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -241,8 +258,9 @@ exports[`compile > expression parsing > v-bind 1`] = `
 exports[`compile > fragment 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<p></p><span></span><div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<p></p><span></span><div></div>")
   const n0 = t0()
   return n0
 }"
@@ -251,8 +269,9 @@ export function render(_ctx) {
 exports[`compile > static + dynamic root 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, prepend as _prepend, insert as _insert, append as _append, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("3<!>6<!>9")
+
 export function render(_ctx) {
-  const t0 = _template("3<!>6<!>9")
   const n0 = t0()
   const { 1: [n9], 3: [n10],} = _children(n0)
   const n1 = _createTextNode()
@@ -298,8 +317,9 @@ export function render(_ctx) {
 exports[`compile > static template 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div><p>hello</p><input><span></span></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div><p>hello</p><input><span></span></div>")
   const n0 = t0()
   return n0
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
index 9471b2276..438f16c3d 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformElement.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`compiler: element transform > props merging: class 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setClass as _setClass } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -17,8 +18,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > props merging: style 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setStyle as _setStyle } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -31,8 +33,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > static props 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div id=\\"foo\\" class=\\"bar\\"></div>")
   const n0 = t0()
   return n0
 }"
@@ -41,8 +44,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > v-bind="obj" 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -55,8 +59,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > v-bind="obj" after static prop 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -69,8 +74,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > v-bind="obj" before static prop 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -83,8 +89,9 @@ export function render(_ctx) {
 exports[`compiler: element transform > v-bind="obj" between static props 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
index 42d74496b..f644adba2 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vBind.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`compiler v-bind > .attr modifier 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setAttr as _setAttr } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -17,8 +18,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .attr modifier w/ no expression 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setAttr as _setAttr } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -31,8 +33,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .camel modifier 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -46,8 +49,9 @@ exports[`compiler v-bind > .camel modifier w/ dynamic arg 1`] = `
 "import { camelize as _camelize } from 'vue';
 import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -60,8 +64,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .camel modifier w/ no expression 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -74,8 +79,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .prop modifier (shortband) w/ no expression 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -88,8 +94,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .prop modifier (shorthand) 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -102,8 +109,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .prop modifier 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -116,8 +124,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .prop modifier w/ dynamic arg 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -130,8 +139,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > .prop modifier w/ no expression 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDOMProp as _setDOMProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -144,8 +154,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > basic 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -158,8 +169,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > dynamic arg 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -172,8 +184,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > dynamic arg w/ static attribute 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProps as _setDynamicProps } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -186,8 +199,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > no expression (shorthand) 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -200,8 +214,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > no expression 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -214,8 +229,9 @@ export function render(_ctx) {
 exports[`compiler v-bind > should error if empty expression 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div arg=\\"\\"></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div arg=\\"\\"></div>")
   const n0 = t0()
   return n0
 }"
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
index f0eea1022..0ea33a106 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
@@ -3,9 +3,10 @@
 exports[`compiler: v-for > basic v-for 1`] = `
 "import { template as _template, fragment as _fragment, children as _children, on as _on, renderEffect as _renderEffect, setText as _setText, createFor as _createFor, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createFor(() => (_ctx.items), (_block) => {
     const n2 = t0()
@@ -25,9 +26,10 @@ export function render(_ctx) {
 exports[`compiler: v-for > multi effect 1`] = `
 "import { template as _template, fragment as _fragment, children as _children, renderEffect as _renderEffect, setDynamicProp as _setDynamicProp, createFor as _createFor, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createFor(() => (_ctx.items), (_block) => {
     const n2 = t0()
@@ -50,9 +52,10 @@ export function render(_ctx) {
 exports[`compiler: v-for > w/o value 1`] = `
 "import { template as _template, fragment as _fragment, createFor as _createFor, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div>item</div>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div>item</div>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createFor(() => (_ctx.items), (_block) => {
     const n2 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
index ce999b4d5..c8c66f977 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vHtml.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`v-html > should convert v-html to innerHTML 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setHtml as _setHtml } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -17,8 +18,9 @@ export function render(_ctx) {
 exports[`v-html > should raise error and ignore children when v-html is present 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setHtml as _setHtml } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -31,8 +33,9 @@ export function render(_ctx) {
 exports[`v-html > should raise error if has no expression 1`] = `
 "import { template as _template, children as _children, setHtml as _setHtml } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _setHtml(n1, "")
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
index 791e2c085..6b145203e 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap
@@ -3,9 +3,10 @@
 exports[`compiler: v-if > basic v-if 1`] = `
 "import { template as _template, fragment as _fragment, children as _children, renderEffect as _renderEffect, setText as _setText, createIf as _createIf, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
@@ -23,11 +24,12 @@ export function render(_ctx) {
 exports[`compiler: v-if > comment between branches 1`] = `
 "import { template as _template, children as _children, createIf as _createIf, prepend as _prepend, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _template("<!--foo--><p></p>")
+const t2 = _template("<!--bar-->fine")
+const t3 = _template("<input>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _template("<!--foo--><p></p>")
-  const t2 = _template("<!--bar-->fine")
-  const t3 = _template("<input>")
   const n0 = t3()
   const { 0: [n5],} = _children(n0)
   const n1 = _createIf(() => (_ctx.ok), () => {
@@ -51,9 +53,10 @@ export function render(_ctx) {
 exports[`compiler: v-if > dedupe same template 1`] = `
 "import { template as _template, fragment as _fragment, createIf as _createIf, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div>hello</div>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div>hello</div>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
@@ -71,9 +74,10 @@ export function render(_ctx) {
 exports[`compiler: v-if > template v-if 1`] = `
 "import { template as _template, fragment as _fragment, children as _children, renderEffect as _renderEffect, setText as _setText, createIf as _createIf, append as _append } from 'vue/vapor';
 
+const t0 = _template("<div></div>hello<p></p>")
+const t1 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>hello<p></p>")
-  const t1 = _fragment()
   const n0 = t1()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
@@ -91,10 +95,11 @@ export function render(_ctx) {
 exports[`compiler: v-if > v-if + v-else 1`] = `
 "import { template as _template, fragment as _fragment, createIf as _createIf, prepend as _prepend } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _template("<p></p>")
+const t2 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _template("<p></p>")
-  const t2 = _fragment()
   const n0 = t2()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
@@ -111,11 +116,12 @@ export function render(_ctx) {
 exports[`compiler: v-if > v-if + v-else-if + v-else 1`] = `
 "import { template as _template, fragment as _fragment, createIf as _createIf, prepend as _prepend } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _template("<p></p>")
+const t2 = _template("fine")
+const t3 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _template("<p></p>")
-  const t2 = _template("fine")
-  const t3 = _fragment()
   const n0 = t3()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
@@ -135,10 +141,11 @@ export function render(_ctx) {
 exports[`compiler: v-if > v-if + v-else-if 1`] = `
 "import { template as _template, fragment as _fragment, createIf as _createIf, prepend as _prepend } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+const t1 = _template("<p></p>")
+const t2 = _fragment()
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
-  const t1 = _template("<p></p>")
-  const t2 = _fragment()
   const n0 = t2()
   const n1 = _createIf(() => (_ctx.ok), () => {
     const n2 = t0()
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
index a14558772..9ee4e0933 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`v-on > case conversion for kebab-case events 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "fooBar", (...args) => (_ctx.onMount && _ctx.onMount(...args)))
@@ -15,8 +16,9 @@ export function render(_ctx) {
 exports[`v-on > complex member expression w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", (...args) => (_ctx.a['b' + _ctx.c] && _ctx.a['b' + _ctx.c](...args)))
@@ -27,8 +29,9 @@ export function render(_ctx) {
 exports[`v-on > dynamic arg 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -41,8 +44,9 @@ export function render(_ctx) {
 exports[`v-on > dynamic arg with complex exp prefixing 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -55,8 +59,9 @@ export function render(_ctx) {
 exports[`v-on > dynamic arg with prefixing 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -69,8 +74,9 @@ export function render(_ctx) {
 exports[`v-on > event modifier 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on, withKeys as _withKeys } from 'vue/vapor';
 
+const t0 = _template("<a></a><form></form><a></a><div></div><div></div><a></a><div></div><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>")
+
 export function render(_ctx) {
-  const t0 = _template("<a></a><form></form><a></a><div></div><div></div><a></a><div></div><input><input><input><input><input><input><input><input><input><input><input><input><input><input><input>")
   const n0 = t0()
   const { 0: [n1], 1: [n2], 2: [n3], 3: [n4], 4: [n5], 5: [n6], 6: [n7], 7: [n8], 8: [n9], 9: [n10], 10: [n11], 11: [n12], 12: [n13], 13: [n14], 14: [n15], 15: [n16], 16: [n17], 17: [n18], 18: [n19], 19: [n20], 20: [n21], 21: [n22],} = _children(n0)
   _on(n1, "click", _withModifiers((...args) => (_ctx.handleEvent && _ctx.handleEvent(...args)), ["stop"]))
@@ -102,8 +108,9 @@ export function render(_ctx) {
 exports[`v-on > function expression w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", e => _ctx.foo(e))
@@ -114,8 +121,9 @@ export function render(_ctx) {
 exports[`v-on > inline statement w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => (_ctx.foo($event)))
@@ -126,8 +134,9 @@ export function render(_ctx) {
 exports[`v-on > multiple inline statements w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => {_ctx.foo($event);_ctx.bar()})
@@ -138,8 +147,9 @@ export function render(_ctx) {
 exports[`v-on > should NOT add a prefix to $event if the expression is a function expression 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => {_ctx.i++;_ctx.foo($event)})
@@ -150,8 +160,9 @@ export function render(_ctx) {
 exports[`v-on > should NOT wrap as function if expression is already function expression (with Typescript) 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", (e: any): any => _ctx.foo(e))
@@ -162,8 +173,9 @@ export function render(_ctx) {
 exports[`v-on > should NOT wrap as function if expression is already function expression (with newlines) 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", 
@@ -178,8 +190,9 @@ export function render(_ctx) {
 exports[`v-on > should NOT wrap as function if expression is already function expression 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => _ctx.foo($event))
@@ -190,8 +203,9 @@ export function render(_ctx) {
 exports[`v-on > should NOT wrap as function if expression is complex member expression 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", (...args) => (_ctx.a['b' + _ctx.c] && _ctx.a['b' + _ctx.c](...args)))
@@ -202,8 +216,9 @@ export function render(_ctx) {
 exports[`v-on > should handle multi-line statement 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => {
@@ -217,8 +232,9 @@ _ctx.bar()
 exports[`v-on > should handle multiple inline statement 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => {_ctx.foo();_ctx.bar()})
@@ -229,8 +245,9 @@ export function render(_ctx) {
 exports[`v-on > should not prefix member expression 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", (...args) => (_ctx.foo.bar && _ctx.foo.bar(...args)))
@@ -241,8 +258,9 @@ export function render(_ctx) {
 exports[`v-on > should not wrap keys guard if no key modifier is present 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "keyup", _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["exact"]))
@@ -253,8 +271,9 @@ export function render(_ctx) {
 exports[`v-on > should support multiple events and modifiers options w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on, withKeys as _withKeys } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["stop"]))
@@ -266,8 +285,9 @@ export function render(_ctx) {
 exports[`v-on > should support multiple modifiers and event options w/ prefixIdentifiers: true 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["stop", "prevent"]), { capture: true, once: true })
@@ -278,8 +298,9 @@ export function render(_ctx) {
 exports[`v-on > should transform click.middle 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "mouseup", _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["middle"]))
@@ -290,8 +311,9 @@ export function render(_ctx) {
 exports[`v-on > should transform click.middle 2`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -304,8 +326,9 @@ export function render(_ctx) {
 exports[`v-on > should transform click.right 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "contextmenu", _withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["right"]))
@@ -316,8 +339,9 @@ export function render(_ctx) {
 exports[`v-on > should transform click.right 2`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, withModifiers as _withModifiers, withKeys as _withKeys, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -330,8 +354,9 @@ export function render(_ctx) {
 exports[`v-on > should wrap as function if expression is inline statement 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", $event => (_ctx.i++))
@@ -342,8 +367,9 @@ export function render(_ctx) {
 exports[`v-on > should wrap both for dynamic key event w/ left/right modifiers 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, withModifiers as _withModifiers, withKeys as _withKeys, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -354,8 +380,9 @@ export function render(_ctx) {
 `;
 
 exports[`v-on > should wrap in unref if identifier is setup-maybe-ref w/ inline: true 1`] = `
-"(() => {
-  const t0 = _template("<div></div><div></div><div></div>")
+"
+const t0 = _template("<div></div><div></div><div></div>")
+(() => {
   const n0 = t0()
   const { 0: [n1], 1: [n2], 2: [n3],} = _children(n0)
   _on(n1, "click", $event => (x.value=_unref(y)))
@@ -368,8 +395,9 @@ exports[`v-on > should wrap in unref if identifier is setup-maybe-ref w/ inline:
 exports[`v-on > should wrap keys guard for keyboard events or dynamic events 1`] = `
 "import { template as _template, children as _children, withModifiers as _withModifiers, withKeys as _withKeys, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "keydown", _withKeys(_withModifiers((...args) => (_ctx.test && _ctx.test(...args)), ["stop", "ctrl"]), ["a"]), { capture: true })
@@ -380,8 +408,9 @@ export function render(_ctx) {
 exports[`v-on > should wrap keys guard for static key event w/ left/right modifiers 1`] = `
 "import { template as _template, children as _children, withKeys as _withKeys, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "keyup", _withKeys((...args) => (_ctx.test && _ctx.test(...args)), ["left"]))
@@ -392,8 +421,9 @@ export function render(_ctx) {
 exports[`v-on > simple expression 1`] = `
 "import { template as _template, children as _children, on as _on } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _on(n1, "click", (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
index 99a997442..bc380dd71 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`compiler: v-once > as root node 1`] = `
 "import { template as _template, children as _children, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _setDynamicProp(n1, "id", _ctx.foo)
@@ -15,8 +16,9 @@ export function render(_ctx) {
 exports[`compiler: v-once > basic 1`] = `
 "import { template as _template, children as _children, createTextNode as _createTextNode, setText as _setText, setClass as _setClass, prepend as _prepend } from 'vue/vapor';
 
+const t0 = _template("<div> <span></span></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div> <span></span></div>")
   const n0 = t0()
   const { 0: [n3, { 1: [n2],}],} = _children(n0)
   const n1 = _createTextNode()
@@ -30,8 +32,9 @@ export function render(_ctx) {
 exports[`compiler: v-once > inside v-once 1`] = `
 "import { template as _template } from 'vue/vapor';
 
+const t0 = _template("<div><div></div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div><div></div></div>")
   const n0 = t0()
   return n0
 }"
@@ -40,8 +43,9 @@ export function render(_ctx) {
 exports[`compiler: v-once > on nested plain element 1`] = `
 "import { template as _template, children as _children, setDynamicProp as _setDynamicProp } from 'vue/vapor';
 
+const t0 = _template("<div><div></div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div><div></div></div>")
   const n0 = t0()
   const { 0: [, { 0: [n1],}],} = _children(n0)
   _setDynamicProp(n1, "id", _ctx.foo)
diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
index 0de524c45..60f78a5d4 100644
--- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
+++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vText.spec.ts.snap
@@ -3,8 +3,9 @@
 exports[`v-text > should convert v-text to textContent 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -17,8 +18,9 @@ export function render(_ctx) {
 exports[`v-text > should raise error and ignore children when v-text is present 1`] = `
 "import { template as _template, children as _children, renderEffect as _renderEffect, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _renderEffect(() => {
@@ -31,8 +33,9 @@ export function render(_ctx) {
 exports[`v-text > should raise error if has no expression 1`] = `
 "import { template as _template, children as _children, setText as _setText } from 'vue/vapor';
 
+const t0 = _template("<div></div>")
+
 export function render(_ctx) {
-  const t0 = _template("<div></div>")
   const n0 = t0()
   const { 0: [n1],} = _children(n0)
   _setText(n1, "")
diff --git a/packages/compiler-vapor/src/generate.ts b/packages/compiler-vapor/src/generate.ts
index 1753f163a..998781b90 100644
--- a/packages/compiler-vapor/src/generate.ts
+++ b/packages/compiler-vapor/src/generate.ts
@@ -145,6 +145,13 @@ export function generate(
   const context = new CodegenContext(ir, options)
   const { push, helpers, vaporHelpers } = context
 
+  if (ir.template.length) {
+    ir.template.forEach((template, i) =>
+      push(...genTemplate(template, i, context)),
+    )
+    push(NEWLINE)
+  }
+
   const functionName = 'render'
   const isSetupInlined = !!options.inline
   if (isSetupInlined) {
@@ -154,9 +161,6 @@ export function generate(
   }
 
   push(INDENT_START)
-  ir.template.forEach((template, i) =>
-    push(...genTemplate(template, i, context)),
-  )
   push(...genBlockFunctionContent(ir, context))
   push(INDENT_END, NEWLINE)