@remix-run/ui 0.4.0 → 0.6.0

package/src/runtime/reconcile.ts

@@ -1,33 +1,43 @@
 import type { Component, ComponentHandle, FrameContent, FrameHandle } from './component.ts'
-import { createComponent, Frame } from './component.ts'
-import type { Frame as FrameInstance, FrameRuntime } from './frame.ts'
-import { createFrame } from './frame.ts'
+import { createComponent } from './component.ts'
+import type { FrameRuntime } from './frame.ts'
+import { createFrame, isFrameRuntime } from './frame.ts'
+import { unwrapFrameResolution } from './frame-resolution.ts'
 import { createRangeRoot } from './vdom.ts'
 import type {
+  CommittedFragmentNode,
+  CommittedFrameNode,
+  CommittedNonRenderNode,
   ComponentNode,
   CommittedComponentNode,
   CommittedHostNode,
   CommittedTextNode,
+  ControlledReflectionState,
+  DirectEventBinding,
+  DirectEventState,
+  FrameNode,
   HostNode,
+  MountingComponentNode,
+  ReconcileContext,
+  RuntimeHostProps,
   TextNode,
-  VNode,
-  VNodeType,
+  VNodeInput,
+  VNodeParent,
+  CommittedVNode,
 } from './vnode.ts'
 import {
   isCommittedComponentNode,
-  isComponentNode,
   isCommittedHostNode,
   isCommittedTextNode,
   isFragmentNode,
   isHostNode,
-  isNonRenderNode,
-  isTextNode,
   findContextFromAncestry,
 } from './vnode.ts'
 import { invariant } from './invariant.ts'
 import { patchHostProps } from './core/props.ts'
 import type { StyleManager } from '../style/index.ts'
-import type { ElementProps } from './jsx.ts'
+import type { ElementFunction } from './element-function.ts'
+import type { Key } from './key.ts'
 import { skipComments, logHydrationMismatch } from './client-entries.ts'
 import type { Scheduler } from './scheduler.ts'
 import { toVNode } from './to-vnode.ts'
@@ -44,6 +54,8 @@ import {
   type MixinRuntimeState,
 } from './mixins/mixin.ts'
 import { isOnMixinDescriptor, type OnMixinDescriptor } from './mixins/on-mixin.ts'
+import { createComponentErrorEvent } from './error-event.ts'
+import { componentStalenessCheck } from './refresh.ts'
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
 
@@ -54,45 +66,41 @@ let activeSchedulerUpdateParents: ParentNode[] | undefined
 
 // Compute SVG context for a node based on its parent and type.
 // Returns true if the node is within an SVG subtree, false otherwise.
-function getSvgContext(vParent: VNode, nodeType: VNodeType): boolean {
+function getSvgContext(vParent: VNodeParent, node: VNodeInput): boolean {
   // Only host elements (strings) can affect SVG context
-  if (typeof nodeType === 'string') {
+  if (node.kind === 'host') {
     // svg element creates SVG context
-    if (nodeType === 'svg') return true
+    if (node.type === 'svg') return true
     // foreignObject switches back to HTML context
-    if (nodeType === 'foreignObject') return false
+    if (node.type === 'foreignObject') return false
   }
   // Otherwise inherit from parent
-  return vParent._svg ?? false
+  return vParent._svg
 }
 
-function getHostProps(node: HostNode | CommittedHostNode): ElementProps {
-  return node._mixedProps ?? node.props
+function getHostProps(node: HostNode | CommittedHostNode): RuntimeHostProps {
+  return '_mixedProps' in node ? node._mixedProps : node.props
 }
 
 function markNodePersistedByMixins(node: CommittedHostNode, domParent: ParentNode, token: number) {
-  node._persistedByMixins = true
-  node._persistedParentByMixins = domParent
-  node._persistedRemovalToken = token
+  node._persistence = { parent: domParent, token }
   persistedMixinNodes.add(node)
-  bindMixinRuntime(node._mixState as MixinRuntimeState | undefined, undefined)
+  bindMixinRuntime(node._mixState, undefined)
 }
 
 function unmarkNodePersistedByMixins(node: CommittedHostNode) {
-  node._persistedByMixins = false
-  node._persistedParentByMixins = undefined
-  node._persistedRemovalToken = undefined
+  node._persistence = undefined
   persistedMixinNodes.delete(node)
 }
 
 function findMatchingPersistedMixinNode(
   type: string,
-  key: string | undefined,
+  key: Key | undefined,
   domParent: ParentNode,
 ): CommittedHostNode | null {
   if (key == null) return null
   for (let node of persistedMixinNodes) {
-    if (node._persistedParentByMixins !== domParent) continue
+    if (node._persistence?.parent !== domParent) continue
     if (node.type !== type) continue
     if (node.key !== key) continue
     return node
@@ -100,33 +108,10 @@ function findMatchingPersistedMixinNode(
   return null
 }
 
-type ControlledReflectionState = {
-  disposed: boolean
-  listenersAttached: boolean
-  pendingRestoreVersion: number
-  managesValue: boolean
-  managesChecked: boolean
-  hasControlledValue: boolean
-  controlledValue: unknown
-  hasControlledChecked: boolean
-  controlledChecked: unknown
-  onInput: () => void
-  onChange: () => void
-}
-
-type DirectEventBinding = {
-  type: string
-  handler: (event: Event, signal: AbortSignal) => void | Promise<void>
-  capture: boolean
-  stableHandler: ((event: Event) => void) | null
-  reentry: AbortController | null
-}
-
-type DirectEventState = {
-  bindings: DirectEventBinding[]
-}
-
 const EMPTY_DIRECT_EVENT_DESCRIPTORS: OnMixinDescriptor[] = []
+const EMPTY_COMMITTED_CHILDREN: CommittedVNode[] = []
+
+type HydrationCursor = { current: Node | null | undefined }
 
 function shouldRestoreControlledReflectionOnInput(
   node: CommittedHostNode,
@@ -144,7 +129,7 @@ function ensureControlledReflection(
   node: CommittedHostNode,
   scheduler: Scheduler,
 ): ControlledReflectionState {
-  let existing = node._controlledState as ControlledReflectionState | undefined
+  let existing = node._controlledState
   if (existing) return existing
 
   let state: ControlledReflectionState = {
@@ -178,8 +163,8 @@ function ensureControlledReflection(
   return state
 }
 
-function syncControlledReflection(node: CommittedHostNode, props: ElementProps): void {
-  let state = node._controlledState as ControlledReflectionState | undefined
+function syncControlledReflection(node: CommittedHostNode, props: RuntimeHostProps): void {
+  let state = node._controlledState
   if (!state || state.disposed) return
 
   state.managesValue = canManageValue(node.type, node._dom)
@@ -191,7 +176,7 @@ function syncControlledReflection(node: CommittedHostNode, props: ElementProps):
   state.pendingRestoreVersion++
 }
 
-function shouldTrackControlledReflection(props: ElementProps): boolean {
+function shouldTrackControlledReflection(props: RuntimeHostProps): boolean {
   return hasControlledValueProp(props) || hasControlledCheckedProp(props)
 }
 
@@ -222,7 +207,7 @@ function restoreControlledReflections(
 }
 
 function teardownControlledReflection(node: CommittedHostNode): void {
-  let state = node._controlledState as ControlledReflectionState | undefined
+  let state = node._controlledState
   if (!state) return
   state.disposed = true
   state.pendingRestoreVersion++
@@ -233,16 +218,25 @@ function teardownControlledReflection(node: CommittedHostNode): void {
   }
 }
 
+// See abandonDirectEventListeners: skips removeEventListener for discarded subtrees.
+function abandonControlledReflection(node: CommittedHostNode): void {
+  let state = node._controlledState
+  if (!state) return
+  state.disposed = true
+  state.pendingRestoreVersion++
+  state.listenersAttached = false
+}
+
 function canManageValue(type: string, element: Element): boolean {
   if (type === 'progress') return false
   return canReflectProperty(element, 'value')
 }
 
-function hasControlledValueProp(props: ElementProps): boolean {
+function hasControlledValueProp(props: RuntimeHostProps): boolean {
   return 'value' in props && props.value !== undefined
 }
 
-function hasControlledCheckedProp(props: ElementProps): boolean {
+function hasControlledCheckedProp(props: RuntimeHostProps): boolean {
   return 'checked' in props && props.checked !== undefined
 }
 
@@ -263,29 +257,28 @@ function setPropertyReflection(element: Element, key: string, value: unknown): v
   element[key] = value == null ? '' : value
 }
 
+type ResolvedHostProps = {
+  props: RuntimeHostProps
+  mixState?: MixinRuntimeState
+  directEventDescriptors?: OnMixinDescriptor[]
+}
+
 function resolveNodeMixProps(
-  node: HostNode,
+  node: HostNode | CommittedHostNode,
+  parent: VNodeParent,
   frame: FrameHandle,
   scheduler: Scheduler,
   state?: MixinRuntimeState,
-): ElementProps {
+): ResolvedHostProps {
   let mix = node.props.mix
   let directEventDescriptors = resolveDirectEventDescriptors(mix)
   if (directEventDescriptors) {
-    if (state) {
-      teardownMixins(state)
-    }
-    node._mixState = undefined
-    node._mixedProps = node.props
-    node._directEventDescriptors = directEventDescriptors
-    return node.props
+    if (state) teardownMixins(state)
+    return { props: node.props, directEventDescriptors }
   }
 
-  node._directEventDescriptors = undefined
   if (state == null && (mix == null || (Array.isArray(mix) && mix.length === 0))) {
-    node._mixState = undefined
-    node._mixedProps = node.props
-    return node.props
+    return { props: node.props }
   }
 
   let resolved = resolveMixedProps({
@@ -297,17 +290,21 @@ function resolveNodeMixProps(
         return undefined
       }
 
-      return findContextFromAncestry(node, type as Component)
+      return findContextFromAncestry(parent, type)
     },
     props: node.props,
     state,
   })
-  node._mixState = resolved.state
+  return { props: resolved.props, mixState: resolved.state }
+}
+
+function applyResolvedHostProps(node: CommittedHostNode, resolved: ResolvedHostProps): void {
   node._mixedProps = resolved.props
-  return resolved.props
+  node._mixState = resolved.mixState
+  node._directEventDescriptors = resolved.directEventDescriptors
 }
 
-function resolveDirectEventDescriptors(mix: ElementProps['mix']): OnMixinDescriptor[] | null {
+function resolveDirectEventDescriptors(mix: RuntimeHostProps['mix']): OnMixinDescriptor[] | null {
   if (!mix) return EMPTY_DIRECT_EVENT_DESCRIPTORS
   if (!Array.isArray(mix)) {
     return isOnMixinDescriptor(mix) ? [mix] : null
@@ -317,18 +314,18 @@ function resolveDirectEventDescriptors(mix: ElementProps['mix']): OnMixinDescrip
 }
 
 function areOnMixinDescriptors(descriptors: unknown[]): descriptors is OnMixinDescriptor[] {
-  for (let item of descriptors) {
-    if (!isOnMixinDescriptor(item)) return false
+  for (let i = 0; i < descriptors.length; i++) {
+    if (!isOnMixinDescriptor(descriptors[i])) return false
   }
   return true
 }
 
 function enqueueMixinBindingUpdate(
-  this: MixinRuntimeBinding,
+  this: MixinRuntimeBinding<CommittedHostNode>,
   done: (signal: AbortSignal) => void,
 ): void {
-  let node = this.target as CommittedHostNode
-  let state = node._mixState as MixinRuntimeState | undefined
+  let node = this.target
+  let state = node._mixState
   this.scheduler.enqueueWork([
     () => {
       if (state?.aborted) {
@@ -338,11 +335,12 @@ function enqueueMixinBindingUpdate(
 
       dispatchMixinBeforeUpdate(state)
       let prevProps = getHostProps(node)
-      let nextProps = resolveNodeMixProps(node, this.frame, this.scheduler, state)
-      patchHostProps(prevProps, nextProps, this.node)
-      if (node._controlledState || shouldTrackControlledReflection(nextProps)) {
+      let resolved = resolveNodeMixProps(node, node._parent, this.frame, this.scheduler, state)
+      applyResolvedHostProps(node, resolved)
+      patchHostProps(prevProps, resolved.props, this.node)
+      if (node._controlledState || shouldTrackControlledReflection(resolved.props)) {
         ensureControlledReflection(node, this.scheduler)
-        syncControlledReflection(node, nextProps)
+        syncControlledReflection(node, resolved.props)
       }
 
       dispatchMixinCommit(state)
@@ -359,12 +357,12 @@ function bindNodeMixRuntime(
   reclaimed: boolean = false,
   parent?: ParentNode,
 ) {
-  let state = node._mixState as MixinRuntimeState | undefined
+  let state = node._mixState
   bindMixinRuntime(
     state,
     {
       node: node._dom,
-      parent: parent ?? (node._dom.parentNode as ParentNode),
+      parent: parent ?? getRequiredDomParent(node._dom),
       key: node.key,
       target: node,
       frame,
@@ -375,12 +373,18 @@ function bindNodeMixRuntime(
   )
 }
 
-function isHeadHostNode(node: HostNode): boolean {
+function isHeadHostNode(node: HostNode | CommittedHostNode): boolean {
   if (node.type === 'head') return true
   if (node.type.length !== 4) return false
   return node.type.toLowerCase() === 'head'
 }
 
+function getRequiredDomParent(node: Node): ParentNode {
+  let parent = node.parentNode
+  invariant(parent, 'Expected mounted host node to have a DOM parent')
+  return parent
+}
+
 function getDocumentHead(domParent: ParentNode): HTMLHeadElement | null {
   if (domParent instanceof Document) {
     return domParent.head
@@ -391,126 +395,199 @@ function getDocumentHead(domParent: ParentNode): HTMLHeadElement | null {
   return null
 }
 
+function commitNonRenderNode(
+  node: VNodeInput & { kind: 'empty' },
+  parent: VNodeParent,
+  svg: boolean,
+): CommittedNonRenderNode {
+  let committed = node as unknown as CommittedNonRenderNode
+  committed._parent = parent
+  committed._svg = svg
+  return committed
+}
+
+function commitTextNode(
+  node: TextNode,
+  parent: VNodeParent,
+  svg: boolean,
+  dom: Text,
+): CommittedTextNode {
+  let committed = node as unknown as CommittedTextNode
+  committed._parent = parent
+  committed._svg = svg
+  committed._dom = dom
+  return committed
+}
+
+function beginFragmentNode(
+  node: VNodeInput & { kind: 'fragment' },
+  parent: VNodeParent,
+  svg: boolean,
+): CommittedFragmentNode {
+  let committed = node as unknown as CommittedFragmentNode
+  committed._parent = parent
+  committed._svg = svg
+  committed._children = EMPTY_COMMITTED_CHILDREN
+  return committed
+}
+
+function commitHostNode(
+  node: HostNode,
+  parent: VNodeParent,
+  svg: boolean,
+  dom: Element,
+  resolved: ResolvedHostProps,
+  children: CommittedVNode[] = EMPTY_COMMITTED_CHILDREN,
+): CommittedHostNode {
+  let committed = node as unknown as CommittedHostNode
+  committed._parent = parent
+  committed._svg = svg
+  committed._dom = dom
+  committed._children = children
+  committed._mixedProps = resolved.props
+  committed._mixState = resolved.mixState
+  committed._directEventDescriptors = resolved.directEventDescriptors
+  return committed
+}
+
+function beginComponentNode(
+  node: ComponentNode,
+  parent: VNodeParent,
+  svg: boolean,
+  handle: ComponentHandle,
+  context: ReconcileContext,
+): MountingComponentNode {
+  let mounting = node as unknown as MountingComponentNode
+  mounting._parent = parent
+  mounting._svg = svg
+  mounting._handle = handle
+  mounting._context = context
+  return mounting
+}
+
+function commitComponentNode(
+  node: MountingComponentNode,
+  content: CommittedVNode,
+): CommittedComponentNode {
+  let committed = node as CommittedComponentNode
+  committed._content = content
+  return committed
+}
+
 export function diffVNodes(
-  curr: VNode | null,
-  next: VNode,
+  curr: CommittedVNode | null,
+  next: VNodeInput,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
   anchor?: Node,
-  rootCursor?: Node | null,
-): Node | null | undefined {
-  next._parent = vParent // set parent for initial render context lookups
-  next._svg = getSvgContext(vParent, next.type)
-
-  // new
+  cursor?: HydrationCursor,
+): CommittedVNode {
   if (curr === null) {
-    return insert(
-      next,
-      domParent,
-      frame,
-      scheduler,
-      styles,
-      vParent,
-      rootTarget,
-      anchor,
-      rootCursor,
-    )
-  }
-
-  if (curr.type !== next.type) {
-    replace(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor)
-    return rootCursor
-  }
-
-  if (isNonRenderNode(curr) && isNonRenderNode(next)) {
-    return rootCursor
-  }
-
-  if (isCommittedTextNode(curr) && isTextNode(next)) {
-    diffText(curr, next, vParent)
-    return rootCursor
-  }
-
-  if (isCommittedHostNode(curr) && isHostNode(next)) {
-    diffHost(curr, next, frame, scheduler, styles, vParent, rootTarget)
-    return rootCursor
+    return insert(next, domParent, vParent, context, anchor, cursor)
   }
 
-  if (isCommittedComponentNode(curr) && isComponentNode(next)) {
-    diffComponent(curr, next, frame, scheduler, styles, domParent, vParent, rootTarget)
-    return rootCursor
+  if (
+    componentStalenessCheck !== null &&
+    curr.kind === 'component' &&
+    next.kind === 'component' &&
+    componentStalenessCheck(curr.type) === true
+  ) {
+    return replace(curr, next, domParent, vParent, context, anchor)
   }
 
-  if (isFragmentNode(curr) && isFragmentNode(next)) {
-    diffChildren(
-      curr._children,
-      next._children,
-      domParent,
-      frame,
-      scheduler,
-      styles,
-      next,
-      rootTarget,
-      undefined,
-      anchor,
-    )
-    return rootCursor
+  if (curr.kind !== next.kind || curr.type !== next.type) {
+    return replace(curr, next, domParent, vParent, context, anchor)
   }
 
-  if (curr.type === Frame && next.type === Frame) {
-    diffFrame(curr, next, domParent, frame, scheduler, styles, vParent, rootTarget, anchor)
-    return rootCursor
+  switch (next.kind) {
+    case 'host': {
+      return diffHost(curr as CommittedHostNode, next, vParent, context)
+    }
+    case 'text': {
+      return diffText(curr as CommittedTextNode, next, vParent, getSvgContext(vParent, next))
+    }
+    case 'empty': {
+      return commitNonRenderNode(next, vParent, getSvgContext(vParent, next))
+    }
+    case 'fragment': {
+      let childInputs = next._children
+      let committed = beginFragmentNode(next, vParent, getSvgContext(vParent, next))
+      committed._children = diffChildren(
+        (curr as CommittedFragmentNode)._children,
+        childInputs,
+        domParent,
+        committed,
+        context,
+        undefined,
+        anchor,
+      )
+      return committed
+    }
+    case 'frame': {
+      return diffFrame(
+        curr as CommittedFrameNode,
+        next,
+        domParent,
+        vParent,
+        context,
+        getSvgContext(vParent, next),
+        anchor,
+      )
+    }
+    case 'component': {
+      return diffComponent(
+        curr as CommittedComponentNode,
+        next,
+        domParent,
+        vParent,
+        context,
+        getSvgContext(vParent, next),
+        anchor,
+        cursor,
+      )
+    }
   }
-
-  invariant(false, 'Unexpected diff case')
 }
 
 function replace(
-  curr: VNode,
-  next: VNode,
+  curr: CommittedVNode,
+  next: VNodeInput,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
   anchor?: Node,
-) {
+): CommittedVNode {
   let currAnchor = findFirstDomAnchor(curr)
   if (currAnchor && currAnchor.parentNode === domParent) {
     let replacementAnchor = document.createComment('rmx:replace')
     domParent.insertBefore(replacementAnchor, currAnchor)
     try {
-      remove(curr, domParent, scheduler, styles)
-      insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor)
+      remove(curr, domParent, context)
+      return insert(next, domParent, vParent, context, replacementAnchor)
     } finally {
       replacementAnchor.parentNode?.removeChild(replacementAnchor)
     }
-    return
   }
 
   let replacementAnchor = findNextSiblingDomAnchor(curr) ?? anchor
-  remove(curr, domParent, scheduler, styles)
-  insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor)
+  remove(curr, domParent, context)
+  return insert(next, domParent, vParent, context, replacementAnchor)
 }
 
 function diffHost(
   curr: CommittedHostNode,
   next: HostNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
-) {
-  let mixState = curr._mixState as MixinRuntimeState | undefined
+  vParent: VNodeParent,
+  context: ReconcileContext,
+): CommittedHostNode {
+  let { frame, scheduler, styles } = context
+  let mixState = curr._mixState
   let currProps = getHostProps(curr)
-  let nextProps = resolveNodeMixProps(next, frame, scheduler, mixState)
-  let nextMixState = next._mixState as MixinRuntimeState | undefined
+  let resolved = resolveNodeMixProps(next, vParent, frame, scheduler, mixState)
+  let childInputs = next._children
+  let nextProps = resolved.props
+  let nextMixState = resolved.mixState
   let shouldDispatchMixinLifecycle =
     (nextMixState?.runners.length ?? 0) > 0 && shouldDispatchInlineMixinLifecycle(curr._dom)
   if (shouldDispatchMixinLifecycle) {
@@ -521,62 +598,49 @@ function diffHost(
   if (nextProps.innerHTML != null) {
     // innerHTML is set, update it if changed
     if (currProps.innerHTML !== nextProps.innerHTML) {
-      curr._dom.innerHTML = nextProps.innerHTML as string
+      curr._dom.innerHTML = nextProps.innerHTML
     }
   } else if (currProps.innerHTML != null) {
     // innerHTML was removed, clear it before adding children
     curr._dom.innerHTML = ''
   }
 
-  diffChildren(
-    curr._children,
-    next._children,
-    curr._dom,
-    frame,
-    scheduler,
-    styles,
-    next,
-    rootTarget,
-  )
+  let committed = commitHostNode(next, vParent, getSvgContext(vParent, next), curr._dom, resolved)
+  committed._directEventState = curr._directEventState
+  committed._controlledState = curr._controlledState
+  committed._children = diffChildren(curr._children, childInputs, curr._dom, committed, context)
   patchHostProps(currProps, nextProps, curr._dom)
 
-  next._dom = curr._dom
-  next._parent = vParent
-  next._controller = curr._controller
-  next._directEventState = curr._directEventState
-  next._controlledState = curr._controlledState
-  syncDirectEventListeners(next as CommittedHostNode)
+  syncDirectEventListeners(committed)
 
-  if (next._controlledState || shouldTrackControlledReflection(nextProps)) {
-    ensureControlledReflection(next as CommittedHostNode, scheduler)
-    syncControlledReflection(next as CommittedHostNode, nextProps)
+  if (committed._controlledState || shouldTrackControlledReflection(nextProps)) {
+    ensureControlledReflection(committed, scheduler)
+    syncControlledReflection(committed, nextProps)
   }
 
-  if (next._mixState) {
-    bindNodeMixRuntime(next as CommittedHostNode, frame, scheduler, styles)
+  if (committed._mixState) {
+    bindNodeMixRuntime(committed, frame, scheduler, styles)
   }
   if (shouldDispatchMixinLifecycle) {
     scheduler.enqueueCommitPhase([() => dispatchMixinCommit(nextMixState)])
   }
 
-  return
+  return committed
 }
 
-function setupHostNode(node: HostNode, dom: Element, scheduler: Scheduler): void {
-  node._dom = dom
+function setupHostNode(node: CommittedHostNode, scheduler: Scheduler): void {
   let props = getHostProps(node)
-  let committedNode = node as CommittedHostNode
 
-  syncDirectEventListeners(committedNode)
+  syncDirectEventListeners(node)
 
   if (shouldTrackControlledReflection(props)) {
-    ensureControlledReflection(committedNode, scheduler)
-    syncControlledReflection(committedNode, props)
+    ensureControlledReflection(node, scheduler)
+    syncControlledReflection(node, props)
   }
 }
 
 function syncDirectEventListeners(node: CommittedHostNode): void {
-  let descriptors = node._directEventDescriptors as OnMixinDescriptor[] | undefined
+  let descriptors = node._directEventDescriptors
   if (!descriptors) {
     teardownDirectEventListeners(node)
     return
@@ -586,7 +650,7 @@ function syncDirectEventListeners(node: CommittedHostNode): void {
     return
   }
 
-  let state = node._directEventState as DirectEventState | undefined
+  let state = node._directEventState
   if (!state) {
     state = { bindings: [] }
     node._directEventState = state
@@ -594,8 +658,12 @@ function syncDirectEventListeners(node: CommittedHostNode): void {
 
   let bindings = state.bindings
   for (let index = 0; index < descriptors.length; index++) {
-    let descriptor = descriptors[index]
-    let [type, handler, captureBoolean = false] = descriptor.args
+    // Indexed access instead of array destructuring: destructuring goes through
+    // the iterator protocol and allocates on every host-node update.
+    let args = descriptors[index].args
+    let type = args[0]
+    let handler = args[1]
+    let captureBoolean = args[2] ?? false
     let binding = bindings[index]
 
     if (!binding) {
@@ -659,7 +727,7 @@ function removeDirectEventBinding(dom: Element, binding: DirectEventBinding): vo
 }
 
 function teardownDirectEventListeners(node: CommittedHostNode): void {
-  let state = node._directEventState as DirectEventState | undefined
+  let state = node._directEventState
   if (!state) return
 
   for (let binding of state.bindings) {
@@ -670,38 +738,56 @@ function teardownDirectEventListeners(node: CommittedHostNode): void {
   node._directEventState = undefined
 }
 
+// Teardown for a node whose DOM subtree is being discarded wholesale: abort
+// pending handler work but skip removeEventListener — the listeners die with
+// the detached node, and removing them one-by-one dominates large teardowns.
+function abandonDirectEventListeners(node: CommittedHostNode): void {
+  let state = node._directEventState
+  if (!state) return
+
+  for (let binding of state.bindings) {
+    binding.reentry?.abort(new DOMException('', 'AbortError'))
+    binding.reentry = null
+  }
+
+  state.bindings.length = 0
+  node._directEventState = undefined
+}
+
 function invokeDirectEventBinding(binding: DirectEventBinding, event: Event): void {
   binding.reentry?.abort(new DOMException('', 'EventReentry'))
   binding.reentry = new AbortController()
   void binding.handler(event, binding.reentry.signal)
 }
 
-function diffText(curr: CommittedTextNode, next: TextNode, vParent: VNode) {
+function diffText(
+  curr: CommittedTextNode,
+  next: TextNode,
+  vParent: VNodeParent,
+  svg: boolean,
+): CommittedTextNode {
   if (curr._text !== next._text) {
     curr._dom.textContent = next._text
   }
-  next._dom = curr._dom
-  next._parent = vParent
+  return commitTextNode(next, vParent, svg, curr._dom)
 }
 
 function insert(
-  node: VNode,
+  node: VNodeInput,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
   anchor?: Node,
-  cursor?: Node | null,
-): Node | null | undefined {
-  node._parent = vParent // set parent for initial render context lookups
-  node._svg = getSvgContext(vParent, node.type)
+  cursor?: HydrationCursor,
+): CommittedVNode {
+  let { frame, scheduler, styles } = context
+  let svg = getSvgContext(vParent, node)
+  let hydrationNode = cursor?.current
 
   // Stop hydration if cursor has reached the anchor (end boundary)
   // Check BEFORE skipComments to prevent escaping range root markers
-  if (cursor && anchor && cursor === anchor) {
-    cursor = null
+  if (hydrationNode && anchor && hydrationNode === anchor) {
+    hydrationNode = null
   }
 
   // Preserve frame-start markers for non-Frame nodes too, so a following <Frame>
@@ -709,297 +795,280 @@ function insert(
   // claim its rmx:f marker during hydration instead of being re-inserted fresh.
   // A rmx:f marker always belongs to a <Frame>, so no non-Frame node should
   // consume one.
-  cursor = skipCommentsExceptFrameStart(cursor ?? null)
+  hydrationNode = skipCommentsExceptFrameStart(hydrationNode ?? null)
 
   // Also check after skipComments in case we skipped past the anchor
-  if (cursor && anchor && cursor === anchor) {
-    cursor = null
+  if (hydrationNode && anchor && hydrationNode === anchor) {
+    hydrationNode = null
   }
+  if (cursor) cursor.current = hydrationNode
 
   let doInsert = anchor
     ? (dom: Node) => domParent.insertBefore(dom, anchor)
     : (dom: Node) => domParent.appendChild(dom)
 
-  if (isNonRenderNode(node)) {
-    return cursor
+  if (node.kind === 'empty') {
+    return commitNonRenderNode(node, vParent, svg)
   }
 
-  if (isTextNode(node)) {
-    if (cursor instanceof Text) {
-      node._parent = vParent
+  if (node.kind === 'text') {
+    if (hydrationNode instanceof Text) {
       // Handle text node consolidation: server renders adjacent text as single node
       // e.g., <span>Hello {world}</span> → server: "Hello world", client: ["Hello ", "world"]
-      if (cursor.data !== node._text) {
-        if (cursor.data.startsWith(node._text) && node._text.length < cursor.data.length) {
+      if (hydrationNode.data !== node._text) {
+        if (
+          hydrationNode.data.startsWith(node._text) &&
+          node._text.length < hydrationNode.data.length
+        ) {
           // Consolidation case: split the text node at the boundary
           // cursor becomes the first part (node._text), remainder is returned for next vnode
-          let remainder = cursor.splitText(node._text.length)
-          node._dom = cursor
-          return remainder
+          let remainder = hydrationNode.splitText(node._text.length)
+          if (cursor) cursor.current = remainder
+          return commitTextNode(node, vParent, svg, hydrationNode)
         }
         // Genuine mismatch - correct it
-        logHydrationMismatch('text mismatch', cursor.data, node._text)
-        cursor.data = node._text
+        logHydrationMismatch('text mismatch', hydrationNode.data, node._text)
+        hydrationNode.data = node._text
       }
-      node._dom = cursor
-      return cursor.nextSibling
+      if (cursor) cursor.current = hydrationNode.nextSibling
+      return commitTextNode(node, vParent, svg, hydrationNode)
     }
     let dom = document.createTextNode(node._text)
-    node._dom = dom
-    node._parent = vParent
     doInsert(dom)
-    return cursor
+    return commitTextNode(node, vParent, svg, dom)
   }
 
-  if (isHostNode(node)) {
-    let hostProps = resolveNodeMixProps(node, frame, scheduler)
+  if (node.kind === 'host') {
+    let resolved = resolveNodeMixProps(node, vParent, frame, scheduler)
+    let hostProps = resolved.props
+    let childInputs = node._children
 
     if (isHeadHostNode(node)) {
       let targetHead = getDocumentHead(domParent)
       if (targetHead) {
-        let childCursor = cursor
-        if (cursor instanceof Element && cursor.tagName.toLowerCase() === 'head') {
-          childCursor = cursor.firstChild
-          let nextCursor = cursor.nextSibling
-          if (cursor !== targetHead) {
-            while (cursor.firstChild) {
-              targetHead.appendChild(cursor.firstChild)
+        let childCursor = cursor ? { current: hydrationNode } : undefined
+        if (hydrationNode instanceof Element && hydrationNode.tagName.toLowerCase() === 'head') {
+          if (childCursor) childCursor.current = hydrationNode.firstChild
+          let nextCursor = hydrationNode.nextSibling
+          if (hydrationNode !== targetHead) {
+            while (hydrationNode.firstChild) {
+              targetHead.appendChild(hydrationNode.firstChild)
             }
-            cursor.remove()
+            hydrationNode.remove()
           }
-          cursor = nextCursor
+          if (cursor) cursor.current = nextCursor
         }
 
+        let committed = commitHostNode(node, vParent, svg, targetHead, resolved)
         // Render explicit <head> children directly into document.head.
-        diffChildren(
+        committed._children = diffChildren(
           null,
-          node._children,
+          childInputs,
           targetHead,
-          frame,
-          scheduler,
-          styles,
-          node,
-          rootTarget,
+          committed,
+          context,
           childCursor,
         )
         patchHostProps({}, hostProps, targetHead)
-        setupHostNode(node, targetHead, scheduler)
-        if (node._mixState) {
-          bindNodeMixRuntime(node as CommittedHostNode, frame, scheduler, styles)
+        setupHostNode(committed, scheduler)
+        if (committed._mixState) {
+          bindNodeMixRuntime(committed, frame, scheduler, styles)
         }
-        return cursor
+        return committed
       }
     }
 
     // Check for matching mixin-persisted node that can be reclaimed
     let persistedNode = findMatchingPersistedMixinNode(node.type, node.key, domParent)
     if (persistedNode) {
-      reclaimPersistedMixinNode(persistedNode, node, frame, scheduler, styles, vParent, rootTarget)
-      return cursor
+      return reclaimPersistedMixinNode(persistedNode, node, vParent, context)
     }
 
-    if (cursor instanceof Element) {
+    if (hydrationNode instanceof Element) {
       // SVG elements have case-sensitive tag names (e.g. linearGradient, clipPath)
       // HTML elements are case-insensitive, so we lowercase for comparison
-      let cursorTag = node._svg ? cursor.tagName : cursor.tagName.toLowerCase()
+      let cursorTag = svg ? hydrationNode.tagName : hydrationNode.tagName.toLowerCase()
       if (cursorTag === node.type) {
-        let nextCursor = cursor.nextSibling
-        patchHostProps({}, hostProps, cursor)
+        let nextCursor = hydrationNode.nextSibling
+        patchHostProps({}, hostProps, hydrationNode)
+        let committed = commitHostNode(node, vParent, svg, hydrationNode, resolved)
 
         // Handle innerHTML prop
         if (hostProps.innerHTML != null) {
-          cursor.innerHTML = hostProps.innerHTML as string
+          hydrationNode.innerHTML = hostProps.innerHTML
         } else {
-          let childCursor = cursor.firstChild
+          let childCursor = { current: hydrationNode.firstChild }
           // Ignore excess nodes - browser extensions may inject content
-          diffChildren(
+          committed._children = diffChildren(
             null,
-            node._children,
-            cursor,
-            frame,
-            scheduler,
-            styles,
-            node,
-            rootTarget,
+            childInputs,
+            hydrationNode,
+            committed,
+            context,
             childCursor,
           )
         }
 
-        setupHostNode(node, cursor, scheduler)
-        if (node._mixState) {
-          bindNodeMixRuntime(node as CommittedHostNode, frame, scheduler, styles)
+        setupHostNode(committed, scheduler)
+        if (committed._mixState) {
+          bindNodeMixRuntime(committed, frame, scheduler, styles)
         }
-        return nextCursor
+        if (cursor) cursor.current = nextCursor
+        return committed
       } else {
         // Type mismatch - try single-advance retry to handle browser extension injections
         // at the start of containers. Skip this node and try the next sibling once.
-        let nextSibling = skipComments(cursor.nextSibling)
+        let nextSibling = skipComments(hydrationNode.nextSibling)
         if (nextSibling instanceof Element) {
-          let nextTag = node._svg ? nextSibling.tagName : nextSibling.tagName.toLowerCase()
+          let nextTag = svg ? nextSibling.tagName : nextSibling.tagName.toLowerCase()
           if (nextTag === node.type) {
             let nextCursor = nextSibling.nextSibling
             // Found a match after skipping - adopt it and leave skipped node in place
             patchHostProps({}, hostProps, nextSibling)
+            let committed = commitHostNode(node, vParent, svg, nextSibling, resolved)
 
             if (hostProps.innerHTML != null) {
-              nextSibling.innerHTML = hostProps.innerHTML as string
+              nextSibling.innerHTML = hostProps.innerHTML
             } else {
-              let childCursor = nextSibling.firstChild
-              diffChildren(
+              let childCursor = { current: nextSibling.firstChild }
+              committed._children = diffChildren(
                 null,
-                node._children,
+                childInputs,
                 nextSibling,
-                frame,
-                scheduler,
-                styles,
-                node,
-                rootTarget,
+                committed,
+                context,
                 childCursor,
               )
             }
 
-            setupHostNode(node, nextSibling, scheduler)
-            if (node._mixState) {
-              bindNodeMixRuntime(node as CommittedHostNode, frame, scheduler, styles)
+            setupHostNode(committed, scheduler)
+            if (committed._mixState) {
+              bindNodeMixRuntime(committed, frame, scheduler, styles)
             }
-            return nextCursor
+            if (cursor) cursor.current = nextCursor
+            return committed
           }
         }
         // Retry failed - log mismatch and create new element (don't remove mismatched nodes)
         logHydrationMismatch('tag', cursorTag, node.type)
-        cursor = undefined // stop hydration for this tree
+        if (cursor) cursor.current = undefined // stop hydration for this tree
       }
     }
-    let dom = node._svg
-      ? document.createElementNS(SVG_NS, node.type)
-      : document.createElement(node.type)
+    let dom = svg ? document.createElementNS(SVG_NS, node.type) : document.createElement(node.type)
     patchHostProps({}, hostProps, dom)
+    let committed = commitHostNode(node, vParent, svg, dom, resolved)
 
     // Handle innerHTML prop
     if (hostProps.innerHTML != null) {
-      dom.innerHTML = hostProps.innerHTML as string
+      dom.innerHTML = hostProps.innerHTML
     } else {
-      diffChildren(null, node._children, dom, frame, scheduler, styles, node, rootTarget)
+      committed._children = diffChildren(null, childInputs, dom, committed, context)
     }
 
-    setupHostNode(node, dom, scheduler)
-    if (node._mixState) {
-      bindNodeMixRuntime(node as CommittedHostNode, frame, scheduler, styles, false, domParent)
+    setupHostNode(committed, scheduler)
+    if (committed._mixState) {
+      bindNodeMixRuntime(committed, frame, scheduler, styles, false, domParent)
     }
     doInsert(dom)
-    return cursor
+    return committed
   }
 
-  if (isFragmentNode(node)) {
+  if (node.kind === 'fragment') {
+    let childInputs = node._children
+    let committed = beginFragmentNode(node, vParent, svg)
+    let children: Array<VNodeInput | CommittedVNode> = childInputs
     // Insert fragment children in order before the same anchor
-    for (let child of node._children) {
-      cursor = insert(child, domParent, frame, scheduler, styles, node, rootTarget, anchor, cursor)
+    for (let i = 0; i < childInputs.length; i++) {
+      children[i] = insert(childInputs[i], domParent, committed, context, anchor, cursor)
     }
-    return cursor
+    committed._children = children as CommittedVNode[]
+    return committed
   }
 
-  if (isComponentNode(node)) {
-    return diffComponent(
-      null,
-      node,
-      frame,
-      scheduler,
-      styles,
-      domParent,
-      vParent,
-      rootTarget,
-      anchor,
-      cursor,
-    )
+  if (node.kind === 'component') {
+    return diffComponent(null, node, domParent, vParent, context, svg, anchor, cursor)
   }
 
-  if (node.type === Frame) {
-    return insertFrame(
-      node,
-      domParent,
-      frame,
-      scheduler,
-      styles,
-      vParent,
-      rootTarget,
-      anchor,
-      cursor,
-    )
+  if (node.kind === 'frame') {
+    return insertFrame(node, domParent, vParent, context, svg, anchor, cursor)
   }
 
   invariant(false, 'Unexpected node type')
 }
 
 function diffFrame(
-  curr: VNode,
-  next: VNode,
+  curr: CommittedFrameNode,
+  next: FrameNode,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
+  svg: boolean,
   anchor?: Node,
-): void {
+): CommittedFrameNode {
+  let { frame } = context
   let currSrc = getFrameSrc(curr)
   let nextSrc = getFrameSrc(next)
   let currName = getFrameName(curr)
   let nextName = getFrameName(next)
 
   if (currName !== nextName) {
-    let replaceAnchor = curr._rangeEnd?.nextSibling ?? anchor
-    remove(curr, domParent, scheduler, styles)
-    insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replaceAnchor)
-    return
+    let replaceAnchor = curr._rangeEnd.nextSibling ?? anchor
+    remove(curr, domParent, context)
+    return insertFrame(next, domParent, vParent, context, svg, replaceAnchor)
   }
 
   // If the frame hasn't resolved yet, preserve existing cancel/remount behavior
   // so pending streams from the old src cannot take over the new src.
-  if (currSrc !== nextSrc && !curr._frameResolved) {
-    let replaceAnchor = curr._rangeEnd?.nextSibling ?? anchor
-    remove(curr, domParent, scheduler, styles)
-    insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replaceAnchor)
-    return
-  }
+  if (currSrc !== nextSrc && !curr._state.resolved) {
+    let replaceAnchor = curr._rangeEnd.nextSibling ?? anchor
+    remove(curr, domParent, context)
+    return insertFrame(next, domParent, vParent, context, svg, replaceAnchor)
+  }
+
+  let committed = next as unknown as CommittedFrameNode
+  Object.assign(committed, {
+    _rangeStart: curr._rangeStart,
+    _rangeEnd: curr._rangeEnd,
+    _state: curr._state,
+    _parent: vParent,
+    _svg: svg,
+  })
 
-  next._rangeStart = curr._rangeStart
-  next._rangeEnd = curr._rangeEnd
-  next._frameInstance = curr._frameInstance
-  next._frameFallbackRoot = curr._frameFallbackRoot
-  next._frameResolveToken = curr._frameResolveToken
-  next._frameResolved = curr._frameResolved
-  next._parent = vParent
+  let frameRuntime = getFrameRuntime(frame)
+  let frameInstance = committed._state.instance
+  let serverFrameReload = frameRuntime?.serverFrameReload
 
   if (currSrc !== nextSrc) {
-    let frameInstance = next._frameInstance as FrameInstance | undefined
     if (frameInstance) {
       frameInstance.handle.src = nextSrc
     }
 
-    let runtime = getFrameRuntime(frame)
-    if (runtime) {
-      resolveClientFrame(next, runtime)
+    if (frameRuntime) {
+      resolveClientFrame(committed, frameRuntime, serverFrameReload)
     }
+  } else if (frameRuntime && frameInstance && serverFrameReload) {
+    // Reload client frames that have the same src during a render triggered by an ancestor frame reload
+    resolveClientFrame(committed, frameRuntime, serverFrameReload)
   }
 
-  if (!next._frameResolved && next._frameFallbackRoot) {
-    next._frameFallbackRoot.render(next.props?.fallback ?? null)
+  if (!committed._state.resolved && committed._state.fallbackRoot) {
+    committed._state.fallbackRoot.render(committed.props.fallback ?? null)
   }
+  return committed
 }
 
 function insertFrame(
-  node: VNode,
+  node: FrameNode,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
+  svg: boolean,
   anchor?: Node,
-  cursor?: Node | null,
-): Node | null | undefined {
+  cursor?: HydrationCursor,
+): CommittedFrameNode {
+  let { frame, styles } = context
   let runtime = getFrameRuntime(frame)
-  if (!runtime || (runtime as { canResolveFrames?: boolean }).canResolveFrames === false) {
+  if (!runtime || runtime.canResolveFrames === false) {
     throw new Error(
       'Cannot render <Frame /> without frame runtime. Use run() or pass frameInit to createRoot/createRangeRoot.',
     )
@@ -1007,33 +1076,23 @@ function insertFrame(
 
   // Hydration path: adopt server-rendered frame markers and reuse the existing
   // frame instance created during createSubFrames().
-  if (isFrameStartComment(cursor)) {
-    let start = cursor
+  if (isFrameStartComment(cursor?.current)) {
+    let start = cursor.current
     let end = findFrameEndComment(start)
     if (end) {
-      node._rangeStart = start
-      node._rangeEnd = end
-      node._parent = vParent
-      node._frameResolveToken = 0
-      node._frameResolveController = undefined
-      node._frameFallbackRoot = undefined
-      node._frameResolved = true
-
-      let frameId = getFrameIdFromComment(start)
-      let marker = frameId ? runtime.data.f?.[frameId] : undefined
-      let src = marker?.src ?? getFrameSrc(node)
       let instance = runtime.frameInstances.get(start)
+      let src = instance?.handle.src ?? getFrameSrc(node)
       if (!instance) {
         instance = createFrame([start, end], {
           name: getFrameName(node),
           src,
-          marker: frameId && marker ? { ...marker, id: frameId } : undefined,
           errorTarget: runtime.errorTarget,
           loadModule: runtime.loadModule,
           resolveFrame: runtime.resolveFrame,
           pendingClientEntries: runtime.pendingClientEntries,
           scheduler: runtime.scheduler,
-          data: runtime.data,
+          styleManager: runtime.styleManager,
+          data: {},
           moduleCache: runtime.moduleCache,
           moduleLoads: runtime.moduleLoads,
           frameInstances: runtime.frameInstances,
@@ -1042,9 +1101,20 @@ function insertFrame(
         runtime.frameInstances.set(start, instance)
       }
 
-      node._frameInstance = instance
-
-      return end.nextSibling
+      cursor.current = end.nextSibling
+      return Object.assign(node as unknown as CommittedFrameNode, {
+        _rangeStart: start,
+        _rangeEnd: end,
+        _parent: vParent,
+        _svg: svg,
+        _state: {
+          instance,
+          resolveToken: 0,
+          resolveController: undefined,
+          fallbackRoot: undefined,
+          resolved: true,
+        },
+      })
     }
   }
 
@@ -1057,18 +1127,11 @@ function insertFrame(
   doInsert(start)
   doInsert(end)
 
-  node._rangeStart = start
-  node._rangeEnd = end
-  node._parent = vParent
-
   let fallbackRoot = createRangeRoot([start, end], {
     frame,
     styleManager: styles,
   })
-  fallbackRoot.render(node.props?.fallback ?? null)
-  node._frameFallbackRoot = fallbackRoot
-  node._frameResolved = false
-  node._frameResolveToken = 0
+  fallbackRoot.render(node.props.fallback ?? null)
 
   let instance = createFrame([start, end], {
     name: getFrameName(node),
@@ -1078,61 +1141,94 @@ function insertFrame(
     resolveFrame: runtime.resolveFrame,
     pendingClientEntries: runtime.pendingClientEntries,
     scheduler: runtime.scheduler,
-    data: runtime.data,
+    styleManager: runtime.styleManager,
+    data: {},
     moduleCache: runtime.moduleCache,
     moduleLoads: runtime.moduleLoads,
     frameInstances: runtime.frameInstances,
     namedFrames: runtime.namedFrames,
   })
-  node._frameInstance = instance
   runtime.frameInstances.set(start, instance)
 
-  resolveClientFrame(node, runtime)
+  let committed = Object.assign(node as unknown as CommittedFrameNode, {
+    _rangeStart: start,
+    _rangeEnd: end,
+    _parent: vParent,
+    _svg: svg,
+    _state: {
+      instance,
+      fallbackRoot,
+      resolved: false,
+      resolveToken: 0,
+      resolveController: undefined,
+    },
+  })
+  resolveClientFrame(committed, runtime)
 
-  return cursor
+  return committed
 }
 
-function resolveClientFrame(node: VNode, runtime: FrameRuntime): void {
+function resolveClientFrame(
+  node: CommittedFrameNode,
+  runtime: FrameRuntime,
+  serverFrameReload?: { signal: AbortSignal },
+): void {
   let frameSrc = getFrameSrc(node)
-  let instance = node._frameInstance as FrameInstance | undefined
-  if (!instance) return
-
-  let token = (node._frameResolveToken ?? 0) + 1
-  node._frameResolveToken = token
-  node._frameResolveController?.abort()
-  let resolveController = new AbortController()
-  node._frameResolveController = resolveController
-
-  Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal, getFrameName(node)))
-    .then(async (content) => {
-      if (node._frameResolveToken !== token || resolveController.signal.aborted) return
-      node._frameFallbackRoot?.dispose()
-      node._frameFallbackRoot = undefined
+  let state = node._state
+  let instance = state.instance
+
+  let token = state.resolveToken + 1
+  state.resolveToken = token
+  state.resolveController?.abort()
+  let reload = serverFrameReload
+    ? instance.beginClientFrameReloadForAncestorReload(serverFrameReload.signal)
+    : undefined
+  if (!reload) {
+    instance.cancelReload()
+  }
+  let resolveController = reload?.controller ?? new AbortController()
+  state.resolveController = resolveController
+
+  Promise.resolve()
+    .then(() =>
+      runtime.resolveFrame(frameSrc, {
+        signal: resolveController.signal,
+        target: getFrameName(node),
+      }),
+    )
+    .then(async (resolution) => {
+      if (state.resolveToken !== token || resolveController.signal.aborted) return
+      let { content } = await unwrapFrameResolution(resolution)
+      if (state.resolveToken !== token || resolveController.signal.aborted) return
+      state.fallbackRoot?.dispose()
+      state.fallbackRoot = undefined
       let nextContent = asAbortableFrameContent(content, resolveController.signal)
       await instance.render(nextContent, { signal: resolveController.signal })
-      if (node._frameResolveToken !== token || resolveController.signal.aborted) return
-      node._frameResolved = true
+      if (state.resolveToken !== token || resolveController.signal.aborted) return
+      state.resolved = true
+    })
+    .catch((error) => {
+      if (reload && state.resolveToken === token && !resolveController.signal.aborted) {
+        runtime.errorTarget.dispatchEvent(createComponentErrorEvent(error))
+      }
     })
-    .catch(() => {})
     .finally(() => {
-      if (node._frameResolveController === resolveController) {
-        node._frameResolveController = undefined
+      reload?.complete()
+      if (state.resolveController === resolveController) {
+        state.resolveController = undefined
       }
     })
 }
 
-function disposeFrameResources(node: VNode): void {
-  node._frameResolveToken = (node._frameResolveToken ?? 0) + 1
-  node._frameResolveController?.abort()
-  node._frameResolveController = undefined
-  node._frameFallbackRoot?.dispose()
-  node._frameFallbackRoot = undefined
+function disposeFrameResources(node: CommittedFrameNode): void {
+  let state = node._state
+  state.resolveToken++
+  state.resolveController?.abort()
+  state.resolveController = undefined
+  state.fallbackRoot?.dispose()
+  state.fallbackRoot = undefined
 
-  let frameInstance = node._frameInstance as FrameInstance | undefined
-  if (frameInstance) {
-    frameInstance.dispose()
-    node._frameInstance = undefined
-  }
+  state.instance.dispose()
 }
 
 function asAbortableFrameContent(content: FrameContent, signal: AbortSignal): FrameContent {
@@ -1163,26 +1259,26 @@ function createAbortableReadableStream(
       }
 
       let removeAbortReadListener: undefined | (() => void)
-      let abortRead = new Promise<ReadableStreamReadResult<Uint8Array>>((resolve) => {
+      let abortRead = new Promise<{ done: true; value: undefined }>((resolve) => {
         if (signal.aborted) {
-          resolve({ done: true, value: undefined as unknown as Uint8Array })
+          resolve({ done: true, value: undefined })
           return
         }
         let onAbortRead = () => {
-          resolve({ done: true, value: undefined as unknown as Uint8Array })
+          resolve({ done: true, value: undefined })
         }
         removeAbortReadListener = () => signal.removeEventListener('abort', onAbortRead)
         signal.addEventListener('abort', onAbortRead, { once: true })
       })
 
-      let { done, value } = await Promise.race([reader.read(), abortRead])
+      let result = await Promise.race([reader.read(), abortRead])
       removeAbortReadListener?.()
 
-      if (done) {
+      if (result.done) {
         controller.close()
         return
       }
-      controller.enqueue(value)
+      controller.enqueue(result.value)
     },
     cancel(reason) {
       signal.removeEventListener('abort', onAbort)
@@ -1191,11 +1287,9 @@ function createAbortableReadableStream(
   })
 }
 
-function removeFrameDomRange(node: VNode, domParent: ParentNode): void {
+function removeFrameDomRange(node: CommittedFrameNode, domParent: ParentNode): void {
   let start = node._rangeStart
   let end = node._rangeEnd
-  if (!(start instanceof Comment) || !(end instanceof Comment)) return
-
   let cursor: Node | null = start
   while (cursor) {
     let nextSibling: Node | null = cursor.nextSibling
@@ -1205,23 +1299,19 @@ function removeFrameDomRange(node: VNode, domParent: ParentNode): void {
     if (cursor === end) break
     cursor = nextSibling
   }
-
-  node._rangeStart = undefined
-  node._rangeEnd = undefined
 }
 
 function getFrameRuntime(frame: FrameHandle): FrameRuntime | undefined {
-  return frame.$runtime as FrameRuntime | undefined
+  let runtime = frame.$runtime
+  return isFrameRuntime(runtime) ? runtime : undefined
 }
 
-function getFrameSrc(node: VNode): string {
-  let src = node.props?.src
-  invariant(typeof src === 'string' && src.length > 0, '<Frame /> requires a src prop')
-  return src
+function getFrameSrc(node: FrameNode | CommittedFrameNode): string {
+  return node.props.src
 }
 
-function getFrameName(node: VNode): string | undefined {
-  let name = node.props?.name
+function getFrameName(node: FrameNode | CommittedFrameNode): string | undefined {
+  let name = node.props.name
   return typeof name === 'string' && name.length > 0 ? name : undefined
 }
 
@@ -1238,17 +1328,15 @@ function skipCommentsExceptFrameStart(cursor: Node | null): Node | null {
 }
 
 function isFrameStartComment(node: Node | null | undefined): node is Comment {
-  return node instanceof Comment && node.data.trim().startsWith('rmx:f:')
+  return isCommentNode(node) && node.data.trim().startsWith('rmx:f:')
 }
 
 function isFrameEndComment(node: Node | null | undefined): node is Comment {
-  return node instanceof Comment && node.data.trim() === '/rmx:f'
+  return isCommentNode(node) && node.data.trim() === '/rmx:f'
 }
 
-function getFrameIdFromComment(comment: Comment): string | undefined {
-  let text = comment.data.trim()
-  if (!text.startsWith('rmx:f:')) return undefined
-  return text.slice('rmx:f:'.length)
+function isCommentNode(node: Node | null | undefined): node is Comment {
+  return node?.nodeType === Node.COMMENT_NODE
 }
 
 function findFrameEndComment(start: Comment): Comment | null {
@@ -1268,72 +1356,53 @@ function findFrameEndComment(start: Comment): Comment | null {
 }
 
 export function renderComponent(
-  handle: ComponentHandle,
-  currContent: VNode | null,
-  next: ComponentNode,
+  currContent: CommittedVNode | null,
+  next: MountingComponentNode | CommittedComponentNode,
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  rootTarget: EventTarget,
-  vParent?: VNode,
+  context: ReconcileContext,
   anchor?: Node,
-  cursor?: Node | null,
-): Node | null | undefined {
-  if (handle.isRemoved()) return cursor
+  cursor?: HydrationCursor,
+): CommittedComponentNode {
+  let { scheduler } = context
+  let handle = next._handle
+  if (handle.isRemoved()) {
+    invariant('_content' in next, 'Expected removed component to be committed')
+    return next
+  }
 
   let [element, tasks] = handle.render(next.props)
-  let content = toVNode(element)
-  let newCursor = diffVNodes(
-    currContent,
-    content,
-    domParent,
-    frame,
-    scheduler,
-    styles,
-    next,
-    rootTarget,
-    anchor,
-    cursor,
-  )
-  next._content = content
-  next._handle = handle
-  next._parent = vParent
-
-  let committed = next as CommittedComponentNode
-  handle.setScheduleUpdate(() => {
-    scheduler.enqueue(committed, domParent)
-  })
+  let content = diffVNodes(currContent, toVNode(element), domParent, next, context, anchor, cursor)
+  let committed = commitComponentNode(next, content)
+  handle.setScheduleUpdate(scheduler, committed, domParent)
 
   scheduler.enqueueTasks(tasks)
 
-  return newCursor
+  return committed
 }
 
 function diffComponent(
   curr: CommittedComponentNode | null,
   next: ComponentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
   domParent: ParentNode,
-  vParent: VNode,
-  rootTarget: EventTarget,
+  vParent: VNodeParent,
+  context: ReconcileContext,
+  svg: boolean,
   anchor?: Node,
-  cursor?: Node | null,
-): Node | null | undefined {
+  cursor?: HydrationCursor,
+): CommittedComponentNode {
+  let { frame } = context
   if (curr === null) {
-    let componentId = vParent._pendingHydrationComponentId
+    let componentId = vParent.kind === 'root' ? vParent._pendingHydrationComponentId : undefined
     if (componentId) {
-      vParent._pendingHydrationComponentId = undefined
+      if (vParent.kind === 'root') vParent._pendingHydrationComponentId = undefined
     } else {
       componentId = `c${++idCounter}`
     }
-    next._handle = createComponent({
+    let handle = createComponent({
       id: componentId,
       frame,
       type: next.type,
-      getContext: (type: Component) => findContextFromAncestry(vParent, type),
+      getContext: (type: ElementFunction) => findContextFromAncestry(vParent, type),
       getFrameByName(name: string) {
         let runtime = getFrameRuntime(frame)
         return runtime?.namedFrames.get(name)
@@ -1343,123 +1412,102 @@ function diffComponent(
         return runtime?.topFrame
       },
     })
+    let mounting = beginComponentNode(next, vParent, svg, handle, context)
 
-    return renderComponent(
-      next._handle,
-      null,
-      next,
-      domParent,
-      frame,
-      scheduler,
-      styles,
-      rootTarget,
-      vParent,
-      anchor,
-      cursor,
-    )
+    return renderComponent(null, mounting, domParent, context, anchor, cursor)
   }
-  next._handle = curr._handle
-  let { _content, _handle } = curr
-  return renderComponent(
-    _handle,
-    _content,
-    next,
-    domParent,
-    frame,
-    scheduler,
-    styles,
-    rootTarget,
-    vParent,
-    anchor,
-    cursor,
-  )
+  let mounting = beginComponentNode(next, vParent, svg, curr._handle, context)
+  return renderComponent(curr._content, mounting, domParent, context, anchor, cursor)
 }
 
 // Cleanup without DOM removal - used for descendants when parent DOM node is removed
-function cleanupDescendants(node: VNode, scheduler: Scheduler, styles: StyleManager): void {
+function cleanupDescendants(node: CommittedVNode, context: ReconcileContext): void {
+  let { scheduler } = context
   if (isCommittedTextNode(node)) {
     return
   }
 
   if (isCommittedHostNode(node)) {
-    for (let child of node._children) {
-      cleanupDescendants(child, scheduler, styles)
+    let children = node._children
+    for (let i = 0; i < children.length; i++) {
+      cleanupDescendants(children[i], context)
     }
 
-    teardownMixins(node._mixState as MixinRuntimeState | undefined)
-    teardownDirectEventListeners(node)
-    teardownControlledReflection(node)
-    if (node._controller) node._controller.abort()
+    teardownMixins(node._mixState)
+    abandonDirectEventListeners(node)
+    abandonControlledReflection(node)
     return
   }
 
   if (isFragmentNode(node)) {
-    for (let child of node._children) {
-      cleanupDescendants(child, scheduler, styles)
+    let children = node._children
+    for (let i = 0; i < children.length; i++) {
+      cleanupDescendants(children[i], context)
     }
     return
   }
 
   if (isCommittedComponentNode(node)) {
-    cleanupDescendants(node._content, scheduler, styles)
+    cleanupDescendants(node._content, context)
     let tasks = node._handle.remove()
     scheduler.enqueueTasks(tasks)
     return
   }
 
-  if (node.type === Frame) {
+  if (node.kind === 'frame') {
     disposeFrameResources(node)
     return
   }
 }
 
 export function remove(
-  node: VNode,
+  node: CommittedVNode,
   domParent: ParentNode,
-  scheduler: Scheduler,
-  styles: StyleManager,
-) {
+  context: ReconcileContext,
+): void {
+  let { scheduler } = context
   if (isCommittedTextNode(node)) {
     node._dom.parentNode?.removeChild(node._dom)
     return
   }
 
   if (isCommittedHostNode(node)) {
-    if (node._persistedByMixins) return
+    if (node._persistence) return
 
-    let persistedRemoval = prepareMixinRemoval(node._mixState as MixinRuntimeState | undefined)
+    let persistedRemoval = prepareMixinRemoval(node._mixState)
     if (persistedRemoval) {
       let token = ++persistedRemovalToken
       markNodePersistedByMixins(node, domParent, token)
       void persistedRemoval
         .catch(() => {})
         .finally(() => {
-          if (!node._persistedByMixins) return
-          if (node._persistedRemovalToken !== token) return
+          if (!node._persistence) return
+          if (node._persistence.token !== token) return
           unmarkNodePersistedByMixins(node)
-          performHostNodeRemoval(node, domParent, scheduler, styles)
+          performHostNodeRemoval(node, domParent, context)
         })
       return
     }
-    performHostNodeRemoval(node, domParent, scheduler, styles)
+    performHostNodeRemoval(node, domParent, context)
     return
   }
 
   if (isFragmentNode(node)) {
-    for (let child of node._children) {
-      remove(child, domParent, scheduler, styles)
+    let children = node._children
+    for (let i = 0; i < children.length; i++) {
+      remove(children[i], domParent, context)
     }
     return
   }
 
   if (isCommittedComponentNode(node)) {
-    remove(node._content, domParent, scheduler, styles)
+    remove(node._content, domParent, context)
     let tasks = node._handle.remove()
     scheduler.enqueueTasks(tasks)
     return
   }
 
-  if (node.type === Frame) {
+  if (node.kind === 'frame') {
     disposeFrameResources(node)
     removeFrameDomRange(node, domParent)
     return
@@ -1470,63 +1518,53 @@ export function remove(
 function performHostNodeRemoval(
   node: CommittedHostNode,
   domParent: ParentNode,
-  scheduler: Scheduler,
-  styles: StyleManager,
-) {
+  context: ReconcileContext,
+): void {
+  let children = node._children
   if (isHeadHostNode(node)) {
-    for (let child of node._children) {
-      remove(child, node._dom, scheduler, styles)
+    for (let i = 0; i < children.length; i++) {
+      remove(children[i], node._dom, context)
     }
   } else {
     // Clean up all descendants first (before removing DOM subtree)
-    for (let child of node._children) {
-      cleanupDescendants(child, scheduler, styles)
+    for (let i = 0; i < children.length; i++) {
+      cleanupDescendants(children[i], context)
     }
   }
 
-  teardownMixins(node._mixState as MixinRuntimeState | undefined)
-  teardownDirectEventListeners(node)
-  teardownControlledReflection(node)
-  // Never remove the real document.head node when reconciling a <head> vnode.
-  if (!isHeadHostNode(node)) {
+  teardownMixins(node._mixState)
+  // Never remove the real document.head node when reconciling a <head> vnode,
+  // and since it stays alive, detach its listeners for real.
+  if (isHeadHostNode(node)) {
+    teardownDirectEventListeners(node)
+    teardownControlledReflection(node)
+  } else {
+    abandonDirectEventListeners(node)
+    abandonControlledReflection(node)
     node._dom.parentNode?.removeChild(node._dom)
   }
-  if (node._controller) node._controller.abort()
 }
 
 function diffChildren(
-  curr: VNode[] | null,
-  next: VNode[],
+  curr: CommittedVNode[] | null,
+  next: VNodeInput[],
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
-  cursor?: Node | null,
+  vParent: VNodeParent,
+  context: ReconcileContext,
+  cursor?: HydrationCursor,
   anchor?: Node,
-) {
+): CommittedVNode[] {
   let hasKeys = hasKeyedChildren(next)
+  let committed: Array<VNodeInput | CommittedVNode> = next
 
   if (curr === null) {
     if (hasKeys) {
       warnDuplicateKeys(next)
     }
-    for (let node of next) {
-      cursor = insert(
-        node,
-        domParent,
-        frame,
-        scheduler,
-        styles,
-        vParent,
-        rootTarget,
-        anchor,
-        cursor,
-      )
+    for (let i = 0; i < next.length; i++) {
+      committed[i] = insert(next[i], domParent, vParent, context, anchor, cursor)
     }
-    vParent._children = next
-    return cursor
+    return committed as CommittedVNode[]
   }
 
   if (
@@ -1535,78 +1573,49 @@ function diffChildren(
     !parentUsesInnerHTML(vParent) &&
     canBulkClearChildren(curr)
   ) {
-    for (let node of curr) {
-      cleanupDescendants(node, scheduler, styles)
+    for (let i = 0; i < curr.length; i++) {
+      cleanupDescendants(curr[i], context)
     }
     domParent.textContent = ''
-    vParent._children = next
-    return
+    return EMPTY_COMMITTED_CHILDREN
   }
 
   if (!hasKeys) {
     for (let i = 0; i < next.length; i++) {
       let currentNode = i < curr.length ? curr[i] : null
-      diffVNodes(
-        currentNode,
-        next[i],
-        domParent,
-        frame,
-        scheduler,
-        styles,
-        vParent,
-        rootTarget,
-        anchor,
-        cursor,
-      )
+      committed[i] = diffVNodes(currentNode, next[i], domParent, vParent, context, anchor, cursor)
     }
 
     if (curr.length > next.length) {
       for (let i = next.length; i < curr.length; i++) {
         let node = curr[i]
-        if (node) remove(node, domParent, scheduler, styles)
+        if (node) remove(node, domParent, context)
       }
     }
 
-    vParent._children = next
-    return
+    return committed as CommittedVNode[]
   }
 
-  patchKeyedChildren(
-    curr,
-    next,
-    domParent,
-    frame,
-    scheduler,
-    styles,
-    vParent,
-    rootTarget,
-    cursor,
-    anchor,
-  )
-
-  return
+  return patchKeyedChildren(curr, next, domParent, vParent, context, cursor, anchor)
 }
 
-function parentUsesInnerHTML(parent: VNode): boolean {
+function parentUsesInnerHTML(parent: VNodeParent): boolean {
   return isHostNode(parent) && getHostProps(parent).innerHTML != null
 }
 
-function canBulkClearChildren(children: VNode[]): boolean {
-  for (let child of children) {
-    if (!canBulkClearNode(child)) return false
+function canBulkClearChildren(children: CommittedVNode[]): boolean {
+  for (let i = 0; i < children.length; i++) {
+    if (!canBulkClearNode(children[i])) return false
   }
   return true
 }
 
-function canBulkClearNode(node: VNode): boolean {
+function canBulkClearNode(node: CommittedVNode): boolean {
   if (isCommittedTextNode(node)) return true
 
   if (isCommittedHostNode(node)) {
     if (node._mixState) return false
-    for (let child of node._children) {
-      if (!canBulkClearNode(child)) return false
-    }
-    return true
+    return canBulkClearChildren(node._children)
   }
 
   if (isFragmentNode(node)) {
@@ -1620,16 +1629,16 @@ function canBulkClearNode(node: VNode): boolean {
   return false
 }
 
-function hasKeyedChildren(children: VNode[]): boolean {
-  for (let node of children) {
-    if (node.key != null) return true
+function hasKeyedChildren(children: Array<{ key?: Key }>): boolean {
+  for (let i = 0; i < children.length; i++) {
+    if (children[i].key != null) return true
   }
   return false
 }
 
-function warnDuplicateKeys(children: VNode[]): void {
-  let seenKeys: Set<string> | undefined
-  let duplicateKeys: Set<string> | undefined
+function warnDuplicateKeys(children: Array<{ key?: Key }>): void {
+  let seenKeys: Set<Key> | undefined
+  let duplicateKeys: Set<Key> | undefined
 
   for (let node of children) {
     if (node.key == null) continue
@@ -1648,7 +1657,7 @@ function warnDuplicateKeys(children: VNode[]): void {
   }
 
   if (duplicateKeys?.size) {
-    let quotedKeys = Array.from(duplicateKeys, (key) => `"${key}"`)
+    let quotedKeys = Array.from(duplicateKeys, (key) => `"${String(key)}"`)
     console.warn(
       `Duplicate keys detected in siblings: ${quotedKeys.join(', ')}. Keys should be unique.`,
     )
@@ -1656,17 +1665,14 @@ function warnDuplicateKeys(children: VNode[]): void {
 }
 
 function patchKeyedChildren(
-  curr: VNode[],
-  next: VNode[],
+  curr: CommittedVNode[],
+  next: VNodeInput[],
   domParent: ParentNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
-  cursor?: Node | null,
+  vParent: VNodeParent,
+  context: ReconcileContext,
+  cursor?: HydrationCursor,
   anchor?: Node,
-): void {
+): CommittedVNode[] {
   let matches =
     matchKeyedChildrenInOrder(curr, next) ??
     matchKeyedChildrenAfterSingleRemoval(curr, next) ??
@@ -1675,46 +1681,36 @@ function patchKeyedChildren(
     warnDuplicateKeys(next)
     matches = matchKeyedChildren(curr, next)
   }
+  let committed: Array<VNodeInput | CommittedVNode> = next
 
   let matchAnalysis = analyzeKeyedChildMatches(curr.length, matches)
   if (matchAnalysis.hasRemovals) {
     let usedOldIndexes = new Uint8Array(curr.length)
 
-    for (let match of matches) {
-      if (match.oldIndex >= 0) {
-        usedOldIndexes[match.oldIndex] = 1
+    for (let index = 0; index < matches.length; index++) {
+      let oldIndex = matches[index]
+      if (oldIndex >= 0) {
+        usedOldIndexes[oldIndex] = 1
       }
     }
 
     for (let oldIndex = 0; oldIndex < curr.length; oldIndex++) {
       if (usedOldIndexes[oldIndex] === 0) {
-        remove(curr[oldIndex], domParent, scheduler, styles)
+        remove(curr[oldIndex], domParent, context)
       }
     }
   }
 
-  vParent._children = next
-
   for (let index = 0; index < next.length; index++) {
-    let match = matches[index]
-    let oldNode = match.oldIndex >= 0 ? curr[match.oldIndex] : null
+    let oldIndex = matches[index]
+    let oldNode = oldIndex >= 0 ? curr[oldIndex] : null
 
-    diffVNodes(
-      oldNode,
-      next[index],
-      domParent,
-      frame,
-      scheduler,
-      styles,
-      vParent,
-      rootTarget,
-      anchor,
-      cursor,
-    )
+    committed[index] = diffVNodes(oldNode, next[index], domParent, vParent, context, anchor, cursor)
   }
+  let committedChildren = committed as CommittedVNode[]
 
   if (matchAnalysis.canSkipPlacement) {
-    return
+    return committedChildren
   }
 
   let stableIndexes = lisMatches(matches)
@@ -1722,7 +1718,7 @@ function patchKeyedChildren(
   let placementAnchor: Node | null = anchor ?? null
 
   for (let index = next.length - 1; index >= 0; index--) {
-    let nextNode = next[index]
+    let nextNode = committedChildren[index]
     let isStable = stableIndexes[stableCursor] === index
 
     if (isStable) {
@@ -1733,10 +1729,14 @@ function patchKeyedChildren(
 
     placementAnchor = findFirstDomAnchor(nextNode) ?? placementAnchor
   }
+  return committedChildren
 }
 
-function matchKeyedChildren(curr: VNode[], next: VNode[]): Array<{ oldIndex: number }> {
-  let oldKeyMap = new Map<string, number>()
+// Keyed child matches are arrays of old indexes (-1 = no match / new node),
+// parallel to `next`. Plain numbers instead of wrapper objects keep large
+// keyed diffs (1000-row tables) allocation-free.
+function matchKeyedChildren(curr: CommittedVNode[], next: VNodeInput[]): number[] {
+  let oldKeyMap = new Map<Key, number>()
   let usedOldIndexes = new Set<number>()
   let unkeyedSearchStart = 0
 
@@ -1745,7 +1745,9 @@ function matchKeyedChildren(curr: VNode[], next: VNode[]): Array<{ oldIndex: num
     if (key != null) oldKeyMap.set(key, index)
   }
 
-  return next.map((nextNode) => {
+  let matches: number[] = []
+  for (let nextIndex = 0; nextIndex < next.length; nextIndex++) {
+    let nextNode = next[nextIndex]
     let oldIndex = -1
 
     if (nextNode.key != null) {
@@ -1770,16 +1772,15 @@ function matchKeyedChildren(curr: VNode[], next: VNode[]): Array<{ oldIndex: num
     }
 
     if (oldIndex >= 0) usedOldIndexes.add(oldIndex)
-    return { oldIndex }
-  })
+    matches.push(oldIndex)
+  }
+
+  return matches
 }
 
-function matchKeyedChildrenInOrder(
-  curr: VNode[],
-  next: VNode[],
-): Array<{ oldIndex: number }> | null {
+function matchKeyedChildrenInOrder(curr: CommittedVNode[], next: VNodeInput[]): number[] | null {
   let length = Math.min(curr.length, next.length)
-  let matches: Array<{ oldIndex: number }> = []
+  let matches: number[] = []
 
   for (let index = 0; index < length; index++) {
     let nextNode = next[index]
@@ -1790,24 +1791,24 @@ function matchKeyedChildrenInOrder(
       return null
     }
 
-    matches.push({ oldIndex: index })
+    matches.push(index)
   }
 
   for (let index = length; index < next.length; index++) {
     if (next[index].key == null) return null
-    matches.push({ oldIndex: -1 })
+    matches.push(-1)
   }
 
   return matches
 }
 
 function matchKeyedChildrenAfterSingleRemoval(
-  curr: VNode[],
-  next: VNode[],
-): Array<{ oldIndex: number }> | null {
+  curr: CommittedVNode[],
+  next: VNodeInput[],
+): number[] | null {
   if (curr.length !== next.length + 1) return null
 
-  let matches: Array<{ oldIndex: number }> = []
+  let matches: number[] = []
   let oldIndex = 0
   let skippedOldNode = false
 
@@ -1817,7 +1818,7 @@ function matchKeyedChildrenAfterSingleRemoval(
 
     let oldNode = curr[oldIndex]
     if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
-      matches.push({ oldIndex })
+      matches.push(oldIndex)
       oldIndex++
       continue
     }
@@ -1831,7 +1832,7 @@ function matchKeyedChildrenAfterSingleRemoval(
       return null
     }
 
-    matches.push({ oldIndex })
+    matches.push(oldIndex)
     oldIndex++
   }
 
@@ -1839,12 +1840,12 @@ function matchKeyedChildrenAfterSingleRemoval(
 }
 
 function matchKeyedChildrenAfterPairSwap(
-  curr: VNode[],
-  next: VNode[],
-): Array<{ oldIndex: number }> | null {
+  curr: CommittedVNode[],
+  next: VNodeInput[],
+): number[] | null {
   if (curr.length !== next.length) return null
 
-  let matches: Array<{ oldIndex: number }> = []
+  let matches: number[] = []
   let firstMismatch = -1
   let secondMismatch = -1
 
@@ -1854,7 +1855,7 @@ function matchKeyedChildrenAfterPairSwap(
 
     let oldNode = curr[index]
     if (oldNode.key === nextNode.key && oldNode.type === nextNode.type) {
-      matches.push({ oldIndex: index })
+      matches.push(index)
       continue
     }
 
@@ -1865,7 +1866,7 @@ function matchKeyedChildrenAfterPairSwap(
     } else {
       return null
     }
-    matches.push({ oldIndex: -1 })
+    matches.push(-1)
   }
 
   if (firstMismatch === -1) return matches
@@ -1885,42 +1886,43 @@ function matchKeyedChildrenAfterPairSwap(
     return null
   }
 
-  matches[firstMismatch] = { oldIndex: secondMismatch }
-  matches[secondMismatch] = { oldIndex: firstMismatch }
+  matches[firstMismatch] = secondMismatch
+  matches[secondMismatch] = firstMismatch
   return matches
 }
 
 function analyzeKeyedChildMatches(
   currentLength: number,
-  matches: ReadonlyArray<{ oldIndex: number }>,
+  matches: readonly number[],
 ): { hasRemovals: boolean; canSkipPlacement: boolean } {
   let hasRemovals = matches.length !== currentLength
   let canSkipPlacement = true
   let lastOldIndex = -1
   let sawNewNode = false
 
-  for (let match of matches) {
-    if (match.oldIndex < 0) {
+  for (let index = 0; index < matches.length; index++) {
+    let oldIndex = matches[index]
+    if (oldIndex < 0) {
       hasRemovals = true
       sawNewNode = true
       continue
     }
 
-    if (sawNewNode || match.oldIndex < lastOldIndex) {
+    if (sawNewNode || oldIndex < lastOldIndex) {
       canSkipPlacement = false
     }
-    lastOldIndex = match.oldIndex
+    lastOldIndex = oldIndex
   }
 
   return { hasRemovals, canSkipPlacement }
 }
 
-function lisMatches(matches: ReadonlyArray<{ oldIndex: number }>): number[] {
+function lisMatches(matches: readonly number[]): number[] {
   let predecessors = Array.from<number>({ length: matches.length })
   let tails: number[] = []
 
   for (let index = 0; index < matches.length; index++) {
-    let value = matches[index].oldIndex + 1
+    let value = matches[index] + 1
     if (value === 0) continue
 
     let low = 0
@@ -1929,7 +1931,7 @@ function lisMatches(matches: ReadonlyArray<{ oldIndex: number }>): number[] {
     while (low < high) {
       let middle = (low + high) >> 1
 
-      if (matches[tails[middle]].oldIndex + 1 < value) {
+      if (matches[tails[middle]] + 1 < value) {
         low = middle + 1
       } else {
         high = middle
@@ -1950,7 +1952,7 @@ function lisMatches(matches: ReadonlyArray<{ oldIndex: number }>): number[] {
   return tails
 }
 
-function placeVNode(node: VNode, domParent: ParentNode, anchor: Node | null): void {
+function placeVNode(node: CommittedVNode, domParent: ParentNode, anchor: Node | null): void {
   let firstDom = findFirstDomAnchor(node)
   if (!firstDom || firstDom.parentNode !== domParent) return
 
@@ -1962,27 +1964,28 @@ function placeVNode(node: VNode, domParent: ParentNode, anchor: Node | null): vo
   moveDomRange(domParent, firstDom, lastDom, anchor)
 }
 
-export function findFirstDomAnchor(node: VNode | null | undefined): Node | null {
+export function findFirstDomAnchor(node: CommittedVNode | null | undefined): Node | null {
   if (!node) return null
   if (isCommittedTextNode(node)) return node._dom
   if (isCommittedHostNode(node)) return node._dom
   if (isCommittedComponentNode(node)) return findFirstDomAnchor(node._content)
-  if (node.type === Frame) return node._rangeStart ?? null
+  if (node.kind === 'frame') return node._rangeStart
   if (isFragmentNode(node)) {
-    for (let child of node._children) {
-      let dom = findFirstDomAnchor(child)
+    let children = node._children
+    for (let i = 0; i < children.length; i++) {
+      let dom = findFirstDomAnchor(children[i])
       if (dom) return dom
     }
   }
   return null
 }
 
-export function findLastDomAnchor(node: VNode | null | undefined): Node | null {
+export function findLastDomAnchor(node: CommittedVNode | null | undefined): Node | null {
   if (!node) return null
   if (isCommittedTextNode(node)) return node._dom
   if (isCommittedHostNode(node)) return node._dom
   if (isCommittedComponentNode(node)) return findLastDomAnchor(node._content)
-  if (node.type === Frame) return node._rangeEnd ?? null
+  if (node.kind === 'frame') return node._rangeEnd
   if (isFragmentNode(node)) {
     for (let i = node._children.length - 1; i >= 0; i--) {
       let dom = findLastDomAnchor(node._children[i])
@@ -2020,20 +2023,27 @@ function shouldDispatchInlineMixinLifecycle(node: Node): boolean {
   let parents = activeSchedulerUpdateParents
   if (!parents?.length) return true
   for (let parent of parents) {
-    let parentNode = parent as Node
+    if (!(parent instanceof Node)) continue
+    let parentNode = parent
     if (parentNode === node) return false
     if (parentNode.contains(node)) return false
   }
   return true
 }
 
-export function findNextSiblingDomAnchor(curr: VNode): Node | null {
+export function findNextSiblingDomAnchor(
+  curr: CommittedVNode | MountingComponentNode,
+): Node | null {
   let vParent = curr._parent
-  if (!vParent || !Array.isArray(vParent._children)) return null
+  if (vParent.kind === 'component') return findNextSiblingDomAnchor(vParent)
   let children = vParent._children
-  if (children.length === 0) return findNextSiblingDomAnchor(vParent)
+  if (children.length === 0) {
+    if (vParent.kind === 'root') return vParent._rangeEnd ?? null
+    if (vParent.kind === 'fragment') return findNextSiblingDomAnchor(vParent)
+    return null
+  }
 
-  let idx = children.indexOf(curr)
+  let idx = children.indexOf(curr as CommittedVNode)
   if (idx === -1) return null
   for (let i = idx + 1; i < children.length; i++) {
     let dom = findFirstDomAnchor(children[i])
@@ -2044,60 +2054,53 @@ export function findNextSiblingDomAnchor(curr: VNode): Node | null {
     return findNextSiblingDomAnchor(vParent)
   }
 
-  return null
+  return vParent.kind === 'root' ? (vParent._rangeEnd ?? null) : null
 }
 
 function reclaimPersistedMixinNode(
   persistedNode: CommittedHostNode,
   newNode: HostNode,
-  frame: FrameHandle,
-  scheduler: Scheduler,
-  styles: StyleManager,
-  vParent: VNode,
-  rootTarget: EventTarget,
-): void {
-  cancelPendingMixinRemoval(persistedNode._mixState as MixinRuntimeState | undefined)
+  vParent: VNodeParent,
+  context: ReconcileContext,
+): CommittedHostNode {
+  let { frame, scheduler, styles } = context
+  cancelPendingMixinRemoval(persistedNode._mixState)
   unmarkNodePersistedByMixins(persistedNode)
 
-  newNode._dom = persistedNode._dom
-  newNode._parent = vParent
-  newNode._controller = persistedNode._controller
-  newNode._mixState = persistedNode._mixState
-  newNode._directEventState = persistedNode._directEventState
-  newNode._controlledState = persistedNode._controlledState
-
   let prevProps = getHostProps(persistedNode)
-  let nextProps = resolveNodeMixProps(
+  let childInputs = newNode._children
+  let resolved = resolveNodeMixProps(newNode, vParent, frame, scheduler, persistedNode._mixState)
+  let nextProps = resolved.props
+  let committed = commitHostNode(
     newNode,
-    frame,
-    scheduler,
-    newNode._mixState as MixinRuntimeState | undefined,
+    vParent,
+    getSvgContext(vParent, newNode),
+    persistedNode._dom,
+    resolved,
   )
+  committed._directEventState = persistedNode._directEventState
+  committed._controlledState = persistedNode._controlledState
   if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
-    dispatchMixinBeforeUpdate(newNode._mixState as MixinRuntimeState | undefined)
+    dispatchMixinBeforeUpdate(committed._mixState)
   }
   patchHostProps(prevProps, nextProps, persistedNode._dom)
-  syncDirectEventListeners(newNode as CommittedHostNode)
-  ensureControlledReflection(newNode as CommittedHostNode, scheduler)
-  syncControlledReflection(newNode as CommittedHostNode, nextProps)
+  syncDirectEventListeners(committed)
+  ensureControlledReflection(committed, scheduler)
+  syncControlledReflection(committed, nextProps)
 
-  diffChildren(
+  committed._children = diffChildren(
     persistedNode._children,
-    newNode._children,
+    childInputs,
     persistedNode._dom,
-    frame,
-    scheduler,
-    styles,
-    newNode,
-    rootTarget,
+    committed,
+    context,
   )
 
-  if (newNode._mixState) {
-    bindNodeMixRuntime(newNode as CommittedHostNode, frame, scheduler, styles, true)
+  if (committed._mixState) {
+    bindNodeMixRuntime(committed, frame, scheduler, styles, true)
   }
   if (shouldDispatchInlineMixinLifecycle(persistedNode._dom)) {
-    scheduler.enqueueCommitPhase([
-      () => dispatchMixinCommit(newNode._mixState as MixinRuntimeState | undefined),
-    ])
+    scheduler.enqueueCommitPhase([() => dispatchMixinCommit(committed._mixState)])
   }
+  return committed
 }