tests: add ValidateLinkOptions in tanstack-router-react-example-large-file-based

examples/react/large-file-based/src/createRoutes.mjs

@@ -1,7 +1,7 @@
 import { readFile, writeFile, mkdir } from 'fs/promises'
 import { existsSync } from 'fs'
 
-const length = 100
+const length = 200
 
 const main = async () => {
   const absolute = (await readFile('./src/routes/absolute.tsx')).toString()
@@ -39,10 +39,14 @@ const main = async () => {
     const replacedRelative = relative.replaceAll('/relative', `/relative${y}`)
     const replacedSearch = search.replaceAll('searchPlaceholder', `search${y}`)
     const replacedParams = params.replaceAll('paramsPlaceholder', `param${y}`)
-    await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute)
-    await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative)
-    await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch)
-    await writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams)
+    // await writeFile(`./src/routes/(gen)/absolute${y}.tsx`, replacedAbsolute)
+    // await writeFile(`./src/routes/(gen)/relative${y}.tsx`, replacedRelative)
+    // await writeFile(`./src/routes/(gen)/search/search${y}.tsx`, replacedSearch)
+    // wait writeFile(`./src/routes/(gen)/params/$param${y}.tsx`, replacedParams)
+    await writeFile(
+      `./src/routes/(gen)/params/$fixedParam.$param${y}.$otherParam.tsx`,
+      replacedParams,
+    )
   }
 }
 

examples/react/large-file-based/src/routeTree.gen.ts

@@ -9,6 +9,7 @@
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
 import { Route as rootRouteImport } from './routes/__root'
+import { Route as ValidateLinkOptionsRouteImport } from './routes/validateLinkOptions'
 import { Route as RelativeRouteImport } from './routes/relative'
 import { Route as LinkPropsRouteImport } from './routes/linkProps'
 import { Route as AbsoluteRouteImport } from './routes/absolute'
@@ -18,6 +19,11 @@ import { Route as IndexRouteImport } from './routes/index'
 import { Route as SearchSearchPlaceholderRouteImport } from './routes/search/searchPlaceholder'
 import { Route as ParamsParamsPlaceholderRouteImport } from './routes/params/$paramsPlaceholder'
 
+const ValidateLinkOptionsRoute = ValidateLinkOptionsRouteImport.update({
+  id: '/validateLinkOptions',
+  path: '/validateLinkOptions',
+  getParentRoute: () => rootRouteImport,
+} as any)
 const RelativeRoute = RelativeRouteImport.update({
   id: '/relative',
   path: '/relative',
@@ -66,6 +72,7 @@ export interface FileRoutesByFullPath {
   '/absolute': typeof AbsoluteRoute
   '/linkProps': typeof LinkPropsRoute
   '/relative': typeof RelativeRoute
+  '/validateLinkOptions': typeof ValidateLinkOptionsRoute
   '/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
   '/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
 }
@@ -76,6 +83,7 @@ export interface FileRoutesByTo {
   '/absolute': typeof AbsoluteRoute
   '/linkProps': typeof LinkPropsRoute
   '/relative': typeof RelativeRoute
+  '/validateLinkOptions': typeof ValidateLinkOptionsRoute
   '/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
   '/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
 }
@@ -87,6 +95,7 @@ export interface FileRoutesById {
   '/absolute': typeof AbsoluteRoute
   '/linkProps': typeof LinkPropsRoute
   '/relative': typeof RelativeRoute
+  '/validateLinkOptions': typeof ValidateLinkOptionsRoute
   '/params/$paramsPlaceholder': typeof ParamsParamsPlaceholderRoute
   '/search/searchPlaceholder': typeof SearchSearchPlaceholderRoute
 }
@@ -99,6 +108,7 @@ export interface FileRouteTypes {
     | '/absolute'
     | '/linkProps'
     | '/relative'
+    | '/validateLinkOptions'
     | '/params/$paramsPlaceholder'
     | '/search/searchPlaceholder'
   fileRoutesByTo: FileRoutesByTo
@@ -109,6 +119,7 @@ export interface FileRouteTypes {
     | '/absolute'
     | '/linkProps'
     | '/relative'
+    | '/validateLinkOptions'
     | '/params/$paramsPlaceholder'
     | '/search/searchPlaceholder'
   id:
@@ -119,6 +130,7 @@ export interface FileRouteTypes {
     | '/absolute'
     | '/linkProps'
     | '/relative'
+    | '/validateLinkOptions'
     | '/params/$paramsPlaceholder'
     | '/search/searchPlaceholder'
   fileRoutesById: FileRoutesById
@@ -130,10 +142,18 @@ export interface RootRouteChildren {
   AbsoluteRoute: typeof AbsoluteRoute
   LinkPropsRoute: typeof LinkPropsRoute
   RelativeRoute: typeof RelativeRoute
+  ValidateLinkOptionsRoute: typeof ValidateLinkOptionsRoute
 }
 
 declare module '@tanstack/react-router' {
   interface FileRoutesByPath {
+    '/validateLinkOptions': {
+      id: '/validateLinkOptions'
+      path: '/validateLinkOptions'
+      fullPath: '/validateLinkOptions'
+      preLoaderRoute: typeof ValidateLinkOptionsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
     '/relative': {
       id: '/relative'
       path: '/relative'
@@ -224,6 +244,7 @@ const rootRouteChildren: RootRouteChildren = {
   AbsoluteRoute: AbsoluteRoute,
   LinkPropsRoute: LinkPropsRoute,
   RelativeRoute: RelativeRoute,
+  ValidateLinkOptionsRoute: ValidateLinkOptionsRoute,
 }
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)

examples/react/large-file-based/src/routes/params/$paramsPlaceholder.tsx

@@ -28,14 +28,5 @@ export const Route = createFileRoute('/params/$paramsPlaceholder')({
 })
 
 function ParamsComponent() {
-  return (
-    <div className="p-2 space-y-2">
-      <Link
-        to="/params/$paramsPlaceholder"
-        params={{
-          paramsPlaceholder: 'params',
-        }}
-      />
-    </div>
-  )
+  return <div className="p-2 space-y-2"></div>
 }

examples/react/large-file-based/src/routes/validateLinkOptions.tsx

@@ -0,0 +1,102 @@
+import { createFileRoute } from '@tanstack/react-router'
+import * as React from 'react'
+import { Link, linkOptions } from '@tanstack/react-router'
+import type {
+  RegisteredRouter,
+  ValidateLinkOptions,
+} from '@tanstack/react-router'
+
+export const Route = createFileRoute('/validateLinkOptions')({
+  component: LinkPropsPage,
+})
+// From the docs: https://tanstack.com/router/latest/docs/framework/react/guide/type-utilities#type-checking-link-options-with-validatelinkoptions
+export interface HeaderLinkProps<
+  TRouter extends RegisteredRouter = RegisteredRouter,
+  TOptions = unknown,
+> {
+  title: string
+  linkOptions: ValidateLinkOptions<TRouter, TOptions>
+  paramsToLink?: (id: string) => ValidateLinkOptions<TRouter, TOptions>
+}
+
+export function HeadingLink<TRouter extends RegisteredRouter, TOptions>(
+  props: HeaderLinkProps<TRouter, TOptions>,
+): React.ReactNode {
+  return (
+    <>
+      <h1>{props.title}</h1>
+      <Link {...props.linkOptions} />
+    </>
+  )
+}
+
+function LinkPropsPage() {
+  const linkOptionsFromSomeOtherPlace = linkOptions({
+    to: '/params/$fixedParam/$param1/$otherParam',
+    params: {
+      param1: 'value29',
+      fixedParam: 'value',
+    },
+  })
+  return (
+    <>
+      {/* direct use, works */}
+      <HeadingLink
+        title="Hello"
+        linkOptions={{
+          to: '/params/$fixedParam/$param1/$otherParam',
+          params: {
+            param1: 'value29',
+            fixedParam: 'a',
+            otherParam: 'value',
+          },
+        }}
+      />
+      {/* from a const from a linkOptions, works */}
+      <HeadingLink title="Hello" linkOptions={linkOptionsFromSomeOtherPlace} />
+      {/* from an inline linkOptions on a callback, breaks for some reason */}
+      {/* and without the linkOptions in the callback, type error */}
+      <HeadingLink
+        title="Hello"
+        linkOptions={{
+          to: '/params/$fixedParam/$param1/$otherParam',
+          params: {
+            fixedParam: 'value',
+            param1: 'value',
+            otherParam: 'value',
+          },
+        }}
+        paramsToLink={(id) =>
+          linkOptions({
+            to: '/params/$fixedParam/$param99/$otherParam',
+            params: {
+              param99: id,
+              fixedParam: 'value',
+              otherParam: 'value',
+            },
+          })
+        }
+      />
+      {/* and without the linkOptions in the callback, type error */}
+      <HeadingLink
+        title="Hello"
+        linkOptions={{
+          to: '/params/$fixedParam/$param1/$otherParam',
+          params: {
+            fixedParam: 'value',
+            param1: 'value',
+            otherParam: 'value',
+          },
+        }}
+        paramsToLink={(id) => ({
+          to: '/params/$fixedParam/$param99/$otherParam',
+          params: {
+            param99: id,
+            fixedParam: 'value',
+            otherParam: 'value',
+          },
+        })}
+      />
+    </>
+  )
+}