feat: basic provide/inject

Author: lishiwen

example/provide-inject/Consumer.js

@@ -1,17 +1,26 @@
-import { h, inject } from "../../lib/m-vue.esm.js";
+import { createTextVNode, h, inject } from "../../lib/m-vue.esm.js";
 
 export default {
   name: "Consumer",
 
   render() {
-    return h("span", {}, `inject value: ${this.bar}`);
+    return h("span", {}, [
+      createTextVNode(`inject value: ${this.bar}`),
+      h("div", {}, `当前的Count: ${this.count}`),
+      createTextVNode("第二层提供的 inject value:" + this.two),
+    ]);
   },
 
   setup() {
     const bar = inject("bar");
+    const two = inject("two");
+
+    const count = inject("count");
 
     return {
       bar,
+      two,
+      count,
     };
   },
 };

example/provide-inject/ProvideTwo.js

@@ -0,0 +1,20 @@
+import { createTextVNode, h, provide, inject } from "../../lib/m-vue.esm.js";
+import Consumer from "./Consumer.js";
+
+export default {
+  name: "ProviderTwo",
+
+  render() {
+    return h("div", {}, [h("div", {}, "bar: " + this.bar), h(Consumer)]);
+  },
+
+  setup() {
+    provide("two", "twosss");
+    provide("bar", "two bar");
+    const bar = inject("bar");
+
+    return {
+      bar,
+    };
+  },
+};

example/provide-inject/Provider.js

@@ -1,11 +1,11 @@
 import { h, provide } from "../../lib/m-vue.esm.js";
-import Consumer from "./Consumer.js";
+import ProvideTwo from "./ProvideTwo.js";
 
 export default {
   name: "Provider",
 
   render() {
-    return h("div", {}, [h(Consumer)]);
+    return h("div", {}, [h(ProvideTwo)]);
   },
 
   setup() {

lib/m-vue.cjs.js

@@ -245,7 +245,7 @@ function createComponentInstance(vnode, parent) {
         props: {},
         slots: {},
         parent,
-        provides: {},
+        provides: parent ? parent.provides : {},
         emit: (instance, event) => { },
     };
     // 官方Emit
@@ -420,16 +420,20 @@ function renderSlots(slots, renderName, props = {}) {
 function provide(key, value) {
     const currentInstance = getCurrentInstance();
     if (currentInstance) {
-        mountProvide(currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.provides, key, value);
+        let { provides } = currentInstance;
+        const parentProvides = currentInstance.parent.provides;
+        // init
+        if (provides === parentProvides) {
+            provides = currentInstance.provides = Object.create(parentProvides);
+        }
+        provides[key] = value;
     }
 }
-function mountProvide(target, key, value) {
-    target[key] = value;
-}
 function inject(key) {
     const currentInstance = getCurrentInstance();
     if (currentInstance) {
         const parentProvides = currentInstance.parent.provides;
+        console.log(key, parentProvides);
         return parentProvides[key];
     }
 }

lib/m-vue.esm.js

@@ -241,7 +241,7 @@ function createComponentInstance(vnode, parent) {
         props: {},
         slots: {},
         parent,
-        provides: {},
+        provides: parent ? parent.provides : {},
         emit: (instance, event) => { },
     };
     // 官方Emit
@@ -416,16 +416,20 @@ function renderSlots(slots, renderName, props = {}) {
 function provide(key, value) {
     const currentInstance = getCurrentInstance();
     if (currentInstance) {
-        mountProvide(currentInstance === null || currentInstance === void 0 ? void 0 : currentInstance.provides, key, value);
+        let { provides } = currentInstance;
+        const parentProvides = currentInstance.parent.provides;
+        // init
+        if (provides === parentProvides) {
+            provides = currentInstance.provides = Object.create(parentProvides);
+        }
+        provides[key] = value;
     }
 }
-function mountProvide(target, key, value) {
-    target[key] = value;
-}
 function inject(key) {
     const currentInstance = getCurrentInstance();
     if (currentInstance) {
         const parentProvides = currentInstance.parent.provides;
+        console.log(key, parentProvides);
         return parentProvides[key];
     }
 }

src/runtime-core/component.ts

@@ -20,7 +20,7 @@ export function createComponentInstance(vnode, parent) {
         props: {},
         slots: {},
         parent,
-        provides: {},
+        provides: parent ? parent.provides : {},
         emit: (instance, event) => { },
     };
 

src/runtime-core/inject.ts

@@ -7,17 +7,23 @@ import { getCurrentInstance } from "./component";
 export function provide(key, value) {
     const currentInstance: any = getCurrentInstance();
     if (currentInstance) {
-        mountProvide(currentInstance?.provides, key, value)
+        let { provides } = currentInstance;
+        const parentProvides = currentInstance.parent.provides;
+
+        // init
+        if (provides === parentProvides) {
+            provides = currentInstance.provides = Object.create(parentProvides);
+        }
+
+        provides[key] = value;
     }
 }
-function mountProvide(target, key, value) {
-    target[key] = value;
-}
 
 export function inject(key) {
     const currentInstance: any = getCurrentInstance();
     if (currentInstance) {
         const parentProvides = currentInstance.parent.provides;
+        console.log(key, parentProvides)
         return parentProvides[key];
     }
 }