theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf: also hoist all-static children array

Browse Source
This commit is contained in:
Evan You
2021-07-08 16:12:04 -04:00
parent 8bc50cb995
commit b7ea7c1485
7 changed files with 275 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/compiler-core/__tests__/transforms/__snapshots__/hoistStatic.spec.ts.snap
View File

@@ -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)
]))
}

150
packages/compiler-core/__tests__/transforms/hoistStatic.spec.ts
View File

@@ -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: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`
}
}
]
children: {
type: NodeTypes.SIMPLE_EXPRESSION,
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: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_1`
}
}
]
children: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `_hoisted_2`
}
})
expect(generate(root).code).toMatchSnapshot()
})