wip: vdom interop

diff --git a/packages/runtime-core/src/helpers/renderSlot.ts b/packages/runtime-core/src/helpers/renderSlot.ts
index 152c5a4b81c13735825feb6e6d182ad08e2b0136..e41a14c2ae375680ca70d2bf04a0928280705374 100644 (file)
--- a/packages/runtime-core/src/helpers/renderSlot.ts
+++ b/packages/runtime-core/src/helpers/renderSlot.ts
@@ -35,7 +35,7 @@ export function renderSlot(
   let slot = slots[name]
 
   // vapor slots rendered in vdom
-  if (slot && slots._vapor) {
+  if (slot && slots.__interop) {
     const ret = (openBlock(), createBlock(VaporSlot, props))
     ret.vs = { slot, fallback }
     return ret

diff --git a/packages/runtime-dom/src/components/Transition.ts b/packages/runtime-dom/src/components/Transition.ts
index 3d8ac9dc8b3d75faf7bab1fc099eaa5b994b2abb..7e28dc08301dcd036c59ac304ef51cdb3e1b7a19 100644 (file)
--- a/packages/runtime-dom/src/components/Transition.ts
+++ b/packages/runtime-dom/src/components/Transition.ts
@@ -4,9 +4,11 @@ import {
   BaseTransitionPropsValidators,
   DeprecationTypes,
   type FunctionalComponent,
+  type Slots,
   assertNumber,
   compatUtils,
   h,
+  renderSlot,
 } from '@vue/runtime-core'
 import { extend, isArray, isObject, toNumber } from '@vue/shared'
 
@@ -101,8 +103,20 @@ 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.__vapor) {
+      // with vapor interop plugin
+      if (slots.__interop) {
+        const children = vaporTransitionImpl!.applyTransition(
+          resolvedProps,
+          slots as any,
+        )
+        const vaporSlots = {
+          default: () => children,
+          __interop: true,
+        } as any as Slots
+        return renderSlot(vaporSlots, 'default')
+      }
+
       return vaporTransitionImpl!.applyTransition(resolvedProps, slots as any)
     }
 

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 2eae68e5fe57c29f78c86ef878e56f112aae99e3..bd033d665388c66490771dd3be4e22fc77354ca3 100644 (file)
--- a/packages/runtime-vapor/src/component.ts
+++ b/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
   }
 

diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 0dd1329e44ac939434fd83a665ab0dca94d36b98..85bf52c0be55995cffe2bc293f598a0ab1accdba 100644 (file)
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/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 === '__vapor') {
+      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 === '__vapor') {
+      return true
     } else {
       return getSlot(target, key)
     }

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index b4ed4cb4d521f9dfd4a223b99f9eee8d419ae01d..f6dbd267396e3f2f670f0310bc8bb0a716d41622 100644 (file)
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/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 === '__interop') {
+      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