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
41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
// The classic choo counter. This one module is the whole app, and both
|
|
// sides consume it: the browser mounts it (import map resolves
|
|
// @uhhm/buuh-html to the DOM renderer), Node stringifies it (same specifier
|
|
// resolves to the string renderer). That's the isomorphic contract.
|
|
|
|
import choo from '@uhhm/buuh'
|
|
import html from '@uhhm/buuh-html'
|
|
|
|
export default function createApp () {
|
|
const app = choo()
|
|
app.use(countStore)
|
|
app.route('/', mainView)
|
|
// the demo gets served from arbitrary subpaths (npx serve ., test
|
|
// servers); a wildcard fallback makes it mount anywhere
|
|
app.route('*', mainView)
|
|
return app
|
|
}
|
|
|
|
function mainView (state, emit) {
|
|
emit(state.events.DOMTITLECHANGE, `count is ${state.count}`)
|
|
|
|
return html`
|
|
<body>
|
|
<h1>count is ${state.count}</h1>
|
|
<button onclick=${onclick}>Increment</button>
|
|
</body>
|
|
`
|
|
|
|
function onclick () {
|
|
emit('increment', 1)
|
|
}
|
|
}
|
|
|
|
function countStore (state, emitter) {
|
|
state.count = state.count || 0
|
|
emitter.on('increment', function (count) {
|
|
state.count += count
|
|
emitter.emit('render')
|
|
})
|
|
}
|