Bendik Aagaard LynghaugandClaude Fable 5
99f9da1e3b
- 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
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
// Vite plugin: a virtual client entry that mounts the user's app. The
|
|
// user writes one isomorphic module; bankai generates the two lines of
|
|
// browser glue instead of asking for a second file.
|
|
|
|
export const CLIENT_ID = 'bankai:client'
|
|
const RESOLVED_CLIENT_ID = '\0' + CLIENT_ID
|
|
|
|
// the URL a browser uses to import the virtual module through Vite's dev
|
|
// middleware ('\0' encodes as '__x00__')
|
|
export const CLIENT_URL = '/@id/__x00__' + CLIENT_ID
|
|
|
|
export default function bankaiPlugin (entry, { css } = {}) {
|
|
return {
|
|
name: 'bankai',
|
|
resolveId (id) {
|
|
if (id === CLIENT_ID) return RESOLVED_CLIENT_ID
|
|
},
|
|
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")'
|
|
].join('\n')
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// <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
|
|
}
|
|
}
|