what-devtools 0.10.0 → 0.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "what-devtools",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "Dev tools for What Framework — signal inspector, component tree, effect graph",
   "type": "module",
   "main": "src/index.js",
@@ -20,7 +20,7 @@
     "inspector"
   ],
   "peerDependencies": {
-    "what-core": "^0.10.0"
+    "what-core": "^0.11.1"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",

package/src/DevPanel.jsx

@@ -20,12 +20,25 @@
  */
 
 import { signal, effect, onCleanup } from 'what-core';
-import { subscribe, getSnapshot, getErrors, installDevTools } from './index.js';
+import { subscribe, getSnapshot, getErrors, installDevTools, _suppressDevtools } from './index.js';
 
 export function DevPanel() {
   // Auto-install devtools if not already done
   installDevTools();
 
+  // The panel's ENTIRE body runs with devtools registration suppressed —
+  // the panel must not appear in its own signal/effect lists. More
+  // importantly: if panel-internal effects registered, every panel re-render
+  // would emit effect:created events, the subscribe() callback below would
+  // write `snapshot`, that write would re-render the panel, creating more
+  // effects → an unbounded feedback loop that crashes the page.
+  // The two bindings that (re)create DOM subtrees after mount (the isOpen
+  // panel toggle and the tab-content switch) carry their own _suppressDevtools
+  // wrappers, because their re-runs happen outside this bracket.
+  return _suppressDevtools(() => DevPanelBody());
+}
+
+function DevPanelBody() {
   const isOpen = signal(false);
   const activeTab = signal('overview');
   const snapshot = signal(getSnapshot());
@@ -291,7 +304,11 @@ export function DevPanel() {
   };
 
   return (
-    <>
+    // display:contents wrapper instead of a fragment — the babel plugin
+    // currently miscompiles top-level fragments whose element children carry
+    // event handlers (it references _el$N bindings it never emits). The
+    // wrapper is layout-neutral; both children are position:fixed anyway.
+    <div style="display:contents">
       {/* Toggle button with health indicator */}
       <button
         onclick={() => isOpen((v) => !v)}
@@ -312,9 +329,11 @@ export function DevPanel() {
         W
       </button>
 
-      {/* Panel -- conditionally rendered */}
+      {/* Panel -- conditionally rendered. _suppressDevtools: opening the
+          panel instantiates this whole subtree (dozens of bindings) — none
+          of them may register with devtools (see DevPanel docblock). */}
       {() =>
-        isOpen() ? (
+        _suppressDevtools(() => isOpen() ? (
           <div style={PANEL_STYLE}>
             {/* Header */}
             <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2a2a4a;background:#16163a;">
@@ -373,9 +392,10 @@ export function DevPanel() {
               </button>
             </div>
 
-            {/* Content */}
+            {/* Content. _suppressDevtools: tab switches and snapshot
+                updates rebuild this subtree — keep it out of devtools. */}
             <div style="overflow-y:auto;flex:1;">
-              {() => {
+              {() => _suppressDevtools(() => {
                 const tab = activeTab();
                 if (tab === 'overview') return renderOverview();
                 if (tab === 'signals') return renderSignals();
@@ -383,12 +403,12 @@ export function DevPanel() {
                 if (tab === 'components') return renderComponents();
                 if (tab === 'errors') return renderErrors();
                 return renderOverview();
-              }}
+              })}
             </div>
           </div>
-        ) : null
+        ) : null)
       }
-    </>
+    </div>
   );
 }
 

package/src/index.js

@@ -19,6 +19,11 @@ let signalId = 0;
 let effectId = 0;
 let componentId = 0;
 
+// what-core's installSignalReadGuardrail, captured when the core module is
+// wired up in installDevTools(). Dev-only: warns when a signal is coerced
+// to a string/number without being called (e.g. `Total: ${count}`).
+let coreSignalReadGuardrail = null;
+
 // Registries
 const signals = new Map();    // id → { name, ref, createdAt, internal }
 const effects = new Map();    // id → { name, createdAt, depSignalIds, runCount, lastRunAt }
@@ -84,6 +89,29 @@ function attributeToComponent() {
   return null;
 }
 
+// --- Self-tracking suppression ---
+// Devtools UI rendered INSIDE the inspected app (the DevPanel) must not
+// register its own signals/effects: panel-internal registrations emit
+// devtools events, the panel reacts by updating its snapshot signal, the
+// resulting re-render creates more effects, which emit again — an unbounded
+// feedback loop that wedges and crashes the page. Re-entrant (counter).
+let suppressDepth = 0;
+
+/**
+ * Run fn with devtools registration suppressed (exception-safe).
+ * Signals/effects/components created inside fn are invisible to devtools.
+ * Does NOT affect what-core's reactive dependency tracking.
+ * @internal Used by DevPanel; exported for devtools-adjacent UIs and tests.
+ */
+export function _suppressDevtools(fn) {
+  suppressDepth++;
+  try {
+    return fn();
+  } finally {
+    suppressDepth--;
+  }
+}
+
 // Error log (capped at 100)
 const errors = [];
 const MAX_ERRORS = 100;
@@ -184,7 +212,7 @@ export function safeSerialize(value, depth = 0, seen) {
  * Called from reactive.js __DEV__ hooks.
  */
 export function registerSignal(sig, name) {
-  if (!installed) return;
+  if (!installed || suppressDepth > 0) return;
   const id = ++signalId;
   const entry = {
     id,
@@ -200,6 +228,11 @@ export function registerSignal(sig, name) {
   sig._devId = id;
   // Reverse lookup for O(1) effect dep resolution
   if (sig._subs) subsToSignalId.set(sig._subs, id);
+  // Dev guardrail: warn when this signal is string/number-coerced without
+  // being called (catches `Total: ${count}` — should be `${count()}`).
+  if (coreSignalReadGuardrail) {
+    try { coreSignalReadGuardrail(sig, entry.name); } catch {}
+  }
   emit('signal:created', entry);
   return id;
 }
@@ -232,7 +265,7 @@ export function unregisterSignal(sig) {
  * Register an effect with the devtools.
  */
 export function registerEffect(e, name) {
-  if (!installed) return;
+  if (!installed || suppressDepth > 0) return;
   const id = ++effectId;
   const entry = {
     id,
@@ -322,7 +355,7 @@ function captureError(err, context) {
  * (see what_components / what_explain) so agents re-query before using IDs.
  */
 export function registerComponent(name, element, parentDevId) {
-  if (!installed) return;
+  if (!installed || suppressDepth > 0) return;
   const id = ++componentId;
   const entry = {
     id,
@@ -457,6 +490,11 @@ export function installDevTools(core) {
   // Wire into what-core's reactive system
   function installInto(mod) {
     if (!mod) return;
+    // Capture the guardrail BEFORE hooks go live so the very first
+    // registrations (and the pre-install drain below) get wrapped too.
+    if (typeof mod.installSignalReadGuardrail === 'function') {
+      coreSignalReadGuardrail = mod.installSignalReadGuardrail;
+    }
     if (mod.__setDevToolsHooks) mod.__setDevToolsHooks(hooks);
     if (typeof window !== 'undefined') window.__WHAT_CORE__ = mod;