feat(bankai): Phase 4 follow-ups — css convention, live titles, prerender, HTTP/2, size budget

- 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
This commit is contained in:
Bendik Aagaard Lynghaug
2026-09-08 19:39:25 +02:00
co-authored by Claude Fable 5
parent 0a351d7f33
commit 99f9da1e3b
11 changed files with 305 additions and 37 deletions
+64
View File
@@ -0,0 +1,64 @@
// The size budget: what does the framework itself cost on the wire?
// Bundles @choojs/core + @choojs/html (browser condition) minified via
// the same Vite/Rolldown pipeline apps use, then reports min+gzip and
// min+brotli. CI fails if min+gzip exceeds the budget.
//
// npm run size
import { build } from 'vite'
import { readFile, readdir, rm, mkdtemp } from 'node:fs/promises'
import { join } from 'node:path'
import { tmpdir } from 'node:os'
import { gzipSync, brotliCompressSync, constants } from 'node:zlib'
// The promise the README makes; raise only with a paper trail.
// Context: v7's "4kb" was choo alone — nanohtml lived in the browserify
// transform. This number is the whole framework: core, html engine,
// morph, hydrate, router, bus. Currently ~7.97 kB gzip; the headroom is
// margin, not license.
const BUDGET_GZIP = 8.5 * 1024
const VIRTUAL = '\0size:entry'
const outDir = await mkdtemp(join(tmpdir(), 'choo-size-'))
await build({
appType: 'custom',
logLevel: 'error',
plugins: [{
name: 'size-entry',
resolveId: (id) => id === 'size:entry' ? VIRTUAL : undefined,
load: (id) => id === VIRTUAL
? "import choo, { Choo, lazy } from '@choojs/core'\n" +
"import html from '@choojs/html'\n" +
"import raw from '@choojs/html/raw'\n" +
'window.__keep = { choo, Choo, lazy, html, raw }\n'
: undefined
}],
build: {
outDir,
emptyOutDir: true,
rollupOptions: { input: { framework: 'size:entry' } }
}
})
const assets = await readdir(join(outDir, 'assets'))
const file = assets.find((name) => name.endsWith('.js'))
const code = await readFile(join(outDir, 'assets', file))
await rm(outDir, { recursive: true, force: true })
const gz = gzipSync(code, { level: constants.Z_BEST_COMPRESSION }).length
const br = brotliCompressSync(code, {
params: { [constants.BROTLI_PARAM_QUALITY]: constants.BROTLI_MAX_QUALITY }
}).length
const kb = (n) => (n / 1024).toFixed(2) + ' kB'
console.log(`@choojs/core + @choojs/html (browser, minified)`)
console.log(` raw: ${kb(code.length)}`)
console.log(` gzip: ${kb(gz)} (budget ${kb(BUDGET_GZIP)})`)
console.log(` brotli: ${kb(br)}`)
if (gz > BUDGET_GZIP) {
console.error(`\nsize budget exceeded: ${kb(gz)} > ${kb(BUDGET_GZIP)} min+gzip`)
process.exit(1)
}
console.log('\nwithin budget ✔')