feat!: align types with React Router

.changeset/align-rr-types.md

@@ -0,0 +1,20 @@
+---
+"@remix-run/cloudflare": major
+"@remix-run/deno": major
+"@remix-run/node": major
+"@remix-run/server-runtime": major
+---
+
+Remove/align Remix types with those used in React Router
+
+* Change exposed `any` types to `unknown`
+  * `AppData`
+  * `useLocation.state`
+  * `useMatches()[i].data`
+  * `useFetcher().data`
+  * `MetaMatch.handle`
+* `useMatches()[i].handle` type changed from `{ [k: string]: any }` to `unknown`
+* `AppLoadContext` type changed from `{ [k: string]: unknown }` to `unknown`
+* Make `LoaderFunctionArgs`/`ActionFunctionArgs` generic to accept a `context` type
+* Rename `LoaderFunction`/`ActionFunction` to `LoaderFunctionArgs`/`ActionFunctionArgs`
+* Rename the `useMatches()` return type from `RouteMatch` to `UIMatch`

packages/remix-cloudflare/index.ts

@@ -27,8 +27,8 @@ export {
 } from "@remix-run/server-runtime";
 
 export type {
-  ActionArgs,
   ActionFunction,
+  ActionFunctionArgs,
   AppData,
   AppLoadContext,
   Cookie,
@@ -47,8 +47,8 @@ export type {
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
-  LoaderArgs,
   LoaderFunction,
+  LoaderFunctionArgs,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
   HandleErrorFunction,

packages/remix-deno/index.ts

@@ -30,8 +30,8 @@ export {
 } from "@remix-run/server-runtime";
 
 export type {
-  ActionArgs,
   ActionFunction,
+  ActionFunctionArgs,
   AppData,
   AppLoadContext,
   Cookie,
@@ -51,8 +51,8 @@ export type {
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
-  LoaderArgs,
   LoaderFunction,
+  LoaderFunctionArgs,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
   PageLinkDescriptor,

packages/remix-node/index.ts

@@ -47,8 +47,8 @@ export {
 } from "@remix-run/server-runtime";
 
 export type {
-  ActionArgs,
   ActionFunction,
+  ActionFunctionArgs,
   AppData,
   AppLoadContext,
   Cookie,
@@ -67,8 +67,8 @@ export type {
   JsonFunction,
   LinkDescriptor,
   LinksFunction,
-  LoaderArgs,
   LoaderFunction,
+  LoaderFunctionArgs,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
   HandleErrorFunction,

packages/remix-react/components.tsx

@@ -8,12 +8,12 @@ import type {
   AgnosticDataRouteMatch,
   UNSAFE_DeferredData as DeferredData,
   TrackedPromise,
+  UIMatch as UIMatchRR,
 } from "@remix-run/router";
 import type {
   FetcherWithComponents,
   LinkProps,
   NavLinkProps,
-  Params,
 } from "react-router-dom";
 import {
   Await as AwaitRR,
@@ -26,6 +26,7 @@ import {
   useActionData as useActionDataRR,
   useFetcher as useFetcherRR,
   useLoaderData as useLoaderDataRR,
+  useMatches as useMatchesRR,
   useRouteLoaderData as useRouteLoaderDataRR,
   useLocation,
   useNavigation,
@@ -975,32 +976,16 @@ function dedupe(array: any[]) {
   return [...new Set(array)];
 }
 
-// TODO: Can this be re-exported from RR?
-export interface RouteMatch {
-  /**
-   * The id of the matched route
-   */
-  id: string;
-  /**
-   * The pathname of the matched route
-   */
-  pathname: string;
-  /**
-   * The dynamic parameters of the matched route
-   *
-   * @see https://remix.run/file-conventions/routes-files#dynamic-route-parameters
-   */
-  params: Params<string>;
-  /**
-   * Any route data associated with the matched route
-   */
-  data: any;
-  /**
-   * The exported `handle` object of the matched route.
-   *
-   * @see https://remix.run/route/handle
-   */
-  handle: undefined | { [key: string]: any };
+export interface UIMatch<D = AppData> extends UIMatchRR<SerializeFrom<D>> {}
+
+/**
+ * Returns the active route matches, useful for accessing loaderData for
+ * parent/child routes or the route "handle" property
+ *
+ * @see https://remix.run/docs/hooks/use-matches
+ */
+export function useMatches(): UIMatch[] {
+  return useMatchesRR() as UIMatch[];
 }
 
 /**
@@ -1038,7 +1023,7 @@ export function useActionData<T = AppData>(): SerializeFrom<T> | undefined {
  *
  * @see https://remix.run/hooks/use-fetcher
  */
-export function useFetcher<TData = any>(): FetcherWithComponents<
+export function useFetcher<TData = unknown>(): FetcherWithComponents<
   SerializeFrom<TData>
 > {
   return useFetcherRR();

packages/remix-react/data.ts

@@ -5,10 +5,8 @@ import {
 
 /**
  * Data for a route that was returned from a `loader()`.
- *
- * Note: This moves to unknown in ReactRouter and eventually likely in Remix
  */
-export type AppData = any;
+export type AppData = unknown;
 
 export function isCatchResponse(response: Response): boolean {
   return response.headers.get("X-Remix-Catch") != null;

packages/remix-react/index.tsx

@@ -55,9 +55,9 @@ export {
 
 export type {
   AwaitProps,
-  RouteMatch,
   RemixNavLinkProps as NavLinkProps,
   RemixLinkProps as LinkProps,
+  UIMatch,
 } from "./components";
 export {
   Await,

packages/remix-react/package.json

@@ -16,9 +16,9 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.9.0-pre.0",
+    "@remix-run/router": "1.9.0-pre.1",
     "@remix-run/server-runtime": "2.0.0-pre.7",
-    "react-router-dom": "6.16.0-pre.0"
+    "react-router-dom": "6.16.0-pre.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",

packages/remix-react/routeModules.ts

@@ -48,7 +48,7 @@ export interface MetaMatch<
   id: RouteId;
   pathname: DataRouteMatch["pathname"];
   data: Loader extends LoaderFunction ? SerializeFrom<Loader> : unknown;
-  handle?: unknown;
+  handle?: RouteHandle;
   params: DataRouteMatch["params"];
   meta: MetaDescriptor[];
   error?: unknown;
@@ -121,7 +121,7 @@ export type RouteComponent = ComponentType<{}>;
  *
  * @see https://remix.run/route/handle
  */
-export type RouteHandle = any;
+export type RouteHandle = unknown;
 
 export async function loadRouteModule(
   route: EntryRoute,

packages/remix-server-runtime/data.ts

@@ -1,30 +1,24 @@
+import type { ActionFunction, LoaderFunction } from "@remix-run/router";
+
 import {
   redirect,
   json,
   isDeferredData,
   isResponse,
   isRedirectStatusCode,
 } from "./responses";
-import type {
-  ActionFunction,
-  DataFunctionArgs,
-  LoaderFunction,
-} from "./routeModules";
+import type { DataFunctionArgs } from "./routeModules";
 
 /**
- * An object of unknown type for route loaders and actions provided by the
- * server's `getLoadContext()` function.
+ * An unknown type for route loaders and actions provided by the server's
+ * `getLoadContext()` function.
  */
-export interface AppLoadContext {
-  [key: string]: unknown;
-}
+export type AppLoadContext = unknown;
 
 /**
  * Data for a route that was returned from a `loader()`.
- *
- * Note: This moves to unknown in ReactRouter and eventually likely in Remix
  */
-export type AppData = any;
+export type AppData = unknown;
 
 export async function callRouteActionRR({
   loadContext,

packages/remix-server-runtime/index.ts

@@ -33,8 +33,8 @@ export type {
 
 // Remix server runtime packages should re-export these types
 export type {
-  ActionArgs,
   ActionFunction,
+  ActionFunctionArgs,
   AppData,
   AppLoadContext,
   Cookie,
@@ -53,8 +53,8 @@ export type {
   HtmlLinkDescriptor,
   LinkDescriptor,
   LinksFunction,
-  LoaderArgs,
   LoaderFunction,
+  LoaderFunctionArgs,
   MemoryUploadHandlerFilterArgs,
   MemoryUploadHandlerOptions,
   HandleErrorFunction,

packages/remix-server-runtime/package.json

@@ -16,7 +16,7 @@
   "typings": "dist/index.d.ts",
   "module": "dist/esm/index.js",
   "dependencies": {
-    "@remix-run/router": "1.9.0-pre.0",
+    "@remix-run/router": "1.9.0-pre.1",
     "@types/cookie": "^0.4.1",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",

packages/remix-server-runtime/reexport.ts

@@ -1,4 +1,10 @@
-export type { ErrorResponse } from "@remix-run/router";
+export type {
+  ActionFunction,
+  ActionFunctionArgs,
+  ErrorResponse,
+  LoaderFunction,
+  LoaderFunctionArgs,
+} from "@remix-run/router";
 
 export type {
   HandleDataRequestFunction,
@@ -37,14 +43,10 @@ export type {
 export type { TypedDeferredData, TypedResponse } from "./responses";
 
 export type {
-  ActionArgs,
-  ActionFunction,
   DataFunctionArgs,
   HeadersArgs,
   HeadersFunction,
   LinksFunction,
-  LoaderArgs,
-  LoaderFunction,
   RouteHandle,
   ServerRuntimeMetaArgs,
   ServerRuntimeMetaDescriptor,

packages/remix-server-runtime/routeModules.ts

@@ -1,41 +1,26 @@
-import type { AgnosticRouteMatch, Location, Params } from "@remix-run/router";
-
-import type { AppLoadContext, AppData } from "./data";
+import type {
+  ActionFunction as RRActionFunction,
+  ActionFunctionArgs as RRActionFunctionArgs,
+  AgnosticRouteMatch,
+  LoaderFunction as RRLoaderFunction,
+  LoaderFunctionArgs as RRLoaderFunctionArgs,
+  Location,
+  Params,
+} from "@remix-run/router";
+
+import type { AppData } from "./data";
 import type { LinkDescriptor } from "./links";
 import type { SerializeFrom } from "./serialize";
 
 export interface RouteModules<RouteModule> {
   [routeId: string]: RouteModule;
 }
 
-/**
- * The arguments passed to ActionFunction and LoaderFunction.
- *
- * Note this is almost identical to React Router's version but over there the
- * context is optional since it's only there during static handler invocations.
- * Keeping Remix's own definition for now so it can differentiate between
- * client/server
- */
-export interface DataFunctionArgs {
-  request: Request;
-  context: AppLoadContext;
-  params: Params;
-}
-
-export type LoaderArgs = DataFunctionArgs;
-
-export type ActionArgs = DataFunctionArgs;
-
-/**
- * A function that handles data mutations for a route.
- */
-export interface ActionFunction {
-  (args: DataFunctionArgs):
-    | Promise<Response>
-    | Response
-    | Promise<AppData>
-    | AppData;
-}
+export type ActionFunctionArgs = RRActionFunctionArgs<unknown>;
+export type ActionFunction = RRActionFunction<unknown>;
+export type LoaderFunctionArgs = RRLoaderFunctionArgs<unknown>;
+export type LoaderFunction = RRLoaderFunction<unknown>;
+export type DataFunctionArgs = LoaderFunctionArgs | ActionFunctionArgs;
 
 export type HeadersArgs = {
   loaderHeaders: Headers;
@@ -60,17 +45,6 @@ export interface LinksFunction {
   (): LinkDescriptor[];
 }
 
-/**
- * A function that loads data for a route.
- */
-export interface LoaderFunction {
-  (args: DataFunctionArgs):
-    | Promise<Response>
-    | Response
-    | Promise<AppData>
-    | AppData;
-}
-
 /**
  * A function that returns an array of data objects to use for rendering
  * metadata HTML tags in a route. These tags are not rendered on descendant
@@ -148,7 +122,7 @@ interface ServerRuntimeMetaMatch<
   id: RouteId;
   pathname: AgnosticRouteMatch["pathname"];
   data: Loader extends LoaderFunction ? SerializeFrom<Loader> : unknown;
-  handle?: unknown;
+  handle?: RouteHandle;
   params: AgnosticRouteMatch["params"];
   meta: ServerRuntimeMetaDescriptor[];
   error?: unknown;
@@ -203,7 +177,7 @@ type LdJsonValue = LdJsonPrimitive | LdJsonObject | LdJsonArray;
 /**
  * An arbitrary object that is associated with a route.
  */
-export type RouteHandle = any;
+export type RouteHandle = unknown;
 
 export interface EntryRouteModule {
   ErrorBoundary?: any; // Weakly typed because server-runtime is not React-aware