test: update snap

packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap

@@ -134,8 +134,8 @@ return function render(_ctx, _cache) {
 
 exports[`compiler: codegen > hoists 1`] = `
 "
-const _hoisted_1 = hello
-const _hoisted_2 = { id: "foo" }
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (hello))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))
 
 return function render(_ctx, _cache) {
   with (_ctx) {

packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap

@@ -1,17 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`scopeId compiler support > should push scopeId for hoisted nodes 1`] = `
-"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
+"import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, hoistLazy as _hoistLazy, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue"
 
 const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)
-const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))
-const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", -1 /* HOISTED */))))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", -1 /* HOISTED */))))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock("div", null, [
-    _hoisted_1,
+    _hoisted_1(),
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
-    _hoisted_2
+    _hoisted_2()
   ]))
 }"
 `;

packages/compiler-core/__tests__/codegen.spec.ts

@@ -154,8 +154,12 @@ describe('compiler: codegen', () => {
       ],
     })
     const { code } = generate(root)
-    expect(code).toMatch(`const _hoisted_1 = hello`)
-    expect(code).toMatch(`const _hoisted_2 = { id: "foo" }`)
+    expect(code).toMatch(
+      `const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (hello))`,
+    )
+    expect(code).toMatch(
+      `const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))`,
+    )
     expect(code).toMatchSnapshot()
   })
 

packages/compiler-core/__tests__/scopeId.spec.ts

@@ -72,12 +72,12 @@ describe('scopeId compiler support', () => {
     expect(ast.hoists.length).toBe(2)
     ;[
       `const _withScopeId = n => (_pushScopeId("test"),n=n(),_popScopeId(),n)`,
-      `const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
+      `const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "hello", ${genFlagText(
         PatchFlags.HOISTED,
-      )}))`,
-      `const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
+      )})))`,
+      `const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_withScopeId(() => /*#__PURE__*/_createElementVNode("div", null, "world", ${genFlagText(
         PatchFlags.HOISTED,
-      )}))`,
+      )})))`,
     ].forEach(c => expect(code).toMatch(c))
     expect(code).toMatchSnapshot()
   })

packages/compiler-core/__tests__/transform.spec.ts

@@ -197,8 +197,8 @@ describe('compiler: transform', () => {
       nodeTransforms: [mock],
     })
     expect(ast.hoists).toMatchObject(hoisted)
-    expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1`)
-    expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2`)
+    expect((ast as any).children[0].props[0].exp.content).toBe(`_hoisted_1()`)
+    expect((ast as any).children[1].props[0].exp.content).toBe(`_hoisted_2()`)
   })
 
   test('context.filename and selfName', () => {

packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap

@@ -4,16 +4,16 @@ exports[`compiler: hoistStatic transform > hoist element with static key 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("div", { key: "foo" }, null, -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -22,19 +22,19 @@ exports[`compiler: hoistStatic transform > hoist nested static tree 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("p", null, [
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("p", null, [
   /*#__PURE__*/_createElementVNode("span"),
   /*#__PURE__*/_createElementVNode("span")
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+], -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -43,18 +43,18 @@ exports[`compiler: hoistStatic transform > hoist nested static tree with comment
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("div", null, [
   /*#__PURE__*/_createCommentVNode("comment")
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+], -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -63,18 +63,18 @@ exports[`compiler: hoistStatic transform > hoist siblings with common non-hoista
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_1,
-  _hoisted_2
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("div", null, null, -1 /* HOISTED */)))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1(),
+  _hoisted_2()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_3))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_3()))
   }
 }"
 `;
@@ -83,16 +83,16 @@ exports[`compiler: hoistStatic transform > hoist simple element 1`] = `
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", { class: "inline" }, "hello", -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -101,7 +101,7 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: "foo" }
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -110,7 +110,7 @@ return function render(_ctx, _cache) {
     const _directive_foo = _resolveDirective("foo")
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _withDirectives(_createElementVNode("div", _hoisted_1, null, 512 /* NEED_PATCH */), [
+      _withDirectives(_createElementVNode("div", _hoisted_1(), null, 512 /* NEED_PATCH */), [
         [_directive_foo]
       ])
     ]))
@@ -122,14 +122,14 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: "foo" }
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _createElementVNode("div", _hoisted_1, _toDisplayString(hello), 1 /* TEXT */)
+      _createElementVNode("div", _hoisted_1(), _toDisplayString(hello), 1 /* TEXT */)
     ]))
   }
 }"
@@ -139,7 +139,7 @@ exports[`compiler: hoistStatic transform > hoist static props for elements with
 "const _Vue = Vue
 const { createVNode: _createVNode, createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: "foo" }
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -148,7 +148,7 @@ return function render(_ctx, _cache) {
     const _component_Comp = _resolveComponent("Comp")
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _createElementVNode("div", _hoisted_1, [
+      _createElementVNode("div", _hoisted_1(), [
         _createVNode(_component_Comp)
       ])
     ]))
@@ -160,16 +160,16 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist class with
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = {
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({
   class: /*#__PURE__*/_normalizeClass({ foo: true })
-}
+}))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { toDisplayString: _toDisplayString, normalizeClass: _normalizeClass, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _createElementVNode("span", _hoisted_1, _toDisplayString(_ctx.bar), 1 /* TEXT */)
+      _createElementVNode("span", _hoisted_1(), _toDisplayString(_ctx.bar), 1 /* TEXT */)
     ]))
   }
 }"
@@ -179,16 +179,16 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", null, "foo " + /*#__PURE__*/_toDisplayString(1) + " " + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", null, "foo " + /*#__PURE__*/_toDisplayString(1) + " " + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -197,16 +197,16 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > hoist nested stat
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("span", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
+    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
-    return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+    return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
   }
 }"
 `;
@@ -215,19 +215,19 @@ exports[`compiler: hoistStatic transform > prefixIdentifiers > should NOT hoist
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("path", { d: "M2,3H5.5L12" }, null, -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives } = _Vue
+    const { createElementVNode: _createElementVNode, resolveDirective: _resolveDirective, openBlock: _openBlock, createElementBlock: _createElementBlock, withDirectives: _withDirectives, hoistLazy: _hoistLazy } = _Vue
 
     const _directive_foo = _resolveDirective("foo")
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2)), [
+      _withDirectives((_openBlock(), _createElementBlock("svg", null, _hoisted_2())), [
         [_directive_foo]
       ])
     ]))
@@ -369,14 +369,14 @@ exports[`compiler: hoistStatic transform > should NOT hoist element with dynamic
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = ["id"]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (["id"]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
     const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
-      _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1)
+      _createElementVNode("div", { id: foo }, null, 8 /* PROPS */, _hoisted_1())
     ]))
   }
 }"
@@ -412,19 +412,19 @@ exports[`compiler: hoistStatic transform > should hoist v-for children if static
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode } = _Vue
 
-const _hoisted_1 = { id: "foo" }
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({ id: "foo" }))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_2()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode } = _Vue
+    const { renderList: _renderList, Fragment: _Fragment, openBlock: _openBlock, createElementBlock: _createElementBlock, createElementVNode: _createElementVNode, hoistLazy: _hoistLazy } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
       (_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
-        return (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
+        return (_openBlock(), _createElementBlock("div", _hoisted_1(), _hoisted_3()))
       }), 256 /* UNKEYED_FRAGMENT */))
     ]))
   }
@@ -435,22 +435,22 @@ exports[`compiler: hoistStatic transform > should hoist v-if props/children if s
 "const _Vue = Vue
 const { createElementVNode: _createElementVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = {
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => ({
   key: 0,
   id: "foo"
-}
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)
-const _hoisted_3 = [
-  _hoisted_2
-]
+}))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("span", null, null, -1 /* HOISTED */)))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_2()
+]))
 
 return function render(_ctx, _cache) {
   with (_ctx) {
-    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode } = _Vue
+    const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock, createCommentVNode: _createCommentVNode, hoistLazy: _hoistLazy } = _Vue
 
     return (_openBlock(), _createElementBlock("div", null, [
       ok
-        ? (_openBlock(), _createElementBlock("div", _hoisted_1, _hoisted_3))
+        ? (_openBlock(), _createElementBlock("div", _hoisted_1(), _hoisted_3()))
         : _createCommentVNode("v-if", true)
     ]))
   }

packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts

@@ -31,7 +31,7 @@ const hoistedChildrenArrayMatcher = (startIndex = 1, length = 1) => ({
     type: NodeTypes.ELEMENT,
     codegenNode: {
       type: NodeTypes.SIMPLE_EXPRESSION,
-      content: `_hoisted_${startIndex + i}`,
+      content: `_hoisted_${startIndex + i}()`,
     },
   })),
 })
@@ -91,7 +91,7 @@ describe('compiler: hoistStatic transform', () => {
     expect(root.codegenNode).toMatchObject({
       tag: `"div"`,
       props: undefined,
-      children: { content: `_hoisted_2` },
+      children: { content: `_hoisted_2()` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -111,7 +111,7 @@ describe('compiler: hoistStatic transform', () => {
       hoistedChildrenArrayMatcher(),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_2',
+      content: '_hoisted_2()',
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -128,7 +128,7 @@ describe('compiler: hoistStatic transform', () => {
       hoistedChildrenArrayMatcher(),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: `_hoisted_2`,
+      content: `_hoisted_2()`,
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -147,7 +147,7 @@ describe('compiler: hoistStatic transform', () => {
       hoistedChildrenArrayMatcher(1, 2),
     ])
     expect((root.codegenNode as VNodeCall).children).toMatchObject({
-      content: '_hoisted_3',
+      content: '_hoisted_3()',
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -183,7 +183,7 @@ describe('compiler: hoistStatic transform', () => {
           patchFlag: genFlagText(PatchFlags.PROPS),
           dynamicProps: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`,
+            content: `_hoisted_1()`,
             isStatic: false,
           },
         },
@@ -206,7 +206,7 @@ describe('compiler: hoistStatic transform', () => {
     expect(root.codegenNode).toMatchObject({
       tag: `"div"`,
       props: undefined,
-      children: { content: `_hoisted_2` },
+      children: { content: `_hoisted_2()` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -260,7 +260,7 @@ describe('compiler: hoistStatic transform', () => {
           tag: `"div"`,
           props: {
             type: NodeTypes.SIMPLE_EXPRESSION,
-            content: `_hoisted_1`,
+            content: `_hoisted_1()`,
           },
           children: undefined,
           patchFlag: genFlagText(PatchFlags.NEED_PATCH),
@@ -284,7 +284,7 @@ describe('compiler: hoistStatic transform', () => {
         codegenNode: {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
-          props: { content: `_hoisted_1` },
+          props: { content: `_hoisted_1()` },
           children: { type: NodeTypes.INTERPOLATION },
           patchFlag: genFlagText(PatchFlags.TEXT),
         },
@@ -302,7 +302,7 @@ describe('compiler: hoistStatic transform', () => {
         codegenNode: {
           type: NodeTypes.VNODE_CALL,
           tag: `"div"`,
-          props: { content: `_hoisted_1` },
+          props: { content: `_hoisted_1()` },
           children: [{ type: NodeTypes.ELEMENT, tag: `Comp` }],
         },
       },
@@ -333,8 +333,8 @@ describe('compiler: hoistStatic transform', () => {
         // blocks should NOT be hoisted
         type: NodeTypes.VNODE_CALL,
         tag: `"div"`,
-        props: { content: `_hoisted_1` },
-        children: { content: `_hoisted_3` },
+        props: { content: `_hoisted_1()` },
+        children: { content: `_hoisted_3()` },
       },
     })
     expect(generate(root).code).toMatchSnapshot()
@@ -371,8 +371,8 @@ describe('compiler: hoistStatic transform', () => {
     expect(innerBlockCodegen.returns).toMatchObject({
       type: NodeTypes.VNODE_CALL,
       tag: `"div"`,
-      props: { content: `_hoisted_1` },
-      children: { content: `_hoisted_3` },
+      props: { content: `_hoisted_1()` },
+      children: { content: `_hoisted_3()` },
     })
     expect(generate(root).code).toMatchSnapshot()
   })
@@ -401,7 +401,7 @@ describe('compiler: hoistStatic transform', () => {
         props: undefined,
         children: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`,
+          content: `_hoisted_2()`,
         },
       })
       expect(generate(root).code).toMatchSnapshot()
@@ -436,7 +436,7 @@ describe('compiler: hoistStatic transform', () => {
         props: undefined,
         children: {
           type: NodeTypes.SIMPLE_EXPRESSION,
-          content: `_hoisted_2`,
+          content: `_hoisted_2()`,
         },
       })
       expect(generate(root).code).toMatchSnapshot()
@@ -486,7 +486,7 @@ describe('compiler: hoistStatic transform', () => {
               tag: `"span"`,
               props: {
                 type: NodeTypes.SIMPLE_EXPRESSION,
-                content: `_hoisted_1`,
+                content: `_hoisted_1()`,
               },
               children: {
                 type: NodeTypes.INTERPOLATION,
@@ -601,7 +601,7 @@ describe('compiler: hoistStatic transform', () => {
       expect(root.hoists.length).toBe(2)
       expect(root.codegenNode).toMatchObject({
         children: {
-          content: '[..._hoisted_2]',
+          content: '[..._hoisted_2()]',
         },
       })
     })

packages/compiler-dom/__tests__/transforms/__snapshots__/stringifyStatic.spec.ts.snap

@@ -1,96 +1,96 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`stringify static html > should bail for <option> elements with number values 1`] = `
-"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("select", null, [
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("select", null, [
   /*#__PURE__*/_createElementVNode("option", { value: 1 }),
   /*#__PURE__*/_createElementVNode("option", { value: 1 }),
   /*#__PURE__*/_createElementVNode("option", { value: 1 }),
   /*#__PURE__*/_createElementVNode("option", { value: 1 }),
   /*#__PURE__*/_createElementVNode("option", { value: 1 })
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+], -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
 }"
 `;
 
 exports[`stringify static html > should bail on bindings that are hoisted but not stringifiable 1`] = `
-"const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, [
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("div", null, [
   /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
   /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
   /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
   /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
   /*#__PURE__*/_createElementVNode("span", { class: "foo" }, "foo"),
   /*#__PURE__*/_createElementVNode("img", { src: _imports_0_ })
-], -1 /* HOISTED */)
-const _hoisted_2 = [
-  _hoisted_1
-]
+], -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
 }"
 `;
 
 exports[`stringify static html > should work for <option> elements with string values 1`] = `
-"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<select><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option></select>", 1)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<select><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option><option value=\\"1\\"></option></select>", 1)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
 }"
 `;
 
 exports[`stringify static html > should work with bindings that are non-static but stringifiable 1`] = `
-"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, createStaticVNode: _createStaticVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)
-const _hoisted_2 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<div><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><span class=\\"foo\\">foo</span><img src=\\"" + _imports_0_ + "\\"></div>", 1)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 return function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_2))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_2()))
 }"
 `;
 
 exports[`stringify static html > stringify v-html 1`] = `
-"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code><span>show-it </span></code></pre><div class><span class>1</span><span class>2</span></div>", 2)))
 
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _hoisted_1()
 }"
 `;
 
 exports[`stringify static html > stringify v-text 1`] = `
-"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>&lt;span&gt;show-it &lt;/span&gt;</code></pre><div class><span class>1</span><span class>2</span></div>", 2)))
 
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _hoisted_1()
 }"
 `;
 
 exports[`stringify static html > stringify v-text with escape 1`] = `
-"const { createElementVNode: _createElementVNode, createStaticVNode: _createStaticVNode } = Vue
+"const { createElementVNode: _createElementVNode, hoistLazy: _hoistLazy, createStaticVNode: _createStaticVNode } = Vue
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<pre data-type=\\"js\\"><code>text1</code></pre><div class><span class>1</span><span class>2</span></div>", 2)))
 
 return function render(_ctx, _cache) {
-  return _hoisted_1
+  return _hoisted_1()
 }"
 `;

packages/compiler-sfc/__tests__/__snapshots__/compileScript.spec.ts.snap

@@ -849,9 +849,9 @@ return (_ctx, _cache) => {
 `;
 
 exports[`SFC compile <script setup> > inlineTemplate mode > should work 1`] = `
-"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("div", null, "static", -1 /* HOISTED */)))
 
 import { ref } from 'vue'
         
@@ -863,7 +863,7 @@ export default {
 return (_ctx, _cache) => {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
     _createElementVNode("div", null, _toDisplayString(count.value), 1 /* TEXT */),
-    _hoisted_1
+    _hoisted_1()
   ], 64 /* STABLE_FRAGMENT */))
 }
 }

packages/compiler-sfc/__tests__/__snapshots__/templateTransformAssetUrl.spec.ts.snap

@@ -33,18 +33,18 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform asset url > support uri fragment 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@svg/file.svg'
 
 
-const _hoisted_1 = _imports_0 + '#fragment'
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + '#fragment'))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("use", { href: _hoisted_1() }, null, -1 /* HOISTED */)))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("use", { href: _hoisted_1 }, null, -1 /* HOISTED */)))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_2,
-    _hoisted_3
+    _hoisted_2(),
+    _hoisted_3()
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
@@ -77,18 +77,18 @@ export function render(_ctx, _cache) {
 `;
 
 exports[`compiler sfc: transform asset url > transform with stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './bar.png'
 import _imports_1 from '/bar.png'
 
 
-const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)
-const _hoisted_6 = [
-  _hoisted_1
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<img src=\\"" + _imports_0 + "\\"><img src=\\"" + _imports_1 + "\\"><img src=\\"https://foo.bar/baz.png\\"><img src=\\"//foo.bar/baz.png\\"><img src=\\"" + _imports_0 + "\\">", 5)))
+const _hoisted_6 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_1()
+]))
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_6))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_6()))
 }"
 `;
 

packages/compiler-sfc/__tests__/__snapshots__/templateTransformSrcset.spec.ts.snap

@@ -1,276 +1,276 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiler sfc: transform srcset > srcset w/ explicit base option 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from '@/logo.png'
 
 
-const _hoisted_1 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_2 = _imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1 }, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2 }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 1x, ' + "/foo/logo.png" + ' 2x'))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_1() }, null, -1 /* HOISTED */)))
+const _hoisted_4 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", { srcset: _hoisted_2() }, null, -1 /* HOISTED */)))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_3,
-    _hoisted_4
+    _hoisted_3(),
+    _hoisted_4()
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 
 
-const _hoisted_1 = _imports_0
-const _hoisted_2 = _imports_0 + ' 2x'
-const _hoisted_3 = _imports_0 + ' 2x'
-const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
-const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = "/logo.png" + ', ' + _imports_0 + ' 2x'
-const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_imports_0))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_4 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_5 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0))
+const _hoisted_6 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_7 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_8 = /*#__PURE__*/ _hoistLazy(() => ("/logo.png" + ', ' + _imports_0 + ' 2x'))
+const _hoisted_9 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: ""
-}, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_10 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_1
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_1()
+}, null, -1 /* HOISTED */)))
+const _hoisted_11 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_2
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_2()
+}, null, -1 /* HOISTED */)))
+const _hoisted_12 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_3
-}, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_3()
+}, null, -1 /* HOISTED */)))
+const _hoisted_13 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_4
-}, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_4()
+}, null, -1 /* HOISTED */)))
+const _hoisted_14 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_5
-}, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_5()
+}, null, -1 /* HOISTED */)))
+const _hoisted_15 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_6
-}, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_6()
+}, null, -1 /* HOISTED */)))
+const _hoisted_16 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_7
-}, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_7()
+}, null, -1 /* HOISTED */)))
+const _hoisted_17 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
   srcset: "/logo.png, /logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_18 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "https://example.com/logo.png",
   srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_19 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
-  srcset: _hoisted_8
-}, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_8()
+}, null, -1 /* HOISTED */)))
+const _hoisted_20 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "data:image/png;base64,i",
   srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
-}, null, -1 /* HOISTED */)
+}, null, -1 /* HOISTED */)))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_9,
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12,
-    _hoisted_13,
-    _hoisted_14,
-    _hoisted_15,
-    _hoisted_16,
-    _hoisted_17,
-    _hoisted_18,
-    _hoisted_19,
-    _hoisted_20
+    _hoisted_9(),
+    _hoisted_10(),
+    _hoisted_11(),
+    _hoisted_12(),
+    _hoisted_13(),
+    _hoisted_14(),
+    _hoisted_15(),
+    _hoisted_16(),
+    _hoisted_17(),
+    _hoisted_18(),
+    _hoisted_19(),
+    _hoisted_20()
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ base 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 
-const _hoisted_1 = /*#__PURE__*/_createElementVNode("img", {
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: ""
-}, null, -1 /* HOISTED */)
-const _hoisted_2 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png"
-}, null, -1 /* HOISTED */)
-const _hoisted_3 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_4 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_4 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_5 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_5 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png, /foo/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_6 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_6 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png 2x, /foo/logo.png"
-}, null, -1 /* HOISTED */)
-const _hoisted_7 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_7 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png 2x, /foo/logo.png 3x"
-}, null, -1 /* HOISTED */)
-const _hoisted_8 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_8 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: "/foo/logo.png, /foo/logo.png 2x, /foo/logo.png 3x"
-}, null, -1 /* HOISTED */)
-const _hoisted_9 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_9 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
   srcset: "/logo.png, /logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_10 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "https://example.com/logo.png",
   srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_11 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
   srcset: "/logo.png, /foo/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_12 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "data:image/png;base64,i",
   srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
-}, null, -1 /* HOISTED */)
+}, null, -1 /* HOISTED */)))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_1,
-    _hoisted_2,
-    _hoisted_3,
-    _hoisted_4,
-    _hoisted_5,
-    _hoisted_6,
-    _hoisted_7,
-    _hoisted_8,
-    _hoisted_9,
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12
+    _hoisted_1(),
+    _hoisted_2(),
+    _hoisted_3(),
+    _hoisted_4(),
+    _hoisted_5(),
+    _hoisted_6(),
+    _hoisted_7(),
+    _hoisted_8(),
+    _hoisted_9(),
+    _hoisted_10(),
+    _hoisted_11(),
+    _hoisted_12()
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ includeAbsolute: true 1`] = `
-"import { createElementVNode as _createElementVNode, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
 
-const _hoisted_1 = _imports_0
-const _hoisted_2 = _imports_0 + ' 2x'
-const _hoisted_3 = _imports_0 + ' 2x'
-const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
-const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
-const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createElementVNode("img", {
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_imports_0))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_4 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_5 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0))
+const _hoisted_6 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_7 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_8 = /*#__PURE__*/ _hoistLazy(() => (_imports_1 + ', ' + _imports_1 + ' 2x'))
+const _hoisted_9 = /*#__PURE__*/ _hoistLazy(() => (_imports_1 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_10 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
   srcset: ""
-}, null, -1 /* HOISTED */)
-const _hoisted_11 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_11 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_1
-}, null, -1 /* HOISTED */)
-const _hoisted_12 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_1()
+}, null, -1 /* HOISTED */)))
+const _hoisted_12 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_2
-}, null, -1 /* HOISTED */)
-const _hoisted_13 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_2()
+}, null, -1 /* HOISTED */)))
+const _hoisted_13 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_3
-}, null, -1 /* HOISTED */)
-const _hoisted_14 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_3()
+}, null, -1 /* HOISTED */)))
+const _hoisted_14 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_4
-}, null, -1 /* HOISTED */)
-const _hoisted_15 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_4()
+}, null, -1 /* HOISTED */)))
+const _hoisted_15 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_5
-}, null, -1 /* HOISTED */)
-const _hoisted_16 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_5()
+}, null, -1 /* HOISTED */)))
+const _hoisted_16 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_6
-}, null, -1 /* HOISTED */)
-const _hoisted_17 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_6()
+}, null, -1 /* HOISTED */)))
+const _hoisted_17 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "./logo.png",
-  srcset: _hoisted_7
-}, null, -1 /* HOISTED */)
-const _hoisted_18 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_7()
+}, null, -1 /* HOISTED */)))
+const _hoisted_18 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
-  srcset: _hoisted_8
-}, null, -1 /* HOISTED */)
-const _hoisted_19 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_8()
+}, null, -1 /* HOISTED */)))
+const _hoisted_19 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "https://example.com/logo.png",
   srcset: "https://example.com/logo.png, https://example.com/logo.png 2x"
-}, null, -1 /* HOISTED */)
-const _hoisted_20 = /*#__PURE__*/_createElementVNode("img", {
+}, null, -1 /* HOISTED */)))
+const _hoisted_20 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "/logo.png",
-  srcset: _hoisted_9
-}, null, -1 /* HOISTED */)
-const _hoisted_21 = /*#__PURE__*/_createElementVNode("img", {
+  srcset: _hoisted_9()
+}, null, -1 /* HOISTED */)))
+const _hoisted_21 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createElementVNode("img", {
   src: "data:image/png;base64,i",
   srcset: "data:image/png;base64,i 1x, data:image/png;base64,i 2x"
-}, null, -1 /* HOISTED */)
+}, null, -1 /* HOISTED */)))
 
 export function render(_ctx, _cache) {
   return (_openBlock(), _createElementBlock(_Fragment, null, [
-    _hoisted_10,
-    _hoisted_11,
-    _hoisted_12,
-    _hoisted_13,
-    _hoisted_14,
-    _hoisted_15,
-    _hoisted_16,
-    _hoisted_17,
-    _hoisted_18,
-    _hoisted_19,
-    _hoisted_20,
-    _hoisted_21
+    _hoisted_10(),
+    _hoisted_11(),
+    _hoisted_12(),
+    _hoisted_13(),
+    _hoisted_14(),
+    _hoisted_15(),
+    _hoisted_16(),
+    _hoisted_17(),
+    _hoisted_18(),
+    _hoisted_19(),
+    _hoisted_20(),
+    _hoisted_21()
   ], 64 /* STABLE_FRAGMENT */))
 }"
 `;
 
 exports[`compiler sfc: transform srcset > transform srcset w/ stringify 1`] = `
-"import { createElementVNode as _createElementVNode, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
+"import { createElementVNode as _createElementVNode, hoistLazy as _hoistLazy, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
 import _imports_0 from './logo.png'
 import _imports_1 from '/logo.png'
 
 
-const _hoisted_1 = _imports_0
-const _hoisted_2 = _imports_0 + ' 2x'
-const _hoisted_3 = _imports_0 + ' 2x'
-const _hoisted_4 = _imports_0 + ', ' + _imports_0 + ' 2x'
-const _hoisted_5 = _imports_0 + ' 2x, ' + _imports_0
-const _hoisted_6 = _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_7 = _imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'
-const _hoisted_8 = _imports_1 + ', ' + _imports_1 + ' 2x'
-const _hoisted_9 = _imports_1 + ', ' + _imports_0 + ' 2x'
-const _hoisted_10 = /*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6 + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7 + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8 + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9 + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)
-const _hoisted_22 = [
-  _hoisted_10
-]
+const _hoisted_1 = /*#__PURE__*/ _hoistLazy(() => (_imports_0))
+const _hoisted_2 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_3 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x'))
+const _hoisted_4 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_5 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0))
+const _hoisted_6 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_7 = /*#__PURE__*/ _hoistLazy(() => (_imports_0 + ', ' + _imports_0 + ' 2x, ' + _imports_0 + ' 3x'))
+const _hoisted_8 = /*#__PURE__*/ _hoistLazy(() => (_imports_1 + ', ' + _imports_1 + ' 2x'))
+const _hoisted_9 = /*#__PURE__*/ _hoistLazy(() => (_imports_1 + ', ' + _imports_0 + ' 2x'))
+const _hoisted_10 = /*#__PURE__*/ _hoistLazy(() => (/*#__PURE__*/_createStaticVNode("<img src=\\"./logo.png\\" srcset=\\"\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_1() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_2() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_3() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_4() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_5() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_6() + "\\"><img src=\\"./logo.png\\" srcset=\\"" + _hoisted_7() + "\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_8() + "\\"><img src=\\"https://example.com/logo.png\\" srcset=\\"https://example.com/logo.png, https://example.com/logo.png 2x\\"><img src=\\"/logo.png\\" srcset=\\"" + _hoisted_9() + "\\"><img src=\\"data:image/png;base64,i\\" srcset=\\"data:image/png;base64,i 1x, data:image/png;base64,i 2x\\">", 12)))
+const _hoisted_22 = /*#__PURE__*/ _hoistLazy(() => ([
+  _hoisted_10()
+]))
 
 export function render(_ctx, _cache) {
-  return (_openBlock(), _createElementBlock("div", null, _hoisted_22))
+  return (_openBlock(), _createElementBlock("div", null, _hoisted_22()))
 }"
 `;