vorma 0.0.0-pre.0 → 0.83.0

package/internal/framework/_typescript/client/src/client_loaders.ts

@@ -0,0 +1,249 @@
+import { findNestedMatches } from "vorma/kit/matcher/find-nested";
+import { registerPattern } from "vorma/kit/matcher/register";
+import { ComponentLoader, getEffectiveErrorData } from "./component_loader.ts";
+import { isAbortError } from "./utils/errors.ts";
+import { logError } from "./utils/logging.ts";
+import {
+	__vormaClientGlobal,
+	type GetRouteDataOutput,
+} from "./vorma_ctx/vorma_ctx.ts";
+
+export function setClientLoadersState(
+	clr: ClientLoadersResult | undefined,
+): void {
+	if (clr) {
+		__vormaClientGlobal.set("clientLoadersData", clr.data ?? []);
+		__vormaClientGlobal.set(
+			"outermostClientErrorIdx",
+			clr.errorMessage ? clr.data.length - 1 : undefined,
+		);
+		__vormaClientGlobal.set("outermostClientError", clr.errorMessage);
+	}
+}
+
+export function deriveAndSetErrorState(): void {
+	const effectiveErrData = getEffectiveErrorData();
+	__vormaClientGlobal.set("outermostErrorIdx", effectiveErrData.index);
+	__vormaClientGlobal.set("outermostError", effectiveErrData.error);
+}
+
+export async function setupClientLoaders(): Promise<void> {
+	const clientLoadersResult = await runWaitFns(
+		{
+			hasRootData: __vormaClientGlobal.get("hasRootData"),
+			importURLs: __vormaClientGlobal.get("importURLs"),
+			loadersData: __vormaClientGlobal.get("loadersData"),
+			matchedPatterns: __vormaClientGlobal.get("matchedPatterns"),
+			params: __vormaClientGlobal.get("params"),
+			splatValues: __vormaClientGlobal.get("splatValues"),
+		},
+		__vormaClientGlobal.get("buildID"),
+		new AbortController().signal,
+	);
+
+	setClientLoadersState(clientLoadersResult);
+	deriveAndSetErrorState();
+}
+
+export async function __registerClientLoaderPattern(
+	pattern: string,
+): Promise<void> {
+	registerPattern(__vormaClientGlobal.get("patternRegistry"), pattern);
+}
+
+// This is needed because the matcher, by definition, will only
+// match when you have a full path match. If the path you are
+// testing is longer than the registered patterns, you will get
+// no match, even if some registered patterns would potentially
+// be in the parent segments. This fixes that.
+export async function findPartialMatchesOnClient(pathname: string) {
+	const patternToWaitFnMap = __vormaClientGlobal.get("patternToWaitFnMap");
+	if (Object.keys(patternToWaitFnMap).length === 0) {
+		return null;
+	}
+
+	const patternRegistry = __vormaClientGlobal.get("patternRegistry");
+
+	// First try the full path
+	const fullResult = findNestedMatches(patternRegistry, pathname);
+	if (fullResult) {
+		// If we get a full match, we have everything we need
+		return fullResult;
+	}
+
+	// If no full match, try progressively shorter paths to find partial matches
+	const segments = pathname.split("/").filter(Boolean);
+
+	// Try from longest to shortest
+	for (let i = segments.length; i >= 0; i--) {
+		const partialPath =
+			i === 0 ? "/" : "/" + segments.slice(0, i).join("/");
+		const result = findNestedMatches(patternRegistry, partialPath);
+		if (result) {
+			return result; // First match is the longest
+		}
+	}
+
+	return null;
+}
+
+type PartialWaitFnJSON = Pick<
+	GetRouteDataOutput,
+	| "matchedPatterns"
+	| "splatValues"
+	| "params"
+	| "hasRootData"
+	| "loadersData"
+	| "importURLs"
+>;
+
+export type ClientLoadersResult = {
+	data: Array<any>;
+	errorMessage?: string;
+};
+
+async function executeClientLoaders(
+	json: PartialWaitFnJSON,
+	buildID: string,
+	signal: AbortSignal,
+	runningLoaders?: Map<string, Promise<any>>,
+): Promise<ClientLoadersResult> {
+	await ComponentLoader.loadComponents(json.importURLs);
+
+	const matchedPatterns = json.matchedPatterns ?? [];
+	const patternToWaitFnMap = __vormaClientGlobal.get("patternToWaitFnMap");
+	const outermostServerErrorIdx = __vormaClientGlobal.get(
+		"outermostServerErrorIdx",
+	);
+
+	const loaderPromises: Array<Promise<any>> = [];
+	const abortControllers: Array<AbortController | null> = [];
+
+	// Build arrays of all promises and their corresponding abort controllers
+	let i = 0;
+	for (const pattern of matchedPatterns) {
+		if (
+			outermostServerErrorIdx !== undefined &&
+			i === outermostServerErrorIdx
+		) {
+			// This route has a server error, skip its client loader
+			loaderPromises.push(Promise.resolve());
+			abortControllers.push(null);
+			i++;
+			continue;
+		}
+
+		if (runningLoaders?.has(pattern)) {
+			// This loader is already running (started parallel to fetch)
+			loaderPromises.push(runningLoaders.get(pattern)!);
+			// We can't create a new controller for it, but we can wrap it
+			abortControllers.push(null);
+		} else if (patternToWaitFnMap[pattern]) {
+			// This is a new client loader we need to run
+			const controller = new AbortController();
+			abortControllers.push(controller);
+
+			// Wire up the main navigation signal to this loader's controller
+			if (signal.aborted) {
+				controller.abort();
+			} else {
+				signal.addEventListener("abort", () => controller.abort(), {
+					once: true,
+				});
+			}
+
+			const serverDataPromise = Promise.resolve({
+				matchedPatterns: json.matchedPatterns,
+				loaderData: json.loadersData[i],
+				rootData: json.hasRootData ? json.loadersData[0] : null,
+				buildID: buildID,
+			});
+
+			const loaderPromise = patternToWaitFnMap[pattern]({
+				params: json.params || {},
+				splatValues: json.splatValues || [],
+				serverDataPromise,
+				signal: controller.signal,
+			});
+			loaderPromises.push(loaderPromise);
+		} else {
+			// No client loader for this route
+			loaderPromises.push(Promise.resolve());
+			abortControllers.push(null);
+		}
+		i++;
+	}
+
+	// Wrap all promises with the child-aborting logic
+	const wrappedPromises = loaderPromises.map(async (promise, index) => {
+		return promise.catch((error) => {
+			// If this promise failed with a true error (not just an abort)
+			if (!isAbortError(error)) {
+				// Abort all subsequent (child) loaders immediately
+				for (let j = index + 1; j < abortControllers.length; j++) {
+					abortControllers[j]?.abort();
+				}
+			}
+			// Re-throw the error so Promise.allSettled sees it as 'rejected'
+			throw error;
+		});
+	});
+
+	// Await all wrapped promises. They run in parallel,
+	// but a rejection in one now triggers aborts in its children.
+	const results = await Promise.allSettled(wrappedPromises);
+
+	// Process the results
+	const data: Array<any> = [];
+	let errorMessage: string | undefined;
+
+	for (let i = 0; i < results.length; i++) {
+		const result = results[i];
+		if (!result) {
+			data.push(undefined);
+			continue;
+		}
+
+		if (result.status === "fulfilled") {
+			data.push(result.value);
+		} else {
+			// This is a rejection
+			if (!isAbortError(result.reason)) {
+				// This is the first true error we've hit
+				const pattern = matchedPatterns[i];
+				logError(
+					`Client loader error for pattern ${pattern}:`,
+					result.reason,
+				);
+				errorMessage =
+					result.reason instanceof Error
+						? result.reason.message
+						: String(result.reason);
+
+				// We found the highest error. Stop processing.
+				// The .catch() wrapper already aborted any children.
+			}
+			data.push(undefined);
+			break; // Stop at the first error
+		}
+	}
+
+	return { data, errorMessage };
+}
+
+async function runWaitFns(
+	json: PartialWaitFnJSON,
+	buildID: string,
+	signal: AbortSignal,
+): Promise<ClientLoadersResult> {
+	return executeClientLoaders(json, buildID, signal);
+}
+
+export async function completeClientLoaders(
+	json: PartialWaitFnJSON,
+	buildID: string,
+	runningLoaders: Map<string, Promise<any>>,
+	signal: AbortSignal,
+): Promise<ClientLoadersResult> {
+	return executeClientLoaders(json, buildID, signal, runningLoaders);
+}

package/internal/framework/_typescript/client/src/component_loader.ts

@@ -0,0 +1,105 @@
+import { jsonDeepEquals } from "vorma/kit/json";
+import { resolvePublicHref } from "./resolve_public_href.ts";
+import { __vormaClientGlobal } from "./vorma_ctx/vorma_ctx.ts";
+
+export function getEffectiveErrorData(): {
+	index: number | undefined;
+	error: string | undefined;
+} {
+	const serverErrorIdx = __vormaClientGlobal.get("outermostServerErrorIdx");
+	const clientErrorIdx = __vormaClientGlobal.get("outermostClientErrorIdx");
+	let errorIdx: number | undefined;
+	if (serverErrorIdx != null && clientErrorIdx != null) {
+		errorIdx = Math.min(serverErrorIdx, clientErrorIdx);
+	} else {
+		errorIdx = serverErrorIdx ?? clientErrorIdx;
+	}
+	return {
+		index: errorIdx,
+		error:
+			errorIdx === serverErrorIdx
+				? __vormaClientGlobal.get("outermostServerError")
+				: errorIdx === clientErrorIdx
+					? __vormaClientGlobal.get("outermostClientError")
+					: undefined,
+	};
+}
+
+export class ComponentLoader {
+	static async loadComponents(
+		importURLs: string[],
+	): Promise<Map<string, any>> {
+		const dedupedURLs = [...new Set(importURLs)];
+		const modules = await Promise.all(
+			dedupedURLs.map(async (url) => {
+				if (!url) return undefined;
+				return import(/* @vite-ignore */ resolvePublicHref(url));
+			}),
+		);
+		return new Map(dedupedURLs.map((url, i) => [url, modules[i]]));
+	}
+
+	static async handleComponents(importURLs: string[]): Promise<void> {
+		const modulesMap = await this.loadComponents(importURLs);
+		const originalImportURLs = __vormaClientGlobal.get("importURLs");
+		const exportKeys = __vormaClientGlobal.get("exportKeys") ?? [];
+
+		// Build new components array
+		const newActiveComponents = originalImportURLs.map(
+			(url: string, i: number) => {
+				const module = modulesMap.get(url);
+				const key = exportKeys[i] ?? "default";
+				return module?.[key] ?? null;
+			},
+		);
+
+		// Only update if components actually changed
+		if (
+			!jsonDeepEquals(
+				newActiveComponents,
+				__vormaClientGlobal.get("activeComponents"),
+			)
+		) {
+			__vormaClientGlobal.set("activeComponents", newActiveComponents);
+		}
+	}
+
+	static async handleErrorBoundaryComponent(
+		importURLs: string[],
+	): Promise<void> {
+		const modulesMap = await this.loadComponents(importURLs);
+		const originalImportURLs = __vormaClientGlobal.get("importURLs");
+
+		// Handle error boundary
+		const errorIdx = getEffectiveErrorData().index;
+
+		if (errorIdx != null) {
+			const errorModuleURL = originalImportURLs[errorIdx];
+			let errorComponent;
+
+			if (errorModuleURL) {
+				const errorModule = modulesMap.get(errorModuleURL);
+				const errorKeys = __vormaClientGlobal.get("errorExportKeys");
+				const errorKey = errorKeys ? errorKeys[errorIdx] : null;
+				if (errorKey && errorModule) {
+					errorComponent = errorModule[errorKey];
+				}
+			}
+
+			const newErrorBoundary =
+				errorComponent ??
+				__vormaClientGlobal.get("defaultErrorBoundary");
+
+			// Only update if changed
+			const currentErrorBoundary = __vormaClientGlobal.get(
+				"activeErrorBoundary",
+			);
+			if (currentErrorBoundary !== newErrorBoundary) {
+				__vormaClientGlobal.set(
+					"activeErrorBoundary",
+					newErrorBoundary,
+				);
+			}
+		}
+	}
+}

package/internal/framework/_typescript/client/src/error_boundary.ts

@@ -0,0 +1,7 @@
+import type { RouteErrorComponent } from "./vorma_ctx/vorma_ctx.ts";
+
+export const defaultErrorBoundary: RouteErrorComponent = (props: {
+	error: string;
+}) => {
+	return "Route Error: " + props.error;
+};

package/internal/framework/_typescript/client/src/events.ts

@@ -0,0 +1,54 @@
+import type { ScrollState } from "./scroll_state_manager.ts";
+
+// Route Change Event
+export const VORMA_ROUTE_CHANGE_EVENT_KEY = "vorma:route-change";
+export type RouteChangeEvent = CustomEvent<RouteChangeEventDetail>;
+export type RouteChangeEventDetail = { __scrollState?: ScrollState };
+export const addRouteChangeListener = makeListenerAdder<RouteChangeEventDetail>(
+	VORMA_ROUTE_CHANGE_EVENT_KEY,
+);
+export function dispatchRouteChangeEvent(detail: RouteChangeEventDetail): void {
+	window.dispatchEvent(
+		new CustomEvent(VORMA_ROUTE_CHANGE_EVENT_KEY, { detail }),
+	);
+}
+
+// Status Event
+const STATUS_EVENT_KEY = "vorma:status";
+export type StatusEvent = CustomEvent<StatusEventDetail>;
+export type StatusEventDetail = {
+	isNavigating: boolean;
+	isSubmitting: boolean;
+	isRevalidating: boolean;
+};
+export function dispatchStatusEvent(detail: StatusEventDetail): void {
+	window.dispatchEvent(new CustomEvent(STATUS_EVENT_KEY, { detail }));
+}
+export const addStatusListener =
+	makeListenerAdder<StatusEventDetail>(STATUS_EVENT_KEY);
+
+// Build ID Event
+const BUILD_ID_EVENT_KEY = "vorma:build-id";
+type BuildIDEventDetail = { oldID: string; newID: string };
+export function dispatchBuildIDEvent(detail: BuildIDEventDetail): void {
+	window.dispatchEvent(new CustomEvent(BUILD_ID_EVENT_KEY, { detail }));
+}
+export const addBuildIDListener =
+	makeListenerAdder<BuildIDEventDetail>(BUILD_ID_EVENT_KEY);
+
+// Location Event
+const LOCATION_EVENT_KEY = "vorma:location";
+export function dispatchLocationEvent(): void {
+	window.dispatchEvent(new CustomEvent(LOCATION_EVENT_KEY));
+}
+export const addLocationListener = makeListenerAdder<void>(LOCATION_EVENT_KEY);
+
+// Helper to create listener adders
+function makeListenerAdder<T>(key: string) {
+	return function addListener(
+		listener: (event: CustomEvent<T>) => void,
+	): () => void {
+		window.addEventListener(key, listener as any);
+		return () => window.removeEventListener(key, listener as any);
+	};
+}

package/internal/framework/_typescript/client/src/global_loading_indicator/global_loading_indicator.ts

@@ -0,0 +1,125 @@
+import { getStatus } from "../client.ts";
+import { addStatusListener, type StatusEvent } from "../events.ts";
+
+const DEFAULT_DELAY = 12;
+
+type GlobalLoadingIndicatorIncludesOption =
+	| "navigations"
+	| "submissions"
+	| "revalidations";
+
+type GlobalLoadingIndicatorConfig = {
+	start: () => void;
+	stop: () => void;
+	isRunning: () => boolean;
+	include?: "all" | Array<GlobalLoadingIndicatorIncludesOption>;
+	startDelayMS?: number;
+	stopDelayMS?: number;
+};
+
+type ParsedGlobalLoadingIndicatorConfig = {
+	includesAll: boolean;
+	includesNavigations: boolean;
+	includesSubmissions: boolean;
+	includesRevalidations: boolean;
+	startDelayMS: number;
+	stopDelayMS: number;
+};
+
+function resolveIncludes(
+	config: GlobalLoadingIndicatorConfig,
+	includesOption: GlobalLoadingIndicatorIncludesOption,
+) {
+	const isArray = Array.isArray(config.include);
+	return isArray && config.include?.includes(includesOption);
+}
+
+export function setupGlobalLoadingIndicator(
+	config: GlobalLoadingIndicatorConfig,
+) {
+	let gliDebounceStartTimer: number | null = null;
+	let gliDebounceStopTimer: number | null = null;
+	const includesAll = !config.include || config.include === "all";
+	const pc: ParsedGlobalLoadingIndicatorConfig = {
+		includesAll,
+		includesNavigations:
+			resolveIncludes(config, "navigations") || includesAll,
+		includesSubmissions:
+			resolveIncludes(config, "submissions") || includesAll,
+		includesRevalidations:
+			resolveIncludes(config, "revalidations") || includesAll,
+		startDelayMS: config.startDelayMS ?? DEFAULT_DELAY,
+		stopDelayMS: config.stopDelayMS ?? DEFAULT_DELAY,
+	};
+	function clearStartTimer() {
+		if (gliDebounceStartTimer) {
+			window.clearTimeout(gliDebounceStartTimer);
+			gliDebounceStartTimer = null;
+		}
+	}
+	function clearStopTimer() {
+		if (gliDebounceStopTimer) {
+			window.clearTimeout(gliDebounceStopTimer);
+			gliDebounceStopTimer = null;
+		}
+	}
+	function clearTimers() {
+		clearStartTimer();
+		clearStopTimer();
+	}
+	function handleStatusChange(e?: StatusEvent) {
+		const shouldBeWorking = getIsWorking(pc, e);
+		if (shouldBeWorking) {
+			clearStopTimer();
+			if (!gliDebounceStartTimer) {
+				gliDebounceStartTimer = window.setTimeout(() => {
+					gliDebounceStartTimer = null;
+					if (!config.isRunning() && getIsWorking(pc)) {
+						config.start();
+					}
+				}, pc.startDelayMS);
+			}
+		} else {
+			clearStartTimer();
+			if (!gliDebounceStopTimer) {
+				gliDebounceStopTimer = window.setTimeout(() => {
+					gliDebounceStopTimer = null;
+					if (config.isRunning() && !getIsWorking(pc)) {
+						config.stop();
+					}
+				}, pc.stopDelayMS);
+			}
+		}
+	}
+	handleStatusChange();
+	const removeStatusListenerCallback = addStatusListener(handleStatusChange);
+	return () => {
+		removeStatusListenerCallback();
+		clearTimers();
+		if (config.isRunning()) {
+			config.stop();
+		}
+	};
+}
+
+function getIsWorking(
+	pc: ParsedGlobalLoadingIndicatorConfig,
+	e?: StatusEvent,
+): boolean {
+	const status = e?.detail ?? getStatus();
+	if (pc.includesAll) {
+		return (
+			status.isNavigating || status.isSubmitting || status.isRevalidating
+		);
+	}
+	if (pc.includesNavigations && status.isNavigating) {
+		return true;
+	}
+	if (pc.includesSubmissions && status.isSubmitting) {
+		return true;
+	}
+	if (pc.includesRevalidations && status.isRevalidating) {
+		return true;
+	}
+	return false;
+}

package/internal/framework/_typescript/client/src/hard_reload.ts

@@ -0,0 +1 @@
+export const VORMA_HARD_RELOAD_QUERY_PARAM = "vorma_reload";