Fix types for PatchRoutesOnNavigationFunction (#11967)

Author: brophdawg11

.changeset/silly-walls-sit.md

@@ -0,0 +1,8 @@
+---
+"react-router-dom": patch
+"react-router": patch
+"@remix-run/router": patch
+---
+
+- Fix types for `RouteObject` within `PatchRoutesOnNavigationFunction`'s `patch` method so it doesn't expect agnostic route objects passed to `patch`
+- Add new `PatchRoutesOnNavigationFunctionArgs` type for convenience

packages/react-router-dom/index.tsx

@@ -132,6 +132,8 @@ export type {
   OutletProps,
   Params,
   ParamParseKey,
+  PatchRoutesOnNavigationFunction,
+  PatchRoutesOnNavigationFunctionArgs,
   Path,
   PathMatch,
   Pathname,
@@ -151,7 +153,6 @@ export type {
   ShouldRevalidateFunctionArgs,
   To,
   UIMatch,
-  PatchRoutesOnNavigationFunction,
 } from "react-router";
 export {
   AbortedDeferredError,

packages/react-router/index.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 import type {
   ActionFunction,
   ActionFunctionArgs,
+  AgnosticPatchRoutesOnNavigationFunction,
+  AgnosticPatchRoutesOnNavigationFunctionArgs,
   Blocker,
   BlockerFunction,
   DataStrategyFunction,
@@ -32,7 +34,6 @@ import type {
   ShouldRevalidateFunctionArgs,
   To,
   UIMatch,
-  AgnosticPatchRoutesOnNavigationFunction,
 } from "@remix-run/router";
 import {
   AbortedDeferredError,
@@ -233,6 +234,12 @@ export {
   useRoutes,
 };
 
+export type PatchRoutesOnNavigationFunctionArgs =
+  AgnosticPatchRoutesOnNavigationFunctionArgs<RouteObject, RouteMatch>;
+
+export type PatchRoutesOnNavigationFunction =
+  AgnosticPatchRoutesOnNavigationFunction<RouteObject, RouteMatch>;
+
 function mapRouteProperties(route: RouteObject) {
   let updates: Partial<RouteObject> & { hasErrorBoundary: boolean } = {
     // Note: this check also occurs in createRoutesFromChildren so update
@@ -291,9 +298,6 @@ function mapRouteProperties(route: RouteObject) {
   return updates;
 }
 
-export interface PatchRoutesOnNavigationFunction
-  extends AgnosticPatchRoutesOnNavigationFunction<RouteMatch> {}
-
 export function createMemoryRouter(
   routes: RouteObject[],
   opts?: {

packages/router/index.ts

@@ -7,6 +7,8 @@ export type {
   AgnosticDataRouteObject,
   AgnosticIndexRouteObject,
   AgnosticNonIndexRouteObject,
+  AgnosticPatchRoutesOnNavigationFunction,
+  AgnosticPatchRoutesOnNavigationFunctionArgs,
   AgnosticRouteMatch,
   AgnosticRouteObject,
   DataStrategyFunction,
@@ -23,7 +25,6 @@ export type {
   LoaderFunctionArgs,
   ParamParseKey,
   Params,
-  AgnosticPatchRoutesOnNavigationFunction,
   PathMatch,
   PathParam,
   PathPattern,

packages/router/utils.ts

@@ -255,15 +255,21 @@ export interface DataStrategyFunction {
   (args: DataStrategyFunctionArgs): Promise<Record<string, DataStrategyResult>>;
 }
 
-export interface AgnosticPatchRoutesOnNavigationFunction<
+export type AgnosticPatchRoutesOnNavigationFunctionArgs<
+  O extends AgnosticRouteObject = AgnosticRouteObject,
   M extends AgnosticRouteMatch = AgnosticRouteMatch
-> {
-  (opts: {
-    path: string;
-    matches: M[];
-    patch: (routeId: string | null, children: AgnosticRouteObject[]) => void;
-  }): void | Promise<void>;
-}
+> = {
+  path: string;
+  matches: M[];
+  patch: (routeId: string | null, children: O[]) => void;
+};
+
+export type AgnosticPatchRoutesOnNavigationFunction<
+  O extends AgnosticRouteObject = AgnosticRouteObject,
+  M extends AgnosticRouteMatch = AgnosticRouteMatch
+> = (
+  opts: AgnosticPatchRoutesOnNavigationFunctionArgs<O, M>
+) => void | Promise<void>;
 
 /**
  * Function provided by the framework-aware layers to set any framework-specific