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:
co-authored by
Claude Fable 5
parent
0a351d7f33
commit
99f9da1e3b
@@ -4,17 +4,18 @@
|
||||
|
||||
import { createServer } from 'node:http'
|
||||
|
||||
import bankaiPlugin, { CLIENT_URL } from './plugin.js'
|
||||
import bankaiPlugin, { findCss, CLIENT_URL } from './plugin.js'
|
||||
import { resolveApp } from './app.js'
|
||||
import { documentHead, documentTail } from './document.js'
|
||||
|
||||
export default async function dev ({ entry, port = 8080, title = 'choo' }) {
|
||||
const { createServer: createViteServer } = await import('vite')
|
||||
const css = await findCss(entry) // style.css convention; restart to add it
|
||||
|
||||
const vite = await createViteServer({
|
||||
appType: 'custom',
|
||||
server: { middlewareMode: true },
|
||||
plugins: [bankaiPlugin(entry)],
|
||||
plugins: [bankaiPlugin(entry, { css })],
|
||||
logLevel: 'warn'
|
||||
})
|
||||
|
||||
@@ -26,14 +27,22 @@ export default async function dev ({ entry, port = 8080, title = 'choo' }) {
|
||||
const app = resolveApp(mod, entry)
|
||||
const state = {}
|
||||
|
||||
// Read the first chunk before writing the head: by then stores
|
||||
// have run and the view has rendered up to its first async hole,
|
||||
// so DOMTitleChange emits have landed in state.title.
|
||||
const reader = app.toStream(req.url, state).getReader()
|
||||
const first = await reader.read()
|
||||
|
||||
res.writeHead(200, { 'content-type': 'text/html; charset=utf-8' })
|
||||
res.write(documentHead({
|
||||
title,
|
||||
title: state.title || title,
|
||||
scripts: ['/@vite/client', CLIENT_URL]
|
||||
}))
|
||||
|
||||
for await (const chunk of app.toStream(req.url, state)) {
|
||||
res.write(chunk)
|
||||
if (!first.done) res.write(first.value)
|
||||
for (;;) {
|
||||
const { done, value } = await reader.read()
|
||||
if (done) break
|
||||
res.write(value)
|
||||
}
|
||||
res.end(documentTail(state))
|
||||
} catch (err) {
|
||||
|
||||
Reference in New Issue
Block a user