what-devtools 0.12.4 → 0.13.1

package/package.json

@@ -1,12 +1,18 @@
 {
   "name": "what-devtools",
-  "version": "0.12.4",
+  "version": "0.13.1",
   "description": "Dev tools for What Framework — signal inspector, component tree, effect graph",
   "type": "module",
   "main": "src/index.js",
   "exports": {
-    ".": "./src/index.js",
-    "./panel": "./src/DevPanel.jsx"
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.js"
+    },
+    "./panel": {
+      "types": "./src/DevPanel.d.ts",
+      "default": "./src/DevPanel.jsx"
+    }
   },
   "files": [
     "src"
@@ -20,7 +26,7 @@
     "inspector"
   ],
   "peerDependencies": {
-    "what-core": "^0.12.4"
+    "what-core": "^0.13.1"
   },
   "author": "ZVN DEV (https://zvndev.com)",
   "license": "MIT",
@@ -31,5 +37,6 @@
   "bugs": {
     "url": "https://github.com/CelsianJs/what-framework/issues"
   },
-  "homepage": "https://whatfw.com"
+  "homepage": "https://whatfw.com",
+  "types": "./src/index.d.ts"
 }

package/src/DevPanel.d.ts

@@ -0,0 +1,9 @@
+// Types for `what-devtools/panel`.
+import type { VNode } from 'what-core';
+
+/**
+ * The in-page devtools panel. Mount it anywhere in a dev build; it reads from
+ * the same stores `installDevTools()` populates.
+ */
+export function DevPanel(): VNode<any> | null;
+export default DevPanel;

package/src/DevPanel.jsx

@@ -19,7 +19,7 @@
  * Works WITHOUT MCP devtools connected.
  */
 
-import { signal, effect, onCleanup } from 'what-core';
+import { signal, onCleanup } from 'what-core';
 import { subscribe, getSnapshot, getErrors, installDevTools, _suppressDevtools } from './index.js';
 
 export function DevPanel() {
@@ -111,11 +111,10 @@ function DevPanelBody() {
 
   // --- Tab: Overview ---
   const renderOverview = () => {
-    const data = snapshot();
-    const health = getHealth();
-    const errs = recentErrors();
-    const recentErrs = errs.slice(-3).reverse();
-
+    // Everything below reads snapshot()/getHealth()/recentErrors() inside a
+    // thunk so it stays reactive. Four eager copies used to be taken here and
+    // then shadowed; had anything rendered them directly it would have frozen
+    // at first paint.
     return (
       <div style="padding:12px;">
         {/* Health indicator */}

package/src/index.d.ts

@@ -0,0 +1,114 @@
+// Hand-written to match src/index.js. `what-devtools` is imported
+// programmatically (`installDevTools`, `getSnapshot`) and by the MCP bridge,
+// so TypeScript consumers need these; the package shipped without any types
+// until 0.13.1.
+
+/** A tracked signal, as returned by {@link getSnapshot}. */
+export interface DevToolsSignal {
+  id: number;
+  name: string;
+  /** Read with `peek()`, so taking a snapshot never creates a subscription. */
+  value: unknown;
+  componentId: number | null;
+}
+
+/** A tracked effect, as returned by {@link getSnapshot}. */
+export interface DevToolsEffect {
+  id: number;
+  name: string;
+  depSignalIds: number[];
+  runCount: number;
+  /** `Date.now()` of the last run, or null if it has not run yet. */
+  lastRunAt: number | null;
+  componentId: number | null;
+}
+
+/** A mounted component, as returned by {@link getSnapshot}. */
+export interface DevToolsComponent {
+  id: number;
+  name: string;
+  parentId: number | null;
+}
+
+/** A captured error. The buffer holds the most recent 100. */
+export interface DevToolsError {
+  message: string;
+  stack: string | null;
+  /** Where it came from, e.g. 'effect' or 'unknown'. */
+  type: string;
+  effectId: number | null;
+  timestamp: number;
+}
+
+export interface DevToolsSnapshot {
+  signals: DevToolsSignal[];
+  effects: DevToolsEffect[];
+  components: DevToolsComponent[];
+  errors: DevToolsError[];
+}
+
+export type DevToolsEvent =
+  | 'signal:created'
+  | 'signal:updated'
+  | 'signal:disposed'
+  | 'effect:created'
+  | 'effect:run'
+  | 'effect:disposed'
+  | 'component:mounted'
+  | 'component:unmounted'
+  | 'error:captured';
+
+/** Minimal shape of a what-core signal accessor, as devtools sees it. */
+export interface TrackedSignal<T = unknown> {
+  (): T;
+  peek(): T;
+}
+
+/**
+ * Run `fn` with devtools registration suppressed, so framework-internal
+ * signals and effects created inside it are not reported to the panel.
+ */
+export function _suppressDevtools<T>(fn: () => T): T;
+
+/**
+ * Convert a value to something structured-cloneable and depth-limited, for
+ * sending over the MCP bridge.
+ */
+export function safeSerialize(value: unknown, depth?: number, seen?: WeakSet<object>): unknown;
+
+export function registerSignal(sig: TrackedSignal, name?: string): number;
+export function notifySignalUpdate(sig: TrackedSignal): void;
+export function unregisterSignal(sig: TrackedSignal): void;
+
+export function registerEffect(e: object, name?: string): number;
+export function unregisterEffect(e: object): void;
+
+export function registerComponent(
+  name: string,
+  element: Node | null,
+  parentDevId?: number | null,
+): number;
+export function unregisterComponent(id: number): void;
+
+/** Subscribe to devtools events. Returns an unsubscribe function. */
+export function subscribe(
+  fn: (event: DevToolsEvent, payload: unknown) => void,
+): () => void;
+
+export function getSnapshot(opts?: { includeInternal?: boolean }): DevToolsSnapshot;
+
+/** Captured errors, optionally only those after a `Date.now()` timestamp. */
+export function getErrors(opts?: { since?: number }): DevToolsError[];
+
+/**
+ * Install devtools. Call once at app startup. Wires into what-core's `__DEV__`
+ * hooks and exposes `window.__WHAT_DEVTOOLS__`. Idempotent.
+ *
+ * @param core Optional what-core module. Dynamically imported when omitted.
+ */
+export function installDevTools(core?: object): void;
+
+export const signals: Map<number, { name: string; ref: TrackedSignal; createdAt: number; internal?: boolean }>;
+export const effects: Map<number, { name: string; createdAt: number; depSignalIds: number[]; runCount: number; lastRunAt: number | null }>;
+export const components: Map<number, { name: string; element: Node | null; mountedAt: number; parentId: number | null }>;
+export const errors: DevToolsError[];

package/src/index.js

@@ -141,9 +141,11 @@ export function safeSerialize(value, depth = 0, seen) {
 
   // DOM nodes
   if (typeof Node !== 'undefined' && value instanceof Node) {
+    // id/className live on Element, not Node; a text or comment node has neither.
+    const el = /** @type {Element} */ (/** @type {unknown} */ (value));
     const tag = value.nodeName?.toLowerCase() || 'node';
-    const id = value.id ? `#${value.id}` : '';
-    const cls = value.className ? `.${String(value.className).split(' ')[0]}` : '';
+    const id = el.id ? `#${el.id}` : '';
+    const cls = el.className ? `.${String(el.className).split(' ')[0]}` : '';
     return `[DOM: <${tag}${id}${cls}>]`;
   }