fix(compiler): bail strigification on runtime constant expressions

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

@@ -1,4 +1,9 @@
-import { compile, NodeTypes, CREATE_STATIC } from '../../src'
+import {
+  compile,
+  NodeTypes,
+  CREATE_STATIC,
+  createSimpleExpression
+} from '../../src'
 import {
   stringifyStatic,
   StringifyThresholds
@@ -121,4 +126,46 @@ describe('stringify static html', () => {
       ]
     })
   })
+
+  test('should bail on runtime constant v-bind bindings', () => {
+    const { ast } = compile(
+      `<div><div><img src="./foo" />${repeat(
+        `<span class="foo">foo</span>`,
+        StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+      )}</div></div>`,
+      {
+        hoistStatic: true,
+        prefixIdentifiers: true,
+        transformHoist: stringifyStatic,
+        nodeTransforms: [
+          node => {
+            if (node.type === NodeTypes.ELEMENT && node.tag === 'img') {
+              const exp = createSimpleExpression(
+                '_imports_0_',
+                false,
+                node.loc,
+                true
+              )
+              exp.isRuntimeConstant = true
+              node.props[0] = {
+                type: NodeTypes.DIRECTIVE,
+                name: 'bind',
+                arg: createSimpleExpression('src', true),
+                exp,
+                modifiers: [],
+                loc: node.loc
+              }
+            }
+          }
+        ]
+      }
+    )
+    // the expression and the tree are still hoistable
+    expect(ast.hoists.length).toBe(1)
+    // ...but the hoisted tree should not be stringified
+    expect(ast.hoists[0]).toMatchObject({
+      // if it's stringified it will be NodeTypes.CALL_EXPRESSION
+      type: NodeTypes.VNODE_CALL
+    })
+  })
 })

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

@@ -47,12 +47,30 @@ export const enum StringifyThresholds {
 function shouldOptimize(node: ElementNode): boolean {
   let bindingThreshold = StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
   let nodeThreshold = StringifyThresholds.NODE_COUNT
+  let bail = false
 
   // TODO: check for cases where using innerHTML will result in different
   // output compared to imperative node insertions.
   // probably only need to check for most common case
   // i.e. non-phrasing-content tags inside `<p>`
   function walk(node: ElementNode) {
+    // some transforms, e.g. `transformAssetUrls` in `@vue/compiler-sfc` may
+    // convert static attributes into a v-bind with a constnat expresion.
+    // Such constant bindings are eligible for hoisting but not for static
+    // stringification because they cannot be pre-evaluated.
+    for (let i = 0; i < node.props.length; i++) {
+      const p = node.props[i]
+      if (
+        p.type === NodeTypes.DIRECTIVE &&
+        p.name === 'bind' &&
+        p.exp &&
+        p.exp.type !== NodeTypes.COMPOUND_EXPRESSION &&
+        p.exp.isRuntimeConstant
+      ) {
+        bail = true
+        return false
+      }
+    }
     for (let i = 0; i < node.children.length; i++) {
       if (--nodeThreshold === 0) {
         return true
@@ -65,6 +83,9 @@ function shouldOptimize(node: ElementNode): boolean {
         if (walk(child)) {
           return true
         }
+        if (bail) {
+          return false
+        }
       }
     }
     return false