refactor(runtime-vapor): split create component & render

Author: sxzz

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 = () => ({

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

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,

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 {

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)