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
83 lines
2.9 KiB
JavaScript
83 lines
2.9 KiB
JavaScript
// Lazy routes in the browser (happy-dom): loading view while the module
|
|
// is in flight, morph to the real view on arrival, PENDING keeps the
|
|
// current tree during route changes, view cached after first load.
|
|
|
|
import { test, before } from 'node:test'
|
|
import assert from 'node:assert'
|
|
import { Window } from 'happy-dom'
|
|
|
|
let choo, lazy, html
|
|
|
|
before(async () => {
|
|
const win = new Window({ url: 'http://localhost/' })
|
|
globalThis.window = win
|
|
globalThis.document = win.document
|
|
globalThis.requestAnimationFrame = win.requestAnimationFrame.bind(win)
|
|
;({ default: choo, lazy } = await import('@uhhm/buuh'))
|
|
;({ default: html } = await import('@uhhm/buuh-html/browser'))
|
|
})
|
|
|
|
const tick = (ms = 30) => new Promise((resolve) => setTimeout(resolve, ms))
|
|
|
|
test('lazy route with a loading view: loading first, real view after', async () => {
|
|
let resolveLoader
|
|
const loaderDone = new Promise((resolve) => { resolveLoader = resolve })
|
|
|
|
const app = choo()
|
|
app.route('/', lazy(
|
|
() => loaderDone,
|
|
() => html`<div><p>loading…</p></div>`
|
|
))
|
|
|
|
const tree = app.start()
|
|
assert.strictEqual(tree.textContent, 'loading…', 'loading view rendered while in flight')
|
|
|
|
resolveLoader({ default: (state) => html`<div><p>arrived</p></div>` })
|
|
await tick()
|
|
assert.strictEqual(tree.textContent, 'arrived', 'real view morphed in over the loading view')
|
|
})
|
|
|
|
test('lazy route without a loading view: placeholder, then wholesale replace', async () => {
|
|
let resolveLoader
|
|
const loaderDone = new Promise((resolve) => { resolveLoader = resolve })
|
|
|
|
const app = choo()
|
|
app.route('/', lazy(() => loaderDone))
|
|
|
|
const tree = app.start()
|
|
assert.ok(tree.hasAttribute('data-choo-pending'), 'placeholder holds the spot')
|
|
document.body.appendChild(tree)
|
|
|
|
resolveLoader({ default: (state) => html`<main><h1>real</h1></main>` })
|
|
await tick()
|
|
|
|
assert.strictEqual(document.querySelector('main h1').textContent, 'real', 'real view replaced the placeholder in the DOM')
|
|
assert.strictEqual(document.querySelector('[data-choo-pending]'), null, 'placeholder gone')
|
|
document.querySelector('main').remove()
|
|
})
|
|
|
|
test('loaded lazy views render synchronously ever after', async () => {
|
|
const view = (state) => html`<div>cached ${state.count}</div>`
|
|
const wrapped = lazy(() => Promise.resolve({ default: view }))
|
|
|
|
const app = choo()
|
|
app.use((state, emitter) => {
|
|
state.count = 0
|
|
emitter.on('bump', () => { state.count++; emitter.emit('render') })
|
|
})
|
|
app.route('/', wrapped)
|
|
|
|
// no loading view: the placeholder must live in the DOM to be replaced
|
|
const holder = document.createElement('section')
|
|
document.body.appendChild(holder)
|
|
holder.appendChild(app.start())
|
|
await tick() // let the loader resolve + re-render
|
|
|
|
assert.strictEqual(holder.textContent, 'cached 0')
|
|
|
|
app.emit('bump')
|
|
await tick()
|
|
assert.strictEqual(holder.textContent, 'cached 1', 'subsequent renders are sync through the cache')
|
|
holder.remove()
|
|
})
|