refactor: reuse hydration state

Author: edison1105

packages/runtime-vapor/src/block.ts

@@ -15,6 +15,7 @@ import {
   locateFragmentEndAnchor,
   locateHydrationNode,
 } from './dom/hydration'
+import { incrementIndexOffset } from './insertionState'
 
 export type Block =
   | Node
@@ -136,6 +137,8 @@ export class DynamicFragment extends VaporFragment {
         : createTextNode()),
       nextSibling,
     )
+    // increment index offset since we dynamically inserted a comment node
+    incrementIndexOffset(parentNode!)
     advanceHydrationNode(this.anchor)
   }
 }

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

@@ -1,7 +1,7 @@
 import { MismatchTypes, isMismatchAllowed, warn } from '@vue/runtime-dom'
 import {
   type ChildItem,
-  getHydrationState,
+  incrementIndexOffset,
   insertionAnchor,
   insertionParent,
   resetInsertionState,
@@ -36,9 +36,14 @@ function performHydration<T>(
     // optimize anchor cache lookup
     ;(Comment.prototype as any).$fe = undefined
     ;(Node.prototype as any).$pns = undefined
-    ;(Node.prototype as any).$idx = undefined
     ;(Node.prototype as any).$uc = undefined
+    ;(Node.prototype as any).$idx = undefined
     ;(Node.prototype as any).$children = undefined
+    ;(Node.prototype as any).$idxMap = undefined
+    ;(Node.prototype as any).$prevDynamicCount = undefined
+    ;(Node.prototype as any).$anchorCount = undefined
+    ;(Node.prototype as any).$appendIndex = undefined
+    ;(Node.prototype as any).$indexOffset = undefined
     isOptimized = true
   }
   enableHydrationNodeHelper()
@@ -113,7 +118,9 @@ function adoptTemplateImpl(node: Node, template: string): Node | null {
         isComment(node, ']') &&
         isComment(node.previousSibling!, '[')
       ) {
-        node = parentNode(node)!.insertBefore(createTextNode(), node)
+        const parent = parentNode(node)!
+        node = parent.insertBefore(createTextNode(), node)
+        incrementIndexOffset(parent)
         break
       }
     }
@@ -136,13 +143,19 @@ function adoptTemplateImpl(node: Node, template: string): Node | null {
 
 function locateHydrationNodeImpl(): void {
   let node: Node | null
-  if (insertionAnchor !== undefined) {
-    const hydrationState = getHydrationState(insertionParent!)!
-    const { prevDynamicCount, logicalChildren, appendAnchor } = hydrationState
+  let idxMap: number[] | undefined
+  if (insertionAnchor !== undefined && (idxMap = insertionParent!.$idxMap)) {
+    const {
+      $prevDynamicCount: prevDynamicCount = 0,
+      $appendIndex: appendIndex,
+      $indexOffset: indexOffset = 0,
+      $anchorCount: anchorCount = 0,
+    } = insertionParent!
     // prepend
     if (insertionAnchor === 0) {
-      // use prevDynamicCount as index to locate the hydration node
-      node = logicalChildren[prevDynamicCount]
+      // use prevDynamicCount as logical index to locate the hydration node
+      const realIndex = idxMap![prevDynamicCount] + indexOffset
+      node = insertionParent!.childNodes[realIndex]
     }
     // insert
     else if (insertionAnchor instanceof Node) {
@@ -153,48 +166,52 @@ function locateHydrationNodeImpl(): void {
       // consecutive insert operations locate the correct hydration node.
       let { $idx, $uc: usedCount } = insertionAnchor as ChildItem
       if (usedCount !== undefined) {
-        node = logicalChildren[$idx + usedCount + 1]
+        const realIndex = idxMap![$idx + usedCount + 1] + indexOffset
+        node = insertionParent!.childNodes[realIndex]
         usedCount++
       } else {
         node = insertionAnchor
         // first use of this anchor: it doesn't consume the next child
         // so we track unique anchor appearances for later offset correction
-        hydrationState.uniqueAnchorCount++
+        insertionParent!.$anchorCount = anchorCount + 1
         usedCount = 0
       }
       ;(insertionAnchor as ChildItem).$uc = usedCount
     }
     // append
     else {
-      if (appendAnchor) {
-        node = logicalChildren[(appendAnchor as ChildItem).$idx + 1]
+      let realIndex: number
+      if (appendIndex !== null && appendIndex !== undefined) {
+        realIndex = idxMap![appendIndex + 1] + indexOffset
+        node = insertionParent!.childNodes[realIndex]
       } else {
-        node =
+        if (insertionAnchor === null) {
           // insertionAnchor is null, indicates no previous static nodes
           // use the first child as hydration node
-          insertionAnchor === null
-            ? logicalChildren[0]
-            : // insertionAnchor is a number > 0
-              // indicates how many static nodes precede the node to append
-              // use it as index to locate the hydration node
-              logicalChildren[prevDynamicCount + insertionAnchor]
+          realIndex = idxMap![0] + indexOffset
+          node = insertionParent!.childNodes[realIndex]
+        } else {
+          // insertionAnchor is a number > 0
+          // indicates how many static nodes precede the node to append
+          // use it as index to locate the hydration node
+          realIndex = idxMap![prevDynamicCount + insertionAnchor] + indexOffset
+          node = insertionParent!.childNodes[realIndex]
+        }
       }
-      hydrationState.appendAnchor = node
+      insertionParent!.$appendIndex = (node as ChildItem).$idx
     }
 
-    hydrationState.prevDynamicCount++
+    insertionParent!.$prevDynamicCount = prevDynamicCount + 1
   } else {
     node = currentHydrationNode
-    if (insertionParent && (!node || parentNode(node) !== insertionParent)) {
-      node = _child(insertionParent)
+    if (insertionParent && (!node || node.parentNode !== insertionParent)) {
+      node = insertionParent.firstChild
     }
   }
 
   if (__DEV__ && !node) {
-    throw new Error(
-      `No current hydration node was found.\n` +
-        `this is likely a Vue internal bug.`,
-    )
+    // TODO more info
+    warn('Hydration mismatch in ', insertionParent)
   }
 
   resetInsertionState()

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

@@ -1,10 +1,6 @@
 /* @__NO_SIDE_EFFECTS__ */
 
-import {
-  type ChildItem,
-  type InsertionParent,
-  getHydrationState,
-} from '../insertionState'
+import type { ChildItem, InsertionParent } from '../insertionState'
 
 export function createElement(tagName: string): HTMLElement {
   return document.createElement(tagName)
@@ -74,21 +70,27 @@ export function _nthChild(node: InsertionParent, i: number): Node {
  */
 /* @__NO_SIDE_EFFECTS__ */
 export function __nthChild(node: Node, i: number): Node {
-  const hydrationState = getHydrationState(node as ParentNode)
-  if (hydrationState) {
-    const { prevDynamicCount, uniqueAnchorCount, logicalChildren } =
-      hydrationState
+  const parent = node as InsertionParent
+  if (parent.$idxMap) {
+    const {
+      $prevDynamicCount: prevDynamicCount = 0,
+      $anchorCount: anchorCount = 0,
+      $idxMap: idxMap,
+      $indexOffset: indexOffset = 0,
+    } = parent
     // prevDynamicCount tracks how many dynamic nodes have been processed
     // so far (prepend/insert/append).
     // For anchor-based insert, the first time an anchor is used we adopt the
-    // anchor node itself and do NOT consume the next child in `logicalChildren`,
+    // anchor node itself and do NOT consume the next child in `idxMap`,
     // yet prevDynamicCount is still incremented. This overcounts the base
     // offset by 1 per unique anchor that has appeared.
-    // uniqueAnchorCount equals the number of unique anchors seen, so we
+    // anchorCount equals the number of unique anchors seen, so we
     // subtract it to neutralize those "first-use doesn't consume" cases:
-    //   base = prevDynamicCount - uniqueAnchorCount
-    // Then index from this base: logicalChildren[base + i].
-    return logicalChildren[prevDynamicCount - uniqueAnchorCount + i]
+    //   base = prevDynamicCount - anchorCount
+    // Then index from this base: idxMap[base + i] + indexOffset.
+    const logicalIndex = prevDynamicCount - anchorCount + i
+    const realIndex = idxMap[logicalIndex] + indexOffset
+    return node.childNodes[realIndex]
   }
   return node.childNodes[i]
 }
@@ -104,11 +106,13 @@ export function _next(node: Node): Node {
  */
 /* @__NO_SIDE_EFFECTS__ */
 export function __next(node: Node): Node {
-  const hydrationState = getHydrationState(node.parentNode!)
-  if (hydrationState) {
-    const { logicalChildren } = hydrationState
+  const parent = node.parentNode! as InsertionParent
+  if (parent.$idxMap) {
+    const { $idxMap: idxMap, $indexOffset: indexOffset = 0 } = parent
     const { $idx, $uc: usedCount = 0 } = node as ChildItem
-    return logicalChildren[$idx + usedCount + 1]
+    const logicalIndex = $idx + usedCount + 1
+    const realIndex = idxMap[logicalIndex] + indexOffset
+    return node.parentNode!.childNodes[realIndex]
   }
   return node.nextSibling!
 }

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

@@ -403,6 +403,8 @@ export function optimizePropertyLookup(): void {
   isOptimized = true
   const proto = Element.prototype as any
   proto.$evtclick = undefined
+  proto.$children = undefined
+  proto.$idx = undefined
   proto.$root = false
   proto.$html =
     proto.$txt =

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

@@ -3,11 +3,26 @@ import { child, createElement, createTextNode } from './node'
 
 let t: HTMLTemplateElement
 
+export let currentTemplateFn: (Function & { $idxMap?: number[] }) | undefined =
+  undefined
+
+export function resetTemplateFn(): void {
+  currentTemplateFn = undefined
+}
+
 /*! #__NO_SIDE_EFFECTS__ */
-export function template(html: string, root?: boolean) {
+export function template(
+  html: string,
+  root?: boolean,
+): () => Node & { $root?: true } {
   let node: Node
-  return (): Node & { $root?: true } => {
+  const fn = () => {
     if (isHydrating) {
+      currentTemplateFn = fn
+      if (__DEV__ && !currentHydrationNode) {
+        // TODO this should not happen
+        throw new Error('No current hydration node')
+      }
       // do not cache the adopted node in node because it contains child nodes
       // this avoids duplicate rendering of children
       const adopted = adoptTemplate(currentHydrationNode!, html)!
@@ -27,4 +42,5 @@ export function template(html: string, root?: boolean) {
     if (root) (ret as any).$root = true
     return ret
   }
+  return fn
 }