@kasperrt/smolter 0.0.1 → 0.3.0

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

@@ -5,8 +5,13 @@
 
 import type { Route as RouteDefinition, RouteModule } from "../core/index.ts";
 import { useRouter, useSnapshot } from "./context.ts";
-import type { ComponentType, ReactNode } from "./runtime.ts";
-import { createElement, useMemo } from "./runtime.ts";
+
+import {
+  type ComponentType,
+  createElement,
+  type ReactNode,
+  useMemo,
+} from "./runtime.ts";
 
 /** Renderable route module with optional loading and error components. */
 export interface ViewModule extends RouteModule {
@@ -25,17 +30,20 @@ export interface RoutesProps {
   fallback?: ReactNode;
 }
 /** Renders the first matching registered module. */
-export function Routes({ fallback = null }: RoutesProps): ReactNode {
+export function Routes({ fallback }: RoutesProps): ReactNode {
   const router = useRouter();
-  const state = useSnapshot((snapshot) => snapshot);
+  const state = useSnapshot();
   const module = router.routes.find((route) => route.path === state.path) as
     | RouteDefinition<ViewModule>
     | undefined;
-  const component = state.error
-    ? module?.ErrorBoundary
-    : state.state === "loading" && !state.loaded
-      ? module?.HydrateFallback
-      : module?.default;
+  const component =
+    module?.[
+      state.error
+        ? "ErrorBoundary"
+        : state.state === "loading" && !state.loaded
+          ? "HydrateFallback"
+          : "default"
+    ];
 
   const element = useMemo(
     () =>

package/.generated/react/context.ts

@@ -0,0 +1,59 @@
+/**
+ * React components and typed data hooks. Import from @kasperrt/smolter/react.
+ * @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.Provider, { 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, getSnapshot);
+}

package/.generated/react/data.ts

@@ -0,0 +1,25 @@
+/** Resource subscriptions independent of URL navigation. @module */
+export type {
+  ActionFunctionArgs as ResourceActionArgs,
+  DataResult as ResourceResult,
+  LoaderFunctionArgs as ResourceLoaderArgs,
+  ShouldRevalidateFunctionArgs as ResourceRevalidationArgs,
+} from "../core/resource-types.ts";
+export {
+  createResourceRouter,
+  ResourceRouter,
+} from "../core/resources.ts";
+export type { ResourceRouteModule } from "./resources/components.tsx";
+export {
+  Form as ResourceForm,
+  Route as Resource,
+  RouterProvider as ResourceProvider,
+  useActionData as useResourceActionData,
+  useFetcher as useResourceFetcher,
+  useLoaderData as useResourceData,
+  useNavigation as useResourceNavigation,
+  useRevalidator as useResourceRevalidator,
+  useRouteLoaderData,
+  useRouter as useResourceRouter,
+  useSubmit as useResourceSubmit,
+} from "./resources/components.tsx";

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

@@ -3,20 +3,22 @@
  * @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 { useRouter } from "./context.ts";
 import { Form, type FormProps } from "./form.ts";
-import type { ComponentType } from "./runtime.ts";
+
 import {
+  type ComponentType,
   createElement,
   useEffect,
   useMemo,
@@ -51,7 +53,7 @@ export function useFetcher<
 
 /** 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();

package/.generated/react/form.ts

@@ -0,0 +1,58 @@
+/**
+ * React components and typed data hooks. Import from @kasperrt/smolter/react.
+ * @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.nativeEvent as SubmitEvent).submitter,
+      options,
+      fetcher,
+    );
+  };
+
+  return createElement("form", {
+    ...props,
+    action,
+    method: method === "get" ? "get" : "post",
+    onSubmit: submit,
+  });
+}

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

@@ -30,43 +30,38 @@ export type ActionData<T> = T extends AnyDataFunction
   : 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];
-  });
-}
 /** 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;
+  return useSnapshot("data", (route as Route | undefined)?.path) as
+    | LoaderData<T>
+    | undefined;
 }
 
 /** Read the last page action result, optionally inferring its type from a route. */
 export function useActionData<T extends LoaderSource = RouteModule>(
   route?: T,
 ): 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);
+  return useSnapshot("params");
 }
 
 /** 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/{src/internal/preact → .generated/react}/index.ts

@@ -1,6 +1,10 @@
 /** Framework components and typed data hooks. @module */
 export type * from "../core/index.ts";
-export { createRouter, defineRoute } from "../core/index.ts";
+export {
+  createDataRouter,
+  createRouter,
+  defineRoute,
+} from "../core/index.ts";
 export {
   RouterProvider,
   type RouterProviderProps,

package/{src/internal → .generated}/react/link.ts

@@ -3,10 +3,15 @@
  * @module
  */
 
-import { internalURL } from "../core/index.ts";
+import { internalURL, navigationClick } from "../core/url.ts";
 import { useRouter } from "./context.ts";
-import type { AnchorHTMLAttributes, MouseEvent, ReactNode } from "./runtime.ts";
-import { createElement } from "./runtime.ts";
+
+import {
+  type AnchorHTMLAttributes,
+  createElement,
+  type MouseEvent,
+  type ReactNode,
+} from "./runtime.ts";
 
 /** Anchor attributes with internal navigation and optional history replacement. */
 export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
@@ -15,31 +20,18 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 /** Render an anchor that handles internal navigation and preserves native modified clicks. */
-export function Link({
-  href,
-  replace,
-  onClick,
-  ...props
-}: LinkProps): ReactNode {
+export function Link(options: LinkProps): ReactNode {
+  const { href, replace, onClick, ...props } = options;
   const router = useRouter();
   const click = (event: MouseEvent<HTMLAnchorElement>) => {
     onClick?.(event);
 
-    if (
-      event.defaultPrevented ||
-      event.button ||
-      event.metaKey ||
-      event.ctrlKey ||
-      event.altKey ||
-      event.shiftKey ||
-      props.download !== undefined ||
-      (props.target && props.target !== "_self")
-    )
-      return;
+    if (!navigationClick(event, event.currentTarget)) return;
 
     if (!internalURL(router.getSnapshot().url, href)) return;
+
     event.preventDefault();
-    void router.navigate(href, { replace });
+    void router.navigate(href, options);
   };
 
   return createElement("a", { ...props, href, onClick: click });