@abide/abide 0.34.2 → 0.36.0

package/README.md

@@ -1,153 +1,159 @@
 # abide
 
-**Write one function. Get a typed HTTP endpoint, a CLI, an MCP tool, and an OpenAPI operation — from the same line of code.**
+**One typed RPC declaration fans out to an HTTP route, a typed browser proxy, a CLI subcommand, an MCP tool, and an OpenAPI operation — built for humans and machines.**
 
-abide is a type-safe isomorphic framework built on web standards and Bun. You declare a verb once; the bundler swaps the runtime per side and projects that one declaration onto every surface — humans hit it over HTTP or the CLI, machines hit it over MCP, and you control which surfaces each verb exposes. It's a framework built for humans *and* machines.
+abide is an isomorphic framework on Bun: the same callable has the same name and behaviour on both sides, and the bundler swaps the runtime per side — a server handler in `src/server`, a `fetch` proxy in the browser. Server-render and hydrate the same `.abide` components, broadcast over multiplexed sockets, and expose every read to an agent — all in a single Bun runtime.
 
-- Zero runtime dependencies
-- A single runtime (Bun) in every mode — dev, build, and compiled binary
+- One dependency (`typescript`, for the type-checking shadow); `tailwindcss` + `bun-plugin-tailwind` are optional peers.
+- Runs on Bun `>= 1.3.0`. No bundler config, no server framework, no client router to wire up.
 
 ## Quick start
 
 ```sh
-bunx abide scaffold my-app   # scaffolds, installs, and starts the dev server
+bunx abide scaffold my-app   # scaffolds, installs deps, and (in a TTY) starts dev
 ```
 
-To see every surface live, clone the repo and run the kitchen-sink example — each page is runnable and documented:
+Or read the exhaustive demo:
 
 ```sh
 git clone https://github.com/briancray/abide
 cd abide && bun install
-cd examples/kitchen-sink && bun run dev
+cd examples/kitchen-sink && bun dev
 ```
 
+The whole public surface — every export, CLI command, route, env var, and the `.abide` grammar — is mapped in [`AGENTS.md`](./AGENTS.md).
+
 ## RPCs
 
-An RPC is a handler wrapped by its HTTP method — one export per file under `src/server/rpc/`. The file path is the URL; the schema validates args and projects the MCP tool, CLI flags, and OpenAPI operation. Standard Schema is the contract: zod, valibot, and arktype work unadapted.
+An RPC is one export per file under `src/server/rpc/`. The file path is the URL (`getMessages.ts` → `/rpc/getMessages`), and a [Standard Schema](https://standardschema.dev) (zod / valibot / arktype, unadapted) validates the args and projects every other surface.
 
 ```ts
 // src/server/rpc/getMessages.ts
 import { GET } from '@abide/abide/server/GET'
 import { json } from '@abide/abide/server/json'
 import { z } from 'zod'
+import { history } from '../../store.ts'
 
-// query args arrive as strings — coerce in the schema
-const inputSchema = z.object({ room: z.string(), limit: z.coerce.number().default(50) })
+const inputSchema = z.object({ room: z.string() })
 
-export const getMessages = GET(
-    async ({ room, limit }) => json(await db.recentMessages(room, limit)),
-    { inputSchema },
-)
+export const getMessages = GET(({ room }) => json({ messages: history(room) }), { inputSchema })
 ```
 
-One declared verb fans out to every surface — this is the whole premise:
+That one declaration fans out:
 
 ```text
-       export const getMessages = GET(fn, { inputSchema })
-                                 │
-   ┌───────────────┬────────────┼──────────────┬────────────────┐
- SSR call      browser fetch    MCP tool      CLI subcommand   OpenAPI op
-cache(fn)()   fetch /rpc/...   getMessages   app get-messages  /openapi.json
-(in-process)  (typed proxy)  (read-only+schema) (schema→flags)   (described)
+                  getMessages   (one declaration)
+                        │
+   ┌──────────┬─────────┼─────────┬──────────────┐
+   ▼          ▼         ▼         ▼              ▼
+ SSR call   browser   MCP tool   CLI sub-     OpenAPI
+cache(fn)()  fetch   (read-only) command      operation
 ```
 
-The same callable is consumed differently per side — `cache(getMessages)({ room })` in-process, the swapped `fetch` in the browser, `.raw(args)` for a `Response`, `.stream(args)` for `tail()`. A schema gates the machine surfaces: it unlocks the CLI and (for read-only verbs) MCP; a mutating verb never auto-exposes to MCP — it needs an explicit `clients: { mcp: true }`. Per-verb `timeout` (504, on every surface) is distinct from the client-side `ABIDE_CLIENT_TIMEOUT`.
+The `inputSchema` unlocks the CLI and — because a `GET`/`HEAD` is read-only — an MCP tool. A mutating verb (`POST`/`PUT`/`PATCH`/`DELETE`) never auto-exposes to an agent; opt in with `clients: { mcp: true }`. Consume the verb four ways, all typed against the declaration: `cache(getMessages)({ room })` for an SSR-memoized in-process read, the bundler-swapped `getMessages({ room })` `fetch` proxy in the browser, `.raw(args)` for the untouched `Response`, and `.stream(args)` for a frame-by-frame `jsonl`/`sse` body.
 
-> Query args travel as strings — use `z.coerce.*` so numbers and booleans validate.
+> Query args travel as strings — use `z.coerce.*` for numbers and booleans. The per-verb `timeout` option fires a `504` on every surface and is distinct from the client-wide `ABIDE_CLIENT_TIMEOUT`.
 
 ## Sockets
 
-One broadcast topic per file under `src/server/sockets/`. A `Socket<T>` is an isomorphic `AsyncIterable<T>` — every socket multiplexes onto one ws at `/__abide/sockets`. A `schema` validates publishes, infers the frame type, and flips on the MCP/CLI read faces.
+A socket is one broadcast topic per file under `src/server/sockets/`. A `Socket<T>` is an isomorphic `AsyncIterable<T>` — `for await` it on the server, or read it reactively with `tail()` in a component — and every socket multiplexes onto one WebSocket at `/__abide/sockets`.
 
 ```ts
-// src/server/sockets/chat.ts
+// src/server/sockets/messages.ts
 import { socket } from '@abide/abide/server/socket'
 import { z } from 'zod'
 
-const schema = z.object({ id: z.string(), from: z.string(), text: z.string(), at: z.number() })
-
-// retain the last 100 frames, evict any older than an hour
-export const chat = socket({ schema, tail: 100, ttl: 3_600_000 })
-export type ChatMessage = z.infer<typeof schema>
+const schema = z.object({
+    id: z.string(),
+    room: z.string(),
+    from: z.string(),
+    text: z.string(),
+    at: z.number(),
+})
+
+// retain the last 100 frames; lazily evict any older than an hour
+export const messages = socket({ schema, tail: 100, ttl: 3_600_000 })
+export type Message = z.infer<typeof schema>
 ```
 
-For clients that can't speak the ws multiplex, each socket has an HTTP face at `/__abide/sockets/<name>` — `GET` returns the retained tail, `POST` publishes (gated by `clientPublish`, off by default).
+The schema validates every publish and flips on the read surfaces (a `messages-tail` MCP tool / CLI command). For clients that can't speak the ws multiplex, each socket has an HTTP face at `/__abide/sockets/messages`: `GET` returns the retained tail, `POST` publishes — gated by `clientPublish` (default `false`, so browsers publish through a validating verb instead).
 
 ## Components
 
-Components are `.abide` files — valid HTML with `<script>`, native `<template>` control flow, `{expr}` bindings, and a component-scoped `<style>`. Reactive state is reached through `scope()` (`scope().state(v)`, `scope().computed(fn)`); `prop` and `effect` are in scope without import. This page reads the verb above through `cache()`, tails the socket live, and exercises most of the template grammar:
+A component is an `.abide` file: valid HTML with a `<script>`, native `<template>` control flow, `{expr}` bindings, and a component-scoped `<style>`. `scope()` is the sole reactive surface; `props`, `effect`, and `html` are in scope without import. This one imports the verb and socket above:
 
 ```html
 <script>
 import { cache } from '@abide/abide/shared/cache'
 import { tail } from '@abide/abide/ui/tail'
 import { getMessages } from '$server/rpc/getMessages.ts'
-import { publishChat } from '$server/rpc/publishChat.ts'
-import { chat } from '$server/sockets/chat.ts'
+import { sendMessage } from '$server/rpc/sendMessage.ts'
+import { messages } from '$server/sockets/messages.ts'
 import Avatar from '$ui/Avatar.abide'
 
-let room = prop('room')                                            // typed via src/.abide/routes.d.ts
-const history = scope().computed(() => cache(getMessages)({ room })) // SSR snapshot + reactive refetch
-const latest = scope().computed(() => tail(chat))                  // re-renders on every new frame
+const { room } = props<{ room: string }>()
 
-let from = scope().state('alice')
-let text = scope().state('')
-let filter = scope().state('all')        // all | mine | others
-let onlyUnread = scope().state(false)
+let from = scope().state('alice')               // a writable cell — read/assign as a plain var
+let draft = scope().state('')
+let pinned = scope().state(false)
+let filter = scope().state('all')
+const live = scope().computed(() => tail(messages))   // re-renders on every new frame
 
 async function send(event: SubmitEvent) {
     event.preventDefault()
-    if (text.trim() === '') return
-    await publishChat({ from, text })                              // server validates, then broadcasts
-    text = ''
+    if (draft.trim() === '') return
+    await sendMessage({ room, from, text: draft })     // a mutating verb
+    draft = ''
 }
 </script>
 
-<template name="message" args={m}>                       <!-- snippet: a reusable builder -->
-    <li class="row"><Avatar name={m.from} /> <strong>{m.from}</strong>: {m.text}</li>
+<!-- a named snippet: a reusable builder, rendered like a function -->
+<template name="bubble" args={msg}>
+    <li><Avatar name={msg.from} /> <b>{msg.from}</b>: {msg.text}</li>
 </template>
 
+<h1>#{room}</h1>
+
 <form onsubmit={send}>
-    <input bind:value={from} placeholder="you" />
-    <input bind:value={text} placeholder="say something…" />
-    <label><input type="checkbox" bind:checked={onlyUnread} /> unread only</label>
-    <fieldset>
-        <label><input type="radio" bind:group={filter} value="all" /> all</label>
-        <label><input type="radio" bind:group={filter} value="mine" /> mine</label>
-    </fieldset>
-    <button type="submit" disabled={text.trim() === ''}>send</button>
+    <input bind:value={from} />
+    <input bind:value={draft} placeholder="message" />
+    <label><input type="checkbox" bind:checked={pinned} /> pin</label>
+    <label><input type="radio" bind:group={filter} value="all" /> all</label>
+    <label><input type="radio" bind:group={filter} value="mine" /> mine</label>
+    <button type="submit" disabled={draft.trim() === ''}>send</button>
 </form>
 
-<template if={latest}>
-    <p class="ping">latest from <strong>{latest.from}</strong></p>
+<template if={live}>
+    <p class="live">latest: {live.text}</p>
     <template else>
-        <p class="ping muted">no live messages yet</p>
+        <p>no messages yet</p>
     </template>
 </template>
 
 <template switch={filter}>
-    <template case={'mine'}><p>showing your messages</p></template>
-    <template default><p>showing every message</p></template>
+    <template case={'all'}><p>showing everyone</p></template>
+    <template case={'mine'}><p>showing {from}</p></template>
+    <template default><p>—</p></template>
 </template>
 
-<template await={history}>
-    <p>loading history…</p>
-    <template then="messages">
+<template await={cache(getMessages)({ room })}>
+    <p>loading…</p>
+    <template then="history">
         <ul>
-            <template each={messages} as="m" key="m.id">
-                {message(m)}                              <!-- render the snippet -->
+            <template each={history.messages} as="msg" key="msg.id">
+                {bubble(msg)}
             </template>
         </ul>
     </template>
-    <template catch="err">
-        <p class="error">{err.message}</p>
+    <template catch="error">
+        <p>failed: {error.message}</p>
     </template>
 </template>
 
 <style>
-    .row { display: flex; gap: 0.5rem; }
-    .muted { color: #94a3b8; }
-    .error { color: #dc2626; }
+    .live {
+        font-weight: 600;
+    }
 </style>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.34.2",
+    "version": "0.36.0",
     "type": "module",
     "sideEffects": false,
     "description": "Isomorphic multimodal HTTP framework built for humans and machines in a single Bun runtime",
@@ -99,6 +99,7 @@
         "./ui/dom/tryBlock": "./src/lib/ui/dom/tryBlock.ts",
         "./ui/dom/switchBlock": "./src/lib/ui/dom/switchBlock.ts",
         "./ui/dom/applyResolved": "./src/lib/ui/dom/applyResolved.ts",
+        "./ui/runtime/escapeKey": "./src/lib/ui/runtime/escapeKey.ts",
         "./ui/runtime/nextBlockId": "./src/lib/ui/runtime/nextBlockId.ts",
         "./ui/runtime/enterRenderPass": "./src/lib/ui/runtime/enterRenderPass.ts",
         "./ui/runtime/exitRenderPass": "./src/lib/ui/runtime/exitRenderPass.ts",

package/src/abideResolverPlugin.ts

@@ -848,10 +848,17 @@ async function loadShell(cwd: string): Promise<string> {
 /*
 Injects the framework's client entry references so app.html stays a clean
 template — page structure plus the SSR markers, no framework asset bookkeeping.
-The css <link> lands before </head>, the module <script> before </body>. Each is
-skipped when the shell already carries that reference, so a custom app.html that
-still spells the tags out (or one already processed) doesn't get a duplicate.
-rewriteHashedClientEntries then swaps both for the hashed entry filenames.
+The css <link> and the entry's <link rel="modulepreload"> land before </head>,
+the module <script> before </body>. Each is skipped when the shell already
+carries that reference, so a custom app.html that still spells the tags out (or
+one already processed) doesn't get a duplicate. rewriteHashedClientEntries then
+swaps every reference for the hashed entry filenames.
+
+The modulepreload makes the browser fetch the entry during a streamed render —
+the closing </body> <script> tag arrives only after the whole stream, so without
+it the entry download is serialized after the body. Execution still defers to
+parse-end (module script), so hydration ordering is unchanged; only the transfer
+overlaps the stream.
 */
 function injectShellAssets(shell: string): string {
     let result = shell
@@ -863,7 +870,16 @@ function injectShellAssets(shell: string): string {
             'src/ui/app.html has no </head>',
         )
     }
-    if (!result.includes('/_app/client.js')) {
+    if (!result.includes('rel="modulepreload"')) {
+        result = injectBeforeTag(
+            result,
+            '<link rel="modulepreload" href="/_app/client.js" />',
+            'head',
+            'src/ui/app.html has no </head>',
+        )
+    }
+    // Guard on `src=` so the modulepreload's matching href doesn't mask a missing <script>.
+    if (!result.includes('src="/_app/client.js"')) {
         result = injectBeforeTag(
             result,
             '<script type="module" src="/_app/client.js"></script>',
@@ -898,9 +914,10 @@ function injectBeforeTag(
 Scans `dist/_app/` for the hashed client entry filenames produced by
 build.ts (e.g. `client-abc12345.js`, `client-abc12345.css`) and swaps the
 shell's literal `/_app/client.js` and `/_app/client.css` references for
-them. When the directory is missing (someone running the server before a
-build) the shell is returned unchanged so the existing broken-asset
-behaviour is preserved.
+them. The js reference appears twice (the modulepreload <link> and the entry
+<script>), so replaceAll covers both. When the directory is missing (someone
+running the server before a build) the shell is returned unchanged so the
+existing broken-asset behaviour is preserved.
 */
 async function rewriteHashedClientEntries(shell: string, cwd: string): Promise<string> {
     const appDir = `${cwd}/dist/_app`
@@ -914,10 +931,37 @@ async function rewriteHashedClientEntries(shell: string, cwd: string): Promise<s
     const cssEntry = entries.find((file) => /^client-[a-z0-9]+\.css$/i.test(file))
     let result = shell
     if (jsEntry) {
-        result = result.replace('/_app/client.js', `/_app/${jsEntry}`)
+        result = result.replaceAll('/_app/client.js', `/_app/${jsEntry}`)
+        result = await injectEntryDepPreloads(result, `${appDir}/${jsEntry}`)
     }
     if (cssEntry) {
         result = result.replace('/_app/client.css', `/_app/${cssEntry}`)
     }
     return result
 }
+
+/* Static-import specifiers in the built entry: `import {…} from "./chunk.js"` and
+   side-effect `import "./chunk.js"`, minified (no spaces) or not. The leading
+   `import` plus the `[^"'()]` guard excludes dynamic `import("./page-….js")`, so
+   only the runtime graph matches — route chunks stay lazy. */
+const ENTRY_STATIC_IMPORT = /import\s*(?:[^"'()]*?\bfrom\s*)?["']\.\/([\w.-]+\.js)["']/g
+
+/*
+SPIKE: preload the entry's static dependency chunks. The entry <script> statically
+imports the abide-ui runtime as ~60 one-export `clientEntry-<hash>.js` chunks; the
+browser can't discover them until it has downloaded and PARSED the entry, which on a
+streamed page is ~stream-close — so the runtime waterfalls in a second wave after the
+body finishes. Emitting a <link rel="modulepreload"> for each static dep into <head>
+lets the whole graph transfer DURING the stream alongside the entry, so hydration is
+network-ready at stream-close instead of after it. Route chunks (`import("./page-…")`)
+are dynamic, so they don't match and stay lazy — code-splitting still pays off.
+*/
+async function injectEntryDepPreloads(shell: string, entryPath: string): Promise<string> {
+    const source = await Bun.file(entryPath).text()
+    const deps = [...new Set([...source.matchAll(ENTRY_STATIC_IMPORT)].map((match) => match[1]))]
+    if (deps.length === 0) {
+        return shell
+    }
+    const links = deps.map((dep) => `<link rel="modulepreload" href="/_app/${dep}" />`).join('\n')
+    return injectBeforeTag(shell, links, 'head', 'src/ui/app.html has no </head>')
+}

package/src/lib/server/runtime/STREAMED_HTML_HEADER.ts

@@ -0,0 +1,13 @@
+/*
+Internal response-header marker the streaming SSR renderer stamps on its
+progressively-flushed `text/html` document. `gzipResponse` reads it to pick a
+per-chunk-flushing gzip over the buffering web CompressionStream (then strips it
+before send): a plain CompressionStream holds the head until its deflate window
+flushes, defeating progressive delivery — the browser can't preload-scan the head
+or paint the pending shell until the stream nearly closes. A streamed `text/html`
+body is otherwise indistinguishable from a buffered one (both expose a
+ReadableStream), and `isStreamingResponse` can't be widened to cover it without
+also opting these pages out of the idle-timeout cap they rely on (see
+disableIdleTimeoutForStream).
+*/
+export const STREAMED_HTML_HEADER = 'abide-streamed-html'

package/src/lib/server/runtime/buildPreloadManifest.ts

@@ -0,0 +1,151 @@
+import { existsSync } from 'node:fs'
+import { Glob, gunzipSync } from 'bun'
+import { layoutChainForRoute } from '../../shared/layoutChainForRoute.ts'
+import type { Assets } from './types/Assets.ts'
+
+/* A static-import specifier in a built chunk: `import {…} from "./chunk.js"` and
+   side-effect `import "./chunk.js"`, minified or not. The leading `import` plus the
+   `[^"'()]` guard excludes dynamic `import("./page-….js")` — so only the runtime graph
+   matches, never a lazy route chunk. Mirrors the shell injector in abideResolverPlugin. */
+const STATIC_IMPORT = /import\s*(?:[^"'()]*?\bfrom\s*)?["']\.\/([\w.-]+\.js)["']/g
+
+/* A pages/layouts manifest entry in the entry chunk:
+   `"<route>": () => import("./page-<hash>.js")` (page chunk) or the layout form.
+   The route/layout key plus its lazily-loaded chunk — the only place route → chunk is
+   recorded, since every page chunk shares the `page-` stem and can't be told apart by name. */
+const ROUTE_CHUNK = /"(\/[^"]*)"\s*:\s*\(\)\s*=>\s*import\("\.\/((?:page|layout)-[\w.-]+\.js)"\)/g
+
+/* Reads a `_app` chunk's source by filename — gunzipped from the embedded asset map
+   (standalone compile) or off disk (dev + `abide start`). Undefined on a miss. */
+function chunkReader(
+    distDir: string,
+    assets?: Assets,
+): (name: string) => Promise<string | undefined> {
+    if (assets) {
+        return async (name) => {
+            const bytes = assets[`/_app/${name}`]
+            return bytes ? new TextDecoder().decode(gunzipSync(bytes)) : undefined
+        }
+    }
+    return async (name) => {
+        const file = Bun.file(`${distDir}/_app/${name}`)
+        return (await file.exists()) ? file.text() : undefined
+    }
+}
+
+/* The hashed client entry filename (`client-<hash>.js`), from the asset map or disk. */
+async function findEntry(distDir: string, assets?: Assets): Promise<string | undefined> {
+    const isEntry = (name: string): boolean => /^client-[a-z0-9]+\.js$/i.test(name)
+    if (assets) {
+        const key = Object.keys(assets).find((path) => isEntry(path.replace('/_app/', '')))
+        return key?.replace('/_app/', '')
+    }
+    if (!existsSync(`${distDir}/_app`)) {
+        return undefined
+    }
+    const names = await Array.fromAsync(
+        new Glob('client-*.js').scan({ cwd: `${distDir}/_app`, onlyFiles: true }),
+    )
+    return names.find(isEntry)
+}
+
+/*
+Maps each page route to the extra `_app` chunks worth preloading for it: the route's
+page chunk, its layout-chain chunks, and the transitive static-import closure of each
+— minus the entry's own static graph, which the shell already preloads. Built once at
+server boot from the built bundle (the route → chunk mapping lives in the entry's
+compiled pages/layouts manifest; the static graph is parsed from each chunk's source).
+
+Those route chunks are dynamically imported by the entry, so the browser can't discover
+them until it has downloaded, parsed, and RUN the entry — on a streamed page that's
+~stream-close. Preloading them per render (the renderer knows the matched route) lets
+the route's whole chain transfer DURING the stream, so hydration is network-ready at
+stream-close instead of waterfalling after it. Returns an empty map when the bundle is
+absent or unparseable, so rendering degrades to the entry-only preload.
+*/
+export async function buildPreloadManifest({
+    distDir,
+    assets,
+}: {
+    distDir: string
+    assets?: Assets
+}): Promise<Record<string, string[]>> {
+    const read = chunkReader(distDir, assets)
+    const entryName = await findEntry(distDir, assets)
+    const entrySource = entryName ? await read(entryName) : undefined
+    if (entryName === undefined || entrySource === undefined) {
+        return {}
+    }
+
+    /* route/layout key → its lazy chunk, split by the page-/layout- stem. */
+    const pageChunk: Record<string, string> = {}
+    const layoutChunk: Record<string, string> = {}
+    for (const match of entrySource.matchAll(ROUTE_CHUNK)) {
+        /* Both capture groups are present whenever the regex matches. */
+        const key = match[1] as string
+        const chunk = match[2] as string
+        if (chunk.startsWith('page-')) {
+            pageChunk[key] = chunk
+        } else {
+            layoutChunk[key] = chunk
+        }
+    }
+
+    /* Memoised direct static imports per chunk; closure walks them to a fixpoint. */
+    const directCache = new Map<string, Promise<string[]>>()
+    const direct = (name: string): Promise<string[]> => {
+        const cached = directCache.get(name)
+        if (cached) {
+            return cached
+        }
+        const deps = read(name).then((source) =>
+            source
+                ? [
+                      ...new Set(
+                          [...source.matchAll(STATIC_IMPORT)].map((match) => match[1] as string),
+                      ),
+                  ]
+                : [],
+        )
+        directCache.set(name, deps)
+        return deps
+    }
+    const closure = async (name: string): Promise<Set<string>> => {
+        const seen = new Set<string>()
+        const queue = [name]
+        while (queue.length > 0) {
+            const current = queue.shift() as string
+            if (seen.has(current)) {
+                continue
+            }
+            seen.add(current)
+            for (const dependency of await direct(current)) {
+                if (!seen.has(dependency)) {
+                    queue.push(dependency)
+                }
+            }
+        }
+        return seen
+    }
+
+    /* The entry + its static runtime — already preloaded by the shell, so excluded. */
+    const excluded = await closure(entryName)
+    const layoutKeys = Object.keys(layoutChunk)
+    const manifest: Record<string, string[]> = {}
+    for (const route of Object.keys(pageChunk)) {
+        const chunks = new Set<string>(await closure(pageChunk[route] as string))
+        for (const key of layoutChainForRoute(route, layoutKeys)) {
+            const chunk = layoutChunk[key]
+            if (chunk) {
+                for (const dependency of await closure(chunk)) {
+                    chunks.add(dependency)
+                }
+            }
+        }
+        const preload = [...chunks].filter((chunk) => !excluded.has(chunk))
+        if (preload.length > 0) {
+            manifest[route] = preload
+        }
+    }
+    return manifest
+}

package/src/lib/server/runtime/createServer.ts

@@ -34,6 +34,7 @@ import { createSocketDispatcher } from '../sockets/createSocketDispatcher.ts'
 import type { SocketRoutes } from '../sockets/types/SocketRoutes.ts'
 import { buildHealthPayload } from './buildHealthPayload.ts'
 import { buildOpenApiSpec } from './buildOpenApiSpec.ts'
+import { buildPreloadManifest } from './buildPreloadManifest.ts'
 import { createAppAssetServer } from './createAppAssetServer.ts'
 import { createPublicAssetServer } from './createPublicAssetServer.ts'
 import { createRouteDispatcher } from './createRouteDispatcher.ts'
@@ -205,7 +206,7 @@ export async function createServer({
     browser would render; the asset servers glob public/ and the build tree
     (embedded gzip map in a compiled binary, dist/ on disk).
     */
-    const [clientFingerprint, servePublicAsset, serveAppAsset] = await Promise.all([
+    const [clientFingerprint, servePublicAsset, serveAppAsset, routePreloads] = await Promise.all([
         dev
             ? devClientFingerprint({
                   srcDir: `${process.cwd()}/src`,
@@ -216,6 +217,7 @@ export async function createServer({
             : undefined,
         createPublicAssetServer({ publicDir, publicAssets }),
         createAppAssetServer({ distDir, assets }),
+        buildPreloadManifest({ distDir, assets }),
     ])
     setRegistryManifests({ rpc, sockets, prompts })
     setMcpResourceServer(createMcpResourceServer({ resourcesDir, mcpResources }))
@@ -279,6 +281,7 @@ export async function createServer({
         clientTimeout: parseBoundedEnvInt(process.env.ABIDE_CLIENT_TIMEOUT, 1, 600_000),
         pages,
         layouts,
+        routePreloads,
         /* The wire payload, rebuilt per marked render — the __SSR__ health seed must match what /__abide/health serves. */
         healthPayload: (request) => buildHealthPayload(request, { app, appName, appVersion }),
     })