fix(compiler-dom): should bail hoisted on break content with innerHTM…

…L (eg.tables related tags)
vuejs · May 25, 2020 · deca18f · deca18f
1 parent 38f2d23
commit deca18f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -225,4 +225,18 @@ describe('stringify static html', () => {
       type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
     })
   })
+
+  // https://github.com/vitejs/vite/issues/226
+  test('should bail on break content with innerHTML (eg.tables related tags)', () => {
+    const { ast } = compileWithStringify(
+      `<div><div>${repeat(
+        `<tr class="foo">foo</tr>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</div></div>`
+    )
+    expect(ast.hoists.length).toBe(1)
+    expect(ast.hoists[0]).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
@@ -25,7 +25,8 @@ import {
   toDisplayString,
   normalizeClass,
   normalizeStyle,
-  stringifyStyle
+  stringifyStyle,
+  makeMap
 } from '@vue/shared'
 
 export const enum StringifyThresholds {
@@ -59,6 +60,12 @@ type StringifiableNode = PlainElementNode | TextCallNode
  * This optimization is only performed in Node.js.
  */
 export const stringifyStatic: HoistTransform = (children, context) => {
+  if (
+    context.parent!.type === NodeTypes.ELEMENT &&
+    canNotStringifiableTag((context.parent as PlainElementNode).tag)
+  ) {
+    return
+  }
   let nc = 0 // current node count
   let ec = 0 // current element with binding count
   const currentChunk: StringifiableNode[] = []
@@ -136,6 +143,8 @@ const isStringifiableAttr = (name: string) => {
   return isKnownAttr(name) || dataAriaRE.test(name)
 }
 
+const canNotStringifiableTag = makeMap('p,table,thead,tr,th,tbody,td,colspan')
+
 const replaceHoist = (
   node: StringifiableNode,
   replacement: JSChildNode | null,