Type inference

packages/react-router/lib/hooks.tsx

@@ -46,6 +46,7 @@ import {
   RouteContext,
   RouteErrorContext,
 } from "./context";
+import type { Action, Data, Loader } from "./serialize";
 
 /**
  * Returns the full href for the given "to" value. This is useful for building
@@ -925,15 +926,15 @@ export function useMatches(): UIMatch[] {
 /**
  * Returns the loader data for the nearest ancestor Route loader
  */
-export function useLoaderData(): unknown {
+export function useLoaderData<T extends Loader>(): Data<T> {
   let state = useDataRouterState(DataRouterStateHook.UseLoaderData);
   let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);
 
   if (state.errors && state.errors[routeId] != null) {
     console.error(
       `You cannot \`useLoaderData\` in an errorElement (routeId: ${routeId})`
     );
-    return undefined;
+    return undefined as any;
   }
   return state.loaderData[routeId];
 }
@@ -949,7 +950,7 @@ export function useRouteLoaderData(routeId: string): unknown {
 /**
  * Returns the action data for the nearest ancestor Route action
  */
-export function useActionData(): unknown {
+export function useActionData<T extends Action>(): Data<T> {
   let state = useDataRouterState(DataRouterStateHook.UseActionData);
   let routeId = useCurrentRouteId(DataRouterStateHook.UseLoaderData);
   return state.actionData ? state.actionData[routeId] : undefined;

packages/react-router/lib/serialize.ts

@@ -0,0 +1,53 @@
+type Serializable =
+  | undefined
+  | null
+  | boolean
+  | string
+  | symbol
+  | number
+  | Array<Serializable>
+  | { [key: PropertyKey]: Serializable }
+  | bigint
+  | Date
+  | URL
+  | RegExp
+  | Error
+  | Map<Serializable, Serializable>
+  | Set<Serializable>
+  | Promise<Serializable>;
+
+export type Params<Key extends string = string> = {
+  readonly [key in Key]: string | undefined;
+};
+
+// TODO: rename to `Context` or `DataContext` or `AppContext`?
+interface AppLoadContext {}
+
+type MaybePromise<T> = T | Promise<T>;
+
+type DataFunction = (
+  args: {
+    request: Request;
+    params: Params;
+    context?: AppLoadContext;
+  },
+  handlerCtx?: unknown
+) => MaybePromise<Response | Serializable | null>;
+
+// prettier-ignore
+export type Data<T extends DataFunction> =
+  Awaited<ReturnType<T>> extends Response ? never :
+  Awaited<ReturnType<T>>
+
+export type Loader = DataFunction & { hydrate?: boolean };
+export type Action = DataFunction;
+
+export const defineLoader = <T extends Loader>(
+  loader: T,
+  options: { hydrate?: boolean } = {}
+): T => {
+  loader.hydrate = options.hydrate;
+  return loader;
+};
+
+export const defineAction = <T extends Action>(action: T): T => action;