@vidact/runtime 0.2.0-beta.6 → 0.2.0-beta.8

package/src/direct-dom.ts

@@ -1,5 +1,6 @@
 import {
   isCompiledBinding,
+  isCompiledEventHandler,
   isStructuralBinding,
   adoptCompiledRoot,
   constructCompiledComponent,
@@ -17,11 +18,13 @@ import type {
   StructuralBinding,
 } from './compiled/types.ts'
 import { hasInvalidChild } from './compiled/validation.ts'
-import { attachEventProp, isEventProp } from './dom/events.ts'
+import { attachCompiledEventProp, attachEventProp, isEventProp } from './dom/events.ts'
 import {
+  type IntrinsicNamespace,
   INTERNAL_NAMESPACE_PROP,
   createComponentProps,
   createIntrinsicElement,
+  currentIntrinsicNamespace,
   intrinsicChildrenNamespace,
   readIntrinsicNamespace,
   resolveIntrinsicNamespace,
@@ -71,6 +74,37 @@ export type DirectComponent = (props: Record<string, unknown>) => CompiledRender
 
 export const Fragment: symbol = Symbol.for('vidact.v1.Fragment')
 let frameworkMetadataHandler: ((element: Element, props: DirectProps) => Node) | undefined
+const staticIntrinsicShells = new Map<string, Element>()
+const cloneSafeHtmlTags = new Set([
+  'a',
+  'article',
+  'aside',
+  'button',
+  'div',
+  'footer',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'li',
+  'main',
+  'nav',
+  'ol',
+  'p',
+  'section',
+  'span',
+  'table',
+  'tbody',
+  'td',
+  'tfoot',
+  'th',
+  'thead',
+  'tr',
+  'ul',
+])
 
 /** @internal */
 export function installFrameworkMetadata(
@@ -134,14 +168,26 @@ export function h(
 
   const namespace = resolveIntrinsicNamespace(type, readIntrinsicNamespace(props))
   const namespaceUrl = intrinsicNamespaceUrl(namespace)
-  const element =
-    claimHydrationElement(type, namespaceUrl, (candidate) =>
-      matchesHydrationElement(candidate, props, children),
-    ) ?? createIntrinsicElement(document, type, namespace)
-  const restoreAfterChildren = applyProps(element, props, children)
-  withIntrinsicNamespace(intrinsicChildrenNamespace(type, namespace), () =>
-    appendChildren(element, children),
+  const hydratedElement = claimHydrationElement(type, namespaceUrl, (candidate) =>
+    matchesHydrationElement(candidate, props, children),
   )
+  const shellKey =
+    hydratedElement === undefined ? staticIntrinsicShellKey(type, namespace, props) : undefined
+  let shell = shellKey === undefined ? undefined : staticIntrinsicShells.get(shellKey)
+  if (shellKey !== undefined && shell === undefined) {
+    shell = createIntrinsicElement(document, type, namespace)
+    applyStaticShellProps(shell, props)
+    if (staticIntrinsicShells.size >= 128) staticIntrinsicShells.clear()
+    staticIntrinsicShells.set(shellKey, shell)
+  }
+  const element =
+    hydratedElement ??
+    (shell?.cloneNode(false) as Element | undefined) ??
+    createIntrinsicElement(document, type, namespace)
+  const restoreAfterChildren = applyProps(element, props, children, shell !== undefined)
+  const childrenNamespace = intrinsicChildrenNamespace(type, namespace)
+  if (currentIntrinsicNamespace() === childrenNamespace) appendChildren(element, children)
+  else withIntrinsicNamespace(childrenNamespace, () => appendChildren(element, children))
   if (restoreAfterChildren) restoreControlledFormState(element)
   if (frameworkMetadataHandler !== undefined && namespace === 'html') {
     return frameworkMetadataHandler(element, props)
@@ -149,6 +195,57 @@ export function h(
   return element
 }
 
+function staticIntrinsicShellKey(
+  type: string,
+  namespace: IntrinsicNamespace,
+  props: DirectProps,
+): string | undefined {
+  if (namespace !== 'html' || !cloneSafeHtmlTags.has(type)) return undefined
+  let key = type
+  if (props === null) return key
+  for (const name in props) {
+    if (!Object.hasOwn(props, name)) continue
+    if (name === 'key' || name === 'children' || name === INTERNAL_NAMESPACE_PROP) continue
+    const value = props[name]
+    if (!isStaticShellProp(name, value)) continue
+    key += `\0${name}\0${typeof value}\0${String(value)}`
+  }
+  return key
+}
+
+function isStaticShellProp(name: string, value: unknown): boolean {
+  if (
+    name !== 'className' &&
+    name !== 'id' &&
+    name !== 'href' &&
+    name !== 'rel' &&
+    name !== 'role' &&
+    name !== 'target' &&
+    name !== 'title' &&
+    name !== 'type' &&
+    !name.startsWith('aria-') &&
+    !name.startsWith('data-')
+  ) {
+    return false
+  }
+  return (
+    value === null ||
+    value === undefined ||
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  )
+}
+
+function applyStaticShellProps(element: Element, props: DirectProps): void {
+  if (props === null) return
+  for (const name in props) {
+    if (!Object.hasOwn(props, name)) continue
+    const value = props[name]
+    if (isStaticShellProp(name, value)) applyDomProp(element, name, value)
+  }
+}
+
 export function createElement(
   type: string | typeof Fragment | DirectComponent,
   props: DirectProps,
@@ -231,6 +328,7 @@ function applyProps(
   element: Element,
   props: DirectProps,
   children: readonly DirectChild[],
+  skipStaticShellProps = false,
 ): boolean {
   if (props === null) return false
   const rawHtml = props.dangerouslySetInnerHTML
@@ -245,6 +343,7 @@ function applyProps(
     }
     if (name === 'key' || name === 'children' || name === INTERNAL_NAMESPACE_PROP) continue
     if (name === 'dangerouslySetInnerHTML') continue
+    if (skipStaticShellProps && isStaticShellProp(name, value)) continue
     if (!hasControlledRestoration && isControlledFormProp(element, name)) {
       registerCompiledCleanup(ensureControlledFormRestoration(element))
       hasControlledRestoration = true
@@ -264,7 +363,7 @@ function applyProps(
     }
     if (isCompiledBinding(value)) {
       if (isEventProp(name)) {
-        mountCompiledProp(value, (next) => attachEventProp(element, name, next))
+        mountCompiledProp(value, (next) => attachCompiledEventProp(element, name, next))
         continue
       }
       if (element instanceof HTMLSelectElement && name === 'multiple') {
@@ -286,10 +385,14 @@ function applyProps(
         )
         continue
       }
-      mountCompiledProp(value, (next) => applyDomProp(element, name, next))
+      mountCompiledProp(value, applyDomProp, element, name)
       continue
     }
     if (isEventProp(name)) {
+      if (isCompiledEventHandler(value)) {
+        attachCompiledEventProp(element, name, value)
+        continue
+      }
       registerCompiledCleanup(attachEventProp(element, name, value))
       continue
     }
@@ -311,6 +414,29 @@ function applyProps(
 }
 
 function appendChildren(parent: Node, children: readonly DirectChild[]): void {
+  if (!isHydrating()) {
+    if (children.length === 0) return
+    if (children.length === 1) {
+      const child = children[0]
+      if (child === null || child === undefined || typeof child === 'boolean') return
+      if (child instanceof Node) {
+        parent.appendChild(child)
+        return
+      }
+      if (typeof child === 'string' || typeof child === 'number' || typeof child === 'bigint') {
+        parent.appendChild(document.createTextNode(String(child)))
+        return
+      }
+    }
+    if (
+      children.length > 1 &&
+      parent instanceof Element &&
+      children.every((child): child is Node => child instanceof Node)
+    ) {
+      parent.append(...children)
+      return
+    }
+  }
   if (hasInvalidChild(children)) {
     throw new TypeError(
       DEV ? 'unsupported direct child value; expected a DOM node or owned block' : 'V103',

package/src/dom/events.ts

@@ -1,6 +1,16 @@
 import { isReactFormChangeEvent, restoreControlledFormState } from './properties.ts'
 
 const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
+const delegatedClick = Symbol('vidact.click')
+const delegatedClickCursor = Symbol('vidact.click.cursor')
+const delegatedClickRoots = new WeakMap<EventTarget, number>()
+export const COMPILED_DELEGATED_EVENT_INVOKE = Symbol('vidact.compiled-event.invoke')
+
+type DelegatedEventListener = EventListener & {
+  [COMPILED_DELEGATED_EVENT_INVOKE]?: EventListener
+}
+type DelegatedClickElement = Element & { [delegatedClick]?: DelegatedEventListener }
+type DelegatedClickEvent = Event & { [delegatedClickCursor]?: EventTarget }
 
 function isSupportedReactEventName(name: string): boolean {
   return '|Abort|AnimationEnd|AnimationIteration|AnimationStart|AuxClick|BeforeInput|BeforeToggle|Blur|CanPlay|CanPlayThrough|Cancel|Change|Click|Close|CompositionEnd|CompositionStart|CompositionUpdate|ContextMenu|Copy|Cut|DoubleClick|Drag|DragEnd|DragEnter|DragExit|DragLeave|DragOver|DragStart|Drop|DurationChange|Emptied|Encrypted|Ended|Error|Focus|GotPointerCapture|Input|Invalid|KeyDown|KeyPress|KeyUp|Load|LoadedData|LoadedMetadata|LoadStart|LostPointerCapture|MouseDown|MouseEnter|MouseLeave|MouseMove|MouseOut|MouseOver|MouseUp|Paste|Pause|Play|Playing|PointerCancel|PointerDown|PointerEnter|PointerLeave|PointerMove|PointerOut|PointerOver|PointerUp|Progress|RateChange|Reset|Resize|Scroll|ScrollEnd|Seeked|Seeking|Select|Stalled|Submit|Suspend|TimeUpdate|Toggle|TouchCancel|TouchEnd|TouchMove|TouchStart|TransitionCancel|TransitionEnd|TransitionRun|TransitionStart|VolumeChange|Waiting|Wheel|'.includes(
@@ -38,6 +48,43 @@ export function attachEventProp(element: Element, name: string, value: unknown):
   return () => element.removeEventListener(eventName, dispatch, capture)
 }
 
+export function attachCompiledEventProp(
+  element: Element,
+  name: string,
+  value: unknown,
+): () => void {
+  if (name !== 'onClick') return attachEventProp(element, name, value)
+  if (value === null || value === undefined) return () => {}
+  if (typeof value !== 'function') {
+    throw new TypeError(DEV ? `event prop ${name} must be a function, null, or undefined` : 'V201')
+  }
+
+  const target = element as DelegatedClickElement
+  const listener = value as DelegatedEventListener
+  target[delegatedClick] = listener
+  return () => {
+    if (target[delegatedClick] === listener) delete target[delegatedClick]
+  }
+}
+
+export function retainCompiledEventRoot(root: EventTarget): () => void {
+  const references = delegatedClickRoots.get(root) ?? 0
+  if (references === 0) root.addEventListener('click', dispatchDelegatedClick)
+  delegatedClickRoots.set(root, references + 1)
+  let retained = true
+  return () => {
+    if (!retained) return
+    retained = false
+    const nextReferences = (delegatedClickRoots.get(root) ?? 1) - 1
+    if (nextReferences > 0) {
+      delegatedClickRoots.set(root, nextReferences)
+      return
+    }
+    delegatedClickRoots.delete(root)
+    root.removeEventListener('click', dispatchDelegatedClick)
+  }
+}
+
 export function isEventProp(name: string): boolean {
   return /^on[A-Z]/.test(name)
 }
@@ -85,6 +132,45 @@ function reactShapedEvent(event: Event): Event {
   return shaped
 }
 
+function dispatchDelegatedClick(event: Event): void {
+  const root = event.currentTarget
+  if (root === null) return
+  const path = event.composedPath()
+  const previousRoot = (event as DelegatedClickEvent)[delegatedClickCursor]
+  const start = previousRoot === undefined ? 0 : path.indexOf(previousRoot) + 1
+  for (let index = start; index < path.length; index += 1) {
+    const target = path[index]
+    if (target instanceof Element) {
+      const listener = (target as DelegatedClickElement)[delegatedClick]
+      if (listener !== undefined) invokeDelegatedClick(target, listener, event)
+    }
+    if (event.cancelBubble) break
+    if (target === root) break
+  }
+  ;(event as DelegatedClickEvent)[delegatedClickCursor] = root
+}
+
+function invokeDelegatedClick(
+  element: Element,
+  listener: DelegatedEventListener,
+  event: Event,
+): void {
+  const currentTarget = Object.getOwnPropertyDescriptor(event, 'currentTarget')
+  Object.defineProperty(event, 'currentTarget', { configurable: true, value: element })
+  try {
+    const shapedEvent = reactShapedEvent(event)
+    const compiledInvoke = listener[COMPILED_DELEGATED_EVENT_INVOKE]
+    if (compiledInvoke === undefined) listener(shapedEvent)
+    else compiledInvoke.call(listener, shapedEvent)
+  } finally {
+    if (currentTarget === undefined) {
+      Reflect.deleteProperty(event, 'currentTarget')
+    } else {
+      Object.defineProperty(event, 'currentTarget', currentTarget)
+    }
+  }
+}
+
 function nativeEventName(reactEventName: string): string {
   if (reactEventName === 'DoubleClick') return 'dblclick'
   if (reactEventName === 'Focus') return 'focusin'

package/src/hydration-bridge.ts

@@ -30,8 +30,12 @@ export interface HydrationOperations {
   readonly claimSuspenseFallback: (parent: Node) => Comment | undefined
   readonly skipRange: (start: Comment, end: Comment) => void
   readonly withoutHydration: <Result>(operation: () => Result) => Result
-  readonly withInsertion: <Result>(parent: Node, before: Node, operation: () => Result) => Result
-  readonly insertionPoint: () => readonly [parent: Node, before: Node] | undefined
+  readonly withInsertion: <Result>(
+    parent: Node,
+    before: Node | null,
+    operation: () => Result,
+  ) => Result
+  readonly insertionPoint: () => readonly [parent: Node, before: Node | null] | undefined
   readonly cursor: (parent: Node) => Node | null | undefined
   readonly rangeParent: (start: Comment, end: Comment) => Node | undefined
 }
@@ -169,13 +173,15 @@ export function withoutHydration<Result>(operation: () => Result): Result {
 
 export function withHydrationInsertion<Result>(
   parent: Node,
-  before: Node,
+  before: Node | null,
   operation: () => Result,
 ): Result {
   return hydration === undefined ? operation() : hydration.withInsertion(parent, before, operation)
 }
 
-export function hydrationInsertionPoint(): readonly [parent: Node, before: Node] | undefined {
+export function hydrationInsertionPoint():
+  | readonly [parent: Node, before: Node | null]
+  | undefined {
   return hydration?.insertionPoint()
 }
 

package/src/hydration.ts

@@ -21,7 +21,7 @@ interface HydrationState {
 }
 
 let activeHydration: HydrationState | undefined
-let activeInsertionPoint: readonly [parent: Node, before: Node] | undefined
+let activeInsertionPoint: readonly [parent: Node, before: Node | null] | undefined
 const hydrationFragments = new WeakMap<DocumentFragment, readonly unknown[]>()
 
 export function beginHydration(host: ParentNode): () => void {
@@ -400,7 +400,7 @@ export function withoutHydration<Result>(operation: () => Result): Result {
 
 export function withHydrationInsertion<Result>(
   parent: Node,
-  before: Node,
+  before: Node | null,
   operation: () => Result,
 ): Result {
   if (activeHydration === undefined) return operation()
@@ -413,7 +413,9 @@ export function withHydrationInsertion<Result>(
   }
 }
 
-export function hydrationInsertionPoint(): readonly [parent: Node, before: Node] | undefined {
+export function hydrationInsertionPoint():
+  | readonly [parent: Node, before: Node | null]
+  | undefined {
   return activeInsertionPoint
 }
 

package/src/index.ts

@@ -5,6 +5,7 @@ export {
   binding,
   choose,
   compiledEvent,
+  compiledInlineEvent,
   compiledEffect,
   compiledImperativeHandle,
   compiledInsertionEffect,
@@ -71,6 +72,7 @@ export { createRef, useRef, type MutableRef } from './ref.ts'
 export {
   cloneRenderable,
   cloneRenderableComponent,
+  createComponentRenderable,
   createReactElement,
   createReactElement as createElement,
   createRenderable,

package/src/keyed-list.ts

@@ -1,7 +1,13 @@
+export interface KeyedDisposeTarget {
+  readonly [3]: () => void
+}
+
+export type KeyedDisposer = (() => void) | KeyedDisposeTarget
+
 export type KeyedItem<T> = readonly [
   nodes: readonly Node[],
   update?: ((value: T, index: number) => void) | undefined,
-  dispose?: (() => void) | undefined,
+  dispose?: KeyedDisposer | undefined,
 ]
 
 export type KeyedRenderResult<T> = Node | readonly Node[] | KeyedItem<T>
@@ -21,7 +27,7 @@ type RecordState<T, K> = readonly [
   key: K,
   nodes: readonly Node[],
   update: ((value: T, index: number) => void) | undefined,
-  dispose: (() => void) | undefined,
+  dispose: KeyedDisposer | undefined,
 ]
 
 const DEV = typeof __VIDACT_DEV__ === 'undefined' || __VIDACT_DEV__
@@ -54,10 +60,55 @@ export function createKeyedList<T, K>(
     assertValidKeys(keys)
     assertUniqueKeys(keys)
 
-    const previousByKey = new Map<K, RecordState<T, K>>()
-    for (const record of records) previousByKey.set(record[0], record)
+    if (!hydrationPending && values.length === 0 && records.length > 0) {
+      const removed = records
+      records = []
+      deleteRangeContents(start, end)
+      const cleanup = disposeRecordOwners(removed)
+      if (cleanup[1]) throw cleanup[0]
+      return []
+    }
+
+    if (!hydrationPending && hasRetainedPrefix(records, keys)) {
+      const retainedCount = Math.min(records.length, values.length)
+      const created: RecordState<T, K>[] = []
+      try {
+        for (let index = records.length; index < values.length; index += 1) {
+          const value = values[index] as T
+          const item = normalizeRenderResult(
+            withHydrationInsertion(parent, end, () => options.render(value, index)),
+          )
+          created.push([keys[index] as K, item[0], item[1], item[2]])
+        }
+        for (let index = 0; index < retainedCount; index += 1) {
+          records[index]![2]?.(values[index] as T, index)
+        }
+      } catch (error) {
+        disposeRecords(currentParent, created)
+        throw error
+      }
+
+      const cleanup = disposeRecords(currentParent, records.slice(values.length))
+      const fragment = document.createDocumentFragment()
+      for (const record of created) {
+        for (const node of record[1]) fragment.append(node)
+      }
+      currentParent.insertBefore(fragment, end)
+      if (records.length !== values.length) {
+        records = retainedCount === 0 ? created : [...records.slice(0, retainedCount), ...created]
+      }
+      if (cleanup[1]) throw cleanup[0]
+      return collectRecordNodes(created)
+    }
+
+    const previousByKey = new Map<K, readonly [record: RecordState<T, K>, index: number]>()
+    for (let index = 0; index < records.length; index += 1) {
+      const record = records[index] as RecordState<T, K>
+      previousByKey.set(record[0], [record, index])
+    }
     const created: RecordState<T, K>[] = []
     const retained: Array<readonly [RecordState<T, K>, T, number]> = []
+    const previousIndexes: number[] = []
     let nextRecords: RecordState<T, K>[]
     try {
       nextRecords = values.map((value, index): RecordState<T, K> => {
@@ -65,8 +116,9 @@ export function createKeyedList<T, K>(
         const previous = previousByKey.get(key)
         if (previous !== undefined) {
           previousByKey.delete(key)
-          retained.push([previous, value, index])
-          return previous
+          retained.push([previous[0], value, index])
+          previousIndexes.push(previous[1])
+          return previous[0]
         }
 
         const item = normalizeRenderResult(
@@ -74,6 +126,7 @@ export function createKeyedList<T, K>(
         )
         const record: RecordState<T, K> = [key, item[0], item[1], item[2]]
         created.push(record)
+        previousIndexes.push(-1)
         return record
       })
       for (const [record, value, index] of retained) record[2]?.(value, index)
@@ -82,13 +135,18 @@ export function createKeyedList<T, K>(
       throw error
     }
 
-    const cleanup = disposeRecords(currentParent, previousByKey.values())
+    const cleanup = disposeRecords(currentParent, mapRecords(previousByKey.values()))
 
-    const activeElement =
-      document.activeElement instanceof HTMLElement &&
-      currentParent.contains(document.activeElement)
+    const stableRecords = longestIncreasingSubsequence(previousIndexes)
+    const hasRetainedMoves = previousIndexes.some(
+      (previousIndex, index) => previousIndex >= 0 && stableRecords[index] === 0,
+    )
+    const activeElement = hasRetainedMoves
+      ? document.activeElement instanceof HTMLElement &&
+        currentParent.contains(document.activeElement)
         ? document.activeElement
         : null
+      : null
     const selectionControl =
       activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement
         ? activeElement
@@ -100,10 +158,14 @@ export function createKeyedList<T, K>(
     let cursor: Node = end
     for (let recordIndex = nextRecords.length - 1; recordIndex >= 0; recordIndex -= 1) {
       const record = nextRecords[recordIndex] as RecordState<T, K>
-      for (let nodeIndex = record[1].length - 1; nodeIndex >= 0; nodeIndex -= 1) {
-        const node = record[1][nodeIndex] as Node
-        if (node.nextSibling !== cursor) moveBefore(currentParent, node, cursor)
-        cursor = node
+      if (previousIndexes[recordIndex] === -1 || stableRecords[recordIndex] === 0) {
+        for (let nodeIndex = record[1].length - 1; nodeIndex >= 0; nodeIndex -= 1) {
+          const node = record[1][nodeIndex] as Node
+          if (node.nextSibling !== cursor) moveBefore(currentParent, node, cursor)
+          cursor = node
+        }
+      } else {
+        cursor = record[1][0] as Node
       }
     }
     if (
@@ -128,7 +190,7 @@ export function createKeyedList<T, K>(
       finishHydrationArrayRange(currentParent, end)
     }
     if (cleanup[1]) throw cleanup[0]
-    return created.flatMap((record) => record[1])
+    return collectRecordNodes(created)
   }
 
   const dispose = (): void => {
@@ -148,6 +210,55 @@ export function createKeyedList<T, K>(
   return { dispose, parent: () => end.parentNode, update }
 }
 
+function* mapRecords<T, K>(
+  entries: Iterable<readonly [record: RecordState<T, K>, index: number]>,
+): Iterable<RecordState<T, K>> {
+  for (const [record] of entries) yield record
+}
+
+function collectRecordNodes<T, K>(records: readonly RecordState<T, K>[]): Node[] {
+  const nodes: Node[] = []
+  for (const record of records) nodes.push(...record[1])
+  return nodes
+}
+
+function longestIncreasingSubsequence(indexes: readonly number[]): Uint8Array {
+  const predecessors = new Int32Array(indexes.length).fill(-1)
+  const tails: number[] = []
+  for (let index = 0; index < indexes.length; index += 1) {
+    const value = indexes[index] as number
+    if (value < 0) continue
+    let low = 0
+    let high = tails.length
+    while (low < high) {
+      const middle = (low + high) >>> 1
+      if ((indexes[tails[middle] as number] as number) < value) low = middle + 1
+      else high = middle
+    }
+    if (low > 0) predecessors[index] = tails[low - 1] as number
+    tails[low] = index
+  }
+
+  const stable = new Uint8Array(indexes.length)
+  let index = tails.at(-1) ?? -1
+  while (index >= 0) {
+    stable[index] = 1
+    index = predecessors[index] as number
+  }
+  return stable
+}
+
+function hasRetainedPrefix<T, K>(
+  records: readonly RecordState<T, K>[],
+  keys: readonly K[],
+): boolean {
+  const retainedCount = Math.min(records.length, keys.length)
+  for (let index = 0; index < retainedCount; index += 1) {
+    if (records[index]![0] !== keys[index]) return false
+  }
+  return true
+}
+
 function moveBefore(parent: Node, node: Node, before: Node): void {
   const statePreservingParent = parent as Node & {
     moveBefore?: (node: Node, before: Node | null) => void
@@ -184,14 +295,21 @@ function normalizeRenderResult<T>(result: KeyedRenderResult<T>): KeyedItem<T> {
 }
 
 function normalizeNodes(nodes: readonly Node[]): readonly Node[] {
-  const normalized: Node[] = []
-  for (const node of nodes) {
-    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-      normalized.push(...node.childNodes)
-    } else {
-      normalized.push(node)
+  if (nodes.length === 0) return [document.createComment(DEV ? 'vidact:empty' : '')]
+  let firstFragment = -1
+  for (let index = 0; index < nodes.length; index += 1) {
+    if (nodes[index]!.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+      firstFragment = index
+      break
     }
   }
+  if (firstFragment === -1) return nodes
+  const normalized = nodes.slice(0, firstFragment) as Node[]
+  for (let index = firstFragment; index < nodes.length; index += 1) {
+    const node = nodes[index]!
+    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) normalized.push(...node.childNodes)
+    else normalized.push(node)
+  }
   return normalized.length === 0 ? [document.createComment(DEV ? 'vidact:empty' : '')] : normalized
 }
 
@@ -218,7 +336,23 @@ function disposeRecords<T, K>(
   for (const record of records) {
     removeNodes(parent, record[1])
     try {
-      record[3]?.()
+      disposeRecord(record[3])
+    } catch (error) {
+      if (!failed) firstError = error
+      failed = true
+    }
+  }
+  return [firstError, failed]
+}
+
+function disposeRecordOwners<T, K>(
+  records: Iterable<RecordState<T, K>>,
+): readonly [error: unknown, failed: boolean] {
+  let firstError: unknown
+  let failed = false
+  for (const record of records) {
+    try {
+      disposeRecord(record[3])
     } catch (error) {
       if (!failed) firstError = error
       failed = true
@@ -226,6 +360,18 @@ function disposeRecords<T, K>(
   }
   return [firstError, failed]
 }
+
+function disposeRecord(disposer: KeyedDisposer | undefined): void {
+  if (typeof disposer === 'function') disposer()
+  else disposer?.[3]()
+}
+
+function deleteRangeContents(start: Node, end: Node): void {
+  const range = start.ownerDocument?.createRange() ?? document.createRange()
+  range.setStartAfter(start)
+  range.setEndBefore(end)
+  range.deleteContents()
+}
 import {
   claimHydrationArrayRange,
   finishHydrationArrayRange,