bosia 0.5.8 → 0.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "bosia",
-	"version": "0.5.8",
+	"version": "0.5.9",
 	"type": "module",
 	"description": "A fast, batteries-included fullstack framework — SSR · Svelte 5 Runes · Bun · ElysiaJS. File-based routing inspired by SvelteKit. No Node.js, no Vite, no adapters.",
 	"keywords": [

package/src/core/appHtml.ts

@@ -0,0 +1,106 @@
+import { existsSync, readFileSync } from "fs";
+import { join } from "path";
+
+// ─── Types ────────────────────────────────────────────────
+
+export type AppHtmlSegments = {
+	headOpen: string;
+	headClose: string;
+	tail: string;
+	hasCustomFavicon: boolean;
+};
+
+// ─── Cached Singleton ─────────────────────────────────────
+
+let cachedSegments: AppHtmlSegments | undefined;
+
+// ─── Parse & Validate ─────────────────────────────────────
+
+export function loadAppHtmlTemplate(cwd: string = process.cwd()): AppHtmlSegments {
+	const templatePath = join(cwd, "src", "app.html");
+
+	if (!existsSync(templatePath)) {
+		throw new Error(
+			`src/app.html is required but not found. Create src/app.html with %bosia.head% and %bosia.body% placeholders.`,
+		);
+	}
+
+	let template = readFileSync(templatePath, "utf-8");
+
+	// Replace static placeholders at parse time
+	template = replaceStaticPlaceholders(template);
+
+	// Validate required placeholders
+	const missingPlaceholders: string[] = [];
+	if (!template.includes("%bosia.head%")) missingPlaceholders.push("%bosia.head%");
+	if (!template.includes("%bosia.body%")) missingPlaceholders.push("%bosia.body%");
+
+	if (missingPlaceholders.length > 0) {
+		throw new Error(
+			`src/app.html is missing required placeholder(s): ${missingPlaceholders.join(", ")}. ` +
+				`Both %bosia.head% and %bosia.body% must be present.`,
+		);
+	}
+
+	// Split into segments
+	const [headOpen, rest1] = template.split("%bosia.head%", 2);
+	const [headClose, tail] = rest1.split("%bosia.body%", 2);
+
+	// Check for custom favicon
+	const hasCustomFavicon = headOpen.includes('rel="icon"');
+
+	return {
+		headOpen,
+		headClose,
+		tail,
+		hasCustomFavicon,
+	};
+}
+
+function replaceStaticPlaceholders(template: string): string {
+	// Replace %bosia.assets% with BOSIA_ASSETS_BASE env var
+	const assetsBase = process.env.BOSIA_ASSETS_BASE || "";
+	template = template.replaceAll("%bosia.assets%", assetsBase);
+
+	// Replace %bosia.env.PUBLIC_FOO% with process.env.PUBLIC_FOO
+	template = template.replace(/%bosia\.env\.(PUBLIC_[A-Z0-9_]+)%/g, (_match, key: string) => {
+		return process.env[key] ?? "";
+	});
+
+	return template;
+}
+
+// ─── Cached Getter ────────────────────────────────────────
+
+export function getAppHtmlSegments(cwd: string = process.cwd()): AppHtmlSegments {
+	if (cachedSegments !== undefined) {
+		return cachedSegments;
+	}
+	cachedSegments = loadAppHtmlTemplate(cwd);
+	return cachedSegments;
+}
+
+// ─── Cache Invalidation ───────────────────────────────────
+
+export function invalidateAppHtmlCache(): void {
+	cachedSegments = undefined;
+}
+
+// ─── Runtime Interpolation ────────────────────────────────
+
+export function interpolateSegment(
+	segment: string,
+	vars: { nonce?: string; lang?: string },
+): string {
+	let result = segment;
+
+	if (vars.lang) {
+		result = result.replaceAll("%bosia.lang%", vars.lang);
+	}
+
+	if (vars.nonce) {
+		result = result.replaceAll("%bosia.nonce%", vars.nonce);
+	}
+
+	return result;
+}

package/src/core/build.ts

@@ -12,6 +12,7 @@ import { generateEnvModules } from "./envCodegen.ts";
 import { BOSIA_NODE_PATH, OUT_DIR, resolveBosiaBin } from "./paths.ts";
 import { loadPlugins } from "./config.ts";
 import type { BuildContext } from "./types/plugin.ts";
+import { loadAppHtmlTemplate } from "./appHtml.ts";
 
 // Resolved from this file's location inside the bosia package
 const CORE_DIR = import.meta.dir;
@@ -79,6 +80,20 @@ if (manifest.apis.length > 0) {
 	}
 }
 
+// 1b. Load & validate src/app.html template (required)
+let appHtml: any;
+try {
+	appHtml = loadAppHtmlTemplate(process.cwd());
+	console.log(
+		"📄 Loaded src/app.html (favicon override: " +
+			(appHtml.hasCustomFavicon ? "yes" : "no") +
+			")",
+	);
+} catch (err) {
+	console.error(`❌ src/app.html validation failed:\n${(err as Error).message}`);
+	process.exit(1);
+}
+
 for (const p of userPlugins) {
 	if (p.build?.postScan) {
 		await p.build.postScan(manifest, buildCtx);

package/src/core/html.ts

@@ -2,6 +2,8 @@ import { existsSync, readFileSync } from "fs";
 import { getDeclaredEnvKeys } from "./env.ts";
 import { nonceAttr } from "./csp.ts";
 import { OUT_DIR } from "./paths.ts";
+import type { AppHtmlSegments } from "./appHtml.ts";
+import { interpolateSegment } from "./appHtml.ts";
 
 // ─── Dist Manifest ───────────────────────────────────────
 // Maps hashed filenames → script/link tags.
@@ -98,6 +100,7 @@ export function buildHtml(
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
 	bodyEndExtras?: string[],
+	segments?: AppHtmlSegments,
 ): string {
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
@@ -138,6 +141,31 @@ export function buildHtml(
 
 	const bodyEnd = bodyEndExtras?.length ? "\n  " + bodyEndExtras.join("\n  ") : "";
 
+	if (segments) {
+		const safeKey = safeLang(lang);
+		const headOpenInterpolated = interpolateSegment(segments.headOpen, {
+			lang: safeKey,
+			nonce,
+		});
+		const headCloseInterpolated = interpolateSegment(segments.headClose, { nonce });
+		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
+		const faviconLine = segments.hasCustomFavicon
+			? ""
+			: `  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n`;
+
+		return (
+			headOpenInterpolated +
+			`\n  ${faviconLine}${cssLinks}\n` +
+			`  <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">\n` +
+			`  <script${n}>try{var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(_){}</script>\n` +
+			`  ${fallbackTitle}${head}` +
+			headCloseInterpolated +
+			`\n${SPINNER}` +
+			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
+			tailInterpolated
+		);
+	}
+
 	return `<!DOCTYPE html>
 <html lang="${safeLang(lang)}">
 <head>
@@ -161,12 +189,31 @@ export function buildHtml(
 import type { Metadata } from "./hooks.ts";
 
 /** Chunk 1: everything from <!DOCTYPE> through CSS/modulepreload links (head still open) */
-export function buildHtmlShellOpen(lang?: string, nonce?: string): string {
+export function buildHtmlShellOpen(
+	lang?: string,
+	nonce?: string,
+	segments?: AppHtmlSegments,
+): string {
 	const key = safeLang(lang);
 	const n = nonceAttr(nonce);
 	const cssLinks = (distManifest.css ?? [])
 		.map((f: string) => `<link rel="stylesheet" href="/dist/client/${f}">`)
 		.join("\n  ");
+
+	if (segments) {
+		const headOpenInterpolated = interpolateSegment(segments.headOpen, { lang: key, nonce });
+		const faviconLine = segments.hasCustomFavicon
+			? ""
+			: `  <link rel="icon" type="image/svg+xml" href="/favicon.svg">\n`;
+		return (
+			headOpenInterpolated +
+			`\n  ${faviconLine}${cssLinks}\n` +
+			`  <link rel="stylesheet" href="/bosia-tw.css${cacheBust}">\n` +
+			`  <script${n}>try{var t=localStorage.getItem('theme');if(t==='dark'||(!t&&window.matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');else document.documentElement.classList.remove('dark')}catch(_){}</script>\n` +
+			`  <link rel="modulepreload" href="/dist/client/${distManifest.entry}${cacheBust}">`
+		);
+	}
+
 	return (
 		`<!DOCTYPE html>\n<html lang="${key}">\n<head>\n` +
 		`  <meta charset="UTF-8">\n` +
@@ -188,7 +235,11 @@ const SPINNER =
 	`@keyframes __bs__{to{transform:rotate(360deg)}}</style><i></i></div>`;
 
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
-export function buildMetadataChunk(metadata: Metadata | null, headExtras?: string[]): string {
+export function buildMetadataChunk(
+	metadata: Metadata | null,
+	headExtras?: string[],
+	segments?: AppHtmlSegments,
+): string {
 	let out = "\n";
 	if (metadata) {
 		if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
@@ -218,7 +269,14 @@ export function buildMetadataChunk(metadata: Metadata | null, headExtras?: strin
 			if (fragment) out += `  ${fragment}\n`;
 		}
 	}
-	out += `</head>\n<body>\n${SPINNER}`;
+
+	if (segments) {
+		const headCloseInterpolated = interpolateSegment(segments.headClose, {});
+		out += headCloseInterpolated + `\n${SPINNER}`;
+	} else {
+		out += `</head>\n<body>\n${SPINNER}`;
+	}
+
 	return out;
 }
 
@@ -246,6 +304,7 @@ export function buildHtmlTail(
 	nonce?: string,
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
+	segments?: AppHtmlSegments,
 ): string {
 	const n = nonceAttr(nonce);
 	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;
@@ -279,7 +338,14 @@ export function buildHtmlTail(
 			if (fragment) out += `\n${fragment}`;
 		}
 	}
-	out += `\n</body>\n</html>`;
+
+	if (segments) {
+		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
+		out += `\n${tailInterpolated}`;
+	} else {
+		out += `\n</body>\n</html>`;
+	}
+
 	return out;
 }
 

package/src/core/plugins/inspector/bun-plugin.ts

@@ -159,12 +159,14 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 				}
 
 				let js = dev ? fixBindShadow(result.js.code) : result.js.code;
-				// Skip empty CSS — multiple +page.svelte routes with no <style> would
-				// otherwise each emit an empty CSS chunk, all hashing to the same
-				// content → Bun fails with "Multiple files share the same output path".
-				// Also strip dots from basename: Bun's `[name]-[hash].[ext]` chunk
-				// naming treats the first `.` as the extension boundary, so
-				// `+page.svelte-…` collapses to `[name]="+page"` for every route.
+				// Inject component <style> blocks via runtime JS, not CSS chunks.
+				// Bun's `splitting: true` names CSS chunks after the importing JS
+				// chunk's `[name]`, not the virtual module's uid — so when several
+				// routes (e.g. multiple `+page.svelte`) transitively import the same
+				// styled component, each route emits its own CSS sidecar named
+				// `+page-<contentHash>.css`. Identical content → identical hash →
+				// "Multiple files share the same output path". Runtime injection
+				// avoids CSS chunking entirely.
 				if (result.css?.code?.trim() && generate !== "server") {
 					const safeBase = basename(args.path).replace(/\./g, "_");
 					const uid = `${safeBase}-${fnv(args.path)}-style.css`;
@@ -184,7 +186,10 @@ export function createInspectorBunPlugin(opts: InspectorBunPluginOptions): BunPl
 			build.onLoad({ filter: /.*/, namespace: VIRTUAL_NS }, (args) => {
 				const css = virtualCss.get(args.path) ?? "";
 				virtualCss.delete(args.path);
-				return { contents: css, loader: "css" };
+				const contents = css
+					? `(()=>{const s=document.createElement('style');s.textContent=${JSON.stringify(css)};document.head.appendChild(s);})();`
+					: "";
+				return { contents, loader: "js" };
 			});
 		},
 	};

package/src/core/renderer.ts

@@ -20,6 +20,8 @@ import type { Metadata } from "./hooks.ts";
 import { loadPlugins } from "./config.ts";
 import { reportDevErrorFromCatch } from "./devErrorReport.ts";
 import type { BosiaPlugin, RenderContext } from "./types/plugin.ts";
+import { getAppHtmlSegments } from "./appHtml.ts";
+import type { AppHtmlSegments } from "./appHtml.ts";
 
 // Plugins are loaded once per process at module init via top-level await elsewhere
 // (server.ts), but renderer is also reachable from build/prerender contexts where
@@ -99,6 +101,11 @@ if (INTERNAL_HOSTS.size > 0) {
 	console.log(`🍪 Internal hosts (cookies forwarded): ${[...INTERNAL_HOSTS].join(", ")}`);
 }
 
+// ─── App HTML Template ───────────────────────────────────
+// Required; loaded once per process; cached singleton with invalidation for HMR
+
+const appHtmlSegments: AppHtmlSegments = getAppHtmlSegments();
+
 // ─── Session-Aware Fetch ─────────────────────────────────
 // Passed to load() functions so they can call internal APIs with the
 // current user's cookies automatically forwarded. Cookie is attached
@@ -607,8 +614,8 @@ export async function renderSSRStream(
 			);
 		}
 		const html =
-			buildHtmlShellOpen(metadata?.lang, nonce) +
-			buildMetadataChunk(metadata, headExtras) +
+			buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments) +
+			buildMetadataChunk(metadata, headExtras, appHtmlSegments) +
 			buildHtmlTail(
 				"",
 				"",
@@ -621,6 +628,7 @@ export async function renderSSRStream(
 				nonce,
 				data.pageDeps,
 				data.layoutDeps,
+				appHtmlSegments,
 			);
 		return new Response(html, {
 			headers: { "Content-Type": "text/html; charset=utf-8" },
@@ -659,8 +667,8 @@ export async function renderSSRStream(
 
 	// Pre-compute all chunks; pull-based stream gives Bun native backpressure.
 	const chunks: Uint8Array[] = [
-		enc.encode(buildHtmlShellOpen(metadata?.lang, nonce)),
-		enc.encode(buildMetadataChunk(metadata, headExtras)),
+		enc.encode(buildHtmlShellOpen(metadata?.lang, nonce, appHtmlSegments)),
+		enc.encode(buildMetadataChunk(metadata, headExtras, appHtmlSegments)),
 		enc.encode(
 			buildHtmlTail(
 				body,
@@ -674,6 +682,7 @@ export async function renderSSRStream(
 				nonce,
 				data.pageDeps,
 				data.layoutDeps,
+				appHtmlSegments,
 			),
 		),
 	];
@@ -781,6 +790,8 @@ export async function renderPageWithFormData(
 			nonce,
 			data.pageDeps,
 			data.layoutDeps,
+			undefined,
+			appHtmlSegments,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status);
 	}
@@ -808,6 +819,8 @@ export async function renderPageWithFormData(
 		nonce,
 		data.pageDeps,
 		data.layoutDeps,
+		undefined,
+		appHtmlSegments,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status);
 }
@@ -887,6 +900,7 @@ export async function renderErrorPage(
 					null,
 					null,
 					bodyEndExtras,
+					appHtmlSegments,
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -924,6 +938,7 @@ export async function renderErrorPage(
 				null,
 				null,
 				bodyEndExtras,
+				appHtmlSegments,
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/templates/default/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>

package/templates/demo/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%" data-theme="neutral">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>

package/templates/todo/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="%bosia.lang%">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		%bosia.head%
+	</head>
+	<body>
+		%bosia.body%
+	</body>
+</html>