bosia 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"type": "module",
 	"engines": {
 		"bun": ">=1.4"

package/src/core/build.ts

@@ -17,6 +17,7 @@ import { generateRouteTypes, ensureRootDirs } from "./routeTypes.ts";
 import { makeBosiaPlugin } from "./plugin.ts";
 import { makeBosiaSvelteCompiler, svelteMapCache } from "./svelteCompiler.ts";
 import { finalizeComponentCss } from "./componentCss.ts";
+import { buildPreloadMap } from "./preloadMap.ts";
 import { prerenderStaticRoutes, generateStaticSite } from "./prerender.ts";
 import { loadEnv, classifyEnvVars } from "./env.ts";
 import { generateEnvModules } from "./envCodegen.ts";
@@ -252,6 +253,8 @@ const clientPromise = Bun.build({
 	// Chunks are named after their source, which for routes is `+page` — and
 	// Cloudflare's asset server answers a `+` in the path with a redirect.
 	naming: { entry: "[name]-[hash].[ext]", chunk: "chunk-[hash].[ext]" },
+	// Read below to map each route to the chunks it needs (see preloadMap.ts).
+	metafile: true,
 	minify: isProduction,
 	sourcemap: isProduction ? "none" : "linked",
 	define: {
@@ -346,14 +349,20 @@ const serverEntry = serverEntryOutput ? basename(serverEntryOutput.path) : "inde
 
 // 8. Write dist/manifest.json
 mkdirSync(OUT_DIR, { recursive: true });
+const entryFile =
+	clientEntry ??
+	jsFiles.find((f) => f === "hydrate.js") ??
+	jsFiles.find((f) => f.startsWith("hydrate")) ??
+	"hydrate.js";
 const distManifest = {
 	js: jsFiles,
 	css: cssFiles,
-	entry:
-		clientEntry ??
-		jsFiles.find((f) => f === "hydrate.js") ??
-		jsFiles.find((f) => f.startsWith("hydrate")) ??
-		"hydrate.js",
+	entry: entryFile,
+	// Per-route modulepreload list, so a page's code downloads with the entry
+	// instead of after it.
+	preload: clientResult.metafile
+		? buildPreloadMap(clientResult.metafile, manifest.pages, entryFile)
+		: {},
 	serverEntry,
 	target,
 	tw: twFile,

package/src/core/html.ts

@@ -24,6 +24,8 @@ export const distManifest: {
 	basePath?: string;
 	/** PUBLIC_* (non-static) names declared in .env files, stamped by the build. */
 	publicEnv?: string[];
+	/** Client chunks per route pattern, stamped by the build (see preloadMap.ts). */
+	preload?: Record<string, string[]>;
 } = readArtifact("manifest.json") ?? { js: [], css: [], entry: "hydrate.js" };
 
 export const isDev = process.env.NODE_ENV !== "production";
@@ -55,6 +57,17 @@ export function baseScript(nonce?: string): string {
 		: "";
 }
 
+/** modulepreload links for the chunks `pattern` needs to hydrate, so they
+ *  download alongside the entry instead of after it has run. Hashed names, so
+ *  no buster (same reason as ENTRY). Unknown pattern or an older dist/ without
+ *  the `preload` field → nothing, and the page loads as it did before. */
+export function routePreloadLinks(pattern?: string): string {
+	if (!pattern) return "";
+	return (distManifest.preload?.[pattern] ?? [])
+		.map((f) => `\n  <link rel="modulepreload" href="${DIST}/${f}">`)
+		.join("");
+}
+
 /** Tailwind stylesheet link. Content-hashed name needs no cache buster — the
  *  hash IS the buster. Fallback keeps older dist/ artifacts (no `tw` field) styled. */
 function twCssLink(): string {
@@ -161,6 +174,7 @@ export function buildHtml(
 	bodyEndExtras?: string[],
 	segments?: AppHtmlSegments,
 	metadata?: Metadata | null,
+	pattern?: string,
 ): string {
 	// An app writes <a href="/masuk">; under a base the browser has to be handed
 	// /sso/masuk or it walks off this app entirely. Only the rendered markup is
@@ -208,6 +222,11 @@ export function buildHtml(
 
 	const bodyEnd = bodyEndExtras?.length ? "\n  " + bodyEndExtras.join("\n  ") : "";
 
+	// Same hints the streaming shell sends; skipped when no JS runs at all.
+	const preloads = csr
+		? `  <link rel="modulepreload" href="${ENTRY}">${routePreloadLinks(pattern)}\n`
+		: "";
+
 	if (segments) {
 		const safeKey = safeLang(lang);
 		const headOpenInterpolated = interpolateSegment(segments.headOpen, {
@@ -225,6 +244,7 @@ export function buildHtml(
 			`\n  ${faviconLine}${twCssLink()}\n` +
 			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
+			preloads +
 			`  ${fallbackTitle}${metaTags}${head}` +
 			headCloseInterpolated +
 			(body ? "" : `\n${SPINNER}`) +
@@ -243,7 +263,7 @@ export function buildHtml(
 ${metaTags}  ${head}
   ${twCssLink()}
 ${componentCssLinks()}  <script${n}>${THEME_INIT_JS}</script>
-</head>
+${preloads}</head>
 <body>
   <div id="app">${body}</div>${scripts}${bodyEnd}
 </body>
@@ -257,6 +277,7 @@ export function buildHtmlShellOpen(
 	lang?: string,
 	nonce?: string,
 	segments?: AppHtmlSegments,
+	pattern?: string,
 ): string {
 	const key = safeLang(lang);
 	const n = nonceAttr(nonce);
@@ -270,7 +291,8 @@ export function buildHtmlShellOpen(
 			`\n  ${faviconLine}${twCssLink()}\n` +
 			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
-			`  <link rel="modulepreload" href="${ENTRY}">`
+			`  <link rel="modulepreload" href="${ENTRY}">` +
+			routePreloadLinks(pattern)
 		);
 	}
 
@@ -282,7 +304,8 @@ export function buildHtmlShellOpen(
 		`  ${twCssLink()}\n` +
 		componentCssLinks() +
 		`  <script${n}>${THEME_INIT_JS}</script>\n` +
-		`  <link rel="modulepreload" href="${ENTRY}">`
+		`  <link rel="modulepreload" href="${ENTRY}">` +
+		routePreloadLinks(pattern)
 	);
 }
 

package/src/core/preloadMap.ts

@@ -0,0 +1,58 @@
+import { toPosix } from "./paths.ts";
+import type { PageRoute } from "./types.ts";
+
+/** The slice of Bun's `BuildMetafile` this module reads. */
+export interface PreloadMetafile {
+	outputs: Record<string, { entryPoint?: string; imports?: { path: string; kind: string }[] }>;
+}
+
+/**
+ * Client chunks each page route needs before it can hydrate, keyed by route
+ * pattern, as paths relative to `dist/client` (same shape as `manifest.js`).
+ *
+ * Without this the browser only learns about a route's code after the entry has
+ * run and `import()`ed it, and only learns about that chunk's own imports after
+ * it arrives — a serial waterfall during which clicks hit dead buttons. Emitting
+ * these as modulepreload links lets them download alongside the entry.
+ *
+ * Route chunks are found by their metafile `entryPoint` (Bun makes every
+ * dynamically imported route file its own entry chunk, named relative to the
+ * app root), then followed through static imports only — a `dynamic-import`
+ * edge is code the page may never ask for. The client entry is left out: the
+ * shell already preloads it.
+ */
+export function buildPreloadMap(
+	metafile: PreloadMetafile,
+	pages: Pick<PageRoute, "pattern" | "page" | "layouts">[],
+	entry: string,
+): Record<string, string[]> {
+	const clean = (p: string) => toPosix(p).replace(/^\.\//, "");
+	const outputs = new Map<string, { path: string; kind: string }[]>();
+	const chunkBySource = new Map<string, string>();
+	for (const [out, info] of Object.entries(metafile.outputs)) {
+		if (!out.endsWith(".js")) continue;
+		outputs.set(clean(out), info.imports ?? []);
+		if (info.entryPoint) chunkBySource.set(clean(info.entryPoint), clean(out));
+	}
+
+	const map: Record<string, string[]> = {};
+	for (const route of pages) {
+		const seen = new Set<string>([entry]);
+		const files: string[] = [];
+		const visit = (chunk: string) => {
+			if (seen.has(chunk)) return;
+			seen.add(chunk);
+			files.push(chunk);
+			for (const imp of outputs.get(chunk) ?? []) {
+				if (imp.kind === "import-statement") visit(clean(imp.path));
+			}
+		};
+		// Layouts first: they wrap the page, so hydration needs them just as much.
+		for (const src of [...route.layouts, route.page]) {
+			const chunk = chunkBySource.get(`src/routes/${toPosix(src)}`);
+			if (chunk) visit(chunk);
+		}
+		if (files.length) map[route.pattern] = files;
+	}
+	return map;
+}

package/src/core/renderer.ts

@@ -761,7 +761,7 @@ export async function renderSSRStream(
 				);
 			}
 			const html =
-				buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments) +
+				buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments, route.pattern) +
 				buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
 				buildHtmlTail(
 					"",
@@ -819,7 +819,14 @@ export async function renderSSRStream(
 
 		// Pre-compute all chunks; pull-based stream gives Bun native backpressure.
 		const chunks: Uint8Array[] = [
-			enc.encode(buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments)),
+			enc.encode(
+				buildHtmlShellOpen(
+					metadata?.lang,
+					nonce,
+					appHtmlSegments,
+					data.csr ? route.pattern : undefined,
+				),
+			),
 			enc.encode(buildMetadataChunk(metadata, headExtras, appHtmlSegments)),
 			enc.encode(
 				buildHtmlTail(
@@ -1031,6 +1038,7 @@ export async function renderPageWithFormData(
 			bodyEndExtras,
 			appHtmlSegments,
 			metadata,
+			route.pattern,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 	}
@@ -1065,6 +1073,7 @@ export async function renderPageWithFormData(
 		bodyEndExtras,
 		appHtmlSegments,
 		metadata,
+		route.pattern,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 }