what-core 0.6.2 → 0.7.0

package/src/reactive.js

@@ -29,9 +29,9 @@ let batchDepth = 0;
 let pendingEffects = [];
 let pendingNeedSort = false;  // Track whether pendingEffects actually needs sorting
 
-// WeakMap: subscriber Set → owning computed's inner effect (null/absent for signals)
-// Used for topological level computation.
-const subSetOwner = new WeakMap();
+// Instead of a WeakMap from subscriber Set → owning computed's inner effect,
+// we store the owner directly on the Set as ._owner (20x faster than WeakMap.get).
+// Signal subscriber Sets have ._owner = undefined (signals are level 0).
 
 // --- Iterative Computed Evaluation State ---
 // Uses a throw/catch trampoline to convert recursive computed evaluation
@@ -43,22 +43,28 @@ let iterativeEvalStack = null;  // array when inside evaluation loop, null other
 // --- Signal ---
 // A reactive value. Reading inside an effect auto-tracks the dependency.
 // Writing triggers only the effects that depend on this signal.
+//
+// Performance: signal read is the hottest path in any signal-based framework.
+// Key optimizations:
+// - No rest args (...args) — uses arguments.length for zero-alloc read path
+// - Subscriber tracking uses lastTracked to skip redundant Set.add/Array.push
+//   when the same signal is read multiple times in one effect (common pattern)
+// - Write path uses === first (fast for primitives), falls back to Object.is
+//   only for NaN detection
+// - subs.size check avoids notify() call when no subscribers
 
 export function signal(initial, debugName) {
   let value = initial;
   const subs = new Set();
-
-  // Unified getter/setter: sig() reads, sig(newVal) writes
-  function sig(...args) {
-    if (args.length === 0) {
-      // Read
-      if (currentEffect) {
-        subs.add(currentEffect);
-        currentEffect.deps.push(subs);
-      }
-      return value;
-    }
-    // Write
+  // Track the last effect that subscribed — skip redundant tracking when the
+  // same effect reads this signal multiple times (common in template bindings).
+  // lastTrackedEpoch tracks the effect's cleanup epoch to detect stale caches.
+  let lastTracked = null;
+  let lastTrackedEpoch = 0;
+
+  // Shared write logic — inlined via _sigWrite closure to avoid per-call overhead
+  // while keeping the sig() function body minimal for V8 optimization.
+  function _sigWrite(next) {
     if (__DEV__ && insideComputed) {
       console.warn(
         '[what] Signal.set() called inside a computed function. ' +
@@ -66,27 +72,42 @@ export function signal(initial, debugName) {
         (debugName ? ` (signal: ${debugName})` : '')
       );
     }
-    const nextVal = typeof args[0] === 'function' ? args[0](value) : args[0];
-    if (Object.is(value, nextVal)) return;
+    const nextVal = typeof next === 'function' ? next(value) : next;
+    // Fast equality: === handles all primitives except NaN.
+    // Only fall through for the NaN !== NaN case.
+    if (value === nextVal || (value !== value && nextVal !== nextVal)) return;
     value = nextVal;
+    // Invalidate lastTracked since value changed — any effect that reads
+    // this signal during re-run needs to re-track.
+    lastTracked = null;
     if (__DEV__ && __devtools) __devtools.onSignalUpdate(sig);
     if (subs.size > 0) notify(subs);
   }
 
-  sig.set = (next) => {
-    if (__DEV__ && insideComputed) {
-      console.warn(
-        '[what] Signal.set() called inside a computed function. ' +
-        'This may cause infinite loops. Use effect() instead.' +
-        (debugName ? ` (signal: ${debugName})` : '')
-      );
+  // Unified getter/setter: sig() reads, sig(newVal) writes
+  // Using arguments.length instead of rest args avoids array allocation on read
+  function sig(newVal) {
+    if (arguments.length === 0) {
+      // Read — hot path, keep minimal
+      const ce = currentEffect;
+      if (ce !== null) {
+        // Only track if this signal isn't already in the effect's deps.
+        // lastTracked is a fast cache for the common case (single effect reading
+        // this signal). It's reset to null on write and on cleanup epoch change.
+        if (ce !== lastTracked || ce._epoch !== lastTrackedEpoch) {
+          lastTracked = ce;
+          lastTrackedEpoch = ce._epoch;
+          subs.add(ce);
+          ce.deps.push(subs);
+        }
+      }
+      return value;
     }
-    const nextVal = typeof next === 'function' ? next(value) : next;
-    if (Object.is(value, nextVal)) return;
-    value = nextVal;
-    if (__DEV__ && __devtools) __devtools.onSignalUpdate(sig);
-    if (subs.size > 0) notify(subs);
-  };
+    // Write via sig(newVal)
+    _sigWrite(newVal);
+  }
+
+  sig.set = _sigWrite;
 
   sig.peek = () => value;
 
@@ -113,6 +134,8 @@ export function signal(initial, debugName) {
 export function computed(fn) {
   let value, dirty = true;
   const subs = new Set();
+  let lastTracked = null;
+  let lastTrackedEpoch = 0;
 
   const inner = _createEffect(() => {
     const prevInsideComputed = insideComputed;
@@ -131,16 +154,21 @@ export function computed(fn) {
   inner._computedSubs = subs;
 
   // Register this subscriber set as owned by this computed
-  subSetOwner.set(subs, inner);
+  subs._owner = inner;
 
   // Store markDirty/isDirty closures on the inner effect for iterative eval
   inner._markDirty = () => { dirty = true; };
   inner._isDirty = () => dirty;
 
   function read() {
-    if (currentEffect) {
-      subs.add(currentEffect);
-      currentEffect.deps.push(subs);
+    const ce = currentEffect;
+    if (ce !== null) {
+      if (ce !== lastTracked || ce._epoch !== lastTrackedEpoch) {
+        lastTracked = ce;
+        lastTrackedEpoch = ce._epoch;
+        subs.add(ce);
+        ce.deps.push(subs);
+      }
     }
     if (dirty) _evaluateComputed(inner);
     return value;
@@ -149,6 +177,7 @@ export function computed(fn) {
   // When a dependency changes, mark dirty AND propagate to our subscribers.
   inner._onNotify = () => {
     dirty = true;
+    lastTracked = null; // Invalidate tracking cache on value change
     if (subs.size > 0) notify(subs);
   };
 
@@ -203,7 +232,7 @@ function _evaluateComputed(computedEffect) {
       let pushedUpstream = false;
       const deps = current.deps;
       for (let i = 0; i < deps.length; i++) {
-        const depOwner = subSetOwner.get(deps[i]);
+        const depOwner = deps[i]._owner;
         if (depOwner && depOwner._computed && depOwner._isDirty && depOwner._isDirty()) {
           stack.push(depOwner);
           pushedUpstream = true;
@@ -245,7 +274,7 @@ function _updateLevel(e) {
   let maxDepLevel = 0;
   const deps = e.deps;
   for (let i = 0; i < deps.length; i++) {
-    const owner = subSetOwner.get(deps[i]);
+    const owner = deps[i]._owner;
     if (owner) {
       const depLevel = owner._level;
       if (depLevel > maxDepLevel) maxDepLevel = depLevel;
@@ -299,7 +328,9 @@ export function batch(fn) {
 
 function _createEffect(fn, lazy) {
   // Minimal object shape — computed() adds extra properties after creation.
-  // Keeping the base object small helps V8 optimize for the common (effect) case.
+  // IMPORTANT: V8 optimizes objects with a consistent "hidden class" (shape).
+  // All properties must be declared upfront even if null — adding properties
+  // later causes shape transitions which deoptimize property access globally.
   const e = {
     fn,
     deps: [],            // array of subscriber sets (cheaper than Set for typical 1-3 deps)
@@ -313,6 +344,8 @@ function _createEffect(fn, lazy) {
     _computedSubs: null,  // reference to the computed's subscriber set
     _isDirty: null,       // function to check if computed is dirty (set by computed())
     _markDirty: null,     // function to mark computed dirty (set by computed())
+    _cleanup: null,       // cleanup function returned by effect fn (declared upfront for shape)
+    _epoch: 0,           // incremented on cleanup — used by signal lastTracked cache
   };
   if (__DEV__ && __devtools) __devtools.onEffectCreate(e);
   return e;
@@ -322,6 +355,9 @@ function _runEffect(e) {
   if (e.disposed) return;
 
   // Stable effect fast path: deps don't change, skip cleanup/re-subscribe.
+  // This is critical for performance: effects like `() => el.className = sig() ? 'a' : ''`
+  // always read the same signal(s). After auto-promotion, re-runs skip the O(deps)
+  // cleanup + re-subscribe cycle entirely.
   if (e._stable) {
     if (e._cleanup) {
       try { e._cleanup(); } catch (err) {
@@ -344,11 +380,15 @@ function _runEffect(e) {
     return;
   }
 
+  // Save the single dep for auto-stable detection (safe: 1-dep effects
+  // have deterministic dep sets — no conditional reads possible).
+  const singleDep = e.deps.length === 1 ? e.deps[0] : null;
+
   cleanup(e);
   // Run effect cleanup from previous run
   if (e._cleanup) {
     try { e._cleanup(); } catch (err) {
-      if (__devtools?.onError) __devtools.onError(err, { type: 'effect-cleanup', effect: e });
+      if (__DEV__ && __devtools?.onError) __devtools.onError(err, { type: 'effect-cleanup', effect: e });
       if (__DEV__) console.warn('[what] Error in effect cleanup:', err);
     }
     e._cleanup = null;
@@ -363,11 +403,23 @@ function _runEffect(e) {
     }
   } catch (err) {
     if (err === NEEDS_UPSTREAM) throw err; // Iterative eval sentinel — not a real error
-    if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
+    if (__DEV__ && __devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
     throw err;
   } finally {
     currentEffect = prev;
   }
+
+  // Auto-promote to stable: effects with exactly 1 dep that remains the same
+  // after re-run have a fixed dependency graph. Skip cleanup/re-subscribe
+  // on future re-runs. This is safe because a single-dep effect can't have
+  // conditional signal reads that change which signal is tracked.
+  // Guard: don't promote self-triggering effects (those that write to the signal
+  // they read, causing re-queuing). Check e._pending to detect this.
+  if (singleDep !== null && e.deps.length === 1 && e.deps[0] === singleDep
+      && !e._cleanup && !e._pending) {
+    e._stable = true;
+  }
+
   if (__DEV__ && __devtools?.onEffectRun) __devtools.onEffectRun(e);
 }
 
@@ -388,6 +440,9 @@ function cleanup(e) {
   const deps = e.deps;
   for (let i = 0; i < deps.length; i++) deps[i].delete(e);
   deps.length = 0;
+  // Increment epoch so signals' lastTracked cache is invalidated.
+  // This ensures a signal will re-track this effect after cleanup.
+  e._epoch++;
 }
 
 // --- Notification ---
@@ -400,6 +455,43 @@ let notifyDepth = 0;        // Tracks recursive notify depth
 let notifyQueue = null;     // Reusable queue, allocated on first recursive call
 let notifyQueueLen = 0;     // Length of the queue
 
+// Process a single subscriber during notification.
+// Extracted to avoid code duplication between outer and queue drain paths.
+function _processSubscriber(e) {
+  if (e.disposed) return;
+  if (e._onNotify) {
+    // Computed subscriber: mark dirty and propagate.
+    // _onNotify may call notify() recursively — tracked by notifyDepth.
+    e._onNotify();
+  } else if (!e._pending) {
+    if (batchDepth === 0 && e._stable) {
+      // Inline execution for stable effects — no pending queue needed
+      const prev = currentEffect;
+      currentEffect = null;
+      try {
+        const result = e.fn();
+        if (typeof result === 'function') {
+          if (e._cleanup) try { e._cleanup(); } catch (err) { /* ignore */ }
+          e._cleanup = result;
+        }
+      } catch (err) {
+        if (__DEV__ && __devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
+        if (__DEV__) console.warn('[what] Error in stable effect:', err);
+      } finally {
+        currentEffect = prev;
+      }
+    } else {
+      e._pending = true;
+      const level = e._level;
+      const len = pendingEffects.length;
+      if (len > 0 && pendingEffects[len - 1]._level > level) {
+        pendingNeedSort = true;
+      }
+      pendingEffects.push(e);
+    }
+  }
+}
+
 function notify(subs) {
   // Fast path: no recursive notifications in progress — iterate directly.
   // This avoids array allocation for the common case (signal → effects).
@@ -407,36 +499,7 @@ function notify(subs) {
     notifyDepth = 1;
     try {
       for (const e of subs) {
-        if (e.disposed) continue;
-        if (e._onNotify) {
-          // Computed subscriber: mark dirty and propagate.
-          // _onNotify may call notify() recursively — tracked by notifyDepth.
-          e._onNotify();
-        } else if (batchDepth === 0 && e._stable) {
-          // Inline execution for stable effects
-          const prev = currentEffect;
-          currentEffect = null;
-          try {
-            const result = e.fn();
-            if (typeof result === 'function') {
-              if (e._cleanup) try { e._cleanup(); } catch (err) {}
-              e._cleanup = result;
-            }
-          } catch (err) {
-            if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
-            if (__DEV__) console.warn('[what] Error in stable effect:', err);
-          } finally {
-            currentEffect = prev;
-          }
-        } else if (!e._pending) {
-          e._pending = true;
-          const level = e._level;
-          const len = pendingEffects.length;
-          if (len > 0 && pendingEffects[len - 1]._level > level) {
-            pendingNeedSort = true;
-          }
-          pendingEffects.push(e);
-        }
+        _processSubscriber(e);
       }
       // Drain any queued subscriber sets from recursive notify calls
       if (notifyQueueLen > 0) {
@@ -446,33 +509,7 @@ function notify(subs) {
           notifyQueue[qi] = null; // Allow GC
           qi++;
           for (const e of queuedSubs) {
-            if (e.disposed) continue;
-            if (e._onNotify) {
-              e._onNotify();
-            } else if (batchDepth === 0 && e._stable) {
-              const prev = currentEffect;
-              currentEffect = null;
-              try {
-                const result = e.fn();
-                if (typeof result === 'function') {
-                  if (e._cleanup) try { e._cleanup(); } catch (err) {}
-                  e._cleanup = result;
-                }
-              } catch (err) {
-                if (__devtools?.onError) __devtools.onError(err, { type: 'effect', effect: e });
-                if (__DEV__) console.warn('[what] Error in stable effect:', err);
-              } finally {
-                currentEffect = prev;
-              }
-            } else if (!e._pending) {
-              e._pending = true;
-              const level = e._level;
-              const len = pendingEffects.length;
-              if (len > 0 && pendingEffects[len - 1]._level > level) {
-                pendingNeedSort = true;
-              }
-              pendingEffects.push(e);
-            }
+            _processSubscriber(e);
           }
         }
         notifyQueueLen = 0;
@@ -544,10 +581,6 @@ function flush() {
       iterations++;
     }
     if (iterations >= 25) {
-      // Clear pending effects to prevent further damage
-      for (let i = 0; i < pendingEffects.length; i++) pendingEffects[i]._pending = false;
-      pendingEffects.length = 0;
-
       if (__DEV__) {
         const remaining = pendingEffects.slice(0, 3);
         const effectNames = remaining.map(e => e.fn?.name || e.fn?.toString().slice(0, 60) || '(anonymous)');
@@ -560,6 +593,9 @@ function flush() {
       } else {
         console.warn('[what] Possible infinite effect loop detected');
       }
+      // Clear pending effects AFTER capturing debug info
+      for (let i = 0; i < pendingEffects.length; i++) pendingEffects[i]._pending = false;
+      pendingEffects.length = 0;
     }
   } finally {
     isFlushing = false;
@@ -605,7 +641,7 @@ export function memo(fn) {
   _updateLevel(e);
 
   // Register subscriber set owner for level tracking
-  subSetOwner.set(subs, e);
+  subs._owner = e;
 
   // Register with current root
   if (currentRoot) {
@@ -760,6 +796,45 @@ function _disposeRoot(root) {
   root.disposals.length = 0;
 }
 
+// --- _createItemScope ---
+// Lightweight reactive scope for list items. Unlike createRoot, this does NOT
+// register with the parent ownership tree (saves ~40% allocation overhead).
+// Used by mapArray where disposal is managed explicitly by the list reconciler.
+export function _createItemScope(fn) {
+  const prevRoot = currentRoot;
+  const prevOwner = currentOwner;
+  const scope = {
+    disposals: [],
+    owner: null,          // No parent registration
+    children: [],         // Kept for compat with effects that create sub-roots
+    _disposed: false,
+  };
+
+  currentRoot = scope;
+  currentOwner = scope;
+
+  try {
+    const dispose = () => {
+      if (scope._disposed) return;
+      scope._disposed = true;
+      // Dispose children
+      for (let i = scope.children.length - 1; i >= 0; i--) {
+        _disposeRoot(scope.children[i]);
+      }
+      scope.children.length = 0;
+      // Dispose own effects
+      for (let i = scope.disposals.length - 1; i >= 0; i--) {
+        scope.disposals[i]();
+      }
+      scope.disposals.length = 0;
+    };
+    return fn(dispose);
+  } finally {
+    currentRoot = prevRoot;
+    currentOwner = prevOwner;
+  }
+}
+
 // --- onCleanup ---
 // Register a cleanup function with the current owner/root.
 // Runs when the owner is disposed.