Update Remix types to use unknown instead of any

remix-run · brophdawg11 · Sep 6, 2023 · Aug 31, 2023 · Aug 31, 2023 · Sep 5, 2023
commit a389bafe95668f9788b4965b0a1a50299d58efd6
diff --git a/.changeset/align-rr-types.md b/.changeset/align-rr-types.md
@@ -5,8 +5,16 @@
 "@remix-run/server-runtime": major
 ---
 
- Remove/Align Remix types with those use din React Router
+Remove/align Remix types with those used in React Router
 
-* Remove Remix definitions of `LoaderFunction`/`ActionFunction` and re-export from React Router
-* Remove `LoaderArgs`/`ActionArgs` and re-export `LoaderFunctionArgs`/`ActionFunctionArgs`  from React Router
-* Change `AppLoadContext` from a keyed object in Remix to the `any` used in React Router to permit users to return anything from `getLoadContext`
+* 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`
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 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();

diff --git a/packages/remix-react/data.ts b/packages/remix-react/data.ts
@@ -6,7 +6,7 @@ import {
 /**
  * Data for a route that was returned from a `loader()`.
  */
-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
@@ -54,9 +54,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.1",
     "@remix-run/server-runtime": "2.0.0-pre.4",
-    "react-router-dom": "6.16.0-pre.0"
+    "react-router-dom": "6.16.0-pre.1"
   },
   "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
@@ -13,12 +13,12 @@ import type { DataFunctionArgs } from "./routeModules";
  * An unknown type for route loaders and actions provided by the server's
  * `getLoadContext()` function.
  */
-export type AppLoadContext = any;
+export type AppLoadContext = unknown;
 
 /**
  * Data for a route that was returned from a `loader()`.
  */
-export type AppData = any;
+export type AppData = unknown;
 
 export async function callRouteActionRR({
   loadContext,

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.1",
     "@types/cookie": "^0.4.1",
     "@web3-storage/multipart-parser": "^1.0.0",
     "cookie": "^0.4.1",

diff --git a/packages/remix-server-runtime/routeModules.ts b/packages/remix-server-runtime/routeModules.ts
@@ -1,9 +1,9 @@
 import type {
-  ActionFunction,
-  ActionFunctionArgs,
+  ActionFunction as RRActionFunction,
+  ActionFunctionArgs as RRActionFunctionArgs,
   AgnosticRouteMatch,
-  LoaderFunction,
-  LoaderFunctionArgs,
+  LoaderFunction as RRLoaderFunction,
+  LoaderFunctionArgs as RRLoaderFunctionArgs,
   Location,
   Params,
 } from "@remix-run/router";
@@ -16,6 +16,10 @@ export interface RouteModules<RouteModule> {
   [routeId: string]: RouteModule;
 }
 
+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 = {
@@ -118,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;
@@ -173,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

diff --git a/packages/remix-testing/package.json b/packages/remix-testing/package.json
@@ -18,8 +18,8 @@
   "dependencies": {
     "@remix-run/node": "2.0.0-pre.4",
     "@remix-run/react": "2.0.0-pre.4",
-    "@remix-run/router": "1.9.0-pre.0",
-    "react-router-dom": "6.16.0-pre.0"
+    "@remix-run/router": "1.9.0-pre.1",
+    "react-router-dom": "6.16.0-pre.1"
   },
   "devDependencies": {
     "@types/node": "^18.17.1",

diff --git a/yarn.lock b/yarn.lock
@@ -2132,10 +2132,10 @@
     "@changesets/types" "^5.0.0"
     dotenv "^8.1.0"
 
-"@remix-run/router@1.9.0-pre.0":
-  version "1.9.0-pre.0"
-  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0-pre.0.tgz#a91357c467c7f171096482241729446dde23a499"
-  integrity sha512-E0r4uaA2kS3Ks02KLXC2XD7vSlTMQmvfgb7rhaA1ni0O73GHMP38qsR3IjFvlnWNZWhOyzv2rHBtaYBZz2+I1w==
+"@remix-run/router@1.9.0-pre.1":
+  version "1.9.0-pre.1"
+  resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0-pre.1.tgz#f9d2d60bf0a65d9a29cd78eac90aa556fb40b00b"
+  integrity sha512-uRNAn+/4nyvoRIXjych6RweUgFua3fXmUa1lTRxReVaRkux33R9aCqfgapQP5RgduAq4K06JRaNLnKBYmRW/0A==
 
 "@remix-run/web-blob@^3.0.5":
   version "3.0.5"
@@ -10128,20 +10128,20 @@ react-refresh@^0.14.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@6.16.0-pre.0:
-  version "6.16.0-pre.0"
-  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0-pre.0.tgz#29b1f11c6352c64a835379724caf6d3884fab819"
-  integrity sha512-2SiKRx2hxtk97B0eOtX8Oj6Ei8JjTKd02NQRbrHWYi20oJtOOVOYeXIcwq/kDinqkGAKjp2+5q7hDoc35YNJCA==
+react-router-dom@6.16.0-pre.1:
+  version "6.16.0-pre.1"
+  resolved "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.16.0-pre.1.tgz#0c7e5e8a3192603b12c754ba47be2c8301ca43c7"
+  integrity sha512-W6rrNTPaKM/4QTBYE+PElGiHaYo0Kxr+69rbUg6Hs5HzCQYfhH02tree5ZP8pLRGmMAc1KfK31RiBkYwSpXRkw==
   dependencies:
-    "@remix-run/router" "1.9.0-pre.0"
-    react-router "6.16.0-pre.0"
+    "@remix-run/router" "1.9.0-pre.1"
+    react-router "6.16.0-pre.1"
 
-react-router@6.16.0-pre.0:
-  version "6.16.0-pre.0"
-  resolved "https://registry.npmjs.org/react-router/-/react-router-6.16.0-pre.0.tgz#85ed4b71e01185349e8fb9e822676d2057995759"
-  integrity sha512-dvaErR6mV3UVZV9rzAOKaraG6s+Qkl78FnkVTC4MI83ZqKA2jqpF+aIxN8S7JY2Fhw1EcfB5HtvKRlyVQpBt7A==
+react-router@6.16.0-pre.1:
+  version "6.16.0-pre.1"
+  resolved "https://registry.npmjs.org/react-router/-/react-router-6.16.0-pre.1.tgz#3af6fe265a6d1fecf9321a4c2f60986a5f5137c0"
+  integrity sha512-kFDaSkiedeNhaq6OgDwilUzppxzeIFmmbv2WQ1YqxD6yk74n20KXGIYGdiipiMr8Qr/5cZ/j9ISj720zeFQinQ==
   dependencies:
-    "@remix-run/router" "1.9.0-pre.0"
+    "@remix-run/router" "1.9.0-pre.1"
 
 react@^18.2.0:
   version "18.2.0"