@fictjs/runtime 0.0.11 → 0.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fictjs/runtime",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Fict reactive runtime",
   "publishConfig": {
     "access": "public",

package/src/binding.ts

@@ -1124,7 +1124,9 @@ export function bindEvent(
         const fn = resolveHandler()
         callEventHandler(fn as EventListenerOrEventListenerObject, args[0] as Event, el)
       } catch (err) {
-        handleError(err, { source: 'event', eventName }, rootRef)
+        if (!handleError(err, { source: 'event', eventName }, rootRef)) {
+          throw err
+        }
       }
     }
 

package/src/dev.d.ts

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

package/src/dom.ts

@@ -54,6 +54,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
@@ -431,10 +435,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 +453,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.',
+      )
     }
   }
 }

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/lifecycle.ts

@@ -237,7 +237,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(

package/src/list-helpers.ts

@@ -19,12 +19,17 @@ import {
 import { insertNodesBefore, removeNodes, toNodeArray } from './node-ops'
 import reconcileArrays from './reconcile'
 import { batch } from './scheduler'
-import { createSignal, flush, setActiveSub, type Signal } from './signal'
+import { createSignal, effectScope, flush, setActiveSub, type Signal } from './signal'
 import type { FictNode } from './types'
 
 // Re-export shared DOM helpers for compiler-generated code
 export { insertNodesBefore, removeNodes, toNodeArray }
 
+const isDev =
+  typeof __DEV__ !== 'undefined'
+    ? __DEV__
+    : typeof process === 'undefined' || process.env?.NODE_ENV !== 'production'
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -201,6 +206,9 @@ function removeBlockRange(block: MarkerBlock): void {
   }
 }
 
+// Number.MAX_SAFE_INTEGER is 2^53 - 1, but we reset earlier to avoid any precision issues
+const MAX_SAFE_VERSION = 0x1fffffffffffff // 2^53 - 1
+
 export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
   let current = initialValue
   let version = 0
@@ -212,7 +220,8 @@ export function createVersionedSignalAccessor<T>(initialValue: T): Signal<T> {
       return current
     }
     current = value as T
-    version++
+    // This is safe because we only care about version changes, not absolute values
+    version = version >= MAX_SAFE_VERSION ? 1 : version + 1
     track(version)
   }
 
@@ -317,24 +326,36 @@ export function createKeyedBlock<T>(
       }) as Signal<number>)
   const root = createRootContext(hostRoot)
   const prevRoot = pushRoot(root)
+  // maintaining proper cleanup chain. The scope will be disposed when
+  // the root is destroyed, ensuring nested effects are properly cleaned up.
+  let nodes: Node[] = []
+  let scopeDispose: (() => void) | undefined
 
-  // Isolate child effects from the outer effect (e.g., performDiff) by clearing activeSub.
-  // This prevents child effects from being purged when the outer effect re-runs.
+  // First, isolate from parent effect to prevent child effects from being
+  // purged when the outer effect (e.g., performDiff) re-runs
   const prevSub = setActiveSub(undefined)
 
-  let nodes: Node[] = []
   try {
-    const rendered = render(itemSig, indexSig, key)
-    // If render returns real DOM nodes/arrays, preserve them to avoid
-    // reparenting side-effects (tests may pre-insert them).
-    if (
-      rendered instanceof Node ||
-      (Array.isArray(rendered) && rendered.every(n => n instanceof Node))
-    ) {
-      nodes = toNodeArray(rendered)
-    } else {
-      const element = createElement(rendered as unknown as FictNode)
-      nodes = toNodeArray(element)
+    // Create an effectScope that will track all effects created during render
+    scopeDispose = effectScope(() => {
+      const rendered = render(itemSig, indexSig, key)
+      // If render returns real DOM nodes/arrays, preserve them to avoid
+      // reparenting side-effects (tests may pre-insert them).
+      if (
+        rendered instanceof Node ||
+        (Array.isArray(rendered) && rendered.every(n => n instanceof Node))
+      ) {
+        nodes = toNodeArray(rendered)
+      } else {
+        const element = createElement(rendered as unknown as FictNode)
+        nodes = toNodeArray(element)
+      }
+    })
+
+    // Register the scope cleanup with the root so effects are cleaned up
+    // when the block is destroyed
+    if (scopeDispose) {
+      root.cleanups.push(scopeDispose)
     }
   } finally {
     setActiveSub(prevSub)
@@ -379,6 +400,107 @@ export function isNodeBetweenMarkers(
   return false
 }
 
+function reorderBySwap<T>(
+  parent: ParentNode & Node,
+  first: KeyedBlock<T>,
+  second: KeyedBlock<T>,
+): boolean {
+  if (first === second) return false
+  const firstNodes = first.nodes
+  const secondNodes = second.nodes
+  if (firstNodes.length === 0 || secondNodes.length === 0) return false
+  const lastFirst = firstNodes[firstNodes.length - 1]!
+  const lastSecond = secondNodes[secondNodes.length - 1]!
+  const afterFirst = lastFirst.nextSibling
+  const afterSecond = lastSecond.nextSibling
+  moveNodesBefore(parent, firstNodes, afterSecond)
+  moveNodesBefore(parent, secondNodes, afterFirst)
+  return true
+}
+
+function getLISIndices(sequence: number[]): number[] {
+  const predecessors = new Array<number>(sequence.length)
+  const result: number[] = []
+
+  for (let i = 0; i < sequence.length; i++) {
+    const value = sequence[i]!
+    if (value < 0) {
+      predecessors[i] = -1
+      continue
+    }
+
+    let low = 0
+    let high = result.length
+    while (low < high) {
+      const mid = (low + high) >> 1
+      if (sequence[result[mid]!]! < value) {
+        low = mid + 1
+      } else {
+        high = mid
+      }
+    }
+
+    predecessors[i] = low > 0 ? result[low - 1]! : -1
+    if (low === result.length) {
+      result.push(i)
+    } else {
+      result[low] = i
+    }
+  }
+
+  const lis: number[] = new Array(result.length)
+  let k = result.length > 0 ? result[result.length - 1]! : -1
+  for (let i = result.length - 1; i >= 0; i--) {
+    lis[i] = k
+    k = predecessors[k]!
+  }
+  return lis
+}
+
+function reorderByLIS<T>(
+  parent: ParentNode & Node,
+  endMarker: Comment,
+  prev: KeyedBlock<T>[],
+  next: KeyedBlock<T>[],
+): boolean {
+  const positions = new Map<KeyedBlock<T>, number>()
+  for (let i = 0; i < prev.length; i++) {
+    positions.set(prev[i]!, i)
+  }
+
+  const sequence = new Array<number>(next.length)
+  for (let i = 0; i < next.length; i++) {
+    const position = positions.get(next[i]!)
+    if (position === undefined) return false
+    sequence[i] = position
+  }
+
+  const lisIndices = getLISIndices(sequence)
+  if (lisIndices.length === sequence.length) return true
+
+  const inLIS = new Array<boolean>(sequence.length).fill(false)
+  for (let i = 0; i < lisIndices.length; i++) {
+    inLIS[lisIndices[i]!] = true
+  }
+
+  let anchor: Node | null = endMarker
+  let moved = false
+  for (let i = next.length - 1; i >= 0; i--) {
+    const block = next[i]!
+    const nodes = block.nodes
+    if (nodes.length === 0) continue
+    if (inLIS[i]) {
+      anchor = nodes[0]!
+      continue
+    }
+    moveNodesBefore(parent, nodes, anchor)
+    anchor = nodes[0]!
+    moved = true
+  }
+
+  return moved
+}
+
 // ============================================================================
 // High-Level List Binding (for compiler-generated code)
 // ============================================================================
@@ -443,10 +565,6 @@ function createFineGrainedKeyedList<T>(
       const prevOrderedBlocks = container.orderedBlocks
       const nextOrderedBlocks = container.nextOrderedBlocks
       const orderedIndexByKey = container.orderedIndexByKey
-      newBlocks.clear()
-      nextOrderedBlocks.length = 0
-      orderedIndexByKey.clear()
-      const createdBlocks: KeyedBlock<T>[] = []
       const newItems = getItems()
 
       if (newItems.length === 0) {
@@ -473,8 +591,45 @@ function createFineGrainedKeyedList<T>(
       }
 
       const prevCount = prevOrderedBlocks.length
+      if (prevCount > 0 && newItems.length === prevCount && orderedIndexByKey.size === prevCount) {
+        let stableOrder = true
+        const seen = new Set<string | number>()
+        for (let i = 0; i < prevCount; i++) {
+          const item = newItems[i]!
+          const key = keyFn(item, i)
+          if (seen.has(key) || prevOrderedBlocks[i]!.key !== key) {
+            stableOrder = false
+            break
+          }
+          seen.add(key)
+        }
+        if (stableOrder) {
+          for (let i = 0; i < prevCount; i++) {
+            const item = newItems[i]!
+            const block = prevOrderedBlocks[i]!
+            if (block.rawItem !== item) {
+              block.rawItem = item
+              block.item(item)
+            }
+            if (needsIndex && block.rawIndex !== i) {
+              block.rawIndex = i
+              block.index(i)
+            }
+          }
+          return
+        }
+      }
+
+      newBlocks.clear()
+      nextOrderedBlocks.length = 0
+      orderedIndexByKey.clear()
+      const createdBlocks: KeyedBlock<T>[] = []
       let appendCandidate = prevCount > 0 && newItems.length >= prevCount
       const appendedBlocks: KeyedBlock<T>[] = []
+      let mismatchCount = 0
+      let mismatchFirst = -1
+      let mismatchSecond = -1
+      let hasDuplicateKey = false
 
       // Phase 1: Build new blocks map (reuse or create)
       newItems.forEach((item, index) => {
@@ -502,6 +657,12 @@ function createFineGrainedKeyedList<T>(
           // If newBlocks already has this key (duplicate key case), clean up the previous block
           const existingBlock = newBlocks.get(key)
           if (existingBlock) {
+            if (isDev) {
+              console.warn(
+                `[fict] Duplicate key "${String(key)}" detected in list rendering. ` +
+                  `Each item should have a unique key. The previous item with this key will be replaced.`,
+              )
+            }
             destroyRoot(existingBlock.root)
             removeNodes(existingBlock.nodes)
           }
@@ -518,6 +679,7 @@ function createFineGrainedKeyedList<T>(
         const position = orderedIndexByKey.get(key)
         if (position !== undefined) {
           appendCandidate = false
+          hasDuplicateKey = true
           const prior = nextOrderedBlocks[position]
           if (prior && prior !== resolvedBlock) {
             destroyRoot(prior.root)
@@ -534,8 +696,20 @@ function createFineGrainedKeyedList<T>(
               appendCandidate = false
             }
           }
-          orderedIndexByKey.set(key, nextOrderedBlocks.length)
+          const nextIndex = nextOrderedBlocks.length
+          orderedIndexByKey.set(key, nextIndex)
           nextOrderedBlocks.push(resolvedBlock)
+          if (
+            mismatchCount < 3 &&
+            (nextIndex >= prevCount || prevOrderedBlocks[nextIndex] !== resolvedBlock)
+          ) {
+            if (mismatchCount === 0) {
+              mismatchFirst = nextIndex
+            } else if (mismatchCount === 1) {
+              mismatchSecond = nextIndex
+            }
+            mismatchCount++
+          }
         }
 
         if (appendCandidate && index >= prevCount) {
@@ -587,8 +761,41 @@ function createFineGrainedKeyedList<T>(
         oldBlocks.clear()
       }
 
+      const canReorderInPlace =
+        createdBlocks.length === 0 &&
+        oldBlocks.size === 0 &&
+        nextOrderedBlocks.length === prevOrderedBlocks.length
+
+      let skipReconcile = false
+      let updateNodeBuffer = true
+
+      if (canReorderInPlace && nextOrderedBlocks.length > 0 && !hasDuplicateKey) {
+        if (mismatchCount === 0) {
+          skipReconcile = true
+          updateNodeBuffer = false
+        } else if (
+          mismatchCount === 2 &&
+          prevOrderedBlocks[mismatchFirst] === nextOrderedBlocks[mismatchSecond] &&
+          prevOrderedBlocks[mismatchSecond] === nextOrderedBlocks[mismatchFirst]
+        ) {
+          if (
+            reorderBySwap(
+              parent,
+              prevOrderedBlocks[mismatchFirst]!,
+              prevOrderedBlocks[mismatchSecond]!,
+            )
+          ) {
+            skipReconcile = true
+          }
+        } else if (
+          reorderByLIS(parent, container.endMarker, prevOrderedBlocks, nextOrderedBlocks)
+        ) {
+          skipReconcile = true
+        }
+      }
+
       // Phase 3: Reconcile DOM with buffered node arrays
-      if (newBlocks.size > 0 || container.currentNodes.length > 0) {
+      if (!skipReconcile && (newBlocks.size > 0 || container.currentNodes.length > 0)) {
         const prevNodes = container.currentNodes
         const nextNodes = container.nextNodes
         nextNodes.length = 0
@@ -608,6 +815,20 @@ function createFineGrainedKeyedList<T>(
         // Swap buffers to reuse arrays on next diff
         container.currentNodes = nextNodes
         container.nextNodes = prevNodes
+      } else if (skipReconcile && updateNodeBuffer) {
+        const prevNodes = container.currentNodes
+        const nextNodes = container.nextNodes
+        nextNodes.length = 0
+        nextNodes.push(container.startMarker)
+        for (let i = 0; i < nextOrderedBlocks.length; i++) {
+          const nodes = nextOrderedBlocks[i]!.nodes
+          for (let j = 0; j < nodes.length; j++) {
+            nextNodes.push(nodes[j]!)
+          }
+        }
+        nextNodes.push(container.endMarker)
+        container.currentNodes = nextNodes
+        container.nextNodes = prevNodes
       }
 
       // Swap block maps for reuse

package/src/props.ts

@@ -124,10 +124,7 @@ export function mergeProps<T extends Record<string, unknown>>(
 
   return new Proxy({} as Record<string, unknown>, {
     get(_, prop) {
-      // Symbol properties (like Symbol.iterator) should return undefined
-      if (typeof prop === 'symbol') {
-        return undefined
-      }
+      // Only return undefined if no source has this Symbol property
       // Search sources in reverse order (last wins)
       for (let i = validSources.length - 1; i >= 0; i--) {
         const src = validSources[i]!
@@ -136,6 +133,7 @@ export function mergeProps<T extends Record<string, unknown>>(
 
         const value = (raw as Record<string | symbol, unknown>)[prop]
         // Preserve prop getters - let child component's createPropsProxy unwrap lazily
+        // Note: For Symbol properties, we still wrap in getter if source is dynamic
         if (typeof src === 'function' && !isPropGetter(value)) {
           return __fictProp(() => {
             const latest = resolveSource(src)

package/src/reconcile.ts

@@ -21,6 +21,10 @@
  * @param a - The old array of nodes (currently in DOM)
  * @param b - The new array of nodes (target state)
  *
+ * **Note:** This function may mutate the input array `a` during the swap
+ * optimization (step 5a). If you need to preserve the original array,
+ * pass a shallow copy: `reconcileArrays(parent, [...oldNodes], newNodes)`.
+ *
  * @example
  * ```ts
  * const oldNodes = [node1, node2, node3]