fix(compiler-dom): stringify eligible svg content

fix #4282

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

@@ -360,4 +360,28 @@ describe('stringify static html', () => {
       ]
     })
   })
+
+  test('should stringify svg', () => {
+    const svg = `<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">`
+    const repeated = `<rect width="50" height="50" fill="#C4C4C4"></rect>`
+    const { ast } = compileWithStringify(
+      `<div>${svg}${repeat(
+        repeated,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</svg></div>`
+    )
+    expect(ast.hoists[0]).toMatchObject({
+      type: NodeTypes.JS_CALL_EXPRESSION,
+      callee: CREATE_STATIC,
+      arguments: [
+        JSON.stringify(
+          `${svg}${repeat(
+            repeated,
+            StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+          )}</svg>`
+        ),
+        '1'
+      ]
+    })
+  })
 })

packages/compiler-dom/src/transforms/stringifyStatic.ts

@@ -20,14 +20,16 @@ import {
   isVoidTag,
   isString,
   isSymbol,
-  isKnownAttr,
+  isKnownHtmlAttr,
   escapeHtml,
   toDisplayString,
   normalizeClass,
   normalizeStyle,
   stringifyStyle,
-  makeMap
+  makeMap,
+  isKnownSvgAttr
 } from '@vue/shared'
+import { DOMNamespaces } from '../parserOptions'
 
 export const enum StringifyThresholds {
   ELEMENT_WITH_BINDING_COUNT = 5,
@@ -138,8 +140,14 @@ const getHoistedNode = (node: TemplateChildNode) =>
   node.codegenNode.hoisted
 
 const dataAriaRE = /^(data|aria)-/
-const isStringifiableAttr = (name: string) => {
-  return isKnownAttr(name) || dataAriaRE.test(name)
+const isStringifiableAttr = (name: string, ns: DOMNamespaces) => {
+  return (
+    (ns === DOMNamespaces.HTML
+      ? isKnownHtmlAttr(name)
+      : ns === DOMNamespaces.SVG
+      ? isKnownSvgAttr(name)
+      : false) || dataAriaRE.test(name)
+  )
 }
 
 const replaceHoist = (
@@ -175,6 +183,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
   let ec = node.props.length > 0 ? 1 : 0 // element w/ binding count
   let bailed = false
   const bail = (): false => {
+    debugger
     bailed = true
     return false
   }
@@ -187,7 +196,10 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
     for (let i = 0; i < node.props.length; i++) {
       const p = node.props[i]
       // bail on non-attr bindings
-      if (p.type === NodeTypes.ATTRIBUTE && !isStringifiableAttr(p.name)) {
+      if (
+        p.type === NodeTypes.ATTRIBUTE &&
+        !isStringifiableAttr(p.name, node.ns)
+      ) {
         return bail()
       }
       if (p.type === NodeTypes.DIRECTIVE && p.name === 'bind') {
@@ -195,7 +207,7 @@ function analyzeNode(node: StringifiableNode): [number, number] | false {
         if (
           p.arg &&
           (p.arg.type === NodeTypes.COMPOUND_EXPRESSION ||
-            (p.arg.isStatic && !isStringifiableAttr(p.arg.content)))
+            (p.arg.isStatic && !isStringifiableAttr(p.arg.content, node.ns)))
         ) {
           return bail()
         }