bosia 1.1.6 → 1.2.1

package/src/core/html.ts

@@ -5,8 +5,9 @@ import { nonceAttr } from "./csp.ts";
 import { rebaseHtmlAttrs } from "./basePath.ts";
 import { currentBase } from "./appBase.ts";
 import type { AppHtmlSegments } from "./appHtml.ts";
-import { interpolateSegment } from "./appHtml.ts";
+import { headSplit, interpolateSegment } from "./appHtml.ts";
 import type { Metadata } from "./hooks.ts";
+import { DEFAULT_TITLE, hasTitle } from "./headScan.ts";
 
 // Workers compresses any body sent with a Content-Encoding header — again, if it
 // already is — unless told the bytes are final. Bun ignores the key.
@@ -249,6 +250,8 @@ export function buildHtml(
 	segments?: AppHtmlSegments,
 	metadata?: Metadata | null,
 	pattern?: string,
+	headExtras?: string[],
+	fallbackTitle = DEFAULT_TITLE,
 ): 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
@@ -258,11 +261,11 @@ export function buildHtml(
 	head = rebaseHtmlAttrs(B, head);
 
 	// 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.
+	// buildMetadataChunk uses the same order on the streaming path, so both paths
+	// pick the same winner.
 	const metaTags = rebaseHtmlAttrs(B, metadataTags(metadata ?? null));
-	const fallbackTitle =
-		metaTags.includes("<title>") || head.includes("<title>") ? "" : "<title>Bosia App</title>";
+	const extras = rebaseHtmlAttrs(B, headExtraTags(headExtras));
+	const fallback = titleFallback(segments, metadata, fallbackTitle, extras, head);
 
 	const n = nonceAttr(nonce);
 	const publicEnv = getPublicDynamicEnv();
@@ -271,14 +274,8 @@ export function buildHtml(
 			? `\n  <script${n}>window.__BOSIA_ENV__=${safeJsonStringify(publicEnv)};</script>`
 			: "";
 
-	const ssrFlag = ssr ? "" : "window.__BOSIA_SSR__=false;";
-
-	const depsScript =
-		pageDeps !== null || layoutDeps !== null
-			? `window.__BOSIA_PAGE_DEPS__=${safeJsonStringify(pageDeps)};window.__BOSIA_LAYOUT_DEPS__=${safeJsonStringify(layoutDeps ?? [])};`
-			: "";
-
-	const sysScript = ssrFlag || depsScript ? `\n  <script${n}>${ssrFlag}${depsScript}</script>` : "";
+	const sys = sysScriptBody(ssr, metadata?.title, pageDeps, layoutDeps);
+	const sysScript = sys ? `\n  <script${n}>${sys}</script>` : "";
 
 	const dataIslands = csr
 		? `\n  <script${n} type="application/json" id="__bosia-page-data__">${safeJsonForScript(pageData)}</script>` +
@@ -307,7 +304,6 @@ export function buildHtml(
 			lang: safeKey,
 			nonce,
 		});
-		const headCloseInterpolated = interpolateSegment(segments.headClose, { nonce });
 		const tailInterpolated = interpolateSegment(segments.tail, { nonce });
 		const faviconLine = segments.hasCustomFavicon
 			? ""
@@ -319,8 +315,8 @@ export function buildHtml(
 			componentCssLinks() +
 			`  <script${n}>${THEME_INIT_JS}</script>\n` +
 			preloads +
-			`  ${fallbackTitle}${metaTags}${head}` +
-			headCloseInterpolated +
+			`  ${metaTags}${extras}` +
+			closeHead(segments, lateHead(head, fallback), nonce) +
 			(body ? "" : `\n${SPINNER}`) +
 			`\n  <div id="app">${body}</div>${scripts}${bodyEnd}` +
 			tailInterpolated
@@ -332,10 +328,8 @@ export function buildHtml(
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  ${fallbackTitle}
   <link rel="icon" type="image/svg+xml" href="${FAVICON}">
-${metaTags}  ${head}
-  ${twCssLink()}
+${metaTags}${extras}${lateHead(head, fallback)}  ${twCssLink()}
 ${componentCssLinks()}  <script${n}>${THEME_INIT_JS}</script>
 ${preloads}</head>
 <body>
@@ -424,29 +418,86 @@ export function metadataTags(metadata: Metadata | null): string {
 	return out;
 }
 
+/** app.html's headClose with `late` inserted just before its `</head>`, after any
+ *  markup the app put after %bosia.head%, so <svelte:head> stays last in <head>
+ *  and a page's styles and meta win over app.html's, as they did when it was
+ *  injected client-side. No `</head>` in the segment → `late` goes first. */
+function closeHead(segments: AppHtmlSegments, late: string, nonce?: string): string {
+	const { before, after } = headSplit(segments);
+	return (
+		(before ? interpolateSegment(before, { nonce }) : "") +
+		late +
+		interpolateSegment(after, { nonce })
+	);
+}
+
+/** Plugin `head` fragments, one per line, empty ones skipped. */
+function headExtraTags(headExtras?: string[]): string {
+	let out = "";
+	for (const fragment of headExtras ?? []) {
+		if (fragment) out += `  ${fragment}\n`;
+	}
+	return out;
+}
+
+/** `<title>{text}</title>` unless app.html or one of the head parts already
+ *  has a title. Shared by buildHtml and buildMetadataChunk so both paths make
+ *  the same call; each passes every part it writes into <head> (metadata,
+ *  plugin extras, <svelte:head>). */
+function titleFallback(
+	segments: AppHtmlSegments | undefined,
+	metadata: Metadata | null | undefined,
+	text: string,
+	...parts: string[]
+): string {
+	if (metadata?.title || (segments && appHtmlHasTitle(segments))) return "";
+	return parts.some(hasTitle) ? "" : `<title>${escapeHtml(text)}</title>`;
+}
+
+/** Whether app.html sets its own <title> in its head. */
+export function appHtmlHasTitle(segments: AppHtmlSegments): boolean {
+	return headSplit(segments).hasTitle;
+}
+
+/** <svelte:head>, then the fallback title, for the very end of <head>. The
+ *  fallback goes last so that if hasTitle ever misses a real <title>, the real
+ *  one still comes first and wins; the cost is a spare tag, not a wrong title. */
+function lateHead(head: string, fallbackTitle: string): string {
+	return (head ? `  ${head}\n` : "") + (fallbackTitle ? `  ${fallbackTitle}\n` : "");
+}
+
+export type MetadataChunkOptions = {
+	/** Plugin `head` fragments; they go right after the metadata() tags. */
+	headExtras?: string[];
+	segments?: AppHtmlSegments;
+	/** <svelte:head> output; it goes last, just before app.html's </head>. */
+	head?: string;
+	nonce?: string;
+};
+
 /** Chunk 2: metadata tags + close </head> + open <body> + spinner */
 export function buildMetadataChunk(
 	metadata: Metadata | null,
-	headExtras?: string[],
-	segments?: AppHtmlSegments,
+	{ headExtras, segments, head = "", nonce }: MetadataChunkOptions = {},
 ): string {
-	let out = "\n";
-	out += metadata ? metadataTags(metadata) : `  <title>Bosia App</title>\n`;
-	if (headExtras?.length) {
-		for (const fragment of headExtras) {
-			if (fragment) out += `  ${fragment}\n`;
-		}
-	}
+	// `head` goes in the real <head>, not in a script, so crawlers that don't run
+	// JS still see JSON-LD, icons and og tags. Same order as buildHtml: metadata,
+	// plugin extras, app.html's own head markup, then <svelte:head>.
+	const metaTags = metadataTags(metadata);
+	const extras = headExtraTags(headExtras);
+	const fallbackTitle = titleFallback(segments, metadata, DEFAULT_TITLE, extras, head);
+	let out = "\n" + metaTags + extras;
+	const late = lateHead(head, fallbackTitle);
 
 	if (segments) {
-		const headCloseInterpolated = interpolateSegment(segments.headClose, {});
-		out += headCloseInterpolated + `\n${SPINNER}`;
+		out += closeHead(segments, late, nonce) + `\n${SPINNER}`;
 	} else {
-		out += `</head>\n<body>\n${SPINNER}`;
+		out += `${late}</head>\n<body>\n${SPINNER}`;
 	}
 
-	// All markup, no data islands — safe to rebase wholesale, which is what picks
-	// up an app's own headExtras (a canonical link, an og:image on a local file).
+	// No loader data islands here, so it's safe to rebase wholesale. That picks up
+	// an app's own headExtras (a canonical link, an og:image on a local file) and
+	// <svelte:head> output, which buildHtml rebases the same way.
 	return rebaseHtmlAttrs(B, out);
 }
 
@@ -462,9 +513,24 @@ export function escapeAttr(s: string): string {
 		.replace(/>/g, "&gt;");
 }
 
+/** The window flags hydration reads, shared by buildHtml and buildHtmlTail.
+ *  `__BOSIA_TITLE__` is the title metadata() gave: navigation may replace it,
+ *  but not a title a component set after it (client/App.svelte). */
+function sysScriptBody(
+	ssr: boolean,
+	title: string | undefined,
+	pageDeps: any,
+	layoutDeps: any[] | null,
+): string {
+	let js = ssr ? "" : "window.__BOSIA_SSR__=false;";
+	if (title) js += `window.__BOSIA_TITLE__=${safeJsonStringify(title)};`;
+	if (pageDeps !== null || layoutDeps !== null)
+		js += `window.__BOSIA_PAGE_DEPS__=${safeJsonStringify(pageDeps)};window.__BOSIA_LAYOUT_DEPS__=${safeJsonStringify(layoutDeps ?? [])};`;
+	return js;
+}
+
 export function buildHtmlTail(
 	body: string,
-	head: string,
 	pageData: any,
 	layoutData: any[],
 	csr: boolean,
@@ -475,16 +541,14 @@ export function buildHtmlTail(
 	pageDeps: any = null,
 	layoutDeps: any[] | null = null,
 	segments?: AppHtmlSegments,
+	ssrTitle?: string,
 ): string {
 	// Same rebase as buildHtml — the streamed tail carries the identical markup.
 	body = rebaseHtmlAttrs(B, body);
-	head = rebaseHtmlAttrs(B, head);
 
 	const n = nonceAttr(nonce);
 	let out = `<script${n}>document.getElementById('__bs__').remove()</script>`;
 	out += `\n<div id="app">${body}</div>`;
-	if (head)
-		out += `\n<script${n}>document.head.insertAdjacentHTML('beforeend',${safeJsonStringify(head)})</script>`;
 	if (csr) {
 		out += baseScript(nonce);
 		const publicEnv = getPublicDynamicEnv();
@@ -496,14 +560,8 @@ export function buildHtmlTail(
 		if (formData != null) {
 			out += `\n<script${n} type="application/json" id="__bosia-form-data__">${safeJsonForScript(formData)}</script>`;
 		}
-		const ssrFlag = ssr ? "" : "window.__BOSIA_SSR__=false;";
-		const depsInject =
-			pageDeps !== null || layoutDeps !== null
-				? `window.__BOSIA_PAGE_DEPS__=${safeJsonStringify(pageDeps)};window.__BOSIA_LAYOUT_DEPS__=${safeJsonStringify(layoutDeps ?? [])};`
-				: "";
-		if (ssrFlag || depsInject) {
-			out += `\n<script${n}>${ssrFlag}${depsInject}</script>`;
-		}
+		const sys = sysScriptBody(ssr, ssrTitle, pageDeps, layoutDeps);
+		if (sys) out += `\n<script${n}>${sys}</script>`;
 		out += `\n<script${n} type="module" src="${ENTRY}"></script>`;
 	} else if (isDev) {
 		out += `\n<script${n}>!function r(){var e=new EventSource("${SSE}");e.addEventListener("reload",()=>location.reload());e.onopen=()=>r._ok||(r._ok=1);e.onerror=()=>{e.close();setTimeout(r,2000)}}()</script>`;