@cplieger/reactive 1.2.0 → 1.2.2

package/README.md

@@ -92,7 +92,7 @@ isComputed(doubled); // true
 
 `createStore` and `SignalMap` are thin facades over the one signal engine — there is no second reactivity implementation. `createStore` lazily backs each key with a signal; `SignalMap` is a registry of signals keyed by a runtime string id.
 
-- `createStore<M>(): Store<M>` — typed, fixed-key reactive store with `get`, `set`, `subscribe`, `effect`, `computed`, and `batch`. `subscribe` notifies on change only (not immediately on subscribe). A `computed` key whose fn reads its own output throws `Error("Cycle detected")` rather than looping.
+- `createStore<M>(): Store<M>` — typed, fixed-key reactive store with `get`, `set`, `subscribe`, `effect`, `computed`, and `batch`. `subscribe` notifies on change only (not immediately on subscribe). A `computed` key whose fn reads its own output does not loop unbounded: a self-read that keeps yielding new values trips the engine's batch-iteration guard and surfaces `Error("Cycle detected")` through the effect error handler (effects isolate errors, so it is not rethrown to the caller), while a stable self-read settles via `Object.is` dedup.
 - `SignalMap<V>` — dynamic per-id signal registry: `get(id)`, `ensure(id, initial)`, `clear(id)`, `clearAll()`. For reactive state whose key set isn't known at the type level (per-message streaming text, per-row state, …); complements `createStore`'s fixed key set.
 
 ### Collections

package/jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/reactive",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "exports": {
     ".": "./src/index.ts"
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/reactive",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -14,12 +14,12 @@
   "devDependencies": {
     "@eslint/js": "10.0.1",
     "@vitest/coverage-v8": "4.1.9",
-    "eslint": "10.5.0",
+    "eslint": "10.6.0",
     "fast-check": "4.8.0",
-    "happy-dom": "20.10.3",
-    "prettier": "3.8.4",
+    "happy-dom": "20.10.6",
+    "prettier": "3.9.0",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.61.1",
+    "typescript-eslint": "8.62.0",
     "vitest": "4.1.9"
   },
   "description": "Signals + DOM-reconciliation reactive core for TypeScript (zero dependencies)",

package/src/el.ts

@@ -8,12 +8,7 @@ import { trackHandler } from "./reconcile-tree.js";
 /** A value for an element attribute/property/handler. Functions are treated as
  *  event handlers when the key starts with `on`. */
 export type AttrValue =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | ((...args: never[]) => unknown);
+  string | number | boolean | null | undefined | ((...args: never[]) => unknown);
 
 // Keys set as DOM *properties* (not attributes) because the attribute form
 // either doesn't reflect (value/checked) or is awkward (boolean presence).
@@ -51,12 +46,11 @@ export function el(
       }
       if (k === "className") {
         e.className = v as string;
-      } else if (k.startsWith("on")) {
+      } else if (/^on/i.test(k)) {
         (e as unknown as Record<string, unknown>)[k] = v;
         trackHandler(e, k);
-      } else if (BOOL_PROPS.has(k)) {
-        (e as unknown as Record<string, unknown>)[k] = v;
-      } else if (VALUE_PROPS.has(k)) {
+      } else if (BOOL_PROPS.has(k) || VALUE_PROPS.has(k)) {
+        // Both sets are assigned as DOM properties, not attributes.
         (e as unknown as Record<string, unknown>)[k] = v;
       } else {
         e.setAttribute(k, String(v));

package/src/reconcile-tree.ts

@@ -24,10 +24,10 @@ export function patch(
     if (child == null) {
       continue;
     }
-    if ((child as Node).nodeType === 11) {
-      newChildren.push(...Array.from((child as Node).childNodes));
-    } else if (typeof child === "string") {
+    if (typeof child === "string") {
       newChildren.push(document.createTextNode(child));
+    } else if (child.nodeType === 11) {
+      newChildren.push(...Array.from(child.childNodes));
     } else {
       newChildren.push(child);
     }
@@ -58,9 +58,15 @@ export function reconcileChildren(parent: Node, newChildren: Node[]): void {
     if (matched) {
       oldByKey.delete(newKey);
     } else if (!newKey) {
+      // Unkeyed new node: match the next UNKEYED old node by position, advancing
+      // past keyed old nodes (which are reserved for key-based matching) and any
+      // already-consumed slots. This mirrors the documented contract ("unkeyed
+      // nodes match by position, skipping keyed nodes") and React/Preact's
+      // keyed+positional reconciliation. Stopping at (and matching) a keyed old
+      // node would corrupt a node that key-matching also reuses in the same pass.
       while (oldIdx < oldChildren.length) {
         const oc = oldChildren[oldIdx];
-        if (oc === undefined || nodeKey(oc)) {
+        if (oc !== undefined && !nodeKey(oc)) {
           break;
         }
         oldIdx++;
@@ -78,7 +84,17 @@ export function reconcileChildren(parent: Node, newChildren: Node[]): void {
     }
 
     if (!canPatch(matched, newChild)) {
-      parent.replaceChild(newChild, matched);
+      // Insert the replacement at the target index i, then drop the mismatched
+      // old node — which may NOT be at index i. The positional scan lets an
+      // unkeyed new node match a positionally-later unkeyed old node while an
+      // unconsumed keyed old node sits ahead of it, so `matched` can be at a
+      // position > i. replaceChild would leave newChild at matched's position;
+      // a later insert then pushes it past newChildren.length and the trailing
+      // removal loop deletes it, dropping the new node and leaving the stale
+      // keyed node. The insert and patch branches already target index i.
+      const ref = parent.childNodes.item(i);
+      parent.insertBefore(newChild, ref);
+      parent.removeChild(matched);
       continue;
     }
 

package/src/reconcile.ts

@@ -44,7 +44,12 @@ export function reconcile<T>(
         spec.update(el, item);
       }
     }
-    parent.insertBefore(el, target);
+    // Skip the move when el is already at its target position: re-inserting a node
+    // that is already correctly placed still detaches+reattaches it in the DOM,
+    // which blurs a focused input / drops a text selection inside that row.
+    if (el.parentNode !== parent || el.nextSibling !== target) {
+      parent.insertBefore(el, target);
+    }
     target = el;
   }
 

package/src/signal.ts

@@ -8,11 +8,9 @@ const COMPUTED_BRAND = Symbol("computed");
 
 // --- Bitfield flags ---
 const DIRTY = 1;
-const CHECK = 2;
 const RUNNING = 4;
 const DISPOSED = 8;
 const HAS_ERROR = 16;
-const TRACKING = 32;
 const NOTIFIED = 64;
 
 // --- Linked-list Node for source↔target edges ---
@@ -67,6 +65,10 @@ let batchedEffect: EffectNode | undefined;
 let batchIteration = 0;
 let globalVersion = 0;
 
+// Max effect-scheduling passes within one endBatch before assuming a cyclic
+// effect-write loop and bailing with "Cycle detected".
+const MAX_BATCH_ITERATIONS = 100;
+
 // --- Effect error handler ---
 /** Cleanup function returned by an effect callback, called before re-execution or disposal. */
 export type Cleanup = undefined | (() => void);
@@ -235,7 +237,7 @@ function needsToRecompute(target: TargetNode): boolean {
     const source = node._source;
     if (source._isComputed) {
       const comp = source as unknown as ComputedNode;
-      if (comp._flags & (DIRTY | CHECK)) {
+      if (comp._flags & DIRTY) {
         refreshComputed(comp);
       }
       if (comp._flags & HAS_ERROR) {
@@ -257,42 +259,15 @@ function refreshComputed(comp: ComputedNode): void {
   }
 
   // Fast-path: nothing changed globally since last check
-  if (comp._globalVersion === globalVersion && !(comp._flags & (DIRTY | CHECK))) {
+  if (comp._globalVersion === globalVersion && !(comp._flags & DIRTY)) {
     return;
   }
   comp._globalVersion = globalVersion;
 
-  // If not dirty but CHECK, verify sources first
-  if (!(comp._flags & DIRTY) && comp._flags & CHECK) {
-    let sn = comp._sources;
-    while (sn !== undefined) {
-      const src = sn._source;
-      if (src._isComputed) {
-        const srcComp = src as unknown as ComputedNode;
-        if (srcComp._flags & (DIRTY | CHECK)) {
-          refreshComputed(srcComp);
-        }
-        if (srcComp._flags & HAS_ERROR) {
-          comp._flags |= DIRTY;
-          break;
-        }
-      }
-      if (src._version !== sn._version) {
-        comp._flags |= DIRTY;
-        break;
-      }
-      sn = sn._nextSource;
-    }
-    if (!(comp._flags & DIRTY)) {
-      comp._flags &= ~CHECK;
-      return;
-    }
-  }
-
   const prevContext = evalContext;
   evalContext = comp;
   const prevFlags = comp._flags;
-  comp._flags = RUNNING | TRACKING;
+  comp._flags = RUNNING;
 
   prepareSources(comp);
 
@@ -304,7 +279,7 @@ function refreshComputed(comp: ComputedNode): void {
     // PATH A: fn() threw — cache the error
     fnThrew = true;
     comp._value = err;
-    comp._flags = HAS_ERROR | TRACKING;
+    comp._flags = HAS_ERROR;
     comp._version++;
     // Keep old deps (version=-1 nodes) so computed retries when sources change.
     let sn = comp._sources;
@@ -318,7 +293,7 @@ function refreshComputed(comp: ComputedNode): void {
     evalContext = prevContext;
     cleanupSources(comp);
     if (!fnThrew) {
-      comp._flags = (comp._flags & ~RUNNING) | TRACKING;
+      comp._flags = comp._flags & ~RUNNING;
     }
   }
 
@@ -364,7 +339,7 @@ function endBatch(): void {
     let eff: EffectNode | undefined = batchedEffect;
     batchedEffect = undefined;
     batchIteration++;
-    if (batchIteration > 100) {
+    if (batchIteration > MAX_BATCH_ITERATIONS) {
       batchIteration = 0;
       throw new Error("Cycle detected");
     }
@@ -391,8 +366,7 @@ function endBatch(): void {
   }
 }
 
-function runEffect(eff: EffectNode): void {
-  // Run cleanup first (untracked)
+function runCleanup(eff: EffectNode): void {
   if (eff._cleanup) {
     const c = eff._cleanup;
     eff._cleanup = undefined;
@@ -406,6 +380,11 @@ function runEffect(eff: EffectNode): void {
       evalContext = prevContext;
     }
   }
+}
+
+function runEffect(eff: EffectNode): void {
+  // Run cleanup first (untracked)
+  runCleanup(eff);
 
   // Track dependencies
   const prevContext = evalContext;
@@ -426,19 +405,7 @@ function runEffect(eff: EffectNode): void {
 
 function disposeEffect(eff: EffectNode): void {
   // Run cleanup (untracked)
-  if (eff._cleanup) {
-    const c = eff._cleanup;
-    eff._cleanup = undefined;
-    const prevContext = evalContext;
-    evalContext = undefined;
-    try {
-      c();
-    } catch (e) {
-      safeCallHandler(e);
-    } finally {
-      evalContext = prevContext;
-    }
-  }
+  runCleanup(eff);
 
   // Unsubscribe from all sources
   let node = eff._sources;
@@ -533,7 +500,7 @@ export function computed<T>(fn: () => T, options?: SignalOptions<T>): ReadonlySi
     _targets: undefined,
     _isComputed: true,
     // TargetNode fields
-    _flags: DIRTY | TRACKING,
+    _flags: DIRTY,
     _sources: undefined,
     // ComputedNode-specific fields
     _fn: fn,
@@ -550,7 +517,7 @@ export function computed<T>(fn: () => T, options?: SignalOptions<T>): ReadonlySi
         throw new Error("Cycle detected");
       }
       // Refresh before tracking (pull-based glitch-free)
-      if (node._flags & (DIRTY | CHECK)) {
+      if (node._flags & DIRTY) {
         refreshComputed(node);
       }
       const dep = addDependency(node);
@@ -567,7 +534,7 @@ export function computed<T>(fn: () => T, options?: SignalOptions<T>): ReadonlySi
     },
     peek(): T {
       // F6: refresh WITHOUT tracking
-      if (node._flags & (DIRTY | CHECK)) {
+      if (node._flags & DIRTY) {
         const prevContext = evalContext;
         evalContext = undefined;
         try {

package/src/store.ts

@@ -61,8 +61,11 @@ export function createStore<M>(): Store<M> {
     });
   }
 
-  // A derived key: an effect that writes `outputKey` from `fn`. If `fn` reads
-  // `outputKey` the engine throws "Cycle detected" rather than looping.
+  // A derived key: an effect that writes `outputKey` from `fn`. A `fn` that reads
+  // `outputKey` and yields a new value each run trips the engine's batch-iteration
+  // guard after ~100 re-runs, surfacing Error("Cycle detected") through the effect
+  // error handler (effects isolate errors, so it is NOT rethrown to the caller); a
+  // self-read that returns a stable value settles via Object.is dedup without looping.
   function computed<K extends keyof M & string>(outputKey: K, fn: () => M[K]): () => void {
     return effect(() => {
       set(outputKey, fn());