fix: avoid insert serfAnchor during hydrate

diff --git a/packages/runtime-core/src/apiCreateApp.ts b/packages/runtime-core/src/apiCreateApp.ts
index 0f379b4138746afdbeb2c57e80cc7d9676241efa..464c2c0431b346e3a39d56fa06097b4a1d231d21 100644 (file)
--- a/packages/runtime-core/src/apiCreateApp.ts
+++ b/packages/runtime-core/src/apiCreateApp.ts
@@ -191,7 +191,13 @@ export interface VaporInteropInterface {
     component: ComponentInternalInstance,
     transition: TransitionHooks,
   ): void
-  hydrate(node: Node, fn: () => void): Node
+  hydrate(
+    vnode: VNode,
+    node: any,
+    container: any,
+    anchor: any,
+    parentComponent: ComponentInternalInstance | null,
+  ): Node
   hydrateSlot(vnode: VNode, node: any): Node
 
   vdomMount: (

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index f7f15d2f3b0c6ce0a7f371cece3ba72af5b542a6..00f9df471a9862120b542cf377c44903c3dae997 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -326,10 +326,13 @@ export function createHydrationFunctions(
 
           // hydrate vapor component
           if ((vnode.type as ConcreteComponent).__vapor) {
-            const vaporInterface = getVaporInterface(parentComponent, vnode)
-            nextNode = vaporInterface.hydrate(node, () => {
-              vaporInterface.mount(vnode, container, null, parentComponent)
-            })
+            nextNode = getVaporInterface(parentComponent, vnode).hydrate(
+              vnode,
+              node,
+              container,
+              null,
+              parentComponent,
+            )
           } else {
             mountComponent(
               vnode,

diff --git a/packages/runtime-vapor/src/dom/node.ts b/packages/runtime-vapor/src/dom/node.ts
index 71b270868b0c25e4dd5ef65595cbfc9cf290ccda..203724ca4a1e8ba9d204869821e54c20f81bf05a 100644 (file)
--- a/packages/runtime-vapor/src/dom/node.ts
+++ b/packages/runtime-vapor/src/dom/node.ts
@@ -98,7 +98,7 @@ export function __nthChild(node: Node, i: number): Node {
 }
 
 /*! #__NO_SIDE_EFFECTS__ */
-function _next(node: Node): Node {
+export function _next(node: Node): Node {
   return node.nextSibling!
 }
 

diff --git a/packages/runtime-vapor/src/fragment.ts b/packages/runtime-vapor/src/fragment.ts
index 7bfad15c340abcfc69c253464fecde0754cd1bd5..887d6d09bf6de3571f89ccdb8eea214c47b52c8e 100644 (file)
--- a/packages/runtime-vapor/src/fragment.ts
+++ b/packages/runtime-vapor/src/fragment.ts
@@ -150,6 +150,7 @@ export class DynamicFragment extends VaporFragment {
     const createAnchor = () => {
       const { parentNode, nextSibling } = findLastChild(this.nodes)!
       parentNode!.insertBefore(
+        // TODO use empty text node in PROD?
         (this.anchor = createComment(label)),
         nextSibling,
       )

diff --git a/packages/runtime-vapor/src/vdomInterop.ts b/packages/runtime-vapor/src/vdomInterop.ts
index af8bef74062412f107deefdc2e93c7493218da7a..38a2f5e2d8318dae0d32d5416cf97c4ca17c97ae 100644 (file)
--- a/packages/runtime-vapor/src/vdomInterop.ts
+++ b/packages/runtime-vapor/src/vdomInterop.ts
@@ -51,7 +51,7 @@ import {
 import { type RawProps, rawPropsProxyHandlers } from './componentProps'
 import type { RawSlots, VaporSlot } from './componentSlots'
 import { renderEffect } from './renderEffect'
-import { __next, createTextNode } from './dom/node'
+import { _next, createTextNode } from './dom/node'
 import { optimizePropertyLookup } from './dom/prop'
 import { setTransitionHooks as setVaporTransitionHooks } from './components/Transition'
 import {
@@ -74,8 +74,11 @@ const vaporInteropImpl: Omit<
   'vdomMount' | 'vdomUnmount' | 'vdomSlot'
 > = {
   mount(vnode, container, anchor, parentComponent) {
-    const selfAnchor = (vnode.el = vnode.anchor = createTextNode())
-    container.insertBefore(selfAnchor, anchor)
+    let selfAnchor: Node | null = null
+    if (!isHydrating) {
+      selfAnchor = vnode.el = vnode.anchor = createTextNode()
+      container.insertBefore(selfAnchor, anchor)
+    }
     const prev = currentInstance
     simpleSetCurrentInstance(parentComponent)
 
@@ -178,10 +181,13 @@ const vaporInteropImpl: Omit<
     setVaporTransitionHooks(component as any, hooks as VaporTransitionHooks)
   },
 
-  hydrate(node, fn) {
-    vaporHydrateNode(node, fn)
-    return __next(node)
+  hydrate(vnode, node, container, anchor, parentComponent) {
+    vaporHydrateNode(node, () => {
+      this.mount(vnode, container, anchor, parentComponent)
+    })
+    return _next(node)
   },
+
   hydrateSlot(vnode, node) {
     const { slot } = vnode.vs!
     const propsRef = (vnode.vs!.ref = shallowRef(vnode.props))
@@ -192,7 +198,7 @@ const vaporInteropImpl: Omit<
         'slot',
       )
     })
-    return __next(node)
+    return _next(node)
   },
 }