فهرست منبع

fix: avoid insert serfAnchor during hydrate

daiwei 10 ماه پیش
والد
کامیت
b09c8eed34

+ 7 - 1
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: (

+ 7 - 4
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,

+ 1 - 1
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!
 }
 

+ 1 - 0
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,
       )

+ 13 - 7
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)
   },
 }