Bendik Aagaard LynghaugandClaude Fable 5
ce1ec9e4a9
Packages renamed to the @uhhm scope (@uhhm/buuh, @uhhm/buuh-html, @uhhm/buuh-component, @uhhm/buuh-devtools, @uhhm/buuh-migrate, @uhhm/bankai). Scoping is load-bearing twice over: npm routes registries per scope so @uhhm/* resolves against project.uhhm.no while everything else stays on npmjs, and it means this fork never squats upstream's names anywhere. The codemod now migrates choo v7 apps to the @uhhm names. README rewritten with the fork framing and full upstream credit; the choojs RFC moves to docs/upstream-rfc-draft.md, in the drawer for if this work ever goes home. API unchanged — choo() is still choo(). Also: Gitea Actions CI + release workflows (npm publish to the uhhm registry on tag push, CDN bundle uploaded as a generic package), npm run bundle producing dist-cdn/buuh.js (the whole framework as one minified ES module for import-map use), docs/publishing.md explaining what Gitea Packages is (a real npm registry) and is not (a CDN — serve the bundle from a static host with module-safe MIME instead), and onload.js constructing window.MutationObserver to match its own guard (surfaced by smoke-testing the bundle outside a full browser). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
// 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 '@uhhm/buuh-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 '☰'
|
|
}
|
|
}
|
|
}
|
|
}
|