fix(compiler-core): hoisted vnode calls and scoped id calls should be marked pure

Otherwise they cannot be tree-shaken

diff --git a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
index 03ce987117be7475e92b2fd737390f2a6187da8c..3f9efc6e0fc8835394c49a1453a63d0abd07accf 100644 (file)
--- a/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
+++ b/packages/compiler-core/__tests__/__snapshots__/scopeId.spec.ts.snap
@@ -2,14 +2,14 @@
 
 exports[`scopeId compiler support should push scopeId for hoisted nodes 1`] = `
 "import { createVNode as _createVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from \\"vue\\"
-const _withId = _withScopeId(\\"test\\")
+const _withId = /*#__PURE__*/ _withScopeId(\\"test\\")
 
 _pushScopeId(\\"test\\")
-const _hoisted_1 = _createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
-const _hoisted_2 = _createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"div\\", null, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/ _createVNode(\\"div\\", null, \\"world\\", -1 /* HOISTED */)
 _popScopeId()
 
-export const render = _withId(function render(_ctx, _cache) {
+export const render = /*#__PURE__*/ _withId(function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(\\"div\\", null, [
     _hoisted_1,
     _createTextVNode(_toDisplayString(_ctx.foo), 1 /* TEXT */),
@@ -20,9 +20,9 @@ export const render = _withId(function render(_ctx, _cache) {
 
 exports[`scopeId compiler support should wrap default slot 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = _withScopeId(\\"test\\")
+const _withId = /*#__PURE__*/ _withScopeId(\\"test\\")
 
-export const render = _withId(function render(_ctx, _cache) {
+export const render = /*#__PURE__*/ _withId(function render(_ctx, _cache) {
   const _component_Child = _resolveComponent(\\"Child\\")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
@@ -36,9 +36,9 @@ export const render = _withId(function render(_ctx, _cache) {
 
 exports[`scopeId compiler support should wrap dynamic slots 1`] = `
 "import { createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = _withScopeId(\\"test\\")
+const _withId = /*#__PURE__*/ _withScopeId(\\"test\\")
 
-export const render = _withId(function render(_ctx, _cache) {
+export const render = /*#__PURE__*/ _withId(function render(_ctx, _cache) {
   const _component_Child = _resolveComponent(\\"Child\\")
 
   return (_openBlock(), _createBlock(_component_Child, null, _createSlots({ _: 1 }, [
@@ -64,9 +64,9 @@ export const render = _withId(function render(_ctx, _cache) {
 
 exports[`scopeId compiler support should wrap named slots 1`] = `
 "import { toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveComponent as _resolveComponent, withCtx as _withCtx, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = _withScopeId(\\"test\\")
+const _withId = /*#__PURE__*/ _withScopeId(\\"test\\")
 
-export const render = _withId(function render(_ctx, _cache) {
+export const render = /*#__PURE__*/ _withId(function render(_ctx, _cache) {
   const _component_Child = _resolveComponent(\\"Child\\")
 
   return (_openBlock(), _createBlock(_component_Child, null, {
@@ -83,9 +83,9 @@ export const render = _withId(function render(_ctx, _cache) {
 
 exports[`scopeId compiler support should wrap render function 1`] = `
 "import { createVNode as _createVNode, openBlock as _openBlock, createBlock as _createBlock, withScopeId as _withScopeId } from \\"vue\\"
-const _withId = _withScopeId(\\"test\\")
+const _withId = /*#__PURE__*/ _withScopeId(\\"test\\")
 
-export const render = _withId(function render(_ctx, _cache) {
+export const render = /*#__PURE__*/ _withId(function render(_ctx, _cache) {
   return (_openBlock(), _createBlock(\\"div\\"))
 })"
 `;

diff --git a/packages/compiler-core/__tests__/scopeId.spec.ts b/packages/compiler-core/__tests__/scopeId.spec.ts
index 9b098a121032c88425234b6e4a8d3e133d1ee9ac..0cf24e60cff718ec10336f8998acc8135c3c696e 100644 (file)
--- a/packages/compiler-core/__tests__/scopeId.spec.ts
+++ b/packages/compiler-core/__tests__/scopeId.spec.ts
@@ -20,8 +20,10 @@ describe('scopeId compiler support', () => {
       scopeId: 'test'
     })
     expect(ast.helpers).toContain(WITH_SCOPE_ID)
-    expect(code).toMatch(`const _withId = _withScopeId("test")`)
-    expect(code).toMatch(`export const render = _withId(function render(`)
+    expect(code).toMatch(`const _withId = /*#__PURE__*/ _withScopeId("test")`)
+    expect(code).toMatch(
+      `export const render = /*#__PURE__*/ _withId(function render(`
+    )
     expect(code).toMatchSnapshot()
   })
 
@@ -83,10 +85,10 @@ describe('scopeId compiler support', () => {
     expect(code).toMatch(
       [
         `_pushScopeId("test")`,
-        `const _hoisted_1 = _createVNode("div", null, "hello", ${genFlagText(
+        `const _hoisted_1 = /*#__PURE__*/ _createVNode("div", null, "hello", ${genFlagText(
           PatchFlags.HOISTED
         )})`,
-        `const _hoisted_2 = _createVNode("div", null, "world", ${genFlagText(
+        `const _hoisted_2 = /*#__PURE__*/ _createVNode("div", null, "world", ${genFlagText(
           PatchFlags.HOISTED
         )})`,
         `_popScopeId()`

diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
index c94cf2905b799e69962be6a41fa046ceecac05b2..658e01c3a4680cb48a6ccd8b859388c683e898ba 100644 (file)
--- a/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
+++ b/packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
@@ -4,7 +4,7 @@ exports[`compiler: hoistStatic transform hoist element with static key 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -21,7 +21,7 @@ exports[`compiler: hoistStatic transform hoist nested static tree 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"p\\", null, [
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"p\\", null, [
   _createVNode(\\"span\\"),
   _createVNode(\\"span\\")
 ], -1 /* HOISTED */)
@@ -41,7 +41,7 @@ exports[`compiler: hoistStatic transform hoist nested static tree with comments
 "const _Vue = Vue
 const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"div\\", null, [
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"div\\", null, [
   _createCommentVNode(\\"comment\\")
 ], -1 /* HOISTED */)
 
@@ -60,8 +60,8 @@ exports[`compiler: hoistStatic transform hoist siblings with common non-hoistabl
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
-const _hoisted_2 = _createVNode(\\"div\\", null, null, -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/ _createVNode(\\"div\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -79,7 +79,7 @@ exports[`compiler: hoistStatic transform hoist simple element 1`] = `
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -172,7 +172,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", null, \\"foo \\" + _toDisplayString(1) + \\" \\" + _toDisplayString(true), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"span\\", null, \\"foo \\" + _toDisplayString(1) + \\" \\" + _toDisplayString(true), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -189,7 +189,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = _createVNode(\\"span\\", { foo: 0 }, _toDisplayString(1), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"span\\", { foo: 0 }, _toDisplayString(1), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -346,7 +346,7 @@ exports[`compiler: hoistStatic transform should hoist v-for children if static 1
 const { createVNode: _createVNode } = _Vue
 
 const _hoisted_1 = { id: \\"foo\\" }
-const _hoisted_2 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/ _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {
@@ -371,7 +371,7 @@ const _hoisted_1 = {
   key: 0,
   id: \\"foo\\"
 }
-const _hoisted_2 = _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
+const _hoisted_2 = /*#__PURE__*/ _createVNode(\\"span\\", null, null, -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {

diff --git a/packages/compiler-core/src/codegen.ts b/packages/compiler-core/src/codegen.ts
index a9836530ecca32cbbc4168a6c5f1b424836dc96d..45e9ef5449fefe39125e57c4a4cc5f4613d9823b 100644 (file)
--- a/packages/compiler-core/src/codegen.ts
+++ b/packages/compiler-core/src/codegen.ts
@@ -201,7 +201,7 @@ export function generate(
 
   // enter render function
   if (genScopeId && !ssr) {
-    push(`const render = _withId(`)
+    push(`const render = /*#__PURE__*/ _withId(`)
   }
   if (!ssr) {
     push(`function render(_ctx, _cache) {`)
@@ -400,7 +400,7 @@ function genModulePreamble(
   }
 
   if (genScopeId) {
-    push(`const _withId = ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
+    push(`const _withId = /*#__PURE__*/ ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
     newline()
   }
 
@@ -445,6 +445,13 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
 
   hoists.forEach((exp, i) => {
     push(`const _hoisted_${i + 1} = `)
+    // make hosit function calls tree-shakable
+    if (
+      exp.type === NodeTypes.VNODE_CALL ||
+      exp.type === NodeTypes.JS_CALL_EXPRESSION
+    ) {
+      push(`/*#__PURE__*/ `)
+    }
     genNode(exp, context)
     newline()
   })

diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index 0393e9717b8534fa12e5bac74796f8ed9f69f005..f15a9d0637164b61ffb5f16aa65638348cc1768e 100644 (file)
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -45,7 +45,7 @@ function walk(
 ) {
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
-    // only plain elements are eligible for hoisting.
+    // only plain elements & text calls are eligible for hoisting.
     if (
       child.type === NodeTypes.ELEMENT &&
       child.tagType === ElementTypes.ELEMENT
@@ -79,7 +79,14 @@ function walk(
           }
         }
       }
+    } else if (
+      child.type === NodeTypes.TEXT_CALL &&
+      isStaticNode(child.content, resultCache)
+    ) {
+      child.codegenNode = context.hoist(child.codegenNode)
     }
+
+    // walk further
     if (child.type === NodeTypes.ELEMENT) {
       walk(child.children, context, resultCache)
     } else if (child.type === NodeTypes.FOR) {
@@ -91,11 +98,6 @@ function walk(
         // Do not hoist v-if single child because it has to be a block
         walk(branchChildren, context, resultCache, branchChildren.length === 1)
       }
-    } else if (
-      child.type === NodeTypes.TEXT_CALL &&
-      isStaticNode(child.content, resultCache)
-    ) {
-      child.codegenNode = context.hoist(child.codegenNode)
     }
   }
 }