@kasperrt/smolter 0.4.3 → 0.4.4

package/.generated/react/document.tsx

@@ -0,0 +1,235 @@
+/**
+ * React document metadata, resource links and hydration scripts.
+ *
+ * @module
+ */
+/** @jsxImportSource react */
+
+import { applicationEnvironment } from "../core/environment.ts";
+import { scrollPositions } from "../core/navigation.ts";
+import { serializeData } from "../core/serialize.ts";
+import type { ComponentProps } from "react";
+import {
+  createElement,
+  Fragment,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useNavigationSnapshot } from "./navigation-state.ts";
+import { useApplication } from "./root-context.ts";
+import { useSnapshot } from "./route-hooks.ts";
+import type { MetaDescriptor } from "./route-types.ts";
+
+function renderMeta(item: MetaDescriptor, index: number) {
+  if (typeof item.title === "string")
+    return <title key={index}>{item.title}</title>;
+
+  if ("script:ld+json" in item)
+    return (
+      <script
+        key={index}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: serializeData(item["script:ld+json"]),
+        }}
+      />
+    );
+
+  const { tagName, ...props } = item;
+
+  return createElement(tagName === "link" ? "link" : "meta", {
+    ...props,
+    key: index,
+  });
+}
+
+/** Render root or active-route metadata in the document head. */
+export function Meta(): import("react").ReactElement {
+  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 <Fragment>{values.map(renderMeta)}</Fragment>;
+}
+
+/** Render stylesheet and other link descriptors from the application root. */
+export function Links(): import("react").ReactElement {
+  const { rootModule } = useApplication();
+
+  return (
+    <Fragment>
+      {rootModule?.links?.().map((props, index) => (
+        <link key={index} {...props} />
+      ))}
+    </Fragment>
+  );
+}
+
+/** Nonce and browser entry options for the document hydration scripts. */
+export interface ScriptProps {
+  nonce?: string;
+}
+
+/** Render the hydration snapshot and browser entry script with an optional CSP nonce. */
+export function Scripts({ nonce }: ScriptProps): import("react").ReactElement {
+  const { root, rootError, router, entry, streaming, initialData } =
+    useApplication();
+  // The bootstrap payload describes this document's initial SSR snapshot.
+  // Navigation and revalidation update the router, not the hydration script.
+  const [json] = useState(() => {
+    if (initialData !== undefined) return initialData;
+    if (streaming) return "";
+
+    const current = router.getSnapshot();
+    const snapshot = {
+      ...current,
+      error: current.error && {
+        ...current.error,
+        name: current.error.name,
+        message: current.error.message,
+      },
+    };
+
+    return serializeData({ root, snapshot, ...(rootError && { rootError }) });
+  });
+
+  return (
+    <Fragment>
+      <script
+        {...(nonce && { nonce })}
+        dangerouslySetInnerHTML={{
+          __html: applicationEnvironment?.entryScript ?? "",
+        }}
+      />
+      <script
+        id="smolter-data"
+        type="application/json"
+        {...(nonce && { nonce })}
+        dangerouslySetInnerHTML={{ __html: json }}
+      />
+      {entry && (
+        <script
+          type="module"
+          async={initialData !== undefined}
+          src={entry}
+          {...(nonce && { nonce })}
+        />
+      )}
+    </Fragment>
+  );
+}
+
+/** Reset scroll after navigation unless the navigation requests preservation. */
+export function ScrollRestoration(_props: ScriptProps): null {
+  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;
+
+    // Lazy views subscribe independently; restore after their DOM is committed.
+    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;
+}
+
+/** 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 function Document(props: DocumentProps): import("react").ReactElement {
+  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(() => {
+    // Hydration must preserve classes already applied by the browser theme store.
+    // Only reconcile classes when the document's own props actually change.
+    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]);
+
+  const classes =
+    typeof document !== "undefined" && previousClassName.current !== className
+      ? [...document.documentElement.classList]
+          .filter(
+            (value) => !previousClassName.current.split(/\s+/).includes(value),
+          )
+          .concat(className.split(/\s+/).filter(Boolean))
+          .join(" ")
+      : props.className;
+  return (
+    <html {...attributes} className={classes} suppressHydrationWarning>
+      {children}
+    </html>
+  );
+}

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

@@ -9,6 +9,13 @@ export {
   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,
@@ -17,11 +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,
+  );
+}