fix(slots): compiled slot fallback should be functions (#1030)

This avoids it being collected as dynamic children when it's not used.

fix #1021
This commit is contained in:
underfin 2020-04-23 04:52:41 +08:00 committed by GitHub
parent ff4d1fcd81
commit 2b19965bcf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 46 additions and 29 deletions

View File

@ -216,12 +216,16 @@ describe('compiler: transform <slot> outlets', () => {
`$slots`, `$slots`,
`"default"`, `"default"`,
`{}`, `{}`,
[ {
{ type: NodeTypes.JS_FUNCTION_EXPRESSION,
type: NodeTypes.ELEMENT, params: [],
tag: `div` returns: [
} {
] type: NodeTypes.ELEMENT,
tag: `div`
}
]
}
] ]
}) })
}) })
@ -235,12 +239,16 @@ describe('compiler: transform <slot> outlets', () => {
`$slots`, `$slots`,
`"foo"`, `"foo"`,
`{}`, `{}`,
[ {
{ type: NodeTypes.JS_FUNCTION_EXPRESSION,
type: NodeTypes.ELEMENT, params: [],
tag: `div` returns: [
} {
] type: NodeTypes.ELEMENT,
tag: `div`
}
]
}
] ]
}) })
}) })
@ -268,12 +276,16 @@ describe('compiler: transform <slot> outlets', () => {
} }
] ]
}, },
[ {
{ type: NodeTypes.JS_FUNCTION_EXPRESSION,
type: NodeTypes.ELEMENT, params: [],
tag: `div` returns: [
} {
] type: NodeTypes.ELEMENT,
tag: `div`
}
]
}
] ]
}) })
}) })
@ -301,12 +313,16 @@ describe('compiler: transform <slot> outlets', () => {
} }
] ]
}, },
[ {
{ type: NodeTypes.JS_FUNCTION_EXPRESSION,
type: NodeTypes.ELEMENT, params: [],
tag: `div` returns: [
} {
] type: NodeTypes.ELEMENT,
tag: `div`
}
]
}
] ]
}) })
}) })

View File

@ -4,7 +4,8 @@ import {
CallExpression, CallExpression,
createCallExpression, createCallExpression,
ExpressionNode, ExpressionNode,
SlotOutletNode SlotOutletNode,
createFunctionExpression
} from '../ast' } from '../ast'
import { isSlotOutlet, findProp } from '../utils' import { isSlotOutlet, findProp } from '../utils'
import { buildProps, PropsExpression } from './transformElement' import { buildProps, PropsExpression } from './transformElement'
@ -29,7 +30,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => {
if (!slotProps) { if (!slotProps) {
slotArgs.push(`{}`) slotArgs.push(`{}`)
} }
slotArgs.push(children) slotArgs.push(createFunctionExpression([], children, false, false, loc))
} }
node.codegenNode = createCallExpression( node.codegenNode = createCallExpression(

View File

@ -15,8 +15,8 @@ export function renderSlot(
name: string, name: string,
props: Data = {}, props: Data = {},
// this is not a user-facing function, so the fallback is always generated by // this is not a user-facing function, so the fallback is always generated by
// the compiler and guaranteed to be an array // the compiler and guaranteed to be a function returning an array
fallback?: VNodeArrayChildren fallback?: () => VNodeArrayChildren
): VNode { ): VNode {
let slot = slots[name] let slot = slots[name]
@ -34,7 +34,7 @@ export function renderSlot(
createBlock( createBlock(
Fragment, Fragment,
{ key: props.key }, { key: props.key },
slot ? slot(props) : fallback || [], slot ? slot(props) : fallback ? fallback() : [],
slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL
) )
) )