feat(devtools): add @choojs/devtools — window.choo console tooling

Carries forward the choo-devtools 3.x essentials: live state handle,
emit-from-console, event log, nanotiming measures via PerformanceObserver,
state copy(), help(). No-op on the server; verbose logging opt-in via
localStorage.CHOO_DEVTOOLS_VERBOSE.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd

package.json

@@ -11,7 +11,7 @@
     "node": ">=24"
   },
   "scripts": {
-    "test": "node --test packages/core/test/ packages/html/test/ packages/component/test/",
+    "test": "node --test packages/core/test/ packages/html/test/ packages/component/test/ packages/devtools/test/ packages/migrate/test/",
     "test:e2e": "node --test test/e2e/",
     "bench": "node bench/render.js",
     "bench:browser": "node bench/real-browser.js"

packages/devtools/index.js

@@ -0,0 +1,78 @@
+// Console devtools for choo v8, carrying forward the essentials of
+// choo-devtools 3.x (MIT): a window.choo handle with the live state, an
+// event log, emit-from-the-console, and render timings via the
+// PerformanceObserver watching nanotiming's measures. Usage:
+//
+//   import devtools from '@choojs/devtools'
+//   app.use(devtools())
+//
+// The store is a no-op on the server and (by default) stays quiet in the
+// console; set localStorage.CHOO_DEVTOOLS_VERBOSE = 'true' to log every
+// event as it happens.
+
+const MAX_LOG = 1000
+
+export default function devtools (opts) {
+  opts = opts || {}
+  const max = opts.max || MAX_LOG
+
+  return function devtoolsStore (state, emitter, app) {
+    if (typeof window === 'undefined') return
+
+    const log = []
+    let verbose = false
+    try {
+      verbose = window.localStorage.CHOO_DEVTOOLS_VERBOSE === 'true'
+    } catch (e) {}
+
+    emitter.on('*', function (name, ...data) {
+      const entry = { name: String(name), data, at: Date.now() }
+      log.push(entry)
+      if (log.length > max) log.shift()
+      if (verbose && name !== state.events.RENDER) {
+        console.debug('choo: %s', entry.name, ...data)
+      }
+    })
+
+    const timings = []
+    if (typeof PerformanceObserver === 'function') {
+      try {
+        const observer = new PerformanceObserver(function (list) {
+          for (const entry of list.getEntries()) {
+            if (!/\[\d+\]$/.test(entry.name)) continue // nanotiming measures only
+            timings.push({ name: entry.name.replace(/ \[\d+\]$/, ''), duration: entry.duration })
+            if (timings.length > max) timings.shift()
+          }
+        })
+        observer.observe({ entryTypes: ['measure'] })
+      } catch (e) {}
+    }
+
+    window.choo = {
+      state,
+      emit: emitter.emit.bind(emitter),
+      emitter,
+      app,
+      log,
+      timings,
+      // JSON snapshot of state (cache/functions excluded via toJSON)
+      copy () {
+        const json = JSON.stringify(state, null, 2)
+        if (navigator.clipboard) navigator.clipboard.writeText(json)
+        return json
+      },
+      help () {
+        console.log([
+          'window.choo — choo devtools',
+          '  choo.state       live app state',
+          '  choo.emit(name, …data)  fire an event',
+          '  choo.log         last ' + max + ' events',
+          '  choo.timings     nanotiming render measures',
+          '  choo.copy()      state as JSON (and to clipboard)',
+          "  localStorage.CHOO_DEVTOOLS_VERBOSE = 'true'  log every event"
+        ].join('\n'))
+        return '☰'
+      }
+    }
+  }
+}

packages/devtools/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@choojs/devtools",
+  "version": "8.0.0-dev",
+  "description": "Console devtools for choo: window.choo, event log, perf timings",
+  "type": "module",
+  "exports": {
+    ".": "./index.js"
+  },
+  "files": [
+    "index.js"
+  ],
+  "engines": {
+    "node": ">=24"
+  },
+  "repository": "choojs/choo",
+  "keywords": [
+    "choo",
+    "devtools",
+    "debug"
+  ],
+  "license": "MIT"
+}

packages/devtools/test/devtools.test.js

@@ -0,0 +1,51 @@
+import { test, before } from 'node:test'
+import assert from 'node:assert'
+import { Window } from 'happy-dom'
+
+let choo, html, devtools
+
+before(async () => {
+  const win = new Window({ url: 'http://localhost/' })
+  globalThis.window = win
+  globalThis.document = win.document
+  globalThis.requestAnimationFrame = win.requestAnimationFrame.bind(win)
+  ;({ default: choo } = await import('@choojs/core'))
+  ;({ default: html } = await import('@choojs/html/browser'))
+  ;({ default: devtools } = await import('../index.js'))
+})
+
+test('devtools exposes window.choo with live state, log and emit', async () => {
+  const app = choo()
+  app.use(devtools())
+  app.use((state, emitter) => {
+    state.count = 0
+    emitter.on('bump', (n) => { state.count += n })
+  })
+  app.route('/', (state) => html`<div>${state.count}</div>`)
+  app.start()
+
+  assert.ok(window.choo, 'window.choo exists')
+  assert.strictEqual(window.choo.state.count, 0, 'live state exposed')
+
+  window.choo.emit('bump', 2)
+  assert.strictEqual(window.choo.state.count, 2, 'emit from the console handle works')
+  assert.ok(window.choo.log.some((e) => e.name === 'bump'), 'events land in the log')
+  assert.strictEqual(typeof window.choo.help, 'function')
+
+  const json = JSON.parse(window.choo.copy())
+  assert.strictEqual(json.count, 2, 'copy() serializes state')
+  assert.strictEqual(json.cache, null, 'state.cache not serialized')
+})
+
+test('devtools is a no-op on the server', async () => {
+  // fresh import in a windowless world is covered by the guard: calling
+  // the store with no window must not throw or touch globals
+  const store = devtools()
+  const hadWindow = globalThis.window
+  delete globalThis.window
+  try {
+    assert.doesNotThrow(() => store({}, { on () {} }, {}))
+  } finally {
+    globalThis.window = hadWindow
+  }
+})