fix(compiler-dom): should bail stringification on runtime constant re…

…gardless of position

ref: vitejs/vite#157

packages/compiler-core/src/transforms/hoistStatic.ts

@@ -37,21 +37,44 @@ export function isSingleElementRoot(
  )
 }
 
+const enum StaticType {
+ NOT_STATIC = 0,
+ FULL_STATIC,
+ HAS_RUNTIME_CONSTANT
+}
+
 function walk(
  children: TemplateChildNode[],
  context: TransformContext,
- resultCache: Map<TemplateChildNode, boolean>,
+ resultCache: Map<TemplateChildNode, StaticType>,
  doNotHoistNode: boolean = false
 ) {
  let hasHoistedNode = false
+ // Some transforms, e.g. trasnformAssetUrls from @vue/compiler-sfc, replaces
+ // static bindings with expressions. These expressions are guaranteed to be
+ // constant so they are still eligible for hoisting, but they are only
+ // available at runtime and therefore cannot be evaluated ahead of time.
+ // This is only a concern for pre-stringification (via transformHoist by
+ // @vue/compiler-dom), but doing it here allows us to perform only one full
+ // walk of the AST and allow `stringifyStatic` to stop walking as soon as its
+ // stringficiation threshold is met.
+ let hasRuntimeConstant = false
+
  for (let i = 0; i < children.length; i++) {
  const child = children[i]
  // only plain elements & text calls are eligible for hoisting.
  if (
  child.type === NodeTypes.ELEMENT &&
  child.tagType === ElementTypes.ELEMENT
  ) {
- if (!doNotHoistNode && isStaticNode(child, resultCache)) {
+ let staticType
+ if (
+ !doNotHoistNode &&
+ (staticType = getStaticType(child, resultCache)) > 0
+ ) {
+ if (staticType === StaticType.HAS_RUNTIME_CONSTANT) {
+ hasRuntimeConstant = true
+ }
  // whole tree is static
  ;(child.codegenNode as VNodeCall).patchFlag =
  PatchFlags.HOISTED + (__DEV__ ? ` /* HOISTED */` : ``)
@@ -78,12 +101,15 @@ function walk(
  }
  }
  }
- } else if (
- child.type === NodeTypes.TEXT_CALL &&
- isStaticNode(child.content, resultCache)
- ) {
- child.codegenNode = context.hoist(child.codegenNode)
- hasHoistedNode = true
+ } else if (child.type === NodeTypes.TEXT_CALL) {
+ const staticType = getStaticType(child.content, resultCache)
+ if (staticType > 0) {
+ if (staticType === StaticType.HAS_RUNTIME_CONSTANT) {
+ hasRuntimeConstant = true
+ }
+ child.codegenNode = context.hoist(child.codegenNode)
+ hasHoistedNode = true
+ }
  }
 
  // walk further
@@ -101,73 +127,108 @@ function walk(
  }
  }
 
- if (hasHoistedNode && context.transformHoist) {
+ if (!hasRuntimeConstant && hasHoistedNode && context.transformHoist) {
  context.transformHoist(children, context)
  }
 }
 
-export function isStaticNode(
+export function getStaticType(
  node: TemplateChildNode | SimpleExpressionNode,
- resultCache: Map<TemplateChildNode, boolean> = new Map()
-): boolean {
+ resultCache: Map<TemplateChildNode, StaticType> = new Map()
+): StaticType {
  switch (node.type) {
  case NodeTypes.ELEMENT:
  if (node.tagType !== ElementTypes.ELEMENT) {
- return false
+ return StaticType.NOT_STATIC
  }
  const cached = resultCache.get(node)
  if (cached !== undefined) {
  return cached
  }
  const codegenNode = node.codegenNode!
  if (codegenNode.type !== NodeTypes.VNODE_CALL) {
- return false
+ return StaticType.NOT_STATIC
  }
  const flag = getPatchFlag(codegenNode)
  if (!flag && !hasDynamicKeyOrRef(node) && !hasCachedProps(node)) {
  // element self is static. check its children.
+ let returnType = StaticType.FULL_STATIC
  for (let i = 0; i < node.children.length; i++) {
- if (!isStaticNode(node.children[i], resultCache)) {
- resultCache.set(node, false)
- return false
+ const childType = getStaticType(node.children[i], resultCache)
+ if (childType === StaticType.NOT_STATIC) {
+ resultCache.set(node, StaticType.NOT_STATIC)
+ return StaticType.NOT_STATIC
+ } else if (childType === StaticType.HAS_RUNTIME_CONSTANT) {
+ returnType = StaticType.HAS_RUNTIME_CONSTANT
  }
  }
- // only svg/foreignObject could be block here, however if they are static
- // then they don't need to be blocks since there will be no nested
- // updates.
+
+ // check if any of the props contain runtime constants
+ if (returnType !== StaticType.HAS_RUNTIME_CONSTANT) {
+ 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)
+ ) {
+ returnType = StaticType.HAS_RUNTIME_CONSTANT
+ }
+ }
+ }
+
+ // only svg/foreignObject could be block here, however if they are
+ // stati then they don't need to be blocks since there will be no
+ // nested updates.
  if (codegenNode.isBlock) {
  codegenNode.isBlock = false
  }
- resultCache.set(node, true)
- return true
+
+ resultCache.set(node, returnType)
+ return returnType
  } else {
- resultCache.set(node, false)
- return false
+ resultCache.set(node, StaticType.NOT_STATIC)
+ return StaticType.NOT_STATIC
  }
  case NodeTypes.TEXT:
  case NodeTypes.COMMENT:
- return true
+ return StaticType.FULL_STATIC
  case NodeTypes.IF:
  case NodeTypes.FOR:
  case NodeTypes.IF_BRANCH:
- return false
+ return StaticType.NOT_STATIC
  case NodeTypes.INTERPOLATION:
  case NodeTypes.TEXT_CALL:
- return isStaticNode(node.content, resultCache)
+ return getStaticType(node.content, resultCache)
  case NodeTypes.SIMPLE_EXPRESSION:
  return node.isConstant
+ ? node.isRuntimeConstant
+ ? StaticType.HAS_RUNTIME_CONSTANT
+ : StaticType.FULL_STATIC
+ : StaticType.NOT_STATIC
  case NodeTypes.COMPOUND_EXPRESSION:
- return node.children.every(child => {
- return (
- isString(child) || isSymbol(child) || isStaticNode(child, resultCache)
- )
- })
+ let returnType = StaticType.FULL_STATIC
+ for (let i = 0; i < node.children.length; i++) {
+ const child = node.children[i]
+ if (isString(child) || isSymbol(child)) {
+ continue
+ }
+ const childType = getStaticType(child, resultCache)
+ if (childType === StaticType.NOT_STATIC) {
+ return StaticType.NOT_STATIC
+ } else if (childType === StaticType.HAS_RUNTIME_CONSTANT) {
+ returnType = StaticType.HAS_RUNTIME_CONSTANT
+ }
+ }
+ return returnType
  default:
  if (__DEV__) {
  const exhaustiveCheck: never = node
  exhaustiveCheck
  }
- return false
+ return StaticType.NOT_STATIC
  }
 }
 

packages/compiler-core/src/transforms/transformElement.ts

@@ -46,7 +46,7 @@ import {
  findDir
 } from '../utils'
 import { buildSlots } from './vSlot'
-import { isStaticNode } from './hoistStatic'
+import { getStaticType } from './hoistStatic'
 
 // some directive transforms (e.g. v-model) may return a symbol for runtime
 // import, which should be used instead of a resolveDirective call.
@@ -156,7 +156,7 @@ export const transformElement: NodeTransform = (node, context) => {
  const hasDynamicTextChild =
  type === NodeTypes.INTERPOLATION ||
  type === NodeTypes.COMPOUND_EXPRESSION
- if (hasDynamicTextChild && !isStaticNode(child)) {
+ if (hasDynamicTextChild && !getStaticType(child)) {
  patchFlag |= PatchFlags.TEXT
  }
  // pass directly if the only child is a text node
@@ -292,7 +292,7 @@ export function buildProps(
  value.type === NodeTypes.JS_CACHE_EXPRESSION ||
  ((value.type === NodeTypes.SIMPLE_EXPRESSION ||
  value.type === NodeTypes.COMPOUND_EXPRESSION) &&
- isStaticNode(value))
+ getStaticType(value) > 0)
  ) {
  // skip if the prop is a cached handler or has constant value
  return

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

@@ -161,10 +161,10 @@ describe('stringify static html', () => {
 
  test('should bail on runtime constant v-bind bindings', () => {
  const { ast } = compile(
- `<div><div><img src="./foo" />${repeat(
+ `<div><div>${repeat(
  `<span class="foo">foo</span>`,
  StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}</div></div>`,
+ )}<img src="./foo" /></div></div>`,
  {
  hoistStatic: true,
  prefixIdentifiers: true,

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

@@ -185,17 +185,6 @@ function analyzeNode(node: StringiableNode): [number, number] | false {
  ) {
  return bail()
  }
- // 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.
- if (
- p.exp &&
- (p.exp.type === NodeTypes.COMPOUND_EXPRESSION ||
- p.exp.isRuntimeConstant)
- ) {
- return bail()
- }
  }
  }
  for (let i = 0; i < node.children.length; i++) {