refactor: reuse hydration state

Author: edison1105

packages/runtime-vapor/src/component.ts

@@ -616,10 +616,8 @@ export function mountComponent(
     startMeasure(instance, `mount`)
   }
   if (instance.bm) invokeArrayFns(instance.bm)
-  if (!isHydrating) {
-    insert(instance.block, parent, anchor)
-    setComponentScopeId(instance)
-  }
+  insert(instance.block, parent, anchor)
+  if (!isHydrating) setComponentScopeId(instance)
   if (instance.m) queuePostFlushCb(() => invokeArrayFns(instance.m!))
   instance.isMounted = true
   if (__DEV__) {

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

@@ -1,7 +1,7 @@
 import { warn } from '@vue/runtime-dom'
 import {
   type ChildItem,
-  getHydrationState,
+  incrementIndexOffset,
   insertionAnchor,
   insertionParent,
   resetInsertionState,
@@ -30,9 +30,15 @@ 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
   }
   enableHydrationNodeLookup()
@@ -108,6 +114,7 @@ function adoptTemplateImpl(node: Node, template: string): Node | null {
         isComment(node.previousSibling!, '[')
       ) {
         node = node.parentNode!.insertBefore(createTextNode(' '), node)
+        incrementIndexOffset(node.parentNode!)
         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,36 +166,42 @@ 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 || node.parentNode !== insertionParent)) {

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)
@@ -70,21 +66,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]
 }
@@ -100,11 +102,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

@@ -275,6 +275,8 @@ export function optimizePropertyLookup(): void {
   proto.$transition = undefined
   proto.$key = undefined
   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,22 @@ 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')
@@ -32,4 +43,5 @@ export function template(html: string, root?: boolean) {
     if (root) (ret as any).$root = true
     return ret
   }
+  return fn
 }

packages/runtime-vapor/src/fragment.ts

@@ -24,6 +24,7 @@ import {
 } from './components/Transition'
 import { type VaporComponentInstance, isVaporComponent } from './component'
 import { isArray } from '@vue/shared'
+import { incrementIndexOffset } from './insertionState'
 
 export class VaporFragment<T extends Block = Block>
   implements TransitionOptions
@@ -185,6 +186,8 @@ export class DynamicFragment extends VaporFragment {
       (this.anchor = createComment(this.anchorLabel!)),
       nextSibling,
     )
+    // increment index offset since we dynamically inserted a comment node
+    incrementIndexOffset(parentNode!)
     advanceHydrationNode(this.anchor)
   }
 }