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

feat(compiler): block optimization codegen for RootNode

Browse Source
This commit is contained in:
Evan You 2019-10-02 13:11:07 -04:00
parent c0bf341748
commit 24bd6c27e0
15 changed files with 376 additions and 491 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/compiler-core/__tests__/__snapshots__/codegen.spec.ts.snap
View File

@ -4,25 +4,16 @@ exports[`compiler: codegen ConditionalExpression 1`] = `
"
return function render() {
with (this) {
return (foo, ok
return ok
? foo()
: orNot
? bar()
: baz())
: baz()
}
}"
`;
exports[`compiler: codegen SequenceExpression 1`] = `
"
return function render() {
with (this) {
return (foo, bar(baz))
}
}"
`;
exports[`compiler: codegen callExpression + objectExpression + arrayExpression 1`] = `
exports[`compiler: codegen Element (callExpression + objectExpression + arrayExpression) 1`] = `
"
return function render() {
with (this) {
@ -40,6 +31,15 @@ return function render() {
}"
`;
exports[`compiler: codegen SequenceExpression 1`] = `
"
return function render() {
with (this) {
return (foo, bar(baz))
}
}"
`;
exports[`compiler: codegen comment 1`] = `
"
return function render() {
@ -58,6 +58,15 @@ return function render() {
}"
`;
exports[`compiler: codegen forNode 1`] = `
"
return function render() {
with (this) {
return (foo, bar)
}
}"
`;
exports[`compiler: codegen function mode preamble 1`] = `
"const _Vue = Vue
@ -145,28 +154,3 @@ return function render() {
}
}"
`;
exports[`compiler: codegen text + comment + interpolation 1`] = `
"
return function render() {
with (this) {
return [
\\"foo\\",
_toString(hello),
_createVNode(_Comment, 0, \\"foo\\")
]
}
}"
`;
exports[`compiler: codegen text + comment + interpolation w/ prefixIdentifiers: true 1`] = `
"
return function render() {
const _ctx = this
return [
\\"foo\\",
toString(hello),
createVNode(Comment, 0, \\"foo\\")
]
}"
`;

12
packages/compiler-core/__tests__/__snapshots__/compile.spec.ts.snap
View File

@ -7,7 +7,7 @@ return function render() {
with (this) {
const { toString: _toString, openBlock: _openBlock, createVNode: _createVNode, createBlock: _createBlock, Empty: _Empty, Fragment: _Fragment, renderList: _renderList } = _Vue
return _createVNode(\\"div\\", {
return (_openBlock(), _createBlock(\\"div\\", {
id: \\"foo\\",
class: bar.baz
}, [
@ -22,7 +22,7 @@ return function render() {
_createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)
], 2 /* CLASS */))
}
}"
`;
@ -32,7 +32,7 @@ exports[`compiler: integration tests function mode w/ prefixIdentifiers: true 1`
return function render() {
const _ctx = this
return createVNode(\\"div\\", {
return (openBlock(), createBlock(\\"div\\", {
id: \\"foo\\",
class: _ctx.bar.baz
}, [
@ -47,7 +47,7 @@ return function render() {
createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)
], 2 /* CLASS */))
}"
`;
@ -56,7 +56,7 @@ exports[`compiler: integration tests module mode 1`] = `
export default function render() {
const _ctx = this
return createVNode(\\"div\\", {
return (openBlock(), createBlock(\\"div\\", {
id: \\"foo\\",
class: _ctx.bar.baz
}, [
@ -71,6 +71,6 @@ export default function render() {
createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
]))
}), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */)
], 2 /* CLASS */))
}"
`;

98
packages/compiler-core/__tests__/__snapshots__/parse.spec.ts.snap
View File

@ -45,6 +45,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -110,6 +111,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -175,6 +177,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -258,6 +261,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -341,6 +345,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -424,6 +429,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -507,6 +513,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -573,6 +580,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -639,6 +647,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -705,6 +714,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -771,6 +781,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -836,6 +847,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -926,6 +938,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -992,6 +1005,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1058,6 +1072,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1124,6 +1139,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1266,6 +1282,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1337,6 +1354,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1408,6 +1426,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1474,6 +1493,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1540,6 +1560,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1611,6 +1632,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1701,6 +1723,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1766,6 +1789,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1831,6 +1855,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1896,6 +1921,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -1961,6 +1987,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2026,6 +2053,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2092,6 +2120,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2158,6 +2187,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2229,6 +2259,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2300,6 +2331,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2390,6 +2422,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2480,6 +2513,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2570,6 +2604,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2677,6 +2712,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2784,6 +2820,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2891,6 +2928,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -2998,6 +3036,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3105,6 +3144,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3212,6 +3252,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3319,6 +3360,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3426,6 +3468,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3491,6 +3534,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3532,6 +3576,7 @@ Object {
"type": 3,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3597,6 +3642,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3662,6 +3708,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3727,6 +3774,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3792,6 +3840,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3858,6 +3907,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -3940,6 +3990,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4006,6 +4057,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4089,6 +4141,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4196,6 +4249,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4286,6 +4340,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4376,6 +4431,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4423,6 +4479,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4489,6 +4546,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4555,6 +4613,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4621,6 +4680,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4765,6 +4825,7 @@ class=\\"bar\\"></div></template>",
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4908,6 +4969,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -4973,6 +5035,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5038,6 +5101,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5103,6 +5167,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5168,6 +5233,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5234,6 +5300,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5300,6 +5367,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5366,6 +5434,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5432,6 +5501,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5539,6 +5609,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5646,6 +5717,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5753,6 +5825,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5860,6 +5933,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -5967,6 +6041,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6074,6 +6149,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6181,6 +6257,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6288,6 +6365,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6378,6 +6456,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6485,6 +6564,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6550,6 +6630,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6658,6 +6739,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6724,6 +6806,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6790,6 +6873,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6855,6 +6939,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6902,6 +6987,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -6949,6 +7035,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7031,6 +7118,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7097,6 +7185,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7200,6 +7289,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7271,6 +7361,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7342,6 +7433,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7384,6 +7476,7 @@ Object {
"type": 2,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7426,6 +7519,7 @@ Object {
"type": 2,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7484,6 +7578,7 @@ Object {
"type": 5,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7558,6 +7653,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7741,6 +7837,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {
@ -7943,6 +8040,7 @@ Object {
"type": 1,
},
],
"codegenNode": undefined,
"hoists": Array [],
"imports": Array [],
"loc": Object {

516
packages/compiler-core/__tests__/codegen.spec.ts
View File

@ -23,6 +23,7 @@ function createRoot(options: Partial<RootNode> = {}): RootNode {
imports: [],
statements: [],
hoists: [],
codegenNode: undefined,
loc: locStub,
...options
}
@ -103,14 +104,12 @@ describe('compiler: codegen', () => {
test('static text', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.TEXT,
content: 'hello',
isEmpty: false,
loc: locStub
}
]
codegenNode: {
type: NodeTypes.TEXT,
content: 'hello',
isEmpty: false,
loc: locStub
}
})
)
expect(code).toMatch(`return "hello"`)
@ -120,7 +119,7 @@ describe('compiler: codegen', () => {
test('interpolation', () => {
const { code } = generate(
createRoot({
children: [createInterpolation(`hello`, locStub)]
codegenNode: createInterpolation(`hello`, locStub)
})
)
expect(code).toMatch(`return _${TO_STRING}(hello)`)
@ -130,93 +129,30 @@ describe('compiler: codegen', () => {
test('comment', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.COMMENT,
content: 'foo',
loc: locStub
}
]
codegenNode: {
type: NodeTypes.COMMENT,
content: 'foo',
loc: locStub
}
})
)
expect(code).toMatch(`return _${CREATE_VNODE}(_${COMMENT}, 0, "foo")`)
expect(code).toMatchSnapshot()
})
test('text + comment + interpolation', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.TEXT,
content: 'foo',
isEmpty: false,
loc: locStub
},
createInterpolation(`hello`, locStub),
{
type: NodeTypes.COMMENT,
content: 'foo',
loc: locStub
}
]
})
)
expect(code).toMatch(`
return [
"foo",
_${TO_STRING}(hello),
_${CREATE_VNODE}(_${COMMENT}, 0, "foo")
]`)
expect(code).toMatchSnapshot()
})
test('text + comment + interpolation w/ prefixIdentifiers: true', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.TEXT,
content: 'foo',
isEmpty: false,
loc: locStub
},
createInterpolation(`hello`, locStub),
{
type: NodeTypes.COMMENT,
content: 'foo',
loc: locStub
}
]
}),
{
prefixIdentifiers: true
}
)
expect(code).toMatch(`
return [
"foo",
${TO_STRING}(hello),
${CREATE_VNODE}(${COMMENT}, 0, "foo")
]`)
expect(code).toMatchSnapshot()
})
test('compound expression', () => {
const { code } = generate(
createRoot({
children: [
createCompoundExpression([
`_ctx.`,
createSimpleExpression(`foo`, false, locStub),
` + `,
{
type: NodeTypes.INTERPOLATION,
loc: locStub,
content: createSimpleExpression(`bar`, false, locStub)
}
])
]
codegenNode: createCompoundExpression([
`_ctx.`,
createSimpleExpression(`foo`, false, locStub),
` + `,
{
type: NodeTypes.INTERPOLATION,
loc: locStub,
content: createSimpleExpression(`bar`, false, locStub)
}
])
})
)
expect(code).toMatch(`return _ctx.foo + _${TO_STRING}(bar)`)
@ -226,284 +162,105 @@ describe('compiler: codegen', () => {
test('ifNode', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.IF,
loc: locStub,
branches: [],
codegenNode: createSequenceExpression([
createSimpleExpression('foo', false),
createSimpleExpression('bar', false)
])
}
]
codegenNode: {
type: NodeTypes.IF,
loc: locStub,
branches: [],
codegenNode: createSequenceExpression([
createSimpleExpression('foo', false),
createSimpleExpression('bar', false)
])
}
})
)
expect(code).toMatch(`return (foo, bar)`)
expect(code).toMatchSnapshot()
})
// test('forNode', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.FOR,
// loc: locStub,
// source: createSimpleExpression(`list`, false, locStub),
// valueAlias: createSimpleExpression(`v`, false, locStub),
// keyAlias: createSimpleExpression(`k`, false, locStub),
// objectIndexAlias: createSimpleExpression(`i`, false, locStub),
// children: [createInterpolation(`v`, locStub)]
// }
// ]
// })
// )
// expect(code).toMatch(
// `return _${RENDER_LIST}(list, (v, k, i) => {
// return _${TO_STRING}(v)
// })`
// )
// expect(code).toMatchSnapshot()
// })
// test('forNode w/ prefixIdentifiers: true', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.FOR,
// loc: locStub,
// source: createSimpleExpression(`list`, false, locStub),
// valueAlias: createSimpleExpression(`v`, false, locStub),
// keyAlias: createSimpleExpression(`k`, false, locStub),
// objectIndexAlias: createSimpleExpression(`i`, false, locStub),
// children: [createInterpolation(`v`, locStub)]
// }
// ]
// }),
// {
// prefixIdentifiers: true
// }
// )
// expect(code).toMatch(
// `return ${RENDER_LIST}(list, (v, k, i) => {
// return ${TO_STRING}(v)
// })`
// )
// expect(code).toMatchSnapshot()
// })
// test('forNode w/ skipped value alias', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.FOR,
// loc: locStub,
// source: createSimpleExpression(`list`, false, locStub),
// valueAlias: undefined,
// keyAlias: createSimpleExpression(`k`, false, locStub),
// objectIndexAlias: createSimpleExpression(`i`, false, locStub),
// children: [createInterpolation(`v`, locStub)]
// }
// ]
// })
// )
// expect(code).toMatch(
// `return _${RENDER_LIST}(list, (__value, k, i) => {
// return _${TO_STRING}(v)
// })`
// )
// expect(code).toMatchSnapshot()
// })
// test('forNode w/ skipped key alias', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.FOR,
// loc: locStub,
// source: createSimpleExpression(`list`, false, locStub),
// valueAlias: createSimpleExpression(`v`, false, locStub),
// keyAlias: undefined,
// objectIndexAlias: createSimpleExpression(`i`, false, locStub),
// children: [createInterpolation(`v`, locStub)]
// }
// ]
// })
// )
// expect(code).toMatch(
// `return _${RENDER_LIST}(list, (v, __key, i) => {
// return _${TO_STRING}(v)
// })`
// )
// expect(code).toMatchSnapshot()
// })
// test('forNode w/ skipped value and key aliases', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.FOR,
// loc: locStub,
// source: createSimpleExpression(`list`, false, locStub),
// valueAlias: undefined,
// keyAlias: undefined,
// objectIndexAlias: createSimpleExpression(`i`, false, locStub),
// children: [createInterpolation(`v`, locStub)]
// }
// ]
// })
// )
// expect(code).toMatch(
// `return _${RENDER_LIST}(list, (__value, __key, i) => {
// return _${TO_STRING}(v)
// })`
// )
// expect(code).toMatchSnapshot()
// })
// test('SlotFunctionExpression', () => {
// const { code } = generate(
// createRoot({
// children: [
// {
// type: NodeTypes.ELEMENT,
// tagType: ElementTypes.COMPONENT,
// ns: Namespaces.HTML,
// isSelfClosing: false,
// tag: `Comp`,
// loc: locStub,
// props: [],
// children: [],
// codegenNode: {
// type: NodeTypes.JS_CALL_EXPRESSION,
// loc: locStub,
// callee: `_${CREATE_VNODE}`,
// arguments: [
// `Comp`,
// `0`,
// {
// type: NodeTypes.JS_OBJECT_EXPRESSION,
// loc: locStub,
// properties: [
// {
// type: NodeTypes.JS_PROPERTY,
// loc: locStub,
// key: {
// type: NodeTypes.SIMPLE_EXPRESSION,
// isStatic: true,
// content: `default`,
// loc: locStub
// },
// value: {
// type: NodeTypes.JS_FUNCTION_EXPRESSION,
// loc: locStub,
// params: {
// type: NodeTypes.SIMPLE_EXPRESSION,
// isStatic: false,
// content: `{ foo }`,
// loc: locStub
// },
// returns: [
// {
// type: NodeTypes.INTERPOLATION,
// loc: locStub,
// content: {
// type: NodeTypes.SIMPLE_EXPRESSION,
// isStatic: false,
// content: `foo`,
// loc: locStub
// }
// }
// ]
// }
// }
// ]
// }
// ]
// }
// }
// ]
// })
// )
// expect(code).toMatch(
// `return _createVNode(Comp, 0, {
// default: ({ foo }) => [
// _toString(foo)
// ]
// })`
// )
// expect(code).toMatchSnapshot()
// })
test('callExpression + objectExpression + arrayExpression', () => {
test('forNode', () => {
const { code } = generate(
createRoot({
children: [
createElementWithCodegen([
// string
`"div"`,
// ObjectExpression
createObjectExpression(
[
createObjectProperty(
createSimpleExpression(`id`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
),
createObjectProperty(
createSimpleExpression(`prop`, false, locStub),
createSimpleExpression(`bar`, false, locStub)
),
// compound expression as computed key
createObjectProperty(
{
type: NodeTypes.COMPOUND_EXPRESSION,
loc: locStub,
children: [
`foo + `,
createSimpleExpression(`bar`, false, locStub)
]
},
createSimpleExpression(`bar`, false, locStub)
)
],
locStub
),
// ChildNode[]
[
createElementWithCodegen([
`"p"`,
createObjectExpression(
[
createObjectProperty(
// should quote the key!
createSimpleExpression(`some-key`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
)
],
locStub
)
])
],
// ArrayExpression
createArrayExpression(
[
'foo',
{
type: NodeTypes.JS_CALL_EXPRESSION,
loc: locStub,
callee: CREATE_VNODE,
arguments: [`"p"`]
}
],
locStub
)
codegenNode: {
type: NodeTypes.FOR,
loc: locStub,
source: createSimpleExpression('foo', false),
valueAlias: undefined,
keyAlias: undefined,
objectIndexAlias: undefined,
children: [],
codegenNode: createSequenceExpression([
createSimpleExpression('foo', false),
createSimpleExpression('bar', false)
])
]
}
})
)
expect(code).toMatch(`return (foo, bar)`)
expect(code).toMatchSnapshot()
})
test('Element (callExpression + objectExpression + arrayExpression)', () => {
const { code } = generate(
createRoot({
codegenNode: createElementWithCodegen([
// string
`"div"`,
// ObjectExpression
createObjectExpression(
[
createObjectProperty(
createSimpleExpression(`id`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
),
createObjectProperty(
createSimpleExpression(`prop`, false, locStub),
createSimpleExpression(`bar`, false, locStub)
),
// compound expression as computed key
createObjectProperty(
{
type: NodeTypes.COMPOUND_EXPRESSION,
loc: locStub,
children: [
`foo + `,
createSimpleExpression(`bar`, false, locStub)
]
},
createSimpleExpression(`bar`, false, locStub)
)
],
locStub
),
// ChildNode[]
[
createElementWithCodegen([
`"p"`,
createObjectExpression(
[
createObjectProperty(
// should quote the key!
createSimpleExpression(`some-key`, true, locStub),
createSimpleExpression(`foo`, true, locStub)
)
],
locStub
)
])
],
// ArrayExpression
createArrayExpression(
[
'foo',
{
type: NodeTypes.JS_CALL_EXPRESSION,
loc: locStub,
callee: CREATE_VNODE,
arguments: [`"p"`]
}
],
locStub
)
])
})
)
expect(code).toMatch(`
@ -523,17 +280,10 @@ describe('compiler: codegen', () => {
test('SequenceExpression', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.IF,
loc: locStub,
branches: [],
codegenNode: createSequenceExpression([
createSimpleExpression(`foo`, false),
createCallExpression(`bar`, [`baz`])
])
}
]
codegenNode: createSequenceExpression([
createSimpleExpression(`foo`, false),
createCallExpression(`bar`, [`baz`])
])
})
)
expect(code).toMatch(`return (foo, bar(baz))`)
@ -543,33 +293,23 @@ describe('compiler: codegen', () => {
test('ConditionalExpression', () => {
const { code } = generate(
createRoot({
children: [
{
type: NodeTypes.IF,
loc: locStub,
branches: [],
codegenNode: createSequenceExpression([
createSimpleExpression(`foo`, false),
createConditionalExpression(
createSimpleExpression(`ok`, false),
createCallExpression(`foo`),
createConditionalExpression(
createSimpleExpression(`orNot`, false),
createCallExpression(`bar`),
createCallExpression(`baz`)
)
)
])
}
]
codegenNode: createConditionalExpression(
createSimpleExpression(`ok`, false),
createCallExpression(`foo`),
createConditionalExpression(
createSimpleExpression(`orNot`, false),
createCallExpression(`bar`),
createCallExpression(`baz`)
)
)
})
)
expect(code).toMatch(
`return (foo, ok
`return ok
? foo()
: orNot
? bar()
: baz())`
: baz()`
)
expect(code).toMatchSnapshot()
})

12
packages/compiler-core/__tests__/transforms/__snapshots__/optimizeText.spec.ts.snap
View File

@ -17,13 +17,13 @@ exports[`compiler: optimize interpolation consecutive text between elements 1`]
return function render() {
with (this) {
const { createVNode: _createVNode, toString: _toString } = _Vue
const { createVNode: _createVNode, toString: _toString, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return [
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\"),
_toString(foo) + \\" bar \\" + _toString(baz),
_createVNode(\\"div\\")
]
]))
}
}"
`;
@ -33,15 +33,15 @@ exports[`compiler: optimize interpolation consecutive text mixed with elements 1
return function render() {
with (this) {
const { createVNode: _createVNode, toString: _toString } = _Vue
const { createVNode: _createVNode, toString: _toString, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue
return [
return (_openBlock(), _createBlock(_Fragment, null, [
_createVNode(\\"div\\"),
_toString(foo) + \\" bar \\" + _toString(baz),
_createVNode(\\"div\\"),
_toString(foo) + \\" bar \\" + _toString(baz),
_createVNode(\\"div\\")
]
]))
}
}"
`;

30
packages/compiler-core/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap
View File

@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`compiler: transform component slots dynamically named slots 1`] = `
"const { toString, resolveComponent, createVNode } = Vue
"const { toString, resolveComponent, createVNode, openBlock, createBlock } = Vue
return function render() {
const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
return (openBlock(), createBlock(_component_Comp, null, {
[_ctx.one]: ({ foo }) => [
toString(foo),
toString(_ctx.bar)
@ -16,49 +16,49 @@ return function render() {
toString(_ctx.foo),
toString(bar)
]
}, 256 /* DYNAMIC_SLOTS */)
}, 256 /* DYNAMIC_SLOTS */))
}"
`;
exports[`compiler: transform component slots explicit default slot 1`] = `
"const { toString, resolveComponent, createVNode } = Vue
"const { toString, resolveComponent, createVNode, openBlock, createBlock } = Vue
return function render() {
const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
return (openBlock(), createBlock(_component_Comp, null, {
default: ({ foo }) => [
toString(foo),
toString(_ctx.bar)
]
})
}))
}"
`;
exports[`compiler: transform component slots implicit default slot 1`] = `
"const { createVNode, resolveComponent } = Vue
"const { createVNode, resolveComponent, openBlock, createBlock } = Vue
return function render() {
const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
return (openBlock(), createBlock(_component_Comp, null, {
default: () => [
createVNode(\\"div\\")
]
})
}))
}"
`;
exports[`compiler: transform component slots named slots 1`] = `
"const { toString, resolveComponent, createVNode } = Vue
"const { toString, resolveComponent, createVNode, openBlock, createBlock } = Vue
return function render() {
const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
return (openBlock(), createBlock(_component_Comp, null, {
one: ({ foo }) => [
toString(foo),
toString(_ctx.bar)
@ -67,19 +67,19 @@ return function render() {
toString(_ctx.foo),
toString(bar)
]
})
}))
}"
`;
exports[`compiler: transform component slots nested slots scoping 1`] = `
"const { toString, resolveComponent, createVNode } = Vue
"const { toString, resolveComponent, createVNode, openBlock, createBlock } = Vue
return function render() {
const _ctx = this
const _component_Inner = resolveComponent(\\"Inner\\")
const _component_Comp = resolveComponent(\\"Comp\\")
return createVNode(_component_Comp, null, {
return (openBlock(), createBlock(_component_Comp, null, {
default: ({ foo }) => [
createVNode(_component_Inner, null, {
default: ({ bar }) => [
@ -92,6 +92,6 @@ return function render() {
toString(_ctx.bar),
toString(_ctx.baz)
]
})
}))
}"
`;

11
packages/compiler-core/__tests__/transforms/transformElement.spec.ts
View File

@ -247,6 +247,17 @@ describe('compiler: element transform', () => {
})
})
test('should handle plain <template> as normal element', () => {
const { node } = parseWithElementTransform(`<template id="foo" />`)
expect(node.callee).toBe(`_${CREATE_VNODE}`)
expect(node.arguments).toMatchObject([
`"template"`,
createObjectMatcher({
id: 'foo'
})
])
})
test('error on v-bind with no argument', () => {
const onError = jest.fn()
parseWithElementTransform(`<div v-bind/>`, { onError })

1
packages/compiler-core/src/ast.ts
View File

@ -78,6 +78,7 @@ export interface RootNode extends Node {
imports: string[]
statements: string[]
hoists: JSChildNode[]
codegenNode: TemplateChildNode | JSChildNode | undefined
}
export interface ElementNode extends Node {

19
packages/compiler-core/src/codegen.ts
View File

@ -230,8 +230,11 @@ export function generate(
// generate the VNode tree expression
push(`return `)
genRoot(ast, context)
if (ast.codegenNode) {
genNode(ast.codegenNode, context)
} else {
push(`null`)
}
if (useWithBlock) {
deindent()
@ -256,18 +259,6 @@ function genHoists(hoists: JSChildNode[], context: CodegenContext) {
context.newline()
}
function genRoot(root: RootNode, context: CodegenContext) {
// TODO handle blocks
const { children } = root
if (children.length === 0) {
context.push(`null`)
} else if (children.length === 1) {
genNode(children[0], context)
} else {
genNodeListAsArray(children, context)
}
}
function genNodeListAsArray(
nodes: (string | CodegenNode | TemplateChildNode[])[],
context: CodegenContext

1
packages/compiler-core/src/parse.ts
View File

@ -86,6 +86,7 @@ export function parse(content: string, options: ParserOptions = {}): RootNode {
imports: [],
statements: [],
hoists: [],
codegenNode: undefined,
loc: getSelection(context, start)
}
}

47
packages/compiler-core/src/transform.ts
View File

@ -9,11 +9,13 @@ import {
ExpressionNode,
createSimpleExpression,
JSChildNode,
SimpleExpressionNode
SimpleExpressionNode,
ElementTypes
} from './ast'
import { isString, isArray } from '@vue/shared'
import { CompilerError, defaultOnError } from './errors'
import { TO_STRING, COMMENT, CREATE_VNODE } from './runtimeConstants'
import { TO_STRING, COMMENT, CREATE_VNODE, FRAGMENT } from './runtimeConstants'
import { createBlockExpression } from './utils'
// There are two types of transforms:
//
@ -182,6 +184,42 @@ function createTransformContext(
export function transform(root: RootNode, options: TransformOptions) {
const context = createTransformContext(root, options)
traverseNode(root, context)
finalizeRoot(root, context)
}
function finalizeRoot(root: RootNode, context: TransformContext) {
const { helper } = context
const { children } = root
if (children.length === 1) {
const child = children[0]
if (child.type === NodeTypes.ELEMENT && child.codegenNode) {
// only child is a <slot/> - it needs to be in a fragment block.
if (child.tagType === ElementTypes.SLOT) {
root.codegenNode = createBlockExpression(
[helper(FRAGMENT), `null`, child.codegenNode],
context
)
} else {
// turn root element into a block
root.codegenNode = createBlockExpression(
child.codegenNode.arguments,
context
)
}
} else {
// IfNode, ForNode, TextNodes or transform calls without transformElement.
// Just generate the node as-is
root.codegenNode = child
}
} else if (children.length > 1) {
// root has multiple nodes - return a fragment block.
root.codegenNode = createBlockExpression(
[helper(FRAGMENT), `null`, root.children],
context
)
}
// finalize meta information
root.imports = [...context.imports]
root.statements = [...context.statements]
root.hoists = context.hoists
@ -214,8 +252,7 @@ export function traverseNode(
const { nodeTransforms } = context
const exitFns = []
for (let i = 0; i < nodeTransforms.length; i++) {
const plugin = nodeTransforms[i]
const onExit = plugin(node, context)
const onExit = nodeTransforms[i](node, context)
if (onExit) {
if (isArray(onExit)) {
exitFns.push(...onExit)
@ -234,9 +271,9 @@ export function traverseNode(
switch (node.type) {
case NodeTypes.COMMENT:
context.helper(CREATE_VNODE)
// inject import for the Comment symbol, which is needed for creating
// comment nodes with `createVNode`
context.helper(CREATE_VNODE)
context.helper(COMMENT)
break
case NodeTypes.INTERPOLATION:

7
packages/compiler-core/src/transforms/transformElement.ts
View File

@ -27,7 +27,7 @@ import {
TO_HANDLERS
} from '../runtimeConstants'
import { getInnerRange } from '../utils'
import { buildSlots } from './vSlot'
import { buildSlots, isVSlot } from './vSlot'
const toValidId = (str: string): string => str.replace(/[^\w]/g, '')
@ -36,7 +36,10 @@ export const transformElement: NodeTransform = (node, context) => {
if (node.type === NodeTypes.ELEMENT) {
if (
node.tagType === ElementTypes.ELEMENT ||
node.tagType === ElementTypes.COMPONENT
node.tagType === ElementTypes.COMPONENT ||
// <template> with v-if or v-for are ignored during traversal.
// <template> without v-slot should be treated as a normal element.
(node.tagType === ElementTypes.TEMPLATE && !node.props.some(isVSlot))
) {
// perform the work on exit, after all child expressions have been
// processed and merged.

30
packages/compiler-core/src/transforms/vFor.ts
View File

@ -19,7 +19,7 @@ import {
CallExpression
} from '../ast'
import { createCompilerError, ErrorCodes } from '../errors'
import { getInnerRange, findProp } from '../utils'
import { getInnerRange, findProp, createBlockExpression } from '../utils'
import {
RENDER_LIST,
OPEN_BLOCK,
@ -69,7 +69,8 @@ export const transformFor = createStructuralDirectiveTransform(
valueAlias: value,
keyAlias: key,
objectIndexAlias: index,
children: [node],
children:
node.tagType === ElementTypes.TEMPLATE ? node.children : [node],
codegenNode
})
@ -126,6 +127,8 @@ export const transformFor = createStructuralDirectiveTransform(
}
let childBlockChildren: TemplateChildNode[] | CallExpression =
node.children
// if the only child is a <slot/>, use it directly as fragment
// children since it already returns an array.
if (childBlockChildren.length === 1) {
const child = childBlockChildren[0]
if (
@ -135,22 +138,17 @@ export const transformFor = createStructuralDirectiveTransform(
childBlockChildren = child.codegenNode!
}
}
childBlock = createSequenceExpression([
createCallExpression(helper(OPEN_BLOCK)),
createCallExpression(helper(CREATE_BLOCK), [
helper(FRAGMENT),
childBlockProps,
childBlockChildren
])
])
childBlock = createBlockExpression(
[helper(FRAGMENT), childBlockProps, childBlockChildren],
context
)
} else {
// Normal element v-for. Directly use the child's codegenNode,
// Normal element v-for. Directly use the child's codegenNode arguments,
// but replace createVNode() with createBlock()
node.codegenNode!.callee = helper(CREATE_BLOCK)
childBlock = createSequenceExpression([
createCallExpression(helper(OPEN_BLOCK)),
node.codegenNode!
])
childBlock = createBlockExpression(
node.codegenNode!.arguments,
context
)
}
renderExp.arguments.push(

2
packages/compiler-core/src/transforms/vSlot.ts
View File

@ -17,7 +17,7 @@ import { TransformContext, NodeTransform } from '../transform'
import { createCompilerError, ErrorCodes } from '../errors'
import { isString } from '@vue/shared'
const isVSlot = (p: ElementNode['props'][0]): p is DirectiveNode =>
export const isVSlot = (p: ElementNode['props'][0]): p is DirectiveNode =>
p.type === NodeTypes.DIRECTIVE && p.name === 'slot'
// A NodeTransform that tracks scope identifiers for scoped slots so that they

23
packages/compiler-core/src/utils.ts
View File

@ -1,6 +1,17 @@
import { SourceLocation, Position, ElementNode, NodeTypes } from './ast'
import {
SourceLocation,
Position,
ElementNode,
NodeTypes,
CallExpression,
SequenceExpression,
createSequenceExpression,
createCallExpression
} from './ast'
import { parse } from 'acorn'
import { walk } from 'estree-walker'
import { TransformContext } from './transform'
import { OPEN_BLOCK, CREATE_BLOCK } from './runtimeConstants'
// cache node requires
// lazy require dependencies so that they don't end up in rollup's dep graph
@ -116,3 +127,13 @@ export function findProp(
}
}
}
export function createBlockExpression(
args: CallExpression['arguments'],
context: TransformContext
): SequenceExpression {
return createSequenceExpression([
createCallExpression(context.helper(OPEN_BLOCK)),
createCallExpression(context.helper(CREATE_BLOCK), args)
])
}