fix: keep the graph watching after View in graph

Opening the graph from the ownership panel stopped its live updates.

Each panel installed the dev hooks itself, kept the hooks it found, and put
them back when it stopped. View in graph starts the graph and stops the
ownership panel in the same flush. The graph installed first, then the
ownership panel put back the hooks it had found earlier, which removed the
graph's hooks.

- A shared hub in `dev-hooks.ts` installs the hooks once and calls every listener. It still calls the hooks it found, and puts them back only when the last listener leaves.
- Both registries listen through the hub, so panels can start and stop in any order.
- Unit tests cover a listener that keeps working when an older one leaves, and the e2e test updates the app after the jump and checks the graph shows it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: lxsmnsyc

src/dev-toolbar/dev-hooks.test.ts

@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createDevHooksHub, type DevHooksSlot } from './dev-hooks.js';
+
+describe('createDevHooksHub', () => {
+  it('leaves the slot alone until something listens', () => {
+    const original = () => {};
+    const slot: DevHooksSlot = { onUpdate: original };
+
+    createDevHooksHub(slot);
+
+    expect(slot.onUpdate).toBe(original);
+  });
+
+  it('calls the hooks it found and every listener', () => {
+    const found = vi.fn();
+    const slot: DevHooksSlot = { onUpdate: found };
+    const hub = createDevHooksHub(slot);
+    const first = vi.fn();
+    const second = vi.fn();
+
+    hub.listen({ onUpdate: first });
+    hub.listen({ onUpdate: second });
+    slot.onUpdate!();
+
+    expect(found).toHaveBeenCalledTimes(1);
+    expect(first).toHaveBeenCalledTimes(1);
+    expect(second).toHaveBeenCalledTimes(1);
+  });
+
+  // Opening the graph from the ownership panel starts one listener and stops
+  // another in the same flush. The listener that started must keep working.
+  it('keeps a listener working when an older one leaves', () => {
+    const slot: DevHooksSlot = {};
+    const hub = createDevHooksHub(slot);
+    const tree = vi.fn();
+    const graph = vi.fn();
+
+    const stopTree = hub.listen({ onOwner: tree });
+    hub.listen({ onOwner: graph });
+    stopTree();
+    slot.onOwner!({});
+
+    expect(graph).toHaveBeenCalledTimes(1);
+    expect(tree).not.toHaveBeenCalled();
+  });
+
+  it('puts the original hooks back when the last listener leaves', () => {
+    const original = () => {};
+    const slot: DevHooksSlot = { onGraph: original };
+    const hub = createDevHooksHub(slot);
+
+    const stopFirst = hub.listen({});
+    const stopSecond = hub.listen({});
+    stopFirst();
+    expect(slot.onGraph).not.toBe(original);
+    stopSecond();
+
+    expect(slot.onGraph).toBe(original);
+  });
+
+  it('ignores a stop called twice', () => {
+    const slot: DevHooksSlot = {};
+    const hub = createDevHooksHub(slot);
+    const graph = vi.fn();
+
+    const stop = hub.listen({});
+    hub.listen({ onUpdate: graph });
+    stop();
+    stop();
+    slot.onUpdate!();
+
+    expect(graph).toHaveBeenCalledTimes(1);
+  });
+
+  it('installs again after every listener left', () => {
+    const slot: DevHooksSlot = {};
+    const hub = createDevHooksHub(slot);
+    const graph = vi.fn();
+
+    hub.listen({})();
+    hub.listen({ onOwner: graph });
+    slot.onOwner!({});
+
+    expect(graph).toHaveBeenCalledTimes(1);
+  });
+});

src/dev-toolbar/dev-hooks.ts

@@ -0,0 +1,81 @@
+import { DEV } from 'solid-js';
+
+/** The dev hooks of solid-js the toolbar uses. */
+export interface DevHooksSlot {
+  onOwner?: (owner: any) => void;
+  onGraph?: (value: any, owner: any) => void;
+  onUpdate?: () => void;
+}
+
+export type DevHooksListener = DevHooksSlot;
+
+export interface DevHooksHub {
+  /** Adds a listener. The returned function removes it. */
+  listen(listener: DevHooksListener): () => void;
+}
+
+/**
+ * Shares one set of dev hooks between every panel.
+ *
+ * Each panel used to install the hooks itself, keeping the hooks it found and
+ * putting them back when it stopped. When one panel started and another stopped
+ * in the same flush, the second put back hooks that no longer belonged there,
+ * and the first panel stopped seeing updates.
+ *
+ * The hub installs once and calls every listener. It keeps calling the hooks it
+ * found, so other tools sharing the slot still work, and puts them back only
+ * when the last listener leaves.
+ */
+export function createDevHooksHub(slot: DevHooksSlot): DevHooksHub {
+  const listeners = new Set<DevHooksListener>();
+  let original: DevHooksSlot | undefined;
+
+  function install(): void {
+    const found: DevHooksSlot = {
+      onOwner: slot.onOwner,
+      onGraph: slot.onGraph,
+      onUpdate: slot.onUpdate,
+    };
+    original = found;
+    slot.onOwner = (owner) => {
+      found.onOwner?.(owner);
+      for (const listener of listeners) listener.onOwner?.(owner);
+    };
+    slot.onGraph = (value, owner) => {
+      found.onGraph?.(value, owner);
+      for (const listener of listeners) listener.onGraph?.(value, owner);
+    };
+    slot.onUpdate = () => {
+      found.onUpdate?.();
+      for (const listener of listeners) listener.onUpdate?.();
+    };
+  }
+
+  function uninstall(): void {
+    if (!original) return;
+    slot.onOwner = original.onOwner;
+    slot.onGraph = original.onGraph;
+    slot.onUpdate = original.onUpdate;
+    original = undefined;
+  }
+
+  return {
+    listen(listener) {
+      listeners.add(listener);
+      if (!original) install();
+      return () => {
+        if (!listeners.delete(listener)) return;
+        if (listeners.size === 0) uninstall();
+      };
+    },
+  };
+}
+
+let shared: DevHooksHub | undefined;
+
+/** Listens to the dev hooks of solid-js. Does nothing outside a development build. */
+export function listenToDevHooks(listener: DevHooksListener): () => void {
+  if (!DEV) return () => {};
+  shared ??= createDevHooksHub(DEV.hooks);
+  return shared.listen(listener);
+}

src/dev-toolbar/ownership/registry.ts

@@ -1,4 +1,5 @@
 import { DEV } from 'solid-js';
+import { listenToDevHooks } from '../dev-hooks.js';
 import { buildOwnershipTree, EMPTY_TREE, type OwnershipTree, type RawNode } from './tree.js';
 
 let nextId = 1;
@@ -15,7 +16,7 @@ const collected =
     : undefined;
 
 const listeners = new Set<() => void>();
-let uninstall: (() => void) | undefined;
+let stopListening: (() => void) | undefined;
 let watchers = 0;
 let frame: number | undefined;
 /** An owner inside the toolbar. The walk climbs from here to the app root. */
@@ -52,49 +53,36 @@ function notify(): void {
 }
 
 /**
- * Installs the devtools hooks on the reactive runtime. Existing hooks are kept
- * and still called, so other tools sharing the slot keep working.
+ * Starts watching the reactive runtime. The hooks are shared with the other
+ * panels through one hub, so panels can start and stop in any order.
  */
 export function startOwnershipTracking(): () => void {
   if (!isOwnershipAvailable()) return () => {};
   watchers++;
-  if (uninstall) return release;
-
-  const hooks = DEV!.hooks;
-  const previousOwner = hooks.onOwner;
-  const previousGraph = hooks.onGraph;
-  const previousUpdate = hooks.onUpdate;
-
-  hooks.onOwner = (owner) => {
-    previousOwner?.(owner);
-    track(owner as RawNode);
-    notify();
-  };
-  hooks.onGraph = (value, owner) => {
-    previousGraph?.(value, owner);
-    if (owner) track(owner as RawNode);
-    notify();
-  };
-  hooks.onUpdate = () => {
-    previousUpdate?.();
-    notify();
-  };
-
-  uninstall = () => {
-    hooks.onOwner = previousOwner;
-    hooks.onGraph = previousGraph;
-    hooks.onUpdate = previousUpdate;
-    uninstall = undefined;
-    if (frame !== undefined) cancelAnimationFrame(frame);
-    frame = undefined;
-  };
+  stopListening ??= listenToDevHooks({
+    onOwner(owner) {
+      track(owner as RawNode);
+      notify();
+    },
+    onGraph(_value, owner) {
+      if (owner) track(owner as RawNode);
+      notify();
+    },
+    onUpdate() {
+      notify();
+    },
+  });
   return release;
 }
 
-/** Drops one watcher. The hooks come off once nothing watches any more. */
+/** Drops one watcher. Stops listening once nothing watches any more. */
 function release(): void {
   watchers = Math.max(0, watchers - 1);
-  if (watchers === 0) uninstall?.();
+  if (watchers > 0 || !stopListening) return;
+  stopListening();
+  stopListening = undefined;
+  if (frame !== undefined) cancelAnimationFrame(frame);
+  frame = undefined;
 }
 
 /** Calls `listener` after the tree changed, at most once per frame. */

src/dev-toolbar/reactivity/registry.ts

@@ -1,4 +1,5 @@
 import { DEV } from 'solid-js';
+import { listenToDevHooks } from '../dev-hooks.js';
 
 // Flag bits used by @solidjs/signals. They are internal to the runtime, so the
 // values are copied here and every read is defensive.
@@ -99,7 +100,7 @@ const collected =
     : undefined;
 
 const listeners = new Set<() => void>();
-let uninstall: (() => void) | undefined;
+let stopListening: (() => void) | undefined;
 let watchers = 0;
 let frame: number | undefined;
 /** An owner inside the toolbar. The graph walk climbs from here to the app root. */
@@ -141,46 +142,29 @@ function notify(): void {
 }
 
 /**
- * Installs the devtools hooks on the reactive runtime. Existing hooks are kept
- * and still called, so other tools sharing the slot keep working.
+ * Starts watching the reactive runtime. The hooks are shared with the other
+ * panels through one hub, so panels can start and stop in any order.
  */
 export function startReactivityTracking(): () => void {
   if (!isReactivityAvailable()) return () => {};
   watchers++;
-  if (uninstall) return release;
-
-  const hooks = DEV!.hooks;
-  const previousOwner = hooks.onOwner;
-  const previousGraph = hooks.onGraph;
-  const previousUpdate = hooks.onUpdate;
-
-  hooks.onOwner = (owner) => {
-    previousOwner?.(owner);
-    track(owner as RawNode);
-    notify();
-  };
-  hooks.onGraph = (value, owner) => {
-    previousGraph?.(value, owner);
-    if (value && typeof value === 'object') {
-      if (owner) signalOwners.set(value, owner as RawNode);
-      track(value as RawNode);
-    }
-    notify();
-  };
-  hooks.onUpdate = () => {
-    previousUpdate?.();
-    recordUpdates();
-    notify();
-  };
-
-  uninstall = () => {
-    hooks.onOwner = previousOwner;
-    hooks.onGraph = previousGraph;
-    hooks.onUpdate = previousUpdate;
-    uninstall = undefined;
-    if (frame !== undefined) cancelAnimationFrame(frame);
-    frame = undefined;
-  };
+  stopListening ??= listenToDevHooks({
+    onOwner(owner) {
+      track(owner as RawNode);
+      notify();
+    },
+    onGraph(value, owner) {
+      if (value && typeof value === 'object') {
+        if (owner) signalOwners.set(value, owner as RawNode);
+        track(value as RawNode);
+      }
+      notify();
+    },
+    onUpdate() {
+      recordUpdates();
+      notify();
+    },
+  });
   return release;
 }
 
@@ -197,10 +181,14 @@ function recordUpdates(): void {
   }
 }
 
-/** Drops one watcher. The hooks come off once nothing watches any more. */
+/** Drops one watcher. Stops listening once nothing watches any more. */
 function release(): void {
   watchers = Math.max(0, watchers - 1);
-  if (watchers === 0) uninstall?.();
+  if (watchers > 0 || !stopListening) return;
+  stopListening();
+  stopListening = undefined;
+  if (frame !== undefined) cancelAnimationFrame(frame);
+  frame = undefined;
 }
 
 /** Calls `listener` after the graph changed, at most once per frame. */

tests/e2e/devtools.spec.ts

@@ -228,6 +228,17 @@ test('maps the ownership tree', async ({ page }) => {
       return Math.abs(nodeBox.x + nodeBox.width / 2 - (canvasBox.x + canvasBox.width / 2));
     })
     .toBeLessThan(4);
+
+  // The graph keeps watching after the jump. The ownership panel stops in the
+  // same flush the graph starts, which used to take the graph's hooks away.
+  // The panel covers the page, so the click goes straight to the element.
+  await page.evaluate(() => (document.querySelector('#increment-count') as HTMLElement).click());
+  await expect(
+    page
+      .locator('[data-solid-reactivity-node]')
+      .filter({ hasText: /^count/ })
+      .first(),
+  ).toContainText('1');
 });
 
 test('mounts once and disposes', async ({ page }) => {