what-devtools 0.5.3

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "what-devtools",
+  "version": "0.5.3",
+  "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"
+  },
+  "files": [
+    "src"
+  ],
+  "keywords": [
+    "what",
+    "framework",
+    "devtools",
+    "signals",
+    "debug",
+    "inspector"
+  ],
+  "peerDependencies": {
+    "what-core": "^0.5.3"
+  },
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zvndev/what-fw"
+  },
+  "bugs": {
+    "url": "https://github.com/zvndev/what-fw/issues"
+  },
+  "homepage": "https://whatframework.dev"
+}

package/src/DevPanel.jsx

@@ -0,0 +1,170 @@
+/**
+ * What Framework DevPanel
+ *
+ * A drop-in floating UI panel that shows live signal values,
+ * active effects, and mounted components during development.
+ *
+ * Usage:
+ *   import { DevPanel } from 'what-devtools/panel';
+ *   // Add to your app:
+ *   <DevPanel />
+ *
+ * The panel is draggable and can be collapsed. It auto-updates
+ * when signals change.
+ */
+
+import { signal, effect, onCleanup } from 'what-core';
+import { subscribe, getSnapshot, installDevTools } from './index.js';
+
+export function DevPanel() {
+  // Auto-install devtools if not already done
+  installDevTools();
+
+  const isOpen = signal(false);
+  const activeTab = signal('signals');
+  const snapshot = signal(getSnapshot());
+
+  // Subscribe to devtools events and refresh
+  const unsub = subscribe(() => {
+    snapshot(getSnapshot());
+  });
+
+  // Also poll every 500ms for signal value changes (cheap — just reads .peek())
+  const interval = setInterval(() => {
+    snapshot(getSnapshot());
+  }, 500);
+
+  onCleanup(() => {
+    unsub();
+    clearInterval(interval);
+  });
+
+  const panelStyle = () => isOpen()
+    ? 'position:fixed;bottom:0;right:0;width:360px;max-height:50vh;z-index:99998;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#1a1a2e;color:#e0e0e0;border:1px solid #2a2a4a;border-radius:12px 0 0 0;box-shadow:0 -4px 24px rgba(0,0,0,0.3);display:flex;flex-direction:column;overflow:hidden;'
+    : 'display:none;';
+
+  const tabStyle = (tab) => () => {
+    const isActive = activeTab() === tab;
+    return `padding:6px 12px;border:none;background:${isActive ? '#2a2a4a' : 'transparent'};color:${isActive ? '#fff' : '#6a6a8a'};cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;border-radius:4px;`;
+  };
+
+  const renderSignals = () => {
+    const data = snapshot();
+    if (!data.signals.length) {
+      return <div style="padding:12px;color:#4a4a6a;">No signals tracked</div>;
+    }
+    return (
+      <div style="padding:8px;">
+        {data.signals.map(s => (
+          <div key={s.id} style="display:flex;justify-content:space-between;align-items:center;padding:4px 8px;border-bottom:1px solid #2a2a4a;">
+            <span style="color:#818cf8;">{s.name}</span>
+            <span style="color:#a0a0c0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
+              {formatValue(s.value)}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderEffects = () => {
+    const data = snapshot();
+    if (!data.effects.length) {
+      return <div style="padding:12px;color:#4a4a6a;">No effects tracked</div>;
+    }
+    return (
+      <div style="padding:8px;">
+        {data.effects.map(e => (
+          <div key={e.id} style="padding:4px 8px;border-bottom:1px solid #2a2a4a;">
+            <span style="color:#fbbf24;">{e.name}</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const renderComponents = () => {
+    const data = snapshot();
+    if (!data.components.length) {
+      return <div style="padding:12px;color:#4a4a6a;">No components tracked</div>;
+    }
+    return (
+      <div style="padding:8px;">
+        {data.components.map(c => (
+          <div key={c.id} style="padding:4px 8px;border-bottom:1px solid #2a2a4a;">
+            <span style="color:#34d399;">&lt;{c.name} /&gt;</span>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {/* Toggle button */}
+      <button
+        onclick={() => isOpen(v => !v)}
+        style="position:fixed;bottom:12px;right:12px;z-index:99999;width:36px;height:36px;border-radius:8px;border:1px solid #2a2a4a;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:800;font-size:14px;cursor:pointer;font-family:ui-monospace,monospace;box-shadow:0 4px 12px rgba(37,99,235,0.3);"
+        title="What Framework DevTools"
+      >
+        W
+      </button>
+
+      {/* Panel */}
+      <div style={panelStyle}>
+        {/* Header */}
+        <div style="display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #2a2a4a;background:#16163a;">
+          <div style="display:flex;align-items:center;gap:8px;">
+            <span style="font-weight:700;font-size:12px;color:#818cf8;">What DevTools</span>
+          </div>
+          <button
+            onclick={() => isOpen(false)}
+            style="background:none;border:none;color:#6a6a8a;cursor:pointer;font-size:14px;"
+          >
+            x
+          </button>
+        </div>
+
+        {/* Tabs */}
+        <div style="display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid #2a2a4a;">
+          <button style={tabStyle('signals')} onclick={() => activeTab('signals')}>
+            Signals ({() => snapshot().signals.length})
+          </button>
+          <button style={tabStyle('effects')} onclick={() => activeTab('effects')}>
+            Effects ({() => snapshot().effects.length})
+          </button>
+          <button style={tabStyle('components')} onclick={() => activeTab('components')}>
+            Components ({() => snapshot().components.length})
+          </button>
+        </div>
+
+        {/* Content */}
+        <div style="overflow-y:auto;flex:1;">
+          {() => {
+            const tab = activeTab();
+            if (tab === 'signals') return renderSignals();
+            if (tab === 'effects') return renderEffects();
+            return renderComponents();
+          }}
+        </div>
+      </div>
+    </>
+  );
+}
+
+function formatValue(value) {
+  if (value === null) return 'null';
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'string') return `"${value.length > 30 ? value.slice(0, 30) + '...' : value}"`;
+  if (typeof value === 'object') {
+    try {
+      const str = JSON.stringify(value);
+      return str.length > 40 ? str.slice(0, 40) + '...' : str;
+    } catch {
+      return '[Object]';
+    }
+  }
+  return String(value);
+}
+
+export default DevPanel;

package/src/index.js

@@ -0,0 +1,204 @@
+/**
+ * What Framework DevTools
+ *
+ * Runtime instrumentation for debugging signals, effects, and components.
+ * In dev mode, exposes a `window.__WHAT_DEVTOOLS__` global for inspection.
+ *
+ * Usage:
+ *   import { installDevTools } from 'what-devtools';
+ *   installDevTools();  // Call once at app entry
+ *
+ * Then inspect in console:
+ *   __WHAT_DEVTOOLS__.signals      // Map of all live signals
+ *   __WHAT_DEVTOOLS__.components   // Map of mounted components
+ *   __WHAT_DEVTOOLS__.effects      // Map of active effects
+ */
+
+let installed = false;
+let signalId = 0;
+let effectId = 0;
+let componentId = 0;
+
+// Registries
+const signals = new Map();    // id → { name, value, subs, createdAt }
+const effects = new Map();    // id → { name, deps, createdAt }
+const components = new Map(); // id → { name, mountedAt, signals: [], effects: [] }
+
+// Event listeners for the DevPanel
+const listeners = new Set();
+
+function emit(event, data) {
+  for (const fn of listeners) {
+    try { fn(event, data); } catch {}
+  }
+}
+
+/**
+ * Register a signal with the devtools.
+ * Called from reactive.js __DEV__ hooks.
+ */
+export function registerSignal(sig, name) {
+  if (!installed) return;
+  const id = ++signalId;
+  const entry = {
+    id,
+    name: name || `signal_${id}`,
+    ref: sig,
+    createdAt: Date.now(),
+  };
+  signals.set(id, entry);
+  sig._devId = id;
+  emit('signal:created', entry);
+  return id;
+}
+
+/**
+ * Notify devtools that a signal value changed.
+ */
+export function notifySignalUpdate(sig) {
+  if (!installed) return;
+  const id = sig._devId;
+  if (id == null) return;
+  const entry = signals.get(id);
+  if (entry) {
+    emit('signal:updated', { id, name: entry.name, value: sig.peek() });
+  }
+}
+
+/**
+ * Unregister a signal (when disposed via createRoot cleanup).
+ */
+export function unregisterSignal(sig) {
+  if (!installed) return;
+  const id = sig._devId;
+  if (id == null) return;
+  signals.delete(id);
+  emit('signal:disposed', { id });
+}
+
+/**
+ * Register an effect with the devtools.
+ */
+export function registerEffect(e, name) {
+  if (!installed) return;
+  const id = ++effectId;
+  const entry = {
+    id,
+    name: name || e.fn?.name || `effect_${id}`,
+    createdAt: Date.now(),
+  };
+  effects.set(id, entry);
+  e._devId = id;
+  emit('effect:created', entry);
+  return id;
+}
+
+/**
+ * Unregister an effect.
+ */
+export function unregisterEffect(e) {
+  if (!installed) return;
+  const id = e._devId;
+  if (id == null) return;
+  effects.delete(id);
+  emit('effect:disposed', { id });
+}
+
+/**
+ * Register a component mount.
+ */
+export function registerComponent(name, element) {
+  if (!installed) return;
+  const id = ++componentId;
+  const entry = {
+    id,
+    name: name || 'Anonymous',
+    element,
+    mountedAt: Date.now(),
+  };
+  components.set(id, entry);
+  emit('component:mounted', entry);
+  return id;
+}
+
+/**
+ * Unregister a component (unmount).
+ */
+export function unregisterComponent(id) {
+  if (!installed) return;
+  components.delete(id);
+  emit('component:unmounted', { id });
+}
+
+/**
+ * Subscribe to devtools events.
+ * Returns an unsubscribe function.
+ */
+export function subscribe(fn) {
+  listeners.add(fn);
+  return () => listeners.delete(fn);
+}
+
+/**
+ * Get a snapshot of all tracked state.
+ */
+export function getSnapshot() {
+  const signalList = [];
+  for (const [id, entry] of signals) {
+    signalList.push({
+      id,
+      name: entry.name,
+      value: entry.ref.peek(),
+    });
+  }
+
+  const effectList = [];
+  for (const [id, entry] of effects) {
+    effectList.push({ id, name: entry.name });
+  }
+
+  const componentList = [];
+  for (const [id, entry] of components) {
+    componentList.push({ id, name: entry.name });
+  }
+
+  return { signals: signalList, effects: effectList, components: componentList };
+}
+
+/**
+ * Install devtools. Call once at app startup.
+ * Wires into what-core's __DEV__ hooks and exposes `window.__WHAT_DEVTOOLS__`.
+ */
+export function installDevTools() {
+  if (installed) return;
+  installed = true;
+
+  // Wire into what-core's reactive system
+  try {
+    import('what-core').then(core => {
+      if (core.__setDevToolsHooks) {
+        core.__setDevToolsHooks({
+          onSignalCreate: (sig) => registerSignal(sig),
+          onSignalUpdate: (sig) => notifySignalUpdate(sig),
+          onEffectCreate: (e) => registerEffect(e),
+          onEffectDispose: (e) => unregisterEffect(e),
+        });
+      }
+    }).catch(() => {
+      // what-core not available — devtools still work via manual registration
+    });
+  } catch {}
+
+  if (typeof window !== 'undefined') {
+    window.__WHAT_DEVTOOLS__ = {
+      get signals() { return getSnapshot().signals; },
+      get effects() { return getSnapshot().effects; },
+      get components() { return getSnapshot().components; },
+      getSnapshot,
+      subscribe,
+      _registries: { signals, effects, components },
+    };
+  }
+}
+
+export { signals, effects, components };