@kasperrt/smolter 0.4.3 → 0.4.4

package/.generated/client/hash-history.ts

@@ -0,0 +1,27 @@
+import type { Router } from "../core/index.ts";
+
+export function connectHashHistory(router: Router) {
+  const read = router.getSnapshot;
+  const navigate = router.navigate;
+  router.navigate = async (url, options) => {
+    const target = new URL(url, router.getSnapshot().url);
+    const hash = `#${target.pathname}${target.search}${target.hash}`;
+    history[options?.replace ? "replaceState" : "pushState"](null, "", hash);
+    await navigate(url, options);
+  };
+  const unsubscribe = router.subscribe(() => {
+    const target = new URL(read().url);
+    const hash = `#${target.pathname}${target.search}${target.hash}`;
+
+    // Redirects commit inside the router rather than through navigate().
+    if (location.hash !== hash) history.replaceState(history.state, "", hash);
+  });
+  const onHashChange = () => void navigate(location.hash.slice(1) || "/");
+  window.addEventListener("hashchange", onHashChange);
+  const dispose = router.dispose;
+  router.dispose = () => {
+    unsubscribe();
+    window.removeEventListener("hashchange", onHashChange);
+    dispose();
+  };
+}

package/.generated/client/hydration.ts

@@ -0,0 +1,98 @@
+type Settlement = [number, unknown, string | null];
+
+interface PendingValue {
+  promise: Promise<unknown>;
+  resolve: (value: unknown) => void;
+  reject: (reason: Error) => void;
+}
+
+export interface DeferredWindow extends Window {
+  __smolterDeferred?: Settlement[];
+}
+
+/** Restore promise identity before hydrating Suspense boundaries. */
+export function readHydration(json: string, timeout = 30_000) {
+  if (!Number.isInteger(timeout) || timeout < 1 || timeout > 2_147_483_647)
+    throw new RangeError(
+      "deferredTimeout must be an integer between 1 and 2147483647 ms",
+    );
+
+  const pending = new Map<number, PendingValue>();
+  const queue = ((window as DeferredWindow).__smolterDeferred ??= []);
+
+  function revive(_key: string, value: unknown): unknown {
+    if (!value || typeof value !== "object") return value;
+    if ("__smolterUndefined" in value) return undefined;
+
+    if (
+      "__smolterPending" in value &&
+      typeof value.__smolterPending === "number"
+    ) {
+      const id = value.__smolterPending;
+      const existing = pending.get(id);
+      if (existing) return existing.promise;
+
+      let resolve!: PendingValue["resolve"];
+      let reject!: PendingValue["reject"];
+      const promise = new Promise((accept, fail) => {
+        resolve = accept;
+        reject = fail;
+      });
+      void promise.catch(() => {});
+      pending.set(id, { promise, resolve, reject });
+
+      return promise;
+    }
+
+    if ("__smolterRejected" in value) {
+      const failure = value.__smolterRejected as { message: string };
+      const rejected = Promise.reject(
+        Object.assign(new Error(failure.message), failure),
+      );
+      void rejected.catch(() => {});
+
+      return rejected;
+    }
+
+    return value;
+  }
+
+  const hydration = JSON.parse(json, revive);
+  const dispose = () => {
+    clearTimeout(deadline);
+    window.removeEventListener("DOMContentLoaded", dispose);
+    for (const target of pending.values())
+      target.reject(new Error("Hydration stream closed"));
+    pending.clear();
+    queue.push = () => 0;
+  };
+  const deadline = pending.size
+    ? setTimeout(() => {
+        for (const target of pending.values())
+          target.reject(new Error("Hydration stream timed out"));
+        dispose();
+      }, timeout)
+    : undefined;
+  const receive = (packet: Settlement) => {
+    const [id, value, error] = packet;
+    if (id === -1) return dispose();
+
+    const target = pending.get(id);
+    if (!target) return;
+
+    if (error !== null) target.reject(new Error(error));
+    if (error === null)
+      target.resolve(JSON.parse(JSON.stringify(value), revive));
+  };
+  const buffered = queue.splice(0);
+  queue.push = (...packets) => {
+    packets.forEach(receive);
+    return 0;
+  };
+
+  window.addEventListener("DOMContentLoaded", dispose, { once: true });
+  buffered.forEach(receive);
+  if (document.readyState !== "loading") dispose();
+
+  return { hydration, dispose };
+}

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

@@ -0,0 +1,52 @@
+import type { RevalidationArgs, Router } from "../core/index.ts";
+
+interface RootModule {
+  default?: unknown;
+  Layout?: unknown;
+  id?: string;
+  loaderPath?: string;
+  shouldRevalidate?: (args: RevalidationArgs) => boolean;
+}
+
+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;
+}

package/.generated/core/prepare-routes.ts

@@ -0,0 +1,50 @@
+import { normalizeResult } from "./responses.ts";
+import type { DataFunction, Route } from "./types.ts";
+
+type AppRoute = Route & { routePath?: string; preload?: () => Promise<void> };
+
+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;
+  });
+}

package/.generated/core/presentation.ts

@@ -9,7 +9,7 @@ type CommitView = (update: () => void) => void;
 const pending = new WeakMap<Router, () => Snapshot>();
 
 export function pendingLocation(router: Router) {
-  const snapshot = pending.get(router)?.();
+  const snapshot = pending.get(router)?.() ?? router.getSnapshot();
 
   return snapshot?.state !== "idle" && snapshot?.url
     ? new URL(snapshot.url)

package/.generated/preact/client.tsx

@@ -10,6 +10,7 @@ import {
   recoverDeployment,
   watchDeployment,
 } from "../client/index.ts";
+import { connectHashHistory } from "../client/hash-history.ts";
 import { createDataRouter, matchRoutes, type Router } from "../core/index.ts";
 import { connectNavigation } from "../core/navigation.ts";
 import { retainRoute } from "../core/presentation.ts";
@@ -123,29 +124,3 @@ export async function mountApplication(
 
   return router;
 }
-
-function connectHashHistory(router: Router) {
-  const read = router.getSnapshot;
-  const navigate = router.navigate;
-  router.navigate = async (url, options) => {
-    const target = new URL(url, router.getSnapshot().url);
-    const hash = `#${target.pathname}${target.search}${target.hash}`;
-    history[options?.replace ? "replaceState" : "pushState"](null, "", hash);
-    await navigate(url, options);
-  };
-  const unsubscribe = router.subscribe(() => {
-    const target = new URL(read().url);
-    const hash = `#${target.pathname}${target.search}${target.hash}`;
-
-    // Redirects commit inside the router rather than through navigate().
-    if (location.hash !== hash) history.replaceState(history.state, "", hash);
-  });
-  const onHashChange = () => void navigate(location.hash.slice(1) || "/");
-  window.addEventListener("hashchange", onHashChange);
-  const dispose = router.dispose;
-  router.dispose = () => {
-    unsubscribe();
-    window.removeEventListener("hashchange", onHashChange);
-    dispose();
-  };
-}

package/.generated/preact/deferred-hydration.ts

@@ -1,98 +1 @@
-type Settlement = [number, unknown, string | null];
-
-interface PendingValue {
-  promise: Promise<unknown>;
-  resolve: (value: unknown) => void;
-  reject: (reason: Error) => void;
-}
-
-export interface DeferredWindow extends Window {
-  __smolterDeferred?: Settlement[];
-}
-
-/** Restore promise identity before hydrating Suspense boundaries. */
-export function readHydration(json: string, timeout = 30_000) {
-  if (!Number.isInteger(timeout) || timeout < 1 || timeout > 2_147_483_647)
-    throw new RangeError(
-      "deferredTimeout must be an integer between 1 and 2147483647 ms",
-    );
-
-  const pending = new Map<number, PendingValue>();
-  const queue = ((window as DeferredWindow).__smolterDeferred ??= []);
-
-  function revive(_key: string, value: unknown): unknown {
-    if (!value || typeof value !== "object") return value;
-    if ("__smolterUndefined" in value) return undefined;
-
-    if (
-      "__smolterPending" in value &&
-      typeof value.__smolterPending === "number"
-    ) {
-      const id = value.__smolterPending;
-      const existing = pending.get(id);
-      if (existing) return existing.promise;
-
-      let resolve!: PendingValue["resolve"];
-      let reject!: PendingValue["reject"];
-      const promise = new Promise((accept, fail) => {
-        resolve = accept;
-        reject = fail;
-      });
-      void promise.catch(() => {});
-      pending.set(id, { promise, resolve, reject });
-
-      return promise;
-    }
-
-    if ("__smolterRejected" in value) {
-      const failure = value.__smolterRejected as { message: string };
-      const rejected = Promise.reject(
-        Object.assign(new Error(failure.message), failure),
-      );
-      void rejected.catch(() => {});
-
-      return rejected;
-    }
-
-    return value;
-  }
-
-  const hydration = JSON.parse(json, revive);
-  const dispose = () => {
-    clearTimeout(deadline);
-    window.removeEventListener("DOMContentLoaded", dispose);
-    for (const target of pending.values())
-      target.reject(new Error("Hydration stream closed"));
-    pending.clear();
-    queue.push = () => 0;
-  };
-  const deadline = pending.size
-    ? setTimeout(() => {
-        for (const target of pending.values())
-          target.reject(new Error("Hydration stream timed out"));
-        dispose();
-      }, timeout)
-    : undefined;
-  const receive = (packet: Settlement) => {
-    const [id, value, error] = packet;
-    if (id === -1) return dispose();
-
-    const target = pending.get(id);
-    if (!target) return;
-
-    if (error !== null) target.reject(new Error(error));
-    if (error === null)
-      target.resolve(JSON.parse(JSON.stringify(value), revive));
-  };
-  const buffered = queue.splice(0);
-  queue.push = (...packets) => {
-    packets.forEach(receive);
-    return 0;
-  };
-
-  window.addEventListener("DOMContentLoaded", dispose, { once: true });
-  buffered.forEach(receive);
-  if (document.readyState !== "loading") dispose();
-
-  return { hydration, dispose };
-}
+export { type DeferredWindow, readHydration } from "../client/hydration.ts";

package/.generated/preact/index.ts

@@ -34,5 +34,10 @@ export {
   useSubmit,
 } from "./route-hooks.tsx";
 export * from "./route-types.ts";
-export { Outlet, type OutletProps, RouterApplication } from "./router.tsx";
+export {
+  type ApplicationProps,
+  Outlet,
+  type OutletProps,
+  RouterApplication,
+} from "./router.tsx";
 export * from "./routes.ts";

package/.generated/preact/navigation.tsx

@@ -7,7 +7,7 @@ import { navigationClick } from "../core/url.ts";
 import type { TargetedMouseEvent } from "preact";
 import type { ComponentProps, ReactNode } from "preact/compat";
 import { useRouter, useSnapshot } from "./context.ts";
-import { useURLLocation } from "./route-hooks.tsx";
+import { useNavigation, useURLLocation } from "./route-hooks.tsx";
 import type { AppRoute } from "./route-types.ts";
 import { createElement } from "./runtime.ts";
 
@@ -130,11 +130,19 @@ export function NavLink({
   ...props
 }: NavLinkProps): ReactNode {
   const location = useURLLocation();
-  const target = new URL(to, location.href).pathname;
+  const destination = resolveApplicationURL(new URL(to, location.href));
+  const target = destination.pathname;
   const isActive =
-    location.pathname === target ||
-    (!end && target !== "/" && location.pathname.startsWith(`${target}/`));
-  const state = { isActive, isPending: false };
+    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,

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/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,7 +8,6 @@ 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";
 
@@ -34,6 +31,7 @@ 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>;
@@ -69,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;
+}