diff --git a/packages/compiler-core/src/transforms/hoistStatic.ts b/packages/compiler-core/src/transforms/hoistStatic.ts
index ee18b550f..1ea895ace 100644
--- a/packages/compiler-core/src/transforms/hoistStatic.ts
+++ b/packages/compiler-core/src/transforms/hoistStatic.ts
@@ -11,10 +11,11 @@ import {
VNodeCall,
ParentNode,
JSChildNode,
- CallExpression
+ CallExpression,
+ createArrayExpression
} from '../ast'
import { TransformContext } from '../transform'
-import { PatchFlags, isString, isSymbol } from '@vue/shared'
+import { PatchFlags, isString, isSymbol, isArray } from '@vue/shared'
import { getVNodeBlockHelper, getVNodeHelper, isSlotOutlet } from '../utils'
import {
OPEN_BLOCK,
@@ -51,7 +52,6 @@ function walk(
context: TransformContext,
doNotHoistNode: boolean = false
) {
- let hasHoistedNode = false
// Some transforms, e.g. transformAssetUrls 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
@@ -63,6 +63,9 @@ function walk(
let canStringify = true
const { children } = node
+ const originalCount = children.length
+ let hoistedCount = 0
+
for (let i = 0; i < children.length; i++) {
const child = children[i]
// only plain elements & text calls are eligible for hoisting.
@@ -81,7 +84,7 @@ function walk(
;(child.codegenNode as VNodeCall).patchFlag =
PatchFlags.HOISTED + (__DEV__ ? ` /* HOISTED */` : ``)
child.codegenNode = context.hoist(child.codegenNode!)
- hasHoistedNode = true
+ hoistedCount++
continue
}
} else {
@@ -115,7 +118,7 @@ function walk(
}
if (contentType >= ConstantTypes.CAN_HOIST) {
child.codegenNode = context.hoist(child.codegenNode)
- hasHoistedNode = true
+ hoistedCount++
}
}
}
@@ -145,9 +148,24 @@ function walk(
}
}
- if (canStringify && hasHoistedNode && context.transformHoist) {
+ if (canStringify && hoistedCount && context.transformHoist) {
context.transformHoist(children, context, node)
}
+
+ // all children were hoisted - the entire children array is hoistable.
+ if (
+ hoistedCount &&
+ hoistedCount === originalCount &&
+ node.type === NodeTypes.ELEMENT &&
+ node.tagType === ElementTypes.ELEMENT &&
+ node.codegenNode &&
+ node.codegenNode.type === NodeTypes.VNODE_CALL &&
+ isArray(node.codegenNode.children)
+ ) {
+ node.codegenNode.children = context.hoist(
+ createArrayExpression(node.codegenNode.children)
+ )
+ }
}
export function getConstantType(
diff --git a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
index 612f4f013..b9e7d8120 100644
--- a/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
+++ b/packages/compiler-dom/__tests__/transforms/stringifyStatic.spec.ts
@@ -30,7 +30,6 @@ describe('stringify static html', () => {
const { ast } = compileWithStringify(
``
)
- expect(ast.hoists.length).toBe(1)
// should be a normal vnode call
expect(ast.hoists[0]!.type).toBe(NodeTypes.VNODE_CALL)
})
@@ -42,21 +41,25 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
// should be optimized now
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_STATIC,
- arguments: [
- JSON.stringify(
- `${repeat(
- ``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
- ),
- '1'
- ]
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ `${repeat(
+ ``,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )}
`
+ ),
+ '1'
+ ]
+ }, // the children array is hoisted as well
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should work on eligible content (elements > 20)', () => {
@@ -66,21 +69,26 @@ describe('stringify static html', () => {
StringifyThresholds.NODE_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
// should be optimized now
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_STATIC,
- arguments: [
- JSON.stringify(
- `${repeat(
- ``,
- StringifyThresholds.NODE_COUNT
- )}
`
- ),
- '1'
- ]
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ `${repeat(
+ ``,
+ StringifyThresholds.NODE_COUNT
+ )}
`
+ ),
+ '1'
+ ]
+ },
+ // the children array is hoisted as well
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should work for multiple adjacent nodes', () => {
@@ -90,25 +98,30 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- // should have 5 hoisted nodes, but the other 4 should be null
- expect(ast.hoists.length).toBe(5)
- for (let i = 1; i < 5; i++) {
- expect(ast.hoists[i]).toBe(null)
- }
- // should be optimized now
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_STATIC,
- arguments: [
- JSON.stringify(
- repeat(
- ``,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )
- ),
- '5'
- ]
- })
+ // should have 6 hoisted nodes (including the entire array),
+ // but 2~5 should be null because they are merged into 1
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ repeat(
+ ``,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )
+ ),
+ '5'
+ ]
+ },
+ null,
+ null,
+ null,
+ null,
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('serializing constant bindings', () => {
@@ -118,21 +131,25 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
// should be optimized now
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_STATIC,
- arguments: [
- JSON.stringify(
- `${repeat(
- `1 + false`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
- ),
- '1'
- ]
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ `${repeat(
+ `1 + false`,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )}
`
+ ),
+ '1'
+ ]
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('escape', () => {
@@ -143,21 +160,25 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
// should be optimized now
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: CREATE_STATIC,
- arguments: [
- JSON.stringify(
- `${repeat(
- `1 + <` + `&`,
- StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
- )}
`
- ),
- '1'
- ]
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: CREATE_STATIC,
+ arguments: [
+ JSON.stringify(
+ `${repeat(
+ `1 + <` + `&`,
+ StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
+ )}
`
+ ),
+ '1'
+ ]
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should bail on runtime constant v-bind bindings', () => {
@@ -192,13 +213,16 @@ describe('stringify static html', () => {
]
}
)
- // 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
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ // the expression and the tree are still hoistable
+ // but if it's stringified it will be NodeTypes.CALL_EXPRESSION
+ type: NodeTypes.VNODE_CALL
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
// #1128
@@ -209,10 +233,14 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
const { ast: ast2 } = compileWithStringify(
``
)
- expect(ast2.hoists.length).toBe(1)
- expect(ast2.hoists[0]).toMatchObject({
- type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
- })
+ expect(ast2.hoists).toMatchObject([
+ {
+ type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should bail on non attribute bindings', () => {
@@ -233,10 +265,14 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
const { ast: ast2 } = compileWithStringify(
``
)
- expect(ast2.hoists.length).toBe(1)
- expect(ast2.hoists[0]).toMatchObject({
- type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
- })
+ expect(ast2.hoists).toMatchObject([
+ {
+ type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should bail on tags that has placement constraints (eg.tables related tags)', () => {
@@ -257,10 +297,14 @@ describe('stringify static html', () => {
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
)}`
)
- expect(ast.hoists.length).toBe(1)
- expect(ast.hoists[0]).toMatchObject({
- type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
- })
+ expect(ast.hoists).toMatchObject([
+ {
+ type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
+ },
+ {
+ type: NodeTypes.JS_ARRAY_EXPRESSION
+ }
+ ])
})
test('should bail inside slots', () => {