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

uhhm/buuh

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

									
										examples/counter/app.js
									
		+2
		
												View File
												
				@@ -17,6 +17,8 @@ export default function createApp () {

				}

				function mainView (state, emit) {

				  emit(state.events.DOMTITLECHANGE, `count is ${state.count}`)

				  return html`

				    <body>

				      <h1>count is ${state.count}</h1>