wip(vapor): fix insertion for vdom interop

diff --git a/packages/runtime-vapor/src/component.ts b/packages/runtime-vapor/src/component.ts
index 4056caebd93ccce3b36498158eecb1e7666dd853..548babebf8beef2115e31356d50a989e2e1a0112 100644 (file)
--- a/packages/runtime-vapor/src/component.ts
+++ b/packages/runtime-vapor/src/component.ts
@@ -146,7 +146,15 @@ export function createComponent(
 
   // vdom interop enabled and component is not an explicit vapor component
   if (appContext.vapor && !component.__vapor) {
-    return appContext.vapor.vdomMount(component as any, rawProps, rawSlots)
+    const frag = appContext.vapor.vdomMount(
+      component as any,
+      rawProps,
+      rawSlots,
+    )
+    if (!isHydrating && _insertionParent) {
+      insert(frag, _insertionParent, _insertionAnchor)
+    }
+    return frag
   }
 
   if (

diff --git a/packages/runtime-vapor/src/componentSlots.ts b/packages/runtime-vapor/src/componentSlots.ts
index 0d3dcb9e280ecd12b833ba1e682ac4b3b22388a5..74296e09466359d9fddc37305b032b4e99741010 100644 (file)
--- a/packages/runtime-vapor/src/componentSlots.ts
+++ b/packages/runtime-vapor/src/componentSlots.ts
@@ -104,45 +104,47 @@ export function createSlot(
     ? new Proxy(rawProps, rawPropsProxyHandlers)
     : EMPTY_OBJ
 
+  let fragment: DynamicFragment
+
   if (isRef(rawSlots._)) {
-    return instance.appContext.vapor!.vdomSlot(
+    fragment = instance.appContext.vapor!.vdomSlot(
       rawSlots._,
       name,
       slotProps,
       instance,
       fallback,
     )
-  }
+  } else {
+    fragment = __DEV__ ? new DynamicFragment('slot') : new DynamicFragment()
+    const isDynamicName = isFunction(name)
+    const renderSlot = () => {
+      const slot = getSlot(rawSlots, isFunction(name) ? name() : name)
+      if (slot) {
+        // create and cache bound version of the slot to make it stable
+        // so that we avoid unnecessary updates if it resolves to the same slot
+        fragment.update(
+          slot._bound ||
+            (slot._bound = () => {
+              const slotContent = slot(slotProps)
+              if (slotContent instanceof DynamicFragment) {
+                slotContent.fallback = fallback
+              }
+              return slotContent
+            }),
+        )
+      } else {
+        fragment.update(fallback)
+      }
+    }
 
-  const isDynamicName = isFunction(name)
-  const fragment = __DEV__ ? new DynamicFragment('slot') : new DynamicFragment()
-  const renderSlot = () => {
-    const slot = getSlot(rawSlots, isFunction(name) ? name() : name)
-    if (slot) {
-      // create and cache bound version of the slot to make it stable
-      // so that we avoid unnecessary updates if it resolves to the same slot
-      fragment.update(
-        slot._bound ||
-          (slot._bound = () => {
-            const slotContent = slot(slotProps)
-            if (slotContent instanceof DynamicFragment) {
-              slotContent.fallback = fallback
-            }
-            return slotContent
-          }),
-      )
+    // dynamic slot name or has dynamicSlots
+    if (isDynamicName || rawSlots.$) {
+      renderEffect(renderSlot)
     } else {
-      fragment.update(fallback)
+      renderSlot()
     }
   }
 
-  // dynamic slot name or has dynamicSlots
-  if (isDynamicName || rawSlots.$) {
-    renderEffect(renderSlot)
-  } else {
-    renderSlot()
-  }
-
   if (!isHydrating && _insertionParent) {
     insert(fragment, _insertionParent, _insertionAnchor)
   }