@lovrozagar/flare 0.1.1 → 0.2.0

package/src/hydrate/index.tsx

@@ -3,8 +3,10 @@ import swConfig from "virtual:flare-sw-config";
 
 declare const __FLARE_IS_DEV__: boolean | undefined;
 const isDevDefault = typeof __FLARE_IS_DEV__ === "boolean" ? __FLARE_IS_DEV__ : false;
-import type { JSX } from "solid-js";
-import { createComponent, render, hydrate as solidHydrate } from "solid-js/web";
+import { flush } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { createComponent, Hydration, render, hydrate as solidHydrate } from "@solidjs/web";
+import { SSRContextProvider } from "../components/ssr-context.tsx";
 import { createChannel } from "../broadcast/channel.ts";
 import { BroadcastProvider } from "../broadcast/provider.tsx";
 import type { MatchCache } from "../caches/index.ts";
@@ -17,9 +19,11 @@ import {
 	extractRootBoundaries,
 	hydrateHeadState,
 	loadRouteModules,
+	applyMatchCacheTags,
 	populateMatchCache,
 } from "../hydration/index.ts";
 import { onceIdle } from "../internal/once-idle.ts";
+import { ATTR_HYDRATED } from "../protocol.ts";
 import { setupNavigation } from "../navigation/index.ts";
 import type { LoadedRouteModule } from "../navigation/types.ts";
 import { FlareProvider, Outlet, useRouter } from "../outlet/index.tsx";
@@ -55,13 +59,10 @@ export interface HydrateOptions {
 	onInteraction?: () => void;
 }
 
-/**
- * Matches SSR's Hydration component depth.
- * Hydration is a single-child-passthrough, Dummy matches its depth
- * so hydration keys align between SSR and client.
- */
-function Dummy(props: { children: JSX.Element }): JSX.Element {
-	return props.children;
+function readDocumentNonce(): string {
+	if (typeof document === "undefined") return "";
+	const meta = document.querySelector('meta[name="csp-nonce"]');
+	return meta?.getAttribute("content") || meta?.getAttribute("nonce") || "";
 }
 
 function RootRenderer(props: {
@@ -71,8 +72,11 @@ function RootRenderer(props: {
 	renderFn: (p: RenderProps) => JSX.Element;
 }): JSX.Element {
 	const router = useRouter();
+	/* Getter so <Outlet> does not consume hydration child ids before <html>. */
 	return props.renderFn({
-		children: <Outlet />,
+		get children() {
+			return <Outlet />;
+		},
 		loaderData: props.data,
 		location: props.location,
 		preloaderContext: props.preloaderContext,
@@ -156,7 +160,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		}
 		const { QueryClientProvider } = await import("../query-client");
 		QCP = QueryClientProvider as typeof QCP;
-		installQueryCacheResolver(queryClientInstance);
+		/* `__flare_queries` is drained after solidHydrate — observers must attach first. */
 	}
 
 	/* Build composed rewrite: basePath (if any) + user rewrite */
@@ -178,6 +182,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		const rootLayout = modules.layouts.find((m) => m._type === "root-layout");
 		const nonRootLayouts = modules.layouts.filter((m) => m._type !== "root-layout");
 		const allModules: LoadedRouteModule[] = [...nonRootLayouts, modules.page];
+		applyMatchCacheTags(matchCache, allModules, modules.params, search);
 
 		/* Build error map from per-match error names (survives serialization) */
 		const errorMap = new Map<string, Error>();
@@ -199,61 +204,71 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 		const rootMatchState = rootLayout ? state.matches.find((m) => m.virtualPath === rootLayout.virtualPath) : undefined;
 
 		/*
-		 * Full-document hydration: providers wrap root layout so components
-		 * inside root layout (e.g. NavigationProgress) have RouterContext.
+		 * Full-document hydration. SSR and client wrappers must match —
+		 * Solid 2 `_hk` ids follow the owner tree.
 		 *
-		 * SSR:    Hydration > QCP? > Theme > Direction > Broadcast > FlareProvider > rootRenderFn({children: Outlet})
-		 * Client: Dummy     > QCP? > Theme > Direction > Broadcast > FlareProvider > rootRenderFn({children: Outlet})
+		 * Both: Hydration > QCP? > SSRContextProvider > Theme > Direction >
+		 *       Broadcast > FlareProvider > rootRenderFn({children: Outlet})
 		 */
 		const channel = createChannel();
 		const renderInner = () => (
-			<ThemeProvider config={r.theme}>
-				<DirectionProvider config={r.direction}>
-					<BroadcastProvider value={channel}>
-						<FlareProvider
-							boundaries={rootBoundaries}
-							caseSensitive={r.caseSensitive}
-							layouts={r.layouts}
-							localeConfig={r.locale}
-							matchCache={matchCache}
-							matches={initialMatches}
-							onContextReady={(ctx) => {
-								resolveCtx(ctx);
-							}}
-							params={state.params}
-							prefetchCache={prefetchCache}
-							resolvers={state.resolvers}
-							routerCacheDefaults={r.cache?.client || undefined}
-							routeTree={r.routeTree}
-							search={search}
-						>
-							{rootLayout?.render ? (
-								<RootRenderer
-									data={rootMatchState?.loaderData}
-									location={{
-										hash: window.location.hash,
-										params: state.params,
-										pathname: state.pathname,
-										search,
-										url: new URL(window.location.href),
-										variablePath: "",
-										virtualPath: rootLayout.virtualPath,
-									}}
-									preloaderContext={rootMatchState?.preloaderContext}
-									renderFn={rootLayout.render}
-								/>
-							) : (
-								<Outlet />
-							)}
-						</FlareProvider>
-					</BroadcastProvider>
-				</DirectionProvider>
-			</ThemeProvider>
+			<SSRContextProvider
+				value={{
+					direction: r.direction,
+					flareStateScript: "",
+					isServer: false,
+					nonce: readDocumentNonce(),
+					theme: r.theme,
+				}}
+			>
+				<ThemeProvider config={r.theme}>
+					<DirectionProvider config={r.direction}>
+						<BroadcastProvider value={channel}>
+							<FlareProvider
+								boundaries={rootBoundaries}
+								caseSensitive={r.caseSensitive}
+								layouts={r.layouts}
+								localeConfig={r.locale}
+								matchCache={matchCache}
+								matches={initialMatches}
+								onContextReady={(ctx) => {
+									resolveCtx(ctx);
+								}}
+								params={state.params}
+								prefetchCache={prefetchCache}
+								resolvers={state.resolvers}
+								routerCacheDefaults={r.cache?.client || undefined}
+								routeTree={r.routeTree}
+								search={search}
+							>
+								{rootLayout?.render ? (
+									RootRenderer({
+										data: rootMatchState?.loaderData,
+										location: {
+											hash: window.location.hash,
+											params: state.params,
+											pathname: state.pathname,
+											search,
+											url: new URL(window.location.href),
+											variablePath: "",
+											virtualPath: rootLayout.virtualPath,
+										},
+										preloaderContext: rootMatchState?.preloaderContext,
+										renderFn: rootLayout.render,
+									})
+								) : (
+									<Outlet />
+								)}
+							</FlareProvider>
+						</BroadcastProvider>
+					</DirectionProvider>
+				</ThemeProvider>
+			</SSRContextProvider>
 		);
 
 		solidHydrate(
 			() => (
-				<Dummy>
+				<Hydration>
 					{QCP && queryClientInstance
 						? createComponent(QCP, {
 								get children() {
@@ -262,12 +277,27 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 								client: queryClientInstance,
 							})
 						: renderInner()}
-				</Dummy>
+				</Hydration>
 			),
 			document,
 		);
+		flush();
 		finishHydration();
 
+		if (queryClientInstance) {
+			/*
+			 * TanStack `useQuery` (no HydrationCoordinator) attaches its cache
+			 * subscriber on a microtask after the hydration replay. Streamed
+			 * `__flare_queries` must land after that attach — applying it earlier
+			 * writes deferred data into a cache with no observers, and the
+			 * SSR-serialized fallback stays on screen.
+			 */
+			await Promise.resolve();
+			await Promise.resolve();
+			installQueryCacheResolver(queryClientInstance);
+			flush();
+		}
+
 		replaceHistoryState(window.location.pathname, state.params, window.location.search, {
 			hash: window.location.hash,
 			historyIndex: 0,
@@ -352,7 +382,7 @@ export async function hydrate(router: RouterArg, options?: HydrateOptions): Prom
 			render(() => <DevErrorOverlay />, overlayRoot);
 		}
 
-		document.documentElement.setAttribute("data-hydrated", "");
+		document.documentElement.setAttribute(ATTR_HYDRATED, "");
 	}
 
 	/* Service worker registration / unregistration */

package/src/hydration/index.ts

@@ -1,6 +1,5 @@
-import { batch } from "solid-js";
 import type { GlobalBoundaries } from "../boundaries/index.ts";
-import type { CachedMatch, MatchCache } from "../caches/index.ts";
+import { resolveCacheTags, type CachedMatch, type MatchCache } from "../caches/index.ts";
 import { applyPerRouteHeads, initRouteHierarchy } from "../head-client/index.ts";
 import { isRenderFn, retryImport } from "../internal.ts";
 import type { LoadedRouteModule, LoadedRouteModules } from "../navigation/types.ts";
@@ -80,10 +79,8 @@ export function buildMatches(ctx: FlareProviderContext, modules: LoadedRouteModu
 		};
 	});
 
-	batch(() => {
-		ctx.setMatches(clientMatches);
-		ctx.setParams(modules.params);
-	});
+	ctx.setMatches(clientMatches);
+	ctx.setParams(modules.params);
 }
 
 export function extractRootBoundaries(rootLayout: LoadedRouteModule | undefined): GlobalBoundaries {
@@ -171,6 +168,29 @@ export function populateMatchCache(
 	}
 }
 
+export function applyMatchCacheTags(
+	matchCache: MatchCache,
+	modules: LoadedRouteModule[],
+	params: Record<string, string | string[]>,
+	search: SearchParams,
+): void {
+	for (const mod of modules) {
+		const deps = mod.effectsConfig?.loaderDeps?.({ search }) ?? [];
+		const matchId = computeMatchId({
+			loaderDeps: () => deps,
+			params,
+			routeId: mod.virtualPath,
+			search,
+		});
+		const entry = matchCache.get(matchId);
+		if (!entry) continue;
+		const tags = resolveCacheTags(mod.cache, params);
+		if (!tags) continue;
+		entry.tags = tags;
+		matchCache.set(entry);
+	}
+}
+
 export function hydrateHeadState(state: Pick<HydrationState, "ph">): void {
 	if (state.ph) {
 		/* First entry is root layout — its title is the fallback when pages don't define .head() */

package/src/i18n/index.ts

@@ -209,6 +209,14 @@ export interface Translator<
 	) => unknown;
 }
 
+function neutralizeRichValues(values: Record<string, unknown>): Record<string, unknown> {
+	const out: Record<string, unknown> = {};
+	for (const [key, value] of Object.entries(values)) {
+		out[key] = typeof value === "string" ? value.replaceAll("[[", "[\u200B[").replaceAll("]]", "]\u200B]") : value;
+	}
+	return out;
+}
+
 export function createTranslator<T extends Record<string, Record<string, string>>>(
 	loaded: T,
 	locale?: string,
@@ -235,8 +243,9 @@ export function createTranslator<T extends Record<string, Record<string, string>
 		const template = flat[key];
 		if (template === undefined) return key;
 
-		/* First apply ICU formatting if values provided */
-		const formatted = values ? formatMessage(template, values, locale) : template;
+		/* ICU first, but neutralize `[[` / `]]` in user values so they cannot
+		   inject rich-component markers into a trusted template. */
+		const formatted = values ? formatMessage(template, neutralizeRichValues(values), locale) : template;
 
 		/* Then parse rich text components */
 		const parts = parseRichText(formatted, components);

package/src/image/index.tsx

@@ -1,4 +1,5 @@
-import { createMemo, createSignal, type JSX, splitProps } from "solid-js";
+import { createMemo, createSignal, omit } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { warn } from "../logger.ts";
 
 /* ── Static image data ── */
@@ -99,7 +100,7 @@ export interface StaticResponsiveImageProps extends FlareImgProps {
 
 export type ImageProps = FillImageProps | FixedImageProps | ResponsiveImageProps | StaticResponsiveImageProps;
 
-/* Flattened internal type for splitProps — avoids TS intersection issues with Omit */
+/* Flattened internal type for omit — avoids TS intersection issues with Omit */
 interface ImagePropsInternal {
 	alt: string;
 	aspectRatio?: number;
@@ -326,7 +327,9 @@ function mergeStyles(
 /* ── Image component ── */
 
 export function Image(props: ImageProps): JSX.Element {
-	const [local, rest] = splitProps(props as unknown as ImagePropsInternal, [
+	const local = props as unknown as ImagePropsInternal;
+	const rest = omit(
+		local,
 		"alt",
 		"aspectRatio",
 		"blurDataURL",
@@ -345,7 +348,7 @@ export function Image(props: ImageProps): JSX.Element {
 		"style",
 		"width",
 		"widths",
-	]);
+	);
 
 	const [loaded, setLoaded] = createSignal(false);
 

package/src/intercept-outlet/index.tsx

@@ -1,4 +1,5 @@
-import { type JSX, Show, useContext } from "solid-js";
+import { Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { RouterContext } from "../outlet/index.tsx";
 import type { InterceptedState } from "../outlet/types.ts";
 
@@ -11,8 +12,11 @@ export interface InterceptOutletProps {
 /**
  * Renders intercepted route content. SSR-safe — returns null when outside
  * FlareProvider (root layout renders in NoHydration during SSR).
+ *
+ * Unkeyed on purpose: the function child receives an accessor. Reading it in
+ * JSX re-invokes `children` when intercept identity changes (overlay A → B).
  */
 export function InterceptOutlet(props: InterceptOutletProps): JSX.Element {
 	const ctx = useContext(RouterContext);
-	return (<Show when={ctx?.intercepted()}>{(state) => props.children(state())}</Show>) as JSX.Element;
+	return (<Show when={ctx?.intercepted()}>{(state) => <>{props.children(state())}</>}</Show>) as JSX.Element;
 }

package/src/lazy/index.tsx

@@ -1,7 +1,9 @@
-import type { JSX } from "solid-js";
-import { type Component, createSignal, onMount, Show, sharedConfig } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Dynamic, isServer } from "@solidjs/web";
+import { type Component, createSignal, onSettled, Show, sharedConfig, untrack } from "solid-js";
 import { retryImport } from "../internal.ts";
 import { warn } from "../logger.ts";
+import { GLOBAL_LAZY_LOADED, GLOBAL_LAZY_PENDING } from "../protocol.ts";
 
 export interface LazyOptions<P extends Record<string, unknown>> {
 	loader: () => Promise<{ default: Component<P> }>;
@@ -14,8 +16,8 @@ export interface ClientLazyOptions<P extends Record<string, unknown>> {
 	pending?: Component<P>;
 }
 
-const PENDING_KEY = "__FLARE_LAZY_PENDING__";
-const LOADED_KEY = "__FLARE_LAZY_LOADED__";
+const PENDING_KEY = GLOBAL_LAZY_PENDING;
+const LOADED_KEY = GLOBAL_LAZY_LOADED;
 
 function getGlobalPending(): Set<Promise<void>> {
 	const g = globalThis as Record<string, unknown>;
@@ -29,13 +31,9 @@ function getGlobalLoaded(): Set<Promise<void>> {
 	return g[LOADED_KEY] as Set<Promise<void>>;
 }
 
-/**
- * Throws during component init — ErrorBoundary catches it.
- * Must be rendered via Show/conditional so the throw happens during
- * the component's initial render phase (not in an effect).
- */
+/** Throw during render so `<Errored>` can catch. Read is untracked — error is a snapshot. */
 function ThrowError(props: { error: Error }): JSX.Element {
-	throw props.error;
+	throw untrack(() => props.error);
 }
 
 export function lazy<P extends Record<string, unknown>>(options: LazyOptions<P>): Component<P> {
@@ -58,44 +56,42 @@ export function lazy<P extends Record<string, unknown>>(options: LazyOptions<P>)
 	getGlobalPending().add(loadPromise);
 
 	return ((props: P) => {
-		const isSSR = !!sharedConfig.context;
+		const isSSR = isServer || !!sharedConfig.hydrating;
 
 		/* Pre-known error at render time → throw from component body */
 		if (loadError) throw loadError;
 
-		const [component, setComponent] = createSignal<Component<P> | undefined>(isSSR ? undefined : loaded);
+		/* Store `{ C }` — Solid 2 treats a function initial value as a derived signal. */
+		const [component, setComponent] = createSignal<{ C: Component<P> } | undefined>(
+			isSSR || !loaded ? undefined : { C: loaded },
+		);
 		const [error, setError] = createSignal<Error | undefined>();
 
 		if (isSSR || !loaded) {
-			onMount(() => {
+			onSettled(() => {
 				if (loadError) {
 					setError(loadError);
 				} else if (loaded) {
-					setComponent(() => loaded);
+					setComponent({ C: loaded });
 				} else {
 					loadPromise?.then(() => {
 						if (loadError) setError(loadError);
-						else setComponent(() => loaded);
+						else if (loaded) setComponent({ C: loaded });
 					});
 				}
 			});
 		}
 
-		const PendingFallback = pending
-			? (() => {
-					const P = pending;
-					return (<P {...props} />) as JSX.Element;
-				})()
-			: null;
-
 		return (
-			<Show fallback={<ThrowError error={error() as Error} />} when={!error()}>
-				<Show fallback={PendingFallback} when={component()}>
-					{(Comp) => {
-						const C = Comp();
-						return (<C {...props} />) as JSX.Element;
-					}}
-				</Show>
+			<Show
+				fallback={
+					<Show fallback={pending ? <Dynamic component={pending} {...props} /> : null} when={component()}>
+						{(entry) => <Dynamic component={entry().C} {...props} />}
+					</Show>
+				}
+				when={error()}
+			>
+				{(err) => <ThrowError error={err() as Error} />}
 			</Show>
 		) as JSX.Element;
 	}) as Component<P>;
@@ -109,7 +105,7 @@ export function clientLazy<P extends Record<string, unknown>>(
 	let loadError: Error | undefined;
 	let loadPromise: Promise<void> | undefined;
 
-	if (eager) {
+	if (eager && !isServer) {
 		loadPromise = retryImport(loader)
 			.then((mod) => {
 				loaded = mod.default;
@@ -120,12 +116,15 @@ export function clientLazy<P extends Record<string, unknown>>(
 	}
 
 	return ((props: P & { pending?: Component<P> }) => {
-		const isSSR = !!sharedConfig.context;
+		const isSSR = isServer || !!sharedConfig.hydrating;
 
 		/* Pre-known error at render time → throw from component body */
 		if (loadError) throw loadError;
 
-		const [component, setComponent] = createSignal<Component<P> | undefined>(isSSR ? undefined : loaded);
+		/* Store `{ C }` — Solid 2 treats a function initial value as a derived signal. */
+		const [component, setComponent] = createSignal<{ C: Component<P> } | undefined>(
+			isSSR || !loaded ? undefined : { C: loaded },
+		);
 		const [error, setError] = createSignal<Error | undefined>();
 
 		const startLoading = () => {
@@ -141,7 +140,7 @@ export function clientLazy<P extends Record<string, unknown>>(
 			loadPromise
 				.then(() => {
 					if (loadError) setError(loadError);
-					else setComponent(() => loaded);
+					else if (loaded) setComponent({ C: loaded });
 				})
 				.catch((e: unknown) => {
 					warn("lazy", "chunk retry failed", e);
@@ -156,9 +155,9 @@ export function clientLazy<P extends Record<string, unknown>>(
 			/* Already loaded — render immediately */
 		} else {
 			/* SSR hydration or not-yet-loaded: kick off after mount */
-			onMount(() => {
+			onSettled(() => {
 				if (loaded) {
-					setComponent(() => loaded);
+					setComponent({ C: loaded });
 				} else if (loadError) {
 					setError(loadError);
 				} else {
@@ -167,22 +166,23 @@ export function clientLazy<P extends Record<string, unknown>>(
 			});
 		}
 
-		const PendingComp = props.pending ?? factoryPending;
-		const PendingFallback = PendingComp
-			? (() => {
-					const P = PendingComp;
-					return (<P {...(props as P)} />) as JSX.Element;
-				})()
-			: null;
-
 		return (
-			<Show fallback={<ThrowError error={error() as Error} />} when={!error()}>
-				<Show fallback={PendingFallback} when={component()}>
-					{(Comp) => {
-						const C = Comp();
-						return (<C {...(props as P)} />) as JSX.Element;
-					}}
-				</Show>
+			<Show
+				fallback={
+					<Show
+						fallback={
+							<Show when={props.pending ?? factoryPending}>
+								{(Comp) => <Dynamic component={Comp()} {...(props as P)} />}
+							</Show>
+						}
+						when={component()}
+					>
+						{(entry) => <Dynamic component={entry().C} {...(props as P)} />}
+					</Show>
+				}
+				when={error()}
+			>
+				{(err) => <ThrowError error={err() as Error} />}
 			</Show>
 		) as JSX.Element;
 	}) as Component<P & { pending?: Component<P> }>;