From 1a45f526b38a1ca41252a42ba6292234976b46b7 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 22 Apr 2020 23:11:32 +0800 Subject: [PATCH 1/4] fix: slotOutlet fallback should include an function fix #1021 --- .../transforms/transformSlotOutlet.spec.ts | 60 +++++++++++-------- .../src/transforms/transformSlotOutlet.ts | 5 +- .../runtime-core/src/helpers/renderSlot.ts | 4 +- 3 files changed, 41 insertions(+), 28 deletions(-) diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts index 1bcd52d0ea9..a966a4db549 100644 --- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts @@ -216,12 +216,15 @@ describe('compiler: transform outlets', () => { `$slots`, `"default"`, `{}`, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -235,12 +238,15 @@ describe('compiler: transform outlets', () => { `$slots`, `"foo"`, `{}`, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -268,12 +274,15 @@ describe('compiler: transform outlets', () => { } ] }, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) @@ -301,12 +310,15 @@ describe('compiler: transform outlets', () => { } ] }, - [ - { - type: NodeTypes.ELEMENT, - tag: `div` - } - ] + { + params: [], + returns: [ + { + type: NodeTypes.ELEMENT, + tag: `div` + } + ] + } ] }) }) diff --git a/packages/compiler-core/src/transforms/transformSlotOutlet.ts b/packages/compiler-core/src/transforms/transformSlotOutlet.ts index da8ab813210..58ef0b2f488 100644 --- a/packages/compiler-core/src/transforms/transformSlotOutlet.ts +++ b/packages/compiler-core/src/transforms/transformSlotOutlet.ts @@ -4,7 +4,8 @@ import { CallExpression, createCallExpression, ExpressionNode, - SlotOutletNode + SlotOutletNode, + createFunctionExpression } from '../ast' import { isSlotOutlet, findProp } from '../utils' import { buildProps, PropsExpression } from './transformElement' @@ -29,7 +30,7 @@ export const transformSlotOutlet: NodeTransform = (node, context) => { if (!slotProps) { slotArgs.push(`{}`) } - slotArgs.push(children) + slotArgs.push(createFunctionExpression([], children, false, false, loc)) } node.codegenNode = createCallExpression( diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts index 12f4b18d061..9ce10f6fe05 100644 --- a/packages/runtime-core/src/helpers/renderSlot.ts +++ b/packages/runtime-core/src/helpers/renderSlot.ts @@ -16,7 +16,7 @@ export function renderSlot( props: Data = {}, // this is not a user-facing function, so the fallback is always generated by // the compiler and guaranteed to be an array - fallback?: VNodeArrayChildren + fallback?: () => VNodeArrayChildren ): VNode { let slot = slots[name] @@ -34,7 +34,7 @@ export function renderSlot( createBlock( Fragment, { key: props.key }, - slot ? slot(props) : fallback || [], + slot ? slot(props) : fallback ? fallback() : [], slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL ) ) From b8c5f7ae286ee9ae2d71515c473252879e0a5c06 Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 22 Apr 2020 23:15:49 +0800 Subject: [PATCH 2/4] fix: should check fallback parameter --- packages/runtime-core/src/helpers/renderSlot.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts index 9ce10f6fe05..bf45b64def9 100644 --- a/packages/runtime-core/src/helpers/renderSlot.ts +++ b/packages/runtime-core/src/helpers/renderSlot.ts @@ -7,7 +7,7 @@ import { Fragment, VNode } from '../vnode' -import { PatchFlags } from '@vue/shared' +import { isFunction, PatchFlags } from '@vue/shared' import { warn } from '../warning' export function renderSlot( @@ -34,7 +34,7 @@ export function renderSlot( createBlock( Fragment, { key: props.key }, - slot ? slot(props) : fallback ? fallback() : [], + slot ? slot(props) : fallback && isFunction(fallback) ? fallback() : [], slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL ) ) From 5664858f477019e04ad9d228444518cd43cfb79e Mon Sep 17 00:00:00 2001 From: likui <2218301630@qq.com> Date: Wed, 22 Apr 2020 23:55:15 +0800 Subject: [PATCH 3/4] test: add expression type --- .../__tests__/transforms/transformSlotOutlet.spec.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts index a966a4db549..d5e9f757582 100644 --- a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts +++ b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts @@ -217,6 +217,7 @@ describe('compiler: transform outlets', () => { `"default"`, `{}`, { + type: NodeTypes.JS_FUNCTION_EXPRESSION, params: [], returns: [ { @@ -239,6 +240,7 @@ describe('compiler: transform outlets', () => { `"foo"`, `{}`, { + type: NodeTypes.JS_FUNCTION_EXPRESSION, params: [], returns: [ { @@ -275,6 +277,7 @@ describe('compiler: transform outlets', () => { ] }, { + type: NodeTypes.JS_FUNCTION_EXPRESSION, params: [], returns: [ { @@ -311,6 +314,7 @@ describe('compiler: transform outlets', () => { ] }, { + type: NodeTypes.JS_FUNCTION_EXPRESSION, params: [], returns: [ { From 5720cb16faaa0ea77f833ddac5b20032346f8696 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 22 Apr 2020 16:50:08 -0400 Subject: [PATCH 4/4] Update renderSlot.ts --- packages/runtime-core/src/helpers/renderSlot.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts index bf45b64def9..c0bfcaa7bf0 100644 --- a/packages/runtime-core/src/helpers/renderSlot.ts +++ b/packages/runtime-core/src/helpers/renderSlot.ts @@ -7,7 +7,7 @@ import { Fragment, VNode } from '../vnode' -import { isFunction, PatchFlags } from '@vue/shared' +import { PatchFlags } from '@vue/shared' import { warn } from '../warning' export function renderSlot( @@ -15,7 +15,7 @@ export function renderSlot( name: string, props: Data = {}, // 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 ): VNode { let slot = slots[name] @@ -34,7 +34,7 @@ export function renderSlot( createBlock( Fragment, { key: props.key }, - slot ? slot(props) : fallback && isFunction(fallback) ? fallback() : [], + slot ? slot(props) : fallback ? fallback() : [], slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL ) )