@fictjs/runtime 0.16.0 → 0.17.1

package/src/context.ts

@@ -56,6 +56,7 @@ import {
   type RootContext,
 } from './lifecycle'
 import { insertNodesBefore, removeNodes, toNodeArray } from './node-ops'
+import { untrack } from './signal'
 import type { BaseProps, FictNode } from './types'
 
 // ============================================================================
@@ -222,7 +223,13 @@ export function createContext<T>(defaultValue: T): Context<T> {
     createRenderEffect(() => {
       // Update context value on re-render (if value prop changes reactively)
       contextMap.set(id, props.value)
-      renderChildren(props.children)
+
+      // Provider value updates should not subscribe this effect to arbitrary
+      // signal reads that happen while rendering descendants. Child trees own
+      // their own reactivity; the provider only needs to react to its props.
+      untrack(() => {
+        renderChildren(props.children)
+      })
     })
 
     return fragment

package/src/dom.ts

@@ -19,7 +19,9 @@ import {
   createClassBinding,
   createChildBinding,
   bindEvent,
+  bindRef,
   isReactive,
+  registerCreateElement,
   type MaybeReactive,
   type AttributeSetter,
   type BindingHandle,
@@ -27,7 +29,7 @@ import {
 import { Properties, ChildProperties, getPropAlias, SVGElements, SVGNamespace } from './constants'
 import { getDevtoolsHook } from './devtools'
 import { __fictPushContext, __fictPopContext, __fictGetCurrentComponentId } from './hooks'
-import { claimNodes, isHydratingActive, withHydration } from './hydration'
+import { claimNodes, claimText, isHydratingActive, withHydration } from './hydration'
 import { Fragment } from './jsx'
 import {
   createRootContext,
@@ -51,7 +53,7 @@ import {
   __fictExitHydration,
 } from './resume'
 import { untrack } from './scheduler'
-import type { DOMElement, FictNode, FictVNode, RefObject } from './types'
+import type { DOMElement, FictNode, FictVNode } from './types'
 
 type NamespaceContext = 'svg' | 'mathml' | null
 
@@ -214,6 +216,8 @@ export function createElement(node: FictNode): DOMElement {
   return createElementWithContext(node, null, resolveOwnerDocument())
 }
 
+registerCreateElement(createElement)
+
 function resolveNamespace(tagName: string, namespace: NamespaceContext): NamespaceContext {
   if (tagName === 'svg') return 'svg'
   if (tagName === 'math') return 'mathml'
@@ -227,6 +231,13 @@ function resolveOwnerDocument(ownerDocument?: Document): Document {
   return ownerDocument ?? getCurrentRoot()?.ownerDocument ?? document
 }
 
+function createTextNodeWithHydration(value: string, ownerDocument: Document): Text {
+  if (!isHydratingActive()) {
+    return ownerDocument.createTextNode(value)
+  }
+  return claimText(value, () => ownerDocument.createTextNode(value))
+}
+
 function createElementWithContext(
   node: FictNode,
   namespace: NamespaceContext,
@@ -239,14 +250,14 @@ function createElementWithContext(
 
   // Null/undefined/false - empty placeholder
   if (node === null || node === undefined || node === false) {
-    return ownerDocument.createTextNode('')
+    return createTextNodeWithHydration('', ownerDocument)
   }
 
   // Reactive getter function - resolve to actual node
   if (isReactive(node)) {
     const resolved = (node as () => FictNode)()
     if (resolved === node) {
-      return ownerDocument.createTextNode('')
+      return createTextNodeWithHydration('', ownerDocument)
     }
     return createElementWithContext(resolved, namespace, ownerDocument)
   }
@@ -254,7 +265,7 @@ function createElementWithContext(
   // Non-reactive function values are not valid DOM nodes.
   // Keep callback values inert instead of stringifying function source.
   if (typeof node === 'function') {
-    return ownerDocument.createTextNode('')
+    return createTextNodeWithHydration('', ownerDocument)
   }
 
   if (typeof node === 'object' && node !== null && !(node instanceof Node)) {
@@ -290,11 +301,11 @@ function createElementWithContext(
 
   // Primitive values - text node
   if (typeof node === 'string' || typeof node === 'number') {
-    return ownerDocument.createTextNode(String(node))
+    return createTextNodeWithHydration(String(node), ownerDocument)
   }
 
   if (typeof node === 'boolean') {
-    return ownerDocument.createTextNode('')
+    return createTextNodeWithHydration('', ownerDocument)
   }
 
   // VNode
@@ -615,7 +626,7 @@ function appendChildNode(
   // Cast to Node for remaining logic
   let domNode: Node
   if (typeof child !== 'object' || child === null) {
-    domNode = parentOwnerDocument.createTextNode(String(child ?? ''))
+    domNode = createTextNodeWithHydration(String(child ?? ''), parentOwnerDocument)
   } else {
     domNode = createElementWithContext(child as any, namespace, parentOwnerDocument) as Node
   }
@@ -675,43 +686,14 @@ function appendChildren(
  * Both types are automatically cleaned up on unmount.
  */
 function applyRef(el: Element, value: unknown): void {
-  if (typeof value === 'function') {
-    // Callback ref
-    const refFn = value as (el: Element | null) => void
-    refFn(el)
-
-    // Match React behavior: call ref(null) on unmount
-    const root = getCurrentRoot()
-    if (root) {
-      registerRootCleanup(() => {
-        refFn(null)
-      })
-    } else if (isDev) {
-      console.warn(
-        '[fict] Ref applied outside of a root context. ' +
-          'The ref cleanup (setting to null) will not run automatically. ' +
-          'Consider using createRoot() or ensure the element is created within a component.',
-      )
-    }
-  } else if (value && typeof value === 'object' && 'current' in value) {
-    // Object ref
-    const refObj = value as RefObject<Element>
-    refObj.current = el
-
-    // Auto-cleanup on unmount
-    const root = getCurrentRoot()
-    if (root) {
-      registerRootCleanup(() => {
-        refObj.current = null
-      })
-    } else if (isDev) {
-      console.warn(
-        '[fict] Ref applied outside of a root context. ' +
-          'The ref cleanup (setting to null) will not run automatically. ' +
-          'Consider using createRoot() or ensure the element is created within a component.',
-      )
-    }
+  if (!getCurrentRoot() && isDev) {
+    console.warn(
+      '[fict] Ref applied outside of a root context. ' +
+        'The ref cleanup (setting to null) will not run automatically. ' +
+        'Consider using createRoot() or ensure the element is created within a component.',
+    )
   }
+  bindRef(el, value)
 }
 
 // ============================================================================

package/src/effect.ts

@@ -21,7 +21,7 @@ export function createEffect(fn: Effect, options?: EffectOptions): () => void {
 
   // Cleanup runner - called by runEffect BEFORE signal values are committed
   const doCleanup = () => {
-    runCleanupList(cleanups)
+    runCleanupList(cleanups, rootForError)
     cleanups = []
   }
 
@@ -49,7 +49,7 @@ export function createEffect(fn: Effect, options?: EffectOptions): () => void {
 
   const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options)
   const teardown = () => {
-    runCleanupList(cleanups)
+    runCleanupList(cleanups, rootForError)
     disposeEffect()
   }
 
@@ -61,15 +61,13 @@ export function createEffect(fn: Effect, options?: EffectOptions): () => void {
 export const $effect = createEffect
 
 export function createRenderEffect(fn: Effect, options?: EffectOptions): () => void {
-  let cleanup: Cleanup | undefined
+  let cleanups: Cleanup[] = []
   const rootForError = getCurrentRoot()
 
   // Cleanup runner - called by runEffect BEFORE signal values are committed
   const doCleanup = () => {
-    if (cleanup) {
-      cleanup()
-      cleanup = undefined
-    }
+    runCleanupList(cleanups, rootForError)
+    cleanups = []
   }
 
   const run = () => {
@@ -77,7 +75,9 @@ export function createRenderEffect(fn: Effect, options?: EffectOptions): () => v
     try {
       const maybeCleanup = fn()
       if (typeof maybeCleanup === 'function') {
-        cleanup = maybeCleanup
+        cleanups = [maybeCleanup]
+      } else {
+        cleanups = []
       }
     } catch (err) {
       if (handleSuspend(err as any, rootForError)) {
@@ -93,10 +93,7 @@ export function createRenderEffect(fn: Effect, options?: EffectOptions): () => v
 
   const disposeEffect = effectWithCleanup(run, doCleanup, rootForError, options)
   const teardown = () => {
-    if (cleanup) {
-      cleanup()
-      cleanup = undefined
-    }
+    runCleanupList(cleanups, rootForError)
     disposeEffect()
   }
 

package/src/error-boundary.ts

@@ -8,6 +8,7 @@ import {
   pushRoot,
   popRoot,
   registerErrorHandler,
+  registerRootCleanup,
 } from './lifecycle'
 import { insertNodesBefore, removeNodes, toNodeArray } from './node-ops'
 import type { BaseProps, FictNode } from './types'
@@ -105,6 +106,13 @@ export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
 
   renderValue(props.children ?? null)
 
+  registerRootCleanup(() => {
+    if (cleanup) {
+      cleanup()
+      cleanup = undefined
+    }
+  })
+
   registerErrorHandler(err => {
     renderValue(toView(err))
     props.onError?.(err)

package/src/hydration.ts

@@ -6,7 +6,7 @@ interface HydrationContext {
 
 const hydrationStack: HydrationContext[] = []
 
-export function withHydration(root: ParentNode & Node, fn: () => void): void {
+export function withHydration<T>(root: ParentNode & Node, fn: () => T): T {
   const owner = root.ownerDocument ?? document
   hydrationStack.push({
     cursor: root.firstChild,
@@ -14,25 +14,25 @@ export function withHydration(root: ParentNode & Node, fn: () => void): void {
     owner,
   })
   try {
-    fn()
+    return fn()
   } finally {
     hydrationStack.pop()
   }
 }
 
-export function withHydrationRange(
+export function withHydrationRange<T>(
   start: Node | null,
   end: Node | null,
   owner: Document,
-  fn: () => void,
-): void {
+  fn: () => T,
+): T {
   hydrationStack.push({
     cursor: start,
     boundary: end,
     owner,
   })
   try {
-    fn()
+    return fn()
   } finally {
     hydrationStack.pop()
   }
@@ -70,6 +70,25 @@ export function claimNodes(templateRoot: Node, fallback: () => Node): Node {
   return frag
 }
 
+export function claimText(value: string, fallback: () => Text): Text {
+  const ctx = hydrationStack[hydrationStack.length - 1]
+  if (
+    !ctx ||
+    !ctx.cursor ||
+    ctx.cursor === ctx.boundary ||
+    ctx.cursor.nodeType !== Node.TEXT_NODE
+  ) {
+    return fallback()
+  }
+
+  const text = ctx.cursor as Text
+  ctx.cursor = text.nextSibling
+  if (text.data !== value) {
+    text.data = value
+  }
+  return text
+}
+
 export function isHydratingActive(): boolean {
   return hydrationStack.length > 0
 }

package/src/jsx.ts

@@ -207,59 +207,105 @@ interface HTMLAttributes<T> {
 
   // Event handlers
   onClick?: (e: MouseEvent) => void
+  onClick$?: (e: MouseEvent) => void
   onDblClick?: (e: MouseEvent) => void
+  onDblClick$?: (e: MouseEvent) => void
   onMouseDown?: (e: MouseEvent) => void
+  onMouseDown$?: (e: MouseEvent) => void
   onMouseUp?: (e: MouseEvent) => void
+  onMouseUp$?: (e: MouseEvent) => void
   onMouseMove?: (e: MouseEvent) => void
+  onMouseMove$?: (e: MouseEvent) => void
   onMouseEnter?: (e: MouseEvent) => void
+  onMouseEnter$?: (e: MouseEvent) => void
   onMouseLeave?: (e: MouseEvent) => void
+  onMouseLeave$?: (e: MouseEvent) => void
   onMouseOver?: (e: MouseEvent) => void
+  onMouseOver$?: (e: MouseEvent) => void
   onMouseOut?: (e: MouseEvent) => void
+  onMouseOut$?: (e: MouseEvent) => void
   onContextMenu?: (e: MouseEvent) => void
+  onContextMenu$?: (e: MouseEvent) => void
   onInput?: (e: InputEvent) => void
+  onInput$?: (e: InputEvent) => void
   onChange?: (e: Event) => void
+  onChange$?: (e: Event) => void
   onSubmit?: (e: SubmitEvent) => void
+  onSubmit$?: (e: SubmitEvent) => void
   onReset?: (e: Event) => void
+  onReset$?: (e: Event) => void
   onKeyDown?: (e: KeyboardEvent) => void
+  onKeyDown$?: (e: KeyboardEvent) => void
   onKeyUp?: (e: KeyboardEvent) => void
+  onKeyUp$?: (e: KeyboardEvent) => void
   onKeyPress?: (e: KeyboardEvent) => void
+  onKeyPress$?: (e: KeyboardEvent) => void
   onFocus?: (e: FocusEvent) => void
+  onFocus$?: (e: FocusEvent) => void
   onBlur?: (e: FocusEvent) => void
+  onBlur$?: (e: FocusEvent) => void
   onScroll?: (e: Event) => void
+  onScroll$?: (e: Event) => void
   onWheel?: (e: WheelEvent) => void
+  onWheel$?: (e: WheelEvent) => void
   onLoad?: (e: Event) => void
+  onLoad$?: (e: Event) => void
   onError?: (e: Event) => void
+  onError$?: (e: Event) => void
 
   // Drag events
   onDrag?: (e: DragEvent) => void
+  onDrag$?: (e: DragEvent) => void
   onDragStart?: (e: DragEvent) => void
+  onDragStart$?: (e: DragEvent) => void
   onDragEnd?: (e: DragEvent) => void
+  onDragEnd$?: (e: DragEvent) => void
   onDragEnter?: (e: DragEvent) => void
+  onDragEnter$?: (e: DragEvent) => void
   onDragLeave?: (e: DragEvent) => void
+  onDragLeave$?: (e: DragEvent) => void
   onDragOver?: (e: DragEvent) => void
+  onDragOver$?: (e: DragEvent) => void
   onDrop?: (e: DragEvent) => void
+  onDrop$?: (e: DragEvent) => void
 
   // Touch events
   onTouchStart?: (e: TouchEvent) => void
+  onTouchStart$?: (e: TouchEvent) => void
   onTouchMove?: (e: TouchEvent) => void
+  onTouchMove$?: (e: TouchEvent) => void
   onTouchEnd?: (e: TouchEvent) => void
+  onTouchEnd$?: (e: TouchEvent) => void
   onTouchCancel?: (e: TouchEvent) => void
+  onTouchCancel$?: (e: TouchEvent) => void
 
   // Animation events
   onAnimationStart?: (e: AnimationEvent) => void
+  onAnimationStart$?: (e: AnimationEvent) => void
   onAnimationEnd?: (e: AnimationEvent) => void
+  onAnimationEnd$?: (e: AnimationEvent) => void
   onAnimationIteration?: (e: AnimationEvent) => void
+  onAnimationIteration$?: (e: AnimationEvent) => void
   onTransitionEnd?: (e: TransitionEvent) => void
+  onTransitionEnd$?: (e: TransitionEvent) => void
 
   // Pointer events
   onPointerDown?: (e: PointerEvent) => void
+  onPointerDown$?: (e: PointerEvent) => void
   onPointerUp?: (e: PointerEvent) => void
+  onPointerUp$?: (e: PointerEvent) => void
   onPointerMove?: (e: PointerEvent) => void
+  onPointerMove$?: (e: PointerEvent) => void
   onPointerEnter?: (e: PointerEvent) => void
+  onPointerEnter$?: (e: PointerEvent) => void
   onPointerLeave?: (e: PointerEvent) => void
+  onPointerLeave$?: (e: PointerEvent) => void
   onPointerOver?: (e: PointerEvent) => void
+  onPointerOver$?: (e: PointerEvent) => void
   onPointerOut?: (e: PointerEvent) => void
+  onPointerOut$?: (e: PointerEvent) => void
   onPointerCancel?: (e: PointerEvent) => void
+  onPointerCancel$?: (e: PointerEvent) => void
 
   // Ref
   ref?: ((el: T | null) => void) | { current: T | null }

package/src/lifecycle.ts

@@ -29,8 +29,6 @@ type SuspenseHandler = (token: SuspenseToken | PromiseLike<unknown>) => boolean
 
 let currentRoot: RootContext | undefined
 let currentEffectCleanups: Cleanup[] | undefined
-const globalErrorHandlers = new WeakMap<RootContext, ErrorHandler[]>()
-const globalSuspenseHandlers = new WeakMap<RootContext, SuspenseHandler[]>()
 const rootDevtoolsIds = new WeakMap<RootContext, number>()
 let nextRootDevtoolsId = 0
 
@@ -115,20 +113,28 @@ export function onCleanup(fn: Cleanup): void {
 export function flushOnMount(root: RootContext): void {
   const cbs = root.onMountCallbacks
   if (!cbs || cbs.length === 0) return
-  // Temporarily restore root context so onCleanup calls inside
-  // mount callbacks register correctly
+  try {
+    withRootContext(root, () => {
+      for (let i = 0; i < cbs.length; i++) {
+        const cleanup = cbs[i]!()
+        if (typeof cleanup === 'function') {
+          root.cleanups.push(cleanup)
+        }
+      }
+    })
+  } finally {
+    cbs.length = 0
+  }
+}
+
+export function withRootContext<T>(root: RootContext | undefined, fn: () => T): T {
+  if (!root) return fn()
   const prevRoot = currentRoot
   currentRoot = root
   try {
-    for (let i = 0; i < cbs.length; i++) {
-      const cleanup = cbs[i]!()
-      if (typeof cleanup === 'function') {
-        root.cleanups.push(cleanup)
-      }
-    }
+    return fn()
   } finally {
     currentRoot = prevRoot
-    cbs.length = 0
   }
 }
 
@@ -139,7 +145,7 @@ export function registerRootCleanup(fn: Cleanup): void {
 }
 
 export function clearRoot(root: RootContext): void {
-  runCleanupList(root.cleanups)
+  runCleanupList(root.cleanups, root)
   if (root.onMountCallbacks) {
     root.onMountCallbacks.length = 0
   }
@@ -147,19 +153,13 @@ export function clearRoot(root: RootContext): void {
 
 export function destroyRoot(root: RootContext): void {
   clearRoot(root)
-  runCleanupList(root.destroyCallbacks)
+  runCleanupList(root.destroyCallbacks, root)
   if (root.errorHandlers) {
     root.errorHandlers.length = 0
   }
-  if (globalErrorHandlers.has(root)) {
-    globalErrorHandlers.delete(root)
-  }
   if (root.suspenseHandlers) {
     root.suspenseHandlers.length = 0
   }
-  if (globalSuspenseHandlers.has(root)) {
-    globalSuspenseHandlers.delete(root)
-  }
   disposeRootDevtools(root)
 }
 
@@ -201,21 +201,23 @@ export function registerEffectCleanup(fn: Cleanup): void {
   }
 }
 
-export function runCleanupList(list: Cleanup[]): void {
+export function runCleanupList(list: Cleanup[], root?: RootContext): void {
   let error: unknown
-  for (let i = list.length - 1; i >= 0; i--) {
-    try {
-      const cleanup = list[i]
-      if (cleanup) cleanup()
-    } catch (err) {
-      if (error === undefined) {
-        error = err
+  withRootContext(root, () => {
+    for (let i = list.length - 1; i >= 0; i--) {
+      try {
+        const cleanup = list[i]
+        if (cleanup) cleanup()
+      } catch (err) {
+        if (error === undefined) {
+          error = err
+        }
       }
     }
-  }
+  })
   list.length = 0
   if (error !== undefined) {
-    if (!handleError(error, { source: 'cleanup' })) {
+    if (!handleError(error, { source: 'cleanup' }, root)) {
       throw error
     }
   }
@@ -239,12 +241,6 @@ export function registerErrorHandler(fn: ErrorHandler): void {
     currentRoot.errorHandlers = []
   }
   currentRoot.errorHandlers.push(fn)
-  const existing = globalErrorHandlers.get(currentRoot)
-  if (existing) {
-    existing.push(fn)
-  } else {
-    globalErrorHandlers.set(currentRoot, [fn])
-  }
 }
 
 export function registerSuspenseHandler(fn: SuspenseHandler): void {
@@ -258,12 +254,6 @@ export function registerSuspenseHandler(fn: SuspenseHandler): void {
     currentRoot.suspenseHandlers = []
   }
   currentRoot.suspenseHandlers.push(fn)
-  const existing = globalSuspenseHandlers.get(currentRoot)
-  if (existing) {
-    existing.push(fn)
-  } else {
-    globalSuspenseHandlers.set(currentRoot, [fn])
-  }
 }
 
 export function handleError(err: unknown, info?: ErrorInfo, startRoot?: RootContext): boolean {
@@ -286,24 +276,6 @@ export function handleError(err: unknown, info?: ErrorInfo, startRoot?: RootCont
     }
     root = root.parent
   }
-  const globalForRoot = startRoot
-    ? globalErrorHandlers.get(startRoot)
-    : currentRoot
-      ? globalErrorHandlers.get(currentRoot)
-      : undefined
-  if (globalForRoot && globalForRoot.length) {
-    for (let i = globalForRoot.length - 1; i >= 0; i--) {
-      const handler = globalForRoot[i]!
-      try {
-        const handled = handler(error, info)
-        if (handled !== false) {
-          return true
-        }
-      } catch (nextErr) {
-        error = nextErr
-      }
-    }
-  }
   // The caller (e.g., runCleanupList) can decide whether to rethrow.
   // This makes the API consistent: handleError always returns a boolean
   // indicating whether the error was handled.
@@ -334,25 +306,5 @@ export function handleSuspend(
     }
     root = root.parent
   }
-  const globalForRoot =
-    startRoot && globalSuspenseHandlers.get(startRoot)
-      ? globalSuspenseHandlers.get(startRoot)
-      : currentRoot
-        ? globalSuspenseHandlers.get(currentRoot)
-        : undefined
-  if (globalForRoot && globalForRoot.length) {
-    for (let i = globalForRoot.length - 1; i >= 0; i--) {
-      const handler = globalForRoot[i]!
-      const handled = handler(token)
-      if (handled !== false) {
-        // Only set suspended = true when a handler actually handles the token
-        if (originRoot) {
-          originRoot.suspended = true
-          setRootSuspendDevtools(originRoot, true)
-        }
-        return true
-      }
-    }
-  }
   return false
 }