test('single <slot/>', () => {
const ast = transformWithCodegen(`<slot/>`)
- expect(ast.codegenNode).toMatchObject(
- createBlockMatcher([
- `_${FRAGMENT}`,
- `null`,
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: `_${RENDER_SLOT}`
- }
- ])
- )
+ expect(ast.codegenNode).toMatchObject({
+ codegenNode: {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${RENDER_SLOT}`,
+ arguments: ['$slots.default']
+ }
+ })
})
test('single element', () => {
const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
- return (_openBlock(), _createBlock(_Fragment, null, _renderSlot($slots.default)))
+ return _renderSlot($slots.default)
+ }), 128 /* UNKEYED_FRAGMENT */))
+ }
+}"
+`;
+
+exports[`compiler: v-for codegen v-for on <slot/> 1`] = `
+"const _Vue = Vue
+
+return function render() {
+ with (this) {
+ const { renderList: _renderList, openBlock: _openBlock, createBlock: _createBlock, Fragment: _Fragment, renderSlot: _renderSlot } = _Vue
+
+ return (_openBlock(), _createBlock(_Fragment, null, _renderList(items, (item) => {
+ return _renderSlot($slots.default)
}), 128 /* UNKEYED_FRAGMENT */))
}
}"
return function render() {
with (this) {
- const { openBlock: _openBlock, renderSlot: _renderSlot, Fragment: _Fragment, createBlock: _createBlock, Empty: _Empty } = _Vue
+ const { openBlock: _openBlock, renderSlot: _renderSlot, createBlock: _createBlock, Empty: _Empty } = _Vue
return (_openBlock(), ok
- ? _createBlock(_Fragment, { key: 0 }, _renderSlot($slots.default))
+ ? _renderSlot($slots.default, { key: 0 })
: _createBlock(_Empty))
}
}"
describe('codegen', () => {
function assertSharedCodegen(
node: SequenceExpression,
- keyed: boolean = false
+ keyed: boolean = false,
+ customReturn: boolean = false
) {
expect(node).toMatchObject({
type: NodeTypes.JS_SEQUENCE_EXPRESSION,
{}, // 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}`
+ returns: customReturn
+ ? {}
+ : {
+ type: NodeTypes.JS_SEQUENCE_EXPRESSION,
+ expressions: [
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${OPEN_BLOCK}`
+ },
+ {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${CREATE_BLOCK}`
+ }
+ ]
}
- ]
- }
}
]
},
return {
source: renderListArgs[0] as SimpleExpressionNode,
params: (renderListArgs[1] as any).params,
- blockArgs: (renderListArgs[1] as any).returns.expressions[1].arguments
+ returns: (renderListArgs[1] as any).returns,
+ blockArgs: customReturn
+ ? null
+ : (renderListArgs[1] as any).returns.expressions[1].arguments
}
}
} = parseWithForTransform(
'<template v-for="item in items"><slot/></template>'
)
- expect(assertSharedCodegen(codegenNode)).toMatchObject({
+ expect(
+ assertSharedCodegen(codegenNode, false, true /* custom return */)
+ ).toMatchObject({
source: { content: `items` },
params: [{ content: `item` }],
- blockArgs: [
- `_${FRAGMENT}`,
- `null`,
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: `_${RENDER_SLOT}`
- }
- ]
+ returns: {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${RENDER_SLOT}`
+ }
+ })
+ expect(generate(root).code).toMatchSnapshot()
+ })
+
+ test('v-for on <slot/>', () => {
+ const {
+ root,
+ node: { codegenNode }
+ } = parseWithForTransform('<slot v-for="item in items"></slot>')
+ expect(
+ assertSharedCodegen(codegenNode, false, true /* custom return */)
+ ).toMatchObject({
+ source: { content: `items` },
+ params: [{ content: `item` }],
+ returns: {
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${RENDER_SLOT}`
+ }
})
expect(generate(root).code).toMatchSnapshot()
})
// should optimize v-if + v-for into a single Fragment block
arguments: [
`_${FRAGMENT}`,
- `{ key: 0 }`,
+ createObjectMatcher({ key: `[0]` }),
{
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${RENDER_LIST}`,
assertSharedCodegen(codegenNode)
const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
.consequent as CallExpression
- expect(branch1.arguments).toMatchObject([`"div"`, `{ key: 0 }`])
+ expect(branch1.arguments).toMatchObject([
+ `"div"`,
+ createObjectMatcher({ key: `[0]` })
+ ])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as CallExpression
expect(branch2.arguments).toMatchObject([`_${EMPTY}`])
.consequent as CallExpression
expect(branch1.arguments).toMatchObject([
`_${FRAGMENT}`,
- `{ key: 0 }`,
+ createObjectMatcher({ key: `[0]` }),
[
{ type: NodeTypes.ELEMENT, tag: 'div' },
{ type: NodeTypes.TEXT, content: `hello` },
root,
node: { codegenNode }
} = parseWithIfTransform(`<template v-if="ok"><slot/></template>`)
- assertSharedCodegen(codegenNode)
+ // assertSharedCodegen(codegenNode)
const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
.consequent as CallExpression
- expect(branch1.arguments).toMatchObject([
- `_${FRAGMENT}`,
- `{ key: 0 }`,
- {
- type: NodeTypes.JS_CALL_EXPRESSION,
- callee: `_${RENDER_SLOT}`
- }
- ])
+ expect(branch1).toMatchObject({
+ type: NodeTypes.JS_CALL_EXPRESSION,
+ callee: `_${RENDER_SLOT}`,
+ arguments: ['$slots.default', createObjectMatcher({ key: `[0]` })]
+ })
expect(generate(root).code).toMatchSnapshot()
})
assertSharedCodegen(codegenNode)
const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
.consequent as CallExpression
- expect(branch1.arguments).toMatchObject([`"div"`, `{ key: 0 }`])
+ expect(branch1.arguments).toMatchObject([
+ `"div"`,
+ createObjectMatcher({ key: `[0]` })
+ ])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as CallExpression
- expect(branch2.arguments).toMatchObject([`"p"`, `{ key: 1 }`])
+ expect(branch2.arguments).toMatchObject([
+ `"p"`,
+ createObjectMatcher({ key: `[1]` })
+ ])
expect(generate(root).code).toMatchSnapshot()
})
assertSharedCodegen(codegenNode, 1)
const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
.consequent as CallExpression
- expect(branch1.arguments).toMatchObject([`"div"`, `{ key: 0 }`])
+ expect(branch1.arguments).toMatchObject([
+ `"div"`,
+ createObjectMatcher({ key: `[0]` })
+ ])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as ConditionalExpression
expect((branch2.consequent as CallExpression).arguments).toMatchObject([
`"p"`,
- `{ key: 1 }`
+ createObjectMatcher({ key: `[1]` })
])
expect(generate(root).code).toMatchSnapshot()
})
assertSharedCodegen(codegenNode, 1)
const branch1 = (codegenNode.expressions[1] as ConditionalExpression)
.consequent as CallExpression
- expect(branch1.arguments).toMatchObject([`"div"`, `{ key: 0 }`])
+ expect(branch1.arguments).toMatchObject([
+ `"div"`,
+ createObjectMatcher({ key: `[0]` })
+ ])
const branch2 = (codegenNode.expressions[1] as ConditionalExpression)
.alternate as ConditionalExpression
expect((branch2.consequent as CallExpression).arguments).toMatchObject([
`"p"`,
- `{ key: 1 }`
+ createObjectMatcher({ key: `[1]` })
])
expect((branch2.alternate as CallExpression).arguments).toMatchObject([
`_${FRAGMENT}`,
- `{ key: 2 }`,
+ createObjectMatcher({ key: `[2]` }),
[
{
type: NodeTypes.TEXT,
expect(branch1.arguments[1]).toMatchObject({
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${MERGE_PROPS}`,
- arguments: [`{ key: 0 }`, { content: `obj` }]
+ arguments: [createObjectMatcher({ key: `[0]` }), { content: `obj` }]
})
})
type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${MERGE_PROPS}`,
arguments: [
- `{ key: 0 }`,
+ createObjectMatcher({ key: `[0]` }),
{ content: `obj` },
createObjectMatcher({
id: 'foo'
.consequent as CallExpression
expect(branch1.callee).toBe(`_${APPLY_DIRECTIVES}`)
const realBranch = branch1.arguments[0] as CallExpression
- expect(realBranch.arguments[1]).toBe(`{ key: 0 }`)
+ expect(realBranch.arguments[1]).toMatchObject(
+ createObjectMatcher({ key: `[0]` })
+ )
})
- test('with comments', () => {})
+ test.todo('with comments')
})
})
import { isString, isArray } from '@vue/shared'
import { CompilerError, defaultOnError } from './errors'
import { TO_STRING, COMMENT, CREATE_VNODE, FRAGMENT } from './runtimeConstants'
-import { isVSlot, createBlockExpression } from './utils'
+import { isVSlot, createBlockExpression, isSlotOutlet } from './utils'
// There are two types of transforms:
//
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
- )
- }
+ if (
+ child.type === NodeTypes.ELEMENT &&
+ !isSlotOutlet(child) &&
+ child.codegenNode
+ ) {
+ // turn root element into a block
+ root.codegenNode = createBlockExpression(
+ child.codegenNode!.arguments,
+ context
+ )
} else {
- // IfNode, ForNode, TextNodes or transform calls without transformElement.
+ // - single <slot/>, IfNode, ForNode: already blocks.
+ // - single text node: always patched.
+ // - transform calls without transformElement (only during tests)
// Just generate the node as-is
root.codegenNode = child
}
if (hasDynamicTextChild) {
patchFlag |= PatchFlags.TEXT
}
- // pass directly if the only child is one of:
- // - text (plain / interpolation / expression)
- // - <slot> outlet (already an array)
- if (
- type === NodeTypes.TEXT ||
- hasDynamicTextChild ||
- (type === NodeTypes.ELEMENT &&
- (child as ElementNode).tagType === ElementTypes.SLOT)
- ) {
+ // pass directly if the only child is a text node
+ // (plain / interpolation / expression)
+ if (hasDynamicTextChild || type === NodeTypes.TEXT) {
args.push(child)
} else {
args.push(node.children)
}
}
-type PropsExpression = ObjectExpression | CallExpression | ExpressionNode
+export type PropsExpression = ObjectExpression | CallExpression | ExpressionNode
export function buildProps(
props: ElementNode['props'],
import { NodeTransform } from '../transform'
import {
NodeTypes,
- ElementTypes,
CompoundExpressionNode,
createCompoundExpression,
CallExpression,
createCallExpression
} from '../ast'
-import { isSimpleIdentifier } from '../utils'
+import { isSimpleIdentifier, isSlotOutlet } from '../utils'
import { buildProps } from './transformElement'
import { createCompilerError, ErrorCodes } from '../errors'
import { RENDER_SLOT } from '../runtimeConstants'
export const transformSlotOutlet: NodeTransform = (node, context) => {
- if (node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT) {
+ if (isSlotOutlet(node)) {
const { props, children, loc } = node
const $slots = context.prefixIdentifiers ? `_ctx.$slots` : `$slots`
let slot: string | CompoundExpressionNode = $slots + `.default`
createCallExpression,
createFunctionExpression,
ElementTypes,
- ObjectExpression,
createObjectExpression,
- createObjectProperty,
- TemplateChildNode,
- CallExpression
+ createObjectProperty
} from '../ast'
import { createCompilerError, ErrorCodes } from '../errors'
-import { getInnerRange, findProp, createBlockExpression } from '../utils'
+import {
+ getInnerRange,
+ findProp,
+ createBlockExpression,
+ isTemplateNode,
+ isSlotOutlet,
+ injectProp
+} from '../utils'
import {
RENDER_LIST,
OPEN_BLOCK,
} from '../runtimeConstants'
import { processExpression } from './transformExpression'
import { PatchFlags, PatchFlagNames } from '@vue/shared'
+import { PropsExpression } from './transformElement'
export const transformFor = createStructuralDirectiveTransform(
'for',
// finish the codegen now that all children have been traversed
let childBlock
- if (node.tagType === ElementTypes.TEMPLATE) {
+ const isTemplate = isTemplateNode(node)
+ const slotOutlet = isSlotOutlet(node)
+ ? node
+ : isTemplate &&
+ node.children.length === 1 &&
+ isSlotOutlet(node.children[0])
+ ? node.children[0]
+ : null
+ const keyProperty = keyProp
+ ? createObjectProperty(
+ `key`,
+ keyProp.type === NodeTypes.ATTRIBUTE
+ ? createSimpleExpression(keyProp.value!.content, true)
+ : keyProp.exp!
+ )
+ : null
+ if (slotOutlet) {
+ // <slot v-for="..."> or <template v-for="..."><slot/></template>
+ childBlock = slotOutlet.codegenNode!
+ if (isTemplate && keyProperty) {
+ // <template v-for="..." :key="..."><slot/></template>
+ // we need to inject the key to the renderSlot() call.
+ const existingProps = childBlock.arguments[1] as
+ | PropsExpression
+ | undefined
+ | 'null'
+ childBlock.arguments[1] = injectProp(
+ existingProps,
+ keyProperty,
+ context
+ )
+ }
+ } else if (isTemplate) {
// <template v-for="...">
// should genereate a fragment block for each loop
- let childBlockProps: string | ObjectExpression = `null`
- if (keyProp) {
- childBlockProps = createObjectExpression([
- createObjectProperty(
- `key`,
- keyProp.type === NodeTypes.ATTRIBUTE
- ? createSimpleExpression(keyProp.value!.content, true)
- : keyProp.exp!
- )
- ])
- }
- 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 (
- child.type === NodeTypes.ELEMENT &&
- child.tagType === ElementTypes.SLOT
- ) {
- childBlockChildren = child.codegenNode!
- }
- }
childBlock = createBlockExpression(
- [helper(FRAGMENT), childBlockProps, childBlockChildren],
+ [
+ helper(FRAGMENT),
+ keyProperty ? createObjectExpression([keyProperty]) : `null`,
+ node.children
+ ],
context
)
} else {
- // Normal element v-for. Directly use the child's codegenNode arguments,
- // but replace createVNode() with createBlock()
+ // Normal element v-for. Directly use the child's codegenNode
+ // arguments, but replace createVNode() with createBlock()
childBlock = createBlockExpression(
node.codegenNode!.arguments,
context
ConditionalExpression,
CallExpression,
createSimpleExpression,
- JSChildNode,
- ObjectExpression,
createObjectProperty,
- Property,
- ExpressionNode
+ createObjectExpression
} from '../ast'
import { createCompilerError, ErrorCodes } from '../errors'
import { processExpression } from './transformExpression'
EMPTY,
FRAGMENT,
APPLY_DIRECTIVES,
- MERGE_PROPS
+ CREATE_VNODE
} from '../runtimeConstants'
-import { isString } from '@vue/shared'
+import { injectProp } from '../utils'
+import { PropsExpression } from './transformElement'
export const transformIf = createStructuralDirectiveTransform(
/^(if|else|else-if)$/,
function createChildrenCodegenNode(
branch: IfBranchNode,
index: number,
- { helper }: TransformContext
+ context: TransformContext
): CallExpression {
- const keyExp = `{ key: ${index} }`
+ const { helper } = context
+ const keyProperty = createObjectProperty(
+ `key`,
+ createSimpleExpression(index + '', false)
+ )
const { children } = branch
const child = children[0]
const needFragmentWrapper =
- children.length !== 1 ||
- child.type !== NodeTypes.ELEMENT ||
- child.tagType === ElementTypes.SLOT
+ children.length !== 1 || child.type !== NodeTypes.ELEMENT
if (needFragmentWrapper) {
const blockArgs: CallExpression['arguments'] = [
helper(FRAGMENT),
- keyExp,
+ createObjectExpression([keyProperty]),
children
]
- if (children.length === 1) {
+ if (children.length === 1 && child.type === NodeTypes.FOR) {
// optimize away nested fragments when child is a ForNode
- if (child.type === NodeTypes.FOR) {
- const forBlockArgs = (child.codegenNode
- .expressions[1] as CallExpression).arguments
- // directly use the for block's children and patchFlag
- blockArgs[2] = forBlockArgs[2]
- blockArgs[3] = forBlockArgs[3]
- } else if (
- child.type === NodeTypes.ELEMENT &&
- child.tagType === ElementTypes.SLOT
- ) {
- // <template v-if="..."><slot/></template>
- // since slot always returns array, use it directly as the fragment children.
- blockArgs[2] = child.codegenNode!
- }
+ const forBlockArgs = (child.codegenNode.expressions[1] as CallExpression)
+ .arguments
+ // directly use the for block's children and patchFlag
+ blockArgs[2] = forBlockArgs[2]
+ blockArgs[3] = forBlockArgs[3]
}
return createCallExpression(helper(CREATE_BLOCK), blockArgs)
} else {
const childCodegen = (child as ElementNode).codegenNode!
let vnodeCall = childCodegen
+ // Element with custom directives. Locate the actual createVNode() call.
if (vnodeCall.callee.includes(APPLY_DIRECTIVES)) {
vnodeCall = vnodeCall.arguments[0] as CallExpression
}
- // change child to a block
- vnodeCall.callee = helper(CREATE_BLOCK)
- // branch key
- const existingProps = vnodeCall.arguments[1]
- if (!existingProps || existingProps === `null`) {
- vnodeCall.arguments[1] = keyExp
- } else {
- // inject branch key if not already have a key
- const props = existingProps as
- | CallExpression
- | ObjectExpression
- | ExpressionNode
- if (props.type === NodeTypes.JS_CALL_EXPRESSION) {
- // merged props... add ours
- // only inject key to object literal if it's the first argument so that
- // if doesn't override user provided keys
- const first = props.arguments[0] as string | JSChildNode
- if (!isString(first) && first.type === NodeTypes.JS_OBJECT_EXPRESSION) {
- first.properties.unshift(createKeyProperty(index))
- } else {
- props.arguments.unshift(keyExp)
- }
- } else if (props.type === NodeTypes.JS_OBJECT_EXPRESSION) {
- props.properties.unshift(createKeyProperty(index))
- } else {
- // single v-bind with expression
- vnodeCall.arguments[1] = createCallExpression(helper(MERGE_PROPS), [
- keyExp,
- props
- ])
- }
+ // Change createVNode to createBlock.
+ // It's possible to have renderSlot() here as well - which already produces
+ // a block, so no need to change the callee. renderSlot() also accepts props
+ // as the 2nd argument, so the key injection logic below works for it too.
+ if (vnodeCall.callee.includes(CREATE_VNODE)) {
+ vnodeCall.callee = helper(CREATE_BLOCK)
}
+ // inject branch key
+ const existingProps = vnodeCall.arguments[1] as
+ | PropsExpression
+ | undefined
+ | 'null'
+ vnodeCall.arguments[1] = injectProp(existingProps, keyProperty, context)
return childCodegen
}
}
-
-function createKeyProperty(index: number): Property {
- return createObjectProperty(`key`, createSimpleExpression(index + '', false))
-}
DirectiveNode,
ElementTypes,
TemplateChildNode,
- RootNode
+ RootNode,
+ ObjectExpression,
+ Property,
+ JSChildNode,
+ createObjectExpression
} from './ast'
import { parse } from 'acorn'
import { walk } from 'estree-walker'
import { TransformContext } from './transform'
-import { OPEN_BLOCK, CREATE_BLOCK } from './runtimeConstants'
+import { OPEN_BLOCK, CREATE_BLOCK, MERGE_PROPS } from './runtimeConstants'
import { isString } from '@vue/shared'
+import { PropsExpression } from './transforms/transformElement'
// cache node requires
// lazy require dependencies so that they don't end up in rollup's dep graph
export const isTemplateNode = (
node: RootNode | TemplateChildNode
-): node is ElementNode =>
+): node is ElementNode & { tagType: ElementTypes.TEMPLATE } =>
node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.TEMPLATE
+
+export const isSlotOutlet = (
+ node: RootNode | TemplateChildNode
+): node is ElementNode & { tagType: ElementTypes.SLOT } =>
+ node.type === NodeTypes.ELEMENT && node.tagType === ElementTypes.SLOT
+
+export function injectProp(
+ props: PropsExpression | undefined | 'null',
+ prop: Property,
+ context: TransformContext
+): ObjectExpression | CallExpression {
+ if (props == null || props === `null`) {
+ return createObjectExpression([prop])
+ } else if (props.type === NodeTypes.JS_CALL_EXPRESSION) {
+ // merged props... add ours
+ // only inject key to object literal if it's the first argument so that
+ // if doesn't override user provided keys
+ const first = props.arguments[0] as string | JSChildNode
+ if (!isString(first) && first.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+ first.properties.unshift(prop)
+ } else {
+ props.arguments.unshift(createObjectExpression([prop]))
+ }
+ return props
+ } else if (props.type === NodeTypes.JS_OBJECT_EXPRESSION) {
+ props.properties.unshift(prop)
+ return props
+ } else {
+ // single v-bind with expression, return a merged replacement
+ return createCallExpression(context.helper(MERGE_PROPS), [
+ createObjectExpression([prop]),
+ props
+ ])
+ }
+}
import { Slot } from '../componentSlots'
-import { VNodeChildren } from '../vnode'
+import {
+ VNodeChildren,
+ openBlock,
+ createBlock,
+ Fragment,
+ VNode
+} from '../vnode'
export function renderSlot(
slot: Slot | undefined,
props: any = {},
// this is not a user-facing function, so the fallback is always generated by
- // the compiler.
- fallback?: string | VNodeChildren
-): string | VNodeChildren | null {
- return slot ? slot() : fallback || null
+ // the compiler and gurunteed to be an array
+ fallback?: VNodeChildren
+): VNode {
+ return (
+ openBlock(),
+ createBlock(
+ Fragment,
+ { key: props.key },
+ slot ? slot(props) : fallback || []
+ )
+ )
}
projects / thirdparty / vuejs / core.git / commitdiff
