chore: tweaks

packages/runtime-vapor/src/apiCreateFor.ts

@@ -29,8 +29,8 @@ import {
   advanceHydrationNode,
   currentHydrationNode,
   isHydrating,
+  locateFragmentAnchor,
   locateHydrationNode,
-  locateVaporFragmentAnchor,
 } from './dom/hydration'
 import { ForFragment, VaporFragment } from './fragment'
 import {
@@ -135,14 +135,11 @@ export const createFor = (
       }
 
       if (isHydrating) {
-        parentAnchor = locateVaporFragmentAnchor(
+        parentAnchor = locateFragmentAnchor(
           currentHydrationNode!,
           FOR_ANCHOR_LABEL,
         )!
-        if (
-          (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
-          !parentAnchor
-        ) {
+        if (__DEV__ && !parentAnchor) {
           throw new Error(`v-for fragment anchor node was not found.`)
         }
       }

packages/runtime-vapor/src/apiCreateIf.ts

@@ -33,9 +33,12 @@ export function createIf(
   if (!isHydrating) {
     if (_insertionParent) insert(frag, _insertionParent, _insertionAnchor)
   } else {
-    // if _insertionAnchor is defined, insertionParent contains a static node
-    // that should be skipped during hydration.
-    // Advance to the next sibling node of parent to skip the static node.
+    // After block node hydration is completed, advance currentHydrationNode to
+    // _insertionParent's next sibling if _insertionAnchor has a value
+    // _insertionAnchor values:
+    // 1. Node type: _insertionAnchor is a static node, no hydration needed
+    // 2. null: block node is appended, potentially without next sibling
+    // 3. 0: next sibling of current block node is static, no hydration needed
     if (_insertionAnchor !== undefined) {
       advanceHydrationNode(_insertionParent!)
     }

packages/runtime-vapor/src/dom/hydration.ts

@@ -34,10 +34,10 @@ function performHydration<T>(
     locateHydrationNode = locateHydrationNodeImpl
     // optimize anchor cache lookup
     ;(Comment.prototype as any).$fe = undefined
-    ;(Node.prototype as any).$ps = undefined
-    ;(Node.prototype as any).$pa = undefined
-    ;(Node.prototype as any).$ia = undefined
-    ;(Node.prototype as any).$aa = undefined
+    ;(Node.prototype as any).$pns = undefined
+    ;(Node.prototype as any).$lpn = undefined
+    ;(Node.prototype as any).$lin = undefined
+    ;(Node.prototype as any).$lan = undefined
     isOptimized = true
   }
   enableHydrationNodeLookup()
@@ -80,15 +80,20 @@ export function setCurrentHydrationNode(node: Node | null): void {
   currentHydrationNode = node
 }
 
-function findParentSibling(n: Node): Node | null {
+function locateNextSiblingOfParent(n: Node): Node | null {
   if (!n.parentNode) return null
-  return n.parentNode.nextSibling || findParentSibling(n.parentNode)
+  return n.parentNode.nextSibling || locateNextSiblingOfParent(n.parentNode)
 }
 
-export function advanceHydrationNode(node: Node & { $ps?: Node | null }): void {
+export function advanceHydrationNode(
+  node: Node & { $pns?: Node | null },
+): void {
   // if no next sibling, find the next node in the parent chain
   const ret =
-    node.nextSibling || node.$ps || (node.$ps = findParentSibling(node))
+    node.nextSibling ||
+    // pns is short for "parent next sibling"
+    node.$pns ||
+    (node.$pns = locateNextSiblingOfParent(node))
   if (ret) setCurrentHydrationNode(ret)
 }
 
@@ -138,20 +143,20 @@ function locateHydrationNodeImpl(): void {
   let node: Node | null
   if (insertionAnchor === 0) {
     // prepend
-    node = insertionParent!.$pa = locateHydrationNodeByAnchor(
-      insertionParent!.$pa || _child(insertionParent!),
+    node = insertionParent!.$lpn = locateHydrationNodeByAnchor(
+      insertionParent!.$lpn || _child(insertionParent!),
       BLOCK_PREPEND_ANCHOR_LABEL,
     )!
   } else if (insertionAnchor) {
-    // insertion anchor
-    node = insertionParent!.$ia = locateHydrationNodeByAnchor(
-      insertionParent!.$ia || _child(insertionParent!),
+    // insert
+    node = insertionParent!.$lin = locateHydrationNodeByAnchor(
+      insertionParent!.$lin || _child(insertionParent!),
       BLOCK_INSERTION_ANCHOR_LABEL,
     )!
   } else if (insertionAnchor === null) {
-    // append anchor
-    node = insertionParent!.$aa = locateHydrationNodeByAnchor(
-      insertionParent!.$aa || _child(insertionParent!),
+    // append
+    node = insertionParent!.$lan = locateHydrationNodeByAnchor(
+      insertionParent!.$lan || _child(insertionParent!),
       BLOCK_APPEND_ANCHOR_LABEL,
     )!
   } else {
@@ -196,35 +201,32 @@ export function locateEndAnchor(
   return null
 }
 
-export function locateVaporFragmentAnchor(
+export function locateFragmentAnchor(
   node: Node,
-  anchorLabel: string,
+  label: string,
 ): Comment | null {
-  while (node) {
-    if (isComment(node, anchorLabel)) return node
+  while (node && node.nodeType === 8) {
+    if (isComment(node, label)) return node
     node = node.nextSibling!
   }
   return null
 }
 
-function locateHydrationNodeByAnchor(
-  node: Node,
-  anchorLabel: string,
-): Node | null {
+function locateHydrationNodeByAnchor(node: Node, label: string): Node | null {
   while (node) {
-    if (isComment(node, `[${anchorLabel}`)) return node.nextSibling
+    if (isComment(node, `[${label}`)) return node.nextSibling
     node = node.nextSibling!
   }
 
   if (__DEV__) {
     throw new Error(
-      `Could not locate hydration node with anchor label: ${anchorLabel}`,
+      `Could not locate hydration node with anchor label: ${label}`,
     )
   }
   return null
 }
 
-export function skipBlockNodes(node: Node): Node {
+export function advanceToNonBlockNode(node: Node): Node {
   while (node) {
     if (isComment(node, `[${BLOCK_PREPEND_ANCHOR_LABEL}`)) {
       node = locateEndAnchor(

packages/runtime-vapor/src/dom/node.ts

@@ -1,4 +1,4 @@
-import { skipBlockNodes } from './hydration'
+import { advanceToNonBlockNode } from './hydration'
 import { isInsertionAnchor } from '@vue/shared'
 
 /*! #__NO_SIDE_EFFECTS__ */
@@ -53,8 +53,7 @@ export function _child(node: ParentNode): Node {
 export function __child(node: ParentNode): Node {
   let n: Node = node.firstChild!
   while (n && isInsertionAnchor(n)) {
-    // skip block node
-    n = skipBlockNodes(n)
+    n = advanceToNonBlockNode(n)
     n = n.nextSibling!
   }
 
@@ -89,7 +88,7 @@ export function _next(node: Node): Node {
 /*! #__NO_SIDE_EFFECTS__ */
 export function __next(node: Node): Node {
   if (isInsertionAnchor(node)) {
-    node = skipBlockNodes(node)
+    node = advanceToNonBlockNode(node)
   }
   return node.nextSibling!
 }

packages/runtime-vapor/src/fragment.ts

@@ -14,8 +14,8 @@ import {
   advanceHydrationNode,
   currentHydrationNode,
   isHydrating,
+  locateFragmentAnchor,
   locateHydrationNode,
-  locateVaporFragmentAnchor,
 } from './dom/hydration'
 import {
   applyTransitionHooks,
@@ -146,10 +146,10 @@ export class DynamicFragment extends VaporFragment {
     // avoid repeated hydration during rendering fallback
     if (this.anchor) return
 
-    this.anchor = locateVaporFragmentAnchor(currentHydrationNode!, label)!
+    this.anchor = locateFragmentAnchor(currentHydrationNode!, label)!
     if (this.anchor) {
       advanceHydrationNode(this.anchor)
-    } else if (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) {
+    } else if (__DEV__) {
       throw new Error(`${label} fragment anchor node was not found.`)
     }
   }

packages/runtime-vapor/src/insertionState.ts

@@ -1,9 +1,11 @@
 export let insertionParent:
   | (ParentNode & {
-      $ps?: Node
-      $pa?: Node
-      $ia?: Node
-      $aa?: Node
+      // the latest prepend node
+      $lpn?: Node
+      // the latest insert node
+      $lin?: Node
+      // the latest append node
+      $lan?: Node
     })
   | undefined
 export let insertionAnchor: Node | 0 | undefined | null

packages/runtime-vapor/src/vdomInterop.ts

@@ -59,8 +59,8 @@ import {
   currentHydrationNode,
   isComment,
   isHydrating,
+  locateFragmentAnchor,
   locateHydrationNode,
-  locateVaporFragmentAnchor,
   setCurrentHydrationNode,
   hydrateNode as vaporHydrateNode,
 } from './dom/hydration'
@@ -193,17 +193,14 @@ const vaporInteropImpl: Omit<
     const propsRef = (vnode.vs!.ref = shallowRef(vnode.props))
     vaporHydrateNode(node, () => {
       vnode.vb = slot(new Proxy(propsRef, vaporSlotPropsProxyHandler))
-      vnode.el = vnode.anchor = locateVaporFragmentAnchor(
+      vnode.el = vnode.anchor = locateFragmentAnchor(
         currentHydrationNode!,
-        // there is not vapor slot anchor (<!--slot-->) injected in vdom component,
-        // so here use the fragment end anchor label
+        // locate the vdom fragment end anchor (<!--]-->), since no vapor slot
+        // anchor (<!--slot-->) is injected in vdom component
         ']',
       )
 
-      if (
-        (__DEV__ || __FEATURE_PROD_HYDRATION_MISMATCH_DETAILS__) &&
-        !vnode.anchor
-      ) {
+      if (__DEV__ && !vnode.anchor) {
         throw new Error(`vapor slot anchor node was not found.`)
       }
     })
@@ -397,7 +394,7 @@ function renderVDOMSlot(
       if (isValidSlot) {
         if (isHydrating) {
           // if slot content is a vnode, hydrate it
-          // otherwise, it is a vapor Block that is already hydrated during
+          // otherwise, it's a vapor Block that was already hydrated during
           // renderSlot
           if (isVNode(vnode)) {
             hydrateVNode(vnode!, parentComponent as any)