chore: tweaks

Author: edison1105

packages/compiler-ssr/src/ssrCodegenTransform.ts

@@ -410,7 +410,7 @@ function shouldProcessChildAsDynamic(
   if (dynamicNodeCount === 2) {
     return prevDynamicCount > 0
   }
-  // For three or more dynamic nodes, mark the intermediate node as dynamic
+  // For three or more dynamic nodes, mark the middle nodes as dynamic
   else if (dynamicNodeCount >= 3) {
     return prevDynamicCount > 0 && nextDynamicCount > 0
   }

packages/runtime-core/src/hydration.ts

@@ -25,14 +25,13 @@ import {
   getEscapedCssVarName,
   includeBooleanAttr,
   isBooleanAttr,
-  isDynamicAnchor,
   isKnownHtmlAttr,
   isKnownSvgAttr,
   isOn,
   isRenderableAttrValue,
   isReservedProp,
   isString,
-  isVaporFragmentEndAnchor,
+  isVaporAnchors,
   normalizeClass,
   normalizeStyle,
   stringifyStyle,
@@ -127,10 +126,8 @@ export function createHydrationFunctions(
 
   function nextSibling(node: Node) {
     let n = next(node)
-    // skip if:
-    // - dynamic anchors (`<!--[[-->`, `<!--][-->`)
-    // - vapor fragment end anchors (e.g. `<!--if-->`, `<!--for-->`)
-    if (n && (isDynamicAnchor(n) || isVaporFragmentEndAnchor(n))) {
+    // skip vapor mode specific anchors
+    if (n && isVaporAnchors(n)) {
       n = next(n)
     }
     return n
@@ -162,7 +159,8 @@ export function createHydrationFunctions(
     slotScopeIds: string[] | null,
     optimized = false,
   ): Node | null => {
-    if (isDynamicAnchor(node) || isVaporFragmentEndAnchor(node)) {
+    // skip vapor mode specific anchors
+    if (isVaporAnchors(node)) {
       node = nextSibling(node)!
     }
     optimized = optimized || !!vnode.dynamicChildren

packages/runtime-core/src/renderer.ts

@@ -107,7 +107,7 @@ export interface Renderer<HostElement = RendererElement> {
 
 export interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
   hydrate: RootHydrateFunction
-  hydrateNode: ReturnType<typeof createHydrationFunctions>[1] | undefined
+  hydrateNode: ReturnType<typeof createHydrationFunctions>[1]
 }
 
 export type ElementNamespace = 'svg' | 'mathml' | undefined

packages/runtime-vapor/src/apiCreateFor.ts

@@ -30,9 +30,9 @@ import { renderEffect } from './renderEffect'
 import { VaporVForFlags } from '../../shared/src/vaporFlags'
 import {
   currentHydrationNode,
-  findVaporFragmentAnchor,
   isHydrating,
   locateHydrationNode,
+  locateVaporFragmentAnchor,
 } from './dom/hydration'
 import {
   insertionAnchor,
@@ -97,13 +97,13 @@ export const createFor = (
   let parent: ParentNode | undefined | null
   let parentAnchor: Node
   if (isHydrating) {
-    parentAnchor = findVaporFragmentAnchor(
+    parentAnchor = locateVaporFragmentAnchor(
       currentHydrationNode!,
       FOR_ANCHOR_LABEL,
     )!
     if (__DEV__ && !parentAnchor) {
-      // TODO warn, should not happen
-      warn(`createFor anchor not found...`)
+      // this should not happen
+      throw new Error(`v-for fragment anchor node was not found.`)
     }
   } else {
     parentAnchor = __DEV__ ? createComment('for') : createTextNode()

packages/runtime-vapor/src/block.ts

@@ -9,12 +9,11 @@ import { createComment, createTextNode } from './dom/node'
 import { EffectScope, pauseTracking, resetTracking } from '@vue/reactivity'
 import {
   currentHydrationNode,
-  findVaporFragmentAnchor,
   isComment,
   isHydrating,
   locateHydrationNode,
+  locateVaporFragmentAnchor,
 } from './dom/hydration'
-import { warn } from '@vue/runtime-dom'
 
 export type Block =
   | Node
@@ -89,17 +88,17 @@ export class DynamicFragment extends VaporFragment {
   }
 
   hydrate(label: string): void {
-    // for `v-if="false"` the node will be an empty comment node use it as the anchor.
+    // for `v-if="false"` the node will be an empty comment, use it as the anchor.
     // otherwise, find next sibling vapor fragment anchor
     if (isComment(currentHydrationNode!, '')) {
       this.anchor = currentHydrationNode
     } else {
-      const anchor = findVaporFragmentAnchor(currentHydrationNode!, label)!
+      const anchor = locateVaporFragmentAnchor(currentHydrationNode!, label)!
       if (anchor) {
         this.anchor = anchor
       } else if (__DEV__) {
-        // TODO warning, should not happen
-        warn(`DynamicFragment anchor not found...`)
+        // this should not happen
+        throw new Error(`${label} fragment anchor node was not found.`)
       }
     }
   }

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

@@ -6,12 +6,11 @@ import {
   setInsertionState,
 } from '../insertionState'
 import {
-  _child,
   disableHydrationNodeLookup,
   enableHydrationNodeLookup,
   next,
 } from './node'
-import { isDynamicAnchor, isVaporFragmentEndAnchor } from '@vue/shared'
+import { isVaporAnchors, isVaporFragmentAnchor } from '@vue/shared'
 
 export let isHydrating = false
 export let currentHydrationNode: Node | null = null
@@ -33,7 +32,6 @@ function performHydration<T>(
 
     // optimize anchor cache lookup
     ;(Comment.prototype as any).$fs = undefined
-    ;(Node.prototype as any).$nc = undefined
     isOptimized = true
   }
   enableHydrationNodeLookup()
@@ -101,24 +99,29 @@ function adoptTemplateImpl(node: Node, template: string): Node | null {
   return node
 }
 
+const hydrationPositionMap = new WeakMap<ParentNode, Node>()
+
 function locateHydrationNodeImpl(hasFragmentAnchor?: boolean) {
   let node: Node | null
   // prepend / firstChild
   if (insertionAnchor === 0) {
-    node = _child(insertionParent!)
+    node = insertionParent!.firstChild
   } else if (insertionAnchor) {
-    // for dynamic children, use insertionAnchor as the node
+    // `insertionAnchor` is a Node, it is the DOM node to hydrate
+    // Template:   `...<span/><!----><span/>...`// `insertionAnchor` is the placeholder
+    // SSR Output: `...<span/>Content<span/>...`// `insertionAnchor` is the actual node
     node = insertionAnchor
   } else {
     node = insertionParent
-      ? insertionParent.$nc || insertionParent.lastChild
+      ? hydrationPositionMap.get(insertionParent) || insertionParent.lastChild
       : currentHydrationNode
 
-    // if the last child is a vapor fragment end anchor, find the previous one
-    if (hasFragmentAnchor && node && isVaporFragmentEndAnchor(node)) {
+    // if node is a vapor fragment anchor, find the previous one
+    if (hasFragmentAnchor && node && isVaporFragmentAnchor(node)) {
       node = node.previousSibling
       if (__DEV__ && !node) {
-        // TODO warning, should not happen
+        // this should not happen
+        throw new Error(`vapor fragment anchor previous node was not found.`)
       }
     }
 
@@ -153,7 +156,8 @@ function locateHydrationNodeImpl(hasFragmentAnchor?: boolean) {
     }
 
     if (insertionParent && node) {
-      insertionParent.$nc = node!.previousSibling
+      const prev = node.previousSibling
+      if (prev) hydrationPositionMap.set(insertionParent, prev)
     }
   }
 
@@ -166,10 +170,6 @@ function locateHydrationNodeImpl(hasFragmentAnchor?: boolean) {
   currentHydrationNode = node
 }
 
-export function isEmptyText(node: Node): node is Text {
-  return node.nodeType === 3 && !(node as Text).data.trim()
-}
-
 export function locateEndAnchor(
   node: Node | null,
   open = '[',
@@ -194,26 +194,26 @@ export function locateEndAnchor(
 
 export function isNonHydrationNode(node: Node): boolean {
   return (
-    // empty text nodes
-    isEmptyText(node) ||
-    // dynamic node anchors (<!--[[-->, <!--]]-->)
-    isDynamicAnchor(node) ||
-    // fragment end anchor (`<!--]-->`)
+    // empty text node
+    isEmptyTextNode(node) ||
+    // vdom fragment end anchor (`<!--]-->`)
     isComment(node, ']') ||
-    // vapor fragment end anchors
-    isVaporFragmentEndAnchor(node)
+    // vapor mode specific anchors
+    isVaporAnchors(node)
   )
 }
 
-export function findVaporFragmentAnchor(
+export function locateVaporFragmentAnchor(
   node: Node,
   anchorLabel: string,
-): Comment | null {
+): Comment | undefined {
   let n = node.nextSibling
   while (n) {
     if (isComment(n, anchorLabel)) return n
     n = n.nextSibling
   }
+}
 
-  return null
+export function isEmptyTextNode(node: Node): node is Text {
+  return node.nodeType === 3 && !(node as Text).data.trim()
 }