@lovrozagar/flare 0.1.1 → 0.2.0

package/src/outlet/index.tsx

@@ -4,14 +4,15 @@ import {
 	createEffect,
 	createMemo,
 	createSignal,
-	ErrorBoundary,
-	type JSX,
+	Errored,
+	Loading,
 	onCleanup,
-	onMount,
+	onSettled,
 	Show,
-	Suspense,
+	untrack,
 	useContext,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { GlobalBoundaries } from "../boundaries/index.ts";
 import type { ChannelMessage, SerializedInvalidateOptions } from "../broadcast/channel.ts";
 import { BroadcastCtx } from "../broadcast/context.ts";
@@ -56,8 +57,8 @@ export type {
 	ViewTransitionOptions,
 } from "./types.ts";
 
-/** Exported for SSR — SSR injects context directly on sharedConfig.context */
-export const RouterContext = createContext<FlareProviderContext>();
+/** Default `null` (not `undefined`) — Solid 2 throws ContextNotFoundError when default is undefined. */
+export const RouterContext = createContext<FlareProviderContext | null>(null);
 export const DepthContext = createContext<number>(0);
 
 export function FlareProvider(props: FlareProviderProps): JSX.Element {
@@ -66,10 +67,11 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 	const [navigationPhase, setNavigationPhase] = createSignal<NavigationPhase>("idle");
 	const isNavigating = createMemo(() => navigationPhase() !== "idle");
 	const [viewTransitionSignal, setViewTransition] = createSignal<BrowserViewTransition | null>(null);
-	const [matches, setMatches] = createSignal<ClientMatch[]>(props.matches);
+	const [matches, setMatches] = createSignal<ClientMatch[]>(untrack(() => props.matches));
+	const [matchesEpoch, setMatchesEpoch] = createSignal(0);
 	const [notFound, setNotFound] = createSignal(false);
-	const [params, setParams] = createSignal<Record<string, string | string[]>>(props.params);
-	const [search, setSearch] = createSignal<SearchParams>(props.search ?? {});
+	const [params, setParams] = createSignal<Record<string, string | string[]>>(untrack(() => props.params));
+	const [search, setSearch] = createSignal<SearchParams>(untrack(() => props.search) ?? {});
 
 	const location = createMemo(() => {
 		const allMatches = matches();
@@ -98,15 +100,27 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 	/* Stub navigate/prefetch — replaced by setupNavigation */
 	let navigateFn: (options: InternalNavigateOptions) => Promise<void> = () => Promise.resolve();
 	let prefetchFn: (options: {
+		modulesOnly?: boolean;
 		params?: Record<string, unknown>;
 		search?: Record<string, unknown>;
 		to: string;
 	}) => Promise<void> = () => Promise.resolve();
 
 	const channel = useContext(BroadcastCtx);
+	const staticProps = untrack(() => ({
+		boundaries: props.boundaries,
+		caseSensitive: props.caseSensitive,
+		layouts: props.layouts,
+		localeConfig: props.localeConfig,
+		matchCache: props.matchCache,
+		prefetchCache: props.prefetchCache,
+		resolvers: props.resolvers,
+		routeTree: props.routeTree,
+		routerCacheDefaults: props.routerCacheDefaults,
+	}));
 
 	function invalidate(options?: Parameters<FlareProviderContext["invalidate"]>[0]): void {
-		props.matchCache.invalidate(options);
+		staticProps.matchCache.invalidate(options);
 		navigateFn({
 			replace: true,
 			revalidate: true,
@@ -122,17 +136,18 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 	}
 
 	const ctx: FlareProviderContext = {
-		boundaries: props.boundaries,
-		caseSensitive: props.caseSensitive,
+		boundaries: staticProps.boundaries,
+		caseSensitive: staticProps.caseSensitive,
 		hydrated,
 		intercepted,
 		invalidate,
 		isNavigating,
-		layouts: props.layouts,
-		localeConfig: props.localeConfig,
+		layouts: staticProps.layouts,
+		localeConfig: staticProps.localeConfig,
 		location,
-		matchCache: props.matchCache,
+		matchCache: staticProps.matchCache,
 		matches,
+		matchesEpoch,
 		navigate: (opts) => {
 			if (opts.broadcast) {
 				channel.broadcast({ replace: opts.replace, to: opts.to, type: "navigate" });
@@ -143,10 +158,10 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 		notFound,
 		params,
 		prefetch: (opts) => prefetchFn(opts),
-		prefetchCache: props.prefetchCache,
-		resolvers: props.resolvers,
-		routeTree: props.routeTree,
-		routerCacheDefaults: props.routerCacheDefaults,
+		prefetchCache: staticProps.prefetchCache,
+		resolvers: staticProps.resolvers,
+		routeTree: staticProps.routeTree,
+		routerCacheDefaults: staticProps.routerCacheDefaults,
 		search,
 		setHydrated,
 		setIntercepted,
@@ -156,6 +171,7 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 		setParams,
 		setSearch,
 		setViewTransition,
+		touchMatches: () => setMatchesEpoch((n) => n + 1),
 		viewTransition: viewTransitionSignal,
 	};
 
@@ -185,7 +201,7 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 		});
 		Object.defineProperty(window, "__flare_devtools_cache__", {
 			configurable: true,
-			get: () => props.matchCache.getAll(),
+			get: () => staticProps.matchCache.getAll(),
 		});
 		Object.defineProperty(window, "__flare_devtools_actions__", {
 			configurable: true,
@@ -199,14 +215,14 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 					});
 					setMatches(restored);
 				},
-				clearPrefetchCache: () => props.prefetchCache.clear(),
+				clearPrefetchCache: () => staticProps.prefetchCache.clear(),
 				getCacheStats: () => ({
-					entries: props.matchCache.getAll().map((c) => ({
+					entries: staticProps.matchCache.getAll().map((c) => ({
 						age: Date.now() - c.updatedAt,
 						matchId: c.matchId,
 					})),
-					matchCount: props.matchCache.getAll().length,
-					prefetchCount: props.prefetchCache.size(),
+					matchCount: staticProps.matchCache.getAll().length,
+					prefetchCount: staticProps.prefetchCache.size(),
 				}),
 				invalidate: (opts?: Parameters<FlareProviderContext["invalidate"]>[0]) => invalidate(opts),
 				navigate: (opts: InternalNavigateOptions) => navigateFn(opts),
@@ -223,11 +239,11 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 	}
 
 	/* Cross-tab broadcast: receive invalidate/navigate from other tabs */
-	onMount(() => {
+	onSettled(() => {
 		const unsubscribe = channel.onMessage((msg: ChannelMessage) => {
 			if (msg.type === "invalidate") {
-				props.matchCache.invalidate(msg.options);
-				props.prefetchCache.clear();
+				staticProps.matchCache.invalidate(msg.options);
+				staticProps.prefetchCache.clear();
 				navigateFn({
 					replace: true,
 					revalidate: true,
@@ -240,16 +256,17 @@ export function FlareProvider(props: FlareProviderProps): JSX.Element {
 				});
 			}
 		});
-		onCleanup(unsubscribe);
+		return unsubscribe;
 	});
 
-	createEffect(() => {
-		if (props.onContextReady) {
-			props.onContextReady(ctx);
-		}
-	});
+	/*
+	 * Must run during the provider's first execution — Solid 2 onSettled waits
+	 * for hydration to finish, and hydrate() awaits this callback, so onSettled
+	 * would deadlock and never set html[data-flare-hydrated].
+	 */
+	untrack(() => props.onContextReady?.(ctx));
 
-	return <RouterContext.Provider value={ctx}>{props.children}</RouterContext.Provider>;
+	return <RouterContext value={ctx}>{props.children}</RouterContext>;
 }
 
 export function useRouterContext(): FlareProviderContext {
@@ -259,6 +276,18 @@ export function useRouterContext(): FlareProviderContext {
 	return ctx;
 }
 
+/** Instant shells mutate match.loaderData in place; t() must track that refresh. */
+function liveTranslator(data: Accessor<unknown>, locale: () => string | undefined) {
+	const translator = createMemo(() =>
+		createTranslator((data() ?? {}) as Record<string, Record<string, string>>, locale()),
+	);
+	const t = ((key: string, values?: Record<string, unknown>) => translator()(key as never, values)) as ReturnType<
+		typeof createTranslator
+	>;
+	t.rich = ((key, components, ...args) => translator().rich(key, components, ...args)) as typeof t.rich;
+	return t;
+}
+
 export function useRouter(): FlareRouter {
 	const ctx = useRouterContext();
 
@@ -318,8 +347,8 @@ export function useRouter(): FlareRouter {
 			const [blocked, setBlocked] = createSignal(false);
 
 			/* Register SPA blocker — navigate() checks this before proceeding */
-			setActiveBlocker(when, () => setBlocked(true));
-			onCleanup(() => setActiveBlocker(null));
+			const unregister = setActiveBlocker(when, () => setBlocked(true));
+			onCleanup(unregister);
 
 			/* Also handle browser-level unload (tab close, external nav) */
 			const handler = (e: BeforeUnloadEvent) => {
@@ -347,12 +376,20 @@ export function useRouter(): FlareRouter {
 		},
 		useLoaderData: ((options: { from: string }) =>
 			createMemo(() => {
+				ctx.matchesEpoch?.();
+				const overlay = ctx.intercepted();
+				if (overlay && options.from === overlay.match.virtualPath) return overlay.match.loaderData;
 				const m = ctx.matches().find((match) => match.virtualPath === options.from);
 				return m?.loaderData;
 			})) as never,
 		useLoaderT: ((options: { from: string }) => {
 			const data = createMemo(() => {
-				const m = ctx.matches().find((match) => match.virtualPath === options.from);
+				ctx.matchesEpoch?.();
+				const overlay = ctx.intercepted();
+				const m =
+					overlay && options.from === overlay.match.virtualPath
+						? overlay.match
+						: ctx.matches().find((match) => match.virtualPath === options.from);
 				return (m?.loaderData as Record<string, unknown> | undefined)?.t;
 			});
 			const lc = ctx.localeConfig;
@@ -362,18 +399,40 @@ export function useRouter(): FlareRouter {
 				const val = p[lc.paramName ?? "locale"];
 				return (typeof val === "string" ? val : undefined) ?? lc.defaultLocale;
 			};
-			return createTranslator((data() ?? {}) as Record<string, Record<string, string>>, locale());
+			return liveTranslator(data, locale);
 		}) as never,
-		useMatch: (options) => createMemo(() => ctx.matches().find((match) => match.virtualPath === options.from)),
-		useParams: ((_options: { from: string }) => createMemo(() => ctx.params())) as never,
+		useMatch: (options) =>
+			createMemo(() => {
+				ctx.matchesEpoch?.();
+				const overlay = ctx.intercepted();
+				if (overlay && options.from === overlay.match.virtualPath) return overlay.match;
+				return ctx.matches().find((match) => match.virtualPath === options.from);
+			}),
+		useParams: ((options: { from: string }) =>
+			createMemo(() => {
+				const overlay = ctx.intercepted();
+				if (overlay) {
+					if (options.from === overlay.match.virtualPath) return overlay.params;
+					return overlay.backgroundLocation.params;
+				}
+				return ctx.params();
+			})) as never,
 		usePreloaderContext: ((options: { from: string }) =>
 			createMemo(() => {
+				ctx.matchesEpoch?.();
+				const overlay = ctx.intercepted();
+				if (overlay && options.from === overlay.match.virtualPath) return overlay.match.preloaderContext;
 				const m = ctx.matches().find((match) => match.virtualPath === options.from);
 				return m?.preloaderContext;
 			})) as never,
 		usePreloaderT: ((options: { from: string }) => {
 			const data = createMemo(() => {
-				const m = ctx.matches().find((match) => match.virtualPath === options.from);
+				ctx.matchesEpoch?.();
+				const overlay = ctx.intercepted();
+				const m =
+					overlay && options.from === overlay.match.virtualPath
+						? overlay.match
+						: ctx.matches().find((match) => match.virtualPath === options.from);
 				return (m?.preloaderContext as Record<string, unknown> | undefined)?.t;
 			});
 			const lc = ctx.localeConfig;
@@ -383,9 +442,17 @@ export function useRouter(): FlareRouter {
 				const val = p[lc.paramName ?? "locale"];
 				return (typeof val === "string" ? val : undefined) ?? lc.defaultLocale;
 			};
-			return createTranslator((data() ?? {}) as Record<string, Record<string, string>>, locale());
+			return liveTranslator(data, locale);
 		}) as never,
-		useSearch: ((_options: { from: string }) => createMemo(() => ctx.search())) as never,
+		useSearch: ((options: { from: string }) =>
+			createMemo(() => {
+				const overlay = ctx.intercepted();
+				if (overlay) {
+					if (options.from === overlay.match.virtualPath) return overlay.search;
+					return overlay.backgroundLocation.search;
+				}
+				return ctx.search();
+			})) as never,
 		viewTransition: ctx.viewTransition,
 	};
 }
@@ -404,62 +471,86 @@ export function Outlet(props?: OutletProps): JSX.Element {
 
 	return (
 		<Show when={!ctx.notFound() || depth === 0}>
-			<DepthContext.Provider value={depth + 1}>
+			<DepthContext value={depth + 1}>
 				<OutletContent depth={depth} fallback={props?.fallback} />
-			</DepthContext.Provider>
+			</DepthContext>
 		</Show>
 	) as JSX.Element;
 }
 
 function OutletContent(props: { depth: number; fallback?: JSX.Element }): JSX.Element {
 	const ctx = useRouterContext();
-	const router = useRouter();
 	const match: Accessor<ClientMatch | undefined> = createMemo(() => ctx.matches()[props.depth]);
 
+	/*
+	 * Solid 2 <Show> is unkeyed by default — the child is reused across truthy
+	 * values. Instant shells reuse the same match object so local page signals
+	 * survive; a new object (different route or error identity) must remount.
+	 */
 	return (
 		<Show
 			fallback={ctx.notFound() && props.depth === 0 ? resolveNotFoundBoundary(ctx, props.depth) : null}
+			keyed
 			when={match()}
 		>
-			{(m) => {
-				const isPage = () => m()._type === "render";
-				const renderFn = () => m().render;
-				const hasError = createMemo(() => m().error);
-				const renderProps = () => ({
-					children: isPage() ? undefined : <Outlet fallback={props.fallback} />,
-					loaderData: m().loaderData,
-					location: ctx.location(),
-					preloaderContext: m().preloaderContext,
-					router,
-				});
+			{(m) => <MatchOutlet depth={props.depth} fallback={props.fallback} match={m} />}
+		</Show>
+	) as JSX.Element;
+}
 
-				/*
-				 * Pipeline errors rendered via reactive Show — must react to SPA nav
-				 * match updates. Static `if (current.error)` only works for SSR initial render.
-				 */
-				return (
-					<Show
-						fallback={
-							<ErrorBoundaryWrapper depth={props.depth} match={m()}>
-								<Suspense fallback={props.fallback ?? null}>
-									{(() => {
-										const fn = renderFn();
-										const p = renderProps();
-										return fn(p);
-									})()}
-								</Suspense>
-							</ErrorBoundaryWrapper>
-						}
-						when={hasError()}
-					>
-						{renderMatchError(ctx, props.depth, hasError())}
-					</Show>
-				);
-			}}
+function MatchOutlet(props: { depth: number; fallback?: JSX.Element; match: ClientMatch }): JSX.Element {
+	const ctx = useRouterContext();
+	const hasError = createMemo(() => {
+		ctx.matchesEpoch?.();
+		return props.match.error;
+	});
+
+	/*
+	 * Pipeline errors rendered via reactive Show — must react to SPA nav
+	 * match updates. Static `if (current.error)` only works for SSR initial render.
+	 */
+	return (
+		<Show
+			fallback={
+				<ErrorBoundaryWrapper depth={props.depth} match={props.match}>
+					<Loading fallback={props.fallback ?? null}>
+						<RouteRender fallback={props.fallback} match={props.match} />
+					</Loading>
+				</ErrorBoundaryWrapper>
+			}
+			when={hasError()}
+		>
+			{renderMatchError(ctx, props.depth, hasError())}
 		</Show>
 	) as JSX.Element;
 }
 
+function RouteRender(props: { fallback?: JSX.Element; match: ClientMatch }): JSX.Element {
+	const ctx = useRouterContext();
+	const router = useRouter();
+	const loaderData = createMemo(() => {
+		ctx.matchesEpoch?.();
+		return props.match.loaderData;
+	});
+	const preloaderContext = createMemo(() => {
+		ctx.matchesEpoch?.();
+		return props.match.preloaderContext;
+	});
+	/* Capture once per MatchOutlet instance. Keyed <Show> remounts when the
+	 * match identity changes; recreating <Outlet> on epoch would remount layouts. */
+	const nested = untrack(() => (props.match._type === "render" ? undefined : <Outlet fallback={props.fallback} />));
+	const Render = untrack(() => props.match.render);
+	return (
+		<Render
+			children={nested}
+			loaderData={loaderData()}
+			location={ctx.location()}
+			preloaderContext={preloaderContext()}
+			router={router}
+		/>
+	);
+}
+
 /**
  * Re-run loaders for the current URL. Used by error boundaries
  * to let users retry after transient failures.
@@ -491,7 +582,7 @@ function renderMatchError(ctx: FlareProviderContext, depth: number, error: unkno
 	if (error instanceof UnauthorizedError) {
 		return resolveUnauthorizedBoundary(ctx, depth, error, retry);
 	}
-	/* Pipeline errors: reset = retry (no ErrorBoundary to clear, must re-run loaders) */
+	/* Pipeline errors: reset = retry (no Errored to clear, must re-run loaders) */
 	return resolveErrorBoundary(ctx, depth, error, retry, retry);
 }
 
@@ -500,37 +591,41 @@ function ErrorBoundaryWrapper(props: { children: JSX.Element; depth: number; mat
 	let resetFn: (() => void) | undefined;
 
 	/*
-	 * When match changes (SPA navigation), reset ErrorBoundary so it exits
+	 * When match changes (SPA navigation), reset Errored so it exits
 	 * fallback mode. Without this, navigating from error page → valid page
-	 * stays stuck in ErrorBoundary fallback.
+	 * stays stuck in Errored fallback.
 	 */
-	createEffect(() => {
-		/* Track reactive deps — resets ErrorBoundary on SPA navigation */
-		void props.match.virtualPath;
-		void props.match.error;
-		if (resetFn) resetFn();
-	});
+	createEffect(
+		() => {
+			void props.match.virtualPath;
+			void props.match.error;
+		},
+		() => {
+			resetFn?.();
+		},
+	);
 
 	const retry = makeRetry(ctx);
 
 	return (
-		<ErrorBoundary
+		<Errored
 			fallback={(error, reset) => {
 				resetFn = reset;
-				if (error instanceof NotFoundError) {
+				const err = error();
+				if (err instanceof NotFoundError) {
 					return resolveNotFoundBoundary(ctx, props.depth);
 				}
-				if (error instanceof UnauthenticatedError) {
-					return resolveUnauthenticatedBoundary(ctx, props.depth, error, retry);
+				if (err instanceof UnauthenticatedError) {
+					return resolveUnauthenticatedBoundary(ctx, props.depth, err, retry);
 				}
-				if (error instanceof UnauthorizedError) {
-					return resolveUnauthorizedBoundary(ctx, props.depth, error, retry);
+				if (err instanceof UnauthorizedError) {
+					return resolveUnauthorizedBoundary(ctx, props.depth, err, retry);
 				}
-				return resolveErrorBoundary(ctx, props.depth, error, reset, retry);
+				return resolveErrorBoundary(ctx, props.depth, err, reset, retry);
 			}}
 		>
 			{props.children}
-		</ErrorBoundary>
+		</Errored>
 	) as JSX.Element;
 }
 

package/src/outlet/types.ts

@@ -1,4 +1,5 @@
-import type { Accessor, JSX } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import type { GlobalBoundaries } from "../boundaries/index.ts";
 import type { InvalidateOptions, MatchCache, PrefetchCache } from "../caches/index.ts";
 import type { ExtractT, Translator } from "../i18n/index.ts";
@@ -88,7 +89,9 @@ export interface InterceptedState {
 	backgroundLocation: ProviderLocation;
 	dismiss: () => void;
 	match: ClientMatch;
+	params: Record<string, string | string[]>;
 	render: string;
+	search: SearchParams;
 }
 
 export interface ClientMatch {
@@ -145,6 +148,8 @@ export interface InternalNavigateOptions {
 }
 
 export type PrefetchOptions<TPath extends RoutePaths = RoutePaths> = {
+	/** Viewport/render: load route modules only, no per-URL NDJSON. */
+	modulesOnly?: boolean;
 	params?: Record<string, unknown>;
 	to: TPath;
 } & RouteSearchProps<TPath>;
@@ -161,6 +166,8 @@ export interface FlareProviderContext {
 	location: Accessor<ProviderLocation>;
 	matchCache: MatchCache;
 	matches: Accessor<ClientMatch[]>;
+	/** Bumps when match objects are reused in place (instant shell → NDJSON). */
+	matchesEpoch?: Accessor<number>;
 	navigate: (options: InternalNavigateOptions) => Promise<void>;
 	navigationPhase: Accessor<NavigationPhase>;
 	notFound: Accessor<boolean>;
@@ -174,6 +181,7 @@ export interface FlareProviderContext {
 	setHydrated: (v: boolean) => void;
 	setIntercepted: (state: InterceptedState | null) => void;
 	setMatches: (matches: ClientMatch[]) => void;
+	touchMatches?: () => void;
 	setNavigationPhase: (phase: NavigationPhase) => void;
 	setNotFound: (notFound: boolean) => void;
 	setParams: (params: Record<string, string | string[]>) => void;

package/src/plugins/dev-cdn-cache.ts

@@ -247,6 +247,12 @@ export async function handleCdnRequest(
 		return;
 	}
 
+	/* Background SWR hop — skip the cache read and refill the same key */
+	if (getHeader(req, "flare-cdn-revalidate") === "1") {
+		interceptResponse(req, res, next, store, method, pathname);
+		return;
+	}
+
 	/* Probe cache — first without Vary to discover what Vary headers were stored */
 	const probeKey = buildCdnCacheKey(method, pathname, [], {});
 	const probeEntry = await store.get(probeKey);
@@ -292,14 +298,21 @@ export async function handleCdnRequest(
 
 		if (freshness.state === "stale-revalidate") {
 			serveCached(res, cached, "STALE");
-			/* Background: delete stale entry so next request gets fresh SSR */
+			/* Keep the stale entry; background-fill the same key */
 			if (!revalidating.has(cacheKey)) {
 				revalidating.add(cacheKey);
-				store.delete(cacheKey).catch(() => {});
-				if (probeCdn && probeCdn.varyHeaders.length > 0) {
-					store.delete(probeKey).catch(() => {});
+				const host = getHeader(req, "host") ?? "localhost";
+				const revalidateUrl = `http://${host}${req.url ?? pathname}`;
+				const headers = new Headers();
+				for (const [key, val] of Object.entries(req.headers)) {
+					if (typeof val === "string") headers.set(key, val);
 				}
-				setTimeout(() => revalidating.delete(cacheKey), 100);
+				headers.set("flare-cdn-revalidate", "1");
+				fetch(revalidateUrl, { headers })
+					.catch(() => {})
+					.finally(() => {
+						revalidating.delete(cacheKey);
+					});
 			}
 			return;
 		}