Bendik Aagaard LynghaugandClaude Fable 5
99f9da1e3b
- style.css convention: <entry dir>/style.css is imported by the virtual client entry (CSS is a client concern; server code never sees it — the v8 answer to sheetify), extracted and hashed by Vite, stylesheet-linked in the head and preloaded via Early Hints. Counter example styled. - SSR <title> from state: the server reads the first stream chunk before writing the head, by which point stores and the first render slice have run — DOMTitleChange emits land in the document title. Counter emits. - bankai build --prerender /,/about renders routes through the same toStream path to static <route>/index.html (precompressed, precached by the service worker, served with Early Hints). - bankai serve --h2: HTTP/2 with a generated local cert (openssl, cached; allowHTTP1) — browsers only act on Early Hints over h2/h3. Tested with a real h2 client observing the 103 interim response. - npm run size: the framework wire-size budget, enforced in CI. Whole framework (core + html engine + morph + hydrate) is 7.97 kB min+gzip / 7.15 kB brotli; budget 8.5 kB with the v7 '4kb' context documented (that number excluded the html engine, which lived in the browserify transform). 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
|
|
// @choojs/html to the DOM renderer), Node stringifies it (same specifier
|
|
// resolves to the string renderer). That's the isomorphic contract.
|
|
|
|
import choo from '@choojs/core'
|
|
import html from '@choojs/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')
|
|
})
|
|
}
|