@fictjs/runtime 0.16.0 → 0.17.1

package/src/binding.ts

@@ -21,7 +21,7 @@ import {
   SVGNamespace,
 } from './constants'
 import { createRenderEffect } from './effect'
-import { withHydrationRange, isHydratingActive } from './hydration'
+import { withHydration, withHydrationRange, isHydratingActive } from './hydration'
 import { Fragment } from './jsx'
 import {
   createRootContext,
@@ -38,7 +38,7 @@ import {
 import { toNodeArray, removeNodes, insertNodesBefore } from './node-ops'
 import { __fictIsHydrating } from './resume'
 import { batch } from './scheduler'
-import { computed, untrack, isSignal, isComputed, isEffect, isEffectScope } from './signal'
+import { computed, signal, untrack, isSignal, isComputed, isEffect, isEffectScope } from './signal'
 import type { Cleanup, FictNode } from './types'
 
 const isDev =
@@ -52,7 +52,9 @@ const PROP_CACHE = Symbol('fict:prop')
 const STYLE_CACHE = Symbol('fict:style')
 const CLASS_STATE_CACHE = Symbol('fict:class-state')
 const CLASS_VALUE_CACHE = Symbol('fict:class-value')
-const EVENT_TUPLE_LISTENER_CACHE = Symbol('fict:event-tuple-listener-cache')
+const EVENT_LISTENER_CACHE = Symbol('fict:event-listener-cache')
+const REF_ASSIGN_CACHE = Symbol('fict:ref-assign-cache')
+const CHILDREN_BINDING_CACHE = Symbol('fict:children-binding-cache')
 const NON_REACTIVE_FN_MARKER = Symbol.for('fict:non-reactive-fn')
 const REACTIVE_FN_MARKER = Symbol.for('fict:reactive-fn')
 const NON_REACTIVE_FN_REGISTRY_KEY = Symbol.for('fict:non-reactive-fn-registry')
@@ -61,7 +63,25 @@ type NonReactiveRegistryHost = typeof globalThis & {
   [NON_REACTIVE_FN_REGISTRY_KEY]?: WeakSet<(...args: unknown[]) => unknown>
 }
 
-type EventTupleListenerStore = Map<string, EventListener>
+interface StoredEventListener {
+  listener: EventListener
+  options: boolean | AddEventListenerOptions | undefined
+}
+
+interface ChildrenBindingState {
+  cleanup: Cleanup | undefined
+  value: (next?: FictNode | undefined) => FictNode | void
+  owner: RootContext | undefined
+}
+
+interface AssignedRefState {
+  cleanup: Cleanup | undefined
+  owner: RootContext | undefined
+  registeredCleanup: boolean
+  value: ((next?: unknown) => unknown | void) | undefined
+}
+
+type EventListenerStore = Map<string, StoredEventListener>
 
 const PROPERTY_BINDING_KEYS = new Set([
   'value',
@@ -105,6 +125,12 @@ export type MaybeReactive<T> = T | (() => T)
 /** Internal type for createElement function reference */
 export type CreateElementFn = (node: FictNode) => Node
 
+let registeredCreateElement: CreateElementFn | undefined
+
+export function registerCreateElement(fn: CreateElementFn): void {
+  registeredCreateElement = fn
+}
+
 /** Handle returned by conditional/list bindings for cleanup */
 export interface BindingHandle {
   /** Marker node(s) used for positioning */
@@ -1215,28 +1241,19 @@ function globalEventHandler(e: Event): void {
     if (!node) return false
     const handler = node[key]
     if (handler && !(node as HTMLButtonElement).disabled) {
-      const resolveData = (value: unknown): unknown => {
-        if (typeof value === 'function') {
-          try {
-            const fn = value as (event?: Event) => unknown
-            return fn.length > 0 ? fn(e) : fn()
-          } catch {
-            return (value as () => unknown)()
-          }
-        }
-        return value
-      }
-
       const rawData = (node as any)[dataKey] as unknown
       const hasData = rawData !== undefined
-      const resolvedNodeData = hasData ? resolveData(rawData) : undefined
+      const resolvedNodeData = hasData ? resolveEventData(rawData, e) : undefined
       // Wrap event handler calls in batch for synchronous flush & reduced microtasks
       batch(() => {
         if (typeof handler === 'function') {
           callEventHandler(handler, e, node, hasData ? resolvedNodeData : undefined)
         } else if (Array.isArray(handler)) {
-          const tupleData = resolveData(handler[1])
-          callEventHandler(handler[0], e, node, tupleData)
+          const tupleHandler = resolveEventHandlerValue(
+            handler[0] as EventListenerOrEventListenerObject | null | undefined,
+          )
+          const tupleData = resolveEventData(handler[1], e)
+          callEventHandler(tupleHandler, e, node, tupleData)
         }
       })
       if (e.cancelBubble) return false
@@ -1314,12 +1331,21 @@ function globalEventHandler(e: Event): void {
 export function addEventListener(
   node: Element,
   name: string,
-  handler: EventListener | [EventListener, unknown] | null | undefined,
+  handler:
+    | EventListenerOrEventListenerObject
+    | [EventListenerOrEventListenerObject, unknown]
+    | null
+    | undefined,
   delegate?: boolean,
+  options?: boolean | AddEventListenerOptions,
 ): void {
   if (delegate) {
     const key = `$$${name}`
     const dataKey = `${key}Data`
+    const rootRef = getCurrentRoot()
+    const delegationDocument = resolveDelegationDocument(node, rootRef)
+
+    delegateEvents([name], delegationDocument)
 
     if (handler == null) {
       ;(node as unknown as Record<string, unknown>)[key] = undefined
@@ -1327,61 +1353,130 @@ export function addEventListener(
       return
     }
 
-    // Event delegation: store handler on element
-    if (Array.isArray(handler)) {
-      ;(node as unknown as Record<string, unknown>)[key] = handler[0]
-      ;(node as unknown as Record<string, unknown>)[dataKey] = handler[1]
-    } else {
-      ;(node as unknown as Record<string, unknown>)[key] = handler
-      ;(node as unknown as Record<string, unknown>)[dataKey] = undefined
-    }
+    ;(node as unknown as Record<string, unknown>)[key] = createEventInvoker(
+      name,
+      handler,
+      node,
+      rootRef,
+    )
+    ;(node as unknown as Record<string, unknown>)[dataKey] = undefined
     return
   }
 
+  removeStoredEventListener(node, name, options)
   if (handler == null) return
 
-  if (Array.isArray(handler)) {
-    // Non-delegated with data binding
-    const store = getTupleEventListenerStore(node)
-    const existing = store.get(name)
-    if (existing) {
-      node.removeEventListener(name, existing)
-    }
-    const handlerFn = handler[0] as (data: unknown, e: Event) => void
-    const wrapped = (e: Event) => handlerFn.call(node, handler[1], e)
-    store.set(name, wrapped)
-    node.addEventListener(name, wrapped)
-    return
-  }
+  const rootRef = getCurrentRoot()
+  const wrapped = createEventInvoker(name, handler, node, rootRef)
+  node.addEventListener(name, wrapped, options)
+  getStoredEventListenerStore(node).set(getEventListenerStoreKey(name, options), {
+    listener: wrapped,
+    options,
+  })
+}
 
-  // Regular event listener
-  node.addEventListener(name, handler as EventListener)
+function resolveDelegationDocument(node: Element, rootRef: RootContext | undefined): Document {
+  const nodeDocument = node.ownerDocument ?? undefined
+  if (rootRef?.ownerDocument && nodeDocument?.defaultView == null) {
+    return rootRef.ownerDocument
+  }
+  return nodeDocument ?? rootRef?.ownerDocument ?? document
 }
 
-function getTupleEventListenerStore(node: Element): EventTupleListenerStore {
+function getStoredEventListenerStore(node: Element): EventListenerStore {
   const host = node as unknown as {
-    [EVENT_TUPLE_LISTENER_CACHE]?: EventTupleListenerStore
+    [EVENT_LISTENER_CACHE]?: EventListenerStore
   }
-  if (!host[EVENT_TUPLE_LISTENER_CACHE]) {
-    host[EVENT_TUPLE_LISTENER_CACHE] = new Map<string, EventListener>()
+  if (!host[EVENT_LISTENER_CACHE]) {
+    host[EVENT_LISTENER_CACHE] = new Map<string, StoredEventListener>()
   }
-  return host[EVENT_TUPLE_LISTENER_CACHE]!
+  return host[EVENT_LISTENER_CACHE]!
+}
+
+function getEventListenerStoreKey(
+  name: string,
+  options?: boolean | AddEventListenerOptions,
+): string {
+  const capture = typeof options === 'boolean' ? options : options?.capture === true
+  const passive = typeof options === 'object' && options?.passive === true
+  const once = typeof options === 'object' && options?.once === true
+  return `${name}:${capture ? 1 : 0}:${passive ? 1 : 0}:${once ? 1 : 0}`
 }
 
-function removeStoredTupleEventListener(node: Element, name: string): void {
+function removeStoredEventListener(
+  node: Element,
+  name: string,
+  options?: boolean | AddEventListenerOptions,
+): void {
   const host = node as unknown as {
-    [EVENT_TUPLE_LISTENER_CACHE]?: EventTupleListenerStore
+    [EVENT_LISTENER_CACHE]?: EventListenerStore
   }
-  const store = host[EVENT_TUPLE_LISTENER_CACHE]
+  const store = host[EVENT_LISTENER_CACHE]
   if (!store) return
 
-  const wrapped = store.get(name)
-  if (!wrapped) return
+  const entry = store.get(getEventListenerStoreKey(name, options))
+  if (!entry) return
 
-  node.removeEventListener(name, wrapped)
-  store.delete(name)
+  node.removeEventListener(name, entry.listener, entry.options)
+  store.delete(getEventListenerStoreKey(name, options))
   if (store.size === 0) {
-    delete host[EVENT_TUPLE_LISTENER_CACHE]
+    delete host[EVENT_LISTENER_CACHE]
+  }
+}
+
+function resolveEventData(value: unknown, event: Event): unknown {
+  if (typeof value !== 'function') return value
+  if (isReactive(value)) {
+    return (value as () => unknown)()
+  }
+  try {
+    const fn = value as (event?: Event) => unknown
+    return fn.length > 0 ? fn(event) : fn()
+  } catch {
+    return (value as () => unknown)()
+  }
+}
+
+function resolveEventHandlerValue(
+  value: EventListenerOrEventListenerObject | null | undefined,
+): EventListenerOrEventListenerObject | null | undefined {
+  if (isStrictlyReactive(value)) {
+    return (value as () => EventListenerOrEventListenerObject | null | undefined)()
+  }
+  return value
+}
+
+function createEventInvoker(
+  eventName: string,
+  handler:
+    | EventListenerOrEventListenerObject
+    | [EventListenerOrEventListenerObject, unknown]
+    | null
+    | undefined,
+  node: Element,
+  rootRef: RootContext | undefined,
+): EventListener {
+  return (event: Event) => {
+    try {
+      if (Array.isArray(handler)) {
+        const resolvedHandler = resolveEventHandlerValue(
+          handler[0] as EventListenerOrEventListenerObject | null | undefined,
+        )
+        const data = resolveEventData(handler[1], event)
+        callEventHandler(resolvedHandler, event, node, data)
+        return
+      }
+
+      const resolvedHandler = resolveEventHandlerValue(
+        handler as EventListenerOrEventListenerObject | null | undefined,
+      )
+      callEventHandler(resolvedHandler, event, node)
+    } catch (err) {
+      if (handleError(err, { source: 'event', eventName }, rootRef)) {
+        return
+      }
+      throw err
+    }
   }
 }
 
@@ -1412,63 +1507,28 @@ export function bindEvent(
   options?: boolean | AddEventListenerOptions,
 ): Cleanup {
   if (handler == null) return () => {}
-  const rootRef = getCurrentRoot()
 
   // Optimization: Global Event Delegation
   // If the event is delegatable and no options were provided,
   // we attach the handler to the element property and rely on the global listener.
   const shouldDelegate = options == null && DelegatedEvents.has(eventName)
   if (shouldDelegate) {
-    const key = `$$${eventName}`
-
-    // Ensure global delegation is active for this event
-    delegateEvents([eventName])
-
-    // Use stricter check - don't misidentify regular callbacks as reactive
-    const resolveHandler = isStrictlyReactive(handler)
-      ? (handler as () => EventListenerOrEventListenerObject | null | undefined)
-      : () => handler
-
-    // Cache a single wrapper that resolves the latest handler when invoked
-    // @ts-expect-error - using dynamic property for delegation
-    el[key] = function (this: any, ...args: any[]) {
-      try {
-        const fn = resolveHandler()
-        callEventHandler(fn as EventListenerOrEventListenerObject, args[0] as Event, el)
-      } catch (err) {
-        if (!handleError(err, { source: 'event', eventName }, rootRef)) {
-          throw err
-        }
-      }
-    }
+    addEventListener(el, eventName, handler, true)
 
     // Cleanup: remove property (no effect needed for static or reactive)
     return () => {
-      // @ts-expect-error - using dynamic property for delegation
-      el[key] = undefined
-    }
-  }
-
-  // Fallback: Native addEventListener
-  // Used for non-delegated events or when options are present
-  // Use stricter check - don't misidentify regular callbacks as reactive
-  const getHandler = isStrictlyReactive(handler) ? (handler as () => unknown) : () => handler
-
-  // Create wrapped handler that resolves reactive handlers
-  const wrapped: EventListener = event => {
-    try {
-      const resolved = getHandler()
-      callEventHandler(resolved as EventListenerOrEventListenerObject, event, el)
-    } catch (err) {
-      if (handleError(err, { source: 'event', eventName }, rootRef)) {
-        return
-      }
-      throw err
+      addEventListener(el, eventName, null, true)
     }
   }
 
-  el.addEventListener(eventName, wrapped, options)
-  const cleanup = () => el.removeEventListener(eventName, wrapped, options)
+  addEventListener(
+    el,
+    eventName,
+    handler as EventListenerOrEventListenerObject | null | undefined,
+    false,
+    options,
+  )
+  const cleanup = () => removeStoredEventListener(el, eventName, options)
   registerRootCleanup(cleanup)
   return cleanup
 }
@@ -1498,61 +1558,383 @@ export function bindEvent(
  * bindRef(el, () => props.ref)
  * ```
  */
-export function bindRef(el: Element, ref: unknown): Cleanup {
+export function bindRef(el: Element, ref: unknown, registerCleanup = true): Cleanup {
   if (ref == null) return () => {}
 
-  // Handle reactive refs (getters)
   const getRef = isReactive(ref) ? (ref as () => unknown) : () => ref
+  let currentRef: unknown
 
-  const applyRef = (refValue: unknown) => {
+  const applyRefValue = (refValue: unknown, value: Element | null) => {
     if (refValue == null) return
-
     if (typeof refValue === 'function') {
-      // Callback ref: call with element
-      ;(refValue as (el: Element) => void)(el)
+      ;(refValue as (el: Element | null) => void)(value)
     } else if (typeof refValue === 'object' && 'current' in refValue) {
-      // Ref object: set current property
-      ;(refValue as { current: Element | null }).current = el
+      ;(refValue as { current: Element | null }).current = value
     }
   }
 
-  // Apply ref initially
-  const initialRef = getRef()
-  applyRef(initialRef)
+  const clearCurrentRef = () => {
+    if (currentRef == null) return
+    applyRefValue(currentRef, null)
+    currentRef = undefined
+  }
 
-  // For reactive refs, track changes
+  const syncRef = (nextRef: unknown) => {
+    if (nextRef === currentRef) return
+    clearCurrentRef()
+    currentRef = nextRef
+    applyRefValue(currentRef, el)
+  }
+
+  let disposeTracking: Cleanup | undefined
   if (isReactive(ref)) {
-    const cleanup = createRenderEffect(() => {
-      const currentRef = getRef()
-      applyRef(currentRef)
+    disposeTracking = createRenderEffect(() => {
+      syncRef(getRef())
     })
-    registerRootCleanup(cleanup)
+  } else {
+    syncRef(getRef())
+  }
+
+  if (registerCleanup) {
+    registerRootCleanup(clearCurrentRef)
+  }
+
+  return () => {
+    disposeTracking?.()
+    clearCurrentRef()
+  }
+}
+
+function resolveAssignedChildrenValue(value: FictNode | undefined): FictNode {
+  if (typeof value === 'function') {
+    return isReactive(value) ? (value as () => FictNode)() : null
+  }
+  return value ?? null
+}
+
+function resolveAssignedRefValue(value: unknown): unknown {
+  if (isReactive(value)) {
+    return (value as () => unknown)()
+  }
+  return value
+}
+
+function createAssignedRefState(
+  node: Element,
+  owner: RootContext | undefined,
+  initialValue: unknown,
+): AssignedRefState {
+  const valueSignal = signal<unknown>(initialValue)
+  let currentRef: unknown
+
+  const applyRefValue = (refValue: unknown, value: Element | null) => {
+    if (refValue == null) return
+    if (typeof refValue === 'function') {
+      ;(refValue as (el: Element | null) => void)(value)
+    } else if (typeof refValue === 'object' && 'current' in refValue) {
+      ;(refValue as { current: Element | null }).current = value
+    }
+  }
+
+  const clearCurrentRef = () => {
+    if (currentRef == null) return
+    applyRefValue(currentRef, null)
+    currentRef = undefined
+  }
+
+  const syncRef = (nextRef: unknown) => {
+    if (nextRef === currentRef) return
+    clearCurrentRef()
+    currentRef = nextRef
+    applyRefValue(currentRef, node)
+  }
 
-    // On cleanup, null out the ref
-    const nullifyCleanup = () => {
-      const currentRef = getRef()
-      if (currentRef && typeof currentRef === 'object' && 'current' in currentRef) {
-        ;(currentRef as { current: Element | null }).current = null
+  const disposeTracking = createRenderEffect(() => {
+    syncRef(resolveAssignedRefValue(valueSignal() as unknown))
+  })
+
+  return {
+    cleanup: () => {
+      disposeTracking()
+      clearCurrentRef()
+    },
+    owner,
+    registeredCleanup: false,
+    value: (next?: unknown) => {
+      valueSignal(next)
+      syncRef(resolveAssignedRefValue(next))
+    },
+  }
+}
+
+function bindAssignedChildren(
+  node: Element,
+  getValue: () => FictNode,
+  createElementFn?: CreateElementFn,
+): Cleanup {
+  const hostRoot = getCurrentRoot()
+  const createFn = createElementFn ?? registeredCreateElement
+  let currentNodes: Node[] = []
+  let currentText: Text | null = null
+  let currentRoot: RootContext | null = null
+  let initialHydrating = __fictIsHydrating()
+
+  const collectCurrentChildren = (): Node[] => Array.from(node.childNodes)
+
+  const clearCurrentNodes = () => {
+    if (currentRoot) {
+      destroyRoot(currentRoot)
+      currentRoot = null
+    }
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes)
+      currentNodes = []
+    }
+    currentText = null
+  }
+
+  const setTextNode = (textValue: string, shouldInsert: boolean) => {
+    if (!shouldInsert) {
+      clearCurrentNodes()
+      if (node.childNodes.length > 0) {
+        node.replaceChildren()
       }
+      initialHydrating = false
+      return
     }
-    registerRootCleanup(nullifyCleanup)
 
-    return () => {
-      cleanup()
-      nullifyCleanup()
+    if (initialHydrating && isHydratingActive()) {
+      const hydratedNodes = collectCurrentChildren()
+      if (hydratedNodes.length === 1 && hydratedNodes[0]?.nodeType === Node.TEXT_NODE) {
+        const hydratedText = hydratedNodes[0] as Text
+        if (hydratedText.data !== textValue) {
+          hydratedText.data = textValue
+        }
+        currentText = hydratedText
+        currentNodes = [hydratedText]
+        initialHydrating = false
+        return
+      }
+    }
+
+    const textNode = currentText ?? (node.ownerDocument ?? document).createTextNode(textValue)
+    if (textNode.data !== textValue) {
+      textNode.data = textValue
     }
+
+    if (currentNodes.length === 1 && currentNodes[0] === textNode) {
+      currentText = textNode
+      return
+    }
+
+    if (currentRoot) {
+      destroyRoot(currentRoot)
+      currentRoot = null
+    }
+    if (currentNodes.length > 0) {
+      removeNodes(currentNodes)
+      currentNodes = []
+    }
+
+    node.replaceChildren(textNode)
+    currentText = textNode
+    currentNodes = [textNode]
+    initialHydrating = false
   }
 
-  // For static refs, register cleanup to null out on unmount
-  const cleanup = () => {
-    const refValue = getRef()
-    if (refValue && typeof refValue === 'object' && 'current' in refValue) {
-      ;(refValue as { current: Element | null }).current = null
+  const dispose = createRenderEffect(() => {
+    const value = getValue()
+    const isPrimitive =
+      value == null ||
+      value === false ||
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+
+    if (isPrimitive) {
+      const textValue = value == null || value === false ? '' : String(value)
+      const shouldInsert = value != null && value !== false
+      setTextNode(textValue, shouldInsert)
+      return
     }
+
+    clearCurrentNodes()
+
+    const root = createRootContext(hostRoot)
+    const prev = pushRoot(root)
+    let nodes: Node[]
+    let currentHydratedNodes: Node[] | undefined
+    let handledError = false
+    try {
+      const ownerDocument = node.ownerDocument ?? hostRoot?.ownerDocument ?? document
+      const createValue = () => {
+        if (value instanceof Node) {
+          return value
+        }
+        if (Array.isArray(value)) {
+          if (value.every(v => v instanceof Node)) {
+            return value as Node[]
+          }
+          if (createFn) {
+            const mapped: Node[] = []
+            for (const item of value) {
+              mapped.push(...toNodeArray(createFn(item as any), ownerDocument))
+            }
+            return mapped
+          }
+          return ownerDocument.createTextNode(String(value))
+        }
+        return createFn ? createFn(value) : ownerDocument.createTextNode(String(value))
+      }
+
+      const newNode =
+        initialHydrating && isHydratingActive()
+          ? withHydration(node, () => createValue())
+          : createValue()
+
+      nodes = toNodeArray(newNode, ownerDocument)
+      if (root.suspended) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
+
+      if (initialHydrating) {
+        const hydratedNodes = collectCurrentChildren()
+        const reuseHydratedNodes =
+          hydratedNodes.length === nodes.length &&
+          nodes.every((candidate, index) => candidate === hydratedNodes[index])
+        if (reuseHydratedNodes) {
+          currentHydratedNodes = hydratedNodes
+        } else {
+          node.replaceChildren(...nodes)
+        }
+      } else {
+        node.replaceChildren(...nodes)
+      }
+    } catch (err) {
+      if (handleSuspend(err as any, root)) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
+      if (handleError(err, { source: 'renderChild' }, root)) {
+        handledError = true
+        destroyRoot(root)
+        return
+      }
+      throw err
+    } finally {
+      popRoot(prev)
+      if (!handledError) {
+        flushOnMount(root)
+      }
+    }
+
+    currentRoot = root
+    currentNodes = currentHydratedNodes ?? nodes
+    initialHydrating = false
+  })
+
+  return () => {
+    dispose()
+    clearCurrentNodes()
   }
-  registerRootCleanup(cleanup)
+}
 
-  return cleanup
+function updateChildrenBinding(
+  node: Element,
+  value: FictNode | undefined,
+  createElementFn?: CreateElementFn,
+): void {
+  const host = node as {
+    [CHILDREN_BINDING_CACHE]?: ChildrenBindingState
+  }
+  const createFn = createElementFn ?? registeredCreateElement
+  const owner = getCurrentRoot()
+  let state = host[CHILDREN_BINDING_CACHE]
+
+  if (state && state.owner !== owner) {
+    state.cleanup?.()
+    state.cleanup = undefined
+    delete host[CHILDREN_BINDING_CACHE]
+    state = undefined
+  }
+
+  if (!state) {
+    const valueSignal = signal<FictNode | undefined>(value)
+    const cleanup = bindAssignedChildren(
+      node,
+      () => resolveAssignedChildrenValue(valueSignal() as FictNode | undefined),
+      createFn,
+    )
+    const nextState: ChildrenBindingState = {
+      cleanup,
+      owner,
+      value: valueSignal,
+    }
+    state = nextState
+    host[CHILDREN_BINDING_CACHE] = nextState
+    registerRootCleanup(() => {
+      state?.cleanup?.()
+      if (state) {
+        state.cleanup = undefined
+      }
+      if (host[CHILDREN_BINDING_CACHE] === state) {
+        delete host[CHILDREN_BINDING_CACHE]
+      }
+    })
+    return
+  }
+
+  state.value(value)
+}
+
+function updateAssignedRefBinding(node: Element, value: unknown): void {
+  const host = node as {
+    [REF_ASSIGN_CACHE]?: AssignedRefState
+  }
+  const owner = getCurrentRoot()
+  let state = host[REF_ASSIGN_CACHE]
+
+  if (state && state.owner !== owner) {
+    state.cleanup?.()
+    state.cleanup = undefined
+    delete host[REF_ASSIGN_CACHE]
+    state = undefined
+  }
+
+  if (!state && value == null) {
+    return
+  }
+
+  if (!state) {
+    state = createAssignedRefState(node, owner, value)
+    host[REF_ASSIGN_CACHE] = state
+  }
+
+  state.value?.(value)
+
+  if (value == null) {
+    if (!state.registeredCleanup) {
+      state.cleanup?.()
+      state.cleanup = undefined
+      delete host[REF_ASSIGN_CACHE]
+    }
+    return
+  }
+
+  if (!state.registeredCleanup && getCurrentRoot()) {
+    state.registeredCleanup = true
+    registerRootCleanup(() => {
+      state.cleanup?.()
+      state.cleanup = undefined
+      state.value = undefined
+      if (host[REF_ASSIGN_CACHE] === state) {
+        delete host[REF_ASSIGN_CACHE]
+      }
+    })
+  }
 }
 
 // ============================================================================
@@ -1590,27 +1972,15 @@ export function spread(
     return next
   }
 
-  // Handle children if not skipped
-  if (!skipChildren) {
-    createRenderEffect(() => {
-      const nextProps = resolveProps()
-      if ('children' in nextProps) {
-        prevProps.children = nextProps.children
-      }
-    })
-  }
-
   // Handle ref
-  createRenderEffect(() => {
-    const nextProps = resolveProps()
-    if (typeof nextProps.ref === 'function') {
-      ;(nextProps.ref as (el: Element) => void)(node)
-    }
-  })
+  bindRef(
+    node,
+    (typeof props === 'function' ? () => resolveProps().ref : resolveProps().ref) ?? null,
+  )
 
   // Handle all other props
   createRenderEffect(() => {
-    assign(node, resolveProps(), isSVG, true, prevProps, true, excludedProps)
+    assign(node, resolveProps(), isSVG, skipChildren, prevProps, true, excludedProps)
   })
 
   return prevProps
@@ -1642,7 +2012,13 @@ export function assign(
   for (const prop in prevProps) {
     if (excludedProps?.has(prop)) continue
     if (!(prop in props)) {
-      if (prop === 'children') continue
+      if (prop === 'children') {
+        if (!skipChildren) {
+          updateChildrenBinding(node, undefined)
+          prevProps.children = undefined
+        }
+        continue
+      }
       prevProps[prop] = assignProp(node, prop, null, prevProps[prop], isSVG, skipRef, props)
     }
   }
@@ -1650,14 +2026,14 @@ export function assign(
   // Set or update props
   for (const prop in props) {
     if (excludedProps?.has(prop)) continue
+    const value = props[prop]
     if (prop === 'children') {
       if (!skipChildren) {
-        // Handle children insertion
+        updateChildrenBinding(node, value as FictNode | undefined)
         prevProps.children = props.children
       }
       continue
     }
-    const value = props[prop]
     prevProps[prop] = assignProp(node, prop, value, prevProps[prop], isSVG, skipRef, props)
   }
 }
@@ -1690,8 +2066,8 @@ function assignProp(
 
   // Ref handling
   if (prop === 'ref') {
-    if (!skipRef && typeof value === 'function') {
-      ;(value as (el: Element) => void)(node)
+    if (!skipRef) {
+      updateAssignedRefBinding(node, value)
     }
     return value
   }
@@ -1703,16 +2079,35 @@ function assignProp(
       node.setAttribute(prop, value)
       return value
     }
-    if (prev && typeof prev !== 'string') node.removeEventListener(eventName, prev as EventListener)
-    if (value) node.addEventListener(eventName, value as EventListener)
+    if (prev && typeof prev !== 'string') removeStoredEventListener(node, eventName)
+    addEventListener(
+      node,
+      eventName,
+      value as
+        | EventListenerOrEventListenerObject
+        | [EventListenerOrEventListenerObject, unknown]
+        | null
+        | undefined,
+      false,
+    )
     return value
   }
 
   // Capture event handling: oncapture:eventname
   if (prop.slice(0, 10) === 'oncapture:') {
     const eventName = prop.slice(10)
-    if (prev) node.removeEventListener(eventName, prev as EventListener, true)
-    if (value) node.addEventListener(eventName, value as EventListener, true)
+    if (prev) removeStoredEventListener(node, eventName, true)
+    addEventListener(
+      node,
+      eventName,
+      value as
+        | EventListenerOrEventListenerObject
+        | [EventListenerOrEventListenerObject, unknown]
+        | null
+        | undefined,
+      false,
+      true,
+    )
     return value
   }
 
@@ -1721,20 +2116,20 @@ function assignProp(
     const eventName = prop.slice(2).toLowerCase()
     const shouldDelegate = DelegatedEvents.has(eventName)
     if (!shouldDelegate && prev) {
-      if (Array.isArray(prev)) {
-        removeStoredTupleEventListener(node, eventName)
-      } else {
-        node.removeEventListener(eventName, prev as EventListener)
-      }
+      removeStoredEventListener(node, eventName)
     }
     if (shouldDelegate || value) {
       addEventListener(
         node,
         eventName,
-        value as EventListener | [EventListener, unknown] | null | undefined,
+        value as
+          | EventListenerOrEventListenerObject
+          | [EventListenerOrEventListenerObject, unknown]
+          | null
+          | undefined,
         shouldDelegate,
+        false,
       )
-      if (shouldDelegate) delegateEvents([eventName])
     }
     return value
   }