@kasperrt/smolter 0.2.0 → 0.3.0

package/dist/core/navigation.d.ts

@@ -0,0 +1,15 @@
+import type { Router } from "./types.ts";
+export type NavigationType = "POP" | "PUSH" | "REPLACE";
+export interface NavigationSnapshot {
+    type: NavigationType;
+    state: unknown;
+    key: string;
+    preventScrollReset: boolean;
+}
+export declare function scrollPositions(router: Router): Map<string, [number, number]>;
+export declare function navigationStore(router: Router): {
+    getSnapshot: () => NavigationSnapshot;
+    subscribe(listener: () => void): () => void;
+    update(next: NavigationSnapshot): void;
+};
+export declare function connectNavigation(router: Router): void;

package/dist/core/navigation.js

@@ -0,0 +1,92 @@
+import { navigationClick } from "./url.js";
+import { handoffDocument, leaveDocument, resolveApplicationURL } from "./environment.js";
+import { createStore } from "./store.js";
+//#region .generated/core/navigation.ts
+var scrollHistory = /* @__PURE__ */ new WeakMap();
+function scrollPositions(router) {
+	let positions = scrollHistory.get(router);
+	if (!positions) {
+		positions = /* @__PURE__ */ new Map();
+		scrollHistory.set(router, positions);
+	}
+	return positions;
+}
+var stores = /* @__PURE__ */ new WeakMap();
+function createNavigationStore() {
+	return createStore({
+		type: "POP",
+		state: typeof history === "undefined" ? null : history.state?.state,
+		key: typeof history === "undefined" ? "initial" : history.state?.key ?? "initial",
+		preventScrollReset: false
+	});
+}
+function navigationStore(router) {
+	let store = stores.get(router);
+	if (!store) {
+		store = createNavigationStore();
+		stores.set(router, store);
+	}
+	return store;
+}
+function connectNavigation(router) {
+	const store = navigationStore(router);
+	const navigate = router.navigate;
+	let sequence = 0;
+	let pending;
+	const committed = () => {
+		if (!pending || router.getSnapshot().state !== "idle") return;
+		const next = pending;
+		pending = void 0;
+		if (next.type !== "POP") history.replaceState(next, "", location.href);
+		store.update(next);
+	};
+	const unsubscribe = router.subscribe(committed);
+	const rememberScroll = () => {
+		scrollPositions(router).set(store.getSnapshot().key, [window.scrollX, window.scrollY]);
+	};
+	router.navigate = async (href, options = {}) => {
+		const destination = resolveApplicationURL(new URL(href, router.getSnapshot().url));
+		if (destination.origin !== location.origin) {
+			leaveDocument(destination);
+			return;
+		}
+		rememberScroll();
+		const current = ++sequence;
+		pending = {
+			type: options.replace ? "REPLACE" : "PUSH",
+			state: options.state ?? null,
+			key: `${Date.now().toString(36)}-${current}`,
+			preventScrollReset: options.preventScrollReset ?? false
+		};
+		await navigate(href, options);
+		committed();
+	};
+	const pop = () => {
+		rememberScroll();
+		pending = {
+			...history.state,
+			type: "POP",
+			key: history.state?.key ?? "initial",
+			preventScrollReset: false
+		};
+		committed();
+	};
+	const handoff = (event) => {
+		const anchor = event.target instanceof Element ? event.target.closest("a[href]") : null;
+		if (!(anchor instanceof HTMLAnchorElement) || !navigationClick(event, anchor)) return;
+		const target = resolveApplicationURL(new URL(anchor.href));
+		handoffDocument(event, target);
+	};
+	if (typeof document !== "undefined") document.addEventListener("click", handoff);
+	window.addEventListener("popstate", pop);
+	const dispose = router.dispose;
+	router.dispose = () => {
+		pending = void 0;
+		unsubscribe();
+		window.removeEventListener("popstate", pop);
+		if (typeof document !== "undefined") document.removeEventListener("click", handoff);
+		dispose();
+	};
+}
+//#endregion
+export { connectNavigation, navigationStore, scrollPositions };

package/dist/core/presentation.d.ts

@@ -0,0 +1,5 @@
+import type { Router } from "./types.ts";
+type CommitView = (update: () => void) => void;
+export declare function pendingLocation(router: Router): URL | undefined;
+export declare function retainRoute(router: Router, commitView: CommitView): void;
+export {};

package/dist/core/presentation.js

@@ -0,0 +1,69 @@
+//#region .generated/core/presentation.ts
+var pending = /* @__PURE__ */ new WeakMap();
+function pendingLocation(router) {
+	const snapshot = pending.get(router)?.();
+	return snapshot?.state !== "idle" && snapshot?.url ? new URL(snapshot.url) : void 0;
+}
+function retainRoute(router, commitView) {
+	const read = router.getSnapshot;
+	pending.set(router, read);
+	let viewTransition;
+	const navigate = router.navigate;
+	router.navigate = (href, options = {}) => {
+		viewTransition = options.viewTransition;
+		return navigate(href, options);
+	};
+	let visible = read();
+	let revision = 0;
+	const listeners = /* @__PURE__ */ new Set();
+	const publish = () => {
+		for (const listener of listeners) listener();
+	};
+	const unsubscribe = router.subscribe(() => {
+		const next = read();
+		const current = ++revision;
+		if (next.state !== "idle" && visible.loaded) {
+			visible = {
+				...visible,
+				state: next.state
+			};
+			publish();
+			return;
+		}
+		const commit = () => {
+			if (current !== revision) return;
+			commitView(() => {
+				visible = next;
+				publish();
+			});
+		};
+		const previousURL = new URL(visible.url);
+		const nextURL = new URL(next.url);
+		const changed = previousURL.pathname + previousURL.search !== nextURL.pathname + nextURL.search;
+		const component = (path) => {
+			const route = router.routes.find((item) => item.path === path);
+			return route?.resolveComponent?.() ?? route?.default;
+		};
+		const previousComponent = component(visible.path);
+		const sharedView = previousComponent && previousComponent === component(next.path);
+		if (changed && visible.loaded && viewTransition !== false && !sharedView && previousURL.pathname !== nextURL.pathname && typeof document !== "undefined" && typeof document.startViewTransition === "function" && !matchMedia("(prefers-reduced-motion: reduce)").matches) {
+			document.startViewTransition(commit).ready.catch(() => {});
+			return;
+		}
+		commit();
+	});
+	router.getSnapshot = () => visible;
+	router.subscribe = (listener) => {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	};
+	const dispose = router.dispose;
+	router.dispose = () => {
+		unsubscribe();
+		pending.delete(router);
+		listeners.clear();
+		dispose();
+	};
+}
+//#endregion
+export { pendingLocation, retainRoute };

package/dist/core/resource-types.d.ts

@@ -0,0 +1,37 @@
+export type Params = Readonly<Record<string, string>>;
+export interface LoaderFunctionArgs {
+    params: Params;
+    signal: AbortSignal;
+}
+export interface ActionFunctionArgs<Input = unknown> {
+    input: Input;
+    params: Params;
+    signal: AbortSignal;
+}
+export interface DataResult<Data> {
+    data: Data | null;
+    error: string;
+    unexpected?: true;
+}
+export interface ResourceModule {
+    action?: (args: ActionFunctionArgs) => Promise<DataResult<unknown>>;
+    loader?: (args: LoaderFunctionArgs) => Promise<DataResult<unknown>>;
+    shouldRevalidate?: (args: ShouldRevalidateFunctionArgs) => boolean;
+}
+export interface ShouldRevalidateFunctionArgs {
+    actionResult: DataResult<unknown>;
+    defaultShouldRevalidate: boolean;
+    params: Params;
+}
+export type NavigationState = "idle" | "loading" | "submitting";
+export interface RouteState {
+    actionData: unknown;
+    actionError: string;
+    actionState: "idle" | "submitting";
+    loaderData: unknown;
+    loaderError: string;
+    loaderInitialized: boolean;
+    loaderState: "idle" | "loading";
+    navigationState: NavigationState;
+    unexpectedError: boolean;
+}

package/dist/core/resources.d.ts

@@ -0,0 +1,19 @@
+import type { DataResult, Params, ResourceModule, RouteState } from "./resource-types.ts";
+export declare class ResourceRouter {
+    #private;
+    constructor(routes: ReadonlyMap<string, ResourceModule>);
+    dispose(): void;
+    getRoute(routeId: string): ResourceModule | null;
+    getSnapshot(routeId: string, params: Params): RouteState;
+    hydrateRoute<Data>(routeId: string, data: Data, params?: Params): void;
+    persist(routeId: string, params?: Params): void;
+    disposeRoute(routeId: string, params?: Params): void;
+    load<Data>(routeId: string, params?: Params, force?: boolean): Promise<DataResult<Data>>;
+    subscribe(routeId: string, params: Params, listener: () => void): () => void;
+    submit<Data>(routeId: string, input: unknown, params?: Params): Promise<DataResult<Data>>;
+    fetchLoader<Data>(routeId: string, params: Params, signal: AbortSignal): Promise<DataResult<Data>>;
+    fetchAction<Data>(routeId: string, input: unknown, params: Params, signal: AbortSignal): Promise<DataResult<Data>>;
+    retry(routeId: string, params: Params): Promise<DataResult<unknown>>;
+    reportUnexpected(routeId: string, params: Params): void;
+}
+export declare function createResourceRouter(routes: ReadonlyMap<string, ResourceModule>): ResourceRouter;

package/dist/core/resources.js

@@ -0,0 +1,345 @@
+import { safeWrapAsync } from "./errors.js";
+//#region .generated/core/resources.ts
+var IDLE_ROUTE_STATE = {
+	actionData: null,
+	actionError: "",
+	actionState: "idle",
+	loaderData: null,
+	loaderError: "",
+	loaderInitialized: false,
+	loaderState: "idle",
+	navigationState: "idle",
+	unexpectedError: false
+};
+var ResourceRouter = class {
+	#cleanupTimers = /* @__PURE__ */ new Map();
+	#controllers = /* @__PURE__ */ new Map();
+	#inFlightLoads = /* @__PURE__ */ new Map();
+	#listeners = /* @__PURE__ */ new Map();
+	#persistentRoutes = /* @__PURE__ */ new Set();
+	#routes;
+	#states = /* @__PURE__ */ new Map();
+	constructor(routes) {
+		this.#routes = routes;
+	}
+	dispose() {
+		for (const controller of this.#controllers.values()) controller.abort();
+		this.#controllers.clear();
+		for (const timer of this.#cleanupTimers.values()) clearTimeout(timer);
+		this.#cleanupTimers.clear();
+		this.#inFlightLoads.clear();
+		this.#listeners.clear();
+		this.#persistentRoutes.clear();
+	}
+	getRoute(routeId) {
+		return this.#routes.get(routeId) ?? null;
+	}
+	getSnapshot(routeId, params) {
+		return this.#states.get(createRouteKey(routeId, params)) ?? IDLE_ROUTE_STATE;
+	}
+	hydrateRoute(routeId, data, params = {}) {
+		const routeKey = createRouteKey(routeId, params);
+		const currentState = this.#states.get(routeKey) ?? IDLE_ROUTE_STATE;
+		this.#setState(routeKey, {
+			...currentState,
+			loaderData: data,
+			loaderError: "",
+			loaderInitialized: true,
+			loaderState: "idle",
+			navigationState: currentState.actionState === "submitting" ? "submitting" : "idle",
+			unexpectedError: false
+		});
+	}
+	persist(routeId, params = {}) {
+		const routeKey = createRouteKey(routeId, params);
+		this.#persistentRoutes.add(routeKey);
+		const cleanupTimer = this.#cleanupTimers.get(routeKey);
+		if (!cleanupTimer) return;
+		clearTimeout(cleanupTimer);
+		this.#cleanupTimers.delete(routeKey);
+	}
+	disposeRoute(routeId, params = {}) {
+		this.#disposeRouteKey(createRouteKey(routeId, params));
+	}
+	#disposeRouteKey(routeKey) {
+		this.#persistentRoutes.delete(routeKey);
+		const cleanupTimer = this.#cleanupTimers.get(routeKey);
+		if (cleanupTimer) clearTimeout(cleanupTimer);
+		this.#cleanupTimers.delete(routeKey);
+		this.#controllers.get(routeKey)?.abort();
+		this.#controllers.get(`${routeKey}:action`)?.abort();
+		this.#controllers.delete(routeKey);
+		this.#controllers.delete(`${routeKey}:action`);
+		this.#inFlightLoads.delete(routeKey);
+		this.#states.delete(routeKey);
+		this.#notify(routeKey);
+	}
+	load(routeId, params = {}, force = false) {
+		const routeKey = createRouteKey(routeId, params);
+		const route = this.#routes.get(routeId);
+		if (!route?.loader) return Promise.resolve({
+			data: null,
+			error: "Route loader not found."
+		});
+		const currentState = this.#states.get(routeKey);
+		if (!force && currentState?.loaderInitialized) return Promise.resolve({
+			data: currentState?.loaderData,
+			error: currentState?.loaderError ?? ""
+		});
+		const currentLoad = this.#inFlightLoads.get(routeKey);
+		if (force && currentLoad) {
+			this.#controllers.get(routeKey)?.abort();
+			this.#inFlightLoads.delete(routeKey);
+		}
+		if (!force && currentLoad) return currentLoad;
+		const controller = this.#replaceController(routeKey);
+		this.#setState(routeKey, {
+			...currentState ?? IDLE_ROUTE_STATE,
+			loaderError: "",
+			loaderState: "loading",
+			navigationState: currentState?.actionState === "submitting" ? "submitting" : "loading",
+			unexpectedError: false
+		});
+		const load = this.#runLoader(route, routeKey, params, controller);
+		this.#inFlightLoads.set(routeKey, load);
+		return load;
+	}
+	subscribe(routeId, params, listener) {
+		const routeKey = createRouteKey(routeId, params);
+		const cleanupTimer = this.#cleanupTimers.get(routeKey);
+		if (cleanupTimer) {
+			clearTimeout(cleanupTimer);
+			this.#cleanupTimers.delete(routeKey);
+		}
+		const listeners = this.#listeners.get(routeKey) ?? /* @__PURE__ */ new Set();
+		listeners.add(listener);
+		this.#listeners.set(routeKey, listeners);
+		return () => {
+			if (!listeners.delete(listener) || listeners.size > 0) return;
+			this.#listeners.delete(routeKey);
+			if (this.#persistentRoutes.has(routeKey)) return;
+			const timer = setTimeout(() => this.#disposeRouteKey(routeKey), routeCleanupGraceMs);
+			this.#cleanupTimers.set(routeKey, timer);
+		};
+	}
+	async submit(routeId, input, params = {}) {
+		const routeKey = createRouteKey(routeId, params);
+		const route = this.#routes.get(routeId);
+		if (!route?.action) return {
+			data: null,
+			error: "Route action not found."
+		};
+		const controllerKey = `${routeKey}:action`;
+		const controller = this.#replaceController(controllerKey);
+		const currentState = this.#states.get(routeKey) ?? IDLE_ROUTE_STATE;
+		this.#setState(routeKey, {
+			...currentState,
+			actionError: "",
+			actionState: "submitting",
+			navigationState: "submitting",
+			unexpectedError: false
+		});
+		const { error, data: result } = await safeWrapAsync(() => route.action?.({
+			input,
+			params,
+			signal: controller.signal
+		}));
+		if (this.#controllers.get(controllerKey) === controller) this.#controllers.delete(controllerKey);
+		if (controller.signal.aborted) return {
+			data: null,
+			error: ""
+		};
+		const latestState = this.#states.get(routeKey) ?? IDLE_ROUTE_STATE;
+		if (error || !result) {
+			const publicError = "The request could not be completed.";
+			this.#setState(routeKey, {
+				...latestState,
+				actionData: null,
+				actionError: publicError,
+				actionState: "idle",
+				navigationState: latestState.loaderState === "loading" ? "loading" : "idle",
+				unexpectedError: true
+			});
+			return {
+				data: null,
+				error: publicError,
+				unexpected: true
+			};
+		}
+		this.#setState(routeKey, {
+			...latestState,
+			actionData: result.data,
+			actionError: result.error,
+			actionState: "idle",
+			navigationState: latestState.loaderState === "loading" ? "loading" : "idle",
+			unexpectedError: false
+		});
+		const actionResult = {
+			data: result.data,
+			error: result.error
+		};
+		const { error: revalidationError, data: shouldRevalidate } = await safeWrapAsync(() => route.shouldRevalidate?.({
+			actionResult: result,
+			defaultShouldRevalidate: Boolean(route.loader),
+			params
+		}) ?? Boolean(route.loader));
+		if (revalidationError) {
+			const publicError = "The request could not be completed.";
+			this.#setState(routeKey, {
+				...this.#states.get(routeKey) ?? IDLE_ROUTE_STATE,
+				actionError: publicError,
+				actionState: "idle",
+				unexpectedError: true
+			});
+			return {
+				data: null,
+				error: publicError,
+				unexpected: true
+			};
+		}
+		if (shouldRevalidate) await this.load(routeId, params, true);
+		return actionResult;
+	}
+	async fetchLoader(routeId, params, signal) {
+		const route = this.#routes.get(routeId);
+		if (!route?.loader) return {
+			data: null,
+			error: "Route loader not found."
+		};
+		const { error, data: result } = await safeWrapAsync(() => route.loader?.({
+			params,
+			signal
+		}));
+		if (signal.aborted) return {
+			data: null,
+			error: ""
+		};
+		if (error || !result) return {
+			data: null,
+			error: "The route could not be loaded.",
+			unexpected: true
+		};
+		return result;
+	}
+	async fetchAction(routeId, input, params, signal) {
+		const route = this.#routes.get(routeId);
+		if (!route?.action) return {
+			data: null,
+			error: "Route action not found."
+		};
+		const { error, data: result } = await safeWrapAsync(() => route.action?.({
+			input,
+			params,
+			signal
+		}));
+		if (signal.aborted) return {
+			data: null,
+			error: ""
+		};
+		if (error || !result) return {
+			data: null,
+			error: "The request could not be completed.",
+			unexpected: true
+		};
+		const { error: revalidationError, data: shouldRevalidate } = await safeWrapAsync(() => route.shouldRevalidate?.({
+			actionResult: result,
+			defaultShouldRevalidate: Boolean(route.loader),
+			params
+		}) ?? Boolean(route.loader));
+		if (signal.aborted) return {
+			data: null,
+			error: ""
+		};
+		if (revalidationError) return {
+			data: null,
+			error: "The request could not be completed.",
+			unexpected: true
+		};
+		if (shouldRevalidate) await this.load(routeId, params, true);
+		return result;
+	}
+	retry(routeId, params) {
+		const routeKey = createRouteKey(routeId, params);
+		this.#states.set(routeKey, IDLE_ROUTE_STATE);
+		this.#notify(routeKey);
+		return this.load(routeId, params, true);
+	}
+	reportUnexpected(routeId, params) {
+		const routeKey = createRouteKey(routeId, params);
+		const currentState = this.#states.get(routeKey) ?? IDLE_ROUTE_STATE;
+		this.#setState(routeKey, {
+			...currentState,
+			unexpectedError: true
+		});
+	}
+	async #runLoader(route, routeKey, params, controller) {
+		const { error, data: result } = await safeWrapAsync(() => route.loader?.({
+			params,
+			signal: controller.signal
+		}) ?? Promise.resolve({
+			data: null,
+			error: ""
+		}));
+		if (this.#controllers.get(routeKey) === controller) {
+			this.#controllers.delete(routeKey);
+			this.#inFlightLoads.delete(routeKey);
+		}
+		if (controller.signal.aborted) return {
+			data: null,
+			error: ""
+		};
+		if (error || !result) {
+			const publicError = "The route could not be loaded.";
+			this.#setState(routeKey, {
+				actionData: null,
+				actionError: "",
+				actionState: "idle",
+				loaderData: null,
+				loaderError: publicError,
+				loaderInitialized: true,
+				loaderState: "idle",
+				navigationState: "idle",
+				unexpectedError: true
+			});
+			return {
+				data: null,
+				error: publicError,
+				unexpected: true
+			};
+		}
+		const currentState = this.#states.get(routeKey) ?? IDLE_ROUTE_STATE;
+		this.#setState(routeKey, {
+			...currentState,
+			loaderData: result.data,
+			loaderError: result.error,
+			loaderInitialized: true,
+			loaderState: "idle",
+			navigationState: currentState.actionState === "submitting" ? "submitting" : "idle",
+			unexpectedError: false
+		});
+		return result;
+	}
+	#replaceController(key) {
+		this.#controllers.get(key)?.abort();
+		const controller = new AbortController();
+		this.#controllers.set(key, controller);
+		return controller;
+	}
+	#setState(routeKey, state) {
+		this.#states.set(routeKey, state);
+		this.#notify(routeKey);
+	}
+	#notify(routeKey) {
+		for (const listener of this.#listeners.get(routeKey) ?? []) listener();
+	}
+};
+function createResourceRouter(routes) {
+	return new ResourceRouter(routes);
+}
+function createRouteKey(routeId, params) {
+	const normalizedParams = Object.entries(params).sort(([left], [right]) => left.localeCompare(right));
+	return `${routeId}:${JSON.stringify(normalizedParams)}`;
+}
+var routeCleanupGraceMs = 100;
+//#endregion
+export { ResourceRouter, createResourceRouter };

package/dist/core/responses.d.ts

@@ -0,0 +1,15 @@
+export interface RouteError extends Error {
+    status: number;
+    statusText: string;
+    data?: unknown;
+}
+export interface DataResponse<T> {
+    value: T;
+    init: ResponseInit;
+    __routeData: true;
+}
+export declare function data<T>(value: T, init?: ResponseInit): DataResponse<T>;
+export declare function redirect(location: string, init?: number | ResponseInit): Response;
+export declare function isRouteErrorResponse(value: unknown): value is RouteError;
+export declare function normalizeResult(value: unknown): Promise<unknown>;
+export declare function resolveData(value: unknown): Promise<unknown>;

package/dist/core/responses.js

@@ -0,0 +1,48 @@
+//#region .generated/core/responses.ts
+function data(value, init = {}) {
+	return {
+		value,
+		init,
+		__routeData: true
+	};
+}
+function redirect(location, init = 302) {
+	const options = typeof init === "number" ? { status: init } : init;
+	const headers = new Headers(options.headers);
+	headers.set("Location", location);
+	return new Response(null, {
+		...options,
+		status: options.status ?? 302,
+		headers
+	});
+}
+function isRouteErrorResponse(value) {
+	return value instanceof Error && "status" in value;
+}
+async function normalizeResult(value) {
+	if (value && typeof value === "object" && "__routeError" in value) {
+		const error = value.__routeError;
+		return Object.assign(Error(error.message), error);
+	}
+	if (value instanceof Response) {
+		if (value.headers.has("Location")) return value;
+		if (!value.ok) return Object.assign(Error(await value.text()), {
+			status: value.status,
+			statusText: value.statusText
+		});
+		return value.json();
+	}
+	if (value && typeof value === "object" && "__routeData" in value) return resolveData(value.value);
+	return resolveData(value);
+}
+async function resolveData(value) {
+	const resolved = await value;
+	if (Array.isArray(resolved)) return Promise.all(resolved.map(resolveData));
+	if (resolved && typeof resolved === "object" && Object.getPrototypeOf(resolved) === Object.prototype) {
+		const entries = await Promise.all(Object.entries(resolved).map(async ([key, field]) => [key, await resolveData(field)]));
+		return Object.fromEntries(entries);
+	}
+	return resolved;
+}
+//#endregion
+export { data, isRouteErrorResponse, normalizeResult, redirect, resolveData };

package/dist/{internal/core → core}/router.d.ts

@@ -1,3 +1,3 @@
 import type { Route, Router, RouterOptions } from "./types.ts";
 /** Create an isolated router. Use browser: true for browser history, or loadRouter for SSR. */
-export declare function createRouter(routes: readonly Route[], options?: RouterOptions): Router;
+export declare function createDataRouter(routes: readonly Route[], options?: RouterOptions): Router;