@fictjs/runtime 0.0.10 → 0.0.12

package/dist/index.d.cts

@@ -1431,6 +1431,10 @@ declare const UnitlessStyles: Set<string>;
  * @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]

package/dist/index.d.ts

@@ -1431,6 +1431,10 @@ declare const UnitlessStyles: Set<string>;
  * @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]

package/dist/index.dev.js

@@ -301,7 +301,7 @@ function handleError(err, info, startRoot) {
       }
     }
   }
-  throw error;
+  return false;
 }
 function handleSuspend(token, startRoot) {
   let root = startRoot ?? currentRoot;
@@ -348,6 +348,11 @@ var isInTransition = false;
 var enqueueMicrotask = typeof queueMicrotask === "function" ? queueMicrotask : (fn) => {
   Promise.resolve().then(fn);
 };
+var inCleanup = false;
+var SIGNAL_MARKER = Symbol.for("fict:signal");
+var COMPUTED_MARKER = Symbol.for("fict:computed");
+var EFFECT_MARKER = Symbol.for("fict:effect");
+var EFFECT_SCOPE_MARKER = Symbol.for("fict:effectScope");
 function link(dep, sub, version) {
   const prevDep = sub.depsTail;
   if (prevDep !== void 0 && prevDep.dep === dep) return;
@@ -471,13 +476,21 @@ function checkDirty(firstLink, sub) {
         dirty = true;
       }
     } else if ((depFlags & MutablePending) === MutablePending) {
-      if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
-        stack = { value: link2, prev: stack };
+      if (!dep.deps) {
+        const nextDep = link2.nextDep;
+        if (nextDep !== void 0) {
+          link2 = nextDep;
+          continue;
+        }
+      } else {
+        if (link2.nextSub !== void 0 || link2.prevSub !== void 0) {
+          stack = { value: link2, prev: stack };
+        }
+        link2 = dep.deps;
+        sub = dep;
+        ++checkDepth;
+        continue;
       }
-      link2 = dep.deps;
-      sub = dep;
-      ++checkDepth;
-      continue;
     }
     if (!dirty) {
       const nextDep = link2.nextDep;
@@ -555,8 +568,12 @@ function disposeNode(node) {
   node.depsTail = void 0;
   node.flags = 0;
   purgeDeps(node);
-  const sub = node.subs;
-  if (sub !== void 0) unlink(sub, node);
+  let sub = node.subs;
+  while (sub !== void 0) {
+    const next = sub.nextSub;
+    unlink(sub);
+    sub = next;
+  }
 }
 function updateSignal(s) {
   s.flags = Mutable;
@@ -593,7 +610,15 @@ function updateComputed(c) {
 }
 function runEffect(e) {
   const flags = e.flags;
-  if (flags & Dirty || flags & Pending && e.deps && checkDirty(e.deps, e)) {
+  if (flags & Dirty) {
+    if (e.runCleanup) {
+      inCleanup = true;
+      try {
+        e.runCleanup();
+      } finally {
+        inCleanup = false;
+      }
+    }
     ++cycle;
     effectRunDevtools(e);
     e.depsTail = void 0;
@@ -610,6 +635,35 @@ function runEffect(e) {
       e.flags = Watching;
       throw err;
     }
+  } else if (flags & Pending && e.deps) {
+    if (e.runCleanup) {
+      inCleanup = true;
+      try {
+        e.runCleanup();
+      } finally {
+        inCleanup = false;
+      }
+    }
+    if (checkDirty(e.deps, e)) {
+      ++cycle;
+      effectRunDevtools(e);
+      e.depsTail = void 0;
+      e.flags = WatchingRunning;
+      const prevSub = activeSub;
+      activeSub = e;
+      try {
+        e.fn();
+        activeSub = prevSub;
+        e.flags = Watching;
+        purgeDeps(e);
+      } catch (err) {
+        activeSub = prevSub;
+        e.flags = Watching;
+        throw err;
+      }
+    } else {
+      e.flags = Watching;
+    }
   } else {
     e.flags = Watching;
   }
@@ -688,7 +742,9 @@ function signal(initialValue) {
     __id: void 0
   };
   registerSignalDevtools(initialValue, s);
-  return signalOper.bind(s);
+  const accessor = signalOper.bind(s);
+  accessor[SIGNAL_MARKER] = true;
+  return accessor;
 }
 function signalOper(value) {
   if (arguments.length > 0) {
@@ -705,7 +761,7 @@ function signalOper(value) {
     return;
   }
   const flags = this.flags;
-  if (flags & Dirty) {
+  if (flags & Dirty && !inCleanup) {
     if (updateSignal(this)) {
       const subs = this.subs;
       if (subs !== void 0) shallowPropagate(subs);
@@ -733,6 +789,7 @@ function computed(getter) {
     getter
   };
   const bound = computedOper.bind(c);
+  bound[COMPUTED_MARKER] = true;
   return bound;
 }
 function computedOper() {
@@ -785,7 +842,35 @@ function effect(fn) {
     activeSub = prevSub;
     e.flags &= ~Running;
   }
-  return effectOper.bind(e);
+  const disposer = effectOper.bind(e);
+  disposer[EFFECT_MARKER] = true;
+  return disposer;
+}
+function effectWithCleanup(fn, cleanupRunner) {
+  const e = {
+    fn,
+    subs: void 0,
+    subsTail: void 0,
+    deps: void 0,
+    depsTail: void 0,
+    flags: WatchingRunning,
+    runCleanup: cleanupRunner,
+    __id: void 0
+  };
+  registerEffectDevtools(e);
+  const prevSub = activeSub;
+  if (prevSub !== void 0) link(e, prevSub, 0);
+  activeSub = e;
+  try {
+    effectRunDevtools(e);
+    fn();
+  } finally {
+    activeSub = prevSub;
+    e.flags &= ~Running;
+  }
+  const disposer = effectOper.bind(e);
+  disposer[EFFECT_MARKER] = true;
+  return disposer;
 }
 function effectOper() {
   disposeNode(this);
@@ -800,7 +885,9 @@ function effectScope(fn) {
   } finally {
     activeSub = prevSub;
   }
-  return effectScopeOper.bind(e);
+  const disposer = effectScopeOper.bind(e);
+  disposer[EFFECT_SCOPE_MARKER] = true;
+  return disposer;
 }
 function effectScopeOper() {
   disposeNode(this);
@@ -1034,8 +1121,11 @@ var $memo = createMemo;
 function createEffect(fn) {
   let cleanups = [];
   const rootForError = getCurrentRoot();
-  const run = () => {
+  const doCleanup = () => {
     runCleanupList(cleanups);
+    cleanups = [];
+  };
+  const run = () => {
     const bucket = [];
     withEffectCleanups(bucket, () => {
       try {
@@ -1052,7 +1142,7 @@ function createEffect(fn) {
     });
     cleanups = bucket;
   };
-  const disposeEffect = effect(run);
+  const disposeEffect = effectWithCleanup(run, doCleanup);
   const teardown = () => {
     runCleanupList(cleanups);
     disposeEffect();
@@ -1064,11 +1154,13 @@ var $effect = createEffect;
 function createRenderEffect(fn) {
   let cleanup;
   const rootForError = getCurrentRoot();
-  const run = () => {
+  const doCleanup = () => {
     if (cleanup) {
       cleanup();
       cleanup = void 0;
     }
+  };
+  const run = () => {
     try {
       const maybeCleanup = fn();
       if (typeof maybeCleanup === "function") {
@@ -1082,7 +1174,7 @@ function createRenderEffect(fn) {
       throw err;
     }
   };
-  const disposeEffect = effect(run);
+  const disposeEffect = effectWithCleanup(run, doCleanup);
   const teardown = () => {
     if (cleanup) {
       cleanup();
@@ -1614,9 +1706,6 @@ function mergeProps(...sources) {
   };
   return new Proxy({}, {
     get(_, prop) {
-      if (typeof prop === "symbol") {
-        return void 0;
-      }
       for (let i = validSources.length - 1; i >= 0; i--) {
         const src = validSources[i];
         const raw = resolveSource(src);
@@ -1689,8 +1778,8 @@ function startTransition(fn) {
 function useTransition() {
   const pending = signal(false);
   const start = (fn) => {
-    pending(true);
     startTransition(() => {
+      pending(true);
       try {
         fn();
       } finally {
@@ -1725,6 +1814,7 @@ function untrack2(fn) {
 // src/dom.ts
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MATHML_NS = "http://www.w3.org/1998/Math/MathML";
+var isDev = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 function render(view, container) {
   const root = createRootContext();
   const prev = pushRoot(root);
@@ -1935,18 +2025,28 @@ function applyRef(el, value) {
   if (typeof value === "function") {
     const refFn = value;
     refFn(el);
-    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) {
     const refObj = value;
     refObj.current = el;
-    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."
+      );
     }
   }
 }
@@ -2360,6 +2460,7 @@ function reconcileArrays(parentNode, a, b) {
 }
 
 // src/list-helpers.ts
+var isDev2 = true ? true : typeof process === "undefined" || process.env?.NODE_ENV !== "production";
 function moveNodesBefore(parent, nodes, anchor) {
   for (let i = nodes.length - 1; i >= 0; i--) {
     const node = nodes[i];
@@ -2421,6 +2522,7 @@ function removeBlockRange(block) {
     cursor = next;
   }
 }
+var MAX_SAFE_VERSION = 9007199254740991;
 function createVersionedSignalAccessor(initialValue) {
   let current = initialValue;
   let version = 0;
@@ -2431,7 +2533,7 @@ function createVersionedSignalAccessor(initialValue) {
       return current;
     }
     current = value;
-    version++;
+    version = version >= MAX_SAFE_VERSION ? 1 : version + 1;
     track2(version);
   }
   return accessor;
@@ -2487,15 +2589,21 @@ function createKeyedBlock(key, item, index, render2, needsIndex = true, hostRoot
   });
   const root = createRootContext(hostRoot);
   const prevRoot = pushRoot(root);
-  const prevSub = setActiveSub(void 0);
   let nodes = [];
+  let scopeDispose;
+  const prevSub = setActiveSub(void 0);
   try {
-    const rendered = render2(itemSig, indexSig, key);
-    if (rendered instanceof Node || Array.isArray(rendered) && rendered.every((n) => n instanceof Node)) {
-      nodes = toNodeArray(rendered);
-    } else {
-      const element = createElement(rendered);
-      nodes = toNodeArray(element);
+    scopeDispose = effectScope(() => {
+      const rendered = render2(itemSig, indexSig, key);
+      if (rendered instanceof Node || Array.isArray(rendered) && rendered.every((n) => n instanceof Node)) {
+        nodes = toNodeArray(rendered);
+      } else {
+        const element = createElement(rendered);
+        nodes = toNodeArray(element);
+      }
+    });
+    if (scopeDispose) {
+      root.cleanups.push(scopeDispose);
     }
   } finally {
     setActiveSub(prevSub);
@@ -2522,6 +2630,86 @@ function isNodeBetweenMarkers(node, startMarker, endMarker) {
   }
   return false;
 }
+function reorderBySwap(parent, first, second) {
+  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) {
+  const predecessors = new Array(sequence.length);
+  const result = [];
+  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 = 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(parent, endMarker, prev, next) {
+  const positions = /* @__PURE__ */ new Map();
+  for (let i = 0; i < prev.length; i++) {
+    positions.set(prev[i], i);
+  }
+  const sequence = new Array(next.length);
+  for (let i = 0; i < next.length; i++) {
+    const position = positions.get(next[i]);
+    if (position === void 0) return false;
+    sequence[i] = position;
+  }
+  const lisIndices = getLISIndices(sequence);
+  if (lisIndices.length === sequence.length) return true;
+  const inLIS = new Array(sequence.length).fill(false);
+  for (let i = 0; i < lisIndices.length; i++) {
+    inLIS[lisIndices[i]] = true;
+  }
+  let anchor = 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;
+}
 function createKeyedList(getItems, keyFn, renderItem, needsIndex) {
   const resolvedNeedsIndex = arguments.length >= 4 ? !!needsIndex : renderItem.length > 1;
   return createFineGrainedKeyedList(getItems, keyFn, renderItem, resolvedNeedsIndex);
@@ -2554,10 +2742,6 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
       const prevOrderedBlocks = container.orderedBlocks;
       const nextOrderedBlocks = container.nextOrderedBlocks;
       const orderedIndexByKey = container.orderedIndexByKey;
-      newBlocks.clear();
-      nextOrderedBlocks.length = 0;
-      orderedIndexByKey.clear();
-      const createdBlocks = [];
       const newItems = getItems();
       if (newItems.length === 0) {
         if (oldBlocks.size > 0) {
@@ -2580,8 +2764,44 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         return;
       }
       const prevCount = prevOrderedBlocks.length;
+      if (prevCount > 0 && newItems.length === prevCount && orderedIndexByKey.size === prevCount) {
+        let stableOrder = true;
+        const seen = /* @__PURE__ */ new Set();
+        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 = [];
       let appendCandidate = prevCount > 0 && newItems.length >= prevCount;
       const appendedBlocks = [];
+      let mismatchCount = 0;
+      let mismatchFirst = -1;
+      let mismatchSecond = -1;
+      let hasDuplicateKey = false;
       newItems.forEach((item, index) => {
         const key = keyFn(item, index);
         let block = oldBlocks.get(key);
@@ -2602,6 +2822,11 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         } else {
           const existingBlock = newBlocks.get(key);
           if (existingBlock) {
+            if (isDev2) {
+              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);
           }
@@ -2613,6 +2838,7 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         const position = orderedIndexByKey.get(key);
         if (position !== void 0) {
           appendCandidate = false;
+          hasDuplicateKey = true;
           const prior = nextOrderedBlocks[position];
           if (prior && prior !== resolvedBlock) {
             destroyRoot(prior.root);
@@ -2629,8 +2855,17 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
               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) {
           appendedBlocks.push(resolvedBlock);
@@ -2671,7 +2906,26 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         }
         oldBlocks.clear();
       }
-      if (newBlocks.size > 0 || container.currentNodes.length > 0) {
+      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;
+        }
+      }
+      if (!skipReconcile && (newBlocks.size > 0 || container.currentNodes.length > 0)) {
         const prevNodes = container.currentNodes;
         const nextNodes = container.nextNodes;
         nextNodes.length = 0;
@@ -2686,6 +2940,20 @@ function createFineGrainedKeyedList(getItems, keyFn, renderItem, needsIndex) {
         reconcileArrays(parent, prevNodes, nextNodes);
         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;
       }
       container.blocks = newBlocks;
       container.nextBlocks = oldBlocks;
@@ -3332,7 +3600,9 @@ function bindEvent(el, eventName, handler, options2) {
         const fn = resolveHandler();
         callEventHandler(fn, args[0], el);
       } catch (err) {
-        handleError(err, { source: "event", eventName }, rootRef);
+        if (!handleError(err, { source: "event", eventName }, rootRef)) {
+          throw err;
+        }
       }
     };
     return () => {
@@ -4119,10 +4389,12 @@ function ErrorBoundary(props) {
       renderingFallback = true;
       try {
         renderValue(toView(err));
-      } finally {
         renderingFallback = false;
+        props.onError?.(err);
+      } catch (fallbackErr) {
+        props.onError?.(err);
+        throw fallbackErr;
       }
-      props.onError?.(err);
       return;
     }
     popRoot(prev);
@@ -4217,7 +4489,9 @@ function Suspense(props) {
       popRoot(prev);
       flushOnMount(root);
       destroyRoot(root);
-      handleError(err, { source: "render" });
+      if (!handleError(err, { source: "render" }, hostRoot)) {
+        throw err;
+      }
       return;
     }
     popRoot(prev);
@@ -4247,18 +4521,26 @@ function Suspense(props) {
     if (thenable) {
       thenable.then(
         () => {
-          if (epoch !== tokenEpoch) return;
-          pending(Math.max(0, pending() - 1));
-          if (pending() === 0) {
+          if (epoch !== tokenEpoch) {
+            return;
+          }
+          const newPending = Math.max(0, pending() - 1);
+          pending(newPending);
+          if (newPending === 0) {
             switchView(props.children ?? null);
             onResolveMaybe();
           }
         },
         (err) => {
-          if (epoch !== tokenEpoch) return;
-          pending(Math.max(0, pending() - 1));
+          if (epoch !== tokenEpoch) {
+            return;
+          }
+          const newPending = Math.max(0, pending() - 1);
+          pending(newPending);
           props.onReject?.(err);
-          handleError(err, { source: "render" }, hostRoot);
+          if (!handleError(err, { source: "render" }, hostRoot)) {
+            throw err;
+          }
         }
       );
       return true;