fix(react): make wrapCreateBrowserRouter generic (#6862)

Reduces the Router and RouterState to the minimal internal usage,
and makes the wrapper accept a generic which extends the minimal types.
This allows for react-router to make changes to their Router types,
without breaking our types.

Author: h3rmanj

packages/react/src/reactrouterv6.tsx

@@ -249,10 +249,13 @@ export function wrapUseRoutes(origUseRoutes: UseRoutes): UseRoutes {
   };
 }
 
-export function wrapCreateBrowserRouter(createRouterFunction: CreateRouterFunction): CreateRouterFunction {
+export function wrapCreateBrowserRouter<
+  TState extends RouterState = RouterState,
+  TRouter extends Router<TState> = Router<TState>,
+>(createRouterFunction: CreateRouterFunction<TState, TRouter>): CreateRouterFunction<TState, TRouter> {
   // `opts` for createBrowserHistory and createMemoryHistory are different, but also not relevant for us at the moment.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  return function (routes: RouteObject[], opts?: any): Router {
+  return function (routes: RouteObject[], opts?: any): TRouter {
     const router = createRouterFunction(routes, opts);
 
     // The initial load ends when `createBrowserRouter` is called.

packages/react/src/types.ts

@@ -148,8 +148,8 @@ export interface Path {
   hash: string;
 }
 
-export interface RouterSubscriber {
-  (state: RouterState): void;
+export interface RouterSubscriber<TState extends RouterState = RouterState> {
+  (state: TState): void;
 }
 export interface GetScrollPositionFunction {
   (): number;
@@ -204,39 +204,13 @@ export declare enum HistoryAction {
 export interface RouterState {
   historyAction: Action | HistoryAction | any;
   location: any;
-  matches: AgnosticDataRouteMatch[];
-  initialized: boolean;
-  navigation: Navigation;
-  restoreScrollPosition: number | false | null;
-  preventScrollReset: boolean;
-  revalidation: any;
-  loaderData: RouteData;
-  actionData: RouteData | null;
-  errors: RouteData | null;
-  fetchers: Map<string, Fetcher>;
-}
-export interface Router {
-  basename: string | undefined;
-  state: RouterState;
-  routes: AgnosticDataRouteObject[];
-  _internalFetchControllers: any;
-  _internalActiveDeferreds: any;
-  initialize(): Router;
-  subscribe(fn: RouterSubscriber): () => void;
-  enableScrollRestoration(
-    savedScrollPositions: Record<string, number>,
-    getScrollPosition: GetScrollPositionFunction,
-    getKey?: any,
-  ): () => void;
-  navigate(to: number): void;
-  navigate(to: To, opts?: RouterNavigateOptions): void;
-  fetch(key: string, routeId: string, href: string, opts?: RouterNavigateOptions): void;
-  revalidate(): void;
-  createHref(location: Location | URL): string;
-  getFetcher(key?: string): any;
-  deleteFetcher(key?: string): void;
-  dispose(): void;
-  encodeLocation(to: To): Path;
-}
-
-export type CreateRouterFunction = (routes: RouteObject[], opts?: any) => Router;
+}
+export interface Router<TState extends RouterState = RouterState> {
+  state: TState;
+  subscribe(fn: RouterSubscriber<TState>): () => void;
+}
+
+export type CreateRouterFunction<
+  TState extends RouterState = RouterState,
+  TRouter extends Router<TState> = Router<TState>,
+> = (routes: RouteObject[], opts?: any) => TRouter;

packages/react/test/reactrouterv6.4.test.tsx

@@ -12,7 +12,7 @@ import {
   useNavigationType,
 } from 'react-router-6.4';
 
-import { reactRouterV6Instrumentation,wrapCreateBrowserRouter  } from '../src';
+import { reactRouterV6Instrumentation, wrapCreateBrowserRouter } from '../src';
 import type { CreateRouterFunction } from '../src/types';
 
 beforeAll(() => {