@lovrozagar/flare 0.1.2 → 0.2.0

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> }>;

package/src/link/index.tsx

@@ -1,4 +1,5 @@
-import { createMemo, type JSX, onCleanup, Show, splitProps } from "solid-js";
+import { createEffect, createMemo, createSignal, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { applyRewriteOutput, isExternal, navigate, prefetch } from "../navigation/index.ts";
 import { useRouterContext } from "../outlet/index.tsx";
 import type { RouteParamsProps, RoutePaths, RouteSearchProps } from "../route-builder/register.ts";
@@ -39,7 +40,7 @@ export type ExternalLinkProps = FlareAnchorProps & {
 
 export type LinkProps<TPath extends RoutePaths = RoutePaths> = InternalLinkProps<TPath> | ExternalLinkProps;
 
-/* Flattened internal type for splitProps — avoids TS intersection issues with Omit */
+/* Flattened internal type for omit — avoids TS intersection issues with Omit */
 interface LinkPropsInternal {
 	activeClass?: string;
 	activeProps?: FlareAnchorProps;
@@ -83,7 +84,9 @@ function isDangerousHref(href: string): boolean {
 export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Element {
 	const ctx = useRouterContext();
 
-	const [local, rest] = splitProps(props as unknown as LinkPropsInternal, [
+	const local = props as unknown as LinkPropsInternal;
+	const rest = omit(
+		local,
 		"activeClass",
 		"activeProps",
 		"children",
@@ -107,19 +110,24 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 		"target",
 		"to",
 		"viewTransition",
-	]);
+	);
 
-	const resolvedHref = createMemo(() => {
-		if (local.href !== undefined) {
-			if (isDangerousHref(local.href)) return "#";
-			return local.href;
-		}
-		const raw = buildUrl({
+	const internalHref = createMemo(() => {
+		if (local.href !== undefined) return undefined;
+		return buildUrl({
 			hash: local.hash,
 			params: local.params,
 			search: local.search,
 			to: local.to ?? "",
 		});
+	});
+
+	const resolvedHref = createMemo(() => {
+		if (local.href !== undefined) {
+			if (isDangerousHref(local.href)) return "#";
+			return local.href;
+		}
+		const raw = internalHref() ?? "";
 		if (isDangerousHref(raw)) return "#";
 		return applyRewriteOutput(raw);
 	});
@@ -132,8 +140,8 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 
 	const routePrefetch = createMemo(() => {
 		if (local.href !== undefined) return undefined;
-		const h = resolvedHref();
-		if (isExternal(h)) return undefined;
+		const h = internalHref();
+		if (!h || isExternal(h)) return undefined;
 		try {
 			const url = new URL(h, typeof window !== "undefined" ? window.location.href : "http://localhost/");
 			const match = matchRoute(ctx.routeTree, url.pathname, ctx.caseSensitive, toLocaleMatch(ctx.localeConfig));
@@ -226,15 +234,27 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 			return;
 		}
 
+		let to = local.to ?? "";
+		let hash = local.hash;
+		if (!local.to && local.href !== undefined) {
+			try {
+				const url = new URL(h, typeof window !== "undefined" ? window.location.href : "http://localhost/");
+				to = url.pathname + url.search;
+				hash = hash ?? (url.hash || undefined);
+			} catch {
+				to = h;
+			}
+		}
+
 		navigate({
-			hash: local.hash,
+			hash,
 			params: local.params,
 			replace: local.replace,
 			revalidate: local.revalidate,
 			scroll: local.scroll,
 			search: local.search,
 			shallow: local.shallow,
-			to: local.to ?? "",
+			to,
 			viewTransition: local.viewTransition,
 		});
 	}
@@ -244,8 +264,14 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 		if (local.href !== undefined) return;
 		const h = resolvedHref();
 		if (isExternal(h)) return;
-		/* params + search already resolved into h by resolvedHref() — passing them again would double-apply */
-		prefetch({ to: h });
+		/* params + search already resolved into h by resolvedHref() — passing them again would double-apply.
+		 * Intent prefetches that URL's NDJSON shell. Viewport/render only warm JS once per route. */
+		const strategy = effectivePrefetch();
+		if (strategy === "viewport" || strategy === "render") {
+			prefetch({ modulesOnly: true, to: h });
+		} else {
+			prefetch({ to: h });
+		}
 	}
 
 	function handleIntent(): void {
@@ -288,49 +314,62 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 		};
 	}
 
-	function setupPrefetchBehavior(el: HTMLAnchorElement): void {
-		if (local.href !== undefined) return;
-		if (isExternal(resolvedHref())) return;
-
-		const strategy = effectivePrefetch();
-
-		if (strategy === "intent") {
-			el.addEventListener("focus", handleIntent);
-			el.addEventListener("touchstart", handleIntent, { passive: true });
-			onCleanup(() => {
-				el.removeEventListener("focus", handleIntent);
-				el.removeEventListener("touchstart", handleIntent);
-			});
-		}
+	/* Capture the element; attach listeners in createEffect so cleanup is owned. */
+	const [anchor, setAnchor] = createSignal<HTMLAnchorElement | undefined>();
+
+	createEffect(
+		() => {
+			const el = anchor();
+			const strategy = effectivePrefetch();
+			const href = resolvedHref();
+			return {
+				disabled: !!local.disabled,
+				el,
+				external: isExternal(href),
+				hrefOnly: local.href !== undefined,
+				strategy,
+			};
+		},
+		({ disabled, el, external, hrefOnly, strategy }) => {
+			if (!el || disabled || hrefOnly || external) return;
+
+			if (strategy === "intent") {
+				el.addEventListener("focus", handleIntent);
+				el.addEventListener("touchstart", handleIntent, { passive: true });
+				return () => {
+					el.removeEventListener("focus", handleIntent);
+					el.removeEventListener("touchstart", handleIntent);
+				};
+			}
 
-		if (strategy === "viewport") {
-			let observer: IntersectionObserver | undefined;
-			const cancel = scheduleAfterLoad(() => {
-				if (typeof IntersectionObserver === "undefined") return;
-				observer = new IntersectionObserver(
-					(entries) => {
-						for (const entry of entries) {
-							if (entry.isIntersecting) {
-								triggerPrefetch();
-								observer?.unobserve(entry.target);
+			if (strategy === "viewport") {
+				let observer: IntersectionObserver | undefined;
+				const cancel = scheduleAfterLoad(() => {
+					if (typeof IntersectionObserver === "undefined") return;
+					observer = new IntersectionObserver(
+						(entries) => {
+							for (const entry of entries) {
+								if (entry.isIntersecting) {
+									triggerPrefetch();
+									observer?.unobserve(entry.target);
+								}
 							}
-						}
-					},
-					{ threshold: 0 },
-				);
-				observer.observe(el);
-			});
-			onCleanup(() => {
-				cancel();
-				observer?.disconnect();
-			});
-		}
+						},
+						{ threshold: 0 },
+					);
+					observer.observe(el);
+				});
+				return () => {
+					cancel();
+					observer?.disconnect();
+				};
+			}
 
-		if (strategy === "render") {
-			const cancel = scheduleAfterLoad(() => triggerPrefetch());
-			onCleanup(cancel);
-		}
-	}
+			if (strategy === "render") {
+				return scheduleAfterLoad(() => triggerPrefetch());
+			}
+		},
+	);
 
 	function disabledStyle(): JSX.CSSProperties | string {
 		if (typeof local.style === "string") return `cursor:not-allowed;${local.style}`;
@@ -341,7 +380,7 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 	return (
 		<Show
 			fallback={
-				<span {...rest} aria-disabled="true" class={classes()} style={disabledStyle()} tabIndex={-1}>
+				<span {...rest} aria-disabled="true" class={classes()} style={disabledStyle()} tabindex={-1}>
 					{local.children}
 				</span>
 			}
@@ -356,7 +395,7 @@ export function Link<TPath extends RoutePaths>(props: LinkProps<TPath>): JSX.Ele
 				href={resolvedHref()}
 				onClick={handleClick}
 				onMouseEnter={handleIntent}
-				ref={setupPrefetchBehavior}
+				ref={setAnchor}
 				rel={effectiveRel()}
 				target={local.target}
 			>