what-core 0.10.0 → 0.11.1

package/src/guardrails.js

@@ -10,7 +10,6 @@ import { createWhatError, collectError } from './errors.js';
 
 const guardrails = {
   signalReadDetection: true,
-  effectCycleDetection: true,
   componentNaming: true,
   importValidation: true,
 };
@@ -25,16 +24,19 @@ export function getGuardrailConfig() {
 
 // --- Guardrail 1: Signal Read Detection ---
 // Detect when a signal function reference is used where its value was intended.
-// This catches the pattern: <span>{count}</span> (should be count())
+// This catches patterns like `Total: ${count}` or `count > 5` (should be count()).
 //
-// At runtime, we can detect this when a signal is coerced to string (via toString/valueOf)
-// and warn that it should be called.
+// At runtime, we detect this when a signal is coerced to a string or number
+// (via toString/valueOf) and warn that it should be called.
+//
+// Wiring: what-devtools calls this for every signal it registers (dev only),
+// so any app with devtools installed gets the guardrail automatically.
+// It can also be called manually: installSignalReadGuardrail(sig, 'name').
 
 export function installSignalReadGuardrail(signalFn, debugName) {
   if (!__DEV__ || !guardrails.signalReadDetection) return signalFn;
 
   // Override toString to catch template literal coercion
-  const originalToString = signalFn.toString;
   signalFn.toString = function () {
     const err = createWhatError('MISSING_SIGNAL_READ', {
       signalName: debugName || '(unnamed)',
@@ -58,47 +60,16 @@ export function installSignalReadGuardrail(signalFn, debugName) {
   return signalFn;
 }
 
-// --- Guardrail 2: Enhanced Effect Cycle Detection ---
-// Track which signals an effect reads AND writes.
-// If an effect writes to a signal it reads, warn about the specific cycle.
-
-const effectWriteTracking = new WeakMap(); // effect -> Set of signal debug names
-
-export function trackEffectSignalWrite(effectRef, signalDebugName) {
-  if (!__DEV__ || !guardrails.effectCycleDetection) return;
-
-  if (!effectWriteTracking.has(effectRef)) {
-    effectWriteTracking.set(effectRef, new Set());
-  }
-  effectWriteTracking.get(effectRef).add(signalDebugName);
-}
-
-export function checkEffectCycle(effectRef, readSignals) {
-  if (!__DEV__ || !guardrails.effectCycleDetection) return null;
-
-  const writes = effectWriteTracking.get(effectRef);
-  if (!writes || writes.size === 0) return null;
-
-  const overlapping = [];
-  for (const sigName of readSignals) {
-    if (writes.has(sigName)) {
-      overlapping.push(sigName);
-    }
-  }
-
-  if (overlapping.length > 0) {
-    const err = createWhatError('INFINITE_EFFECT', {
-      effectName: effectRef.fn?.name || '(anonymous)',
-      signalName: overlapping.join(', '),
-    });
-    collectError(err);
-    return err;
-  }
-
-  return null;
-}
+// NOTE: an "effect cycle detection" guardrail (trackEffectSignalWrite /
+// checkEffectCycle) used to live here, exported but never called by anything
+// — it was removed in v0.11 rather than shipped as a dead API. Reviving it
+// requires hooks inside reactive.js: (1) a call on every signal WRITE while
+// an effect is the active listener (to attribute writes to effects), and
+// (2) a post-run callback with the effect's tracked read-set (to intersect
+// reads with writes). reactive.js already detects runaway cascades at flush
+// time (iteration cap), which covers the practical failure mode.
 
-// --- Guardrail 3: Component Naming ---
+// --- Guardrail 2: Component Naming ---
 // Warn if a component function is not PascalCase.
 
 export function checkComponentName(name) {
@@ -119,7 +90,7 @@ function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-// --- Guardrail 4: Import Validation ---
+// --- Guardrail 3: Import Validation ---
 // Verify that all named imports from 'what-framework' are valid exports.
 
 const VALID_EXPORTS = new Set([

package/src/reactive.js

@@ -7,10 +7,26 @@
 // - Ownership tree: createRoot children auto-dispose when parent disposes
 // - Performance: cached levels, lazy sort, fast-path notify, minimal allocation
 
-// Dev-mode flag — build tools can dead-code-eliminate when false
-export const __DEV__ = typeof process !== 'undefined'
-  ? process.env?.NODE_ENV !== 'production'
-  : true;
+// Dev-mode flag — `if (__DEV__)` branches dead-code-eliminate when this is false.
+//
+// Resolution order (first definitive signal wins; PRODUCTION-SAFE default):
+//   1. globalThis.__WHAT_DEV__ — explicit boolean override for browser tooling
+//      (e.g. the playground can force dev mode without a bundler env).
+//   2. import.meta.env.DEV     — Vite & modern bundlers statically replace this,
+//      so production builds fully strip every dev branch.
+//   3. process.env.NODE_ENV    — Node / webpack / esbuild `define`.
+//   4. false                   — a raw browser bundle with NO build signal must
+//      default to PRODUCTION. (Previously defaulted to `true`, so EVERY browser
+//      bundle ran in dev mode: perf/size tax + the spurious internal
+//      `template()` XSS warning surfacing on production sites. AUDIT 2026-06-10.)
+export const __DEV__ =
+  (typeof globalThis !== 'undefined' && typeof globalThis.__WHAT_DEV__ === 'boolean')
+    ? globalThis.__WHAT_DEV__
+    : (import.meta && import.meta.env)
+      ? !!import.meta.env.DEV
+      : (typeof process !== 'undefined' && process.env)
+        ? process.env.NODE_ENV !== 'production'
+        : false;
 
 // DevTools hooks — set by what-devtools when installed.
 // These are no-ops in production (dead-code eliminated with __DEV__).
@@ -287,6 +303,8 @@ function _updateLevel(e) {
 // Runs a function, auto-tracking signal reads. Re-runs when deps change.
 // Returns a dispose function.
 
+const _noopDispose = () => {};
+
 export function effect(fn, opts) {
   const e = _createEffect(fn);
   e._level = 1;
@@ -303,6 +321,26 @@ export function effect(fn, opts) {
   _updateLevel(e);
   // Mark as stable after first run — subsequent re-runs skip cleanup/re-subscribe
   if (opts?.stable) e._stable = true;
+
+  // Zero-dependency release (SPRINT v0.11 C4): an effect that tracked zero
+  // signals on its first run can never be notified again — re-tracking only
+  // happens during a re-run, and a re-run requires a notification from a
+  // subscribed signal. The compiler conservatively wraps destructured props /
+  // imported accessors in effects; when those turn out to be plain values the
+  // effect is one-shot. If it also registered no cleanup, release it now:
+  // no dispose closure, no owner registration, nothing retained.
+  // - Effects that returned a cleanup keep full registration so the cleanup
+  //   still runs on owner disposal.
+  // - onCleanup() callbacks register with currentRoot directly (not with the
+  //   effect), so they are unaffected by this release.
+  // - untrack()/peek() reads inside the fn produce zero deps by design — the
+  //   effect could never re-fire anyway, so releasing is safe.
+  if (e.deps.length === 0 && e._cleanup === null) {
+    e.disposed = true;
+    if (__DEV__ && __devtools) __devtools.onEffectDispose(e);
+    return _noopDispose;
+  }
+
   const dispose = () => _disposeEffect(e);
   // Register with current root for automatic cleanup
   if (currentRoot) {

package/src/render.js

@@ -2,9 +2,13 @@
 // Solid-style rendering: components run once, signals create individual DOM effects.
 // No VDOM diffing — direct DOM manipulation with surgical signal-driven updates.
 
-import { effect, untrack, createRoot, _createItemScope, signal, __DEV__ } from './reactive.js';
+import { effect, untrack, createRoot, _createItemScope, signal, memo, __DEV__ } from './reactive.js';
 import { createDOM, disposeTree, getCurrentComponent, getComponentStack, _setSelectValue } from './dom.js';
 export { effect, untrack };
+// Re-export memo for compiled output (branch memoization: the compiler emits
+// _$memo(() => cond) so conditional branches only re-create DOM when the
+// condition value actually changes, not on every dependency write).
+export { memo };
 
 // --- Generic text insertion hook ---
 // External text engines (e.g., what-text) register a callback here via
@@ -173,41 +177,44 @@ export function insert(parent, child, marker) {
   }
 
   if (typeof child === 'function') {
-    // Fast path: if the first evaluation returns a string/number, optimistically
-    // create a text node for direct updates. If the value type changes later
-    // (e.g., text -> vnode), fall back to full reconcileInsert.
-    const first = child();
-    const t = typeof first;
-    if (t === 'string' || t === 'number') {
-      const textNode = document.createTextNode(String(first));
-      const m = marker || null;
-      if (m) parent.insertBefore(textNode, m);
-      else parent.appendChild(textNode);
-      if (_onTextInsert) _onTextInsert(parent, String(first));
-      let current = textNode;
-      let isTextFastPath = true;
-      effect(() => {
-        const val = child();
-        const vt = typeof val;
-        if (isTextFastPath && (vt === 'string' || vt === 'number')) {
-          // Fast path: still text — update data directly (no allocations)
-          const str = String(val);
-          if (textNode.data !== str) textNode.data = str;
-          if (_onTextInsert) _onTextInsert(parent, str);
-        } else {
-          // Type changed — fall back to full reconcile
-          isTextFastPath = false;
-          current = reconcileInsert(parent, val, current, m);
-        }
-      });
-      return textNode;
-    }
-    // General path for non-text reactive children (first value was null/vnode/array).
-    // Let the effect handle both the initial insert and subsequent updates to avoid
-    // double-evaluating child() (which would create components twice on mount).
+    // Single-evaluation mount: child() is evaluated exactly ONCE at mount,
+    // inside the effect (so signal reads are tracked). The first run decides
+    // between the text fast path (direct textNode.data updates, zero
+    // allocations) and the general reconcile path. Previously the first
+    // evaluation happened outside the effect to pick the path, then the
+    // effect's first run re-evaluated child() — creating components twice
+    // on mount for non-text children. (SPRINT v0.11 C3)
+    const m = marker || null;
     let current = null;
+    let textNode = null; // non-null while on the text fast path
+    let mounted = false;
     effect(() => {
-      current = reconcileInsert(parent, child(), current, marker || null);
+      const val = child();
+      const vt = typeof val;
+      if (!mounted) {
+        // First run — mount
+        mounted = true;
+        if (vt === 'string' || vt === 'number') {
+          textNode = document.createTextNode(String(val));
+          if (m) parent.insertBefore(textNode, m);
+          else parent.appendChild(textNode);
+          if (_onTextInsert) _onTextInsert(parent, String(val));
+          current = textNode;
+        } else {
+          current = reconcileInsert(parent, val, null, m);
+        }
+        return;
+      }
+      if (textNode !== null && (vt === 'string' || vt === 'number')) {
+        // Fast path: still text — update data directly (no allocations)
+        const str = String(val);
+        if (textNode.data !== str) textNode.data = str;
+        if (_onTextInsert) _onTextInsert(parent, str);
+        return;
+      }
+      // Type changed (or never was text) — full reconcile
+      textNode = null;
+      current = reconcileInsert(parent, val, current, m);
     });
     return current;
   }
@@ -417,10 +424,17 @@ export function mapArray(source, mapFn, options) {
 
     effect(() => {
       const newItems = source() || [];
+      // Resolve the LIVE parent from the end marker each run. When this inserter
+      // is mounted at a fragment-as-root (`<>{items().map(...)}</>`), createDOM
+      // calls it against a throwaway DocumentFragment which is then appended to
+      // the real container — the marker (and existing rows) move with it, so the
+      // captured `parent` goes stale. endMarker.parentNode always reflects where
+      // the list currently lives. Falls back to the captured parent pre-mount.
+      const liveParent = endMarker.parentNode || parent;
       if (keyFn) {
-        reconcileKeyed(parent, endMarker, items, newItems, mappedNodes, disposeFns, mapFn, keyFn, keyedState);
+        reconcileKeyed(liveParent, endMarker, items, newItems, mappedNodes, disposeFns, mapFn, keyFn, keyedState);
       } else {
-        reconcileList(parent, endMarker, items, newItems, mappedNodes, disposeFns, mapFn);
+        reconcileList(liveParent, endMarker, items, newItems, mappedNodes, disposeFns, mapFn);
       }
       // Save a snapshot of items for next diff. Use slice() to defend against
       // in-place mutation, but skip for empty arrays (common clear case).
@@ -1244,12 +1258,9 @@ export function spread(el, props) {
           else el.className = cls;
         });
       } else if (key === 'style' && typeof value() === 'object') {
-        el._propEffects[key] = effect(() => {
-          const styles = value();
-          for (const prop in styles) {
-            el.style[prop] = styles[prop] ?? '';
-          }
-        });
+        // Route through setStyle so stale object keys are cleared between
+        // re-evaluations (el._lastStyleObj diffing).
+        el._propEffects[key] = effect(() => { setStyle(el, value()); });
       } else {
         el._propEffects[key] = effect(() => { setProp(el, key, value()); });
       }
@@ -1332,13 +1343,8 @@ export function setProp(el, key, value) {
       }
     }
   } else if (key === 'style') {
-    if (typeof value === 'string') {
-      el.style.cssText = value;
-    } else if (typeof value === 'object') {
-      for (const prop in value) {
-        el.style[prop] = value[prop] ?? '';
-      }
-    }
+    // Delegate to setStyle so the object form clears stale keys (el._lastStyleObj).
+    setStyle(el, value);
   } else if (key.startsWith('data-') || key.startsWith('aria-')) {
     el.setAttribute(key, value);
   } else if (typeof value === 'boolean') {
@@ -1355,6 +1361,99 @@ export function setProp(el, key, value) {
   }
 }
 
+// --- Specialized attribute setters (SPRINT v0.11 C2) ---
+// The compiler statically knows most attribute names, so it emits direct calls
+// to these monomorphic helpers instead of routing everything through the
+// generic setProp() dispatcher (which re-checks ref/key/url/class/style/...
+// string-compares on every reactive update). setProp() remains the target for
+// spreads, URL attributes (href/src/action — sanitization lives there) and any
+// name the compiler can't classify.
+//
+// Function values are reactive ACCESSORS (e.g. `value={() => user().name}`),
+// exactly like setProp treats them: wrap in an effect that re-applies the
+// resolved value, with the disposer registered on el._propEffects so
+// disposeTree() tears it down on unmount.
+
+function _wrapPropAccessor(el, key, accessor, apply) {
+  if (!el._propEffects) el._propEffects = {};
+  if (el._propEffects[key]) {
+    try { el._propEffects[key](); } catch (e) { /* already disposed */ }
+  }
+  el._propEffects[key] = effect(() => apply(el, accessor()));
+}
+
+// class / className — hottest dynamic attribute in real apps.
+export function setClass(el, value) {
+  if (typeof value === 'function') return _wrapPropAccessor(el, 'class', value, setClass);
+  if (_hasSVGElement && el instanceof SVGElement) {
+    el.setAttribute('class', value || '');
+  } else {
+    el.className = value || '';
+  }
+}
+
+// style — string (cssText) or object form.
+export function setStyle(el, value) {
+  if (typeof value === 'function') return _wrapPropAccessor(el, 'style', value, setStyle);
+  if (typeof value === 'string') {
+    el.style.cssText = value;
+    // cssText fully replaces inline styles — drop any tracked object so a later
+    // object form starts clean rather than diffing against stale keys.
+    el._lastStyleObj = null;
+  } else if (value && typeof value === 'object') {
+    const style = el.style;
+    // Clear properties present in the previously-applied object but absent from
+    // the new one. Without this, `style={() => cond() ? {color, fontWeight} :
+    // {color}}` would leave fontWeight set after flipping to the second object.
+    const prev = el._lastStyleObj;
+    if (prev) {
+      for (const prop in prev) {
+        if (!(prop in value)) style[prop] = '';
+      }
+    }
+    for (const prop in value) {
+      style[prop] = value[prop] ?? '';
+    }
+    el._lastStyleObj = value;
+  } else if (value == null) {
+    el.style.cssText = '';
+    el._lastStyleObj = null;
+  }
+}
+
+// Plain attribute set — used for data-*/aria-* (statically recognizable).
+// null/undefined removes the attribute (previously setProp stringified them
+// to "null"/"undefined" — removal is the correct semantic). Booleans are
+// stringified ("true"/"false") because aria-* boolean strings are meaningful.
+export function setAttr(el, name, value) {
+  if (typeof value === 'function') {
+    return _wrapPropAccessor(el, name, value, (e2, v) => setAttr(e2, name, v));
+  }
+  if (value == null) el.removeAttribute(name);
+  else el.setAttribute(name, value);
+}
+
+// value — controlled-input property set. <select> keeps multi/deferred-option
+// handling; other elements get a guarded property write (the !== guard avoids
+// resetting the caret position in focused inputs on unrelated re-runs).
+export function setValue(el, value) {
+  if (typeof value === 'function') return _wrapPropAccessor(el, 'value', value, setValue);
+  if (el.tagName === 'SELECT') {
+    _setSelectValue(el, value);
+    return;
+  }
+  const str = value == null ? '' : String(value);
+  if (el.value !== str) el.value = str;
+}
+
+// checked — live property write (matches bind:checked). The old generic path
+// used setAttribute('checked'), which only sets the DEFAULT-checked state and
+// stops reflecting once the user has toggled the input.
+export function setChecked(el, value) {
+  if (typeof value === 'function') return _wrapPropAccessor(el, 'checked', value, setChecked);
+  el.checked = !!value;
+}
+
 // --- delegateEvents(eventNames) ---
 // Event delegation: common events handled at document level.
 // Handlers stored as el.$$click, el.$$input, etc.
@@ -1371,6 +1470,15 @@ export function delegateEvents(eventNames) {
       let node = e.target;
       const key = '$$' + name;
 
+      // Shim e.currentTarget so handlers see the element the (virtual) listener
+      // is attached to — not `document` — during the ancestor walk. Mirrors
+      // Solid's delegation shim. configurable so nested dispatch can redefine.
+      // (SPRINT v0.11 C9)
+      Object.defineProperty(e, 'currentTarget', {
+        configurable: true,
+        get() { return node || document; },
+      });
+
       // Walk up the DOM tree looking for handlers
       while (node) {
         const handler = node[key];
@@ -1659,12 +1767,8 @@ function hydrateElementProps(el, props) {
       if (key === 'class' || key === 'className') {
         effect(() => { el.className = value() || ''; });
       } else if (key === 'style' && typeof value() === 'object') {
-        effect(() => {
-          const styles = value();
-          for (const prop in styles) {
-            el.style[prop] = styles[prop] ?? '';
-          }
-        });
+        // Route through setStyle so stale object keys are cleared (el._lastStyleObj).
+        effect(() => { setStyle(el, value()); });
       } else {
         effect(() => { setProp(el, key, value()); });
       }