@kasperrt/smolter 0.2.0 → 0.3.1

package/.generated/preact/client.tsx

@@ -0,0 +1,93 @@
+/** Browser mounting and hydration for Preact applications. @module */
+/** @jsxImportSource preact */
+
+import { createDataRouter, matchRoutes, type Router } from "../core/index.ts";
+import { connectNavigation } from "../core/navigation.ts";
+import { retainRoute } from "../core/presentation.ts";
+import { hydrate, render } from "preact";
+import { flushSync } from "preact/compat";
+import { attachRootData } from "./root-data.ts";
+import type { AppRoute, Hydration, RootModule } from "./route-types.ts";
+import { prepareRoutes, RouterApplication } from "./router.tsx";
+
+export * from "../client/index.ts";
+export { configureApplication } from "../core/environment.ts";
+
+export async function mountApplication(
+  routes: AppRoute[],
+  rootModule?: RootModule,
+  hash = false,
+): Promise<Router> {
+  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?.();
+
+  routes = prepareRoutes(routes);
+  const element = document.getElementById("smolter-data");
+  const hydration: Hydration | undefined = element?.textContent
+    ? JSON.parse(element.textContent)
+    : undefined;
+
+  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 }),
+  });
+  retainRoute(router, flushSync);
+
+  if (hash) connectHashHistory(router);
+
+  connectNavigation(router);
+  const rootStore = attachRootData(router, hydration?.root, rootModule);
+  const props = {
+    routes,
+    router,
+    root: hydration?.root,
+    rootModule,
+    rootStore,
+  };
+
+  if (hydration) {
+    hydrate(<RouterApplication {...props} document />, document);
+
+    return router;
+  }
+
+  const target = document.getElementById("root");
+
+  if (target) render(<RouterApplication {...props} />, target);
+
+  return router;
+}
+
+function connectHashHistory(router: Router) {
+  const navigate = router.navigate;
+  router.navigate = async (url, options) => {
+    const target = new URL(url, router.getSnapshot().url);
+    const hash = `#${target.pathname}${target.search}`;
+    history[options?.replace ? "replaceState" : "pushState"](null, "", hash);
+    await navigate(url, options);
+  };
+  const onHashChange = () => void navigate(location.hash.slice(1) || "/");
+  window.addEventListener("hashchange", onHashChange);
+  const dispose = router.dispose;
+  router.dispose = () => {
+    window.removeEventListener("hashchange", onHashChange);
+    dispose();
+  };
+}

package/.generated/preact/context.ts

@@ -0,0 +1,59 @@
+/**
+ * Preact components and typed data hooks. Import from @kasperrt/smolter/preact.
+ * @module
+ */
+
+import type { NavigationRouter, Snapshot } from "../core/index.ts";
+
+import {
+  createContext,
+  createElement,
+  type ReactNode,
+  useContext,
+  useEffect,
+  useSyncExternalStore,
+} from "./runtime.ts";
+
+const RouterContext = createContext<NavigationRouter | undefined>(undefined);
+
+/** Router instance and children rendered within its context. */
+export interface RouterProviderProps {
+  router: NavigationRouter;
+  children?: ReactNode;
+}
+
+/** Provide a router to descendant hooks and connect its browser lifecycle. */
+export function RouterProvider({
+  router,
+  children,
+}: RouterProviderProps): ReactNode {
+  useEffect(router.start, [router]);
+
+  return createElement(RouterContext, { value: router }, children);
+}
+/** Hooks require a RouterProvider. */
+export function useRouter<T extends NavigationRouter = NavigationRouter>(): T {
+  return useContext(RouterContext) as T;
+}
+
+export function useSnapshot(): Snapshot;
+
+export function useSnapshot<K extends keyof Snapshot>(key: K): Snapshot[K];
+
+export function useSnapshot<K extends keyof Snapshot>(
+  key: K,
+  path: string | undefined,
+): Snapshot[K] | undefined;
+
+export function useSnapshot(key?: keyof Snapshot, path?: string) {
+  const router = useRouter();
+  const getSnapshot = () => {
+    const snapshot = router.getSnapshot();
+
+    if (path !== undefined && path !== snapshot.path) return undefined;
+
+    return key ? snapshot[key] : snapshot;
+  };
+
+  return useSyncExternalStore(router.subscribe, getSnapshot);
+}

package/.generated/preact/document.tsx

@@ -0,0 +1,198 @@
+/** @jsxImportSource preact */
+
+import { applicationEnvironment } from "../core/environment.ts";
+import { scrollPositions } from "../core/navigation.ts";
+import { serializeData } from "../core/serialize.ts";
+import { createElement, Fragment } from "preact";
+import type { ComponentProps } from "preact/compat";
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import { useNavigationSnapshot } from "./navigation-state.ts";
+import { useApplication } from "./root-context.ts";
+import { useSnapshot } from "./route-hooks.tsx";
+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,
+  });
+}
+
+export function Meta(): import("preact").JSX.Element {
+  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>;
+}
+
+export function Links(): import("preact").JSX.Element {
+  const { rootModule } = useApplication();
+
+  return (
+    <Fragment>
+      {rootModule?.links?.().map((props, index) => (
+        <link key={index} {...props} />
+      ))}
+    </Fragment>
+  );
+}
+
+export interface ScriptProps {
+  nonce?: string;
+}
+
+export function Scripts({ nonce }: ScriptProps): import("preact").JSX.Element {
+  const { root, router, entry } = useApplication();
+  // The bootstrap payload describes this document's initial SSR snapshot.
+  // Navigation and revalidation update the router, not the hydration script.
+  const [json] = useState(() => {
+    const current = router.getSnapshot();
+    const snapshot = {
+      ...current,
+      error: current.error && {
+        ...current.error,
+        name: current.error.name,
+        message: current.error.message,
+      },
+    };
+
+    return serializeData({ root, snapshot });
+  });
+
+  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" src={entry} {...(nonce && { nonce })} />}
+    </Fragment>
+  );
+}
+
+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("preact").JSX.Element {
+  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]);
+
+  if (typeof document === "undefined")
+    return <html {...attributes}>{children}</html>;
+
+  return <>{children}</>;
+}

package/{src/internal → .generated}/preact/fetcher.ts

@@ -3,20 +3,29 @@
  * @module
  */
 
-import type {
-  AnyDataFunction,
-  DataFunction,
-  DataOf,
-  FetcherSnapshot,
-  Result,
-  Route as RouteDefinition,
-  RouteModule,
-  SubmitOptions,
+import {
+  type AnyDataFunction,
+  type DataFunction,
+  type DataOf,
+  type FetcherSnapshot,
+  type Result,
+  type Route as RouteDefinition,
+  type RouteModule,
+  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 { ComponentType } from "./runtime.ts";
+import type { RouteData } from "./route-types.ts";
+
 import {
+  type ComponentType,
   createElement,
   useEffect,
   useMemo,
@@ -24,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;
 }
 
@@ -33,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. */
@@ -45,13 +54,11 @@ 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> {
-  const router = useRouter();
+  const router = useRouter<Router>();
   const path = route?.path;
   const fetcher = useMemo(() => {
     const store = router.createFetcher();
@@ -66,18 +73,31 @@ 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]);
 
   useEffect(() => fetcher.dispose, [fetcher]);
 
-  const state = useSyncExternalStore(
-    fetcher.subscribe,
-    fetcher.getSnapshot,
-    fetcher.getSnapshot,
-  );
+  const state = useSyncExternalStore(fetcher.subscribe, fetcher.getSnapshot);
 
   return { ...fetcher, ...state };
 }
+
+/** A fetcher with a bound form and inferred result data. */
+export type FetcherWithComponents<T> = TypedFetcher<RouteData<T>>;

package/.generated/preact/form.ts

@@ -0,0 +1,58 @@
+/**
+ * Preact components and typed data hooks. Import from @kasperrt/smolter/preact.
+ * @module
+ */
+
+import { type Fetcher, type Router } from "../core/index.ts";
+import { type RouteFormOptions, submitForm } from "../core/submission.ts";
+import { useRouter } from "./context.ts";
+
+import {
+  createElement,
+  type FormHTMLAttributes,
+  type ReactNode,
+} from "./runtime.ts";
+
+/** Form attributes with GET loader requests or POST, PUT, PATCH, and DELETE actions. */
+export interface FormProps
+  extends Omit<FormHTMLAttributes<HTMLFormElement>, "action" | "method">,
+    RouteFormOptions {}
+
+type FormSubmitEvent = Parameters<NonNullable<FormProps["onSubmit"]>>[0];
+
+interface InternalFormProps extends FormProps {
+  fetcher?: Fetcher;
+}
+
+/** Submit form data to a registered route without a document reload. */
+export function Form(options: InternalFormProps): ReactNode {
+  const {
+    action,
+    method,
+    fetcher,
+    onSubmit,
+    reloadDocument,
+    preventScrollReset,
+    replace,
+    ...props
+  } = options;
+  const router = useRouter<Router>();
+  const submit = (event: FormSubmitEvent) => {
+    onSubmit?.(event);
+
+    submitForm(
+      router,
+      event,
+      (event as SubmitEvent).submitter,
+      options,
+      fetcher,
+    );
+  };
+
+  return createElement("form", {
+    ...props,
+    action,
+    method: method === "get" ? "get" : "post",
+    onSubmit: submit,
+  });
+}

package/{src/internal → .generated}/preact/hooks.ts

@@ -5,68 +5,65 @@
 
 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;
-function useData(key: "data" | "actionData", route?: LoaderSource): unknown {
-  const path = (route as Route | undefined)?.path;
-
-  return useSnapshot((snapshot) => {
-    if (path !== undefined && path !== snapshot.path) return undefined;
-
-    return snapshot[key];
-  });
-}
+    ? 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 useData("data", route) 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 useData("actionData", route) as ActionData<T> | undefined;
+  return useSnapshot("actionData", (route as Route | undefined)?.path) as
+    | ActionData<T>
+    | undefined;
 }
 
 /** Read path parameters for the active route. */
-export function useParams(): Snapshot["params"] {
-  return useSnapshot((snapshot) => snapshot.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. */
 export function useLocation(): readonly [string, Router["navigate"]] {
   const router = useRouter();
-  const url = useSnapshot((snapshot) => snapshot.url);
+  const url = useSnapshot("url");
 
   return [url.replace(/^\w+:\/\/[^/]+/, ""), router.navigate];
 }
 
 /** Get the function that revalidates the current loader subject to shouldRevalidate. */
 export function useRevalidator(): Router["revalidate"] {
-  return useRouter().revalidate;
+  return useRouter<Router>().revalidate;
 }

package/.generated/preact/index.ts

@@ -0,0 +1,34 @@
+/** Framework components and typed data hooks. @module */
+export type * from "../core/index.ts";
+export {
+  createDataRouter,
+  createRouter,
+  defineRoute,
+} from "../core/index.ts";
+export type { ApplicationEnvironment } from "../core/environment.ts";
+export * from "../core/responses.ts";
+export type { Submission, SubmissionOptions } from "../core/submission.ts";
+export { readSubmission } from "../core/submission.ts";
+export { Await } from "./await.tsx";
+export {
+  RouterProvider,
+  type RouterProviderProps,
+  useRouter,
+} from "./context.ts";
+export * from "./fetcher.ts";
+export * from "./form.ts";
+export * from "./hooks.ts";
+export type { NavigateOptions } from "./navigation.tsx";
+export * from "./navigation.tsx";
+export {
+  useMatches,
+  useNavigation,
+  useOutletContext,
+  useRootData,
+  useRouteError,
+  useRouteLoaderData,
+  useSubmit,
+} from "./route-hooks.tsx";
+export * from "./route-types.ts";
+export { Outlet, RouterApplication } from "./router.tsx";
+export * from "./routes.ts";