refactor: adjust vapor/vdom interop

Author: yyx990803

packages/runtime-core/src/apiCreateApp.ts

@@ -1,5 +1,6 @@
 import {
   type Component,
+  type ComponentInternalInstance,
   type ConcreteComponent,
   type Data,
   type GenericComponent,
@@ -32,7 +33,6 @@ import type { NormalizedPropsOptions } from './componentProps'
 import type { ObjectEmitsOptions } from './componentEmits'
 import { ErrorCodes, callWithAsyncErrorHandling } from './errorHandling'
 import type { DefineComponent } from './apiDefineComponent'
-import type { VaporInteropInterface } from './vaporInterop'
 
 export interface App<HostElement = any> {
   version: string
@@ -178,6 +178,24 @@ export interface AppConfig extends GenericAppConfig {
   isCustomElement?: (tag: string) => boolean
 }
 
+/**
+ * The vapor in vdom implementation is in runtime-vapor/src/vdomInterop.ts
+ * @internal
+ */
+export interface VaporInteropInterface {
+  mount(
+    vnode: VNode,
+    container: any,
+    anchor: any,
+    parentComponent: ComponentInternalInstance | null,
+  ): GenericComponentInstance // VaporComponentInstance
+  update(n1: VNode, n2: VNode, shouldUpdate: boolean): void
+  unmount(vnode: VNode, doRemove?: boolean): void
+  move(vnode: VNode, container: any, anchor: any): void
+  vdomMount: (component: ConcreteComponent, props?: any, slots?: any) => any
+  vdomUnmount: UnmountComponentFn
+}
+
 /**
  * Minimal app context shared between vdom and vapor
  */
@@ -194,17 +212,9 @@ export interface GenericAppContext {
   reload?: () => void
 
   /**
-   * @internal vapor interop only, for creating vapor components in vdom
+   * @internal vapor interop only
    */
   vapor?: VaporInteropInterface
-  /**
-   * @internal vapor interop only, for creating vdom components in vapor
-   */
-  vdomMount?: (component: ConcreteComponent, props?: any, slots?: any) => any
-  /**
-   * @internal
-   */
-  vdomUnmount?: UnmountComponentFn
 }
 
 export interface AppContext extends GenericAppContext {

packages/runtime-core/src/index.ts

@@ -501,7 +501,7 @@ export { type NormalizedPropsOptions } from './componentProps'
 /**
  * @internal
  */
-export { type VaporInteropInterface } from './vaporInterop'
+export { type VaporInteropInterface } from './apiCreateApp'
 /**
  * @internal
  */

packages/runtime-core/src/renderer.ts

@@ -96,7 +96,7 @@ import { isAsyncWrapper } from './apiAsyncComponent'
 import { isCompatEnabled } from './compat/compatConfig'
 import { DeprecationTypes } from './compat/compatConfig'
 import type { TransitionHooks } from './components/BaseTransition'
-import type { VaporInteropInterface } from './vaporInterop'
+import type { VaporInteropInterface } from './apiCreateApp'
 
 export interface Renderer<HostElement = RendererElement> {
   render: RootRenderFunction<HostElement>

packages/runtime-core/src/vaporInterop.ts

@@ -150,8 +150,8 @@ export function createComponent(
     emptyContext,
 ): VaporComponentInstance {
   // vdom interop enabled and component is not an explicit vapor component
-  if (appContext.vdomMount && !component.__vapor) {
-    return appContext.vdomMount(component as any, rawProps, rawSlots)
+  if (appContext.vapor && !component.__vapor) {
+    return appContext.vapor.vdomMount(component as any, rawProps, rawSlots)
   }
 
   if (
@@ -526,7 +526,7 @@ export function unmountComponent(
     instance.children = EMPTY_ARR as any
 
     if (instance.vdomChildren) {
-      const unmount = instance.appContext.vdomUnmount!
+      const unmount = instance.appContext.vapor!.vdomUnmount
       for (const c of instance.vdomChildren) {
         unmount(c, null)
       }

packages/runtime-vapor/src/component.ts

@@ -23,7 +23,10 @@ import { extend, remove } from '@vue/shared'
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots } from './componentSlots'
 
-const vaporInteropImpl: VaporInteropInterface = {
+const vaporInteropImpl: Omit<
+  VaporInteropInterface,
+  'vdomMount' | 'vdomUnmount'
+> = {
   mount(vnode, container, anchor, parentComponent) {
     const selfAnchor = (vnode.anchor = document.createComment('vapor'))
     container.insertBefore(selfAnchor, anchor)
@@ -114,8 +117,9 @@ function createVDOMComponent(
 }
 
 export const vaporInteropPlugin: Plugin = app => {
-  app._context.vapor = extend(vaporInteropImpl)
   const internals = ensureRenderer().internals
-  app._context.vdomMount = createVDOMComponent.bind(null, internals)
-  app._context.vdomUnmount = internals.umt
+  app._context.vapor = extend(vaporInteropImpl, {
+    vdomMount: createVDOMComponent.bind(null, internals),
+    vdomUnmount: internals.umt,
+  })
 }