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
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`] = `
"
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`] = `
"const _Vue = Vue

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

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

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

@@ -4,8 +4,6 @@ import {
NodeTypes,
RootNode,
createSimpleExpression,
Namespaces,
ElementTypes,
createObjectExpression,
createObjectProperty,
createArrayExpression,
@@ -15,12 +13,7 @@ import {
createCallExpression,
createConditionalExpression
} from '../src'
import {
CREATE_VNODE,
COMMENT,
TO_STRING,
RENDER_LIST
} from '../src/runtimeConstants'
import { CREATE_VNODE, COMMENT, TO_STRING } from '../src/runtimeConstants'
import { createElementWithCodegen } from './testUtils'
function createRoot(options: Partial<RootNode> = {}): RootNode {
@@ -250,202 +243,202 @@ describe('compiler: codegen', () => {
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', () => {
// 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/ 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 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 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('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_SLOT_FUNCTION,
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('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', () => {
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(
createSlotMatcher({
default: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: undefined,
returns: [
{
@@ -81,7 +81,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject(
createSlotMatcher({
default: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `foo` }, ` }`]
@@ -121,7 +121,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject(
createSlotMatcher({
one: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
@@ -143,7 +143,7 @@ describe('compiler: transform component slots', () => {
]
},
two: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`,
@@ -184,7 +184,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject(
createSlotMatcher({
'[_ctx.one]': {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
@@ -206,7 +206,7 @@ describe('compiler: transform component slots', () => {
]
},
'[_ctx.two]': {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ bar }`,
@@ -247,7 +247,7 @@ describe('compiler: transform component slots', () => {
expect(slots).toMatchObject(
createSlotMatcher({
default: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: `{ foo }`,
@@ -263,7 +263,7 @@ describe('compiler: transform component slots', () => {
`null`,
createSlotMatcher({
default: {
type: NodeTypes.JS_SLOT_FUNCTION,
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: {
type: NodeTypes.COMPOUND_EXPRESSION,
children: [`{ `, { content: `bar` }, ` }`]