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

wip(compiler): codegen node w/ block optimization for v-for

Browse Source
This commit is contained in:
Evan You 2019-10-01 16:48:20 -04:00
parent aa134e7a4f
commit e5bc17967d
9 changed files with 353 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,19 +22,6 @@ return function render() {
}" }"
`; `;
exports[`compiler: codegen SlotFunctionExpression 1`] = `
"
return function render() {
with (this) {
return _createVNode(Comp, 0, {
default: ({ foo }) => [
_toString(foo)
]
})
}
}"
`;
exports[`compiler: codegen callExpression + objectExpression + arrayExpression 1`] = ` exports[`compiler: codegen callExpression + objectExpression + arrayExpression 1`] = `
" "
return function render() { return function render() {
@ -71,60 +58,6 @@ return function render() {
}" }"
`; `;
exports[`compiler: codegen forNode 1`] = `
"
return function render() {
with (this) {
return _renderList(list, (v, k, i) => {
return _toString(v)
})
}
}"
`;
exports[`compiler: codegen forNode w/ prefixIdentifiers: true 1`] = `
"
return function render() {
const _ctx = this
return renderList(list, (v, k, i) => {
return toString(v)
})
}"
`;
exports[`compiler: codegen forNode w/ skipped key alias 1`] = `
"
return function render() {
with (this) {
return _renderList(list, (v, __key, i) => {
return _toString(v)
})
}
}"
`;
exports[`compiler: codegen forNode w/ skipped value alias 1`] = `
"
return function render() {
with (this) {
return _renderList(list, (__value, k, i) => {
return _toString(v)
})
}
}"
`;
exports[`compiler: codegen forNode w/ skipped value and key aliases 1`] = `
"
return function render() {
with (this) {
return _renderList(list, (__value, __key, i) => {
return _toString(v)
})
}
}"
`;
exports[`compiler: codegen function mode preamble 1`] = ` exports[`compiler: codegen function mode preamble 1`] = `
"const _Vue = Vue "const _Vue = Vue

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

@ -15,11 +15,11 @@ return function render() {
(_openBlock(), ok (_openBlock(), ok
? _createBlock(\\"div\\", { key: 0 }, \\"yes\\") ? _createBlock(\\"div\\", { key: 0 }, \\"yes\\")
: _createBlock(_Fragment, { key: 1 }, \\"no\\")), : _createBlock(_Fragment, { key: 1 }, \\"no\\")),
_renderList(list, (value, index) => { (_openBlock(), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
return _createVNode(\\"div\\", null, [ return _createVNode(\\"div\\", null, [
_createVNode(\\"span\\", null, _toString(value + index)) _createVNode(\\"span\\", null, _toString(value + index))
]) ])
}) })))
], 2) ], 2)
} }
}" }"
@ -38,11 +38,11 @@ return function render() {
(openBlock(), (_ctx.ok) (openBlock(), (_ctx.ok)
? createBlock(\\"div\\", { key: 0 }, \\"yes\\") ? createBlock(\\"div\\", { key: 0 }, \\"yes\\")
: createBlock(Fragment, { key: 1 }, \\"no\\")), : createBlock(Fragment, { key: 1 }, \\"no\\")),
renderList(_ctx.list, (value, index) => { (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
return createVNode(\\"div\\", null, [ return createVNode(\\"div\\", null, [
createVNode(\\"span\\", null, toString(value + index)) createVNode(\\"span\\", null, toString(value + index))
]) ])
}) })))
], 2) ], 2)
}" }"
`; `;
@ -60,11 +60,11 @@ export default function render() {
(openBlock(), (_ctx.ok) (openBlock(), (_ctx.ok)
? createBlock(\\"div\\", { key: 0 }, \\"yes\\") ? createBlock(\\"div\\", { key: 0 }, \\"yes\\")
: createBlock(Fragment, { key: 1 }, \\"no\\")), : createBlock(Fragment, { key: 1 }, \\"no\\")),
_renderList(_ctx.list, (value, index) => { (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
return createVNode(\\"div\\", null, [ return createVNode(\\"div\\", null, [
createVNode(\\"span\\", null, _toString(value + index)) createVNode(\\"span\\", null, _toString(value + index))
]) ])
}) })))
], 2) ], 2)
}" }"
`; `;

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

@ -4,8 +4,6 @@ import {
NodeTypes, NodeTypes,
RootNode, RootNode,
createSimpleExpression, createSimpleExpression,
Namespaces,
ElementTypes,
createObjectExpression, createObjectExpression,
createObjectProperty, createObjectProperty,
createArrayExpression, createArrayExpression,
@ -15,12 +13,7 @@ import {
createCallExpression, createCallExpression,
createConditionalExpression createConditionalExpression
} from '../src' } from '../src'
import { import { CREATE_VNODE, COMMENT, TO_STRING } from '../src/runtimeConstants'
CREATE_VNODE,
COMMENT,
TO_STRING,
RENDER_LIST
} from '../src/runtimeConstants'
import { createElementWithCodegen } from './testUtils' import { createElementWithCodegen } from './testUtils'
function createRoot(options: Partial<RootNode> = {}): RootNode { function createRoot(options: Partial<RootNode> = {}): RootNode {
@ -250,202 +243,202 @@ describe('compiler: codegen', () => {
expect(code).toMatchSnapshot() expect(code).toMatchSnapshot()
}) })
test('forNode', () => { // test('forNode', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.FOR, // type: NodeTypes.FOR,
loc: locStub, // loc: locStub,
source: createSimpleExpression(`list`, false, locStub), // source: createSimpleExpression(`list`, false, locStub),
valueAlias: createSimpleExpression(`v`, false, locStub), // valueAlias: createSimpleExpression(`v`, false, locStub),
keyAlias: createSimpleExpression(`k`, false, locStub), // keyAlias: createSimpleExpression(`k`, false, locStub),
objectIndexAlias: createSimpleExpression(`i`, false, locStub), // objectIndexAlias: createSimpleExpression(`i`, false, locStub),
children: [createInterpolation(`v`, locStub)] // children: [createInterpolation(`v`, locStub)]
} // }
] // ]
}) // })
) // )
expect(code).toMatch( // expect(code).toMatch(
`return _${RENDER_LIST}(list, (v, k, i) => { // `return _${RENDER_LIST}(list, (v, k, i) => {
return _${TO_STRING}(v) // return _${TO_STRING}(v)
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('forNode w/ prefixIdentifiers: true', () => { // test('forNode w/ prefixIdentifiers: true', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.FOR, // type: NodeTypes.FOR,
loc: locStub, // loc: locStub,
source: createSimpleExpression(`list`, false, locStub), // source: createSimpleExpression(`list`, false, locStub),
valueAlias: createSimpleExpression(`v`, false, locStub), // valueAlias: createSimpleExpression(`v`, false, locStub),
keyAlias: createSimpleExpression(`k`, false, locStub), // keyAlias: createSimpleExpression(`k`, false, locStub),
objectIndexAlias: createSimpleExpression(`i`, false, locStub), // objectIndexAlias: createSimpleExpression(`i`, false, locStub),
children: [createInterpolation(`v`, locStub)] // children: [createInterpolation(`v`, locStub)]
} // }
] // ]
}), // }),
{ // {
prefixIdentifiers: true // prefixIdentifiers: true
} // }
) // )
expect(code).toMatch( // expect(code).toMatch(
`return ${RENDER_LIST}(list, (v, k, i) => { // `return ${RENDER_LIST}(list, (v, k, i) => {
return ${TO_STRING}(v) // return ${TO_STRING}(v)
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('forNode w/ skipped value alias', () => { // test('forNode w/ skipped value alias', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.FOR, // type: NodeTypes.FOR,
loc: locStub, // loc: locStub,
source: createSimpleExpression(`list`, false, locStub), // source: createSimpleExpression(`list`, false, locStub),
valueAlias: undefined, // valueAlias: undefined,
keyAlias: createSimpleExpression(`k`, false, locStub), // keyAlias: createSimpleExpression(`k`, false, locStub),
objectIndexAlias: createSimpleExpression(`i`, false, locStub), // objectIndexAlias: createSimpleExpression(`i`, false, locStub),
children: [createInterpolation(`v`, locStub)] // children: [createInterpolation(`v`, locStub)]
} // }
] // ]
}) // })
) // )
expect(code).toMatch( // expect(code).toMatch(
`return _${RENDER_LIST}(list, (__value, k, i) => { // `return _${RENDER_LIST}(list, (__value, k, i) => {
return _${TO_STRING}(v) // return _${TO_STRING}(v)
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('forNode w/ skipped key alias', () => { // test('forNode w/ skipped key alias', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.FOR, // type: NodeTypes.FOR,
loc: locStub, // loc: locStub,
source: createSimpleExpression(`list`, false, locStub), // source: createSimpleExpression(`list`, false, locStub),
valueAlias: createSimpleExpression(`v`, false, locStub), // valueAlias: createSimpleExpression(`v`, false, locStub),
keyAlias: undefined, // keyAlias: undefined,
objectIndexAlias: createSimpleExpression(`i`, false, locStub), // objectIndexAlias: createSimpleExpression(`i`, false, locStub),
children: [createInterpolation(`v`, locStub)] // children: [createInterpolation(`v`, locStub)]
} // }
] // ]
}) // })
) // )
expect(code).toMatch( // expect(code).toMatch(
`return _${RENDER_LIST}(list, (v, __key, i) => { // `return _${RENDER_LIST}(list, (v, __key, i) => {
return _${TO_STRING}(v) // return _${TO_STRING}(v)
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('forNode w/ skipped value and key aliases', () => { // test('forNode w/ skipped value and key aliases', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.FOR, // type: NodeTypes.FOR,
loc: locStub, // loc: locStub,
source: createSimpleExpression(`list`, false, locStub), // source: createSimpleExpression(`list`, false, locStub),
valueAlias: undefined, // valueAlias: undefined,
keyAlias: undefined, // keyAlias: undefined,
objectIndexAlias: createSimpleExpression(`i`, false, locStub), // objectIndexAlias: createSimpleExpression(`i`, false, locStub),
children: [createInterpolation(`v`, locStub)] // children: [createInterpolation(`v`, locStub)]
} // }
] // ]
}) // })
) // )
expect(code).toMatch( // expect(code).toMatch(
`return _${RENDER_LIST}(list, (__value, __key, i) => { // `return _${RENDER_LIST}(list, (__value, __key, i) => {
return _${TO_STRING}(v) // return _${TO_STRING}(v)
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('SlotFunctionExpression', () => { // test('SlotFunctionExpression', () => {
const { code } = generate( // const { code } = generate(
createRoot({ // createRoot({
children: [ // children: [
{ // {
type: NodeTypes.ELEMENT, // type: NodeTypes.ELEMENT,
tagType: ElementTypes.COMPONENT, // tagType: ElementTypes.COMPONENT,
ns: Namespaces.HTML, // ns: Namespaces.HTML,
isSelfClosing: false, // isSelfClosing: false,
tag: `Comp`, // tag: `Comp`,
loc: locStub, // loc: locStub,
props: [], // props: [],
children: [], // children: [],
codegenNode: { // codegenNode: {
type: NodeTypes.JS_CALL_EXPRESSION, // type: NodeTypes.JS_CALL_EXPRESSION,
loc: locStub, // loc: locStub,
callee: `_${CREATE_VNODE}`, // callee: `_${CREATE_VNODE}`,
arguments: [ // arguments: [
`Comp`, // `Comp`,
`0`, // `0`,
{ // {
type: NodeTypes.JS_OBJECT_EXPRESSION, // type: NodeTypes.JS_OBJECT_EXPRESSION,
loc: locStub, // loc: locStub,
properties: [ // properties: [
{ // {
type: NodeTypes.JS_PROPERTY, // type: NodeTypes.JS_PROPERTY,
loc: locStub, // loc: locStub,
key: { // key: {
type: NodeTypes.SIMPLE_EXPRESSION, // type: NodeTypes.SIMPLE_EXPRESSION,
isStatic: true, // isStatic: true,
content: `default`, // content: `default`,
loc: locStub // loc: locStub
}, // },
value: { // value: {
type: NodeTypes.JS_SLOT_FUNCTION, // type: NodeTypes.JS_FUNCTION_EXPRESSION,
loc: locStub, // loc: locStub,
params: { // params: {
type: NodeTypes.SIMPLE_EXPRESSION, // type: NodeTypes.SIMPLE_EXPRESSION,
isStatic: false, // isStatic: false,
content: `{ foo }`, // content: `{ foo }`,
loc: locStub // loc: locStub
}, // },
returns: [ // returns: [
{ // {
type: NodeTypes.INTERPOLATION, // type: NodeTypes.INTERPOLATION,
loc: locStub, // loc: locStub,
content: { // content: {
type: NodeTypes.SIMPLE_EXPRESSION, // type: NodeTypes.SIMPLE_EXPRESSION,
isStatic: false, // isStatic: false,
content: `foo`, // content: `foo`,
loc: locStub // loc: locStub
} // }
} // }
] // ]
} // }
} // }
] // ]
} // }
] // ]
} // }
} // }
] // ]
}) // })
) // )
expect(code).toMatch( // expect(code).toMatch(
`return _createVNode(Comp, 0, { // `return _createVNode(Comp, 0, {
default: ({ foo }) => [ // default: ({ foo }) => [
_toString(foo) // _toString(foo)
] // ]
})` // })`
) // )
expect(code).toMatchSnapshot() // expect(code).toMatchSnapshot()
}) // })
test('callExpression + objectExpression + arrayExpression', () => { test('callExpression + objectExpression + arrayExpression', () => {
const { code } = generate( const { code } = generate(

16
packages/compiler-core/__tests__/transforms/vSlot.spec.ts
View File

@ -59,7 +59,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject( expect(slots).toMatchObject(
createSlotMatcher({ createSlotMatcher({
default: { default: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: undefined, params: undefined,
returns: [ returns: [
{ {
@ -81,7 +81,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject( expect(slots).toMatchObject(
createSlotMatcher({ createSlotMatcher({
default: { default: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.COMPOUND_EXPRESSION, type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`] children: [`{ `, { content: `foo` }, ` }`]
@ -121,7 +121,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject( expect(slots).toMatchObject(
createSlotMatcher({ createSlotMatcher({
one: { one: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`, content: `{ foo }`,
@ -143,7 +143,7 @@ describe('compiler: transform component slots', () => {
] ]
}, },
two: { two: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`, content: `{ bar }`,
@ -184,7 +184,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject( expect(slots).toMatchObject(
createSlotMatcher({ createSlotMatcher({
'[_ctx.one]': { '[_ctx.one]': {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`, content: `{ foo }`,
@ -206,7 +206,7 @@ describe('compiler: transform component slots', () => {
] ]
}, },
'[_ctx.two]': { '[_ctx.two]': {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`, content: `{ bar }`,
@ -247,7 +247,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject( expect(slots).toMatchObject(
createSlotMatcher({ createSlotMatcher({
default: { default: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.SIMPLE_EXPRESSION, type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`, content: `{ foo }`,
@ -263,7 +263,7 @@ describe('compiler: transform component slots', () => {
`null`, `null`,
createSlotMatcher({ createSlotMatcher({
default: { default: {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: { params: {
type: NodeTypes.COMPOUND_EXPRESSION, type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`] children: [`{ `, { content: `bar` }, ` }`]

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

@ -28,7 +28,7 @@ export const enum NodeTypes {
JS_OBJECT_EXPRESSION, JS_OBJECT_EXPRESSION,
JS_PROPERTY, JS_PROPERTY,
JS_ARRAY_EXPRESSION, JS_ARRAY_EXPRESSION,
JS_SLOT_FUNCTION, JS_FUNCTION_EXPRESSION,
JS_SEQUENCE_EXPRESSION, JS_SEQUENCE_EXPRESSION,
JS_CONDITIONAL_EXPRESSION JS_CONDITIONAL_EXPRESSION
} }
@ -158,6 +158,7 @@ export interface ForNode extends Node {
keyAlias: ExpressionNode | undefined keyAlias: ExpressionNode | undefined
objectIndexAlias: ExpressionNode | undefined objectIndexAlias: ExpressionNode | undefined
children: TemplateChildNode[] children: TemplateChildNode[]
codegenNode: SequenceExpression
} }
// We also include a number of JavaScript AST nodes for code generation. // We also include a number of JavaScript AST nodes for code generation.
@ -168,7 +169,7 @@ export type JSChildNode =
| ObjectExpression | ObjectExpression
| ArrayExpression | ArrayExpression
| ExpressionNode | ExpressionNode
| SlotFunctionExpression | FunctionExpression
| ConditionalExpression | ConditionalExpression
| SequenceExpression | SequenceExpression
@ -194,10 +195,11 @@ export interface ArrayExpression extends Node {
elements: Array<string | JSChildNode> elements: Array<string | JSChildNode>
} }
export interface SlotFunctionExpression extends Node { export interface FunctionExpression extends Node {
type: NodeTypes.JS_SLOT_FUNCTION type: NodeTypes.JS_FUNCTION_EXPRESSION
params: ExpressionNode | undefined params: ExpressionNode | ExpressionNode[] | undefined
returns: TemplateChildNode[] returns: TemplateChildNode | TemplateChildNode[]
newline: boolean
} }
export interface SequenceExpression extends Node { export interface SequenceExpression extends Node {
@ -235,7 +237,7 @@ export function createArrayExpression(
} }
export function createObjectExpression( export function createObjectExpression(
properties: Property[], properties: ObjectExpression['properties'],
loc: SourceLocation = locStub loc: SourceLocation = locStub
): ObjectExpression { ): ObjectExpression {
return { return {
@ -246,8 +248,8 @@ export function createObjectExpression(
} }
export function createObjectProperty( export function createObjectProperty(
key: ExpressionNode, key: Property['key'],
value: JSChildNode value: Property['value']
): Property { ): Property {
return { return {
type: NodeTypes.JS_PROPERTY, type: NodeTypes.JS_PROPERTY,
@ -258,8 +260,8 @@ export function createObjectProperty(
} }
export function createSimpleExpression( export function createSimpleExpression(
content: string, content: SimpleExpressionNode['content'],
isStatic: boolean, isStatic: SimpleExpressionNode['isStatic'],
loc: SourceLocation = locStub loc: SourceLocation = locStub
): SimpleExpressionNode { ): SimpleExpressionNode {
return { return {
@ -271,7 +273,7 @@ export function createSimpleExpression(
} }
export function createInterpolation( export function createInterpolation(
content: string | CompoundExpressionNode, content: InterpolationNode['content'] | string,
loc: SourceLocation loc: SourceLocation
): InterpolationNode { ): InterpolationNode {
return { return {
@ -294,7 +296,7 @@ export function createCompoundExpression(
} }
export function createCallExpression( export function createCallExpression(
callee: string, callee: CallExpression['callee'],
args: CallExpression['arguments'] = [], args: CallExpression['arguments'] = [],
loc: SourceLocation = locStub loc: SourceLocation = locStub
): CallExpression { ): CallExpression {
@ -307,20 +309,22 @@ export function createCallExpression(
} }
export function createFunctionExpression( export function createFunctionExpression(
params: ExpressionNode | undefined, params: FunctionExpression['params'],
returns: TemplateChildNode[], returns: FunctionExpression['returns'],
newline: boolean = false,
loc: SourceLocation = locStub loc: SourceLocation = locStub
): SlotFunctionExpression { ): FunctionExpression {
return { return {
type: NodeTypes.JS_SLOT_FUNCTION, type: NodeTypes.JS_FUNCTION_EXPRESSION,
params, params,
returns, returns,
newline,
loc loc
} }
} }
export function createSequenceExpression( export function createSequenceExpression(
expressions: JSChildNode[] expressions: SequenceExpression['expressions']
): SequenceExpression { ): SequenceExpression {
return { return {
type: NodeTypes.JS_SEQUENCE_EXPRESSION, type: NodeTypes.JS_SEQUENCE_EXPRESSION,
@ -330,9 +334,9 @@ export function createSequenceExpression(
} }
export function createConditionalExpression( export function createConditionalExpression(
test: ExpressionNode, test: ConditionalExpression['test'],
consequent: JSChildNode, consequent: ConditionalExpression['consequent'],
alternate: JSChildNode alternate: ConditionalExpression['alternate']
): ConditionalExpression { ): ConditionalExpression {
return { return {
type: NodeTypes.JS_CONDITIONAL_EXPRESSION, type: NodeTypes.JS_CONDITIONAL_EXPRESSION,

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

@ -2,8 +2,6 @@ import {
RootNode, RootNode,
TemplateChildNode, TemplateChildNode,
ElementNode, ElementNode,
IfNode,
ForNode,
TextNode, TextNode,
CommentNode, CommentNode,
ExpressionNode, ExpressionNode,
@ -18,7 +16,7 @@ import {
CompoundExpressionNode, CompoundExpressionNode,
SimpleExpressionNode, SimpleExpressionNode,
ElementTypes, ElementTypes,
SlotFunctionExpression, FunctionExpression,
SequenceExpression, SequenceExpression,
ConditionalExpression ConditionalExpression
} from './ast' } from './ast'
@ -29,12 +27,7 @@ import {
isSimpleIdentifier isSimpleIdentifier
} from './utils' } from './utils'
import { isString, isArray } from '@vue/shared' import { isString, isArray } from '@vue/shared'
import { import { TO_STRING, CREATE_VNODE, COMMENT } from './runtimeConstants'
RENDER_LIST,
TO_STRING,
CREATE_VNODE,
COMMENT
} from './runtimeConstants'
type CodegenNode = TemplateChildNode | JSChildNode type CodegenNode = TemplateChildNode | JSChildNode
@ -342,7 +335,15 @@ function genNodeList(
function genNode(node: CodegenNode, context: CodegenContext) { function genNode(node: CodegenNode, context: CodegenContext) {
switch (node.type) { switch (node.type) {
case NodeTypes.ELEMENT: case NodeTypes.ELEMENT:
genElement(node, context) case NodeTypes.IF:
case NodeTypes.FOR:
__DEV__ &&
assert(
node.codegenNode != null,
`Codegen node is missing for element/if/for node. ` +
`Apply appropriate transforms first.`
)
genNode(node.codegenNode!, context)
break break
case NodeTypes.TEXT: case NodeTypes.TEXT:
genText(node, context) genText(node, context)
@ -359,12 +360,6 @@ function genNode(node: CodegenNode, context: CodegenContext) {
case NodeTypes.COMMENT: case NodeTypes.COMMENT:
genComment(node, context) genComment(node, context)
break break
case NodeTypes.IF:
genIf(node, context)
break
case NodeTypes.FOR:
genFor(node, context)
break
case NodeTypes.JS_CALL_EXPRESSION: case NodeTypes.JS_CALL_EXPRESSION:
genCallExpression(node, context) genCallExpression(node, context)
break break
@ -374,8 +369,8 @@ function genNode(node: CodegenNode, context: CodegenContext) {
case NodeTypes.JS_ARRAY_EXPRESSION: case NodeTypes.JS_ARRAY_EXPRESSION:
genArrayExpression(node, context) genArrayExpression(node, context)
break break
case NodeTypes.JS_SLOT_FUNCTION: case NodeTypes.JS_FUNCTION_EXPRESSION:
genSlotFunction(node, context) genFunctionExpression(node, context)
break break
case NodeTypes.JS_SEQUENCE_EXPRESSION: case NodeTypes.JS_SEQUENCE_EXPRESSION:
genSequenceExpression(node, context) genSequenceExpression(node, context)
@ -394,16 +389,6 @@ function genNode(node: CodegenNode, context: CodegenContext) {
} }
} }
function genElement(node: ElementNode, context: CodegenContext) {
__DEV__ &&
assert(
node.codegenNode != null,
`AST is not transformed for codegen. ` +
`Apply appropriate transforms first.`
)
genCallExpression(node.codegenNode!, context, false)
}
function genText( function genText(
node: TextNode | SimpleExpressionNode, node: TextNode | SimpleExpressionNode,
context: CodegenContext context: CodegenContext
@ -469,56 +454,10 @@ function genComment(node: CommentNode, context: CodegenContext) {
} }
} }
// control flow
function genIf(node: IfNode, context: CodegenContext) {
genNode(node.codegenNode, context)
}
function genFor(node: ForNode, context: CodegenContext) {
const { push, helper, indent, deindent } = context
const { source, keyAlias, valueAlias, objectIndexAlias, children } = node
push(`${helper(RENDER_LIST)}(`, node, true)
genNode(source, context)
push(`, (`)
if (valueAlias) {
genNode(valueAlias, context)
}
if (keyAlias) {
if (!valueAlias) {
push(`__value`)
}
push(`, `)
genNode(keyAlias, context)
}
if (objectIndexAlias) {
if (!keyAlias) {
if (!valueAlias) {
push(`__value, __key`)
} else {
push(`, __key`)
}
}
push(`, `)
genNode(objectIndexAlias, context)
}
push(`) => {`)
indent()
push(`return `)
genChildren(children, context, true)
deindent()
push(`})`)
}
// JavaScript // JavaScript
function genCallExpression( function genCallExpression(node: CallExpression, context: CodegenContext) {
node: CallExpression,
context: CodegenContext,
multilines = false
) {
context.push(node.callee + `(`, node, true) context.push(node.callee + `(`, node, true)
multilines && context.indent() genNodeList(node.arguments, context)
genNodeList(node.arguments, context, multilines)
multilines && context.deindent()
context.push(`)`) context.push(`)`)
} }
@ -554,15 +493,33 @@ function genArrayExpression(node: ArrayExpression, context: CodegenContext) {
genNodeListAsArray(node.elements, context) genNodeListAsArray(node.elements, context)
} }
function genSlotFunction( function genFunctionExpression(
node: SlotFunctionExpression, node: FunctionExpression,
context: CodegenContext context: CodegenContext
) { ) {
context.push(`(`, node) const { push, indent, deindent } = context
if (node.params) genNode(node.params, context) const { params, returns, newline } = node
context.push(`) => `) push(`(`, node)
// pre-normalized slots should always return arrays if (isArray(params)) {
genNodeListAsArray(node.returns, context) genNodeList(params, context)
} else if (params) {
genNode(params, context)
}
push(`) => `)
if (newline) {
push(`{`)
indent()
push(`return `)
}
if (isArray(returns)) {
genNodeListAsArray(returns, context)
} else {
genNode(returns, context)
}
if (newline) {
deindent()
push(`}`)
}
} }
function genConditionalExpression( function genConditionalExpression(

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

@ -7,11 +7,20 @@ import {
ExpressionNode, ExpressionNode,
createSimpleExpression, createSimpleExpression,
SourceLocation, SourceLocation,
SimpleExpressionNode SimpleExpressionNode,
createSequenceExpression,
createCallExpression,
createFunctionExpression,
ElementTypes
} from '../ast' } from '../ast'
import { createCompilerError, ErrorCodes } from '../errors' import { createCompilerError, ErrorCodes } from '../errors'
import { getInnerRange } from '../utils' import { getInnerRange } from '../utils'
import { RENDER_LIST } from '../runtimeConstants' import {
RENDER_LIST,
OPEN_BLOCK,
CREATE_BLOCK,
FRAGMENT
} from '../runtimeConstants'
import { processExpression } from './transformExpression' import { processExpression } from './transformExpression'
export const transformFor = createStructuralDirectiveTransform( export const transformFor = createStructuralDirectiveTransform(
@ -26,9 +35,14 @@ export const transformFor = createStructuralDirectiveTransform(
) )
if (parseResult) { if (parseResult) {
context.helper(RENDER_LIST) const { helper, addIdentifiers, removeIdentifiers } = context
const { source, value, key, index } = parseResult const { source, value, key, index } = parseResult
const codegenNode = createSequenceExpression([
createCallExpression(helper(OPEN_BLOCK))
// to be filled in on exit after children traverse
])
context.replaceNode({ context.replaceNode({
type: NodeTypes.FOR, type: NodeTypes.FOR,
loc: dir.loc, loc: dir.loc,
@ -36,19 +50,52 @@ export const transformFor = createStructuralDirectiveTransform(
valueAlias: value, valueAlias: value,
keyAlias: key, keyAlias: key,
objectIndexAlias: index, objectIndexAlias: index,
children: [node] children: [node],
codegenNode
}) })
if (!__BROWSER__) { if (!__BROWSER__) {
// scope management // scope management
const { addIdentifiers, removeIdentifiers } = context
// inject identifiers to context // inject identifiers to context
value && addIdentifiers(value) value && addIdentifiers(value)
key && addIdentifiers(key) key && addIdentifiers(key)
index && addIdentifiers(index) index && addIdentifiers(index)
}
return () => { return () => {
const params: ExpressionNode[] = []
if (value) {
params.push(value)
}
if (key) {
if (!value) {
params.push(createSimpleExpression(`_`, false))
}
params.push(key)
}
if (index) {
if (!key) {
params.push(createSimpleExpression(`__`, false))
}
params.push(index)
}
codegenNode.expressions.push(
createCallExpression(helper(CREATE_BLOCK), [
helper(FRAGMENT),
`null`,
createCallExpression(helper(RENDER_LIST), [
source,
createFunctionExpression(
params,
node.tagType === ElementTypes.TEMPLATE ? node.children : node,
true /* force newline to make it more readable */
)
])
])
)
if (!__BROWSER__) {
value && removeIdentifiers(value) value && removeIdentifiers(value)
key && removeIdentifiers(key) key && removeIdentifiers(key)
index && removeIdentifiers(index) index && removeIdentifiers(index)

45
packages/compiler-core/src/transforms/vIf.ts
View File

@ -20,7 +20,9 @@ import {
ObjectExpression, ObjectExpression,
createObjectProperty, createObjectProperty,
Property, Property,
ExpressionNode ExpressionNode,
TemplateChildNode,
FunctionExpression
} from '../ast' } from '../ast'
import { createCompilerError, ErrorCodes } from '../errors' import { createCompilerError, ErrorCodes } from '../errors'
import { processExpression } from './transformExpression' import { processExpression } from './transformExpression'
@ -68,7 +70,7 @@ export const transformIf = createStructuralDirectiveTransform(
// transformed. // transformed.
return () => { return () => {
codegenNode.expressions.push( codegenNode.expressions.push(
createCodegenNodeForBranch(node, branch, 0, context) createCodegenNodeForBranch(branch, 0, context)
) )
} }
} else { } else {
@ -105,7 +107,6 @@ export const transformIf = createStructuralDirectiveTransform(
parentCondition = parentCondition.alternate parentCondition = parentCondition.alternate
} else { } else {
parentCondition.alternate = createCodegenNodeForBranch( parentCondition.alternate = createCodegenNodeForBranch(
node,
branch, branch,
sibling.branches.length - 1, sibling.branches.length - 1,
context context
@ -139,7 +140,6 @@ function createIfBranch(node: ElementNode, dir: DirectiveNode): IfBranchNode {
} }
function createCodegenNodeForBranch( function createCodegenNodeForBranch(
node: ElementNode,
branch: IfBranchNode, branch: IfBranchNode,
index: number, index: number,
context: TransformContext context: TransformContext
@ -147,41 +147,50 @@ function createCodegenNodeForBranch(
if (branch.condition) { if (branch.condition) {
return createConditionalExpression( return createConditionalExpression(
branch.condition, branch.condition,
createChildrenCodegenNode(node, branch, index, context), createChildrenCodegenNode(branch, index, context),
createCallExpression(context.helper(CREATE_BLOCK), [ createCallExpression(context.helper(CREATE_BLOCK), [
context.helper(EMPTY) context.helper(EMPTY)
]) ])
) )
} else { } else {
return createChildrenCodegenNode(node, branch, index, context) return createChildrenCodegenNode(branch, index, context)
} }
} }
function createChildrenCodegenNode( function createChildrenCodegenNode(
node: ElementNode,
branch: IfBranchNode, branch: IfBranchNode,
index: number, index: number,
{ helper }: TransformContext { helper }: TransformContext
): CallExpression { ): CallExpression {
const isTemplate = node.tagType === ElementTypes.TEMPLATE
const keyExp = `{ key: ${index} }` const keyExp = `{ key: ${index} }`
if (isTemplate) { const { children } = branch
const child = children[0]
const needFragmentWrapper =
children.length > 1 || child.type !== NodeTypes.ELEMENT
if (needFragmentWrapper) {
let fragmentChildren: TemplateChildNode[] | FunctionExpression = children
// optimize away nested fragments when child is a ForNode
if (children.length === 1 && child.type === NodeTypes.FOR) {
fragmentChildren = (child.codegenNode.expressions[1] as CallExpression)
.arguments[2] as FunctionExpression
}
return createCallExpression(helper(CREATE_BLOCK), [ return createCallExpression(helper(CREATE_BLOCK), [
helper(FRAGMENT), helper(FRAGMENT),
keyExp, keyExp,
branch.children fragmentChildren
]) ])
} else { } else {
let childCodegen = node.codegenNode! const childCodegen = (child as ElementNode).codegenNode!
if (childCodegen.callee.includes(APPLY_DIRECTIVES)) { let vnodeCall = childCodegen
childCodegen = childCodegen.arguments[0] as CallExpression if (vnodeCall.callee.includes(APPLY_DIRECTIVES)) {
vnodeCall = vnodeCall.arguments[0] as CallExpression
} }
// change child to a block // change child to a block
childCodegen.callee = helper(CREATE_BLOCK) vnodeCall.callee = helper(CREATE_BLOCK)
// branch key // branch key
const existingProps = childCodegen.arguments[1] const existingProps = vnodeCall.arguments[1]
if (!existingProps || existingProps === `null`) { if (!existingProps || existingProps === `null`) {
childCodegen.arguments[1] = keyExp vnodeCall.arguments[1] = keyExp
} else { } else {
// inject branch key if not already have a key // inject branch key if not already have a key
const props = existingProps as const props = existingProps as
@ -202,13 +211,13 @@ function createChildrenCodegenNode(
props.properties.unshift(createKeyProperty(index)) props.properties.unshift(createKeyProperty(index))
} else { } else {
// single v-bind with expression // single v-bind with expression
childCodegen.arguments[1] = createCallExpression(helper(MERGE_PROPS), [ vnodeCall.arguments[1] = createCallExpression(helper(MERGE_PROPS), [
keyExp, keyExp,
props props
]) ])
} }
} }
return node.codegenNode! return childCodegen
} }
} }

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

@ -143,6 +143,7 @@ function buildSlot(
createFunctionExpression( createFunctionExpression(
slotProps, slotProps,
children, children,
false,
children.length ? children[0].loc : loc children.length ? children[0].loc : loc
) )
) )