added slots

Author: lishiwen

src/runtime-core/component.ts

@@ -3,6 +3,7 @@ import { isStructObject } from "../shared/type";
 import { emit, extendRuntimeInstance } from "./componentEmit";
 import { initProps } from "./componentProps";
 import { ComponentPublicInstanceHandlers } from "./componentPublicInstance";
+import { initSlots } from "./componentSlots";
 
 // TODO: runtime instance extend
 // NOTE: 这是自己扩展的
@@ -15,6 +16,7 @@ export function createComponentInstance(vnode) {
         type: vnode.type,
         setupState: {},
         props: {},
+        slots: {},
         emit: (instance, event) => { },
     };
 
@@ -30,7 +32,7 @@ export function createComponentInstance(vnode) {
 
 export function setupComponent(instance) {
     initProps(instance, instance.vnode.props);
-    // initSlots();
+    initSlots(instance, instance.vnode.children);
     setupStatefulComponent(instance);
 }
 

src/runtime-core/componentEmit.ts

@@ -14,11 +14,9 @@ export function emit(instance, eventProperty, ...args) {
 
 // TODO: 运行时扩展实例
 export function extendRuntimeInstance(instance, extendApis = {}) {
-    console.log("extendApis", extendApis);
     // XXX: 临时解决方案
     // TODO: 待完善扩展实例
     Object.keys(extendApis).forEach(key => {
         instance[key] = extendApis[key];
-        console.log(key, extendApis[key])
     });
 }

src/runtime-core/componentPublicInstance.ts

@@ -1,7 +1,8 @@
 import { hasOwnProperty } from "../shared/index";
 
 export const PublicPropertiesMaps = {
-    "$el": (instance) => instance.vnode.el,
+    $el: (instance) => instance.vnode.el,
+    $slots: (instance) => instance.slots,
 };
 export const ComponentPublicInstanceHandlers = {
     get({ _instance }, key) {

src/runtime-core/componentSlots.ts

@@ -0,0 +1,3 @@
+export function initSlots(instance, instanceChildren) {
+    instance.slots = instanceChildren || [];
+}

src/runtime-core/render.ts

@@ -72,7 +72,7 @@ function addAttrs(vnode, container) {
 }
 
 function setupRenderEffect(instance, container, initialVNode) {
-    const subTree = instance.render.call(instance.proxy);
+    const subTree = instance?.render.call(instance.proxy);
     patch(subTree, container);
 
     initialVNode.el = subTree.el;