@kasperrt/smolter 0.3.0 → 0.3.2

package/.generated/client/deployment-check.ts

@@ -0,0 +1,70 @@
+import type { DeploymentOptions } from "./deployment.ts";
+
+export function deploymentCheck(options: DeploymentOptions) {
+  const { version, manifestURL, timeout = 2000 } = options;
+  const manifest = new URL(manifestURL, location.href);
+  const key = `smolter:deployment:${manifest.href}:${version}`;
+  let stopped = false;
+  let pending: Promise<boolean> | undefined;
+  let controller: AbortController | undefined;
+  function changed() {
+    if (pending) return pending;
+
+    controller = new AbortController();
+    const timer = setTimeout(() => controller?.abort(), timeout);
+    pending = fetch(manifest, { cache: "no-store", signal: controller.signal })
+      .then(async (response) => {
+        if (!response.ok) return false;
+
+        const data: unknown = await response.json();
+
+        return (
+          typeof data === "object" &&
+          data !== null &&
+          "version" in data &&
+          typeof data.version === "string" &&
+          data.version.length > 0 &&
+          data.version !== version
+        );
+      })
+      .catch(() => false)
+      .finally(() => {
+        clearTimeout(timer);
+        pending = undefined;
+      });
+
+    return pending;
+  }
+
+  async function reload(target: URL) {
+    // If storage is unavailable, do not risk reloading the same cached document forever.
+    const allowed = await Promise.resolve()
+      .then(() => {
+        if (sessionStorage.getItem(key)) return false;
+
+        sessionStorage.setItem(key, "1");
+
+        return true;
+      })
+      .catch(() => false);
+
+    if (allowed && !stopped) {
+      if (options?.reload) options.reload(target);
+      if (!options?.reload) {
+        if (target.href === location.href) location.reload();
+        if (target.href !== location.href) location.assign(target.href);
+      }
+    }
+
+    return allowed && !stopped;
+  }
+
+  return {
+    changed,
+    reload,
+    dispose() {
+      stopped = true;
+      controller?.abort();
+    },
+  };
+}

package/.generated/client/deployment.ts

@@ -0,0 +1,124 @@
+import type { NavigationRouter } from "../core/index.ts";
+import { deploymentCheck } from "./deployment-check.ts";
+
+/** Build identity and the fresh, non-cacheable manifest URL emitted by deploymentPlugin. */
+export interface DeploymentOptions {
+  version: string;
+  manifestURL: string;
+  /** Maximum time to wait for the update check before continuing navigation. */
+  timeout?: number;
+  /** Override document navigation, for example to ask about unsaved changes. */
+  reload?: (destination: URL) => void;
+}
+
+/** Check for deployment changes before navigation. Returns a cleanup function. */
+export function watchDeployment(
+  router: NavigationRouter,
+  options: DeploymentOptions | null,
+): () => void {
+  if (!options || typeof window === "undefined") return () => {};
+
+  const check = deploymentCheck(options);
+  const { changed, reload } = check;
+  const navigate = router.navigate;
+  const dispose = router.dispose;
+  let sequence = 0;
+  let stopped = false;
+  let replay = false;
+  let destination = new URL(location.href);
+
+  const guarded: NavigationRouter["navigate"] = async (href, operation) => {
+    const target = new URL(href, router.getSnapshot().url);
+    const currentURL = new URL(router.getSnapshot().url);
+    const current = ++sequence;
+    destination = target;
+
+    if (
+      target.origin === location.origin &&
+      (target.pathname !== currentURL.pathname ||
+        target.search !== currentURL.search) &&
+      (await changed())
+    ) {
+      if (current !== sequence || stopped || (await reload(target))) return;
+    }
+
+    if (current === sequence && !stopped) await navigate(href, operation);
+  };
+
+  const pop = (event: PopStateEvent) => {
+    if (replay) return;
+
+    const target = new URL(location.href);
+    const previous = new URL(router.getSnapshot().url);
+
+    if (
+      target.pathname === previous.pathname &&
+      target.search === previous.search
+    )
+      return;
+
+    event.stopImmediatePropagation();
+    const current = ++sequence;
+    destination = target;
+    void changed().then(async (updated) => {
+      if (stopped || current !== sequence) return;
+      if (updated && (await reload(target))) return;
+
+      replay = true;
+      window.dispatchEvent(
+        new PopStateEvent("popstate", { state: event.state }),
+      );
+      replay = false;
+    });
+  };
+
+  const preloadError = () => {
+    if (router.getSnapshot().state === "submitting") return;
+
+    const current = sequence;
+    const target = destination;
+    void changed().then((updated) => {
+      if (updated && current === sequence && !stopped) return reload(target);
+    });
+  };
+
+  function cleanup() {
+    stopped = true;
+    sequence++;
+    check.dispose();
+    window.removeEventListener("popstate", pop, true);
+    window.removeEventListener("vite:preloadError", preloadError);
+
+    if (router.navigate === guarded) router.navigate = navigate;
+    if (router.dispose === guardedDispose) router.dispose = dispose;
+  }
+
+  function guardedDispose() {
+    cleanup();
+    dispose();
+  }
+
+  router.navigate = guarded;
+  router.dispose = guardedDispose;
+  window.addEventListener("popstate", pop, true);
+  window.addEventListener("vite:preloadError", preloadError);
+
+  return cleanup;
+}
+
+/** Recover an initial lazy-import failure before a router has mounted. Returns whether a reload was requested. */
+export async function recoverDeployment(
+  options: DeploymentOptions | null,
+  destination?: URL,
+): Promise<boolean> {
+  if (!options || typeof window === "undefined") return false;
+
+  const check = deploymentCheck(options);
+
+  return check
+    .changed()
+    .then((changed) =>
+      changed ? check.reload(destination ?? new URL(location.href)) : false,
+    )
+    .finally(check.dispose);
+}

package/.generated/client/index.ts

@@ -29,6 +29,8 @@ export interface ClientRouteModule {
 export interface ServerHandlers {
   loader?: boolean;
   action?: boolean;
+  /** Application-scoped HTTP transport path. Defaults to /_smolter. */
+  dataEndpoint?: string;
 }
 
 /** Browser transport for server routes. File-router builds generate this call. */
@@ -40,7 +42,7 @@ export function serverRoute<M extends RouteModule = RouteModule>(
   const remote = async ({ request, signal }: DataArgs) => {
     const url = new URL(request.url);
     const response = await fetch(
-      `/_smolter?url=${encodeURIComponent(url.pathname + url.search)}`,
+      `${handlers.dataEndpoint ?? "/_smolter"}?url=${encodeURIComponent(url.pathname + url.search)}`,
       {
         method: request.method,
         signal,
@@ -83,3 +85,9 @@ export function serverRoute<M extends RouteModule = RouteModule>(
     }),
   } as Route<M>;
 }
+
+export {
+  type DeploymentOptions,
+  recoverDeployment,
+  watchDeployment,
+} from "./deployment.ts";

package/.generated/core/responses.ts

@@ -33,7 +33,10 @@ export function isRouteErrorResponse(value: unknown): value is RouteError {
   return value instanceof Error && "status" in value;
 }
 
-export async function normalizeResult(value: unknown): Promise<unknown> {
+export async function normalizeResult(
+  value: unknown,
+  resolveDeferred = true,
+): Promise<unknown> {
   if (value && typeof value === "object" && "__routeError" in value) {
     const error = value.__routeError as {
       message: string;
@@ -57,9 +60,11 @@ export async function normalizeResult(value: unknown): Promise<unknown> {
   }
 
   if (value && typeof value === "object" && "__routeData" in value)
-    return resolveData((value as DataResponse<unknown>).value);
+    return resolveDeferred
+      ? resolveData((value as DataResponse<unknown>).value)
+      : (value as DataResponse<unknown>).value;
 
-  return resolveData(value);
+  return resolveDeferred ? resolveData(value) : value;
 }
 
 // Smolter transfers JSON snapshots. Resolve deferred fields before serialization.

package/.generated/core/router.ts

@@ -130,6 +130,15 @@ export function createDataRouter(
         if (!fn) return body && Error("No action");
 
         return (fn as DataFunction)({
+          reason: body
+            ? "action"
+            : navigation !== undefined
+              ? "navigation"
+              : local
+                ? "fetcher"
+                : previous.loaded
+                  ? "revalidation"
+                  : "initial",
           request: new Request(url, {
             signal,
             method: body && method,
@@ -154,6 +163,29 @@ export function createDataRouter(
           redirects - 1,
         );
 
+        if (body) {
+          const destination = new URL(main.getSnapshot().url);
+          const args: RevalidationArgs = {
+            url: destination,
+            currentUrl: destination,
+            nextUrl: destination,
+            defaultShouldRevalidate: true,
+            reason: "action",
+            formMethod: method,
+            formAction: url!.href,
+            formData: body,
+            actionResult: result.data,
+          };
+
+          // The destination loader just ran. Refresh root data and other fetchers
+          // without loading that page twice or replaying the mutation.
+          await Promise.all(
+            [...revalidators]
+              .filter((task) => task !== main)
+              .map((task) => task.revalidate(args)),
+          );
+        }
+
         if (!signal.aborted) {
           submission = undefined;
           emit("idle");

package/.generated/core/types.ts

@@ -8,6 +8,8 @@ export type Params = Record<string, string>;
 
 /** Request, path parameters, and cancellation signal passed to a data handler. */
 export interface DataArgs {
+  /** Why this handler ran; independent of when browser history is committed. */
+  reason?: "initial" | "navigation" | "revalidation" | "fetcher" | "action";
   request: Request;
   params: Params;
   signal: AbortSignal;

package/.generated/preact/client.tsx

@@ -1,6 +1,11 @@
 /** Browser mounting and hydration for Preact applications. @module */
 /** @jsxImportSource preact */
 
+import {
+  type DeploymentOptions,
+  recoverDeployment,
+  watchDeployment,
+} from "../client/index.ts";
 import { createDataRouter, matchRoutes, type Router } from "../core/index.ts";
 import { connectNavigation } from "../core/navigation.ts";
 import { retainRoute } from "../core/presentation.ts";
@@ -13,11 +18,18 @@ import { prepareRoutes, RouterApplication } from "./router.tsx";
 export * from "../client/index.ts";
 export { configureApplication } from "../core/environment.ts";
 
+export interface MountApplicationOptions {
+  hash?: boolean;
+  deployment?: DeploymentOptions | null;
+}
+
 export async function mountApplication(
   routes: AppRoute[],
   rootModule?: RootModule,
-  hash = false,
+  options: boolean | MountApplicationOptions = false,
 ): Promise<Router> {
+  const { hash = false, deployment = null } =
+    typeof options === "boolean" ? { hash: options } : options;
   const initialURL = new URL(
     hash ? location.hash.slice(1) || "/" : location.href,
     location.origin,
@@ -27,12 +39,31 @@ export async function mountApplication(
     | AppRoute
     | undefined;
 
-  await initialRoute?.preload?.();
+  await initialRoute?.preload?.().catch(async (error: unknown) => {
+    await recoverDeployment(deployment, initialURL);
+    throw error;
+  });
 
   routes = prepareRoutes(routes);
   const element = document.getElementById("smolter-data");
   const hydration: Hydration | undefined = element?.textContent
-    ? JSON.parse(element.textContent)
+    ? JSON.parse(element.textContent, (_key, value) => {
+        if (
+          !value ||
+          typeof value !== "object" ||
+          !("__smolterRejected" in value)
+        )
+          return value;
+
+        const error = Object.assign(
+          new Error(value.__smolterRejected.message),
+          value.__smolterRejected,
+        );
+        const rejected = Promise.reject(error);
+        void rejected.catch(() => {});
+
+        return rejected;
+      })
     : undefined;
 
   if (hydration?.snapshot.error)
@@ -48,10 +79,11 @@ export async function mountApplication(
       : location.href,
     ...(hydration && { hydrationData: hydration.snapshot }),
   });
-  retainRoute(router, flushSync);
-
+  watchDeployment(router, deployment);
   if (hash) connectHashHistory(router);
 
+  retainRoute(router, flushSync);
+
   connectNavigation(router);
   const rootStore = attachRootData(router, hydration?.root, rootModule);
   const props = {
@@ -60,6 +92,7 @@ export async function mountApplication(
     root: hydration?.root,
     rootModule,
     rootStore,
+    rootError: hydration?.rootError,
   };
 
   if (hydration) {
@@ -76,17 +109,26 @@ export async function mountApplication(
 }
 
 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}`;
+    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/document.tsx

@@ -72,10 +72,12 @@ export interface ScriptProps {
 }
 
 export function Scripts({ nonce }: ScriptProps): import("preact").JSX.Element {
-  const { root, router, entry } = useApplication();
+  const { root, rootError, router, entry, streaming } = 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 (streaming) return "";
+
     const current = router.getSnapshot();
     const snapshot = {
       ...current,
@@ -86,7 +88,7 @@ export function Scripts({ nonce }: ScriptProps): import("preact").JSX.Element {
       },
     };
 
-    return serializeData({ root, snapshot });
+    return serializeData({ root, snapshot, ...(rootError && { rootError }) });
   });
 
   return (

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

@@ -8,6 +8,7 @@ import { useSyncExternalStore } from "./runtime.ts";
 
 export interface LazyRouteOptions {
   path: string;
+  dataEndpoint?: string;
   id?: string;
   loader?: boolean;
   action?: boolean;
@@ -48,6 +49,7 @@ export function lazyRoute(
         module = serverRoute(options.path, loaded, {
           loader: options.loader,
           action: options.action,
+          dataEndpoint: options.dataEndpoint,
         });
       })
       .catch((error: unknown) => {

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

@@ -6,6 +6,8 @@ export interface ApplicationContext {
   router: Router;
   routes: AppRoute[];
   root: unknown;
+  rootError?: boolean;
+  streaming?: boolean;
   rootModule?: RootModule;
   hydration?: Hydration;
   entry?: string;

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

@@ -66,6 +66,7 @@ export interface RootModule {
 }
 
 export interface Hydration {
+  rootError?: boolean;
   root: unknown;
   snapshot: Snapshot;
 }

package/.generated/preact/router.tsx

@@ -51,7 +51,7 @@ export function RouterApplication(
   );
   const route = props.routes.find((item) => item.path === snapshot.path);
   const Root =
-    snapshot.error && !route?.ErrorBoundary
+    snapshot.error && (props.rootError || !route?.ErrorBoundary)
       ? (props.rootModule?.ErrorBoundary ?? Outlet)
       : (props.rootModule?.default ?? Outlet);
   const Layout = props.rootModule?.Layout;
@@ -66,7 +66,10 @@ export function RouterApplication(
   );
 }
 
-export function prepareRoutes(routes: AppRoute[]): AppRoute[] {
+export function prepareRoutes(
+  routes: AppRoute[],
+  preserveDeferred = false,
+): AppRoute[] {
   return routes.map((route) => {
     const wrapped: AppRoute = {
       ...route,
@@ -99,7 +102,10 @@ export function prepareRoutes(routes: AppRoute[]): AppRoute[] {
       wrapped[key] = (args) =>
         Promise.resolve()
           .then(() => handler(args))
-          .then(normalizeResult, normalizeResult);
+          .then(
+            (value) => normalizeResult(value, !preserveDeferred),
+            (error) => normalizeResult(error, !preserveDeferred),
+          );
     }
 
     return wrapped;

package/.generated/server/application.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource preact */
 
-import { createDataRouter, matchRoutes } from "../core/index.ts";
+import { createDataRouter, matchRoutes, safeWrapAsync } from "../core/index.ts";
 import {
   type DataResponse,
   normalizeResult,
@@ -9,13 +9,20 @@ import {
 import type { AppRoute, RootModule } from "../preact/route-types.ts";
 import { prepareRoutes, RouterApplication } from "../preact/router.tsx";
 import { loadRouter } from "./index.ts";
-import { renderToStringAsync } from "preact-render-to-string";
+import { renderToReadableStream } from "preact-render-to-string/stream";
+import { privateResponse } from "./private-response.ts";
+import { resolveHydration, streamDocument } from "./stream-document.ts";
+
+export interface RenderApplicationOptions {
+  nonce?: string;
+}
 
 export async function renderApplication(
   request: Request,
   routes: AppRoute[],
   rootModule: RootModule,
   entry: string,
+  options: RenderApplicationOptions = {},
 ): Promise<Response> {
   routes = routes.map((route) => ({
     ...route,
@@ -41,12 +48,20 @@ export async function renderApplication(
     actionData = await normalizeResult(await actionResponse.json());
   }
 
-  const root = await resolveData(
-    await rootModule.loader?.({
-      request,
-      params: {},
-      signal: request.signal,
-    }),
+  const rootResult = safeWrapAsync(() =>
+    Promise.resolve()
+      .then(() =>
+        rootModule.loader?.({ request, params: {}, signal: request.signal }),
+      )
+      .then(
+        (value) => normalizeResult(value, false),
+        (error: unknown) =>
+          error instanceof Response
+            ? normalizeResult(error, false)
+            : error instanceof Error
+              ? error
+              : new Error(String(error), { cause: error }),
+      ),
   );
   let redirectResponse: Response | undefined;
   const prepared = prepareRoutes(
@@ -54,6 +69,7 @@ export async function renderApplication(
       ...route,
       ErrorBoundary: route.ErrorBoundary ?? rootModule.ErrorBoundary,
     })),
+    true,
   ).map((route) => {
     if (!route.loader) return route;
 
@@ -71,7 +87,20 @@ export async function renderApplication(
       },
     };
   });
-  let router = await loadRouter(prepared, request);
+  const [rootState, loadedRouter] = await Promise.all([
+    rootResult,
+    loadRouter(prepared, request),
+  ]);
+  let router = loadedRouter;
+  const rootError =
+    rootState.error ??
+    (rootState.data instanceof Error ? rootState.data : undefined);
+  const root = rootError ? undefined : rootState.data;
+
+  if (root instanceof Response && root.headers.has("Location")) {
+    router.dispose();
+    return root;
+  }
 
   if (redirectResponse) {
     router.dispose();
@@ -79,43 +108,68 @@ export async function renderApplication(
     return redirectResponse;
   }
 
-  if (actionResponse) {
+  if (actionResponse || rootError) {
     const hydrationData = {
       ...router.getSnapshot(),
       actionData: actionData instanceof Error ? undefined : actionData,
       ...(actionData instanceof Error && { error: actionData }),
+      ...(rootError && { error: rootError }),
     };
     router.dispose();
     router = createDataRouter(router.routes, { hydrationData });
   }
 
   const snapshot = router.getSnapshot();
-  const html = await renderToStringAsync(
+  const stream = renderToReadableStream(
     <RouterApplication
       router={router}
       routes={routes}
       root={root}
       rootModule={rootModule}
       entry={entry}
+      rootError={Boolean(rootError)}
+      streaming
       document
     />,
+    options,
   );
-  router.dispose();
+  const hydration = resolveHydration({
+    root,
+    snapshot: {
+      ...snapshot,
+      error: snapshot.error && {
+        ...snapshot.error,
+        name: snapshot.error.name,
+        message: snapshot.error.message,
+      },
+    },
+    ...(rootError && { rootError: true }),
+  });
+  // The renderer reports the same rejection through its stream reader.
+  void stream.allReady.catch(() => {});
   const headers = new Headers(actionResponse?.headers);
   headers.delete("Content-Length");
   headers.delete("Content-Encoding");
   headers.set("Content-Type", "text/html; charset=utf-8");
   headers.set("Cache-Control", "no-store");
 
-  return new Response(`<!doctype html>${html}`, {
-    status: snapshot.error
-      ? Number("status" in snapshot.error ? snapshot.error.status : 500)
-      : (actionResponse?.status ?? 200),
-    headers,
-  });
+  return new Response(
+    streamDocument(stream, {
+      hydration,
+      signal: request.signal,
+      nonce: options.nonce,
+      dispose: () => router.dispose(),
+    }),
+    {
+      status: snapshot.error
+        ? Number("status" in snapshot.error ? snapshot.error.status : 500)
+        : (actionResponse?.status ?? 200),
+      headers,
+    },
+  );
 }
 
-export async function dispatchRoute(
+async function dispatch(
   request: Request,
   routes: AppRoute[],
   document = false,
@@ -183,3 +237,13 @@ export async function dispatchRoute(
 
   return Response.json((await normalizeResult(value)) ?? null);
 }
+
+export async function dispatchRoute(
+  request: Request,
+  routes: AppRoute[],
+  document = false,
+): Promise<Response> {
+  const response = await dispatch(request, routes, document);
+
+  return document ? response : privateResponse(response);
+}