From: daiwei <daiwei521@126.com>
Date: Wed, 5 Mar 2025 14:35:14 +0000 (+0800)
Subject: wip: vdom interop
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d0faf6c992ac0a5d6ef70cbbf02593d883e06eff;p=thirdparty%2Fvuejs%2Fcore.git

wip: vdom interop
---

diff --git a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
index 2126611d71..c061c8224c 100644
--- a/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
+++ b/packages/runtime-vapor/src/apiCreateDynamicComponent.ts
@@ -1,6 +1,6 @@
-import { resolveDynamicComponent } from '@vue/runtime-dom'
+import { currentInstance, resolveDynamicComponent } from '@vue/runtime-dom'
 import { DynamicFragment, type VaporFragment } from './block'
-import { createComponentWithFallback } from './component'
+import { createComponentWithFallback, emptyContext } from './component'
 import { renderEffect } from './renderEffect'
 import type { RawProps } from './componentProps'
 import type { RawSlots } from './componentSlots'
@@ -16,6 +16,8 @@ export function createDynamicComponent(
     : new DynamicFragment()
   renderEffect(() => {
     const value = getter()
+    const appContext =
+      (currentInstance && currentInstance.appContext) || emptyContext
     frag.update(
       () =>
         createComponentWithFallback(
@@ -23,6 +25,7 @@ export function createDynamicComponent(
           rawProps,
           rawSlots,
           isSingleRoot,
+          appContext,
         ),
       value,
     )
diff --git a/packages/runtime-vapor/src/block.ts b/packages/runtime-vapor/src/block.ts
index 73b3af38f4..18313d191d 100644
--- a/packages/runtime-vapor/src/block.ts
+++ b/packages/runtime-vapor/src/block.ts
@@ -43,8 +43,12 @@ export class VaporFragment implements TransitionOptions {
   $transition?: VaporTransitionHooks | undefined
   nodes: Block
   anchor?: Node
-  insert?: (parent: ParentNode, anchor: Node | null) => void
-  remove?: (parent?: ParentNode) => void
+  insert?: (
+    parent: ParentNode,
+    anchor: Node | null,
+    transitionHooks?: TransitionHooks,
+  ) => void
+  remove?: (parent?: ParentNode, transitionHooks?: TransitionHooks) => void
 
   constructor(nodes: Block) {
     this.nodes = nodes
@@ -170,7 +174,7 @@ export function insert(
   } else {
     // fragment
     if (block.insert) {
-      block.insert(parent, anchor)
+      block.insert(parent, anchor, (block as TransitionBlock).$transition)
     } else {
       insert(block.nodes, parent, anchor, parentSuspense)
     }
@@ -203,7 +207,7 @@ export function remove(block: Block, parent?: ParentNode): void {
   } else {
     // fragment
     if (block.remove) {
-      block.remove(parent)
+      block.remove(parent, (block as TransitionBlock).$transition)
     } else {
       remove(block.nodes, parent)
     }
diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index bd033d6653..b12ae3f2d4 100644
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -278,7 +278,7 @@ export function devRender(instance: VaporComponentInstance): void {
     ) || []
 }
 
-const emptyContext: GenericAppContext = {
+export const emptyContext: GenericAppContext = {
   app: null as any,
   config: {},
   provides: /*@__PURE__*/ Object.create(null),
@@ -446,9 +446,10 @@ export function createComponentWithFallback(
   rawProps?: LooseRawProps | null,
   rawSlots?: LooseRawSlots | null,
   isSingleRoot?: boolean,
+  appContext?: GenericAppContext,
 ): HTMLElement | VaporComponentInstance {
   if (!isString(comp)) {
-    return createComponent(comp, rawProps, rawSlots, isSingleRoot)
+    return createComponent(comp, rawProps, rawSlots, isSingleRoot, appContext)
   }
 
   const el = document.createElement(comp)
diff --git a/packages/runtime-vapor/src/components/Transition.ts b/packages/runtime-vapor/src/components/Transition.ts
index 01326e5d98..13ec46ad6d 100644
--- a/packages/runtime-vapor/src/components/Transition.ts
+++ b/packages/runtime-vapor/src/components/Transition.ts
@@ -230,7 +230,11 @@ export function findTransitionBlock(block: Block): TransitionBlock | undefined {
       }
     }
   } else if (isFragment(block)) {
-    child = findTransitionBlock(block.nodes)
+    if (block.insert) {
+      child = block
+    } else {
+      child = findTransitionBlock(block.nodes)
+    }
   }
 
   if (__DEV__ && !child) {
diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index f6dbd26739..dc3ff7c5e6 100644
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -7,6 +7,7 @@ import {
   type RendererInternals,
   type ShallowRef,
   type Slots,
+  type TransitionHooks,
   type VNode,
   type VaporInteropInterface,
   createVNode,
@@ -14,6 +15,7 @@ import {
   ensureRenderer,
   onScopeDispose,
   renderSlot,
+  setTransitionHooks,
   shallowRef,
   simpleSetCurrentInstance,
 } from '@vue/runtime-dom'
@@ -171,14 +173,16 @@ function createVDOMComponent(
 
   let isMounted = false
   const parentInstance = currentInstance as VaporComponentInstance
-  const unmount = (parentNode?: ParentNode) => {
+  const unmount = (parentNode?: ParentNode, transition?: TransitionHooks) => {
+    if (transition) setTransitionHooks(vnode, transition)
     internals.umt(vnode.component!, null, !!parentNode)
   }
 
-  frag.insert = (parentNode, anchor) => {
+  frag.insert = (parentNode, anchor, transition) => {
     const prev = currentInstance
     simpleSetCurrentInstance(parentInstance)
     if (!isMounted) {
+      if (transition) setTransitionHooks(vnode, transition)
       internals.mt(
         vnode,
         parentNode,