fix(compiler-core): hoist pure annotations should apply to all nested calls

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

@@ -22,8 +22,8 @@ exports[`compiler: hoistStatic transform hoist nested static tree 1`] = `
 const { createVNode: _createVNode } = _Vue
 
 const _hoisted_1 = /*#__PURE__*/_createVNode(\\"p\\", null, [
-  _createVNode(\\"span\\"),
+  /*#__PURE__*/_createVNode(\\"span\\"),
-  _createVNode(\\"span\\")
+  /*#__PURE__*/_createVNode(\\"span\\")
 ], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
@@ -42,7 +42,7 @@ exports[`compiler: hoistStatic transform hoist nested static tree with comments
 const { createVNode: _createVNode, createCommentVNode: _createCommentVNode } = _Vue
 
 const _hoisted_1 = /*#__PURE__*/_createVNode(\\"div\\", null, [
-  _createCommentVNode(\\"comment\\")
+  /*#__PURE__*/_createCommentVNode(\\"comment\\")
 ], -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
@@ -172,7 +172,7 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
 "const _Vue = Vue
 const { createVNode: _createVNode } = _Vue
 
-const _hoisted_1 = /*#__PURE__*/ _createVNode(\\"span\\", null, \\"foo \\" + _toDisplayString(1) + \\" \\" + _toDisplayString(true), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_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 = /*#__PURE__*/ _createVNode(\\"span\\", { foo: 0 }, _toDisplayString(1), -1 /* HOISTED */)
+const _hoisted_1 = /*#__PURE__*/_createVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
 
 return function render(_ctx, _cache) {
   with (_ctx) {

packages/compiler-core/src/codegen.ts

@@ -54,6 +54,8 @@ import {
 } from './runtimeHelpers'
 import { ImportItem } from './transform'
 
+const PURE_ANNOTATION = `/*#__PURE__*/`
+
 type CodegenNode = TemplateChildNode | JSChildNode | SSRCodegenNode
 
 export interface CodegenResult {
@@ -69,6 +71,7 @@ export interface CodegenContext extends Required<CodegenOptions> {
   column: number
   offset: number
   indentLevel: number
+  pure: boolean
   map?: SourceMapGenerator
   helper(key: symbol): string
   push(code: string, node?: CodegenNode): void
@@ -107,6 +110,7 @@ function createCodegenContext(
     line: 1,
     offset: 0,
     indentLevel: 0,
+    pure: false,
     map: undefined,
     helper(key) {
       return `_${helperNameMap[key]}`
@@ -201,7 +205,7 @@ export function generate(
 
   // enter render function
   if (genScopeId && !ssr) {
-    push(`const render = /*#__PURE__*/ _withId(`)
+    push(`const render = ${PURE_ANNOTATION}_withId(`)
   }
   if (!ssr) {
     push(`function render(_ctx, _cache) {`)
@@ -400,7 +404,9 @@ function genModulePreamble(
   }
 
   if (genScopeId) {
-    push(`const _withId = /*#__PURE__*/ ${helper(WITH_SCOPE_ID)}("${scopeId}")`)
+    push(
+      `const _withId = ${PURE_ANNOTATION}${helper(WITH_SCOPE_ID)}("${scopeId}")`
+    )
     newline()
   }
 
@@ -432,6 +438,7 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
   if (!hoists.length) {
     return
   }
+  context.pure = true
   const { push, newline, helper, scopeId, mode } = context
   const genScopeId = !__BROWSER__ && scopeId != null && mode !== 'function'
   newline()
@@ -445,13 +452,6 @@ 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()
   })
@@ -460,6 +460,7 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
     push(`${helper(POP_SCOPE_ID)}()`)
     newline()
   }
+  context.pure = false
 }
 
 function genImports(importsOptions: ImportItem[], context: CodegenContext) {
@@ -634,7 +635,8 @@ function genExpression(node: SimpleExpressionNode, context: CodegenContext) {
 }
 
 function genInterpolation(node: InterpolationNode, context: CodegenContext) {
-  const { push, helper } = context
+  const { push, helper, pure } = context
+  if (pure) push(PURE_ANNOTATION)
   push(`${helper(TO_DISPLAY_STRING)}(`)
   genNode(node.content, context)
   push(`)`)
@@ -676,13 +678,16 @@ function genExpressionAsPropertyKey(
 
 function genComment(node: CommentNode, context: CodegenContext) {
   if (__DEV__) {
-    const { push, helper } = context
+    const { push, helper, pure } = context
+    if (pure) {
+      push(PURE_ANNOTATION)
+    }
     push(`${helper(CREATE_COMMENT)}(${JSON.stringify(node.content)})`, node)
   }
 }
 
 function genVNodeCall(node: VNodeCall, context: CodegenContext) {
-  const { push, helper } = context
+  const { push, helper, pure } = context
   const {
     tag,
     props,
@@ -699,6 +704,9 @@ function genVNodeCall(node: VNodeCall, context: CodegenContext) {
   if (isBlock) {
     push(`(${helper(OPEN_BLOCK)}(${isForBlock ? `true` : ``}), `)
   }
+  if (pure) {
+    push(PURE_ANNOTATION)
+  }
   push(helper(isBlock ? CREATE_BLOCK : CREATE_VNODE) + `(`, node)
   genNodeList(
     genNullableArgs([tag, props, children, patchFlag, dynamicProps]),
@@ -725,12 +733,14 @@ function genNullableArgs(args: any[]): CallExpression['arguments'] {
 
 // JavaScript
 function genCallExpression(node: CallExpression, context: CodegenContext) {
-  const callee = isString(node.callee)
+  const { push, helper, pure } = context
-    ? node.callee
+  const callee = isString(node.callee) ? node.callee : helper(node.callee)
-    : context.helper(node.callee)
+  if (pure) {
-  context.push(callee + `(`, node)
+    push(PURE_ANNOTATION)
+  }
+  push(callee + `(`, node)
   genNodeList(node.arguments, context)
-  context.push(`)`)
+  push(`)`)
 }
 
 function genObjectExpression(node: ObjectExpression, context: CodegenContext) {