perf: also hoist all-static children array
This commit is contained in:
parent
8bc50cb995
commit
b7ea7c1485
@ -5,14 +5,15 @@ exports[`compiler: hoistStatic transform hoist element with static key 1`] = `
|
||||
const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", { key: \\"foo\\" }, null, -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -25,14 +26,15 @@ const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"p\\", null, [
|
||||
/*#__PURE__*/_createElementVNode(\\"span\\"),
|
||||
/*#__PURE__*/_createElementVNode(\\"span\\")
|
||||
], -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -44,14 +46,15 @@ const { createElementVNode: _createElementVNode, createCommentVNode: _createComm
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"div\\", null, [
|
||||
/*#__PURE__*/_createCommentVNode(\\"comment\\")
|
||||
], -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { createCommentVNode: _createCommentVNode, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -62,15 +65,16 @@ const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
|
||||
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"div\\", null, null, -1 /* HOISTED */)
|
||||
const _hoisted_3 = [
|
||||
_hoisted_1,
|
||||
_hoisted_2
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1,
|
||||
_hoisted_2
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_3))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -80,14 +84,15 @@ exports[`compiler: hoistStatic transform hoist simple element 1`] = `
|
||||
const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { class: \\"inline\\" }, \\"hello\\", -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -175,14 +180,15 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
|
||||
const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", null, \\"foo \\" + /*#__PURE__*/_toDisplayString(1) + \\" \\" + /*#__PURE__*/_toDisplayString(true), -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -192,14 +198,15 @@ exports[`compiler: hoistStatic transform prefixIdentifiers hoist nested static t
|
||||
const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = /*#__PURE__*/_createElementVNode(\\"span\\", { foo: 0 }, /*#__PURE__*/_toDisplayString(1), -1 /* HOISTED */)
|
||||
const _hoisted_2 = [
|
||||
_hoisted_1
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, openBlock: _openBlock, createElementBlock: _createElementBlock } = _Vue
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
_hoisted_1
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, _hoisted_2))
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@ -368,6 +375,9 @@ const { createElementVNode: _createElementVNode } = _Vue
|
||||
|
||||
const _hoisted_1 = { id: \\"foo\\" }
|
||||
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
|
||||
const _hoisted_3 = [
|
||||
_hoisted_2
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
@ -375,9 +385,7 @@ return function render(_ctx, _cache) {
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
(_openBlock(true), _createElementBlock(_Fragment, null, _renderList(list, (i) => {
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
|
||||
_hoisted_2
|
||||
]))
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
|
||||
}), 256 /* UNKEYED_FRAGMENT */))
|
||||
]))
|
||||
}
|
||||
@ -393,6 +401,9 @@ const _hoisted_1 = {
|
||||
id: \\"foo\\"
|
||||
}
|
||||
const _hoisted_2 = /*#__PURE__*/_createElementVNode(\\"span\\", null, null, -1 /* HOISTED */)
|
||||
const _hoisted_3 = [
|
||||
_hoisted_2
|
||||
]
|
||||
|
||||
return function render(_ctx, _cache) {
|
||||
with (_ctx) {
|
||||
@ -400,9 +411,7 @@ return function render(_ctx, _cache) {
|
||||
|
||||
return (_openBlock(), _createElementBlock(\\"div\\", null, [
|
||||
ok
|
||||
? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, [
|
||||
_hoisted_2
|
||||
]))
|
||||
? (_openBlock(), _createElementBlock(\\"div\\", _hoisted_1, _hoisted_3))
|
||||
: _createCommentVNode(\\"v-if\\", true)
|
||||
]))
|
||||
}
|
||||
|
@ -26,6 +26,17 @@ import { createObjectMatcher, genFlagText } from '../testUtils'
|
||||
import { transformText } from '../../src/transforms/transformText'
|
||||
import { PatchFlags } from '@vue/shared'
|
||||
|
||||
const hoistedChildrenArrayMatcher = (startIndex = 1, length = 1) => ({
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION,
|
||||
elements: new Array(length).fill(0).map((_, i) => ({
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_${startIndex + i}`
|
||||
}
|
||||
}))
|
||||
})
|
||||
|
||||
function transformWithHoist(template: string, options: CompilerOptions = {}) {
|
||||
const ast = parse(template)
|
||||
transform(ast, {
|
||||
@ -75,20 +86,13 @@ describe('compiler: hoistStatic transform', () => {
|
||||
type: NodeTypes.TEXT,
|
||||
content: `hello`
|
||||
}
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect(root.codegenNode).toMatchObject({
|
||||
tag: `"div"`,
|
||||
props: undefined,
|
||||
children: [
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
}
|
||||
}
|
||||
]
|
||||
children: { content: `_hoisted_2` }
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
@ -104,17 +108,12 @@ describe('compiler: hoistStatic transform', () => {
|
||||
{ type: NodeTypes.ELEMENT, tag: `span` },
|
||||
{ type: NodeTypes.ELEMENT, tag: `span` }
|
||||
]
|
||||
}
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
}
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject({
|
||||
content: '_hoisted_2'
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
|
||||
@ -126,17 +125,12 @@ describe('compiler: hoistStatic transform', () => {
|
||||
tag: `"div"`,
|
||||
props: undefined,
|
||||
children: [{ type: NodeTypes.COMMENT, content: `comment` }]
|
||||
}
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
}
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject({
|
||||
content: `_hoisted_2`
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
|
||||
@ -150,24 +144,12 @@ describe('compiler: hoistStatic transform', () => {
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"div"`
|
||||
}
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
}
|
||||
},
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_2`
|
||||
}
|
||||
}
|
||||
hoistedChildrenArrayMatcher(1, 2)
|
||||
])
|
||||
expect((root.codegenNode as VNodeCall).children).toMatchObject({
|
||||
content: '_hoisted_3'
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
|
||||
@ -213,26 +195,19 @@ describe('compiler: hoistStatic transform', () => {
|
||||
|
||||
test('hoist element with static key', () => {
|
||||
const root = transformWithHoist(`<div><div key="foo"/></div>`)
|
||||
expect(root.hoists.length).toBe(1)
|
||||
expect(root.hoists.length).toBe(2)
|
||||
expect(root.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"div"`,
|
||||
props: createObjectMatcher({ key: 'foo' })
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect(root.codegenNode).toMatchObject({
|
||||
tag: `"div"`,
|
||||
props: undefined,
|
||||
children: [
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
}
|
||||
}
|
||||
]
|
||||
children: { content: `_hoisted_2` }
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
@ -348,7 +323,8 @@ describe('compiler: hoistStatic transform', () => {
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"span"`
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher(2)
|
||||
])
|
||||
expect(
|
||||
((root.children[0] as ElementNode).children[0] as IfNode).codegenNode
|
||||
@ -359,11 +335,7 @@ describe('compiler: hoistStatic transform', () => {
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"div"`,
|
||||
props: { content: `_hoisted_1` },
|
||||
children: [
|
||||
{
|
||||
codegenNode: { content: `_hoisted_2` }
|
||||
}
|
||||
]
|
||||
children: { content: `_hoisted_3` }
|
||||
}
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
@ -380,7 +352,8 @@ describe('compiler: hoistStatic transform', () => {
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"span"`
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher(2)
|
||||
])
|
||||
const forBlockCodegen = ((root.children[0] as ElementNode)
|
||||
.children[0] as ForNode).codegenNode
|
||||
@ -399,11 +372,7 @@ describe('compiler: hoistStatic transform', () => {
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"div"`,
|
||||
props: { content: `_hoisted_1` },
|
||||
children: [
|
||||
{
|
||||
codegenNode: { content: `_hoisted_2` }
|
||||
}
|
||||
]
|
||||
children: { content: `_hoisted_3` }
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
@ -423,6 +392,17 @@ describe('compiler: hoistStatic transform', () => {
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL,
|
||||
tag: `"div"`
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION,
|
||||
elements: [
|
||||
{
|
||||
type: NodeTypes.TEXT_CALL
|
||||
},
|
||||
{
|
||||
type: NodeTypes.ELEMENT
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
@ -443,20 +423,16 @@ describe('compiler: hoistStatic transform', () => {
|
||||
children: {
|
||||
type: NodeTypes.COMPOUND_EXPRESSION
|
||||
}
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect(root.codegenNode).toMatchObject({
|
||||
tag: `"div"`,
|
||||
props: undefined,
|
||||
children: [
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
children: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
content: `_hoisted_2`
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
@ -482,20 +458,16 @@ describe('compiler: hoistStatic transform', () => {
|
||||
constType: ConstantTypes.CAN_STRINGIFY
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
hoistedChildrenArrayMatcher()
|
||||
])
|
||||
expect(root.codegenNode).toMatchObject({
|
||||
tag: `"div"`,
|
||||
props: undefined,
|
||||
children: [
|
||||
{
|
||||
type: NodeTypes.ELEMENT,
|
||||
codegenNode: {
|
||||
children: {
|
||||
type: NodeTypes.SIMPLE_EXPRESSION,
|
||||
content: `_hoisted_1`
|
||||
content: `_hoisted_2`
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
expect(generate(root).code).toMatchSnapshot()
|
||||
})
|
||||
|
@ -286,6 +286,7 @@ export interface VNodeCall extends Node {
|
||||
| TemplateTextChildNode // single text child
|
||||
| SlotsExpression // component slots
|
||||
| ForRenderListExpression // v-for fragment call
|
||||
| SimpleExpressionNode // hoisted
|
||||
| undefined
|
||||
patchFlag: string | undefined
|
||||
dynamicProps: string | SimpleExpressionNode | undefined
|
||||
@ -338,7 +339,7 @@ export interface Property extends Node {
|
||||
|
||||
export interface ArrayExpression extends Node {
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
elements: Array<string | JSChildNode>
|
||||
elements: Array<string | Node>
|
||||
}
|
||||
|
||||
export interface FunctionExpression extends Node {
|
||||
|
@ -840,7 +840,7 @@ function genObjectExpression(node: ObjectExpression, context: CodegenContext) {
|
||||
}
|
||||
|
||||
function genArrayExpression(node: ArrayExpression, context: CodegenContext) {
|
||||
genNodeListAsArray(node.elements, context)
|
||||
genNodeListAsArray(node.elements as CodegenNode[], context)
|
||||
}
|
||||
|
||||
function genFunctionExpression(
|
||||
|
@ -16,7 +16,8 @@ import {
|
||||
createCacheExpression,
|
||||
TemplateLiteral,
|
||||
createVNodeCall,
|
||||
ConstantTypes
|
||||
ConstantTypes,
|
||||
ArrayExpression
|
||||
} from './ast'
|
||||
import {
|
||||
isString,
|
||||
@ -113,7 +114,7 @@ export interface TransformContext
|
||||
onNodeRemoved(): void
|
||||
addIdentifiers(exp: ExpressionNode | string): void
|
||||
removeIdentifiers(exp: ExpressionNode | string): void
|
||||
hoist(exp: string | JSChildNode): SimpleExpressionNode
|
||||
hoist(exp: string | JSChildNode | ArrayExpression): SimpleExpressionNode
|
||||
cache<T extends JSChildNode>(exp: T, isVNode?: boolean): CacheExpression | T
|
||||
constantCache: Map<TemplateChildNode, ConstantTypes>
|
||||
|
||||
|
@ -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(
|
||||
|
@ -30,7 +30,6 @@ describe('stringify static html', () => {
|
||||
const { ast } = compileWithStringify(
|
||||
`<div><div><div>hello</div><div>hello</div></div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
// should be a normal vnode call
|
||||
expect(ast.hoists[0]!.type).toBe(NodeTypes.VNODE_CALL)
|
||||
})
|
||||
@ -42,9 +41,9 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
// should be optimized now
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.JS_CALL_EXPRESSION,
|
||||
callee: CREATE_STATIC,
|
||||
arguments: [
|
||||
@ -56,7 +55,11 @@ describe('stringify static html', () => {
|
||||
),
|
||||
'1'
|
||||
]
|
||||
})
|
||||
}, // the children array is hoisted as well
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('should work on eligible content (elements > 20)', () => {
|
||||
@ -66,9 +69,9 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.NODE_COUNT
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
// should be optimized now
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.JS_CALL_EXPRESSION,
|
||||
callee: CREATE_STATIC,
|
||||
arguments: [
|
||||
@ -80,7 +83,12 @@ describe('stringify static html', () => {
|
||||
),
|
||||
'1'
|
||||
]
|
||||
})
|
||||
},
|
||||
// the children array is hoisted as well
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('should work for multiple adjacent nodes', () => {
|
||||
@ -90,13 +98,10 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}</div>`
|
||||
)
|
||||
// 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({
|
||||
// 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: [
|
||||
@ -108,7 +113,15 @@ describe('stringify static html', () => {
|
||||
),
|
||||
'5'
|
||||
]
|
||||
})
|
||||
},
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
null,
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('serializing constant bindings', () => {
|
||||
@ -118,9 +131,9 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
// should be optimized now
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.JS_CALL_EXPRESSION,
|
||||
callee: CREATE_STATIC,
|
||||
arguments: [
|
||||
@ -132,7 +145,11 @@ describe('stringify static html', () => {
|
||||
),
|
||||
'1'
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('escape', () => {
|
||||
@ -143,9 +160,9 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
// should be optimized now
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.JS_CALL_EXPRESSION,
|
||||
callee: CREATE_STATIC,
|
||||
arguments: [
|
||||
@ -157,7 +174,11 @@ describe('stringify static html', () => {
|
||||
),
|
||||
'1'
|
||||
]
|
||||
})
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('should bail on runtime constant v-bind bindings', () => {
|
||||
@ -192,13 +213,16 @@ describe('stringify static html', () => {
|
||||
]
|
||||
}
|
||||
)
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
// 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
|
||||
// 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
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
|
||||
})
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
|
||||
const { ast: ast2 } = compileWithStringify(
|
||||
`<div><div><input :indeterminate="true">${repeat(
|
||||
@ -220,10 +248,14 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}</div></div>`
|
||||
)
|
||||
expect(ast2.hoists.length).toBe(1)
|
||||
expect(ast2.hoists[0]).toMatchObject({
|
||||
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
|
||||
)}<input indeterminate></div></div>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
|
||||
})
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
|
||||
const { ast: ast2 } = compileWithStringify(
|
||||
`<div><div>${repeat(
|
||||
@ -244,10 +280,14 @@ describe('stringify static html', () => {
|
||||
StringifyThresholds.ELEMENT_WITH_BINDING_COUNT
|
||||
)}<input :indeterminate="true"></div></div>`
|
||||
)
|
||||
expect(ast2.hoists.length).toBe(1)
|
||||
expect(ast2.hoists[0]).toMatchObject({
|
||||
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
|
||||
)}</tbody></table>`
|
||||
)
|
||||
expect(ast.hoists.length).toBe(1)
|
||||
expect(ast.hoists[0]).toMatchObject({
|
||||
expect(ast.hoists).toMatchObject([
|
||||
{
|
||||
type: NodeTypes.VNODE_CALL // not CALL_EXPRESSION
|
||||
})
|
||||
},
|
||||
{
|
||||
type: NodeTypes.JS_ARRAY_EXPRESSION
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
test('should bail inside slots', () => {
|
||||
|
Loading…
Reference in New Issue
Block a user