fix: use const type parameters (#3085)

* fix: use const type parameters

* chore: fix build

Author: chorobin

packages/react-router/src/Matches.tsx

@@ -13,7 +13,7 @@ import type {
 } from './structuralSharing'
 import type { AnyRoute, ReactNode, StaticDataRouteOption } from './route'
 import type { AnyRouter, RegisteredRouter, RouterState } from './router'
-import type { ResolveRelativePath, ToOptions } from './link'
+import type { ResolveRelativePath, ResolveRoute, ToOptions } from './link'
 import type {
   AllContext,
   AllLoaderData,
@@ -273,7 +273,7 @@ export type UseMatchRouteOptions<
   TFrom extends RoutePaths<TRouter['routeTree']> | string = RoutePaths<
     TRouter['routeTree']
   >,
-  TTo extends string = '',
+  TTo extends string | undefined = '',
   TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
   TMaskTo extends string = '',
   TOptions extends ToOptions<
@@ -297,16 +297,13 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
 
   return React.useCallback(
     <
-      TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
-      TTo extends string = '',
-      TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
-      TMaskTo extends string = '',
-      TResolved extends string = ResolveRelativePath<TFrom, NoInfer<TTo>>,
+      const TFrom extends string = string,
+      const TTo extends string | undefined = undefined,
+      const TMaskFrom extends string = TFrom,
+      const TMaskTo extends string = '',
     >(
       opts: UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
-    ):
-      | false
-      | RouteByPath<TRouter['routeTree'], TResolved>['types']['allParams'] => {
+    ): false | ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'] => {
       const { pending, caseSensitive, fuzzy, includeSearch, ...rest } = opts
 
       return router.matchRoute(rest as any, {
@@ -322,11 +319,9 @@ export function useMatchRoute<TRouter extends AnyRouter = RegisteredRouter>() {
 
 export type MakeMatchRouteOptions<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<
-    TRouter['routeTree']
-  >,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,
+  TFrom extends string = string,
+  TTo extends string | undefined = undefined,
+  TMaskFrom extends string = TFrom,
   TMaskTo extends string = '',
 > = UseMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> & {
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
@@ -342,15 +337,13 @@ export type MakeMatchRouteOptions<
 
 export function MatchRoute<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends RoutePaths<TRouter['routeTree']> = RoutePaths<
-    TRouter['routeTree']
-  >,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouter['routeTree']> = TFrom,
-  TMaskTo extends string = '',
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
 >(props: MakeMatchRouteOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): any {
   const matchRoute = useMatchRoute()
-  const params = matchRoute(props as any)
+  const params = matchRoute(props as any) as boolean
 
   if (typeof props.children === 'function') {
     return (props.children as any)(params)

packages/react-router/src/link.tsx

@@ -555,10 +555,10 @@ const preloadWarning = 'Error preloading route! ☝️'
 
 export function useLinkProps<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends RoutePaths<TRouter['routeTree']> | string = string,
-  TTo extends string = '',
-  TMaskFrom extends RoutePaths<TRouter['routeTree']> | string = TFrom,
-  TMaskTo extends string = '',
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
 >(
   options: UseLinkPropsOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
   forwardedRef?: React.ForwardedRef<Element>,
@@ -976,10 +976,10 @@ export type CreateLinkProps = LinkProps<
 
 export type LinkComponent<TComp> = <
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string = string,
-  TTo extends string | undefined = undefined,
-  TMaskFrom extends string = TFrom,
-  TMaskTo extends string = '',
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
 >(
   props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => React.ReactElement

packages/react-router/src/redirects.ts

@@ -37,10 +37,10 @@ export type ResolvedRedirect<
 
 export function redirect<
   TRouter extends RegisteredRouter,
-  TTo extends string | undefined,
-  TFrom extends string = string,
-  TMaskFrom extends string = TFrom,
-  TMaskTo extends string = '',
+  const TTo extends string | undefined,
+  const TFrom extends string = string,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
 >(
   opts: Redirect<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ): Redirect<TRouter, TFrom, TTo, TMaskFrom, TMaskTo> {

packages/react-router/src/route.ts

@@ -800,9 +800,10 @@ export type RouteTypesById<TRouter extends AnyRouter, TId> = RouteById<
   TId
 >['types']
 
-export function getRouteApi<TId, TRouter extends AnyRouter = RegisteredRouter>(
-  id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>,
-) {
+export function getRouteApi<
+  const TId,
+  TRouter extends AnyRouter = RegisteredRouter,
+>(id: ConstrainLiteral<TId, RouteIds<TRouter['routeTree']>>) {
   return new RouteApi<TId, TRouter>({ id })
 }
 

packages/react-router/src/useLoaderData.tsx

@@ -69,7 +69,7 @@ export type UseLoaderDataRoute<out TId> = <
 
 export function useLoaderData<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TStrict extends boolean = true,
   TSelected = unknown,
   TStructuralSharing extends boolean = boolean,

packages/react-router/src/useLoaderDeps.tsx

@@ -48,7 +48,7 @@ export type UseLoaderDepsRoute<out TId> = <
 
 export function useLoaderDeps<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TSelected = unknown,
   TStructuralSharing extends boolean = boolean,
 >(

packages/react-router/src/useMatch.tsx

@@ -76,7 +76,7 @@ type ThrowConstraint<
 
 export function useMatch<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TStrict extends boolean = true,
   TThrow extends boolean = true,
   TSelected = unknown,

packages/react-router/src/useNavigate.tsx

@@ -49,10 +49,10 @@ export function useNavigate<
 
 export function Navigate<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string = string,
-  TTo extends string | undefined = '.',
-  TMaskFrom extends string = TFrom,
-  TMaskTo extends string = '.',
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
 >(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
   const { navigate } = useRouter()
 

packages/react-router/src/useParams.tsx

@@ -63,7 +63,7 @@ export type UseParamsRoute<out TFrom> = <
 
 export function useParams<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TStrict extends boolean = true,
   TSelected = unknown,
   TStructuralSharing extends boolean = boolean,

packages/react-router/src/useRouteContext.ts

@@ -46,7 +46,7 @@ export type UseRouteContextRoute<out TFrom> = <
 
 export function useRouteContext<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TStrict extends boolean = true,
   TSelected = unknown,
 >(

packages/react-router/src/useSearch.tsx

@@ -63,7 +63,7 @@ export type UseSearchRoute<out TFrom> = <
 
 export function useSearch<
   TRouter extends AnyRouter = RegisteredRouter,
-  TFrom extends string | undefined = undefined,
+  const TFrom extends string | undefined = undefined,
   TStrict extends boolean = true,
   TSelected = unknown,
   TStructuralSharing extends boolean = boolean,

packages/react-router/tests/link.bench.tsx

@@ -149,16 +149,20 @@ describe.each([
     'link to relative path',
     () => {
       const router = renderRouter(
-        Array.from({ length: numberOfLinks }).map((_, i) => (
-          <Link
-            key={i}
-            from="/"
-            to={`./params/$param${Math.min(i, matchedParamId)}`}
-            params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
-          >
-            {i}
-          </Link>
-        )),
+        Array.from({ length: numberOfLinks }).map((_, i) => {
+          const to = `./params/$param${Math.min(i, matchedParamId)}`
+
+          return (
+            <Link
+              key={i}
+              from="/"
+              to={to}
+              params={{ [`param${Math.min(i, matchedParamId)}`]: i }}
+            >
+              {i}
+            </Link>
+          )
+        }),
       )
       render(<RouterProvider router={router} />)
     },