@cplieger/reactive 1.1.0 → 1.2.1

package/LICENSE

@@ -689,4 +689,4 @@ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
-along with this program.  If not, see <https://www.gnu.org/licenses/>.
+along with this program.  If not, see <https://www.gnu.org/licenses/>.

package/README.md

@@ -1,9 +1,10 @@
 # reactive
 
-[![CI](https://github.com/cplieger/reactive/actions/workflows/ci.yaml/badge.svg)](https://github.com/cplieger/reactive/actions/workflows/ci.yaml)
 [![npm](https://img.shields.io/npm/v/@cplieger/reactive)](https://www.npmjs.com/package/@cplieger/reactive)
 [![JSR](https://jsr.io/badges/@cplieger/reactive)](https://jsr.io/@cplieger/reactive)
-[![License: GPL-3.0](https://img.shields.io/badge/License-GPL--3.0-blue.svg)](LICENSE)
+[![Test coverage](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cplieger/reactive/badges/coverage.json)](https://github.com/cplieger/reactive/actions/workflows/coverage.yml)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/13218/badge)](https://www.bestpractices.dev/projects/13218)
+[![OpenSSF Scorecard](https://api.scorecard.dev/projects/github.com/cplieger/reactive/badge)](https://scorecard.dev/viewer/?uri=github.com/cplieger/reactive)
 
 > Signals + collections + DOM-reconciliation micro-framework for TypeScript
 
@@ -73,7 +74,7 @@ isComputed(doubled); // true
 - `batch(fn)` — coalesce signal writes; effects flush synchronously at end of outermost batch
 - `flushSync()` — synchronously drain pending effects (no-op inside batch)
 - `untracked<T>(fn): T` — run fn without tracking signal reads (like Preact `untracked()` / Solid `untrack()`)
-- `on(deps, fn, options?): () => U | undefined` — explicit dependency declaration helper (like Solid `on()`). Pass into `effect()` or `computed()`.
+- `on(deps, fn, options?): () => U` — explicit dependency declaration helper (like Solid `on()`). Returns `() => U`; with `{ defer: true }` the accessor returns `() => U | undefined` (the deferred first call yields `undefined`). A single accessor `() => T` types `value`/`prev` as `T`; an array of accessors types them as `unknown[]`. Pass into `effect()` or `computed()`.
 - `subscribe(signal, cb): () => void` — subscribe to a signal, calling cb immediately and on every change
 - `isSignal(value): boolean` — type guard for signals created by `signal()`
 - `isComputed(value): boolean` — type guard for computed signals

package/jsr.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cplieger/reactive",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "sideEffects": false,
   "exports": {
@@ -13,14 +13,14 @@
   },
   "devDependencies": {
     "@eslint/js": "10.0.1",
-    "@vitest/coverage-v8": "4.1.8",
-    "eslint": "10.4.1",
+    "@vitest/coverage-v8": "4.1.9",
+    "eslint": "10.5.0",
     "fast-check": "4.8.0",
-    "happy-dom": "20.10.2",
-    "prettier": "3.8.3",
+    "happy-dom": "20.10.6",
+    "prettier": "3.8.4",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.60.1",
-    "vitest": "4.1.8"
+    "typescript-eslint": "8.62.0",
+    "vitest": "4.1.9"
   },
   "description": "Signals + DOM-reconciliation reactive core for TypeScript (zero dependencies)",
   "license": "GPL-3.0-or-later",

package/src/el.ts

@@ -51,12 +51,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 {
@@ -662,7 +629,39 @@ export function isComputed(value: unknown): value is ReadonlySignal<unknown> {
   return value !== null && typeof value === "object" && COMPUTED_BRAND in value;
 }
 
-/** Explicit dependency declaration helper. Mirrors Solid's on(). */
+/** Explicit dependency declaration helper. Mirrors Solid's on().
+ *
+ * Overloaded so the return type and the `value`/`prev` parameter types stay
+ * tight:
+ *   - Without `defer` (or `{ defer: false }`) the accessor always returns `U`;
+ *     only the `{ defer: true | boolean }` form widens to `U | undefined`
+ *     (the deferred first call yields `undefined`).
+ *   - A single accessor `() => T` correlates `value`/`prev` to `T`; an array of
+ *     accessors correlates them to `unknown[]`. */
+// Single accessor, non-deferred (or explicit `{ defer: false }`): never undefined.
+export function on<T, U>(
+  deps: () => T,
+  fn: (value: T, prev: T | undefined, prevResult: U | undefined) => U,
+  options?: { defer?: false },
+): () => U;
+// Single accessor, deferred: first call returns undefined.
+export function on<T, U>(
+  deps: () => T,
+  fn: (value: T, prev: T | undefined, prevResult: U | undefined) => U,
+  options: { defer: boolean },
+): () => U | undefined;
+// Array of accessors, non-deferred (or explicit `{ defer: false }`): never undefined.
+export function on<U>(
+  deps: (() => unknown)[],
+  fn: (value: unknown[], prev: unknown[] | undefined, prevResult: U | undefined) => U,
+  options?: { defer?: false },
+): () => U;
+// Array of accessors, deferred: first call returns undefined.
+export function on<U>(
+  deps: (() => unknown)[],
+  fn: (value: unknown[], prev: unknown[] | undefined, prevResult: U | undefined) => U,
+  options: { defer: boolean },
+): () => U | undefined;
 export function on<T, U>(
   deps: (() => T) | (() => unknown)[],
   fn: (value: T | unknown[], prev: T | unknown[] | undefined, prevResult: U | undefined) => U,

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());