From 575f9c3d07ae86269c735bad2b5a8eab110274d4 Mon Sep 17 00:00:00 2001
From: Ubugeeei <ubuge1122@gmail.com>
Date: Tue, 24 Oct 2023 23:40:26 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20#158=20=F0=9F=92=AA=20provide/inject=20?=
 =?UTF-8?q?between=20VaporComponent=20and=20Component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/vapor/src/App.vue              |  3 +-
 example/vapor/src/Counter.vue          |  8 ++-
 example/vapor/src/MyComponent.vapor.ts | 41 ++++++++++----
 packages/runtime-core/apiInject.ts     | 13 ++---
 packages/runtime-core/component.ts     |  4 +-
 packages/runtime-core/renderer.ts      | 78 ++++++++++++++++++++------
 packages/vapor/component.ts            | 35 +++++++++---
 packages/vapor/index.ts                |  9 ++-
 8 files changed, 142 insertions(+), 49 deletions(-)

diff --git a/example/vapor/src/App.vue b/example/vapor/src/App.vue
index 1f1a1190..627ab1c9 100644
--- a/example/vapor/src/App.vue
+++ b/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 };
   },
 });
diff --git a/example/vapor/src/Counter.vue b/example/vapor/src/Counter.vue
index a01bb246..3b6df1c6 100644
--- a/example/vapor/src/Counter.vue
+++ b/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>
diff --git a/example/vapor/src/MyComponent.vapor.ts b/example/vapor/src/MyComponent.vapor.ts
index c746f381..23c8c83a 100644
--- a/example/vapor/src/MyComponent.vapor.ts
+++ b/example/vapor/src/MyComponent.vapor.ts
@@ -1,12 +1,30 @@
-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
@@ -14,6 +32,8 @@ export default () => {
    */
   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;
diff --git a/packages/runtime-core/apiInject.ts b/packages/runtime-core/apiInject.ts
index 164a7523..36f909b9 100644
--- a/packages/runtime-core/apiInject.ts
+++ b/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];
     }
   }
 }
diff --git a/packages/runtime-core/component.ts b/packages/runtime-core/component.ts
index 18ef3be3..32e81a10 100644
--- a/packages/runtime-core/component.ts
+++ b/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,
diff --git a/packages/runtime-core/renderer.ts b/packages/runtime-core/renderer.ts
index a3f73257..b66be3e4 100644
--- a/packages/runtime-core/renderer.ts
+++ b/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,7 +85,10 @@ type PatchFn = (
   n2: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent?: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type ProcessVaporComponentFn = (
@@ -89,7 +96,10 @@ type ProcessVaporComponentFn = (
   n2: VNode,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent?: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type ProcessTextOrCommentFn = (
@@ -103,7 +113,10 @@ type MountChildrenFn = (
   children: VNodeArrayChildren,
   container: RendererElement,
   anchor: RendererNode | null,
-  parentComponent: ComponentInternalInstance | null
+  parentComponent:
+    | ComponentInternalInstance
+    | VaporComponentInternalInstance
+    | null
 ) => void;
 
 type PatchChildrenFn = (
@@ -111,7 +124,10 @@ type PatchChildrenFn = (
   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();
diff --git a/packages/vapor/component.ts b/packages/vapor/component.ts
index dcc50c05..de72d110 100644
--- a/packages/vapor/component.ts
+++ b/packages/vapor/component.ts
@@ -1,19 +1,31 @@
-import { VNode } from "chibivue/runtime-core";
 import {
-  ComponentInternalInstance,
-  LifecycleHook,
+  createAppContext,
+  type AppContext,
+} from "chibivue/runtime-core/apiCreateApp";
+import { type VNode } from "chibivue/runtime-core";
+import {
+  type ComponentInternalInstance,
+  type Data,
+  type LifecycleHook,
   setCurrentInstance,
   unsetCurrentInstance,
 } from "chibivue/runtime-core/component";
 import { LifecycleHooks } from "chibivue/runtime-core/enums";
-import { VaporNode } from ".";
+import { type VaporNode } from ".";
 
-export type VaporComponent = () => VaporNode;
+export type VaporComponent = (
+  self: VaporComponentInternalInstance
+) => VaporNode;
 
 export interface VaporComponentInternalInstance {
   __is_vapor: true;
   uid: number;
   type: VaporComponent;
+  parent: ComponentInternalInstance | VaporComponentInternalInstance | null;
+  appContext: AppContext;
+
+  provides: Data;
+
   isMounted: boolean;
   [LifecycleHooks.BEFORE_MOUNT]: LifecycleHook;
   [LifecycleHooks.MOUNTED]: LifecycleHook;
@@ -25,12 +37,21 @@ export interface VaporComponentInternalInstance {
 
 let uid = 0;
 export const createVaporComponentInstance = (
-  vnode: VNode
+  vnode: VNode,
+  parent?: ComponentInternalInstance | VaporComponentInternalInstance | null
 ): VaporComponentInternalInstance => {
+  const appContext =
+    (parent ? parent.appContext : vnode.appContext) || createAppContext();
+
   const instance: VaporComponentInternalInstance = {
     __is_vapor: true,
     uid: uid++,
     type: vnode.type as VaporComponent,
+    parent: parent ?? null,
+    appContext,
+
+    provides: parent ? parent.provides : Object.create(appContext.provides),
+
     isMounted: false,
     [LifecycleHooks.BEFORE_MOUNT]: null,
     [LifecycleHooks.MOUNTED]: null,
@@ -46,7 +67,7 @@ export const initialRenderVaporComponent = (
   instance: VaporComponentInternalInstance
 ): VaporNode => {
   setCurrentInstance(instance as any); //TODO: types
-  const el = instance.type();
+  const el = instance.type(instance);
   unsetCurrentInstance();
   return el;
 };
diff --git a/packages/vapor/index.ts b/packages/vapor/index.ts
index 74c24101..9720c7d1 100644
--- a/packages/vapor/index.ts
+++ b/packages/vapor/index.ts
@@ -2,10 +2,10 @@ import { VNode, createRenderer } from "chibivue/runtime-core";
 import { RootRenderFunction } from "chibivue/runtime-core/renderer";
 import { nodeOps } from "chibivue/runtime-dom/nodeOps";
 import { patchProp } from "chibivue/runtime-dom/patchProp";
+import { VaporComponentInternalInstance } from "./component";
 
 export * from "./component";
 
-
 export type VaporNode = Element & { __is_vapor: true };
 
 export const template = (tmp: string): VaporNode => {
@@ -55,5 +55,8 @@ const renderer = createRenderer({ ...nodeOps, patchProp });
 const render = ((...args) =>
   renderer.render(...args)) as RootRenderFunction<Element>;
 
-export const createComponent = (component: VNode, parent: VaporNode) =>
-  render(component, parent);
+export const createComponent = (
+  self: VaporComponentInternalInstance,
+  component: VNode,
+  container: VaporNode
+) => render(component, container, self);