feat!: align types with React Router (#7319)

Co-authored-by: Michaël De Boey <[email protected]>
remix-run · Sep 6, 2023 · b1dcc25 · b1dcc25
1 parent 27bea3f
commit b1dcc25
Show file tree

Hide file tree

Showing 20 changed files with 106 additions and 135 deletions.
diff --git a/.changeset/align-rr-types.md b/.changeset/align-rr-types.md
@@ -0,0 +1,20 @@
+---
+"@remix-run/cloudflare": major
+"@remix-run/deno": major
+"@remix-run/node": major
+"@remix-run/react": 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`
+* Rename the `useMatches()` return type from `RouteMatch` to `UIMatch`
+* Rename `LoaderArgs`/`ActionArgs` to `LoaderFunctionArgs`/`ActionFunctionArgs` and add a generic to accept a `context` type
diff --git a/.github/workflows/test-pr-ubuntu.yml b/.github/workflows/test-pr-ubuntu.yml
@@ -26,13 +26,13 @@ jobs:
     uses: ./.github/workflows/shared-test-unit.yml
     with:
       os: "ubuntu-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
 
   integration-chromium:
     name: "👀 Integration Test"
     if: github.repository == 'remix-run/remix'
     uses: ./.github/workflows/shared-test-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
       browser: '["chromium"]'
diff --git a/.github/workflows/test-pr-windows-macos.yml b/.github/workflows/test-pr-windows-macos.yml
@@ -20,15 +20,15 @@ jobs:
     uses: ./.github/workflows/shared-test-unit.yml
     with:
       os: "windows-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
 
   integration-firefox:
     name: "👀 Integration Test"
     if: github.repository == 'remix-run/remix'
     uses: ./.github/workflows/shared-test-integration.yml
     with:
       os: "ubuntu-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
       browser: '["firefox"]'
 
   integration-msedge:
@@ -37,7 +37,7 @@ jobs:
     uses: ./.github/workflows/shared-test-integration.yml
     with:
       os: "windows-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
       browser: '["msedge"]'
 
   integration-webkit:
@@ -46,5 +46,5 @@ jobs:
     uses: ./.github/workflows/shared-test-integration.yml
     with:
       os: "macos-latest"
-      node_version: '["latest"]'
+      node_version: '["20.5.1"]'
       browser: '["webkit"]'
diff --git a/packages/remix-cloudflare/index.ts b/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,

diff --git a/packages/remix-deno/index.ts b/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,

diff --git a/packages/remix-node/index.ts b/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,

diff --git a/packages/remix-react/components.tsx b/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 type UIMatch<D = AppData> = 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/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 = AppData>(): FetcherWithComponents<
   SerializeFrom<TData>
 > {
   return useFetcherRR();

diff --git a/packages/remix-react/data.ts b/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;

diff --git a/packages/remix-react/index.tsx b/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,

diff --git a/packages/remix-react/package.json b/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.2",
     "@remix-run/server-runtime": "2.0.0-pre.7",
-    "react-router-dom": "6.16.0-pre.0"
+    "react-router-dom": "6.16.0-pre.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",

diff --git a/packages/remix-react/routeModules.ts b/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,

diff --git a/packages/remix-server-runtime/data.ts b/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,

diff --git a/packages/remix-server-runtime/index.ts b/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,

diff --git a/packages/remix-server-runtime/package.json b/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.2",
     "@types/cookie": "^0.4.1",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",

diff --git a/packages/remix-server-runtime/reexport.ts b/packages/remix-server-runtime/reexport.ts
@@ -37,14 +37,14 @@ export type {
 export type { TypedDeferredData, TypedResponse } from "./responses";
 
 export type {
-  ActionArgs,
   ActionFunction,
+  ActionFunctionArgs,
   DataFunctionArgs,
   HeadersArgs,
   HeadersFunction,
   LinksFunction,
-  LoaderArgs,
   LoaderFunction,
+  LoaderFunctionArgs,
   RouteHandle,
   ServerRuntimeMetaArgs,
   ServerRuntimeMetaDescriptor,