wip: vdom interop

Author: edison1105

packages/runtime-dom/src/components/Transition.ts

@@ -7,6 +7,7 @@ import {
   assertNumber,
   compatUtils,
   h,
+  renderSlot,
 } from '@vue/runtime-core'
 import { extend, isArray, isObject, toNumber } from '@vue/shared'
 
@@ -101,9 +102,15 @@ const decorate = (t: typeof Transition) => {
 export const Transition: FunctionalComponent<TransitionProps> =
   /*@__PURE__*/ decorate((props, { slots }) => {
     const resolvedProps = resolveTransitionProps(props)
-    if (slots._vapor) {
-      // vapor transition
+    if (slots.__inVapor) {
       return vaporTransitionImpl!.applyTransition(resolvedProps, slots as any)
+    } else if (slots._vapor) {
+      const children = vaporTransitionImpl!.applyTransition(
+        resolvedProps,
+        slots as any,
+      )
+      const vaporSlots = { default: () => children, _vapor: true }
+      return renderSlot(vaporSlots as any, 'default')
     }
 
     return h(BaseTransition, resolvedProps, slots)

packages/runtime-vapor/src/component.ts

@@ -56,7 +56,7 @@ import {
   type VaporSlot,
   dynamicSlotsProxyHandlers,
   getSlot,
-  vaporSlotsProxyHandler,
+  staticSlotsProxyHandler,
 } from './componentSlots'
 import { hmrReload, hmrRerender } from './hmr'
 
@@ -417,7 +417,7 @@ export class VaporComponentInstance implements GenericComponentInstance {
     this.slots = rawSlots
       ? rawSlots.$
         ? new Proxy(rawSlots, dynamicSlotsProxyHandlers)
-        : new Proxy(rawSlots, vaporSlotsProxyHandler)
+        : new Proxy(rawSlots, staticSlotsProxyHandler)
       : EMPTY_OBJ
   }
 

packages/runtime-vapor/src/componentSlots.ts

@@ -16,10 +16,10 @@ export type DynamicSlot = { name: string; fn: VaporSlot }
 export type DynamicSlotFn = () => DynamicSlot | DynamicSlot[]
 export type DynamicSlotSource = StaticSlots | DynamicSlotFn
 
-export const vaporSlotsProxyHandler: ProxyHandler<any> = {
+export const staticSlotsProxyHandler: ProxyHandler<any> = {
   get(target, key) {
-    if (key === '_vapor') {
-      return target
+    if (key === '__inVapor') {
+      return true
     } else {
       return target[key]
     }
@@ -28,8 +28,8 @@ export const vaporSlotsProxyHandler: ProxyHandler<any> = {
 
 export const dynamicSlotsProxyHandlers: ProxyHandler<RawSlots> = {
   get: (target, key: string) => {
-    if (key === '_vapor') {
-      return target
+    if (key === '__inVapor') {
+      return true
     } else {
       return getSlot(target, key)
     }

packages/runtime-vapor/src/vdomInterop.ts

@@ -29,11 +29,7 @@ import {
 import { type Block, VaporFragment, insert, remove } from './block'
 import { EMPTY_OBJ, extend, isFunction } from '@vue/shared'
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
-import {
-  type RawSlots,
-  type VaporSlot,
-  vaporSlotsProxyHandler,
-} from './componentSlots'
+import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
 import { createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
@@ -133,6 +129,16 @@ const vaporSlotPropsProxyHandler: ProxyHandler<
   },
 }
 
+const vaporSlotsProxyHandler: ProxyHandler<any> = {
+  get(target, key) {
+    if (key === '_vapor') {
+      return target
+    } else {
+      return target[key]
+    }
+  },
+}
+
 /**
  * Mount vdom component in vapor
  */
@@ -170,6 +176,8 @@ function createVDOMComponent(
   }
 
   frag.insert = (parentNode, anchor) => {
+    const prev = currentInstance
+    simpleSetCurrentInstance(parentInstance)
     if (!isMounted) {
       internals.mt(
         vnode,
@@ -192,6 +200,7 @@ function createVDOMComponent(
         parentInstance as any,
       )
     }
+    simpleSetCurrentInstance(prev)
   }
 
   frag.remove = unmount