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

This avoids it being collected as dynamic children when it's not used. fix #1021
vuejs · Apr 22, 2020 · 2b19965 · 2b19965
1 parent ff4d1fc
commit 2b19965
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
@@ -216,12 +216,16 @@ describe('compiler: transform <slot> outlets', () => {
  `$slots`,
  `"default"`,
  `{}`,
- [
- {
- type: NodeTypes.ELEMENT,
- tag: `div`
- }
- ]
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ params: [],
+ returns: [
+ {
+ type: NodeTypes.ELEMENT,
+ tag: `div`
+ }
+ ]
+ }
  ]
  })
  })
@@ -235,12 +239,16 @@ describe('compiler: transform <slot> outlets', () => {
  `$slots`,
  `"foo"`,
  `{}`,
- [
- {
- type: NodeTypes.ELEMENT,
- tag: `div`
- }
- ]
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ params: [],
+ returns: [
+ {
+ type: NodeTypes.ELEMENT,
+ tag: `div`
+ }
+ ]
+ }
  ]
  })
  })
@@ -268,12 +276,16 @@ describe('compiler: transform <slot> outlets', () => {
  }
  ]
  },
- [
- {
- type: NodeTypes.ELEMENT,
- tag: `div`
- }
- ]
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ params: [],
+ returns: [
+ {
+ type: NodeTypes.ELEMENT,
+ tag: `div`
+ }
+ ]
+ }
  ]
  })
  })
@@ -301,12 +313,16 @@ describe('compiler: transform <slot> outlets', () => {
  }
  ]
  },
- [
- {
- type: NodeTypes.ELEMENT,
- tag: `div`
- }
- ]
+ {
+ type: NodeTypes.JS_FUNCTION_EXPRESSION,
+ 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
@@ -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
@@ -15,8 +15,8 @@ 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
- fallback?: VNodeArrayChildren
+ // 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 || [],
+ slot ? slot(props) : fallback ? fallback() : [],
  slots._ ? PatchFlags.STABLE_FRAGMENT : PatchFlags.BAIL
  )
  )