perf: improve ts perf for Route.Link (#4104)

Author: chorobin

packages/react-router/src/link.tsx

@@ -465,6 +465,21 @@ export type LinkComponent<
   props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => React.ReactElement
 
+export type LinkComponentRoute<in out TDefaultFrom extends string = string> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TTo extends string | undefined = undefined,
+  const TMaskTo extends string = '',
+>(
+  props: LinkComponentProps<
+    'a',
+    TRouter,
+    TDefaultFrom,
+    TTo,
+    TDefaultFrom,
+    TMaskTo
+  >,
+) => React.ReactElement
+
 export function createLink<const TComp>(
   Comp: Constrain<TComp, any, (props: CreateLinkProps) => ReactNode>,
 ): LinkComponent<TComp> {

packages/react-router/src/route.tsx

@@ -42,7 +42,7 @@ import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
 import type { UseRouteContextRoute } from './useRouteContext'
-import type { LinkComponent } from './link'
+import type { LinkComponentRoute } from './link'
 
 declare module '@tanstack/router-core' {
   export interface UpdatableRouteOptionsExtensions {
@@ -63,7 +63,7 @@ declare module '@tanstack/router-core' {
     useLoaderDeps: UseLoaderDepsRoute<TId>
     useLoaderData: UseLoaderDataRoute<TId>
     useNavigate: () => UseNavigateResult<TFullPath>
-    Link: LinkComponent<'a', TFullPath>
+    Link: LinkComponentRoute<TFullPath>
   }
 }
 
@@ -137,13 +137,12 @@ export class RouteApi<
     return notFound({ routeId: this.id as string, ...opts })
   }
 
-  Link: LinkComponent<'a', RouteTypesById<TRouter, TId>['fullPath']> =
+  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> =
     React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
       const router = useRouter()
       const fullPath = router.routesById[this.id as string].fullPath
       return <Link ref={ref} from={fullPath as never} {...props} />
-    }) as unknown as LinkComponent<
-      'a',
+    }) as unknown as LinkComponentRoute<
       RouteTypesById<TRouter, TId>['fullPath']
     >
 }
@@ -255,11 +254,11 @@ export class Route<
     return useNavigate({ from: this.fullPath })
   }
 
-  Link: LinkComponent<'a', TFullPath> = React.forwardRef(
+  Link: LinkComponentRoute<TFullPath> = React.forwardRef(
     (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
       return <Link ref={ref} from={this.fullPath as never} {...props} />
     },
-  ) as unknown as LinkComponent<'a', TFullPath>
+  ) as unknown as LinkComponentRoute<TFullPath>
 }
 
 export function createRoute<
@@ -446,11 +445,11 @@ export class RootRoute<
     return useNavigate({ from: this.fullPath })
   }
 
-  Link: LinkComponent<'a', '/'> = React.forwardRef(
+  Link: LinkComponentRoute<'/'> = React.forwardRef(
     (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
       return <Link ref={ref} from={this.fullPath} {...props} />
     },
-  ) as unknown as LinkComponent<'a', '/'>
+  ) as unknown as LinkComponentRoute<'/'>
 }
 
 export function createRootRoute<

packages/react-router/tests/routeApi.test-d.tsx

@@ -1,6 +1,7 @@
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
-import type { LinkComponent, MakeRouteMatch, UseNavigateResult } from '../src'
+import type { MakeRouteMatch, UseNavigateResult } from '../src'
+import type { LinkComponentRoute } from '../src/link'
 
 const rootRoute = createRootRoute()
 
@@ -90,7 +91,7 @@ describe('getRouteApi', () => {
   test('Link', () => {
     const Link = invoiceRouteApi.Link
     expectTypeOf(Link).toEqualTypeOf<
-      LinkComponent<'a', '/invoices/$invoiceId'>
+      LinkComponentRoute<'/invoices/$invoiceId'>
     >()
   })
 })

packages/solid-router/src/link.tsx

@@ -522,6 +522,21 @@ export type LinkComponent<
   props: LinkComponentProps<TComp, TRouter, TFrom, TTo, TMaskFrom, TMaskTo>,
 ) => Solid.JSX.Element
 
+export type LinkComponentRoute<in out TDefaultFrom extends string = string> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TTo extends string | undefined = undefined,
+  const TMaskTo extends string = '',
+>(
+  props: LinkComponentProps<
+    'a',
+    TRouter,
+    TDefaultFrom,
+    TTo,
+    TDefaultFrom,
+    TMaskTo
+  >,
+) => Solid.JSX.Element
+
 export function createLink<const TComp>(
   Comp: Constrain<TComp, any, (props: CreateLinkProps) => Solid.JSX.Element>,
 ): LinkComponent<TComp> {

packages/solid-router/src/route.tsx

@@ -42,7 +42,7 @@ import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
 import type * as Solid from 'solid-js'
 import type { UseRouteContextRoute } from './useRouteContext'
-import type { LinkComponent } from './link'
+import type { LinkComponentRoute } from './link'
 
 declare module '@tanstack/router-core' {
   export interface UpdatableRouteOptionsExtensions {
@@ -63,7 +63,7 @@ declare module '@tanstack/router-core' {
     useLoaderDeps: UseLoaderDepsRoute<TId>
     useLoaderData: UseLoaderDataRoute<TId>
     useNavigate: () => UseNavigateResult<TFullPath>
-    Link: LinkComponent<'a', TFullPath>
+    Link: LinkComponentRoute<TFullPath>
   }
 }
 
@@ -132,7 +132,7 @@ export class RouteApi<
     return notFound({ routeId: this.id as string, ...opts })
   }
 
-  Link: LinkComponent<'a', RouteTypesById<TRouter, TId>['fullPath']> = (
+  Link: LinkComponentRoute<RouteTypesById<TRouter, TId>['fullPath']> = (
     props,
   ) => {
     const router = useRouter()
@@ -242,7 +242,7 @@ export class Route<
     return useNavigate({ from: this.fullPath })
   }
 
-  Link: LinkComponent<'a', TFullPath> = (props) => {
+  Link: LinkComponentRoute<TFullPath> = (props) => {
     return <Link from={this.fullPath} {...props} />
   }
 }
@@ -427,8 +427,8 @@ export class RootRoute<
     return useNavigate({ from: this.fullPath })
   }
 
-  Link: LinkComponent<'a', '/'> = (props) => {
-    return <Link from={this.fullPath} {...props} />
+  Link: LinkComponentRoute<'/'> = (props) => {
+    return <Link from={this.fullPath} {...(props as any)} />
   }
 }
 

packages/solid-router/tests/routeApi.test-d.tsx

@@ -1,8 +1,8 @@
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
-import type { LinkComponent } from '../src'
 import type { Accessor } from 'solid-js'
 import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
+import type { LinkComponentRoute } from '../src/link'
 
 const rootRoute = createRootRoute()
 
@@ -100,7 +100,7 @@ describe('getRouteApi', () => {
   test('Link', () => {
     const Link = invoiceRouteApi.Link
     expectTypeOf(Link).toEqualTypeOf<
-      LinkComponent<'a', '/invoices/$invoiceId'>
+      LinkComponentRoute<'/invoices/$invoiceId'>
     >()
   })
 })