bosia 0.9.1 → 0.9.3

package/package.json

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

package/src/core/client/App.svelte

@@ -394,18 +394,29 @@
 
 			settleScroll();
 
-			// Update document title and meta description from server metadata
-			if (result?.metadata) {
-				if (result.metadata.title) document.title = result.metadata.title;
-				if (result.metadata.description) {
-					let meta = document.querySelector('meta[name="description"]') as HTMLMetaElement | null;
-					if (!meta) {
-						meta = document.createElement("meta");
-						meta.name = "description";
-						document.head.appendChild(meta);
-					}
-					meta.content = result.metadata.description;
-				}
+			// Re-emit the head from server metadata. `data-bosia-meta` (html.ts `OWNED`)
+			// marks exactly the tags metadata() owns, so headExtras, the framework's own
+			// static tags and <svelte:head> output are never touched. `result === null`
+			// with server data means the fetch failed — leave the head as it is; without
+			// server data there is no metadata() at all, so clearing matches SSR.
+			if (result || !match.route.hasServerData) {
+				const md = result?.metadata;
+				document.querySelectorAll("[data-bosia-meta]").forEach((el) => el.remove());
+				// A page that declares no title keeps the previous one rather than flashing
+				// the "Bosia App" fallback. Give metadata() a title if that matters.
+				if (md?.title) document.title = md.title;
+				if (md?.lang) document.documentElement.lang = md.lang;
+				const emit = (tag: "meta" | "link", attrs: Record<string, string | undefined>) => {
+					const el = document.createElement(tag);
+					for (const [k, v] of Object.entries(attrs)) if (v != null) el.setAttribute(k, v);
+					el.setAttribute("data-bosia-meta", "");
+					document.head.appendChild(el);
+				};
+				if (md?.description) emit("meta", { name: "description", content: md.description });
+				for (const m of md?.meta ?? [])
+					emit("meta", { name: m.name, property: m.property, content: m.content });
+				for (const l of md?.link ?? [])
+					emit("link", { rel: l.rel, href: l.href, hreflang: l.hreflang });
 			}
 
 			settle({ url, params: match.params });

package/src/core/html.ts

@@ -6,6 +6,7 @@ import { rebaseHtmlAttrs } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 import type { AppHtmlSegments } from "./appHtml.ts";
 import { interpolateSegment } from "./appHtml.ts";
+import type { Metadata } from "./hooks.ts";
 
 // ─── Dist Manifest ───────────────────────────────────────
 // Maps hashed filenames → script/link tags.
@@ -143,6 +144,7 @@ export function buildHtml(
 	layoutDeps: any[] | null = null,
 	bodyEndExtras?: string[],
 	segments?: AppHtmlSegments,
+	metadata?: Metadata | null,
 ): 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
@@ -155,7 +157,12 @@ export function buildHtml(
 		.map((f: string) => `<link rel="stylesheet" href="${DIST}/${f}">`)
 		.join("\n  ");
 
-	const fallbackTitle = head.includes("<title>") ? "" : "<title>Bosia App</title>";
+	// Metadata goes in before `head`: the first <title> in the document wins, and
+	// the streaming path already puts metadata() ahead of <svelte:head> content
+	// (which arrives later via buildHtmlTail). Same order = same winner on both paths.
+	const metaTags = rebaseHtmlAttrs(B, metadataTags(metadata ?? null));
+	const fallbackTitle =
+		metaTags.includes("<title>") || head.includes("<title>") ? "" : "<title>Bosia App</title>";
 
 	const n = nonceAttr(nonce);
 	const publicEnv = getPublicDynamicEnv();
@@ -206,7 +213,7 @@ export function buildHtml(
 			`\n  ${faviconLine}${cssLinks}\n` +
 			`  ${twCssLink()}\n` +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
-			`  ${fallbackTitle}${head}` +
+			`  ${fallbackTitle}${metaTags}${head}` +
 			headCloseInterpolated +
 			(body ? "" : `\n${SPINNER}`) +
 			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
@@ -221,7 +228,7 @@ export function buildHtml(
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
-  ${head}
+${metaTags}  ${head}
   ${cssLinks}
   ${twCssLink()}
   <script${n}>${THEME_INIT_JS}</script>
@@ -234,8 +241,6 @@ export function buildHtml(
 
 // ─── Streaming HTML Helpers ──────────────────────────────
 
-import type { Metadata } from "./hooks.ts";
-
 /** Chunk 1: everything from <!DOCTYPE> through CSS/modulepreload links (head still open) */
 export function buildHtmlShellOpen(
 	lang?: string,
@@ -282,6 +287,39 @@ const SPINNER =
 	`border-radius:50%;animation:__bs__ .8s linear infinite}` +
 	`@keyframes __bs__{to{transform:rotate(360deg)}}</style><i></i></div>`;
 
+/** Marks the tags `metadata()` owns, so the client router can replace exactly
+ *  these on navigation and leave `headExtras`, the framework's own static tags
+ *  and `<svelte:head>` output alone. Read by `client/App.svelte`. */
+export const OWNED = "data-bosia-meta";
+
+/** The `metadata()` tags themselves, indented head-ready. Shared by the streaming
+ *  path (buildMetadataChunk) and the non-streaming one (buildHtml) so the two
+ *  renderers cannot drift on what `metadata()` emits. */
+export function metadataTags(metadata: Metadata | null): string {
+	if (!metadata) return "";
+	let out = "";
+	if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
+	if (metadata.description) {
+		out += `  <meta name="description" content="${escapeAttr(metadata.description)}" ${OWNED}>\n`;
+	}
+	if (metadata.meta) {
+		for (const m of metadata.meta) {
+			const attrs = m.name
+				? `name="${escapeAttr(m.name)}"`
+				: `property="${escapeAttr(m.property ?? "")}"`;
+			out += `  <meta ${attrs} content="${escapeAttr(m.content)}" ${OWNED}>\n`;
+		}
+	}
+	if (metadata.link) {
+		for (const l of metadata.link) {
+			let attrs = `rel="${escapeAttr(l.rel)}" href="${escapeAttr(l.href)}"`;
+			if (l.hreflang) attrs += ` hreflang="${escapeAttr(l.hreflang)}"`;
+			out += `  <link ${attrs} ${OWNED}>\n`;
+		}
+	}
+	return out;
+}
+
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
 export function buildMetadataChunk(
 	metadata: Metadata | null,
@@ -289,29 +327,7 @@ export function buildMetadataChunk(
 	segments?: AppHtmlSegments,
 ): string {
 	let out = "\n";
-	if (metadata) {
-		if (metadata.title) out += `  <title>${escapeHtml(metadata.title)}</title>\n`;
-		if (metadata.description) {
-			out += `  <meta name="description" content="${escapeAttr(metadata.description)}">\n`;
-		}
-		if (metadata.meta) {
-			for (const m of metadata.meta) {
-				const attrs = m.name
-					? `name="${escapeAttr(m.name)}"`
-					: `property="${escapeAttr(m.property ?? "")}"`;
-				out += `  <meta ${attrs} content="${escapeAttr(m.content)}">\n`;
-			}
-		}
-		if (metadata.link) {
-			for (const l of metadata.link) {
-				let attrs = `rel="${escapeAttr(l.rel)}" href="${escapeAttr(l.href)}"`;
-				if (l.hreflang) attrs += ` hreflang="${escapeAttr(l.hreflang)}"`;
-				out += `  <link ${attrs}>\n`;
-			}
-		}
-	} else {
-		out += `  <title>Bosia App</title>\n`;
-	}
+	out += metadata ? metadataTags(metadata) : `  <title>Bosia App</title>\n`;
 	if (headExtras?.length) {
 		for (const fragment of headExtras) {
 			if (fragment) out += `  ${fragment}\n`;

package/src/core/renderer.ts

@@ -509,6 +509,9 @@ export async function loadMetadata(
 			);
 		}
 	} catch (err) {
+		// Control flow thrown from metadata() is intent, not failure — swallowing it
+		// here made every caller's Redirect/HttpError branch dead code.
+		if (err instanceof Redirect || err instanceof HttpError) throw err;
 		if (isDev) console.error("Metadata load error:", err);
 		else console.error("Metadata load error:", (err as Error).message ?? err);
 		if (isDev) reportDevErrorFromCatch(err);
@@ -845,7 +848,9 @@ export async function renderSSRStream(
 
 // ─── Form Action Page Renderer ───────────────────────────
 // Re-runs load functions after a form action, renders with form data.
-// Uses non-streaming buildHtml so we can control the status code.
+// Uses non-streaming buildHtml so we can control the status code. Resolves
+// metadata() here too — the GET path's title, meta/link tags, lang and
+// metadata.data must survive a submit, or the page changes under the user.
 
 export async function renderPageWithFormData(
 	url: URL,
@@ -871,11 +876,36 @@ export async function renderPageWithFormData(
 			nonce,
 		);
 
-	const { route } = match;
+	const { route, params } = match;
+
+	// Serial, not parallel: metadata.data feeds the loader below.
+	let metadata: Metadata | null = null;
+	try {
+		metadata = await loadMetadata(route, params, url, locals, cookies, req);
+	} catch (err) {
+		if (err instanceof Redirect) return Response.redirect(err.location, err.status);
+		if (err instanceof HttpError) {
+			return renderErrorPage(
+				err.status,
+				err.message,
+				url,
+				req,
+				route,
+				undefined,
+				undefined,
+				undefined,
+				nonce,
+			);
+		}
+		if (isDev) console.error("Metadata load error:", err);
+		else console.error("Metadata load error:", (err as Error).message ?? err);
+		if (isDev) reportDevErrorFromCatch(err);
+		// Continue with null metadata — don't break the page for a metadata failure
+	}
 
 	// Load components + data in parallel
 	const [data, pageMod, layoutMods] = await Promise.all([
-		loadRouteData(url, locals, req, cookies, null, match),
+		loadRouteData(url, locals, req, cookies, metadata?.data ?? null, match),
 		route.pageModule(),
 		Promise.all(route.layoutModules.map((l: () => Promise<any>) => l())),
 	]);
@@ -893,6 +923,23 @@ export async function renderPageWithFormData(
 			nonce,
 		);
 
+	const renderCtx: RenderContext = {
+		request: req,
+		url,
+		route: { pattern: route.pattern },
+		metadata,
+	};
+	const [headExtras, bodyEndExtras] = await Promise.all([
+		pluginRenderFragments("head", renderCtx),
+		pluginRenderFragments("bodyEnd", renderCtx),
+	]);
+	// buildHtml has no headExtras slot; fold them in ahead of the SSR head, which
+	// is where buildMetadataChunk puts them on the streaming path.
+	const headWithExtras = (ssrHead: string) => {
+		const extras = headExtras.filter(Boolean);
+		return extras.length ? `${extras.join("\n  ")}\n  ${ssrHead}` : ssrHead;
+	};
+
 	// Form-action re-render always runs every loader (no client mask).
 	const layoutDataFull = (data.layoutData as Record<string, any>[]).map((d) => d ?? {});
 	const pageDataFull = data.pageData ?? {};
@@ -905,18 +952,19 @@ export async function renderPageWithFormData(
 		}
 		const html = buildHtml(
 			"",
-			"",
+			headWithExtras(""),
 			pageDataFull,
 			layoutDataFull,
 			true,
 			formData,
-			undefined,
+			metadata?.lang,
 			false,
 			nonce,
 			data.pageDeps,
 			data.layoutDeps,
-			undefined,
+			bodyEndExtras,
 			appHtmlSegments,
+			metadata,
 		);
 		return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 	}
@@ -934,18 +982,19 @@ export async function renderPageWithFormData(
 
 	const html = buildHtml(
 		body,
-		head,
+		headWithExtras(head),
 		pageDataFull,
 		layoutDataFull,
 		data.csr,
 		formData,
-		undefined,
+		metadata?.lang,
 		true,
 		nonce,
 		data.pageDeps,
 		data.layoutDeps,
-		undefined,
+		bodyEndExtras,
 		appHtmlSegments,
+		metadata,
 	);
 	return compress(html, "text/html; charset=utf-8", req, status, data.loaderHeaders);
 }
@@ -971,6 +1020,13 @@ export async function renderErrorPage(
 	// is dead bytes without a matching policy header.
 	if (!CSP_ENABLED) nonce = undefined;
 
+	// The route's own metadata() is deliberately NOT run here — the route may be
+	// what failed, and a 404 has no route at all. Synthesize a status title only
+	// when the error component didn't set one, so <svelte:head><title> in a custom
+	// +error.svelte still wins.
+	const errMeta = (head: string): Metadata | null =>
+		head.includes("<title>") ? null : { title: `${status} — ${message}` };
+
 	// Inspector overlay and other plugin bodyEnd fragments must be injected
 	// on error pages too — otherwise SSE never connects and runtime errors
 	// from the failing render are invisible in the UI.
@@ -978,7 +1034,7 @@ export async function renderErrorPage(
 		request: req,
 		url,
 		route: route ? { pattern: route.pattern } : { pattern: "" },
-		metadata: null,
+		metadata: errMeta(""),
 	};
 	const bodyEndExtras = await pluginRenderFragments("bodyEnd", renderCtx);
 
@@ -1024,6 +1080,7 @@ export async function renderErrorPage(
 					null,
 					bodyEndExtras,
 					appHtmlSegments,
+					errMeta(head),
 				);
 				return compress(html, "text/html; charset=utf-8", req, status);
 			} catch (err) {
@@ -1059,6 +1116,7 @@ export async function renderErrorPage(
 				null,
 				bodyEndExtras,
 				appHtmlSegments,
+				errMeta(head),
 			);
 			return compress(html, "text/html; charset=utf-8", req, status);
 		} catch (err) {

package/src/core/server.ts

@@ -303,7 +303,16 @@ async function resolve(event: RequestEvent): Promise<Response> {
 							cookies,
 							request,
 						);
-						if (meta) metadata = { title: meta.title, description: meta.description };
+						// Explicit whitelist, not a spread: `metadata.data` feeds load() on the
+						// server and may hold secrets — it must not reach the client.
+						if (meta)
+							metadata = {
+								title: meta.title,
+								description: meta.description,
+								meta: meta.meta,
+								link: meta.link,
+								lang: meta.lang,
+							};
 					} catch {
 						/* non-fatal */
 					}