0.11.2 • Published 4d ago

what-devtools

Licence

MIT

Version

0.11.2

Deps

Size

36 kB

Vulns

Weekly

Summary Dependency Versions

what-devtools

Development tools for What Framework. Provides runtime instrumentation to inspect signals, effects, and components. Exposes a window.__WHAT_DEVTOOLS__ global for console-based debugging and a subscribable event system for custom tooling.

Install

npm install what-devtools --save-dev

Quick Start

Call installDevTools() once at app startup:

import { installDevTools } from 'what-devtools';

installDevTools();

Then inspect your app in the browser console:

__WHAT_DEVTOOLS__.signals      // All live signals with names and values
__WHAT_DEVTOOLS__.effects      // All active effects
__WHAT_DEVTOOLS__.components   // All mounted components
__WHAT_DEVTOOLS__.getSnapshot() // Full state snapshot

Event Subscription

Subscribe to real-time devtools events for custom tooling or a UI panel:

import { subscribe } from 'what-devtools';

const unsub = subscribe((event, data) => {
  console.log(event, data);
  // Events:
  //   'signal:created'    { id, name, ref, createdAt }
  //   'signal:updated'    { id, name, value }
  //   'signal:disposed'   { id }
  //   'effect:created'    { id, name, createdAt }
  //   'effect:disposed'   { id }
  //   'component:mounted'   { id, name, element, mountedAt }
  //   'component:unmounted' { id }
});

DevPanel Component

A built-in panel component for visual debugging (import separately):

import DevPanel from 'what-devtools/panel';

API

Export	Description
`installDevTools(core?)`	Initialize devtools and wire into what-core's hooks
`subscribe(fn)`	Subscribe to devtools events. Returns unsubscribe function
`getSnapshot()`	Get a snapshot of all signals, effects, and components
`registerSignal(sig, name?)`	Manually register a signal
`notifySignalUpdate(sig)`	Notify devtools of a signal value change
`unregisterSignal(sig)`	Unregister a signal
`registerEffect(e, name?)`	Manually register an effect
`unregisterEffect(e)`	Unregister an effect
`registerComponent(name, element)`	Register a component mount
`unregisterComponent(id)`	Unregister a component
`signals`	Map of all tracked signals
`effects`	Map of all tracked effects
`components`	Map of all tracked components

Sub-path Exports

Path	Contents
`what-devtools`	Instrumentation API
`what-devtools/panel`	DevPanel UI component

License

MIT