fix: bail stringification for slots

fix #1281, close #1286
vuejs · Jun 10, 2020 · 9b5d13e · 9b5d13e
1 parent fbaf52a
commit 9b5d13e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 12 deletions.
diff --git a/packages/compiler-core/src/options.ts b/packages/compiler-core/src/options.ts
@@ -1,4 +1,4 @@
-import { ElementNode, Namespace, TemplateChildNode } from './ast'
+import { ElementNode, Namespace, TemplateChildNode, ParentNode } from './ast'
 import { TextModes } from './parse'
 import { CompilerError } from './errors'
 import {
@@ -53,7 +53,8 @@ export interface ParserOptions {
 
 export type HoistTransform = (
   children: TemplateChildNode[],
-  context: TransformContext
+  context: TransformContext,
+  parent: ParentNode
 ) => void
 
 export interface TransformOptions {

diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -8,15 +8,16 @@ import {
   ComponentNode,
   TemplateNode,
   ElementNode,
-  VNodeCall
+  VNodeCall,
+  ParentNode
 } from '../ast'
 import { TransformContext } from '../transform'
 import { PatchFlags, isString, isSymbol } from '@vue/shared'
 import { isSlotOutlet, findProp } from '../utils'
 
 export function hoistStatic(root: RootNode, context: TransformContext) {
   walk(
-    root.children,
+    root,
     context,
     new Map(),
     // Root node is unfortunately non-hoistable due to potential parent
@@ -44,7 +45,7 @@ const enum StaticType {
 }
 
 function walk(
-  children: TemplateChildNode[],
+  node: ParentNode,
   context: TransformContext,
   resultCache: Map<TemplateChildNode, StaticType>,
   doNotHoistNode: boolean = false
@@ -60,6 +61,7 @@ function walk(
   // stringficiation threshold is met.
   let hasRuntimeConstant = false
 
+  const { children } = node
   for (let i = 0; i < children.length; i++) {
     const child = children[i]
     // only plain elements & text calls are eligible for hoisting.
@@ -114,21 +116,25 @@ function walk(
 
     // walk further
     if (child.type === NodeTypes.ELEMENT) {
-      walk(child.children, context, resultCache)
+      walk(child, context, resultCache)
     } else if (child.type === NodeTypes.FOR) {
       // Do not hoist v-for single child because it has to be a block
-      walk(child.children, context, resultCache, child.children.length === 1)
+      walk(child, context, resultCache, child.children.length === 1)
     } else if (child.type === NodeTypes.IF) {
       for (let i = 0; i < child.branches.length; i++) {
-        const branchChildren = child.branches[i].children
         // Do not hoist v-if single child because it has to be a block
-        walk(branchChildren, context, resultCache, branchChildren.length === 1)
+        walk(
+          child.branches[i],
+          context,
+          resultCache,
+          child.branches[i].children.length === 1
+        )
       }
     }
   }
 
   if (!hasRuntimeConstant && hasHoistedNode && context.transformHoist) {
-    context.transformHoist(children, context)
+    context.transformHoist(children, context, node)
   }
 }
 

diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -250,7 +250,7 @@ describe('stringify static html', () => {
     })
   })
 
-  test('should bail on break content with innerHTML (eg.tables related tags)', () => {
+  test('should bail on tags that has placement constraints (eg.tables related tags)', () => {
     const { ast } = compileWithStringify(
       `<table><tbody>${repeat(
         `<tr class="foo"><td>foo</td></tr>`,
@@ -262,4 +262,36 @@ describe('stringify static html', () => {
       type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
     })
   })
+
+  test('should bail inside slots', () => {
+    const { ast } = compileWithStringify(
+      `<foo>${repeat(
+        `<div class="foo"></div>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</foo>`
+    )
+    expect(ast.hoists.length).toBe(
+      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+    )
+    ast.hoists.forEach(node => {
+      expect(node).toMatchObject({
+        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+      })
+    })
+
+    const { ast: ast2 } = compileWithStringify(
+      `<foo><template #foo>${repeat(
+        `<div class="foo"></div>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</template></foo>`
+    )
+    expect(ast2.hoists.length).toBe(
+      StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+    )
+    ast2.hoists.forEach(node => {
+      expect(node).toMatchObject({
+        type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+      })
+    })
+  })
 })
diff --git a/packages/compiler-dom/src/transforms/stringifyStatic.ts b/packages/compiler-dom/src/transforms/stringifyStatic.ts
@@ -59,7 +59,15 @@ type StringifiableNode = PlainElementNode | TextCallNode
  *
  * This optimization is only performed in Node.js.
  */
-export const stringifyStatic: HoistTransform = (children, context) => {
+export const stringifyStatic: HoistTransform = (children, context, parent) => {
+  if (
+    parent.type === NodeTypes.ELEMENT &&
+    (parent.tagType === ElementTypes.COMPONENT ||
+      parent.tagType === ElementTypes.TEMPLATE)
+  ) {
+    return
+  }
+
   let nc = 0 // current node count
   let ec = 0 // current element with binding count
   const currentChunk: StringifiableNode[] = []