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

fix(compiler): v-for fragments should be blocks

Browse Source
This commit is contained in:
Evan You 2019-10-02 10:47:01 -04:00
parent 191db785bd
commit bec01c93bd
6 changed files with 96 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,11 +17,11 @@ return function render() {
: _createBlock(_Fragment, { key: 1 }, [ : _createBlock(_Fragment, { key: 1 }, [
\\"no\\" \\"no\\"
])), ])),
_createVNode(_Fragment, null, _renderList(list, (value, index) => { (_openBlock(), _createBlock(_Fragment, null, _renderList(list, (value, index) => {
return (_openBlock(), _createBlock(\\"div\\", null, [ return (_openBlock(), _createBlock(\\"div\\", null, [
_createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */) _createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
])) ]))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */) ], 2 /* CLASS */)
} }
}" }"
@ -42,11 +42,11 @@ return function render() {
: createBlock(Fragment, { key: 1 }, [ : createBlock(Fragment, { key: 1 }, [
\\"no\\" \\"no\\"
])), ])),
createVNode(Fragment, null, renderList(_ctx.list, (value, index) => { (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
return (openBlock(), createBlock(\\"div\\", null, [ return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */) createVNode(\\"span\\", null, toString(value + index), 1 /* TEXT */)
])) ]))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */) ], 2 /* CLASS */)
}" }"
`; `;
@ -66,11 +66,11 @@ export default function render() {
: createBlock(Fragment, { key: 1 }, [ : createBlock(Fragment, { key: 1 }, [
\\"no\\" \\"no\\"
])), ])),
createVNode(Fragment, null, renderList(_ctx.list, (value, index) => { (openBlock(), createBlock(Fragment, null, renderList(_ctx.list, (value, index) => {
return (openBlock(), createBlock(\\"div\\", null, [ return (openBlock(), createBlock(\\"div\\", null, [
createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */) createVNode(\\"span\\", null, _toString(value + index), 1 /* TEXT */)
])) ]))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
], 2 /* CLASS */) ], 2 /* CLASS */)
}" }"
`; `;

56
packages/compiler-core/__tests__/transforms/__snapshots__/vFor.spec.ts.snap
View File

@ -5,11 +5,11 @@ exports[`compiler: v-for codegen basic v-for 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -19,14 +19,14 @@ exports[`compiler: v-for codegen keyed template v-for 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, { key: item }, [ return (_openBlock(), _createBlock(_Fragment, { key: item }, [
\\"hello\\", \\"hello\\",
_createVNode(\\"span\\") _createVNode(\\"span\\")
])) ]))
}), 64 /* KEYED_FRAGMENT */) }), 64 /* KEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -36,11 +36,11 @@ exports[`compiler: v-for codegen keyed v-for 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(\\"span\\", { key: item })) return (_openBlock(), _createBlock(\\"span\\", { key: item }))
}), 64 /* KEYED_FRAGMENT */) }), 64 /* KEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -50,11 +50,11 @@ exports[`compiler: v-for codegen skipped key 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item, __, index) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item, __, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -64,11 +64,11 @@ exports[`compiler: v-for codegen skipped value & key 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (_, __, index) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, __, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -78,11 +78,11 @@ exports[`compiler: v-for codegen skipped value 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (_, key, index) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (_, key, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -92,14 +92,14 @@ exports[`compiler: v-for codegen template v-for 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, null, [ return (_openBlock(), _createBlock(_Fragment, null, [
\\"hello\\", \\"hello\\",
_createVNode(\\"span\\") _createVNode(\\"span\\")
])) ]))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -109,11 +109,11 @@ exports[`compiler: v-for codegen template v-for w/ <slot/> 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, renderSlot: _renderSlot, openBlock: _openBlock, createBlock: _createBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
return (_openBlock(), _createBlock(_Fragment, null, _renderSlot($slots.default))) return (_openBlock(), _createBlock(_Fragment, null, _renderSlot($slots.default)))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;
@ -123,7 +123,7 @@ exports[`compiler: v-for codegen v-if + v-for 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { openBlock: _openBlock, renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, Empty: _Empty } = _Vue const { openBlock: _openBlock, renderList: _renderList, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode, Empty: _Empty } = _Vue
return (_openBlock(), ok return (_openBlock(), ok
? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => { ? _createBlock(_Fragment, { key: 0 }, _renderList(list, (i) => {
@ -139,11 +139,11 @@ exports[`compiler: v-for codegen value + key + index 1`] = `
return function render() { return function render() {
with (this) { with (this) {
const { renderList: _renderList, createVNode: _createVNode, Fragment: _Fragment, createBlock: _createBlock, openBlock: _openBlock } = _Vue const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, createVNode: _createVNode } = _Vue
return _createVNode(_Fragment, null, _renderList(items, (item, key, index) => { return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item, key, index) => {
return (_openBlock(), _createBlock(\\"span\\")) return (_openBlock(), _createBlock(\\"span\\"))
}), 128 /* UNKEYED_FRAGMENT */) }), 128 /* UNKEYED_FRAGMENT */))
} }
}" }"
`; `;

85
packages/compiler-core/__tests__/transforms/vFor.spec.ts
View File

@ -12,7 +12,8 @@ import {
SimpleExpressionNode, SimpleExpressionNode,
ElementNode, ElementNode,
InterpolationNode, InterpolationNode,
CallExpression CallExpression,
SequenceExpression
} from '../../src/ast' } from '../../src/ast'
import { ErrorCodes } from '../../src/errors' import { ErrorCodes } from '../../src/errors'
import { CompilerOptions, generate } from '../../src' import { CompilerOptions, generate } from '../../src'
@ -21,7 +22,6 @@ import {
CREATE_BLOCK, CREATE_BLOCK,
FRAGMENT, FRAGMENT,
RENDER_LIST, RENDER_LIST,
CREATE_VNODE,
RENDER_SLOT RENDER_SLOT
} from '../../src/runtimeConstants' } from '../../src/runtimeConstants'
import { PatchFlags } from '@vue/runtime-dom' import { PatchFlags } from '@vue/runtime-dom'
@ -565,46 +565,59 @@ describe('compiler: v-for', () => {
}) })
describe('codegen', () => { describe('codegen', () => {
function assertSharedCodegen(node: CallExpression, keyed: boolean = false) { function assertSharedCodegen(
node: SequenceExpression,
keyed: boolean = false
) {
expect(node).toMatchObject({ expect(node).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_SEQUENCE_EXPRESSION,
callee: `_${CREATE_VNODE}`, expressions: [
arguments: [
`_${FRAGMENT}`,
`null`,
{ {
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${RENDER_LIST}`, callee: `_${OPEN_BLOCK}`
arguments: [
{}, // to be asserted by each test
{
type: NodeTypes.JS_FUNCTION_EXPRESSION,
returns: {
type: NodeTypes.JS_SEQUENCE_EXPRESSION,
expressions: [
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${OPEN_BLOCK}`
},
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${CREATE_BLOCK}`
}
]
}
}
]
}, },
keyed {
? `${PatchFlags.KEYED_FRAGMENT} /* ${ type: NodeTypes.JS_CALL_EXPRESSION,
PatchFlagNames[PatchFlags.KEYED_FRAGMENT] callee: `_${CREATE_BLOCK}`,
} */` arguments: [
: `${PatchFlags.UNKEYED_FRAGMENT} /* ${ `_${FRAGMENT}`,
PatchFlagNames[PatchFlags.UNKEYED_FRAGMENT] `null`,
} */` {
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${RENDER_LIST}`,
arguments: [
{}, // to be asserted by each test
{
type: NodeTypes.JS_FUNCTION_EXPRESSION,
returns: {
type: NodeTypes.JS_SEQUENCE_EXPRESSION,
expressions: [
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${OPEN_BLOCK}`
},
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${CREATE_BLOCK}`
}
]
}
}
]
},
keyed
? `${PatchFlags.KEYED_FRAGMENT} /* ${
PatchFlagNames[PatchFlags.KEYED_FRAGMENT]
} */`
: `${PatchFlags.UNKEYED_FRAGMENT} /* ${
PatchFlagNames[PatchFlags.UNKEYED_FRAGMENT]
} */`
]
}
] ]
}) })
const renderListArgs = (node.arguments[2] as CallExpression).arguments const renderListArgs = ((node.expressions[1] as CallExpression)
.arguments[2] as CallExpression).arguments
return { return {
source: renderListArgs[0] as SimpleExpressionNode, source: renderListArgs[0] as SimpleExpressionNode,
params: (renderListArgs[1] as any).params, params: (renderListArgs[1] as any).params,

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

@ -158,7 +158,7 @@ export interface ForNode extends Node {
keyAlias: ExpressionNode | undefined keyAlias: ExpressionNode | undefined
objectIndexAlias: ExpressionNode | undefined objectIndexAlias: ExpressionNode | undefined
children: TemplateChildNode[] children: TemplateChildNode[]
codegenNode: CallExpression 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.

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

@ -24,8 +24,7 @@ import {
RENDER_LIST, RENDER_LIST,
OPEN_BLOCK, OPEN_BLOCK,
CREATE_BLOCK, CREATE_BLOCK,
FRAGMENT, FRAGMENT
CREATE_VNODE
} from '../runtimeConstants' } from '../runtimeConstants'
import { processExpression } from './transformExpression' import { processExpression } from './transformExpression'
import { PatchFlags, PatchFlagNames } from '@vue/shared' import { PatchFlags, PatchFlagNames } from '@vue/shared'
@ -52,12 +51,15 @@ export const transformFor = createStructuralDirectiveTransform(
const fragmentFlag = keyProp const fragmentFlag = keyProp
? PatchFlags.KEYED_FRAGMENT ? PatchFlags.KEYED_FRAGMENT
: PatchFlags.UNKEYED_FRAGMENT : PatchFlags.UNKEYED_FRAGMENT
const codegenNode = createCallExpression(helper(CREATE_VNODE), [ const codegenNode = createSequenceExpression([
helper(FRAGMENT), createCallExpression(helper(OPEN_BLOCK)),
`null`, createCallExpression(helper(CREATE_BLOCK), [
renderExp, helper(FRAGMENT),
fragmentFlag + `null`,
(__DEV__ ? ` /* ${PatchFlagNames[fragmentFlag]} */` : ``) renderExp,
fragmentFlag +
(__DEV__ ? ` /* ${PatchFlagNames[fragmentFlag]} */` : ``)
])
]) ])
context.replaceNode({ context.replaceNode({

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

@ -176,7 +176,8 @@ function createChildrenCodegenNode(
if (children.length === 1) { if (children.length === 1) {
// optimize away nested fragments when child is a ForNode // optimize away nested fragments when child is a ForNode
if (child.type === NodeTypes.FOR) { if (child.type === NodeTypes.FOR) {
const forBlockArgs = child.codegenNode.arguments const forBlockArgs = (child.codegenNode
.expressions[1] as CallExpression).arguments
// directly use the for block's children and patchFlag // directly use the for block's children and patchFlag
blockArgs[2] = forBlockArgs[2] blockArgs[2] = forBlockArgs[2]
blockArgs[3] = forBlockArgs[3] blockArgs[3] = forBlockArgs[3]