@fictjs/runtime 0.0.11 → 0.0.13

package/src/cycle-guard.ts

@@ -1,5 +1,10 @@
 import { getDevtoolsHook } from './devtools'
 
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+
 export interface CycleProtectionOptions {
   maxFlushCyclesPerMicrotask?: number
   maxEffectRunsPerFlush?: number
@@ -15,120 +20,142 @@ interface CycleWindowEntry {
   budget: number
 }
 
-const defaultOptions = {
-  maxFlushCyclesPerMicrotask: 10_000,
-  maxEffectRunsPerFlush: 20_000,
-  windowSize: 5,
-  highUsageRatio: 0.8,
-  maxRootReentrantDepth: 10,
-  enableWindowWarning: true,
-  devMode: false,
-}
+let setCycleProtectionOptions: (opts: CycleProtectionOptions) => void = () => {}
+let resetCycleProtectionStateForTests: () => void = () => {}
+let beginFlushGuard: () => void = () => {}
+let beforeEffectRunGuard: () => boolean = () => true
+let endFlushGuard: () => void = () => {}
+let enterRootGuard: (root: object) => boolean = () => true
+let exitRootGuard: (root: object) => void = () => {}
 
-let options: Required<CycleProtectionOptions> = {
-  ...defaultOptions,
-} as Required<CycleProtectionOptions>
+if (isDev) {
+  const defaultOptions = {
+    maxFlushCyclesPerMicrotask: 10_000,
+    maxEffectRunsPerFlush: 20_000,
+    windowSize: 5,
+    highUsageRatio: 0.8,
+    maxRootReentrantDepth: 10,
+    enableWindowWarning: true,
+    devMode: false,
+  }
 
-let effectRunsThisFlush = 0
-let windowUsage: CycleWindowEntry[] = []
-let rootDepth = new WeakMap<object, number>()
-let flushWarned = false
-let rootWarned = false
-let windowWarned = false
+  let options: Required<CycleProtectionOptions> = {
+    ...defaultOptions,
+  } as Required<CycleProtectionOptions>
 
-export function setCycleProtectionOptions(opts: CycleProtectionOptions): void {
-  options = { ...options, ...opts }
-}
+  let effectRunsThisFlush = 0
+  let windowUsage: CycleWindowEntry[] = []
+  let rootDepth = new WeakMap<object, number>()
+  let flushWarned = false
+  let rootWarned = false
+  let windowWarned = false
 
-export function resetCycleProtectionStateForTests(): void {
-  options = { ...defaultOptions } as Required<CycleProtectionOptions>
-  effectRunsThisFlush = 0
-  windowUsage = []
-  rootDepth = new WeakMap<object, number>()
-  flushWarned = false
-  rootWarned = false
-  windowWarned = false
-}
+  setCycleProtectionOptions = opts => {
+    options = { ...options, ...opts }
+  }
 
-export function beginFlushGuard(): void {
-  effectRunsThisFlush = 0
-  flushWarned = false
-  windowWarned = false
-}
+  resetCycleProtectionStateForTests = () => {
+    options = { ...defaultOptions } as Required<CycleProtectionOptions>
+    effectRunsThisFlush = 0
+    windowUsage = []
+    rootDepth = new WeakMap<object, number>()
+    flushWarned = false
+    rootWarned = false
+    windowWarned = false
+  }
 
-export function beforeEffectRunGuard(): boolean {
-  const next = ++effectRunsThisFlush
-  if (next > options.maxFlushCyclesPerMicrotask || next > options.maxEffectRunsPerFlush) {
-    const message = `[fict] cycle protection triggered: flush-budget-exceeded`
-    if (options.devMode) {
-      throw new Error(message)
-    }
-    if (!flushWarned) {
-      flushWarned = true
-      console.warn(message, { effectRuns: next })
+  beginFlushGuard = () => {
+    effectRunsThisFlush = 0
+    flushWarned = false
+    windowWarned = false
+  }
+
+  beforeEffectRunGuard = () => {
+    const next = ++effectRunsThisFlush
+    if (next > options.maxFlushCyclesPerMicrotask || next > options.maxEffectRunsPerFlush) {
+      const message = `[fict] cycle protection triggered: flush-budget-exceeded`
+      if (options.devMode) {
+        throw new Error(message)
+      }
+      if (!flushWarned) {
+        flushWarned = true
+        console.warn(message, { effectRuns: next })
+      }
+      return false
     }
-    return false
+    return true
   }
-  return true
-}
 
-export function endFlushGuard(): void {
-  recordWindowUsage(effectRunsThisFlush, options.maxFlushCyclesPerMicrotask)
-  effectRunsThisFlush = 0
-}
+  endFlushGuard = () => {
+    recordWindowUsage(effectRunsThisFlush, options.maxFlushCyclesPerMicrotask)
+    effectRunsThisFlush = 0
+  }
 
-export function enterRootGuard(root: object): boolean {
-  const depth = (rootDepth.get(root) ?? 0) + 1
-  if (depth > options.maxRootReentrantDepth) {
-    const message = `[fict] cycle protection triggered: root-reentry`
-    if (options.devMode) {
-      throw new Error(message)
+  enterRootGuard = root => {
+    const depth = (rootDepth.get(root) ?? 0) + 1
+    if (depth > options.maxRootReentrantDepth) {
+      const message = `[fict] cycle protection triggered: root-reentry`
+      if (options.devMode) {
+        throw new Error(message)
+      }
+      if (!rootWarned) {
+        rootWarned = true
+        console.warn(message, { depth })
+      }
+      return false
     }
-    if (!rootWarned) {
-      rootWarned = true
-      console.warn(message, { depth })
-    }
-    return false
+    rootDepth.set(root, depth)
+    return true
   }
-  rootDepth.set(root, depth)
-  return true
-}
 
-export function exitRootGuard(root: object): void {
-  const depth = rootDepth.get(root)
-  if (depth === undefined) return
-  if (depth <= 1) {
-    rootDepth.delete(root)
-  } else {
-    rootDepth.set(root, depth - 1)
+  exitRootGuard = root => {
+    const depth = rootDepth.get(root)
+    if (depth === undefined) return
+    if (depth <= 1) {
+      rootDepth.delete(root)
+    } else {
+      rootDepth.set(root, depth - 1)
+    }
   }
-}
 
-function recordWindowUsage(used: number, budget: number): void {
-  if (!options.enableWindowWarning) return
-  const entry = { used, budget }
-  windowUsage.push(entry)
-  if (windowUsage.length > options.windowSize) {
-    windowUsage.shift()
+  const recordWindowUsage = (used: number, budget: number): void => {
+    if (!options.enableWindowWarning) return
+    const entry = { used, budget }
+    windowUsage.push(entry)
+    if (windowUsage.length > options.windowSize) {
+      windowUsage.shift()
+    }
+    if (windowWarned) return
+    if (
+      windowUsage.length >= options.windowSize &&
+      windowUsage.every(
+        item => item.budget > 0 && item.used / item.budget >= options.highUsageRatio,
+      )
+    ) {
+      windowWarned = true
+      reportCycle('high-usage-window', {
+        windowSize: options.windowSize,
+        ratio: options.highUsageRatio,
+      })
+    }
   }
-  if (windowWarned) return
-  if (
-    windowUsage.length >= options.windowSize &&
-    windowUsage.every(item => item.budget > 0 && item.used / item.budget >= options.highUsageRatio)
-  ) {
-    windowWarned = true
-    reportCycle('high-usage-window', {
-      windowSize: options.windowSize,
-      ratio: options.highUsageRatio,
-    })
+
+  const reportCycle = (
+    reason: string,
+    detail: Record<string, unknown> | undefined = undefined,
+  ): void => {
+    const hook = getDevtoolsHook()
+    hook?.cycleDetected?.(detail ? { reason, detail } : { reason })
+    console.warn(`[fict] cycle protection triggered: ${reason}`, detail ?? '')
   }
 }
 
-function reportCycle(
-  reason: string,
-  detail: Record<string, unknown> | undefined = undefined,
-): void {
-  const hook = getDevtoolsHook()
-  hook?.cycleDetected?.(detail ? { reason, detail } : { reason })
-  console.warn(`[fict] cycle protection triggered: ${reason}`, detail ?? '')
+export {
+  setCycleProtectionOptions,
+  resetCycleProtectionStateForTests,
+  beginFlushGuard,
+  beforeEffectRunGuard,
+  endFlushGuard,
+  enterRootGuard,
+  exitRootGuard,
 }

package/src/dev.d.ts

@@ -0,0 +1,5 @@
+export {}
+
+declare global {
+  const __DEV__: boolean | undefined
+}

package/src/dom.ts

@@ -20,19 +20,11 @@ import {
   createChildBinding,
   bindEvent,
   isReactive,
-  PRIMITIVE_PROXY,
   type MaybeReactive,
   type AttributeSetter,
   type BindingHandle,
 } from './binding'
-import {
-  Properties,
-  ChildProperties,
-  Aliases,
-  getPropAlias,
-  SVGElements,
-  SVGNamespace,
-} from './constants'
+import { Properties, ChildProperties, getPropAlias, SVGElements, SVGNamespace } from './constants'
 import { __fictPushContext, __fictPopContext } from './hooks'
 import { Fragment } from './jsx'
 import {
@@ -54,6 +46,10 @@ type NamespaceContext = 'svg' | 'mathml' | null
 
 const SVG_NS = 'http://www.w3.org/2000/svg'
 const MATHML_NS = 'http://www.w3.org/1998/Math/MathML'
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
 
 // ============================================================================
 // Main Render Function
@@ -124,7 +120,7 @@ function resolveNamespace(tagName: string, namespace: NamespaceContext): Namespa
   if (tagName === 'math') return 'mathml'
   if (namespace === 'mathml') return 'mathml'
   if (namespace === 'svg') return 'svg'
-  if (SVGElements.has(tagName)) return 'svg'
+  if (isDev && SVGElements.has(tagName)) return 'svg'
   return null
 }
 
@@ -139,9 +135,8 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
     return document.createTextNode('')
   }
 
-  // Primitive proxy produced by keyed list binding
   if (typeof node === 'object' && node !== null && !(node instanceof Node)) {
-    // Handle BindingHandle (createList, createConditional, etc)
+    // Handle BindingHandle (list/conditional bindings, etc)
     if ('marker' in node) {
       const handle = node as { marker: unknown; dispose?: () => void; flush?: () => void }
       // Register dispose cleanup if available
@@ -160,14 +155,6 @@ function createElementWithContext(node: FictNode, namespace: NamespaceContext):
       }
       return createElement(handle.marker as FictNode)
     }
-
-    const nodeRecord = node as unknown as Record<PropertyKey, unknown>
-    if (nodeRecord[PRIMITIVE_PROXY]) {
-      const primitiveGetter = nodeRecord[Symbol.toPrimitive]
-      const value =
-        typeof primitiveGetter === 'function' ? primitiveGetter.call(node, 'default') : node
-      return document.createTextNode(value == null || value === false ? '' : String(value))
-    }
   }
 
   // Array - create fragment
@@ -431,10 +418,17 @@ function applyRef(el: Element, value: unknown): void {
     refFn(el)
 
     // Match React behavior: call ref(null) on unmount
-    if (getCurrentRoot()) {
+    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
@@ -442,10 +436,17 @@ function applyRef(el: Element, value: unknown): void {
     refObj.current = el
 
     // Auto-cleanup on unmount
-    if (getCurrentRoot()) {
+    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.',
+      )
     }
   }
 }
@@ -541,7 +542,13 @@ function applyProps(el: Element, props: Record<string, unknown>, isSVG = false):
     }
 
     // Child properties (innerHTML, textContent, etc.)
-    if (ChildProperties.has(key)) {
+    if (
+      (isDev && ChildProperties.has(key)) ||
+      key === 'innerHTML' ||
+      key === 'textContent' ||
+      key === 'innerText' ||
+      key === 'children'
+    ) {
       createAttributeBinding(el, key, value as MaybeReactive<unknown>, setProperty)
       continue
     }
@@ -565,13 +572,18 @@ function applyProps(el: Element, props: Record<string, unknown>, isSVG = false):
     }
 
     // Check for property alias (element-specific mappings)
-    const propAlias = !isSVG ? getPropAlias(key, tagName) : undefined
+    const propAlias = !isSVG && isDev ? getPropAlias(key, tagName) : undefined
+    const isProperty = !isSVG
+      ? isDev
+        ? Properties.has(key)
+        : key in (el as unknown as Record<string, unknown>)
+      : false
 
     // Handle properties and element-specific attributes
-    if (propAlias || (!isSVG && Properties.has(key)) || (isCE && !isSVG)) {
+    if (propAlias || isProperty || (isCE && !isSVG)) {
       const propName = propAlias || key
       // Custom elements use toPropertyName conversion
-      if (isCE && !Properties.has(key)) {
+      if (isCE && !isProperty && !propAlias) {
         createAttributeBinding(
           el,
           toPropertyName(propName),
@@ -598,7 +610,7 @@ function applyProps(el: Element, props: Record<string, unknown>, isSVG = false):
 
     // Regular attributes (potentially reactive)
     // Apply alias mapping (className -> class, htmlFor -> for)
-    const attrName = Aliases[key] || key
+    const attrName = key === 'htmlFor' ? 'for' : key
     createAttributeBinding(el, attrName, value as MaybeReactive<unknown>, setAttribute)
   }
 }

package/src/effect.ts

@@ -8,6 +8,10 @@ import {
 import { effectWithCleanup } from './signal'
 import type { Cleanup } from './types'
 
+/**
+ * Effect callback run synchronously; async callbacks are not tracked after the first await.
+ * TypeScript will reject `async () => {}` here—split async work or read signals before awaiting.
+ */
 export type Effect = () => void | Cleanup
 
 export function createEffect(fn: Effect): () => void {

package/src/error-boundary.ts

@@ -72,13 +72,22 @@ export function ErrorBoundary(props: ErrorBoundaryProps): FictNode {
       if (renderingFallback) {
         throw err
       }
+      // nested errors. If fallback rendering also throws, we should NOT reset
+      // the flag until we're sure no more recursion is happening.
       renderingFallback = true
       try {
         renderValue(toView(err))
-      } finally {
+        // Only reset if successful - if renderValue threw, we want to keep
+        // renderingFallback = true to prevent infinite recursion
         renderingFallback = false
+        props.onError?.(err)
+      } catch (fallbackErr) {
+        // Fallback rendering failed - keep renderingFallback = true
+        // to prevent further attempts, then rethrow
+        // If fallback fails, report both errors
+        props.onError?.(err)
+        throw fallbackErr
       }
-      props.onError?.(err)
       return
     }
     popRoot(prev)

package/src/hooks.ts

@@ -2,6 +2,11 @@ import { createEffect } from './effect'
 import { createMemo } from './memo'
 import { createSignal, type SignalAccessor, type ComputedAccessor } from './signal'
 
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+
 interface HookContext {
   slots: unknown[]
   cursor: number
@@ -12,7 +17,10 @@ const ctxStack: HookContext[] = []
 
 function assertRenderContext(ctx: HookContext, hookName: string): void {
   if (!ctx.rendering) {
-    throw new Error(`${hookName} can only be used during render execution`)
+    const message = isDev
+      ? `${hookName} can only be used during render execution`
+      : 'FICT:E_HOOK_RENDER'
+    throw new Error(message)
   }
 }
 

package/src/index.ts

@@ -101,12 +101,10 @@ export {
   isReactive,
   // Advanced bindings
   createConditional,
-  createList,
   createPortal,
   createShow,
   // Utility functions
   unwrap,
-  unwrapPrimitive,
 } from './binding'
 
 // Constants for DOM handling
@@ -129,13 +127,7 @@ export { default as reconcileArrays } from './reconcile'
 // Types
 // ============================================================================
 
-export type {
-  MaybeReactive,
-  BindingHandle,
-  KeyFn,
-  CreateElementFn,
-  AttributeSetter,
-} from './binding'
+export type { MaybeReactive, BindingHandle, CreateElementFn, AttributeSetter } from './binding'
 
 export type {
   FictNode,
@@ -167,21 +159,11 @@ export {
   moveNodesBefore,
   removeNodes,
   insertNodesBefore,
-  moveMarkerBlock,
-  destroyMarkerBlock,
-  // Keyed list container
-  createKeyedListContainer,
-  // Block creation
-  createKeyedBlock,
   // High-level list binding (for compiler-generated code)
   createKeyedList,
   // Utilities
   toNodeArray,
-  getFirstNodeAfter,
   isNodeBetweenMarkers,
   // Types
-  type KeyedBlock,
-  type KeyedListContainer,
   type KeyedListBinding,
-  type MarkerBlock,
 } from './list-helpers'

package/src/lifecycle.ts

@@ -1,6 +1,11 @@
 import { enterRootGuard, exitRootGuard } from './cycle-guard'
 import type { Cleanup, ErrorInfo, SuspenseToken } from './types'
 
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+
 type LifecycleFn = () => void | Cleanup
 
 export interface RootContext {
@@ -169,7 +174,10 @@ function runLifecycle(fn: LifecycleFn): void {
 
 export function registerErrorHandler(fn: ErrorHandler): void {
   if (!currentRoot) {
-    throw new Error('registerErrorHandler must be called within a root')
+    const message = isDev
+      ? 'registerErrorHandler must be called within a root'
+      : 'FICT:E_ROOT_HANDLER'
+    throw new Error(message)
   }
   if (!currentRoot.errorHandlers) {
     currentRoot.errorHandlers = []
@@ -185,7 +193,10 @@ export function registerErrorHandler(fn: ErrorHandler): void {
 
 export function registerSuspenseHandler(fn: SuspenseHandler): void {
   if (!currentRoot) {
-    throw new Error('registerSuspenseHandler must be called within a root')
+    const message = isDev
+      ? 'registerSuspenseHandler must be called within a root'
+      : 'FICT:E_ROOT_SUSPENSE'
+    throw new Error(message)
   }
   if (!currentRoot.suspenseHandlers) {
     currentRoot.suspenseHandlers = []
@@ -237,7 +248,10 @@ export function handleError(err: unknown, info?: ErrorInfo, startRoot?: RootCont
       }
     }
   }
-  throw error
+  // 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.
+  return false
 }
 
 export function handleSuspend(