@lovrozagar/flare 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lovrozagar/flare",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "Solid meta-framework. Server-driven, NDJSON streaming, renderToStream.",
 	"keywords": [
 		"flare",

package/src/head-client/index.ts

@@ -17,6 +17,7 @@ const managedHreflangTags = new Set<string>();
 /* CSS lifecycle: per-route elements + refcounted dedup for shared stylesheets */
 const cssElementsByRoute = new Map<string, HTMLElement[]>();
 const cssRefCount = new Map<string, { element: HTMLElement; refCount: number }>();
+const styleRefCount = new Map<string, { element: HTMLElement; refCount: number }>();
 
 export function clearRouteTracking(): void {
 	baseTitle = "";
@@ -26,6 +27,7 @@ export function clearRouteTracking(): void {
 	managedHreflangTags.clear();
 	cssElementsByRoute.clear();
 	cssRefCount.clear();
+	styleRefCount.clear();
 }
 
 export function initRouteHierarchy(matchIds: string[], rootTitle?: string): void {
@@ -561,24 +563,72 @@ function addCssLinkForRoute(matchId: string, href: string): void {
 	cssElementsByRoute.set(matchId, list);
 }
 
-function addCssStyleForRoute(matchId: string, children: string): void {
-	if (typeof document === "undefined") return;
-	const el = document.createElement("style");
+function stampStyleNonce(el: HTMLElement): void {
+	if (el.getAttribute("nonce") || el.nonce) return;
 	const meta = document.querySelector?.('meta[name="csp-nonce"]');
 	const tagged = document.querySelector?.("script[nonce], style[nonce]") as HTMLElement | null;
 	const nonce = meta?.getAttribute("content") || tagged?.nonce || tagged?.getAttribute("nonce") || "";
-	if (nonce) {
-		el.setAttribute("nonce", nonce);
-		el.nonce = nonce;
+	if (!nonce) return;
+	el.setAttribute("nonce", nonce);
+	el.nonce = nonce;
+}
+
+function isInfraStyle(el: HTMLElement): boolean {
+	const id = el.getAttribute("id");
+	return id === "flare-runtime" || id === "flare-critical";
+}
+
+function isStyleTracked(el: HTMLElement): boolean {
+	for (const ref of styleRefCount.values()) {
+		if (ref.element === el) return true;
 	}
-	el.setAttribute("data-flare-route", matchId);
-	el.textContent = children;
-	document.head.appendChild(el);
+	return false;
+}
+
+function findAdoptableStyle(children: string): HTMLElement | null {
+	const nodes = document.head?.querySelectorAll("style");
+	if (!nodes) return null;
+	for (const node of nodes) {
+		const el = node as HTMLElement;
+		if (isInfraStyle(el) || isStyleTracked(el)) continue;
+		if (el.textContent === children) return el;
+	}
+	return null;
+}
+
+function trackStyleForRoute(matchId: string, el: HTMLElement): void {
 	const list = cssElementsByRoute.get(matchId) ?? [];
 	list.push(el);
 	cssElementsByRoute.set(matchId, list);
 }
 
+function addCssStyleForRoute(matchId: string, children: string): void {
+	if (typeof document === "undefined") return;
+	const ref = styleRefCount.get(children);
+	if (ref) {
+		ref.refCount++;
+		trackStyleForRoute(matchId, ref.element);
+		return;
+	}
+
+	const existing = findAdoptableStyle(children);
+	if (existing) {
+		existing.setAttribute("data-flare-route", matchId);
+		stampStyleNonce(existing);
+		styleRefCount.set(children, { element: existing, refCount: 1 });
+		trackStyleForRoute(matchId, existing);
+		return;
+	}
+
+	const el = document.createElement("style");
+	stampStyleNonce(el);
+	el.setAttribute("data-flare-route", matchId);
+	el.textContent = children;
+	document.head.appendChild(el);
+	styleRefCount.set(children, { element: el, refCount: 1 });
+	trackStyleForRoute(matchId, el);
+}
+
 function applyCssForRoute(matchId: string, config: HeadConfig): void {
 	/* Snapshot old elements before adding new ones */
 	const oldElements = cssElementsByRoute.get(matchId) ?? [];
@@ -608,20 +658,34 @@ function applyCssForRoute(matchId: string, config: HeadConfig): void {
 
 	/* THEN decrement old refcounts — shared elements stay because new refs were added above */
 	for (const el of oldElements) {
-		const href = el.getAttribute("href");
-		if (href && el.getAttribute("rel") === "stylesheet") {
-			const ref = cssRefCount.get(href);
-			if (ref) {
-				ref.refCount--;
-				if (ref.refCount <= 0) {
-					ref.element.remove();
-					cssRefCount.delete(href);
-				}
-				continue;
+		releaseCssElement(el);
+	}
+}
+
+function releaseCssElement(el: HTMLElement): void {
+	const href = el.getAttribute("href");
+	if (href && el.getAttribute("rel") === "stylesheet") {
+		const ref = cssRefCount.get(href);
+		if (ref) {
+			ref.refCount--;
+			if (ref.refCount <= 0) {
+				ref.element.remove();
+				cssRefCount.delete(href);
 			}
+			return;
 		}
-		el.remove();
 	}
+	const content = el.textContent ?? "";
+	const styleRef = styleRefCount.get(content);
+	if (styleRef && styleRef.element === el) {
+		styleRef.refCount--;
+		if (styleRef.refCount <= 0) {
+			styleRef.element.remove();
+			styleRefCount.delete(content);
+		}
+		return;
+	}
+	el.remove();
 }
 
 function removeCssForRoute(routeId: string): void {
@@ -629,21 +693,7 @@ function removeCssForRoute(routeId: string): void {
 	if (!elements) return;
 
 	for (const el of elements) {
-		const href = el.getAttribute("href");
-		/* Refcounted stylesheet links */
-		if (href && el.getAttribute("rel") === "stylesheet") {
-			const ref = cssRefCount.get(href);
-			if (ref) {
-				ref.refCount--;
-				if (ref.refCount <= 0) {
-					ref.element.remove();
-					cssRefCount.delete(href);
-				}
-				continue;
-			}
-		}
-		/* <style> elements or untracked links — just remove */
-		el.remove();
+		releaseCssElement(el);
 	}
 	cssElementsByRoute.delete(routeId);
 }

package/src/loader-pipeline/index.ts

@@ -96,6 +96,8 @@ export interface PipelineResult {
 	auth: unknown | null;
 	deferContexts: Map<string, DeferContext>;
 	matches: PipelineMatch[];
+	/** Accumulated merge (root → page) for SSR `resolvedHead`. */
+	mergedHead?: HeadConfig;
 }
 
 export interface PipelineMatch {
@@ -237,6 +239,23 @@ async function buildInternalRoutes(
 	return result;
 }
 
+/**
+ * Per-match head for client apply (`ph`, NDJSON, match cache).
+ * Scalars / objects / images / jsonLd stay merged so upsert and
+ * remove-all-then-append fields still see the full set. Concatenate
+ * `custom.*` arrays stay on the declaring route so descendants do not replay them.
+ */
+function toClientHeadConfig(merged: HeadConfig | undefined, own: HeadConfig | undefined): HeadConfig | undefined {
+	if (!merged) return undefined;
+	const client: HeadConfig = { ...merged };
+	if (own?.custom !== undefined) {
+		client.custom = own.custom;
+	} else {
+		delete client.custom;
+	}
+	return client;
+}
+
 export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>): Promise<PipelineResult> {
 	const { abortController, cause, env, localeConfig, prefetch, request, routes, ssrCacheDefaults, url } = config;
 	const tracer = config.tracer ?? noopTracer;
@@ -605,11 +624,12 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 	let mergedHead: HeadConfig | undefined;
 
 	for (const match of matches) {
+		let routeHead: HeadConfig | undefined;
 		if (match.route.head && match.status === "success") {
 			const location = routeLocationMap.get(match.route);
 			if (location) {
 				try {
-					const routeHead = match.route.head({
+					routeHead = match.route.head({
 						...urlHelpers,
 						cause,
 						loaderData: match.loaderData,
@@ -631,10 +651,13 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 					}
 				} catch (e: unknown) {
 					match.headError = e instanceof Error ? e : new Error(String(e));
+					routeHead = undefined;
 				}
 			}
 		}
-		match.headConfig = mergedHead;
+		/* Client apply uses this match's own custom.* so concatenate fields
+		 * are not replayed once per descendant. SSR uses `mergedHead`. */
+		match.headConfig = toClientHeadConfig(mergedHead, routeHead);
 	}
 	headSpan.end();
 
@@ -693,5 +716,5 @@ export async function runPipeline<TEnv = unknown>(config: PipelineConfig<TEnv>):
 	}
 	headersSpan.end();
 
-	return { auth, deferContexts, matches };
+	return { auth, deferContexts, matches, mergedHead };
 }

package/src/server-handler/index.ts

@@ -1214,7 +1214,7 @@ export function createServerHandler<
 										});
 									}
 
-									const resolvedHead = pipelineResult.matches.findLast((m) => m.headConfig)?.headConfig ?? {};
+									const resolvedHead = pipelineResult.mergedHead ?? {};
 
 									const fuzzyLogs = enableServerLogs ? getServerLogs() : undefined;
 									if (request.headers.get(HEADER_DATA) === HEADER_FLAG) {
@@ -1517,7 +1517,7 @@ export function createServerHandler<
 						const logsForTransport = collectedLogs && collectedLogs.length > 0 ? collectedLogs : undefined;
 
 						if (!isDataRequest) {
-							const resolvedHead = pipelineResult.matches.findLast((m) => m.headConfig)?.headConfig ?? {};
+							const resolvedHead = pipelineResult.mergedHead ?? {};
 
 							let ssrResult: ReturnType<typeof renderToStream>;
 							setRewrite(composedRewrite);