Bendik Aagaard LynghaugandClaude Fable 5
7e08b585ac
One command, zero config, and only the client ever bundles: v8 server code is plain ESM that Node runs as-authored, so there is no server build to rot (the lesson of v9). - start: Vite middleware mode + HMR with per-request streaming SSR via ssrLoadModule; a virtual client entry generates the browser glue so the user writes exactly one isomorphic module (plan decision D5). - build: client bundle via Vite 8/Rolldown, manifest-derived route assets in dist/bankai.json, service worker built with the precache list injected (choo-service-worker convention, manifest edition), brotli+gzip precompression of every text asset. - serve: immutable caching + precompressed negotiation for hashed assets, 103 Early Hints (res.writeEarlyHints) with the route's assets before every page, streaming SSR, and a window.initialState tail with script-breakout-safe serialization and choo internals filtered out. - inspect: raw/gzip/brotli size report. Integration tests drive the real counter example through build and serve, asserting the 103 interim response at the HTTP level. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
56 lines
2.3 KiB
JavaScript
56 lines
2.3 KiB
JavaScript
// The HTML document around the app's streamed body. bankai owns the
|
|
// <head> (charset, viewport, title, asset links) and the tail
|
|
// (window.initialState + </html>); the app's view owns <body>.
|
|
// Page scripts live in <head> (type=module defers itself); the one
|
|
// exception is the initialState script, which must be inline and is
|
|
// emitted after the body — inline scripts execute during parse, module
|
|
// scripts only after it, so the order still holds.
|
|
|
|
export function documentHead ({ title, css = [], modulepreload = [], scripts = [] }) {
|
|
let head = '<!doctype html>\n<html lang="en">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n'
|
|
if (title) head += `<title>${escapeHtml(title)}</title>\n`
|
|
for (const href of css) {
|
|
head += `<link rel="stylesheet" href="${escapeHtml(href)}">\n`
|
|
}
|
|
for (const href of modulepreload) {
|
|
head += `<link rel="modulepreload" href="${escapeHtml(href)}">\n`
|
|
}
|
|
for (const src of scripts) {
|
|
head += `<script type="module" src="${escapeHtml(src)}"></script>\n`
|
|
}
|
|
head += '</head>\n'
|
|
return head
|
|
}
|
|
|
|
export function documentTail (state) {
|
|
return `\n<script>window.initialState=${serializeState(state)}</script>\n</html>\n`
|
|
}
|
|
|
|
// choo internals that every boot recomputes \u2014 no point shipping them
|
|
const RECOMPUTED = new Set(['events', 'cache', 'prefetch'])
|
|
|
|
// JSON that is safe to embed in an inline <script>: no '</script>' or
|
|
// '<!--' breakouts, no raw line separators
|
|
export function serializeState (state) {
|
|
return JSON.stringify(state, function (key, value) {
|
|
if (this === state && RECOMPUTED.has(key)) return undefined
|
|
return value
|
|
})
|
|
.replace(/</g, '\\u003c')
|
|
.replace(/\u2028/g, '\\u2028')
|
|
.replace(/\u2029/g, '\\u2029')
|
|
}
|
|
|
|
// Early Hints / Link header values for a route's assets
|
|
export function assetLinks ({ css = [], modulepreload = [], scripts = [] }) {
|
|
const links = []
|
|
for (const href of scripts) links.push(`<${href}>; rel=modulepreload`)
|
|
for (const href of modulepreload) links.push(`<${href}>; rel=modulepreload`)
|
|
for (const href of css) links.push(`<${href}>; rel=preload; as=style`)
|
|
return links
|
|
}
|
|
|
|
function escapeHtml (str) {
|
|
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"')
|
|
}
|