From: underfin <2218301630@qq.com>
Date: Wed, 22 Apr 2020 20:52:41 +0000 (+0800)
Subject: fix(slots): compiled slot fallback should be functions (#1030)
X-Git-Tag: v3.0.0-beta.4~14
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2b19965bcf75d981400ed58a0348bcfc13f17e33;p=thirdparty%2Fvuejs%2Fcore.git

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

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

fix #1021
---

diff --git a/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts b/packages/compiler-core/__tests__/transforms/transformSlotOutlet.spec.ts
index 1bcd52d0ea..d5e9f75758 100644
--- 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
index da8ab81321..58ef0b2f48 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 12f4b18d06..c0bfcaa7bf 100644
--- 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
     )
   )