From 808d17dbd1bc699a2cac1c21ef03cfdaccd44c05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Thu, 14 Mar 2024 16:19:45 +0800
Subject: [PATCH] refactor(runtime-vapor): split create component & render

---
 packages/runtime-vapor/__tests__/_utils.ts |  4 +++-
 packages/runtime-vapor/src/component.ts    |  5 ++++-
 packages/runtime-vapor/src/index.ts        |  1 +
 packages/runtime-vapor/src/render.ts       | 24 ++++------------------
 playground/src/main.ts                     |  5 +++--
 5 files changed, 15 insertions(+), 24 deletions(-)

diff --git a/packages/runtime-vapor/__tests__/_utils.ts b/packages/runtime-vapor/__tests__/_utils.ts
index d4501273d..9117cc677 100644
--- a/packages/runtime-vapor/__tests__/_utils.ts
+++ b/packages/runtime-vapor/__tests__/_utils.ts
@@ -4,6 +4,7 @@ import {
   type ObjectComponent,
   type SetupFn,
   render as _render,
+  createComponentInstance,
   defineComponent,
 } from '../src'
 
@@ -30,7 +31,8 @@ export function makeRender<Component = ObjectComponent | SetupFn>(
       props: Data = {},
       container: string | ParentNode = '#host',
     ) => {
-      instance = _render(component, props, container)
+      instance = createComponentInstance(component, props)
+      _render(instance, container)
       return res()
     }
     const res = () => ({
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 666b50bdf..87488a05a 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -1,11 +1,12 @@
 import { EffectScope } from '@vue/reactivity'
 
-import { EMPTY_OBJ } from '@vue/shared'
+import { EMPTY_OBJ, isFunction } from '@vue/shared'
 import type { Block } from './render'
 import type { DirectiveBinding } from './directives'
 import {
   type ComponentPropsOptions,
   type NormalizedPropsOptions,
+  initProps,
   normalizePropsOptions,
 } from './componentProps'
 import {
@@ -243,6 +244,8 @@ export const createComponentInstance = (
     // [VaporLifecycleHooks.SERVER_PREFETCH]: null,
   }
 
+  // TODO init first
+  initProps(instance, rawProps, !isFunction(component))
   instance.emit = emit.bind(null, instance)
 
   return instance
diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts
index c426b1516..f3891c4a4 100644
--- a/packages/runtime-vapor/src/index.ts
+++ b/packages/runtime-vapor/src/index.ts
@@ -88,6 +88,7 @@ export { on, delegate, delegateEvents, setDynamicEvents } from './dom/event'
 export { setRef } from './dom/templateRef'
 
 export { defineComponent } from './apiDefineComponent'
+export { createComponentInstance } from './component'
 export {
   onBeforeMount,
   onMounted,
diff --git a/packages/runtime-vapor/src/render.ts b/packages/runtime-vapor/src/render.ts
index e7425a4c3..893b046f4 100644
--- a/packages/runtime-vapor/src/render.ts
+++ b/packages/runtime-vapor/src/render.ts
@@ -1,19 +1,10 @@
 import { proxyRefs } from '@vue/reactivity'
+import { invokeArrayFns, isArray, isFunction, isObject } from '@vue/shared'
 import {
-  type Data,
-  invokeArrayFns,
-  isArray,
-  isFunction,
-  isObject,
-} from '@vue/shared'
-import {
-  type Component,
   type ComponentInternalInstance,
-  createComponentInstance,
   setCurrentInstance,
   unsetCurrentInstance,
 } from './component'
-import { initProps } from './componentProps'
 import { invokeDirectiveHook } from './directives'
 import { insert, querySelector, remove } from './dom/element'
 import { flushPostFlushCbs, queuePostRenderEffect } from './scheduler'
@@ -28,18 +19,11 @@ export type Fragment = {
 }
 
 export function render(
-  comp: Component,
-  props: Data,
+  instance: ComponentInternalInstance,
   container: string | ParentNode,
-): ComponentInternalInstance {
-  const instance = createComponentInstance(comp, props)
-  initProps(instance, props, !isFunction(instance.component))
-  const component = mountComponent(
-    instance,
-    (container = normalizeContainer(container)),
-  )
+): void {
+  mountComponent(instance, (container = normalizeContainer(container)))
   flushPostFlushCbs()
-  return component
 }
 
 function normalizeContainer(container: string | ParentNode): ParentNode {
diff --git a/playground/src/main.ts b/playground/src/main.ts
index d962dae1f..e8f26d40f 100644
--- a/playground/src/main.ts
+++ b/playground/src/main.ts
@@ -1,4 +1,4 @@
-import { render, unmountComponent } from 'vue/vapor'
+import { createComponentInstance, render, unmountComponent } from 'vue/vapor'
 import { createApp } from 'vue'
 import './style.css'
 
@@ -7,7 +7,8 @@ const mod = (modules['.' + location.pathname] || modules['./App.vue'])()
 
 mod.then(({ default: mod }) => {
   if (mod.vapor) {
-    const instance = render(mod, {}, '#app')
+    const instance = createComponentInstance(mod, {})
+    render(instance, '#app')
     // @ts-expect-error
     globalThis.unmount = () => {
       unmountComponent(instance)