@kasperrt/smolter 0.0.1 → 0.3.0

package/{src/internal → .generated}/core/router.ts

@@ -4,6 +4,7 @@ import type {
   DataFunction,
   NavigateOptions,
   Result,
+  RevalidationArgs,
   Route,
   Router,
   RouterOptions,
@@ -14,19 +15,25 @@ import { internalURL } from "./url.ts";
 
 type ChannelSnapshot = Partial<Snapshot> & Pick<Snapshot, "state">;
 
-interface OperationOptions extends SubmitOptions, NavigateOptions {
-  hops?: number;
+interface OperationOptions extends SubmitOptions, NavigateOptions {}
+
+interface RevalidationTask {
+  revalidate: (
+    args: RevalidationArgs,
+    targets?: readonly string[],
+  ) => Promise<unknown>;
+  dispose?: () => void;
 }
 
 /** Create an isolated router. Use browser: true for browser history, or loadRouter for SSR. */
-export function createRouter(
+export function createDataRouter(
   routes: readonly Route[],
   options: RouterOptions = {},
 ): Router {
   const browser = options.browser && typeof window !== "undefined";
-  let initialized = options.hydrationData?.state === "idle";
+  const hydrated = options.hydrationData?.state === "idle";
   const initial: Snapshot = {
-    loaded: initialized,
+    loaded: hydrated,
     ...(options.hydrationData ?? {
       url: new URL(
         options.url ?? (browser ? location.href : "/"),
@@ -36,18 +43,15 @@ export function createRouter(
       state: "idle",
     }),
   };
-  const disposers = new Set<() => void>();
-  const channel = <S extends ChannelSnapshot>(initial: S, local = false) => {
+  const revalidators = new Set<RevalidationTask>();
+  const channel = <S extends ChannelSnapshot>(initial: S, local?: boolean) => {
     let snapshot = initial;
+    let loadedURL: string | undefined;
+    let submission: FormData | undefined;
     let controller: AbortController | undefined;
     const listeners = new Set<() => void>();
-    const dispose = () => {
-      disposers.delete(dispose);
-      controller?.abort();
-      listeners.clear();
-    };
-    const emit = (next: Partial<Snapshot>) => {
-      snapshot = { ...snapshot, ...next };
+    const emit = (state: Snapshot["state"], next?: Partial<Snapshot>) => {
+      snapshot = { ...snapshot, ...next, state };
 
       for (const listener of listeners) listener();
     };
@@ -55,16 +59,19 @@ export function createRouter(
       href: string,
       body?: FormData,
       operation: OperationOptions = {},
-      // true pushes history; false handles popstate; undefined is a data request.
+      // Only loader navigations set this: true pushes history; false handles popstate.
       navigation?: boolean,
+      redirects = 10,
     ): Promise<Result> => {
       controller?.abort();
 
       controller = new AbortController();
 
       const { signal } = controller;
-      disposers.add(dispose);
+      const { method = "POST" } = operation;
+      revalidators.add(task);
 
+      submission = body;
       const previous = snapshot;
       const url = internalURL(main.getSnapshot().url, href);
       const match = url && matchRoutes(routes, url.pathname);
@@ -81,6 +88,7 @@ export function createRouter(
             "",
             url,
           );
+
         const sameRoute = snapshot.path === match?.route.path;
 
         snapshot = {
@@ -89,20 +97,19 @@ export function createRouter(
           path: match?.route.path,
           params: match?.params ?? {},
           actionData: undefined,
-          data: sameRoute ? snapshot.data : undefined,
-          loaded: sameRoute && snapshot.loaded,
+          ...(!sameRoute && { data: undefined, loaded: false }),
         };
       };
 
       if (!body) commit();
-      emit({ state: body ? "submitting" : "loading", error: undefined });
+
+      emit(body ? "submitting" : "loading", { error: undefined });
 
       const result = await safeWrapAsync(() => {
-        if (!match) return new Error(url ? "No route" : "External URL");
+        if (!match) return Error(url ? "No route" : "External URL");
 
         if (
           navigation !== undefined &&
-          !body &&
           previous.loaded &&
           !previous.error &&
           previous.path === match.route.path &&
@@ -120,12 +127,12 @@ export function createRouter(
           match.route[body ? "clientAction" : "clientLoader"] ||
           match.route[body ? "action" : "loader"];
 
-        if (!fn) return body && new Error("No action");
+        if (!fn) return body && Error("No action");
 
         return (fn as DataFunction)({
           request: new Request(url, {
             signal,
-            method: body && (operation.method ?? "POST"),
+            method: body && method,
             body,
           }),
           params: match.params,
@@ -138,48 +145,88 @@ export function createRouter(
       const redirectTo =
         result.data instanceof Response && result.data.headers.get("Location");
 
-      if (redirectTo && (operation.hops ?? 0) < 10) {
+      if (redirectTo && redirects) {
         await main.load(
           new URL(redirectTo, url!).href,
           undefined,
-          {
-            replace: true,
-            hops: (operation.hops ?? 0) + 1,
-          },
+          { replace: true },
           true,
+          redirects - 1,
         );
 
-        if (!signal.aborted) emit({ state: "idle" });
+        if (!signal.aborted) {
+          submission = undefined;
+          emit("idle");
+        }
 
         return result;
       }
 
-      if (redirectTo) result.error = new Error("Redirect loop");
+      if (redirectTo) result.error = Error("Redirect loop");
+
+      if (!body && !result.error) loadedURL = url!.href;
 
       if (body && !result.error) commit();
 
-      emit({
+      emit(body && !result.error ? "loading" : "idle", {
         [body && !local ? "actionData" : "data"]: result.data,
         error: result.error,
         loaded: body ? snapshot.loaded : !result.error,
-        state: body && !result.error ? "loading" : "idle",
       });
 
       if (body && !result.error) {
-        await router.revalidate("action", {
-          formMethod: operation.method ?? "POST",
-          formAction: url!.href,
-          formData: body,
-          actionResult: result.data,
-        });
+        await router
+          .revalidate("action", {
+            formMethod: method,
+            formAction: url!.href,
+            formData: body,
+            actionResult: result.data,
+          })
+          .finally(() => {
+            if (!signal.aborted) {
+              submission = undefined;
+              emit("idle");
+            }
+          });
 
-        if (!signal.aborted) emit({ state: "idle" });
+        return result;
       }
 
+      if (!signal.aborted) submission = undefined;
+
       return result;
     };
+    const task = {
+      revalidate: async (
+        args: RevalidationArgs,
+        targets?: readonly string[],
+      ) => {
+        if (local && (!loadedURL || submission)) return;
+
+        const url = new URL(local ? loadedURL! : main.getSnapshot().url);
+        const route = matchRoutes(routes, url.pathname)?.route;
+
+        // Targets are strings, so an absent route ID cannot match one.
+        if (
+          !route ||
+          (targets &&
+            !targets.includes(route.id!) &&
+            !targets.includes(route.path))
+        )
+          return;
 
-    return {
+        if (
+          route.shouldRevalidate?.({
+            ...args,
+            url,
+            currentUrl: url,
+            nextUrl: url,
+          }) === false
+        )
+          return;
+
+        return run(url.href);
+      },
       getSnapshot: () => snapshot,
       subscribe(listener: () => void) {
         listeners.add(listener);
@@ -190,48 +237,74 @@ export function createRouter(
       },
       load: run,
       submit: run,
-      dispose,
+      dispose() {
+        controller?.abort();
+        listeners.clear();
+        revalidators.delete(task);
+      },
     };
+    revalidators.add(task);
+
+    return task;
   };
   const main = channel(initial);
   let started = 0;
-  const pop = () => {
-    void main.load(location.href, undefined, undefined, false);
-  };
+  const pop = () => main.load(location.href, undefined, undefined, false);
   const router: Router = {
     ...main,
     routes,
     start() {
       if (!started++ && browser) addEventListener("popstate", pop);
 
-      if (!initialized) {
-        initialized = true;
+      // A changed snapshot means a page operation has already started.
+      if (!hydrated && main.getSnapshot() === initial)
         void main.load(initial.url);
-      }
 
       return () => {
         if (!--started && browser) removeEventListener("popstate", pop);
       };
     },
     async navigate(url, operation) {
-      initialized = true;
       await main.load(url, undefined, operation, true);
     },
-    async revalidate(reason = "manual", context = {}) {
+    async revalidate(options = {}, context) {
+      const {
+        route,
+        reason = "manual",
+        ...details
+      } = typeof options === "string"
+        ? { reason: options, ...context }
+        : options;
       const url = new URL(main.getSnapshot().url);
+      const args = {
+        ...details,
+        url,
+        currentUrl: url,
+        nextUrl: url,
+        defaultShouldRevalidate: true,
+        reason,
+      };
+      const targets = typeof route === "string" ? [route] : route;
+
+      await Promise.all(
+        [...revalidators].map((refresh) => refresh.revalidate(args, targets)),
+      );
+    },
 
-      if (
-        matchRoutes(routes, url.pathname)?.route.shouldRevalidate?.({
-          ...context,
-          url,
-          currentUrl: url,
-          nextUrl: url,
-          defaultShouldRevalidate: true,
-          reason,
-        }) === false
-      )
-        return;
-      await main.load(url.href);
+    registerRevalidator(id, refresh) {
+      const task = {
+        revalidate: async (
+          args: RevalidationArgs,
+          targets?: readonly string[],
+        ) => {
+          if (!targets || targets.includes(id)) return refresh(args);
+        },
+      };
+      revalidators.add(task);
+
+      return () => {
+        revalidators.delete(task);
+      };
     },
 
     createFetcher() {
@@ -239,9 +312,9 @@ export function createRouter(
     },
 
     dispose() {
-      main.dispose();
+      for (const refresh of revalidators) refresh.dispose?.();
 
-      for (const dispose of disposers) dispose();
+      revalidators.clear();
 
       if (browser) removeEventListener("popstate", pop);
     },

package/.generated/core/serialize.ts

@@ -0,0 +1,20 @@
+import type { Snapshot } from "./types.ts";
+
+/** Safe inside a script element. Data must be JSON serializable; error stacks and causes are omitted. */
+export function serialize(snapshot: Snapshot): string {
+  return serializeData({
+    ...snapshot,
+    error: snapshot.error && {
+      name: snapshot.error.name,
+      message: snapshot.error.message,
+    },
+  });
+}
+
+/** Encode JSON for embedding inside an HTML script element. */
+export function serializeData(value: unknown): string {
+  return JSON.stringify(value)
+    .replace(/</g, "\\u003c")
+    .replace(/\u2028/g, "\\u2028")
+    .replace(/\u2029/g, "\\u2029");
+}

package/.generated/core/store.ts

@@ -0,0 +1,25 @@
+/** Small observable value shared by layout data and navigation state. */
+export function createStore<T>(initial: T): {
+  getSnapshot: () => T;
+  subscribe(listener: () => void): () => void;
+  update(next: T): void;
+} {
+  let value = initial;
+  const listeners = new Set<() => void>();
+
+  return {
+    getSnapshot: () => value,
+    subscribe(listener: () => void) {
+      listeners.add(listener);
+
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    update(next: T) {
+      value = next;
+
+      for (const listener of listeners) listener();
+    },
+  };
+}

package/.generated/core/submission.ts

@@ -0,0 +1,116 @@
+import type {
+  Fetcher,
+  NavigateOptions,
+  Router,
+  SubmitOptions,
+} from "./types.ts";
+import { internalURL } from "./url.ts";
+
+/** Values accepted by programmatic route submissions. */
+export type Submission = FormData | HTMLFormElement | Record<string, unknown>;
+
+/** Destination and encoding for a programmatic route submission. */
+export interface SubmissionOptions {
+  action?: string;
+  encType?: string;
+  method?: string;
+  replace?: boolean;
+  preventScrollReset?: boolean;
+}
+
+export function formData(value: Submission): FormData {
+  if (value instanceof FormData) return value;
+
+  if (
+    typeof HTMLFormElement !== "undefined" &&
+    value instanceof HTMLFormElement
+  )
+    return new FormData(value);
+
+  const body = new FormData();
+
+  for (const [key, field] of Object.entries(value))
+    body.append(key, String(field));
+
+  return body;
+}
+
+export function submissionBody(value: Submission, encoding?: string): FormData {
+  return formData(
+    encoding === "application/json"
+      ? { _payload: JSON.stringify(value) }
+      : value,
+  );
+}
+
+/** Encode successful form controls for a GET route request. */
+export function submissionSearch(body: FormData): string {
+  const search = new URLSearchParams();
+
+  for (const [key, value] of body)
+    search.append(key, typeof value === "string" ? value : value.name);
+
+  return String(search);
+}
+
+/** Read the JSON payload of a programmatic submission. */
+export async function readSubmission(request: Request): Promise<unknown> {
+  if (request.headers.get("Content-Type")?.includes("application/json"))
+    return request.json();
+
+  const body = await request.formData();
+
+  return JSON.parse(String(body.get("_payload") ?? "{}"));
+}
+
+/** Browser form behavior shared by the React and Preact adapters. */
+export interface RouteFormOptions extends NavigateOptions {
+  action?: string;
+  method?: "get" | "post" | "put" | "patch" | "delete";
+  reloadDocument?: boolean;
+}
+
+export interface FormSubmissionEvent {
+  currentTarget: HTMLFormElement;
+  defaultPrevented: boolean;
+  preventDefault: () => void;
+}
+
+/** Submit an internal form while leaving external actions to the browser. */
+export function submitForm(
+  router: Router,
+  event: FormSubmissionEvent,
+  submitter: HTMLElement | null,
+  options: RouteFormOptions,
+  fetcher?: Fetcher,
+): void {
+  if (event.defaultPrevented || options.reloadDocument) return;
+
+  const target = internalURL(
+    router.getSnapshot().url,
+    submitter?.getAttribute("formaction") ?? options.action,
+  );
+
+  if (!target) return;
+
+  const data = new FormData(event.currentTarget, submitter);
+  const method = (
+    submitter?.getAttribute("formmethod") ?? options.method
+  )?.toUpperCase();
+
+  event.preventDefault();
+
+  if (method === "GET") {
+    target.search = submissionSearch(data);
+
+    void (fetcher
+      ? fetcher.load(target.href)
+      : router.navigate(target.href, options));
+
+    return;
+  }
+
+  void (fetcher ?? router).submit(target.href, data, {
+    method: method as SubmitOptions["method"],
+  });
+}

package/{src/internal → .generated}/core/types.ts

@@ -55,6 +55,8 @@ export interface RevalidationArgs extends RevalidationContext {
 
 /** A route component and its optional server and client data handlers. */
 export interface RouteModule {
+  /** Stable identifier for targeted revalidation; defaults to the path. */
+  id?: string;
   default?: unknown;
   HydrateFallback?: unknown;
   ErrorBoundary?: unknown;
@@ -96,7 +98,11 @@ export interface RouterOptions {
 
 /** Options for replacing rather than appending a browser history entry. */
 export interface NavigateOptions {
+  state?: unknown;
+  viewTransition?: boolean;
   replace?: boolean;
+  /** Preserve scroll in integrations that manage scroll restoration. */
+  preventScrollReset?: boolean;
 }
 
 /** HTTP method for a route action submission; defaults to POST. */
@@ -129,6 +135,15 @@ export interface Fetcher {
   dispose: () => void;
 }
 
+/** Refresh active route data without navigation, optionally selecting route IDs or paths. */
+export interface RevalidateOptions extends RevalidationContext {
+  route?: string | readonly string[];
+  reason?: RevalidationArgs["reason"];
+}
+
+/** A registered layout loader's revalidation callback. */
+export type Revalidator = (args: RevalidationArgs) => void | Promise<void>;
+
 /** Route navigation, subscriptions, fetchers, and loader revalidation. */
 export interface Router {
   routes: readonly Route[];
@@ -137,9 +152,11 @@ export interface Router {
   start: () => () => void;
   navigate: (url: string, options?: NavigateOptions) => Promise<void>;
   revalidate: (
-    reason?: RevalidationArgs["reason"],
+    options?: RevalidateOptions | RevalidationArgs["reason"],
     context?: RevalidationContext,
   ) => Promise<void>;
+  /** Register layout data under a route ID. The returned function unregisters it. */
+  registerRevalidator: (id: string, revalidate: Revalidator) => () => void;
   submit: (
     url: string,
     body: FormData,

package/.generated/core/url.ts

@@ -0,0 +1,29 @@
+/** Resolve an internal URL; external links remain the browser's responsibility. */
+export function internalURL(base: string, href = base): URL | undefined {
+  const url = new URL(href, base);
+
+  if (url.origin === new URL(base).origin) return url;
+}
+
+/** Browser and framework event fields used by navigation interception. */
+type NavigationClickEvent = Pick<
+  MouseEvent,
+  "defaultPrevented" | "button" | "metaKey" | "ctrlKey" | "altKey" | "shiftKey"
+>;
+
+/** Whether an anchor click should use router navigation. */
+export function navigationClick(
+  event: NavigationClickEvent,
+  anchor: HTMLAnchorElement,
+): boolean {
+  return !(
+    event.defaultPrevented ||
+    event.button ||
+    event.metaKey ||
+    event.ctrlKey ||
+    event.altKey ||
+    event.shiftKey ||
+    anchor.hasAttribute("download") ||
+    (anchor.target && anchor.target !== "_self")
+  );
+}

package/.generated/core/utils.ts

@@ -0,0 +1,5 @@
+/** Framework-independent, browser-safe utilities. @module */
+export * from "./errors.ts";
+export * from "./match.ts";
+export * from "./serialize.ts";
+export * from "./url.ts";

package/.generated/preact/await.tsx

@@ -0,0 +1,41 @@
+import type { ComponentChildren } from "preact";
+import { use } from "preact/compat";
+
+export interface AwaitProps<T> {
+  resolve: T | Promise<T>;
+  children: (value: Awaited<T>) => ComponentChildren;
+  errorElement?: ComponentChildren;
+}
+
+type Resolution = { value: unknown } | { error: unknown };
+
+// Cache only the error-as-data adapter. Preact owns pending and resolved state.
+const resolutions = new WeakMap<Promise<unknown>, Promise<Resolution>>();
+
+export function Await<T>({
+  resolve,
+  children,
+  errorElement,
+}: AwaitProps<T>): ComponentChildren {
+  if (!(resolve instanceof Promise)) return children(resolve as Awaited<T>);
+
+  let pending = resolutions.get(resolve);
+
+  if (!pending) {
+    pending = resolve.then(
+      (value) => ({ value }),
+      (error: unknown) => ({ error }),
+    );
+    resolutions.set(resolve, pending);
+  }
+
+  const result = use(pending);
+
+  if ("error" in result) {
+    if (errorElement !== undefined) return errorElement;
+
+    throw result.error;
+  }
+
+  return children(result.value as Awaited<T>);
+}