is slots children

Author: lishiwen

src/runtime-core/componentSlots.ts

@@ -1,14 +1,24 @@
-import { isArray, isStructObject } from "../shared/type";
+import { ShapeFlags } from "../shared/ShapeFlags";
+import { isArray, isFunction, isStructObject } from "../shared/type";
 
 export function initSlots(instance, instanceChildren) {
-    instance.slots = normalizeObjectSlots(instanceChildren);
+    if (instance.vnode.shapeFlag & ShapeFlags.SLOT_CHILDREN) {
+        instance.slots = normalizeObjectSlots(instanceChildren);
+    }
 };
 
 export function normalizeObjectSlots(instanceChildren) {
     let slots = {};
     if (isStructObject(instanceChildren)) {
         for (const key in instanceChildren) {
-            slots[key] = normalizeSlot(instanceChildren[key]);
+            // NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
+            if (isStructObject(instanceChildren[key])) {
+                slots[key] = (props) => normalizeSlot(instanceChildren[key]);
+            }
+
+            if (isFunction(instanceChildren[key])) {
+                slots[key] = (props) => normalizeSlot(instanceChildren[key](props));
+            }
         }
     };
     return slots;

src/runtime-core/createVNode.ts

@@ -1,5 +1,5 @@
 import { ShapeFlags } from "../shared/ShapeFlags";
-import { isArray, isString } from "../shared/type";
+import { isArray, isString, isStructObject } from "../shared/type";
 
 export function createVNode(type, props?, children?) {
     const vnode = {
@@ -28,4 +28,9 @@ function childrenShapeFlag(vNode) {
     if (isArray(vNode.children)) {
         vNode.shapeFlag |= ShapeFlags.ARRAY_CHILDREN;
     }
+
+    // slots children
+    if (vNode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT && isStructObject(vNode.children)) {
+        vNode.shapeFlag |= ShapeFlags.SLOT_CHILDREN;
+    }
 }

src/runtime-core/helper/renderSlots.ts

@@ -1,8 +1,15 @@
-import { hasOwnProperty } from "../../shared/index";
+import { hasOwnProperty, isFunction, isStructObject } from "../../shared/index";
 import { createVNode } from "../createVNode";
 
-export function renderSlots(slots, renderName) {
+export function renderSlots(slots, renderName, props = {}) {
     if (hasOwnProperty(slots, renderName)) {
-        return createVNode('span', null, slots[renderName]);
+        if (isFunction(slots[renderName])) {
+            const realSlot = slots[renderName]?.(props);
+            return createVNode('span', null, realSlot);
+        }
+        // NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
+        if (isStructObject(slots[renderName])) {
+            return createVNode('span', null, slots[renderName]);
+        }
     }
 }

src/shared/ShapeFlags.ts

@@ -3,4 +3,5 @@ export const enum ShapeFlags {
     STATEFUL_COMPONENT = 1 << 1, // 0010
     TEXT_CHILDREN = 1 << 2, // 0100
     ARRAY_CHILDREN = 1 << 3, // 1000
+    SLOT_CHILDREN = 1 << 4, // 0001 0000
 }