Browse Source

chore: update

daiwei 6 months ago
parent
commit
47c10faf2d

+ 1 - 1
packages/runtime-core/src/hydration.ts

@@ -312,7 +312,7 @@ export function createHydrationFunctions(
 
           // hydrate vapor component
           if ((vnode.type as ConcreteComponent).__vapor) {
-            nextNode = getVaporInterface(parentComponent, vnode).hydrate(
+            getVaporInterface(parentComponent, vnode).hydrate(
               vnode,
               node,
               container,

+ 16 - 6
packages/runtime-vapor/src/dom/hydration.ts

@@ -153,10 +153,12 @@ function adoptTemplateImpl(node: Node, template: string): Node | null {
   return node
 }
 
-function nextNode(node: Node): Node | null {
+export function locateNextNode(node: Node): Node | null {
   return isComment(node, '[')
-    ? locateEndAnchor(node as Anchor)!.nextSibling
-    : node.nextSibling
+    ? _next(locateEndAnchor(node)!)
+    : isComment(node, 'teleport start')
+      ? _next(locateEndAnchor(node, 'teleport start', 'teleport end')!)
+      : _next(node)
 }
 
 function locateHydrationNodeImpl(): void {
@@ -166,20 +168,20 @@ function locateHydrationNodeImpl(): void {
     // prepend
     if (insertionAnchor === 0) {
       node = insertionParent!.$lpn = lastPrepend
-        ? nextNode(lastPrepend)
+        ? locateNextNode(lastPrepend)
         : firstChild
     }
     // insert
     else if (insertionAnchor instanceof Node) {
       const { $lin: lastInsertedNode } = insertionAnchor as ChildItem
       node = (insertionAnchor as ChildItem).$lin = lastInsertedNode
-        ? nextNode(lastInsertedNode)
+        ? locateNextNode(lastInsertedNode)
         : insertionAnchor
     }
     // append
     else {
       node = insertionParent!.$lan = lastAppend
-        ? nextNode(lastAppend)
+        ? locateNextNode(lastAppend)
         : insertionAnchor === null
           ? firstChild
           : locateChildByLogicalIndex(insertionParent!, insertionAnchor)!
@@ -227,6 +229,14 @@ export function locateEndAnchor(
 
   return null
 }
+export function locateFragmentEndAnchor(label: string = ']'): Comment | null {
+  let node = currentHydrationNode!
+  while (node) {
+    if (isComment(node, label)) return node
+    node = node.nextSibling!
+  }
+  return null
+}
 
 function handleMismatch(node: Node, template: string): Node {
   if (!isMismatchAllowed(node.parentElement!, MismatchTypes.CHILDREN)) {

+ 16 - 15
packages/runtime-vapor/src/fragment.ts

@@ -14,6 +14,7 @@ import {
   currentHydrationNode,
   isComment,
   isHydrating,
+  locateFragmentEndAnchor,
   locateHydrationNode,
 } from './dom/hydration'
 import {
@@ -143,21 +144,21 @@ export class DynamicFragment extends VaporFragment {
     // avoid repeated hydration during fallback rendering
     if (this.anchor) return
 
-    // reuse the empty comment node as the anchor for empty if
-    // e.g. `<div v-if="false"></div>` -> `<!---->`
-    if (this.anchorLabel === 'if' && isEmpty) {
-      this.anchor = currentHydrationNode!
-      if (!this.anchor) {
-        throw new Error('Failed to locate if anchor')
-      } else {
-        if (__DEV__) {
-          ;(this.anchor as Comment).data = this.anchorLabel
+    if (this.anchorLabel === 'if') {
+      // reuse the empty comment node as the anchor for empty if
+      // e.g. `<div v-if="false"></div>` -> `<!---->`
+      if (isEmpty) {
+        this.anchor = locateFragmentEndAnchor('')!
+        if (!this.anchor) {
+          throw new Error('Failed to locate if anchor')
+        } else {
+          if (__DEV__) {
+            ;(this.anchor as Comment).data = this.anchorLabel
+          }
+          return
         }
-        return
       }
-    }
-
-    if (this.anchorLabel === 'slot') {
+    } else if (this.anchorLabel === 'slot') {
       // reuse the empty comment node for empty slot
       // e.g. `<slot v-if="false"></slot>`
       if (isEmpty && isComment(currentHydrationNode!, '')) {
@@ -168,8 +169,8 @@ export class DynamicFragment extends VaporFragment {
         return
       }
 
-      // reuse the vdom fragment end anchor for slots
-      this.anchor = currentHydrationNode!
+      // reuse the vdom fragment end anchor
+      this.anchor = locateFragmentEndAnchor()!
       if (!this.anchor) {
         throw new Error('Failed to locate slot anchor')
       } else {