@kasperrt/smolter 0.4.2 → 0.4.4

package/.generated/react/fetcher.ts

@@ -14,8 +14,15 @@ import {
   type Router,
   type SubmitOptions,
 } from "../core/index.ts";
+import {
+  type Submission,
+  type SubmissionOptions,
+  submissionBody,
+  submissionSearch,
+} from "../core/submission.ts";
 import { useRouter } from "./context.ts";
 import { Form, type FormProps } from "./form.ts";
+import type { RouteData } from "./route-types.ts";
 
 import {
   type ComponentType,
@@ -26,7 +33,7 @@ import {
 } 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;
 }
 
@@ -35,7 +42,7 @@ 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. */
@@ -47,9 +54,7 @@ export function useFetcher<T extends RouteModule>(
 >;
 
 /** Create a fetcher for independent route reads and mutations; its data stays local. */
-export function useFetcher<
-  T extends AnyDataFunction = DataFunction,
->(): TypedFetcher<DataOf<T>>;
+export function useFetcher<T = DataFunction>(): TypedFetcher<RouteData<T>>;
 
 /** Create a fetcher for independent route reads and mutations; its data stays local. */
 export function useFetcher(route?: RouteDefinition): TypedFetcher<unknown> {
@@ -68,8 +73,22 @@ export function useFetcher(route?: RouteDefinition): TypedFetcher<unknown> {
       Form: (props: FormProps) =>
         createElement(Form, { action: target(), ...props, fetcher: store }),
       load: (url?: string) => store.load(url ?? target()),
-      submit: (body: FormData, options?: FetcherSubmitOptions) =>
-        store.submit(options?.action ?? target(), body, options),
+      submit: (body: Submission, options: FetcherSubmitOptions = {}) => {
+        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: method as SubmitOptions["method"],
+        });
+      },
     };
   }, [router, path]);
 
@@ -83,3 +102,6 @@ export function useFetcher(route?: RouteDefinition): TypedFetcher<unknown> {
 
   return { ...fetcher, ...state };
 }
+
+/** A fetcher with a bound form and inferred result data. */
+export type FetcherWithComponents<T> = TypedFetcher<RouteData<T>>;

package/.generated/react/hooks.ts

@@ -5,43 +5,43 @@
 
 import type {
   AnyDataFunction,
-  DataOf,
   Route,
   RouteModule,
   Router,
   Snapshot,
 } from "../core/index.ts";
-
 import { useRouter, useSnapshot } from "./context.ts";
+import type { RouteData } from "./route-types.ts";
 
 /** A route module or loader function used for data inference. */
 export type LoaderSource = RouteModule | AnyDataFunction;
 
 /** Infer server and client loader data from a route module or function. */
 export type LoaderData<T> = T extends AnyDataFunction
-  ? DataOf<T>
+  ? RouteData<T>
   : T extends RouteModule
-    ? DataOf<Extract<T["loader"] | T["clientLoader"], AnyDataFunction>>
-    : unknown;
+    ? RouteData<Extract<T["loader"] | T["clientLoader"], AnyDataFunction>>
+    : RouteData<T>;
 
 /** Infer server and client action data from a route module or function. */
 export type ActionData<T> = T extends AnyDataFunction
-  ? DataOf<T>
+  ? RouteData<T>
   : T extends RouteModule
-    ? DataOf<Extract<T["action"] | T["clientAction"], AnyDataFunction>>
-    : unknown;
+    ? RouteData<Extract<T["action"] | T["clientAction"], AnyDataFunction>>
+    : RouteData<T>;
 /** Pass a route for inference, or use useLoaderData<typeof loader>() in its module. */
-export function useLoaderData<T extends LoaderSource = RouteModule>(
-  route?: T,
-): LoaderData<T> | undefined {
-  return useSnapshot("data", (route as Route | undefined)?.path) as
-    | LoaderData<T>
-    | undefined;
+export function useLoaderData<T = RouteModule>(
+  route?: T & LoaderSource,
+): LoaderData<T> {
+  return useSnapshot(
+    "data",
+    (route as Route | undefined)?.path,
+  ) as LoaderData<T>;
 }
 
 /** Read the last page action result, optionally inferring its type from a route. */
-export function useActionData<T extends LoaderSource = RouteModule>(
-  route?: T,
+export function useActionData<T = RouteModule>(
+  route?: T & LoaderSource,
 ): ActionData<T> | undefined {
   return useSnapshot("actionData", (route as Route | undefined)?.path) as
     | ActionData<T>
@@ -49,8 +49,10 @@ export function useActionData<T extends LoaderSource = RouteModule>(
 }
 
 /** Read path parameters for the active route. */
-export function useParams(): Snapshot["params"] {
-  return useSnapshot("params");
+export function useParams<
+  T extends Snapshot["params"] = Snapshot["params"],
+>(): T {
+  return useSnapshot("params") as T;
 }
 
 /** Read the current path, search, and hash together with the navigate function. */

package/.generated/react/index.ts

@@ -1,10 +1,21 @@
-/** Framework components and typed data hooks. @module */
+/**
+ * React routing components, typed data hooks and forms.
+ *
+ * @module
+ */
 export type * from "../core/index.ts";
 export {
   createDataRouter,
   createRouter,
   defineRoute,
 } from "../core/index.ts";
+export type { ApplicationEnvironment } from "../core/environment.ts";
+export * from "../core/responses.ts";
+export {
+  readSubmission,
+  type Submission,
+  type SubmissionOptions,
+} from "../core/submission.ts";
 export {
   RouterProvider,
   type RouterProviderProps,
@@ -13,5 +24,20 @@ export {
 export * from "./fetcher.ts";
 export * from "./form.ts";
 export * from "./hooks.ts";
-export * from "./link.ts";
+export * from "./navigation.ts";
+export {
+  Outlet,
+  type OutletProps,
+  useMatches,
+  useOutletContext,
+} from "./outlet.ts";
+export {
+  useNavigation,
+  useRootData,
+  useRouteError,
+  useRouteLoaderData,
+  useSubmit,
+} from "./route-hooks.ts";
+export * from "./route-types.ts";
+export { type ApplicationProps, RouterApplication } from "./router.ts";
 export * from "./routes.ts";

package/.generated/react/lazy-route.ts

@@ -0,0 +1,116 @@
+/**
+ * On-demand React route modules with shared intent prefetching.
+ *
+ * @module
+ */
+import { serverRoute } from "../client/index.ts";
+import type { DataArgs, RouteModule, Router } from "../core/index.ts";
+import { useRouter } from "./context.ts";
+import type { AppRoute } from "./route-types.ts";
+import type { ErrorProps } from "./routes.ts";
+import {
+  type ComponentType,
+  createElement,
+  useSyncExternalStore,
+} from "./runtime.ts";
+
+/** Lazy route path, server transport endpoint and available handler capabilities. */
+export interface LazyRouteOptions {
+  path: string;
+  dataEndpoint?: string;
+  id?: string;
+  loader?: boolean;
+  action?: boolean;
+  clientAction?: boolean;
+  meta?: boolean;
+  shouldRevalidate?: boolean;
+  ErrorBoundary?: boolean;
+}
+
+type LoadedRoute = RouteModule & Pick<AppRoute, "meta">;
+
+interface LazyAppRoute extends AppRoute {
+  resolveComponent: () => ComponentType | undefined;
+}
+
+// A shared wrapper preserves component identity across routes using the same view.
+function LazyView() {
+  const router = useRouter<Router>();
+  const { path } = useSyncExternalStore(
+    router.subscribe,
+    router.getSnapshot,
+    router.getSnapshot,
+  );
+  const route = router.routes.find((item) => item.path === path) as
+    | LazyAppRoute
+    | undefined;
+  const Component = route?.resolveComponent();
+
+  return Component && createElement(Component, {});
+}
+
+/** Create a route that imports its module on demand and shares the import with intent prefetching. */
+export function lazyRoute(
+  options: LazyRouteOptions,
+  importer: () => Promise<LoadedRoute>,
+): LazyAppRoute {
+  let module: LoadedRoute | undefined;
+  let pending: Promise<void> | undefined;
+
+  function preload() {
+    pending ??= importer()
+      .then((loaded) => {
+        module = serverRoute(options.path, loaded, {
+          loader: options.loader,
+          action: options.action,
+          dataEndpoint: options.dataEndpoint,
+        });
+      })
+      .catch((error: unknown) => {
+        pending = undefined;
+        throw error;
+      });
+
+    return pending;
+  }
+
+  async function run(args: DataArgs, action = false) {
+    await preload();
+
+    if (args.signal.aborted) return new Error("Navigation cancelled");
+
+    const handler = action
+      ? (module!.clientAction ?? module!.action)
+      : (module!.clientLoader ?? module!.loader);
+
+    // serverRoute supplies serverLoader/serverAction to client handlers.
+    return (handler as ((args: DataArgs) => unknown) | undefined)?.(args);
+  }
+
+  function ErrorBoundary(props: ErrorProps) {
+    const Component = module?.ErrorBoundary as
+      | ComponentType<ErrorProps>
+      | undefined;
+
+    if (!Component) return props.error.message;
+
+    return createElement(Component, props);
+  }
+
+  return {
+    path: options.path,
+    id: options.id,
+    preload,
+    default: LazyView,
+    resolveComponent: () => module?.default as ComponentType | undefined,
+    clientLoader: (args) => run(args),
+    ...((options.action || options.clientAction) && {
+      clientAction: (args: DataArgs) => run(args, true),
+    }),
+    ...(options.meta && { meta: (args) => module?.meta?.(args) ?? [] }),
+    ...(options.shouldRevalidate && {
+      shouldRevalidate: (args) => module?.shouldRevalidate?.(args) ?? true,
+    }),
+    ...(options.ErrorBoundary && { ErrorBoundary }),
+  };
+}

package/.generated/react/link.ts

@@ -1,38 +1 @@
-/**
- * React components and typed data hooks. Import from @kasperrt/smolter/react.
- * @module
- */
-
-import { internalURL, navigationClick } from "../core/url.ts";
-import { useRouter } from "./context.ts";
-
-import {
-  type AnchorHTMLAttributes,
-  createElement,
-  type MouseEvent,
-  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 function Link(options: LinkProps): ReactNode {
-  const { href, replace, onClick, ...props } = options;
-  const router = useRouter();
-  const click = (event: MouseEvent<HTMLAnchorElement>) => {
-    onClick?.(event);
-
-    if (!navigationClick(event, event.currentTarget)) return;
-
-    if (!internalURL(router.getSnapshot().url, href)) return;
-
-    event.preventDefault();
-    void router.navigate(href, options);
-  };
-
-  return createElement("a", { ...props, href, onClick: click });
-}
+export { Link, type LinkProps } from "./navigation.ts";

package/.generated/react/navigation-state.ts

@@ -0,0 +1,13 @@
+import type { Router } from "../core/index.ts";
+import { navigationStore } from "../core/navigation.ts";
+import { useSyncExternalStore } from "./runtime.ts";
+
+export function useNavigationSnapshot(router: Router) {
+  const store = navigationStore(router);
+
+  return useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    store.getSnapshot,
+  );
+}

package/.generated/react/navigation.ts

@@ -0,0 +1,145 @@
+import { matchRoutes, type NavigateOptions } from "../core/index.ts";
+import {
+  handoffDocument,
+  resolveApplicationURL,
+} from "../core/environment.ts";
+import { navigationClick } from "../core/url.ts";
+import { useRouter, useSnapshot } from "./context.ts";
+import { useNavigation, useURLLocation } from "./route-hooks.ts";
+import type { AppRoute } from "./route-types.ts";
+import type { AnchorHTMLAttributes, MouseEvent, ReactNode } from "./runtime.ts";
+import { createElement } from "./runtime.ts";
+
+export type { NavigateOptions } from "../core/index.ts";
+
+export type { NavigationType } from "../core/navigation.ts";
+
+/** Navigate to a URL or move through browser history using a numeric offset. */
+export type NavigateFunction = (
+  to: string | number | Partial<Pick<URL, "pathname" | "search" | "hash">>,
+  options?: NavigateOptions,
+) => void;
+
+/** Anchor properties and router navigation options, including document reload and prefetch controls. */
+export interface LinkProps
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  to?: string;
+  href?: string;
+  replace?: boolean;
+  prefetch?: string;
+  state?: unknown;
+  preventScrollReset?: boolean;
+  viewTransition?: boolean;
+  reloadDocument?: boolean;
+}
+
+/** Active and pending flags supplied to NavLink render callbacks. */
+export interface NavLinkRenderProps {
+  isActive: boolean;
+  isPending: boolean;
+}
+
+/** Link options with matching rules and state-aware class or children callbacks. */
+export interface NavLinkProps
+  extends Omit<LinkProps, "className" | "children"> {
+  end?: boolean;
+  className?: string | ((state: NavLinkRenderProps) => string);
+  children?: ReactNode | ((state: NavLinkRenderProps) => ReactNode);
+}
+
+/** Render an anchor with same-origin router navigation and optional intent prefetching. */
+export function Link(options: LinkProps): ReactNode {
+  const {
+    href: hrefProp,
+    to = hrefProp ?? "/",
+    replace,
+    preventScrollReset,
+    viewTransition,
+    prefetch,
+    state,
+    reloadDocument,
+    ...props
+  } = options;
+  const router = useRouter();
+  const current = new URL(useSnapshot("url"));
+  const destination = resolveApplicationURL(new URL(to, current));
+  const internal = destination.origin === current.origin;
+  const preload = () => {
+    const route = matchRoutes(router.routes, destination.pathname)?.route as
+      | AppRoute
+      | undefined;
+
+    void route?.preload?.().catch(() => {});
+  };
+
+  if (!reloadDocument && prefetch !== "none" && internal) {
+    for (const name of ["onPointerEnter", "onFocus", "onTouchStart"] as const) {
+      const handler = props[name] as ((event: unknown) => void) | undefined;
+
+      props[name] = (event) => {
+        handler?.(event);
+        preload();
+      };
+    }
+  }
+
+  return createElement("a", {
+    ...props,
+    href: destination.href,
+    onClick(event: MouseEvent<HTMLAnchorElement>) {
+      props.onClick?.(event);
+
+      if (reloadDocument || !navigationClick(event, event.currentTarget))
+        return;
+
+      if (!internal) {
+        handoffDocument(event.nativeEvent, destination);
+
+        return;
+      }
+
+      event.preventDefault();
+      void router.navigate(destination.href, options);
+    },
+  });
+}
+
+/** Render a Link with active-route state and aria-current for the matching destination. */
+export function NavLink({
+  href,
+  to = href ?? "/",
+  end,
+  className,
+  children,
+  ...props
+}: NavLinkProps): ReactNode {
+  const location = useURLLocation();
+  const destination = resolveApplicationURL(new URL(to, location.href));
+  const target = destination.pathname;
+  const isActive =
+    destination.origin === location.origin &&
+    (location.pathname === target ||
+      (!end && target !== "/" && location.pathname.startsWith(`${target}/`)));
+  const pending = useNavigation().location;
+  const isPending =
+    !!pending &&
+    pending.origin === destination.origin &&
+    (pending.pathname === target ||
+      (!end && target !== "/" && pending.pathname.startsWith(`${target}/`)));
+  const state = { isActive, isPending };
+
+  return createElement(Link, {
+    ...props,
+    to,
+    className: typeof className === "function" ? className(state) : className,
+    ...(isActive && { "aria-current": "page" }),
+    children: typeof children === "function" ? children(state) : children,
+  });
+}
+
+export {
+  useNavigate,
+  useNavigationType,
+  useSearchParams,
+  useURLLocation,
+} from "./route-hooks.ts";

package/.generated/react/outlet.ts

@@ -0,0 +1,48 @@
+import { useRouter, useSnapshot } from "./context.ts";
+import { Routes } from "./routes.ts";
+import {
+  createContext,
+  createElement,
+  type ReactNode,
+  useContext,
+} from "./runtime.ts";
+
+const OutletContext = createContext<unknown>(undefined);
+
+/** Optional children and context shared with descendants through useOutletContext. */
+export interface OutletProps {
+  context?: unknown;
+  children?: ReactNode;
+}
+
+/** Render the active route under a layout's shared context. */
+export function Outlet({ context, children }: OutletProps): ReactNode {
+  const inherited = useContext(OutletContext);
+  return createElement(
+    OutletContext.Provider,
+    { value: context ?? inherited },
+    children ??
+      createElement(Routes, {
+        fallback: createElement("p", { role: "status" }, "Loading…"),
+      }),
+  );
+}
+
+/** Read the nearest Outlet's context. */
+export function useOutletContext<T>(): T {
+  return useContext(OutletContext) as T;
+}
+
+/** Read the active flat route match; this is not a nested layout match chain. */
+export function useMatches(): {
+  id: string;
+  data: unknown;
+  params: import("../core/index.ts").Params;
+}[] {
+  const router = useRouter();
+  const snapshot = useSnapshot();
+  const route = router.routes.find((item) => item.path === snapshot.path);
+  return [
+    { id: route?.id ?? "", data: snapshot.data, params: snapshot.params },
+  ];
+}

package/.generated/react/root-context.ts

@@ -0,0 +1,22 @@
+import type { Router } from "../core/index.ts";
+import type { AppRoute, RootModule } from "./route-types.ts";
+import { createContext, useContext } from "./runtime.ts";
+
+export interface ApplicationContext {
+  router: Router;
+  routes: AppRoute[];
+  root: unknown;
+  rootError?: boolean;
+  entry?: string;
+  streaming?: boolean;
+  initialData?: string;
+  rootModule?: RootModule;
+}
+
+export const Application = createContext<ApplicationContext | null>(null);
+
+export function useApplication() {
+  const app = useContext(Application);
+  if (!app) throw new Error("Root data requires RouterApplication.");
+  return app;
+}