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
This commit is contained in:
Bendik Aagaard Lynghaug
2026-09-08 18:57:51 +02:00
co-authored by Claude Fable 5
parent d22f996596
commit fd1d05cea0
4 changed files with 152 additions and 1 deletions
+51
View File
@@ -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
}
})