Merge pull request #159 from Ubugeeei/158-provide-inject-for-vapor

feat: #158 💪 provide/inject between VaporComponent and Component

example/vapor/src/App.vue

@@ -1,11 +1,12 @@
 <script>
-import { defineComponent, ref } from "chibivue";
+import { defineComponent, ref, provide } from "chibivue";
 import MyVaporComponent from "./MyComponent.vapor";
 
 export default defineComponent({
   components: { MyVaporComponent },
   setup() {
     const count = ref(0);
+    provide("App.vue count", count);
     return { count };
   },
 });

example/vapor/src/Counter.vue

@@ -1,10 +1,14 @@
 <script setup>
-import { ref } from "chibivue";
+import { ref, inject } from "chibivue";
 const count = ref(0);
+const appVueCount = inject("App.vue count");
 </script>
 
 <template>
   <div>
-    <button @click="count++">Counter.vue (in MyComponent.vapor) {{ count }}</button>
+    <button @click="count++">
+      Counter.vue (in MyComponent.vapor) {{ count }}
+    </button>
+    <button @click="appVueCount++">parent-count-incrementor</button>
   </div>
 </template>

example/vapor/src/MyComponent.vapor.ts

@@ -1,19 +1,39 @@
-import { effect, h, onMounted, onBeforeMount, ref } from "chibivue";
-import { template, setText, on, createComponent } from "chibivue/vapor";
+import {
+  type Ref,
+  effect,
+  h,
+  onMounted,
+  onBeforeMount,
+  ref,
+  inject,
+} from "chibivue";
+
+import {
+  type VaporComponent,
+  template,
+  setText,
+  on,
+  createComponent,
+} from "chibivue/vapor";
 
 // @ts-ignore
 import Counter from "./Counter.vue";
 
 const t0 = () => template('<div><button id="btn-on-vapor">');
 
-export default () => {
+const t1 = () =>
+  template('<button id="parent-count-incrementor">parent-count-incrementor');
+
+export default ((self) => {
   /*
    *
    * compiled from scripts
    *
    */
   const count = ref(0);
 
+  const appVueCount = inject<Ref<number>>("App.vue count")!;
+
   onBeforeMount(() => {
     console.log("before mount", document.getElementById("btn-on-vapor"));
   });
@@ -29,17 +49,18 @@ export default () => {
    */
   const div = t0();
 
-  const button = div.firstChild as Element;
-
+  const button0 = div.firstChild as Element;
   const _button_text = "MyComponent.vapor (in App.vue) {}";
-
   effect(() => {
-    setText(button, _button_text, count.value);
+    setText(button0, _button_text, count.value);
   });
+  on(button0, "click", () => count.value++);
 
-  on(button, "click", () => count.value++);
+  const button1 = t1();
+  on(button1, "click", () => appVueCount.value++);
+  div.insertBefore(button1, button0.nextSibling);
 
-  createComponent(h(Counter, null, []), div);
+  createComponent(self, h(Counter, null, []), div);
 
   return div;
-};
+}) satisfies VaporComponent;

packages/runtime-core/apiInject.ts

@@ -17,13 +17,12 @@ export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
 export function inject<T>(key: InjectionKey<T> | string): T | undefined {
   const instance = currentInstance;
   if (instance) {
-    if (isVapor(instance)) {
-      // do nothing
-    } else {
-      const provides = instance.appContext?.provides;
-      if (provides && (key as string | symbol) in provides) {
-        return provides[key as string];
-      }
+    const provides =
+      instance.parent == null
+        ? instance.appContext?.provides
+        : instance.parent.provides;
+    if (provides && (key as string | symbol) in provides) {
+      return provides[key as string];
     }
   }
 }

packages/runtime-core/component.ts

@@ -36,6 +36,7 @@ export interface ComponentInternalInstance {
   uid: number;
   type: ConcreteComponent;
   appContext: AppContext;
+  parent: ComponentInternalInstance | VaporComponentInternalInstance | null;
 
   vnode: VNode;
   next: VNode | null;
@@ -93,7 +94,7 @@ export type InternalRenderFunction = {
 let uid = 0;
 export function createComponentInstance(
   vnode: VNode,
-  parent: ComponentInternalInstance | null
+  parent: ComponentInternalInstance | VaporComponentInternalInstance | null
 ): ComponentInternalInstance {
   const type = vnode.type as ConcreteComponent;
   const appContext =
@@ -102,6 +103,7 @@ export function createComponentInstance(
   const instance: ComponentInternalInstance = {
     uid: uid++,
     type,
+    parent,
     vnode,
     appContext,
     next: null,

packages/runtime-core/renderer.ts

@@ -1,4 +1,5 @@
 import {
+  VaporComponentInternalInstance,
   createVaporComponentInstance,
   initialRenderVaporComponent,
 } from "chibivue/vapor";
@@ -36,7 +37,10 @@ import {
 export type RootRenderFunction<HostElement = RendererElement> = (
   vnode: VNode | null,
   container: HostElement,
-  isSVG?: boolean
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 export interface RendererOptions<
@@ -81,15 +85,21 @@ type PatchFn = (
   n2: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent?: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type ProcessVaporComponentFn = (
   n1: VNode | null,
   n2: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent?: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type ProcessTextOrCommentFn = (
@@ -103,15 +113,21 @@ type MountChildrenFn = (
   children: VNodeArrayChildren,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type PatchChildrenFn = (
   n1: VNode | null,
   n2: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type MoveFn = (
@@ -124,7 +140,10 @@ type MountComponentFn = (
   initialVNode: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type NextFn = (vnode: VNode) => RendererNode | null;
@@ -187,10 +206,11 @@ export function createRenderer(options: RendererOptions) {
     n1,
     n2,
     container,
-    anchor
+    anchor,
+    parentComponent
   ) => {
     if (n1 == null) {
-      mountVaporComponent(n2, container, anchor);
+      mountVaporComponent(n2, container, anchor, parentComponent);
     } else {
       // do nothing
       // reactivity patch
@@ -200,9 +220,13 @@ export function createRenderer(options: RendererOptions) {
   const mountVaporComponent = (
     vnode: VNode,
     container: RendererElement,
-    anchor?: RendererNode | null
+    anchor: RendererNode | null,
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
-    const instance = createVaporComponentInstance(vnode);
+    const instance = createVaporComponentInstance(vnode, parentComponent);
     const el = (vnode.el = initialRenderVaporComponent(instance));
     const { bm, m } = instance;
     if (bm) invokeArrayFns(bm);
@@ -248,7 +272,10 @@ export function createRenderer(options: RendererOptions) {
     n2: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
     if (n1 == null) {
       mountElement(n2, container, anchor, parentComponent);
@@ -261,7 +288,10 @@ export function createRenderer(options: RendererOptions) {
     vnode: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
     let el: RendererElement;
     const { type, props, shapeFlag, dirs } = vnode;
@@ -295,7 +325,10 @@ export function createRenderer(options: RendererOptions) {
   const patchElement = (
     n1: VNode,
     n2: VNode,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
     const el = (n2.el = n1.el!);
     const { dirs } = n2;
@@ -314,7 +347,10 @@ export function createRenderer(options: RendererOptions) {
     n2: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    parentComponent: ComponentInternalInstance | null = null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null = null
   ) => {
     if (n1 == null) {
       mountComponent(n2, container, anchor, parentComponent);
@@ -344,7 +380,10 @@ export function createRenderer(options: RendererOptions) {
     n2: VNode,
     container: RendererElement,
     anchor: RendererNode | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
     const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(""))!;
     const fragmentEndAnchor = (n2.anchor = n1
@@ -533,7 +572,10 @@ export function createRenderer(options: RendererOptions) {
     c2: VNode[],
     container: RendererElement,
     parentAnchor: RendererNode | null,
-    parentComponent: ComponentInternalInstance | null
+    parentComponent:
+      | ComponentInternalInstance
+      | VaporComponentInternalInstance
+      | null
   ) => {
     let i = 0;
     const l2 = c2.length;
@@ -789,13 +831,13 @@ export function createRenderer(options: RendererOptions) {
     return hostNextSibling(vnode.el!);
   };
 
-  const render: RootRenderFunction = (vnode, container) => {
+  const render: RootRenderFunction = (vnode, container, parent) => {
     if (vnode === null) {
       if (container._vnode) {
         unmount(container._vnode);
       }
     } else {
-      patch((container as any)._vnode || null, vnode, container, null, null);
+      patch((container as any)._vnode || null, vnode, container, null, parent);
     }
     flushPreFlushCbs();
     flushPostFlushCbs();