@lovrozagar/flare 0.1.1 → 0.2.0

package/src/direction/index.tsx

@@ -1,14 +1,5 @@
-import {
-	createContext,
-	createEffect,
-	createSignal,
-	type JSX,
-	on,
-	onCleanup,
-	onMount,
-	sharedConfig,
-	useContext,
-} from "solid-js";
+import { createContext, createEffect, createSignal, onSettled, sharedConfig, untrack, useContext } from "solid-js";
+import { isServer, type JSX } from "@solidjs/web";
 
 export type Direction = "ltr" | "rtl";
 
@@ -60,14 +51,9 @@ export interface DirectionContextValue {
 	toggleDirection: () => void;
 }
 
-const DirectionCtx = createContext<DirectionContextValue>();
+const DirectionCtx = createContext<DirectionContextValue | null>(null);
 
 export function DirectionProvider(props: { children: JSX.Element; config?: DirectionConfig }): JSX.Element {
-	/* SSR: pass through children (context not needed on server, scripts handle direction) */
-	if (sharedConfig.context) {
-		return props.children;
-	}
-
 	const cfg: Required<DirectionConfig> = {
 		attribute: props.config?.attribute ?? DEFAULT_CONFIG.attribute,
 		defaultDir: props.config?.defaultDir ?? DEFAULT_CONFIG.defaultDir,
@@ -75,9 +61,12 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 		storageKey: props.config?.storageKey ?? DEFAULT_CONFIG.storageKey,
 	};
 
-	/* Read initial direction from localStorage, DOM dir attr, or default */
+	const hydrating = isServer || !!sharedConfig.hydrating;
+
+	/* During SSR + hydration, start from defaultDir so the tree matches.
+	   DirectionScript already applied localStorage to <html> before first paint. */
 	let initial: Direction = cfg.defaultDir;
-	if (typeof localStorage !== "undefined") {
+	if (typeof localStorage !== "undefined" && !hydrating) {
 		try {
 			const stored = localStorage.getItem(cfg.storageKey);
 			if (stored === "ltr" || stored === "rtl") {
@@ -87,7 +76,7 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 			/* noop */
 		}
 	}
-	if (initial === cfg.defaultDir && typeof document !== "undefined") {
+	if (initial === cfg.defaultDir && typeof document !== "undefined" && !hydrating) {
 		const domDir = document.documentElement.getAttribute("dir");
 		if (domDir === "ltr" || domDir === "rtl") {
 			initial = domDir;
@@ -96,17 +85,34 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 
 	const [direction, setDirectionSignal] = createSignal<Direction>(initial);
 
-	/* Sync direction to DOM */
-	createEffect(() => {
-		const dir = direction();
+	const applyToDocument = (dir: Direction): void => {
 		if (typeof document === "undefined") return;
 		const el = document.documentElement;
 		el.setAttribute(cfg.attribute, dir);
 		el.setAttribute("dir", dir);
+	};
+
+	if (!hydrating) {
+		applyToDocument(untrack(direction));
+	}
+
+	/* After hydrate, sync from localStorage so useDirection() matches DirectionScript. */
+	onSettled(() => {
+		if (typeof localStorage === "undefined") return;
+		try {
+			const stored = localStorage.getItem(cfg.storageKey);
+			if ((stored === "ltr" || stored === "rtl") && stored !== untrack(direction)) {
+				setDirectionSignal(stored);
+			}
+		} catch {
+			/* noop */
+		}
+		applyToDocument(untrack(direction));
 	});
 
 	/* Cross-tab sync: StorageEvent fires in OTHER tabs only */
-	onMount(() => {
+	onSettled(() => {
+		if (typeof window === "undefined") return;
 		const handler = (e: StorageEvent) => {
 			if (e.key !== cfg.storageKey || e.storageArea !== localStorage) return;
 			const v = e.newValue;
@@ -115,22 +121,41 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 			}
 		};
 		window.addEventListener("storage", handler);
-		onCleanup(() => window.removeEventListener("storage", handler));
+		return () => window.removeEventListener("storage", handler);
 	});
 
-	/* Persist to localStorage on changes */
-	createEffect(
-		on(
-			direction,
-			(dir) => {
+	/* After Solid hydrates <html> it may drop DirectionScript's dir. Re-apply. */
+	let skipFirst = true;
+	createEffect(direction, (dir) => {
+		if (typeof document === "undefined") return;
+		if (skipFirst) {
+			skipFirst = false;
+			let visual: Direction = dir;
+			if (typeof localStorage !== "undefined") {
 				try {
-					localStorage.setItem(cfg.storageKey, dir);
+					const stored = localStorage.getItem(cfg.storageKey);
+					if (stored === "ltr" || stored === "rtl") visual = stored;
 				} catch {
 					/* noop */
 				}
-			},
-			{ defer: true },
-		),
+			}
+			applyToDocument(visual);
+			return;
+		}
+		applyToDocument(dir);
+	});
+
+	/* Persist to localStorage on changes (not initial — it was read from there) */
+	createEffect(
+		direction,
+		(dir) => {
+			try {
+				localStorage.setItem(cfg.storageKey, dir);
+			} catch {
+				/* noop */
+			}
+		},
+		{ defer: true },
 	);
 
 	const setDirection = (dir: Direction): void => {
@@ -138,7 +163,7 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 	};
 
 	const toggleDirection = (): void => {
-		const current = direction();
+		const current = untrack(direction);
 		setDirection(current === "ltr" ? "rtl" : "ltr");
 	};
 
@@ -153,7 +178,7 @@ export function DirectionProvider(props: { children: JSX.Element; config?: Direc
 		toggleDirection,
 	};
 
-	return <DirectionCtx.Provider value={value}>{props.children}</DirectionCtx.Provider>;
+	return <DirectionCtx value={value}>{props.children}</DirectionCtx>;
 }
 
 export function useDirection(): DirectionContextValue {

package/src/errors/index.ts

@@ -46,28 +46,60 @@ export class UnauthorizedError extends Error {
 }
 
 const SAFE_PROTOCOLS = new Set(["http:", "https:"]);
+const SENTINEL_ORIGIN = "https://flare.invalid";
+const HAS_SCHEME = /^[a-zA-Z][a-zA-Z+\-.]*:/;
 
 /**
  * Allowlist-based redirect URL validation using the URL constructor.
- * Lets the platform's URL parser handle all encoding/unicode normalization
- * instead of a regex blocklist that can be bypassed.
+ * Lets the platform's URL parser handle encoding, backslash normalization,
+ * and unicode instead of a regex blocklist that can be bypassed.
+ *
+ * Protocol-relative (`//host`) is not a same-origin path — `startsWith("/")`
+ * would treat it as one. Internal `to` must stay on the sentinel origin.
  */
-function validateExternalRedirectUrl(href: string): string {
-	/* Relative paths are safe — no protocol to exploit */
-	if (href.startsWith("/") || href.startsWith(".")) return href;
+function validateRedirectUrl(raw: string, mode: "internal" | "external"): string {
+	if (/[\0\r\n]/.test(raw)) {
+		throw new Error(`Unsafe redirect URL: ${raw}`);
+	}
 
 	let parsed: URL;
 	try {
-		parsed = new URL(href, "http://localhost");
+		parsed = new URL(raw, SENTINEL_ORIGIN);
 	} catch {
-		throw new Error(`Unsafe redirect URL: ${href}`);
+		throw new Error(`Unsafe redirect URL: ${raw}`);
 	}
 
 	if (!SAFE_PROTOCOLS.has(parsed.protocol)) {
-		throw new Error(`Unsafe redirect URL: ${href}`);
+		throw new Error(`Unsafe redirect URL: ${raw}`);
+	}
+
+	const sameOrigin = parsed.origin === SENTINEL_ORIGIN;
+	if (mode === "internal") {
+		let decodedPath = parsed.pathname;
+		try {
+			decodedPath = decodeURIComponent(parsed.pathname);
+		} catch {
+			/* keep pathname */
+		}
+		if (
+			!sameOrigin ||
+			!raw.startsWith("/") ||
+			raw.startsWith("//") ||
+			raw.includes("\\") ||
+			parsed.pathname.startsWith("//") ||
+			decodedPath.includes("\\") ||
+			decodedPath.startsWith("//")
+		) {
+			throw new Error(`Unsafe redirect URL: ${raw}`);
+		}
+		return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+	}
+
+	if (!sameOrigin && !HAS_SCHEME.test(raw.trimStart())) {
+		throw new Error(`Unsafe redirect URL: ${raw}`);
 	}
 
-	return href;
+	return raw;
 }
 
 export class RedirectResponse extends Error {
@@ -80,10 +112,10 @@ export class RedirectResponse extends Error {
 	constructor(options: RawRedirectOptions) {
 		super("Redirect");
 		if ("href" in options) {
-			this.url = validateExternalRedirectUrl(options.href);
+			this.url = validateRedirectUrl(options.href, "external");
 			this.external = true;
 		} else {
-			this.url = options.to;
+			this.url = validateRedirectUrl(options.to, "internal");
 			this.external = false;
 		}
 		this.status = options.status ?? 303;
@@ -136,6 +168,8 @@ export function redirect(options: {
 	if (options.to === undefined) {
 		throw new Error("redirect() requires either 'to' or 'href'");
 	}
+	/* Validate the raw path before buildUrl collapses leading slashes (`//host` → `/host`) */
+	validateRedirectUrl(options.to, "internal");
 	const url = buildUrl({ params: options.params, search: options.search, to: options.to });
 	throw new RedirectResponse({ replace: options.replace, status: options.status, to: url });
 }

package/src/fonts/component.tsx

@@ -1,4 +1,5 @@
-import { For, type JSX } from "solid-js";
+import { For } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { useSSRContext } from "../components/ssr-context.tsx";
 import type { Font } from "./types.ts";
 

package/src/form/index.tsx

@@ -1,7 +1,9 @@
-import { createMemo, createSignal, For, type JSX, Show, splitProps } from "solid-js";
-import { Dynamic } from "solid-js/web";
+import { createMemo, createSignal, For, omit, Show } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { Dynamic } from "@solidjs/web";
 import type { FlattenedError } from "../errors/index.ts";
 import { ServerFnValidationError } from "../errors/index.ts";
+import { FORM_FN_FIELD, serverFnPath } from "../protocol.ts";
 import type { ServerFn } from "../server-fn/index.ts";
 
 /* Duplicated here to avoid importing server-context (uses node:async_hooks)
@@ -51,16 +53,20 @@ interface FormOwnProps<TInput, TOutput> {
 export type FormProps<TInput, TOutput> = FormOwnProps<TInput, TOutput> &
 	Omit<JSX.FormHTMLAttributes<HTMLFormElement>, "action" | "children" | "enctype" | "method">;
 
+/** Seed `form.error()` after a no-JS PE POST with form-level validation errors. */
+export function seedFormErrorFromSsr(ssrCtx: FormActionContext | undefined): Error | null {
+	if (!ssrCtx?.formErrors.length) return null;
+	return new ServerFnValidationError({
+		fieldErrors: ssrCtx.fieldErrors,
+		formErrors: ssrCtx.formErrors,
+	});
+}
+
 /* ── Form component ────────────────────────────────────────────────── */
 
 export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.Element {
-	const [local, rest] = splitProps(props as FormOwnProps<TInput, TOutput> & Record<string, unknown>, [
-		"action",
-		"children",
-		"enctype",
-		"onError",
-		"onSuccess",
-	]);
+	const local = props as FormOwnProps<TInput, TOutput> & Record<string, unknown>;
+	const rest = omit(local, "action", "children", "enctype", "onError", "onSuccess");
 
 	const reg = createMemo(() => local.action._registration);
 	const fnId = createMemo(() => reg()?.id ?? "");
@@ -70,7 +76,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 	const ssrCtx = typeof window === "undefined" && _getFormActionContext ? _getFormActionContext(fnId()) : undefined;
 
 	const [pending, setPending] = createSignal(false);
-	const [error, setError] = createSignal<Error | null>(null);
+	const [error, setError] = createSignal<Error | null>(seedFormErrorFromSsr(ssrCtx));
 	const [fieldErrors, setFieldErrors] = createSignal<Record<string, string[]>>(ssrCtx?.fieldErrors ?? {});
 	const [result, setResult] = createSignal<TOutput | undefined>(undefined);
 
@@ -116,7 +122,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 		setFieldErrors({});
 
 		try {
-			const url = `/_fn/${id}/${name}`;
+			const url = serverFnPath(id, name);
 			const res = await fetch(url, {
 				body: formData,
 				method: "POST",
@@ -165,7 +171,7 @@ export function Form<TInput, TOutput>(props: FormProps<TInput, TOutput>): JSX.El
 			method="post"
 			onSubmit={handleSubmit}
 		>
-			<input name="__flare_fn" type="hidden" value={fnId()} />
+			<input name={FORM_FN_FIELD} type="hidden" value={fnId()} />
 			{local.children(formCtx)}
 		</form>
 	) as JSX.Element;

package/src/generators/index.ts

@@ -11,6 +11,7 @@ export type PrefetchStrategy = false | "intent" | "render" | "viewport";
 export type ExtractedStaticDeferMode = "resolve" | "stream";
 
 export interface ExtractedCacheConfig {
+	cdnTags?: string[];
 	client?: {
 		cacheDeferred?: boolean;
 		gcTime?: number;
@@ -37,6 +38,7 @@ export interface RouteDefinition {
 	exportName: string;
 	filePath: string;
 	cache: ExtractedCacheConfig;
+	hasAuthorize?: boolean;
 	hasInput: boolean;
 	intercept?: ExtractedInterceptConfig;
 	responseRoute: boolean;
@@ -76,6 +78,23 @@ function writeGenFile(filePath: string, body: string, generator: string): void {
 	writeFileSync(filePath, fullContent, "utf-8");
 }
 
+/**
+ * Recursive source listing, normalized to posix separators and sorted.
+ *
+ * `readdirSync` order is filesystem- and runtime-dependent — node, bun, and
+ * deno disagree — and generated files are checked in, so an unsorted scan
+ * makes `routes.gen.ts` churn based on who ran the build. Sorting by code
+ * unit (not `localeCompare`, which follows ICU locale data) pins the order.
+ * Returns [] when the directory is missing.
+ */
+function listSourceEntries(srcPath: string): string[] {
+	try {
+		return (readdirSync(srcPath, { recursive: true }) as string[]).map((entry) => entry.replace(/\\/g, "/")).sort();
+	} catch {
+		return [];
+	}
+}
+
 const BUILDER_TO_TYPE: Record<string, RouteDefinition["type"]> = {
 	createLayout: "layout",
 	createPage: "page",
@@ -206,6 +225,41 @@ function extractNestedBlock(body: string, key: string): string | null {
 	return null;
 }
 
+function extractStringArray(text: string, key: string): string[] | undefined {
+	const re = new RegExp(`${key}\\s*:\\s*\\[`);
+	const match = re.exec(text);
+	if (!match) return undefined;
+
+	const start = (match.index ?? 0) + match[0].length;
+	let depth = 1;
+	let end = start;
+	for (let i = start; i < text.length; i++) {
+		const skipped = skipStringOrComment(text, i);
+		if (skipped !== i) {
+			i = skipped;
+			continue;
+		}
+		if (text[i] === "[") depth++;
+		else if (text[i] === "]") {
+			depth--;
+			if (depth === 0) {
+				end = i;
+				break;
+			}
+		}
+	}
+	const inner = text.slice(start, end);
+	const items: string[] = [];
+	const itemRe = /["'`]([^"'`]*)["'`]/g;
+	let itemMatch: RegExpExecArray | null = itemRe.exec(inner);
+	while (itemMatch) {
+		const value = itemMatch[1];
+		if (value) items.push(value);
+		itemMatch = itemRe.exec(inner);
+	}
+	return items;
+}
+
 function extractNumeric(text: string, key: string, unit?: "ms" | "s"): number | undefined {
 	/* try duration string first: key: "5m" */
 	const dm = DURATION_STR_RE(key).exec(text);
@@ -295,6 +349,13 @@ export function extractCacheFromChain(chainText: string): ExtractedCacheConfig {
 		config.isr = true;
 	}
 
+	/* cdn: { tags: ["a", "b"] } — static string arrays only; function tags are computed at render */
+	const cdnBlock = extractNestedBlock(body, "cdn");
+	if (cdnBlock) {
+		const tags = extractStringArray(cdnBlock, "tags");
+		if (tags && tags.length > 0) config.cdnTags = tags;
+	}
+
 	return config;
 }
 
@@ -436,6 +497,7 @@ export function extractRouteDefinitions(src: string, filePath: string): RouteDef
 			const hasAuthenticateOptional = /\.authenticateOptional\s*\(/.test(chainText);
 			const hasAuthenticate = /\.authenticate\s*\(/.test(chainText);
 			const authenticateMode: AuthenticateMode = hasAuthenticateOptional ? "optional" : !!hasAuthenticate;
+			const hasAuthorize = /\.authorize\s*\(/.test(chainText);
 			const hasInput = /\.input\s*(?:<[^>]*>)?\s*\(/.test(chainText);
 			const responseRoute = /\.response\s*\(/.test(chainText);
 			const cache = extractCacheFromChain(chainText);
@@ -446,6 +508,7 @@ export function extractRouteDefinitions(src: string, filePath: string): RouteDef
 				cache,
 				exportName,
 				filePath,
+				hasAuthorize,
 				hasInput,
 				intercept,
 				responseRoute,
@@ -581,6 +644,11 @@ function formatRouteMeta(def: RouteDefinition): string {
 	const parts: string[] = [];
 	if (def.authenticateMode === true) parts.push("authenticate: true");
 	else if (def.authenticateMode === "optional") parts.push(`authenticate: "optional"`);
+	if (def.hasAuthorize) parts.push("authorize: true");
+	if (def.cache.cdnTags && def.cache.cdnTags.length > 0) {
+		const tagLit = def.cache.cdnTags.map((t) => `"${escapeCodegenStr(t)}"`).join(", ");
+		parts.push(`tags: [${tagLit}]`);
+	}
 
 	if (def.cache.client) {
 		const cp: string[] = [];
@@ -1106,17 +1174,7 @@ export function scanSourceFiles(options: ScanOptions): RouteDefinition[] {
 	const prefix = options.ignorePrefix ?? "_";
 	const defs: RouteDefinition[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return defs;
-	}
-
-	for (const entry of entries) {
-		/* Normalize to posix separators */
-		const rel = entry.replace(/\\/g, "/");
-
+	for (const rel of listSourceEntries(srcPath)) {
 		/* Skip non-ts files */
 		if (!rel.endsWith(".ts") && !rel.endsWith(".tsx")) continue;
 
@@ -1254,15 +1312,7 @@ export function inspectFsCodegenLayout(options: ScanOptions): FsLayoutIssue[] {
 	const prefix = options.ignorePrefix ?? "_";
 	const issues: FsLayoutIssue[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return issues;
-	}
-
-	for (const entry of entries) {
-		const rel = entry.replace(/\\/g, "/");
+	for (const rel of listSourceEntries(srcPath)) {
 		if (!rel.endsWith(".ts") && !rel.endsWith(".tsx") && !rel.endsWith(".js") && !rel.endsWith(".jsx")) continue;
 		if (rel.includes("_gen/") || rel.includes("node_modules")) continue;
 		if (rel.endsWith(".gen.ts") || rel.endsWith(".gen.tsx")) continue;
@@ -1421,16 +1471,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 	const routesDir = "routes";
 	const defs: RouteDefinition[] = [];
 
-	let entries: string[];
-	try {
-		entries = readdirSync(srcPath, { recursive: true }) as string[];
-	} catch {
-		return defs;
-	}
-
-	for (const entry of entries) {
-		const rel = entry.replace(/\\/g, "/");
-
+	for (const rel of listSourceEntries(srcPath)) {
 		/* Only process files under routes/ */
 		if (!rel.startsWith(`${routesDir}/`)) continue;
 
@@ -1464,6 +1505,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 		const hasAuthenticateOptional = /\.authenticateOptional\s*\(/.test(content);
 		const hasAuthenticate = /\.authenticate\s*\(/.test(content);
 		const authenticateMode: AuthenticateMode = hasAuthenticateOptional ? "optional" : !!hasAuthenticate;
+		const hasAuthorize = /\.authorize\s*\(/.test(content);
 		const hasInput = /\.input\s*(?:<[^>]*>)?\s*\(/.test(content);
 		const responseRoute = /\.response\s*\(/.test(content);
 		const cache = extractCacheFromChain(content);
@@ -1474,6 +1516,7 @@ export function scanSourceFilesFsCodegen(options: ScanOptions): RouteDefinition[
 			cache,
 			exportName: "route",
 			filePath: posix.join(options.srcDir ?? "src", rel),
+			hasAuthorize,
 			hasInput,
 			intercept,
 			responseRoute,

package/src/head-client/index.ts

@@ -564,6 +564,13 @@ function addCssLinkForRoute(matchId: string, href: string): void {
 function addCssStyleForRoute(matchId: string, children: string): void {
 	if (typeof document === "undefined") return;
 	const el = document.createElement("style");
+	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;
+	}
 	el.setAttribute("data-flare-route", matchId);
 	el.textContent = children;
 	document.head.appendChild(el);

package/src/history/index.ts

@@ -150,6 +150,12 @@ export function createScrollStore(maxSize = 200, ttl = DEFAULT_SCROLL_TTL): Scro
 
 	return {
 		get(key: string): ScrollPosition | null {
+			const ts = timestamps.get(key);
+			if (ts !== undefined && Date.now() - ts > ttl) {
+				store.delete(key);
+				timestamps.delete(key);
+				return null;
+			}
 			return store.get(key) ?? null;
 		},