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
97 lines
3.2 KiB
JavaScript
97 lines
3.2 KiB
JavaScript
// choo.toStream(): web-standard streaming SSR with prefetch and lazy routes.
|
|
|
|
import { test } from 'node:test'
|
|
import assert from 'node:assert'
|
|
|
|
import html from '@uhhm/buuh-html'
|
|
import choo, { lazy } from '@uhhm/buuh'
|
|
|
|
const wait = (ms, value) => new Promise((resolve) => setTimeout(() => resolve(value), ms))
|
|
|
|
async function readAll (stream) {
|
|
const decoder = new TextDecoder()
|
|
const chunks = []
|
|
for await (const chunk of stream) chunks.push(decoder.decode(chunk, { stream: true }))
|
|
return chunks
|
|
}
|
|
|
|
test('toStream matches toString for a plain sync app', async () => {
|
|
const makeApp = () => {
|
|
const app = choo()
|
|
app.route('/', (state) => html`<div><h1>hi</h1></div>`)
|
|
return app
|
|
}
|
|
const chunks = await readAll(makeApp().toStream('/'))
|
|
assert.strictEqual(chunks.join(''), makeApp().toString('/'))
|
|
})
|
|
|
|
test('returns a web ReadableStream', () => {
|
|
const app = choo()
|
|
app.route('/', () => html`<div></div>`)
|
|
assert.ok(app.toStream('/') instanceof ReadableStream)
|
|
})
|
|
|
|
test('stores can defer rendering with state.prefetch promises', async () => {
|
|
const app = choo()
|
|
app.use((state) => {
|
|
state.user = null
|
|
state.prefetch.push(wait(10, null).then(() => { state.user = 'bendik' }))
|
|
})
|
|
app.route('/', (state) => html`<p>hello ${state.user}</p>`)
|
|
|
|
const chunks = await readAll(app.toStream('/'))
|
|
assert.strictEqual(chunks.join(''), '<p>hello bendik</p>', 'render waited for prefetch')
|
|
})
|
|
|
|
test('toString refuses prefetching stores with guidance', () => {
|
|
const app = choo()
|
|
app.use((state) => { state.prefetch.push(Promise.resolve()) })
|
|
app.route('/', () => html`<div></div>`)
|
|
assert.throws(() => app.toString('/'), /toStream/)
|
|
})
|
|
|
|
test('async template holes stream: shell first, slow content later', async () => {
|
|
const app = choo()
|
|
app.route('/', (state) => html`<body><h1>shell</h1>${wait(15, html`<section>slow</section>`)}</body>`)
|
|
|
|
const stream = app.toStream('/')
|
|
const reader = stream.getReader()
|
|
const decoder = new TextDecoder()
|
|
|
|
const started = performance.now()
|
|
const first = decoder.decode((await reader.read()).value)
|
|
const firstAt = performance.now() - started
|
|
|
|
assert.strictEqual(first, '<body><h1>shell</h1>', 'shell flushed immediately')
|
|
assert.ok(firstAt < 10, `shell arrived before the slow hole resolved (${firstAt.toFixed(1)}ms)`)
|
|
|
|
let rest = ''
|
|
for (;;) {
|
|
const { done, value } = await reader.read()
|
|
if (done) break
|
|
rest += decoder.decode(value, { stream: true })
|
|
}
|
|
assert.strictEqual(rest, '<section>slow</section></body>')
|
|
})
|
|
|
|
test('toStream awaits lazy route views; toString refuses them', async () => {
|
|
const makeApp = () => {
|
|
const app = choo()
|
|
app.route('/', lazy(() => wait(10, {
|
|
default: (state) => html`<main>lazy view</main>`
|
|
})))
|
|
return app
|
|
}
|
|
|
|
assert.throws(() => makeApp().toString('/'), /toStream/)
|
|
|
|
const chunks = await readAll(makeApp().toStream('/'))
|
|
assert.strictEqual(chunks.join(''), '<main>lazy view</main>')
|
|
})
|
|
|
|
test('stream errors propagate through the stream, not as sync throws', async () => {
|
|
const app = choo()
|
|
app.route('/', () => html`<div>${Promise.reject(new Error('boom'))}</div>`)
|
|
await assert.rejects(async () => readAll(app.toStream('/')), /boom/)
|
|
})
|