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
@@ -9,7 +9,7 @@ const RESOLVED_CLIENT_ID = '\0' + CLIENT_ID
|
||||
// middleware ('\0' encodes as '__x00__')
|
||||
export const CLIENT_URL = '/@id/__x00__' + CLIENT_ID
|
||||
|
||||
export default function bankaiPlugin (entry) {
|
||||
export default function bankaiPlugin (entry, { css } = {}) {
|
||||
return {
|
||||
name: 'bankai',
|
||||
resolveId (id) {
|
||||
@@ -18,6 +18,10 @@ export default function bankaiPlugin (entry) {
|
||||
load (id) {
|
||||
if (id === RESOLVED_CLIENT_ID) {
|
||||
return [
|
||||
// the style.css convention: CSS is a client concern, so the
|
||||
// client glue imports it and server code never sees it — the
|
||||
// v8 answer to what sheetify transforms did in v9
|
||||
...(css ? [`import ${JSON.stringify(css)}`] : []),
|
||||
`import create from ${JSON.stringify(entry)}`,
|
||||
'const app = typeof create === "function" && !create.mount ? create() : create',
|
||||
'app.mount(app.selector || "body")'
|
||||
@@ -26,3 +30,16 @@ export default function bankaiPlugin (entry) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// <entry dir>/style.css, when it exists
|
||||
export async function findCss (entry) {
|
||||
const { access } = await import('node:fs/promises')
|
||||
const { join, dirname } = await import('node:path')
|
||||
const candidate = join(dirname(entry), 'style.css')
|
||||
try {
|
||||
await access(candidate)
|
||||
return candidate
|
||||
} catch (e) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user