feat(compiler): mark compiler-generated slots for runtime

This commit is contained in:
Evan You 2019-10-03 14:08:14 -04:00
parent aa9245d55c
commit 306c22efe1
4 changed files with 48 additions and 27 deletions

View File

@ -9,7 +9,8 @@ return function render() {
return (openBlock(), createBlock(_component_Comp, null, { return (openBlock(), createBlock(_component_Comp, null, {
[_ctx.one]: ({ foo }) => [toString(foo), toString(_ctx.bar)], [_ctx.one]: ({ foo }) => [toString(foo), toString(_ctx.bar)],
[_ctx.two]: ({ bar }) => [toString(_ctx.foo), toString(bar)] [_ctx.two]: ({ bar }) => [toString(_ctx.foo), toString(bar)],
_compiled: true
}, 256 /* DYNAMIC_SLOTS */)) }, 256 /* DYNAMIC_SLOTS */))
}" }"
`; `;
@ -22,7 +23,8 @@ return function render() {
const _component_Comp = resolveComponent(\\"Comp\\") const _component_Comp = resolveComponent(\\"Comp\\")
return (openBlock(), createBlock(_component_Comp, null, { return (openBlock(), createBlock(_component_Comp, null, {
default: ({ foo }) => [toString(foo), toString(_ctx.bar)] default: ({ foo }) => [toString(foo), toString(_ctx.bar)],
_compiled: true
})) }))
}" }"
`; `;
@ -37,7 +39,8 @@ return function render() {
return (openBlock(), createBlock(_component_Comp, null, { return (openBlock(), createBlock(_component_Comp, null, {
default: () => [ default: () => [
createVNode(\\"div\\") createVNode(\\"div\\")
] ],
_compiled: true
})) }))
}" }"
`; `;
@ -49,7 +52,7 @@ return function render() {
const _ctx = this const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\") const _component_Comp = resolveComponent(\\"Comp\\")
return (openBlock(), createBlock(_component_Comp, null, createSlots({}, [ return (openBlock(), createBlock(_component_Comp, null, createSlots({ _compiled: true }, [
renderList(_ctx.list, (name) => { renderList(_ctx.list, (name) => {
return { return {
name: name, name: name,
@ -67,7 +70,7 @@ return function render() {
const _ctx = this const _ctx = this
const _component_Comp = resolveComponent(\\"Comp\\") const _component_Comp = resolveComponent(\\"Comp\\")
return (openBlock(), createBlock(_component_Comp, null, createSlots({}, [ return (openBlock(), createBlock(_component_Comp, null, createSlots({ _compiled: true }, [
(_ctx.ok) (_ctx.ok)
? { ? {
name: \\"one\\", name: \\"one\\",
@ -87,7 +90,7 @@ return function render() {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({}, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _compiled: true }, [
ok ok
? { ? {
name: \\"one\\", name: \\"one\\",
@ -116,7 +119,7 @@ return function render() {
const _component_Comp = _resolveComponent(\\"Comp\\") const _component_Comp = _resolveComponent(\\"Comp\\")
return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({}, [ return (_openBlock(), _createBlock(_component_Comp, null, _createSlots({ _compiled: true }, [
ok ok
? { ? {
name: \\"one\\", name: \\"one\\",
@ -137,7 +140,8 @@ return function render() {
return (openBlock(), createBlock(_component_Comp, null, { return (openBlock(), createBlock(_component_Comp, null, {
one: ({ foo }) => [toString(foo), toString(_ctx.bar)], one: ({ foo }) => [toString(foo), toString(_ctx.bar)],
two: ({ bar }) => [toString(_ctx.foo), toString(bar)] two: ({ bar }) => [toString(_ctx.foo), toString(bar)],
_compiled: true
})) }))
}" }"
`; `;
@ -153,12 +157,14 @@ return function render() {
return (openBlock(), createBlock(_component_Comp, null, { return (openBlock(), createBlock(_component_Comp, null, {
default: ({ foo }) => [ default: ({ foo }) => [
createVNode(_component_Inner, null, { createVNode(_component_Inner, null, {
default: ({ bar }) => [toString(foo), toString(bar), toString(_ctx.baz)] default: ({ bar }) => [toString(foo), toString(bar), toString(_ctx.baz)],
_compiled: true
}), }),
toString(foo), toString(foo),
toString(_ctx.bar), toString(_ctx.bar),
toString(_ctx.baz) toString(_ctx.baz)
] ],
_compiled: true
})) }))
}" }"
`; `;

View File

@ -43,17 +43,22 @@ function parseWithSlots(template: string, options: CompilerOptions = {}) {
function createSlotMatcher(obj: Record<string, any>) { function createSlotMatcher(obj: Record<string, any>) {
return { return {
type: NodeTypes.JS_OBJECT_EXPRESSION, type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: Object.keys(obj).map(key => { properties: Object.keys(obj)
return { .map(key => {
type: NodeTypes.JS_PROPERTY, return {
key: { type: NodeTypes.JS_PROPERTY,
type: NodeTypes.SIMPLE_EXPRESSION, key: {
isStatic: !/^\[/.test(key), type: NodeTypes.SIMPLE_EXPRESSION,
content: key.replace(/^\[|\]$/g, '') isStatic: !/^\[/.test(key),
}, content: key.replace(/^\[|\]$/g, '')
value: obj[key] },
} value: obj[key]
}) } as any
})
.concat({
key: { content: `_compiled` },
value: { content: `true` }
})
} }
} }
@ -330,7 +335,9 @@ describe('compiler: transform component slots', () => {
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${CREATE_SLOTS}`, callee: `_${CREATE_SLOTS}`,
arguments: [ arguments: [
createObjectMatcher({}), createObjectMatcher({
_compiled: `[true]`
}),
{ {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [ elements: [
@ -370,7 +377,9 @@ describe('compiler: transform component slots', () => {
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: CREATE_SLOTS, callee: CREATE_SLOTS,
arguments: [ arguments: [
createObjectMatcher({}), createObjectMatcher({
_compiled: `[true]`
}),
{ {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [ elements: [
@ -417,7 +426,9 @@ describe('compiler: transform component slots', () => {
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: `_${CREATE_SLOTS}`, callee: `_${CREATE_SLOTS}`,
arguments: [ arguments: [
createObjectMatcher({}), createObjectMatcher({
_compiled: `[true]`
}),
{ {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [ elements: [
@ -474,7 +485,9 @@ describe('compiler: transform component slots', () => {
type: NodeTypes.JS_CALL_EXPRESSION, type: NodeTypes.JS_CALL_EXPRESSION,
callee: CREATE_SLOTS, callee: CREATE_SLOTS,
arguments: [ arguments: [
createObjectMatcher({}), createObjectMatcher({
_compiled: `[true]`
}),
{ {
type: NodeTypes.JS_ARRAY_EXPRESSION, type: NodeTypes.JS_ARRAY_EXPRESSION,
elements: [ elements: [

View File

@ -264,7 +264,9 @@ export function buildSlots(
} }
let slots: ObjectExpression | CallExpression = createObjectExpression( let slots: ObjectExpression | CallExpression = createObjectExpression(
slotsProperties, slotsProperties.concat(
createObjectProperty(`_compiled`, createSimpleExpression(`true`, false))
),
loc loc
) )
if (dynamicSlots.length) { if (dynamicSlots.length) {

View File

@ -42,7 +42,7 @@ export function resolveSlots(
) { ) {
let slots: Slots | void let slots: Slots | void
if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) { if (instance.vnode.shapeFlag & ShapeFlags.SLOTS_CHILDREN) {
if ((children as any)._normalized) { if ((children as any)._compiled) {
// pre-normalized slots object generated by compiler // pre-normalized slots object generated by compiler
slots = children as Slots slots = children as Slots
} else { } else {