feat: 💪 render vapor component

example/vapor/src/App.vue

@@ -0,0 +1,24 @@
+<script>
+import { defineComponent, ref } from "chibivue";
+import MyVaporButton from "./MyButton.vapor";
+
+export default defineComponent({
+  components: { MyVaporButton },
+  setup() {
+    const count = ref(0);
+    return { count };
+  },
+});
+</script>
+
+<template>
+  <div>
+    <h1>My App</h1>
+
+    <p>vapor component</p>
+    <MyVaporButton />
+
+    <p>native component</p>
+    <button @click="count++">{{ count }}</button>
+  </div>
+</template>

example/vapor/src/main.ts

@@ -1,5 +1,7 @@
-import App from "./App.vapor";
+import { createApp } from "chibivue";
 
-const app = App();
+// @ts-ignore
+import App from "./App.vue";
 
-document.getElementById("app")?.appendChild(app);
+const app = createApp(App);
+app.mount("#app");

packages/compiler-core/transforms/transformElement.ts

@@ -24,6 +24,7 @@ import {
   NORMALIZE_CLASS,
   NORMALIZE_PROPS,
   NORMALIZE_STYLE,
+  RESOLVE_COMPONENT,
   TO_HANDLERS,
 } from "../runtimeHelpers";
 import { NodeTransform, TransformContext } from "../transform";
@@ -295,6 +296,7 @@ export function resolveComponentType(
   // TODO: 3. user component (from setup bindings)
 
   // TODO: 4. Self referencing component (inferred from filename)
+  context.helper(RESOLVE_COMPONENT)
 
   // 5. user component (resolve)
   context.components.add(tag);

packages/runtime-core/component.ts

@@ -186,6 +186,8 @@ export const setupComponent = (instance: ComponentInternalInstance) => {
     }
   }
 
+  instance.render = Component.render as any;
+
   // Options API
   setCurrentInstance(instance);
   applyOptions(instance);

packages/runtime-core/renderer.ts

@@ -1,5 +1,6 @@
+import { VaporComponent } from "chibivue/vapor";
 import { ReactiveEffect } from "../reactivity/effect";
-import { invokeArrayFns } from "../shared";
+import { invokeArrayFns, isFunction } from "../shared";
 import { ShapeFlags } from "../shared/shapeFlags";
 import { createAppAPI } from "./apiCreateApp";
 import {
@@ -80,6 +81,14 @@ type PatchFn = (
   parentComponent?: ComponentInternalInstance | null
 ) => void;
 
+type ProcessVaporComponentFn = (
+  n1: VNode | null,
+  n2: VNode,
+  container: RendererElement,
+  anchor: RendererNode | null,
+  parentComponent?: ComponentInternalInstance | null
+) => void;
+
 type ProcessTextOrCommentFn = (
   n1: VNode | null,
   n2: VNode,
@@ -152,7 +161,9 @@ export function createRenderer(options: RendererOptions) {
     parentComponent = null
   ) => {
     const { type, ref, shapeFlag } = n2;
-    if (type === Text) {
+    if (isFunction(type)) {
+      processVaporComponent(n1, n2, container, anchor, parentComponent);
+    } else if (type === Text) {
       processText(n1, n2, container, anchor);
     } else if (type === Comment) {
       processCommentNode(n1, n2, container, anchor);
@@ -169,6 +180,30 @@ export function createRenderer(options: RendererOptions) {
     }
   };
 
+  const processVaporComponent: ProcessVaporComponentFn = (
+    n1,
+    n2,
+    container,
+    anchor
+  ) => {
+    if (n1 == null) {
+      mountVaporComponent(n2, container, anchor);
+    } else {
+      // do nothing
+      // reactivity patch
+    }
+  };
+
+  const mountVaporComponent = (
+    vnode: VNode,
+    container: RendererElement,
+    anchor?: RendererNode | null
+  ) => {
+    const { type } = vnode;
+    console.log("🚀 ~ file: renderer.ts:203 ~ createRenderer ~ type:", type);
+    hostInsert((vnode.el = (type as VaporComponent)()), container, anchor);
+  };
+
   const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
     if (n1 == null) {
       hostInsert(

packages/runtime-core/vnode.ts

@@ -13,13 +13,15 @@ import { type ComponentPublicInstance } from "./componentPublicInstance";
 import { AppContext } from "./apiCreateApp";
 import { DirectiveBinding } from "./directives";
 import { Ref } from "../reactivity";
+import { VaporComponent } from "../vapor";
 
 export type VNodeTypes =
   | string
   | typeof Text
   | typeof Comment
   | typeof Fragment
-  | Component;
+  | Component
+  | VaporComponent;
 
 export const Text = Symbol();
 export const Comment = Symbol();

packages/vapor/index.ts

@@ -1,14 +1,19 @@
-export const template = (tmp: string): HTMLElement => {
+export type VaporComponent<HostNode = any> = () => VaporNode<HostNode>;
+export type VaporNode<HostNode = any> = HostNode & {
+  __is_vapor: true;
+};
+
+export const template = (tmp: string): Element & { __is_vapor: true } => {
   const container = document.createElement("div");
   container.innerHTML = tmp;
-  return container.firstElementChild as HTMLElement;
+  const el = container.firstElementChild as Element & {
+    __is_vapor: true;
+  };
+  el.__is_vapor = true;
+  return el;
 };
 
-export const setText = (
-  target: Element,
-  format: any,
-  ...values: any[]
-) => {
+export const setText = (target: Element, format: any, ...values: any[]) => {
   if (!target) return;
 
   if (!values.length) {
@@ -29,10 +34,6 @@ export const setText = (
   target.textContent = text;
 };
 
-export const on = (
-  element: Element,
-  event: string,
-  callback: () => void
-) => {
+export const on = (element: Element, event: string, callback: () => void) => {
   element.addEventListener(event, callback);
 };