is slots children example

stevenleep · Jul 6, 2022 · 235d951 · 235d951
1 parent b79268d
commit 235d951
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 13 deletions.
diff --git a/example/slots-simple/App.js b/example/slots-simple/App.js
@@ -5,15 +5,16 @@ import BarInstance from "./Bar.js";
 export default {
   render() {
     const Bar = h(BarInstance);
-
     // NOTE: slot example
     const Slot = h(
       SlotInstance,
       {},
       // 在Slot Children设置Slot Component, 期望可以在内部显示出来
       {
-        header: h("span", {}, "Header"),
-        footer: h("span", {}, "Footer"),
+        header: ({ count }) => h("span", {}, "Header " + count),
+        footer: ({ clickedNumbers }) =>
+          h("span", {}, "Footer" + clickedNumbers),
+        content: h("span", {}, "Original"),
       }
     );
     return h("div", {}, [Bar, Slot]);

diff --git a/example/slots-simple/Slot.js b/example/slots-simple/Slot.js
@@ -3,11 +3,16 @@ import { h, renderSlots } from "../../lib/m-vue.esm.js";
 export default {
   render() {
     const originalContent = h("div", {}, "这是原来的内容");
+    const count = 10;
+    const clickedNumbers = 2000;
+
     return h("div", {}, [
-      renderSlots(this.$slots, "header"),
+      renderSlots(this.$slots, "header", { count }),
       originalContent,
-      renderSlots(this.$slots, "footer"),
+      renderSlots(this.$slots, "content"),
+      renderSlots(this.$slots, "footer", { clickedNumbers }),
     ]);
   },
+
   setup() {},
 };
diff --git a/lib/m-vue.cjs.js b/lib/m-vue.cjs.js
@@ -8,6 +8,9 @@ function isObject(value) {
 function isStructObject(value) {
     return Object.prototype.toString.call(value) === "[object Object]";
 }
+function isFunction(value) {
+    return Object.prototype.toString.call(value) === "[object Function]";
+}
 function isArray(value) {
     return Object.prototype.toString.call(value) === "[object Array]";
 }
@@ -38,6 +41,10 @@ function childrenShapeFlag(vNode) {
     if (isArray(vNode.children)) {
         vNode.shapeFlag |= 8 /* ShapeFlags.ARRAY_CHILDREN */;
     }
+    // slots children
+    if (vNode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */ && isStructObject(vNode.children)) {
+        vNode.shapeFlag |= 16 /* ShapeFlags.SLOT_CHILDREN */;
+    }
 }
 
 function hasOwnProperty(originObject, property) {
@@ -191,13 +198,21 @@ const ComponentPublicInstanceHandlers = {
 };
 
 function initSlots(instance, instanceChildren) {
-    instance.slots = normalizeObjectSlots(instanceChildren);
+    if (instance.vnode.shapeFlag & 16 /* ShapeFlags.SLOT_CHILDREN */) {
+        instance.slots = normalizeObjectSlots(instanceChildren);
+    }
 }
 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;
@@ -341,9 +356,17 @@ function h(type, props, children) {
     return createVNode(type, props, children);
 }
 
-function renderSlots(slots, renderName) {
+function renderSlots(slots, renderName, props = {}) {
+    var _a;
     if (hasOwnProperty(slots, renderName)) {
-        return createVNode('span', null, slots[renderName]);
+        if (isFunction(slots[renderName])) {
+            const realSlot = (_a = slots[renderName]) === null || _a === void 0 ? void 0 : _a.call(slots, props);
+            return createVNode('span', null, realSlot);
+        }
+        // NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
+        if (isStructObject(slots[renderName])) {
+            return createVNode('span', null, slots[renderName]);
+        }
     }
 }
 

diff --git a/lib/m-vue.esm.js b/lib/m-vue.esm.js
@@ -4,6 +4,9 @@ function isObject(value) {
 function isStructObject(value) {
     return Object.prototype.toString.call(value) === "[object Object]";
 }
+function isFunction(value) {
+    return Object.prototype.toString.call(value) === "[object Function]";
+}
 function isArray(value) {
     return Object.prototype.toString.call(value) === "[object Array]";
 }
@@ -34,6 +37,10 @@ function childrenShapeFlag(vNode) {
     if (isArray(vNode.children)) {
         vNode.shapeFlag |= 8 /* ShapeFlags.ARRAY_CHILDREN */;
     }
+    // slots children
+    if (vNode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */ && isStructObject(vNode.children)) {
+        vNode.shapeFlag |= 16 /* ShapeFlags.SLOT_CHILDREN */;
+    }
 }
 
 function hasOwnProperty(originObject, property) {
@@ -187,13 +194,21 @@ const ComponentPublicInstanceHandlers = {
 };
 
 function initSlots(instance, instanceChildren) {
-    instance.slots = normalizeObjectSlots(instanceChildren);
+    if (instance.vnode.shapeFlag & 16 /* ShapeFlags.SLOT_CHILDREN */) {
+        instance.slots = normalizeObjectSlots(instanceChildren);
+    }
 }
 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;
@@ -337,9 +352,17 @@ function h(type, props, children) {
     return createVNode(type, props, children);
 }
 
-function renderSlots(slots, renderName) {
+function renderSlots(slots, renderName, props = {}) {
+    var _a;
     if (hasOwnProperty(slots, renderName)) {
-        return createVNode('span', null, slots[renderName]);
+        if (isFunction(slots[renderName])) {
+            const realSlot = (_a = slots[renderName]) === null || _a === void 0 ? void 0 : _a.call(slots, props);
+            return createVNode('span', null, realSlot);
+        }
+        // NOTE: 这是自己增加到扩展，我需要支持slot无参数的情况
+        if (isStructObject(slots[renderName])) {
+            return createVNode('span', null, slots[renderName]);
+        }
     }
 }