@kasperrt/smolter 0.2.0 → 0.3.1

package/dist/core/submission.d.ts

@@ -0,0 +1,30 @@
+import type { Fetcher, NavigateOptions, Router } from "./types.ts";
+/** Values accepted by programmatic route submissions. */
+export type Submission = FormData | HTMLFormElement | Record<string, unknown>;
+/** Destination and encoding for a programmatic route submission. */
+export interface SubmissionOptions {
+    action?: string;
+    encType?: string;
+    method?: string;
+    replace?: boolean;
+    preventScrollReset?: boolean;
+}
+export declare function formData(value: Submission): FormData;
+export declare function submissionBody(value: Submission, encoding?: string): FormData;
+/** Encode successful form controls for a GET route request. */
+export declare function submissionSearch(body: FormData): string;
+/** Read the JSON payload of a programmatic submission. */
+export declare function readSubmission(request: Request): Promise<unknown>;
+/** Browser form behavior shared by the React and Preact adapters. */
+export interface RouteFormOptions extends NavigateOptions {
+    action?: string;
+    method?: "get" | "post" | "put" | "patch" | "delete";
+    reloadDocument?: boolean;
+}
+export interface FormSubmissionEvent {
+    currentTarget: HTMLFormElement;
+    defaultPrevented: boolean;
+    preventDefault: () => void;
+}
+/** Submit an internal form while leaving external actions to the browser. */
+export declare function submitForm(router: Router, event: FormSubmissionEvent, submitter: HTMLElement | null, options: RouteFormOptions, fetcher?: Fetcher): void;

package/dist/core/submission.js

@@ -0,0 +1,41 @@
+import { internalURL } from "./url.js";
+//#region .generated/core/submission.ts
+function formData(value) {
+	if (value instanceof FormData) return value;
+	if (typeof HTMLFormElement !== "undefined" && value instanceof HTMLFormElement) return new FormData(value);
+	const body = new FormData();
+	for (const [key, field] of Object.entries(value)) body.append(key, String(field));
+	return body;
+}
+function submissionBody(value, encoding) {
+	return formData(encoding === "application/json" ? { _payload: JSON.stringify(value) } : value);
+}
+/** Encode successful form controls for a GET route request. */
+function submissionSearch(body) {
+	const search = new URLSearchParams();
+	for (const [key, value] of body) search.append(key, typeof value === "string" ? value : value.name);
+	return String(search);
+}
+/** Read the JSON payload of a programmatic submission. */
+async function readSubmission(request) {
+	if (request.headers.get("Content-Type")?.includes("application/json")) return request.json();
+	const body = await request.formData();
+	return JSON.parse(String(body.get("_payload") ?? "{}"));
+}
+/** Submit an internal form while leaving external actions to the browser. */
+function submitForm(router, event, submitter, options, fetcher) {
+	if (event.defaultPrevented || options.reloadDocument) return;
+	const target = internalURL(router.getSnapshot().url, submitter?.getAttribute("formaction") ?? options.action);
+	if (!target) return;
+	const data = new FormData(event.currentTarget, submitter);
+	const method = (submitter?.getAttribute("formmethod") ?? options.method)?.toUpperCase();
+	event.preventDefault();
+	if (method === "GET") {
+		target.search = submissionSearch(data);
+		fetcher ? fetcher.load(target.href) : router.navigate(target.href, options);
+		return;
+	}
+	(fetcher ?? router).submit(target.href, data, { method });
+}
+//#endregion
+export { formData, readSubmission, submissionBody, submissionSearch, submitForm };

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

@@ -41,6 +41,8 @@ export interface RevalidationArgs extends RevalidationContext {
 }
 /** A route component and its optional server and client data handlers. */
 export interface RouteModule {
+    /** Stable identifier for targeted revalidation; defaults to the path. */
+    id?: string;
     default?: unknown;
     HydrateFallback?: unknown;
     ErrorBoundary?: unknown;
@@ -80,7 +82,11 @@ export interface RouterOptions {
 }
 /** Options for replacing rather than appending a browser history entry. */
 export interface NavigateOptions {
+    state?: unknown;
+    viewTransition?: boolean;
     replace?: boolean;
+    /** Preserve scroll in integrations that manage scroll restoration. */
+    preventScrollReset?: boolean;
 }
 /** HTTP method for a route action submission; defaults to POST. */
 export interface SubmitOptions {
@@ -104,6 +110,13 @@ export interface Fetcher {
     /** Abort work and release subscriptions when this imperative fetcher is no longer used. */
     dispose: () => void;
 }
+/** Refresh active route data without navigation, optionally selecting route IDs or paths. */
+export interface RevalidateOptions extends RevalidationContext {
+    route?: string | readonly string[];
+    reason?: RevalidationArgs["reason"];
+}
+/** A registered layout loader's revalidation callback. */
+export type Revalidator = (args: RevalidationArgs) => void | Promise<void>;
 /** Route navigation, subscriptions, fetchers, and loader revalidation. */
 export interface Router {
     routes: readonly Route[];
@@ -111,7 +124,9 @@ export interface Router {
     subscribe: (listener: () => void) => () => void;
     start: () => () => void;
     navigate: (url: string, options?: NavigateOptions) => Promise<void>;
-    revalidate: (reason?: RevalidationArgs["reason"], context?: RevalidationContext) => Promise<void>;
+    revalidate: (options?: RevalidateOptions | RevalidationArgs["reason"], context?: RevalidationContext) => Promise<void>;
+    /** Register layout data under a route ID. The returned function unregisters it. */
+    registerRevalidator: (id: string, revalidate: Revalidator) => () => void;
     submit: (url: string, body: FormData, options?: SubmitOptions) => Promise<Result>;
     /** Create an independent fetcher. Framework useFetcher hooks manage disposal automatically. */
     createFetcher: () => Fetcher;

package/dist/core/url.d.ts

@@ -0,0 +1,7 @@
+/** Resolve an internal URL; external links remain the browser's responsibility. */
+export declare function internalURL(base: string, href?: string): URL | undefined;
+/** Browser and framework event fields used by navigation interception. */
+type NavigationClickEvent = Pick<MouseEvent, "defaultPrevented" | "button" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey">;
+/** Whether an anchor click should use router navigation. */
+export declare function navigationClick(event: NavigationClickEvent, anchor: HTMLAnchorElement): boolean;
+export {};

package/dist/core/url.js

@@ -0,0 +1,12 @@
+//#region .generated/core/url.ts
+/** Resolve an internal URL; external links remain the browser's responsibility. */
+function internalURL(base, href = base) {
+	const url = new URL(href, base);
+	if (url.origin === new URL(base).origin) return url;
+}
+/** Whether an anchor click should use router navigation. */
+function navigationClick(event, anchor) {
+	return !(event.defaultPrevented || event.button || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey || anchor.hasAttribute("download") || anchor.target && anchor.target !== "_self");
+}
+//#endregion
+export { internalURL, navigationClick };

package/dist/core/utils.d.ts

@@ -0,0 +1,5 @@
+/** Framework-independent, browser-safe utilities. @module */
+export * from "./errors.ts";
+export * from "./match.ts";
+export * from "./serialize.ts";
+export * from "./url.ts";

package/dist/core/utils.js

@@ -0,0 +1,5 @@
+import { safeWrapAsync } from "./errors.js";
+import { defineRoute, matchRoutes } from "./match.js";
+import { internalURL, navigationClick } from "./url.js";
+import { serialize, serializeData } from "./serialize.js";
+export { defineRoute, internalURL, matchRoutes, navigationClick, safeWrapAsync, serialize, serializeData };

package/dist/files/index.js

@@ -0,0 +1,64 @@
+import { safeWrapAsync } from "../core/errors.js";
+import { readdir } from "node:fs/promises";
+import { resolve } from "node:path";
+//#region .generated/files/index.ts
+/**
+* Build-time discovery of flat file routes.
+* @module
+*/
+var routeFile = /^route\.[jt]sx?$/;
+var flatFile = /\.[jt]sx?$/;
+/** Read only flat files and immediate route folders. Colocated helpers are ignored. */
+async function flatRoutes(directory) {
+	const result = await safeWrapAsync(async () => {
+		const entries = await readdir(directory, { withFileTypes: true });
+		const routes = [];
+		const patterns = /* @__PURE__ */ new Set();
+		for (const entry of entries) {
+			let name = entry.name;
+			let file = resolve(directory, name);
+			if (entry.isDirectory()) {
+				const candidates = (await readdir(file)).filter((name) => routeFile.test(name));
+				if (candidates.length > 1) return /* @__PURE__ */ new Error(`Multiple route files in ${file}`);
+				if (!candidates.length) continue;
+				file = resolve(file, candidates[0]);
+			} else {
+				if (!entry.isFile() || !flatFile.test(name) || name.endsWith(".d.ts")) continue;
+				name = name.replace(flatFile, "");
+			}
+			if (/[()[\]:*?]/.test(name)) return /* @__PURE__ */ new Error(`Unsupported flat route name: ${name}`);
+			const segments = name.split(".");
+			const parts = [];
+			for (const [index, segment] of segments.entries()) {
+				if (!segment) return /* @__PURE__ */ new Error(`Empty route segment: ${name}`);
+				if (segment === "_index" && index !== segments.length - 1) return /* @__PURE__ */ new Error(`_index must be last: ${name}`);
+				if (segment === "$" && index !== segments.length - 1) return /* @__PURE__ */ new Error(`Splat must be last: ${name}`);
+				if (segment.startsWith("_")) continue;
+				const part = segment.replace(/_$/, "");
+				parts.push(part === "$" ? "*" : part.replace(/^\$/, ":"));
+			}
+			if (segments.at(-1)?.startsWith("_") && segments.at(-1) !== "_index") continue;
+			const path = `/${parts.join("/")}`;
+			const pattern = path.replace(/:[^/]+/g, ":");
+			if (patterns.has(pattern)) return /* @__PURE__ */ new Error(`Conflicting flat route: ${path}`);
+			patterns.add(pattern);
+			routes.push({
+				path,
+				file
+			});
+		}
+		return routes.sort((a, b) => {
+			const left = a.path.split("/");
+			const right = b.path.split("/");
+			const rank = (part) => part === "*" ? 0 : part?.startsWith(":") ? 1 : part === void 0 ? 2 : 3;
+			for (let index = 0; index < Math.max(left.length, right.length); index++) {
+				const difference = rank(right[index]) - rank(left[index]);
+				if (difference) return difference;
+			}
+			return a.path.localeCompare(b.path);
+		});
+	});
+	return result.error ?? result.data;
+}
+//#endregion
+export { flatRoutes };

package/dist/preact/await.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentChildren } from "preact";
+export interface AwaitProps<T> {
+    resolve: T | Promise<T>;
+    children: (value: Awaited<T>) => ComponentChildren;
+    errorElement?: ComponentChildren;
+}
+export declare function Await<T>({ resolve, children, errorElement, }: AwaitProps<T>): ComponentChildren;

package/dist/preact/await.js

@@ -0,0 +1,19 @@
+import { use } from "preact/compat";
+//#region .generated/preact/await.tsx
+var resolutions = /* @__PURE__ */ new WeakMap();
+function Await({ resolve, children, errorElement }) {
+	if (!(resolve instanceof Promise)) return children(resolve);
+	let pending = resolutions.get(resolve);
+	if (!pending) {
+		pending = resolve.then((value) => ({ value }), (error) => ({ error }));
+		resolutions.set(resolve, pending);
+	}
+	const result = use(pending);
+	if ("error" in result) {
+		if (errorElement !== void 0) return errorElement;
+		throw result.error;
+	}
+	return children(result.value);
+}
+//#endregion
+export { Await };

package/dist/preact/client.d.ts

@@ -0,0 +1,7 @@
+/** Browser mounting and hydration for Preact applications. @module */
+/** @jsxImportSource preact */
+import { type Router } from "../core/index.ts";
+import type { AppRoute, RootModule } from "./route-types.ts";
+export * from "../client/index.ts";
+export { configureApplication } from "../core/environment.ts";
+export declare function mountApplication(routes: AppRoute[], rootModule?: RootModule, hash?: boolean): Promise<Router>;

package/dist/preact/client.js

@@ -0,0 +1,68 @@
+import { matchRoutes } from "../core/match.js";
+import { createDataRouter } from "../core/router.js";
+import { configureApplication } from "../core/environment.js";
+import { retainRoute } from "../core/presentation.js";
+import { connectNavigation } from "../core/navigation.js";
+import { attachRootData } from "./root-data.js";
+import { RouterApplication, prepareRoutes } from "./router.js";
+import { deserialize } from "../client/deserialize.js";
+import { watchDeployment } from "../client/deployment.js";
+import { serverRoute } from "../client/index.js";
+import { flushSync } from "preact/compat";
+import { jsx } from "preact/jsx-runtime";
+import { hydrate, render } from "preact";
+//#region .generated/preact/client.tsx
+/** Browser mounting and hydration for Preact applications. @module */
+/** @jsxImportSource preact */
+async function mountApplication(routes, rootModule, hash = false) {
+	const initialURL = new URL(hash ? location.hash.slice(1) || "/" : location.href, location.origin);
+	await (matchRoutes(routes, initialURL.pathname)?.route)?.preload?.();
+	routes = prepareRoutes(routes);
+	const element = document.getElementById("smolter-data");
+	const hydration = element?.textContent ? JSON.parse(element.textContent) : void 0;
+	if (hydration?.snapshot.error) hydration.snapshot.error = Object.assign(new Error(hydration.snapshot.error.message), hydration.snapshot.error);
+	const router = createDataRouter(routes, {
+		browser: !hash,
+		url: hash ? new URL(location.hash.slice(1) || "/", location.origin).href : location.href,
+		...hydration && { hydrationData: hydration.snapshot }
+	});
+	retainRoute(router, flushSync);
+	if (hash) connectHashHistory(router);
+	connectNavigation(router);
+	const rootStore = attachRootData(router, hydration?.root, rootModule);
+	const props = {
+		routes,
+		router,
+		root: hydration?.root,
+		rootModule,
+		rootStore
+	};
+	if (hydration) {
+		hydrate(/* @__PURE__ */ jsx(RouterApplication, {
+			...props,
+			document: true
+		}), document);
+		return router;
+	}
+	const target = document.getElementById("root");
+	if (target) render(/* @__PURE__ */ jsx(RouterApplication, { ...props }), target);
+	return router;
+}
+function connectHashHistory(router) {
+	const navigate = router.navigate;
+	router.navigate = async (url, options) => {
+		const target = new URL(url, router.getSnapshot().url);
+		const hash = `#${target.pathname}${target.search}`;
+		history[options?.replace ? "replaceState" : "pushState"](null, "", hash);
+		await navigate(url, options);
+	};
+	const onHashChange = () => void navigate(location.hash.slice(1) || "/");
+	window.addEventListener("hashchange", onHashChange);
+	const dispose = router.dispose;
+	router.dispose = () => {
+		window.removeEventListener("hashchange", onHashChange);
+		dispose();
+	};
+}
+//#endregion
+export { configureApplication, deserialize, mountApplication, serverRoute, watchDeployment };

package/dist/preact/context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Preact components and typed data hooks. Import from @kasperrt/smolter/preact.
+ * @module
+ */
+import type { NavigationRouter, Snapshot } from "../core/index.ts";
+import { type ReactNode } from "./runtime.ts";
+/** Router instance and children rendered within its context. */
+export interface RouterProviderProps {
+    router: NavigationRouter;
+    children?: ReactNode;
+}
+/** Provide a router to descendant hooks and connect its browser lifecycle. */
+export declare function RouterProvider({ router, children, }: RouterProviderProps): ReactNode;
+/** Hooks require a RouterProvider. */
+export declare function useRouter<T extends NavigationRouter = NavigationRouter>(): T;
+export declare function useSnapshot(): Snapshot;
+export declare function useSnapshot<K extends keyof Snapshot>(key: K): Snapshot[K];
+export declare function useSnapshot<K extends keyof Snapshot>(key: K, path: string | undefined): Snapshot[K] | undefined;

package/dist/preact/context.js

@@ -0,0 +1,23 @@
+import { createContext, createElement, useContext, useEffect, useSyncExternalStore } from "./runtime.js";
+//#region .generated/preact/context.ts
+var RouterContext = createContext(void 0);
+/** Provide a router to descendant hooks and connect its browser lifecycle. */
+function RouterProvider({ router, children }) {
+	useEffect(router.start, [router]);
+	return createElement(RouterContext, { value: router }, children);
+}
+/** Hooks require a RouterProvider. */
+function useRouter() {
+	return useContext(RouterContext);
+}
+function useSnapshot(key, path) {
+	const router = useRouter();
+	const getSnapshot = () => {
+		const snapshot = router.getSnapshot();
+		if (path !== void 0 && path !== snapshot.path) return void 0;
+		return key ? snapshot[key] : snapshot;
+	};
+	return useSyncExternalStore(router.subscribe, getSnapshot);
+}
+//#endregion
+export { RouterProvider, useRouter, useSnapshot };

package/dist/preact/document.d.ts

@@ -0,0 +1,15 @@
+/** @jsxImportSource preact */
+import type { ComponentProps } from "preact/compat";
+export declare function Meta(): import("preact").JSX.Element;
+export declare function Links(): import("preact").JSX.Element;
+export interface ScriptProps {
+    nonce?: string;
+}
+export declare function Scripts({ nonce }: ScriptProps): import("preact").JSX.Element;
+export declare function ScrollRestoration(_props: ScriptProps): null;
+/** HTML attributes for server markup and client document reconciliation. */
+export interface DocumentProps extends ComponentProps<"html"> {
+    "data-debug"?: boolean;
+}
+/** Render the server document and preserve client-managed theme classes on hydration. */
+export declare function Document(props: DocumentProps): import("preact").JSX.Element;

package/dist/preact/document.js

@@ -0,0 +1,155 @@
+import { serializeData } from "../core/serialize.js";
+import { useSnapshot } from "./context.js";
+import { applicationEnvironment } from "../core/environment.js";
+import { scrollPositions } from "../core/navigation.js";
+import { useNavigationSnapshot } from "./navigation-state.js";
+import { useApplication } from "./root-context.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+import { Fragment as Fragment$1, createElement } from "preact";
+//#region .generated/preact/document.tsx
+/** @jsxImportSource preact */
+function renderMeta(item, index) {
+	if (typeof item.title === "string") return /* @__PURE__ */ jsx("title", { children: item.title }, index);
+	if ("script:ld+json" in item) return /* @__PURE__ */ jsx("script", {
+		type: "application/ld+json",
+		dangerouslySetInnerHTML: { __html: serializeData(item["script:ld+json"]) }
+	}, index);
+	const { tagName, ...props } = item;
+	return createElement(tagName === "link" ? "link" : "meta", {
+		...props,
+		key: index
+	});
+}
+function Meta() {
+	const { routes, rootModule } = useApplication();
+	const snapshot = useSnapshot();
+	const route = routes.find((item) => item.path === snapshot.path);
+	const args = {
+		loaderData: snapshot.data,
+		data: snapshot.data,
+		params: snapshot.params,
+		error: snapshot.error,
+		location: new URL(snapshot.url)
+	};
+	const values = route?.meta?.(args) ?? rootModule?.meta?.(args) ?? [];
+	useEffect(() => {
+		const title = values.find((item) => typeof item.title === "string")?.title;
+		if (typeof title === "string") document.title = title;
+	}, [values]);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: values.map(renderMeta) });
+}
+function Links() {
+	const { rootModule } = useApplication();
+	return /* @__PURE__ */ jsx(Fragment$1, { children: rootModule?.links?.().map((props, index) => /* @__PURE__ */ jsx("link", { ...props }, index)) });
+}
+function Scripts({ nonce }) {
+	const { root, router, entry } = useApplication();
+	const [json] = useState(() => {
+		const current = router.getSnapshot();
+		const snapshot = {
+			...current,
+			error: current.error && {
+				...current.error,
+				name: current.error.name,
+				message: current.error.message
+			}
+		};
+		return serializeData({
+			root,
+			snapshot
+		});
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx("script", {
+			...nonce && { nonce },
+			dangerouslySetInnerHTML: { __html: applicationEnvironment?.entryScript ?? "" }
+		}),
+		/* @__PURE__ */ jsx("script", {
+			id: "smolter-data",
+			type: "application/json",
+			...nonce && { nonce },
+			dangerouslySetInnerHTML: { __html: json }
+		}),
+		entry && /* @__PURE__ */ jsx("script", {
+			type: "module",
+			src: entry,
+			...nonce && { nonce }
+		})
+	] });
+}
+function ScrollRestoration(_props) {
+	const { router } = useApplication();
+	const { url, state } = useSnapshot();
+	const navigation = useNavigationSnapshot(router);
+	const positions = scrollPositions(router);
+	const restoredLocation = useRef("");
+	useEffect(() => {
+		const previous = history.scrollRestoration;
+		history.scrollRestoration = "manual";
+		return () => {
+			history.scrollRestoration = previous;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		if (state !== "idle") return;
+		if ((history.state?.key ?? "initial") !== navigation.key) return;
+		const locationKey = `${navigation.key}:${url}`;
+		if (restoredLocation.current === locationKey) return;
+		const frame = requestAnimationFrame(() => {
+			restoredLocation.current = locationKey;
+			const target = new URL(location.href);
+			const saved = navigation.type === "POP" && positions.get(navigation.key);
+			if (!saved && target.hash) {
+				document.getElementById(target.hash.slice(1))?.scrollIntoView();
+				return;
+			}
+			if (!saved && navigation.preventScrollReset) return;
+			const [left, top] = saved || [0, 0];
+			window.scrollTo({
+				left,
+				top,
+				behavior: "instant"
+			});
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		url,
+		state,
+		positions,
+		navigation.key,
+		navigation.type,
+		navigation.preventScrollReset
+	]);
+	return null;
+}
+/** Render the server document and preserve client-managed theme classes on hydration. */
+function Document(props) {
+	const { children, ...attributes } = props;
+	const className = String(props.className ?? "");
+	const previousClassName = useRef(className);
+	const lang = String(props.lang ?? "en");
+	const debug = String(props["data-debug"] ?? false);
+	useEffect(() => {
+		if (previousClassName.current !== className) {
+			const previous = previousClassName.current.split(/\s+/).filter(Boolean);
+			const next = className.split(/\s+/).filter(Boolean);
+			document.documentElement.classList.remove(...previous);
+			document.documentElement.classList.add(...next);
+			previousClassName.current = className;
+		}
+		document.documentElement.lang = lang;
+		document.documentElement.dataset.debug = debug;
+	}, [
+		className,
+		lang,
+		debug
+	]);
+	if (typeof document === "undefined") return /* @__PURE__ */ jsx("html", {
+		...attributes,
+		children
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+export { Document, Links, Meta, Scripts, ScrollRestoration };

package/dist/{internal/preact → preact}/fetcher.d.ts

@@ -2,11 +2,13 @@
  * Preact components and typed data hooks. Import from @kasperrt/smolter/preact.
  * @module
  */
-import type { AnyDataFunction, DataFunction, DataOf, FetcherSnapshot, Result, Route as RouteDefinition, RouteModule, SubmitOptions } from "../core/index.ts";
+import { type AnyDataFunction, type DataFunction, type DataOf, type FetcherSnapshot, type Result, type Route as RouteDefinition, type RouteModule } from "../core/index.ts";
+import { type Submission, type SubmissionOptions } from "../core/submission.ts";
 import { type FormProps } from "./form.ts";
-import type { ComponentType } from "./runtime.ts";
+import type { RouteData } from "./route-types.ts";
+import { type ComponentType } from "./runtime.ts";
 /** Action method and optional explicit route URL for a fetcher submission. */
-export interface FetcherSubmitOptions extends SubmitOptions {
+export interface FetcherSubmitOptions extends SubmissionOptions {
     action?: string;
 }
 /** Typed independent request state, methods, and a bound Form component. */
@@ -14,9 +16,11 @@ export interface TypedFetcher<T> extends Omit<FetcherSnapshot, "data"> {
     data?: T;
     Form: ComponentType<FormProps>;
     load: (url?: string) => Promise<Result>;
-    submit: (body: FormData, options?: FetcherSubmitOptions) => Promise<Result>;
+    submit: (body: Submission, options?: FetcherSubmitOptions) => Promise<Result>;
 }
 /** Create a fetcher for independent route reads and mutations; its data stays local. */
 export declare function useFetcher<T extends RouteModule>(route: RouteDefinition<T>): TypedFetcher<DataOf<Extract<T["action"] | T["clientAction"], AnyDataFunction>> | DataOf<Extract<T["loader"] | T["clientLoader"], AnyDataFunction>>>;
 /** Create a fetcher for independent route reads and mutations; its data stays local. */
-export declare function useFetcher<T extends AnyDataFunction = DataFunction>(): TypedFetcher<DataOf<T>>;
+export declare function useFetcher<T = DataFunction>(): TypedFetcher<RouteData<T>>;
+/** A fetcher with a bound form and inferred result data. */
+export type FetcherWithComponents<T> = TypedFetcher<RouteData<T>>;

package/dist/preact/fetcher.js

@@ -0,0 +1,45 @@
+import { submissionBody, submissionSearch } from "../core/submission.js";
+import { createElement, useEffect, useMemo, useSyncExternalStore } from "./runtime.js";
+import { useRouter } from "./context.js";
+import { Form } from "./form.js";
+//#region .generated/preact/fetcher.ts
+/** Create a fetcher for independent route reads and mutations; its data stays local. */
+function useFetcher(route) {
+	const router = useRouter();
+	const path = route?.path;
+	const fetcher = useMemo(() => {
+		const store = router.createFetcher();
+		const target = () => {
+			const snapshot = router.getSnapshot();
+			return path === void 0 || path === snapshot.path ? snapshot.url : path;
+		};
+		return {
+			...store,
+			Form: (props) => createElement(Form, {
+				action: target(),
+				...props,
+				fetcher: store
+			}),
+			load: (url) => store.load(url ?? target()),
+			submit: (body, options = {}) => {
+				const action = options.action ?? target();
+				const data = submissionBody(body, options.encType);
+				const method = options.method?.toUpperCase();
+				if (method === "GET") {
+					const url = new URL(action, router.getSnapshot().url);
+					url.search = submissionSearch(data);
+					return store.load(url.href);
+				}
+				return store.submit(action, data, { method });
+			}
+		};
+	}, [router, path]);
+	useEffect(() => fetcher.dispose, [fetcher]);
+	const state = useSyncExternalStore(fetcher.subscribe, fetcher.getSnapshot);
+	return {
+		...fetcher,
+		...state
+	};
+}
+//#endregion
+export { useFetcher };

package/dist/{internal/preact → preact}/form.d.ts

@@ -2,16 +2,15 @@
  * Preact components and typed data hooks. Import from @kasperrt/smolter/preact.
  * @module
  */
-import type { Fetcher } from "../core/index.ts";
-import type { FormHTMLAttributes, ReactNode } from "./runtime.ts";
+import { type Fetcher } from "../core/index.ts";
+import { type RouteFormOptions } from "../core/submission.ts";
+import { type FormHTMLAttributes, type ReactNode } from "./runtime.ts";
 /** Form attributes with GET loader requests or POST, PUT, PATCH, and DELETE actions. */
-export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "method"> {
-    action?: string;
-    method?: "get" | "post" | "put" | "patch" | "delete";
+export interface FormProps extends Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "method">, RouteFormOptions {
 }
 interface InternalFormProps extends FormProps {
     fetcher?: Fetcher;
 }
 /** Submit form data to a registered route without a document reload. */
-export declare function Form({ action, method, fetcher, onSubmit, ...props }: InternalFormProps): ReactNode;
+export declare function Form(options: InternalFormProps): ReactNode;
 export {};