Slight reorg of the RouteModule types

remix-run · Dec 16, 2024 · 6352d2e · 6352d2e
1 parent 3be44ec
commit 6352d2e
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 65 deletions.
diff --git a/.changeset/slimy-cows-begin.md b/.changeset/slimy-cows-begin.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Internal reorg of the `RouteModule` interfaces for deduplication and documentation purposes
diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
@@ -200,10 +200,13 @@ export type {
   ClientActionFunctionArgs,
   ClientLoaderFunction,
   ClientLoaderFunctionArgs,
+  HeadersArgs,
+  HeadersFunction,
   MetaArgs,
   MetaDescriptor,
   MetaFunction,
   LinksFunction,
+  ServerRouteModule,
 } from "./lib/dom/ssr/routeModules";
 export type { ServerRouterProps } from "./lib/dom/ssr/server";
 export { ServerRouter } from "./lib/dom/ssr/server";
@@ -251,11 +254,6 @@ export type {
   LinkDescriptor,
 } from "./lib/router/links";
 
-export type {
-  HeadersArgs,
-  HeadersFunction,
-} from "./lib/server-runtime/routeModules";
-
 export type { RequestHandler } from "./lib/server-runtime/server";
 
 export type {

diff --git a/packages/react-router/lib/dom/ssr/routeModules.ts b/packages/react-router/lib/dom/ssr/routeModules.ts
@@ -18,19 +18,84 @@ export interface RouteModules {
   [routeId: string]: RouteModule | undefined;
 }
 
+/**
+ * The shape of a route module shipped to the client
+ */
 export interface RouteModule {
+  /**
+   * Action function called only in the browser.  Route client loaders provide
+   * data to route components in addition to, or in place of, route loaders.
+   */
   clientAction?: ClientActionFunction;
+  /**
+   * Like route actions but only called in the browser.
+   */
   clientLoader?: ClientLoaderFunction;
+  /**
+   * When other route module APIs throw, the route module `ErrorBoundary` will
+   * render instead of the route component.
+   */
   ErrorBoundary?: ErrorBoundaryComponent;
+  /**
+   * On initial page load, the route component renders only after the client
+   * loader is finished. If exported, a `HydrateFallback` can render
+   * immediately in place of the route component.
+   */
   HydrateFallback?: HydrateFallbackComponent;
+  /**
+   * The `Layout` export is only applicable to the root route.  Because the root
+   * route manages the document for all routes, it supports an additional optional
+   * `Layout` export that will be wrapped around the rendered UI, which may come
+   * from the default `Component` export, the `ErrorBoundary`, or the `HydrateFallback`
+   */
   Layout?: LayoutComponent;
+  /**
+   * Defines the component that will render when the route matches.
+   */
   default: RouteComponent;
+  /**
+   * Route handle allows apps to add anything to a route match in `useMatches`
+   * to create abstractions (like breadcrumbs, etc.).
+   */
   handle?: RouteHandle;
+  /**
+   * Route links define [`<link>` element][link-element]s to be rendered in the
+   * document `<head>`.
+   */
   links?: LinksFunction;
+  /**
+   * Route meta defines meta tags to be rendered in the `<head>` of the document.
+   */
   meta?: MetaFunction;
+  /**
+   * By default, all routes are revalidated after actions. This function allows
+   * a route to opt-out of revalidation for actions that don't affect its data.
+   */
   shouldRevalidate?: ShouldRevalidateFunction;
 }
 
+/**
+ * The shape of a route module file for your application
+ */
+export interface ServerRouteModule extends RouteModule {
+  /**
+   * Route actions allow server-side data mutations with automatic revalidation
+   * of all loader data on the page when called from `<Form>`, `useFetcher`,
+   * and `useSubmit`.
+   * */
+  action?: ActionFunction;
+  /**
+   * Route headers define HTTP headers to be sent with the response when server rendering.
+   */
+  headers?: HeadersFunction | { [name: string]: string };
+  /**
+   * Route loaders provide data to route components before they are rendered.
+   * They are only called on the server when server rendering or during the
+   * build with pre-rendering.
+   */
+  loader?: LoaderFunction;
+}
+
 /**
  * A function that handles data mutations for a route on the client
  */
@@ -66,6 +131,24 @@ export type ClientLoaderFunctionArgs = LoaderFunctionArgs<undefined> & {
  */
 export type ErrorBoundaryComponent = ComponentType;
 
+/**
+ * Parameters passed to the [`headers`]{@link HeadersFunction} function
+ */
+export type HeadersArgs = {
+  loaderHeaders: Headers;
+  parentHeaders: Headers;
+  actionHeaders: Headers;
+  errorHeaders: Headers | undefined;
+};
+
+/**
+ * A function that returns HTTP headers to be used for a route. These headers
+ * will be merged with (and take precedence over) headers from parent routes.
+ */
+export interface HeadersFunction {
+  (args: HeadersArgs): Headers | HeadersInit;
+}
+
 /**
  * `<Route HydrateFallback>` component to render on initial loads
  * when client loaders are present

diff --git a/packages/react-router/lib/server-runtime/entry.ts b/packages/react-router/lib/server-runtime/entry.ts
@@ -1,14 +1,14 @@
+import type { RouteModules } from "../dom/ssr/routeModules";
 import type { ServerRouteManifest } from "./routes";
-import type { RouteModules, EntryRouteModule } from "./routeModules";
 
 export function createEntryRouteModules(
   manifest: ServerRouteManifest
-): RouteModules<EntryRouteModule> {
+): RouteModules {
   return Object.keys(manifest).reduce((memo, routeId) => {
     let route = manifest[routeId];
     if (route) {
       memo[routeId] = route.module;
     }
     return memo;
-  }, {} as RouteModules<EntryRouteModule>);
+  }, {} as RouteModules);
 }
diff --git a/packages/react-router/lib/server-runtime/routeModules.ts b/packages/react-router/lib/server-runtime/routeModules.ts
diff --git a/packages/react-router/lib/server-runtime/routes.ts b/packages/react-router/lib/server-runtime/routes.ts
@@ -6,8 +6,8 @@ import type {
 } from "../router/utils";
 import { callRouteHandler } from "./data";
 import type { FutureConfig } from "../dom/ssr/entry";
+import type { ServerRouteModule } from "../dom/ssr/routeModules";
 import type { Route } from "../dom/ssr/routes";
-import type { ServerRouteModule } from "./routeModules";
 import type {
   SingleFetchResult,
   SingleFetchResults,