@kasperrt/smolter 0.4.2 → 0.4.4

package/.generated/preact/root-data.ts

@@ -1,45 +1 @@
-import type { Router } from "../core/index.ts";
-import type { RootModule } from "./route-types.ts";
-
-export { createStore as createRootStore } from "../core/store.ts";
-
-import { createStore } from "../core/store.ts";
-
-export function attachRootData(
-  router: Router,
-  initial: unknown,
-  rootModule?: RootModule,
-) {
-  const store = createStore(initial);
-  const loaderPath = rootModule?.loaderPath;
-
-  if (!rootModule || !loaderPath) return store;
-
-  let pending: ReturnType<Router["createFetcher"]> | undefined;
-  const unregister = router.registerRevalidator(
-    rootModule.id ?? "root",
-    async (args) => {
-      if (rootModule.shouldRevalidate?.(args) === false) return;
-
-      pending?.dispose();
-      const fetcher = router.createFetcher();
-      pending = fetcher;
-      const result = await fetcher.load(loaderPath);
-
-      if (pending === fetcher && !result.error) store.update(result.data);
-
-      fetcher.dispose();
-
-      if (pending === fetcher) pending = undefined;
-    },
-  );
-  const dispose = router.dispose;
-  router.dispose = () => {
-    pending?.dispose();
-    pending = undefined;
-    unregister();
-    dispose();
-  };
-
-  return store;
-}
+export { attachRootData, createRootStore } from "../client/root-data.ts";

package/.generated/preact/route-hooks.tsx

@@ -15,6 +15,7 @@ import { OutletContext, useApplication } from "./root-context.ts";
 import type { RouteData } from "./route-types.ts";
 import { useContext, useMemo } from "./runtime.ts";
 
+/** Read root loader data from the application context. */
 export function useRootData<T = unknown>(): RouteData<T> {
   return useApplication().root as RouteData<T>;
 }
@@ -37,10 +38,12 @@ export function useRouteLoaderData<T = unknown>(
 
 export { useSnapshot };
 
+/** Read the current route error for an error boundary. */
 export function useRouteError(): Error | undefined {
   return useSnapshot("error");
 }
 
+/** Read the current page navigation or submission state. */
 export function useNavigation(): {
   state: "idle" | "loading" | "submitting";
   location: URL | undefined;
@@ -58,24 +61,27 @@ export function useNavigation(): {
   );
 }
 
+/** Read the active flat route match and loader data; this is not a nested layout match chain. */
 export function useMatches(): {
   id: string;
   data: unknown;
   params: import("../core/index.ts").Params;
 }[] {
-  const { routes } = useApplication();
+  const router = useRouter();
   const snapshot = useSnapshot();
-  const route = routes.find((item) => item.path === snapshot.path);
+  const route = router.routes.find((item) => item.path === snapshot.path);
 
   return [
     { id: route?.id ?? "", data: snapshot.data, params: snapshot.params },
   ];
 }
 
+/** Read context supplied by the nearest Outlet. */
 export function useOutletContext<T>(): T {
   return useContext(OutletContext) as T;
 }
 
+/** Return a function that submits form data through the current router. */
 export function useSubmit(): (
   value: Submission,
   options?: SubmissionOptions,
@@ -103,6 +109,7 @@ export function useSubmit(): (
   );
 }
 
+/** Read the current router location as a URL. */
 export function useURLLocation(): URL & { state: unknown; key: string } {
   const href = useSnapshot("url");
   const snapshot = useNavigationSnapshot(useRouter<Router>());
@@ -117,6 +124,7 @@ export function useURLLocation(): URL & { state: unknown; key: string } {
   );
 }
 
+/** Return the application navigation function, including history offsets and relative destinations. */
 export function useNavigate(): NavigateFunction {
   const router = useRouter<Router>();
 
@@ -139,6 +147,7 @@ export function useNavigate(): NavigateFunction {
   );
 }
 
+/** Read URL search parameters and update them through router navigation. */
 export function useSearchParams(): [
   URLSearchParams,
   (
@@ -165,6 +174,7 @@ export function useSearchParams(): [
   return [params, set];
 }
 
+/** Read the last browser history operation. */
 export function useNavigationType(): NavigationType {
   return useNavigationSnapshot(useRouter<Router>()).type;
 }

package/.generated/preact/route-types.ts

@@ -7,30 +7,38 @@ import type {
 import type { DataResponse } from "../core/responses.ts";
 import type { ComponentType, ReactNode } from "preact/compat";
 
+/** Request, route parameters and cancellation signal supplied to a loader. */
 export interface LoaderFunctionArgs extends DataArgs {
   context?: unknown;
 }
 
+/** Request, route parameters and cancellation signal supplied to an action. */
 export type ActionFunctionArgs = LoaderFunctionArgs;
 
+/** Loader arguments with a serverLoader callback for the server transport. */
 export interface ClientLoaderFunctionArgs extends LoaderFunctionArgs {
   serverLoader: <T = unknown>() => Promise<T>;
 }
 
+/** Action arguments with a serverAction callback for the server transport. */
 export interface ClientActionFunctionArgs extends LoaderFunctionArgs {
   serverAction: <T = unknown>() => Promise<T>;
 }
 
+/** Navigation or mutation context used to decide whether loader data should refresh. */
 export type ShouldRevalidateFunctionArgs = RevalidationArgs;
 
 type UnwrapData<T> = T extends DataResponse<infer V> ? V : T;
 
+/** Infer successful loader data, unwrapping promises and data responses. */
 export type RouteData<T> = T extends (...args: never[]) => infer R
   ? UnwrapData<Exclude<Awaited<R>, Response | Error>>
   : T;
 
+/** A document metadata descriptor, such as a title, meta tag or structured-data record. */
 export type MetaDescriptor = Record<string, unknown>;
 
+/** Loader data, error, parameters and location supplied to a route metadata function. */
 export interface MetaArgs<T> {
   data: RouteData<T> | undefined;
   loaderData: RouteData<T> | undefined;
@@ -39,10 +47,13 @@ export interface MetaArgs<T> {
   location: URL;
 }
 
+/** Derive document metadata descriptors from the current route data and location. */
 export type MetaFunction<T = unknown> = (args: MetaArgs<T>) => MetaDescriptor[];
 
+/** Return link descriptors rendered in the document head. */
 export type LinksFunction = () => Record<string, string>[];
 
+/** Data route with optional lazy component, preload and document metadata integration. */
 export interface AppRoute extends Route {
   resolveComponent?: () => ComponentType | undefined;
   preload?: () => Promise<void>;
@@ -51,6 +62,7 @@ export interface AppRoute extends Route {
   meta?: MetaFunction;
 }
 
+/** Root document components, loader, metadata and revalidation policy for a Preact application. */
 export interface RootModule {
   /** Route identity used by targeted revalidation. Defaults to root. */
   id?: string;
@@ -65,12 +77,14 @@ export interface RootModule {
   shouldRevalidate?: (args: RevalidationArgs) => boolean;
 }
 
+/** Serialized root data and route snapshot used to hydrate without repeating initial loaders. */
 export interface Hydration {
   rootError?: boolean;
   root: unknown;
   snapshot: Snapshot;
 }
 
+/** Transform a data transport response using the current request context. */
 export type HandleDataRequestFunction = (
   response: Response,
   args: LoaderFunctionArgs,

package/.generated/preact/router.tsx

@@ -1,7 +1,5 @@
 /** @jsxImportSource preact */
 
-import type { DataFunction } from "../core/index.ts";
-import { normalizeResult } from "../core/responses.ts";
 import type { ReactNode } from "preact/compat";
 import { RouterProvider } from "./context.ts";
 import {
@@ -10,15 +8,16 @@ import {
   OutletContext,
 } from "./root-context.ts";
 import { createRootStore } from "./root-data.ts";
-import type { AppRoute } from "./route-types.ts";
 import { Routes } from "./routes.ts";
 import { useContext, useMemo, useSyncExternalStore } from "./runtime.ts";
 
+/** Optional children and context shared with descendants through useOutletContext. */
 export interface OutletProps {
   context?: unknown;
   children?: ReactNode;
 }
 
+/** Render supplied children or the active route, and provide outlet context to descendants. */
 export function Outlet({
   context,
   children,
@@ -32,11 +31,13 @@ export function Outlet({
   );
 }
 
+/** Root data, document components and request-scoped router for an application. */
 export interface ApplicationProps extends ApplicationContext {
   document?: boolean;
   rootStore?: ReturnType<typeof createRootStore>;
 }
 
+/** Render a Preact root document and active route with shared root data and application context. */
 export function RouterApplication(
   props: ApplicationProps,
 ): import("preact").JSX.Element {
@@ -66,48 +67,4 @@ export function RouterApplication(
   );
 }
 
-export function prepareRoutes(
-  routes: AppRoute[],
-  preserveDeferred = false,
-): AppRoute[] {
-  return routes.map((route) => {
-    const wrapped: AppRoute = {
-      ...route,
-      path: route.routePath ?? route.path,
-      shouldRevalidate: (args) => {
-        const { currentUrl, nextUrl } = args;
-
-        if (
-          args.reason === "navigation" &&
-          currentUrl.pathname === nextUrl.pathname &&
-          currentUrl.search === nextUrl.search &&
-          currentUrl.hash !== nextUrl.hash
-        )
-          return false;
-
-        return route.shouldRevalidate?.(args) ?? args.defaultShouldRevalidate;
-      },
-    };
-
-    for (const key of [
-      "loader",
-      "action",
-      "clientLoader",
-      "clientAction",
-    ] as const) {
-      const handler = route[key] as DataFunction | undefined;
-
-      if (!handler) continue;
-
-      wrapped[key] = (args) =>
-        Promise.resolve()
-          .then(() => handler(args))
-          .then(
-            (value) => normalizeResult(value, !preserveDeferred),
-            (error) => normalizeResult(error, !preserveDeferred),
-          );
-    }
-
-    return wrapped;
-  });
-}
+export { prepareRoutes } from "../core/prepare-routes.ts";

package/.generated/react/client.tsx

@@ -0,0 +1,130 @@
+/**
+ * React document hydration, browser history and deployment recovery.
+ *
+ * @module
+ */
+/** @jsxImportSource react */
+
+import {
+  type DeploymentOptions,
+  recoverDeployment,
+  watchDeployment,
+} from "../client/index.ts";
+import { connectHashHistory } from "../client/hash-history.ts";
+import { readHydration } from "../client/hydration.ts";
+import { attachRootData } from "../client/root-data.ts";
+import { createDataRouter, matchRoutes, type Router } from "../core/index.ts";
+import { connectNavigation } from "../core/navigation.ts";
+import { prepareRoutes } from "../core/prepare-routes.ts";
+import { retainRoute } from "../core/presentation.ts";
+import { flushSync } from "react-dom";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import type { AppRoute, Hydration, RootModule } from "./route-types.ts";
+import { RouterApplication } from "./router.ts";
+
+export * from "../client/index.ts";
+export { configureApplication } from "../core/environment.ts";
+
+/** Browser hydration settings for hash history, deployment recovery and deferred-data timeout. */
+export interface MountApplicationOptions {
+  hash?: boolean;
+  deployment?: DeploymentOptions | null;
+  /** Total initial deferred-data budget in integer milliseconds; not an inactivity timeout. Defaults to 30,000. */
+  deferredTimeout?: number;
+}
+
+/** Create the browser application router and hydrate the document, installing recovery before initial lazy loading. */
+export async function mountApplication(
+  routes: AppRoute[],
+  rootModule?: RootModule,
+  options: boolean | MountApplicationOptions = false,
+): Promise<Router> {
+  const {
+    hash = false,
+    deployment = null,
+    deferredTimeout,
+  } = typeof options === "boolean" ? { hash: options } : options;
+  const initialURL = new URL(
+    hash ? location.hash.slice(1) || "/" : location.href,
+    location.origin,
+  );
+
+  const initialRoute = matchRoutes(routes, initialURL.pathname)?.route as
+    | AppRoute
+    | undefined;
+
+  await initialRoute?.preload?.().catch(async (error: unknown) => {
+    await recoverDeployment(deployment, initialURL);
+    throw error;
+  });
+
+  routes = prepareRoutes(routes);
+  const element = document.getElementById("smolter-data");
+  const initial = element?.textContent
+    ? readHydration(element.textContent, deferredTimeout)
+    : undefined;
+  const hydration: Hydration | undefined = initial?.hydration;
+
+  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 }),
+  });
+  const dispose = router.dispose;
+  router.dispose = () => {
+    initial?.dispose();
+    dispose();
+  };
+  watchDeployment(router, deployment);
+  if (hash) connectHashHistory(router);
+
+  retainRoute(router, flushSync);
+
+  connectNavigation(router);
+  const rootStore = attachRootData(router, hydration?.root, rootModule);
+  const props = {
+    routes,
+    router,
+    root: hydration?.root,
+    rootModule,
+    rootStore,
+    rootError: hydration?.rootError,
+    initialData: element?.textContent ?? undefined,
+  };
+
+  if (hydration) {
+    const mounted = hydrateRoot(
+      document,
+      <RouterApplication {...props} document />,
+    );
+    const cleanup = router.dispose;
+    router.dispose = () => {
+      mounted.unmount();
+      cleanup();
+    };
+
+    return router;
+  }
+
+  const target = document.getElementById("root");
+
+  if (target) {
+    const mounted = createRoot(target);
+    mounted.render(<RouterApplication {...props} />);
+    const cleanup = router.dispose;
+    router.dispose = () => {
+      mounted.unmount();
+      cleanup();
+    };
+  }
+
+  return router;
+}

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>
+  );
+}