@kasperrt/smolter 0.0.1 → 0.3.0

package/dist/react/context.d.ts

@@ -0,0 +1,18 @@
+/**
+ * React components and typed data hooks. Import from @kasperrt/smolter/react.
+ * @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/react/context.js

@@ -0,0 +1,23 @@
+import { createContext, createElement, useContext, useEffect, useSyncExternalStore } from "./runtime.js";
+//#region .generated/react/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.Provider, { 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, getSnapshot);
+}
+//#endregion
+export { RouterProvider, useRouter, useSnapshot };

package/dist/react/data.d.ts

@@ -0,0 +1,5 @@
+/** Resource subscriptions independent of URL navigation. @module */
+export type { ActionFunctionArgs as ResourceActionArgs, DataResult as ResourceResult, LoaderFunctionArgs as ResourceLoaderArgs, ShouldRevalidateFunctionArgs as ResourceRevalidationArgs, } from "../core/resource-types.ts";
+export { createResourceRouter, ResourceRouter, } from "../core/resources.ts";
+export type { ResourceRouteModule } from "./resources/components.tsx";
+export { Form as ResourceForm, Route as Resource, RouterProvider as ResourceProvider, useActionData as useResourceActionData, useFetcher as useResourceFetcher, useLoaderData as useResourceData, useNavigation as useResourceNavigation, useRevalidator as useResourceRevalidator, useRouteLoaderData, useRouter as useResourceRouter, useSubmit as useResourceSubmit, } from "./resources/components.tsx";

package/dist/react/data.js

@@ -0,0 +1,3 @@
+import { ResourceRouter, createResourceRouter } from "../core/resources.js";
+import { Form, Route, RouterProvider, useActionData, useFetcher, useLoaderData, useNavigation, useRevalidator, useRouteLoaderData, useRouter, useSubmit } from "./resources/components.js";
+export { Route as Resource, Form as ResourceForm, RouterProvider as ResourceProvider, ResourceRouter, createResourceRouter, useActionData as useResourceActionData, useLoaderData as useResourceData, useFetcher as useResourceFetcher, useNavigation as useResourceNavigation, useRevalidator as useResourceRevalidator, useRouter as useResourceRouter, useSubmit as useResourceSubmit, useRouteLoaderData };

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

@@ -2,9 +2,9 @@
  * React components and typed data hooks. Import from @kasperrt/smolter/react.
  * @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, type SubmitOptions } from "../core/index.ts";
 import { type FormProps } from "./form.ts";
-import type { ComponentType } from "./runtime.ts";
+import { type ComponentType } from "./runtime.ts";
 /** Action method and optional explicit route URL for a fetcher submission. */
 export interface FetcherSubmitOptions extends SubmitOptions {
     action?: string;

package/dist/react/fetcher.js

@@ -0,0 +1,34 @@
+import { createElement, useEffect, useMemo, useSyncExternalStore } from "./runtime.js";
+import { useRouter } from "./context.js";
+import { Form } from "./form.js";
+//#region .generated/react/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) => store.submit(options?.action ?? target(), body, options)
+		};
+	}, [router, path]);
+	useEffect(() => fetcher.dispose, [fetcher]);
+	const state = useSyncExternalStore(fetcher.subscribe, fetcher.getSnapshot, fetcher.getSnapshot);
+	return {
+		...fetcher,
+		...state
+	};
+}
+//#endregion
+export { useFetcher };

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

@@ -2,16 +2,15 @@
  * React components and typed data hooks. Import from @kasperrt/smolter/react.
  * @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 {};

package/dist/react/form.js

@@ -0,0 +1,21 @@
+import { createElement } from "./runtime.js";
+import { useRouter } from "./context.js";
+import { submitForm } from "../core/submission.js";
+//#region .generated/react/form.ts
+/** Submit form data to a registered route without a document reload. */
+function Form(options) {
+	const { action, method, fetcher, onSubmit, reloadDocument, preventScrollReset, replace, ...props } = options;
+	const router = useRouter();
+	const submit = (event) => {
+		onSubmit?.(event);
+		submitForm(router, event, event.nativeEvent.submitter, options, fetcher);
+	};
+	return createElement("form", {
+		...props,
+		action,
+		method: method === "get" ? "get" : "post",
+		onSubmit: submit
+	});
+}
+//#endregion
+export { Form };

package/dist/react/hooks.js

@@ -0,0 +1,25 @@
+import { useRouter, useSnapshot } from "./context.js";
+//#region .generated/react/hooks.ts
+/** Pass a route for inference, or use useLoaderData<typeof loader>() in its module. */
+function useLoaderData(route) {
+	return useSnapshot("data", route?.path);
+}
+/** Read the last page action result, optionally inferring its type from a route. */
+function useActionData(route) {
+	return useSnapshot("actionData", route?.path);
+}
+/** Read path parameters for the active route. */
+function useParams() {
+	return useSnapshot("params");
+}
+/** Read the current path, search, and hash together with the navigate function. */
+function useLocation() {
+	const router = useRouter();
+	return [useSnapshot("url").replace(/^\w+:\/\/[^/]+/, ""), router.navigate];
+}
+/** Get the function that revalidates the current loader subject to shouldRevalidate. */
+function useRevalidator() {
+	return useRouter().revalidate;
+}
+//#endregion
+export { useActionData, useLoaderData, useLocation, useParams, useRevalidator };

package/dist/{internal/react → react}/index.d.ts

@@ -1,6 +1,6 @@
 /** Framework components and typed data hooks. @module */
 export type * from "../core/index.ts";
-export { createRouter, defineRoute } from "../core/index.ts";
+export { createDataRouter, createRouter, defineRoute, } from "../core/index.ts";
 export { RouterProvider, type RouterProviderProps, useRouter, } from "./context.ts";
 export * from "./fetcher.ts";
 export * from "./form.ts";

package/dist/react/index.js

@@ -0,0 +1,10 @@
+import { defineRoute } from "../core/match.js";
+import { createRouter } from "../core/navigation-router.js";
+import { createDataRouter } from "../core/router.js";
+import { RouterProvider, useRouter } from "./context.js";
+import { Form } from "./form.js";
+import { useFetcher } from "./fetcher.js";
+import { useActionData, useLoaderData, useLocation, useParams, useRevalidator } from "./hooks.js";
+import { Link } from "./link.js";
+import { Routes } from "./routes.js";
+export { Form, Link, RouterProvider, Routes, createDataRouter, createRouter, defineRoute, useActionData, useFetcher, useLoaderData, useLocation, useParams, useRevalidator, useRouter };

package/dist/{internal/react → react}/link.d.ts

@@ -2,11 +2,11 @@
  * React components and typed data hooks. Import from @kasperrt/smolter/react.
  * @module
  */
-import type { AnchorHTMLAttributes, ReactNode } from "./runtime.ts";
+import { type AnchorHTMLAttributes, type ReactNode } from "./runtime.ts";
 /** Anchor attributes with internal navigation and optional history replacement. */
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     href: string;
     replace?: boolean;
 }
 /** Render an anchor that handles internal navigation and preserves native modified clicks. */
-export declare function Link({ href, replace, onClick, ...props }: LinkProps): ReactNode;
+export declare function Link(options: LinkProps): ReactNode;

package/dist/react/link.js

@@ -0,0 +1,27 @@
+import { internalURL, navigationClick } from "../core/url.js";
+import { createElement } from "./runtime.js";
+import { useRouter } from "./context.js";
+//#region .generated/react/link.ts
+/**
+* React components and typed data hooks. Import from @kasperrt/smolter/react.
+* @module
+*/
+/** Render an anchor that handles internal navigation and preserves native modified clicks. */
+function Link(options) {
+	const { href, replace, onClick, ...props } = options;
+	const router = useRouter();
+	const click = (event) => {
+		onClick?.(event);
+		if (!navigationClick(event, event.currentTarget)) return;
+		if (!internalURL(router.getSnapshot().url, href)) return;
+		event.preventDefault();
+		router.navigate(href, options);
+	};
+	return createElement("a", {
+		...props,
+		href,
+		onClick: click
+	});
+}
+//#endregion
+export { Link };

package/dist/react/resources/components.d.ts

@@ -0,0 +1,64 @@
+/** @jsxImportSource react */
+import type { DataResult, NavigationState, Params, ResourceModule, RouteState } from "../../core/resource-types.ts";
+import type { ResourceRouter } from "../../core/resources.ts";
+import { type ComponentType, type PropsWithChildren } from "react";
+export interface ResourceRouteModule extends ResourceModule {
+    default?: ComponentType;
+    ErrorBoundary?: ComponentType<{
+        retry: () => void;
+    }>;
+    HydrateFallback?: ComponentType;
+}
+interface RouterProviderProps extends PropsWithChildren {
+    initialMatches?: readonly {
+        params?: Params;
+        routeId: string;
+    }[];
+    router: ResourceRouter;
+}
+export declare function RouterProvider({ children, initialMatches, router, }: RouterProviderProps): import("react").JSX.Element;
+interface RouteProps extends PropsWithChildren {
+    params?: Params;
+    persistent?: boolean;
+    routeId: string;
+}
+export declare function Route({ children, params, persistent, routeId, }: RouteProps): import("react").JSX.Element;
+export declare function useLoaderData<Data>(): Data | null;
+export declare function useRouteLoaderData<Data>(routeId: string, params?: Params): Data | null;
+export declare function useActionData<Data>(): Data | null;
+export declare function useNavigation(): {
+    state: NavigationState;
+};
+export declare function useRevalidator(): {
+    revalidate: () => Promise<DataResult<unknown>>;
+    state: string;
+};
+interface FetcherOptions {
+    params?: Params;
+    routeId?: string;
+}
+interface FetcherTarget {
+    params?: Params;
+    routeId?: string;
+}
+interface FormProps extends PropsWithChildren {
+    action?: string;
+    input?: unknown;
+    params?: Params;
+}
+export declare function Form({ action, children, input, params, }: FormProps): import("react").JSX.Element;
+export declare function useSubmit(): (input?: unknown) => Promise<DataResult<unknown>>;
+export declare function useFetcher<Data = unknown>(options?: FetcherOptions): readonly [
+    {
+        data: Data | null;
+        error: string;
+        state: NavigationState;
+    },
+    {
+        Form: ({ children, input, }: Pick<FormProps, "children" | "input">) => import("react").JSX.Element;
+        load: (target?: FetcherTarget) => Promise<DataResult<Data>>;
+        submit: (input: unknown, target?: FetcherTarget) => Promise<DataResult<Data>>;
+    }
+];
+export declare function useRouter(): ResourceRouter;
+export type { NavigationState, RouteState };

package/dist/react/resources/components.js

@@ -0,0 +1,239 @@
+import { Component, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region .generated/react/resources/components.tsx
+var RouterContext = createContext(null);
+var RouteContext = createContext(null);
+var FormContext = createContext(null);
+function RouterProvider({ children, initialMatches = EMPTY_MATCHES, router }) {
+	useEffect(() => {
+		for (const match of initialMatches) router.load(match.routeId, match.params ?? {});
+		return () => router.dispose();
+	}, [initialMatches, router]);
+	return /* @__PURE__ */ jsx(RouterContext.Provider, {
+		value: router,
+		children
+	});
+}
+function Route({ children, params = {}, persistent = false, routeId }) {
+	const router = useRouter();
+	const stableParams = useStableParams(params);
+	const state = useRouteState(routeId, stableParams, true);
+	const route = router.getRoute(routeId);
+	const retry = useCallback(() => void router.retry(routeId, stableParams), [
+		routeId,
+		router,
+		stableParams
+	]);
+	const contextValue = useMemo(() => ({
+		params: stableParams,
+		routeId
+	}), [routeId, stableParams]);
+	useEffect(() => {
+		if (persistent) router.persist(routeId, stableParams);
+	}, [
+		persistent,
+		routeId,
+		router,
+		stableParams
+	]);
+	let content = children;
+	if (children === void 0 && route?.default) {
+		const RouteComponent = route.default;
+		content = /* @__PURE__ */ jsx(RouteComponent, {});
+	}
+	if (state.unexpectedError && route?.ErrorBoundary) {
+		const ErrorBoundary = route.ErrorBoundary;
+		content = /* @__PURE__ */ jsx(ErrorBoundary, { retry });
+	}
+	if (!state.unexpectedError && !state.loaderInitialized && route?.HydrateFallback) {
+		const HydrateFallback = route.HydrateFallback;
+		content = /* @__PURE__ */ jsx(HydrateFallback, {});
+	}
+	return /* @__PURE__ */ jsx(RouteContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(RenderErrorBoundary, {
+			onRetry: retry,
+			resetKey: `${routeId}:${JSON.stringify(stableParams)}`,
+			...route?.ErrorBoundary ? { fallback: route.ErrorBoundary } : {},
+			children: content
+		})
+	});
+}
+function useLoaderData() {
+	const route = useCurrentRoute();
+	return useRouteLoaderData(route.routeId, route.params);
+}
+function useRouteLoaderData(routeId, params = {}) {
+	return useRouteState(routeId, useStableParams(params), true).loaderData;
+}
+function useActionData() {
+	const route = useCurrentRoute();
+	return useRouteState(route.routeId, route.params, false).actionData;
+}
+function useNavigation() {
+	const route = useCurrentRoute();
+	return { state: useRouteState(route.routeId, route.params, false).navigationState };
+}
+function useRevalidator() {
+	const route = useCurrentRoute();
+	const router = useRouter();
+	const state = useRouteState(route.routeId, route.params, false);
+	return useMemo(() => ({
+		revalidate: () => router.load(route.routeId, route.params, true),
+		state: state.navigationState === "loading" ? "loading" : "idle"
+	}), [
+		route,
+		router,
+		state.navigationState
+	]);
+}
+function Form({ action, children, input, params }) {
+	const currentRoute = useContext(RouteContext);
+	const router = useRouter();
+	const routeId = action ?? currentRoute?.routeId ?? "";
+	const routeParams = useStableParams(params ?? currentRoute?.params ?? {});
+	const submit = useCallback((override) => router.submit(routeId, override === void 0 ? input : override, routeParams), [
+		input,
+		routeId,
+		routeParams,
+		router
+	]);
+	if (!routeId) throw new Error("Form requires an action or a parent Route.");
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: submit,
+		children
+	});
+}
+function useSubmit() {
+	const submit = useContext(FormContext);
+	if (!submit) throw new Error("useSubmit must be used inside Form.");
+	return submit;
+}
+function useFetcher(options = {}) {
+	const currentRoute = useContext(RouteContext);
+	const router = useRouter();
+	const routeId = options.routeId ?? currentRoute?.routeId ?? "";
+	const params = useStableParams(options.params ?? currentRoute?.params ?? {});
+	const [data, setData] = useState(null);
+	const [error, setError] = useState("");
+	const [state, setState] = useState("idle");
+	const controller = useRef(null);
+	useEffect(() => () => {
+		controller.current?.abort();
+	}, []);
+	const run = useCallback(async (mutating, input, target) => {
+		controller.current?.abort();
+		const nextController = new AbortController();
+		const { signal } = nextController;
+		const targetId = target.routeId ?? routeId;
+		const targetParams = target.params ?? params;
+		controller.current = nextController;
+		setError("");
+		setState(mutating ? "submitting" : "loading");
+		const result = await (mutating ? router.fetchAction(targetId, input, targetParams, signal) : router.fetchLoader(targetId, targetParams, signal));
+		if (signal.aborted) return result;
+		controller.current = null;
+		setData(result.data);
+		setError(result.error);
+		setState("idle");
+		if (result.unexpected && currentRoute) router.reportUnexpected(currentRoute.routeId, currentRoute.params);
+		return result;
+	}, [
+		currentRoute,
+		params,
+		routeId,
+		router
+	]);
+	const submit = useCallback((input, target = {}) => run(true, input, target), [run]);
+	const load = useCallback((target = {}) => run(false, void 0, target), [run]);
+	const BoundForm = useCallback(({ children, input }) => /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: (override) => submit(override === void 0 ? input : override),
+		children
+	}), [submit]);
+	if (!routeId) throw new Error("useFetcher requires a routeId or a parent Route.");
+	return [useMemo(() => ({
+		data,
+		error,
+		state
+	}), [
+		data,
+		error,
+		state
+	]), useMemo(() => ({
+		Form: BoundForm,
+		load,
+		submit
+	}), [
+		BoundForm,
+		load,
+		submit
+	])];
+}
+function useRouter() {
+	const router = useContext(RouterContext);
+	if (!router) throw new Error("RouterProvider is missing.");
+	return router;
+}
+function useCurrentRoute() {
+	const route = useContext(RouteContext);
+	if (!route) throw new Error("This hook requires a parent Route.");
+	return route;
+}
+function useRouteState(routeId, params, loadOnMount) {
+	const router = useRouter();
+	const subscribe = useCallback((listener) => router.subscribe(routeId, params, listener), [
+		params,
+		routeId,
+		router
+	]);
+	const getSnapshot = useCallback(() => router.getSnapshot(routeId, params), [
+		params,
+		routeId,
+		router
+	]);
+	const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+	useEffect(() => {
+		if (loadOnMount) router.load(routeId, params);
+	}, [
+		loadOnMount,
+		params,
+		routeId,
+		router
+	]);
+	return state;
+}
+function useStableParams(params) {
+	const key = JSON.stringify(Object.entries(params).sort(([left], [right]) => left.localeCompare(right)));
+	const ref = useRef({
+		key,
+		value: params
+	});
+	if (ref.current.key !== key) ref.current = {
+		key,
+		value: params
+	};
+	return ref.current.value;
+}
+var RenderErrorBoundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidUpdate(previousProps) {
+		if (this.state.error && previousProps.resetKey !== this.props.resetKey) this.setState({ error: null });
+	}
+	render() {
+		if (this.state.error && this.props.fallback) {
+			const ErrorBoundary = this.props.fallback;
+			return /* @__PURE__ */ jsx(ErrorBoundary, { retry: () => {
+				this.setState({ error: null });
+				this.props.onRetry();
+			} });
+		}
+		if (this.state.error) throw this.state.error;
+		return this.props.children;
+	}
+};
+var EMPTY_MATCHES = [];
+//#endregion
+export { Form, Route, RouterProvider, useActionData, useFetcher, useLoaderData, useNavigation, useRevalidator, useRouteLoaderData, useRouter, useSubmit };

package/dist/{internal/react → react}/routes.d.ts

@@ -3,7 +3,7 @@
  * @module
  */
 import type { RouteModule } from "../core/index.ts";
-import type { ComponentType, ReactNode } from "./runtime.ts";
+import { type ComponentType, type ReactNode } from "./runtime.ts";
 /** Renderable route module with optional loading and error components. */
 export interface ViewModule extends RouteModule {
     default?: ComponentType;

package/dist/react/routes.js

@@ -0,0 +1,12 @@
+import { createElement, useMemo } from "./runtime.js";
+import { useRouter, useSnapshot } from "./context.js";
+//#region .generated/react/routes.ts
+/** Renders the first matching registered module. */
+function Routes({ fallback }) {
+	const router = useRouter();
+	const state = useSnapshot();
+	const component = router.routes.find((route) => route.path === state.path)?.[state.error ? "ErrorBoundary" : state.state === "loading" && !state.loaded ? "HydrateFallback" : "default"];
+	return useMemo(() => component && createElement(component, { error: state.error }), [component, state.error]) ?? state.error?.message ?? fallback;
+}
+//#endregion
+export { Routes };

package/dist/react/runtime.js

@@ -0,0 +1 @@
+export { createContext, createElement, useContext, useEffect, useMemo, useSyncExternalStore } from "react";

package/dist/server/application.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource preact */
+import type { AppRoute, RootModule } from "../preact/route-types.ts";
+export declare function renderApplication(request: Request, routes: AppRoute[], rootModule: RootModule, entry: string): Promise<Response>;
+export declare function dispatchRoute(request: Request, routes: AppRoute[], document?: boolean): Promise<Response>;