Bendik Aagaard LynghaugandClaude Fable 5
63b56144a5
Three end-to-end scenarios against a static+SSR test server: the zero-build page (import map + native ESM, no bundler), the SSR page (rendered content in the raw response, live after hydration, no mismatch warnings), and adoption (an expando on the server-rendered node survives a real render). Renders are raf-batched so assertions poll. Real Chromium flushed out three fixes happy-dom couldn't see: - nanoraf called an extracted requestAnimationFrame bare — Illegal invocation under strict-mode ESM (sloppy CJS had masked it); wrapped. - the counter example only routed '/', so serving it from any subpath threw; it now has a wildcard fallback. - hydration mismatch detection is now whitespace-insensitive (the parser reparents whitespace, e.g. text after </body>), and page scripts belong in <head> when a view owns <body> — same convention bankai v9 used. CI gets an e2e job with chromium-headless-shell. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
39 lines
1.0 KiB
JavaScript
39 lines
1.0 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) {
|
|
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')
|
|
})
|
|
}
|