From 1feda9f38f35160729ff05b012bf0b7c44b320d8 Mon Sep 17 00:00:00 2001 From: Flo Date: Mon, 8 Apr 2024 22:21:26 +0200 Subject: [PATCH 1/9] Update decisions-on-dx.md --- docs/framework/react/decisions-on-dx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/react/decisions-on-dx.md b/docs/framework/react/decisions-on-dx.md index 079973138f..093db532dc 100644 --- a/docs/framework/react/decisions-on-dx.md +++ b/docs/framework/react/decisions-on-dx.md @@ -205,7 +205,7 @@ export const postsIndexRoute = createRoute({ All of this boilerplate, no matter how essential for providing a best-in-class type-inference experience, can be a bit overwhelming and can lead to inconsistencies and errors in the route configuration. -... and this example configuration is just for rendering a single codes-split route. Imagine having to do this for 40-50 routes. Now remember that you still haven't touched the `context`, `loaders`, `search param validation`, and other features of the router 🤕. +... and this example configuration is just for rendering a single code-split route. Imagine having to do this for 40-50 routes. Now remember that you still haven't touched the `context`, `loaders`, `search param validation`, and other features of the router 🤕. > So, why's file-based routing the preferred way? From 2749c92a4b94927902c5e1620af3f8a7bc75aa08 Mon Sep 17 00:00:00 2001 From: Flo Date: Mon, 8 Apr 2024 22:23:08 +0200 Subject: [PATCH 2/9] Update route-trees.md --- docs/framework/react/guide/route-trees.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/framework/react/guide/route-trees.md b/docs/framework/react/guide/route-trees.md index dd60632cfd..f7462f7838 100644 --- a/docs/framework/react/guide/route-trees.md +++ b/docs/framework/react/guide/route-trees.md @@ -9,7 +9,7 @@ To build a route tree, TanStack Router supports both: - File-Based Routing - Code-Based Routing -Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reasons, **file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing** +Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reason, **file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing** For code-based routing documentation, please see the [Code-Based Routing](../code-based-routing) guide. From 9a6d9a9671522fade7bbfcf8acfb1fa1e2838ef0 Mon Sep 17 00:00:00 2001 From: Flo Date: Mon, 8 Apr 2024 22:46:37 +0200 Subject: [PATCH 3/9] Update code-splitting.md One of those two things should be correct --- docs/framework/react/guide/code-splitting.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/framework/react/guide/code-splitting.md b/docs/framework/react/guide/code-splitting.md index 7d01edebe2..b57a48799d 100644 --- a/docs/framework/react/guide/code-splitting.md +++ b/docs/framework/react/guide/code-splitting.md @@ -115,7 +115,7 @@ Since TanStack Router's file-based routing system is designed to support both fl To encapsulate a route's files into a directory, move the route file itself into a `.route` file within a directory with the same name as the route file. -For example, if you have a route file named `posts.tsx`, you would create a new directory named `posts` and move the `posts.tsx` file into that directory, renaming it to `index.route.tsx`. +For example, if you have a route file named `posts.tsx`, you would create a new directory named `posts` and move the `posts.tsx` file into that directory, renaming it to `route.tsx`. #### Before @@ -125,8 +125,8 @@ For example, if you have a route file named `posts.tsx`, you would create a new #### After - `posts` - - `route.tsx` - - `route.lazy.tsx` + - `index.route.tsx` + - `index.route.lazy.tsx` ### Virtual Routes From 968d54c52b574fff76aeb69891ec7b1fbacc3c43 Mon Sep 17 00:00:00 2001 From: Sheraff Date: Sun, 5 Jan 2025 02:18:15 +0100 Subject: [PATCH 4/9] feat'react-router): add NotFoundErrorData interface for improved type safety --- packages/react-router/src/index.tsx | 1 + packages/react-router/src/not-found.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/react-router/src/index.tsx b/packages/react-router/src/index.tsx index 3dc8f5a035..e6f7993ee4 100644 --- a/packages/react-router/src/index.tsx +++ b/packages/react-router/src/index.tsx @@ -276,4 +276,5 @@ export { CatchNotFound, DefaultGlobalNotFound, type NotFoundError, + type NotFoundErrorData, } from './not-found' diff --git a/packages/react-router/src/not-found.tsx b/packages/react-router/src/not-found.tsx index 4be04d1d05..bb5bb1396e 100644 --- a/packages/react-router/src/not-found.tsx +++ b/packages/react-router/src/not-found.tsx @@ -5,6 +5,9 @@ import { useRouterState } from './useRouterState' import type { RegisteredRouter } from './router' import type { RouteIds } from './routeInfo' + +export interface NotFoundErrorData {} + export type NotFoundError = { /** @deprecated @@ -16,7 +19,17 @@ export type NotFoundError = { Do not use this. It's used internally to indicate a path matching error */ _global?: boolean - data?: any + /** + This property can be typed globally using the `NotFoundErrorData` interface + ```ts + declare module '@tanstack/react-router' { + interface NotFoundErrorData { + // your properties here + } + } + ``` + */ + data?: object extends NotFoundErrorData ? any : NotFoundErrorData throw?: boolean routeId?: RouteIds headers?: HeadersInit From 4a52664c895529d7d57151eaf9280b656fd4771b Mon Sep 17 00:00:00 2001 From: Sheraff Date: Sun, 5 Jan 2025 02:20:54 +0100 Subject: [PATCH 5/9] revert changes from weird git issue --- docs/framework/react/decisions-on-dx.md | 2 +- docs/framework/react/guide/code-splitting.md | 6 +++--- docs/framework/react/guide/route-trees.md | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/framework/react/decisions-on-dx.md b/docs/framework/react/decisions-on-dx.md index 093db532dc..079973138f 100644 --- a/docs/framework/react/decisions-on-dx.md +++ b/docs/framework/react/decisions-on-dx.md @@ -205,7 +205,7 @@ export const postsIndexRoute = createRoute({ All of this boilerplate, no matter how essential for providing a best-in-class type-inference experience, can be a bit overwhelming and can lead to inconsistencies and errors in the route configuration. -... and this example configuration is just for rendering a single code-split route. Imagine having to do this for 40-50 routes. Now remember that you still haven't touched the `context`, `loaders`, `search param validation`, and other features of the router 🤕. +... and this example configuration is just for rendering a single codes-split route. Imagine having to do this for 40-50 routes. Now remember that you still haven't touched the `context`, `loaders`, `search param validation`, and other features of the router 🤕. > So, why's file-based routing the preferred way? diff --git a/docs/framework/react/guide/code-splitting.md b/docs/framework/react/guide/code-splitting.md index b57a48799d..7d01edebe2 100644 --- a/docs/framework/react/guide/code-splitting.md +++ b/docs/framework/react/guide/code-splitting.md @@ -115,7 +115,7 @@ Since TanStack Router's file-based routing system is designed to support both fl To encapsulate a route's files into a directory, move the route file itself into a `.route` file within a directory with the same name as the route file. -For example, if you have a route file named `posts.tsx`, you would create a new directory named `posts` and move the `posts.tsx` file into that directory, renaming it to `route.tsx`. +For example, if you have a route file named `posts.tsx`, you would create a new directory named `posts` and move the `posts.tsx` file into that directory, renaming it to `index.route.tsx`. #### Before @@ -125,8 +125,8 @@ For example, if you have a route file named `posts.tsx`, you would create a new #### After - `posts` - - `index.route.tsx` - - `index.route.lazy.tsx` + - `route.tsx` + - `route.lazy.tsx` ### Virtual Routes diff --git a/docs/framework/react/guide/route-trees.md b/docs/framework/react/guide/route-trees.md index f7462f7838..dd60632cfd 100644 --- a/docs/framework/react/guide/route-trees.md +++ b/docs/framework/react/guide/route-trees.md @@ -9,7 +9,7 @@ To build a route tree, TanStack Router supports both: - File-Based Routing - Code-Based Routing -Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reason, **file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing** +Both methods support the exact same core features and functionality, but **file-based routing requires less code for the same or better results**. For this reasons, **file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing** For code-based routing documentation, please see the [Code-Based Routing](../code-based-routing) guide. From 1eafefcba9c59d2c69608aa39ade63ba32592ad1 Mon Sep 17 00:00:00 2001 From: Sheraff Date: Sun, 5 Jan 2025 02:36:06 +0100 Subject: [PATCH 6/9] more flexible augmentable interface --- packages/react-router/src/not-found.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/react-router/src/not-found.tsx b/packages/react-router/src/not-found.tsx index 913680a388..59e2c68d39 100644 --- a/packages/react-router/src/not-found.tsx +++ b/packages/react-router/src/not-found.tsx @@ -5,7 +5,6 @@ import type { ErrorInfo } from 'react' import type { RegisteredRouter } from './router' import type { RouteIds } from './routeInfo' - export interface NotFoundErrorData {} export type NotFoundError = { @@ -24,12 +23,14 @@ export type NotFoundError = { ```ts declare module '@tanstack/react-router' { interface NotFoundErrorData { - // your properties here + data: { + // your properties here + } } } ``` */ - data?: object extends NotFoundErrorData ? any : NotFoundErrorData + data?: NotFoundErrorData extends { data: infer TData } ? TData : any throw?: boolean routeId?: RouteIds headers?: HeadersInit From 8f11abd81ceec65606d5249d509bef2feebe7eab Mon Sep 17 00:00:00 2001 From: Sheraff Date: Sun, 5 Jan 2025 12:12:46 +0100 Subject: [PATCH 7/9] fix(react-router): update NotFoundRouteProps data type NotFoundRouteComponent --- packages/react-router/src/route.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-router/src/route.ts b/packages/react-router/src/route.ts index 9c5c265296..3e8ec3efb3 100644 --- a/packages/react-router/src/route.ts +++ b/packages/react-router/src/route.ts @@ -1599,7 +1599,7 @@ export type ErrorComponentProps = { } export type NotFoundRouteProps = { // TODO: Make sure this is `| null | undefined` (this is for global not-founds) - data: unknown + data: NotFoundError['data'] | null | undefined } // From 92efa3726bff0b4c4506028094f0b4b6719e0a14 Mon Sep 17 00:00:00 2001 From: Sheraff Date: Sat, 11 Jan 2025 12:50:51 +0100 Subject: [PATCH 8/9] documentation --- docs/framework/react/api/router/NotFoundErrorType.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/docs/framework/react/api/router/NotFoundErrorType.md b/docs/framework/react/api/router/NotFoundErrorType.md index 54a1904eee..0f6248beae 100644 --- a/docs/framework/react/api/router/NotFoundErrorType.md +++ b/docs/framework/react/api/router/NotFoundErrorType.md @@ -24,6 +24,15 @@ The `NotFoundError` object accepts/contains the following properties: - Optional - Custom data that is passed into to `notFoundComponent` when the not-found error is handled +It is possible to override the `any` type with your own more specific type by extending the `NotFoundErrorData` interface: +```ts +declare module '@tanstack/react-router' { + interface NotFoundErrorData { + data: /* your type here */ + } +} +``` + ### `global` property - Type: `boolean` From 5909c4730944f20d48731f2fd064f82795838123 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sat, 11 Jan 2025 12:30:15 +0000 Subject: [PATCH 9/9] ci: apply automated fixes --- docs/framework/react/api/router/NotFoundErrorType.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/framework/react/api/router/NotFoundErrorType.md b/docs/framework/react/api/router/NotFoundErrorType.md index 0f6248beae..994a8430e8 100644 --- a/docs/framework/react/api/router/NotFoundErrorType.md +++ b/docs/framework/react/api/router/NotFoundErrorType.md @@ -25,6 +25,7 @@ The `NotFoundError` object accepts/contains the following properties: - Custom data that is passed into to `notFoundComponent` when the not-found error is handled It is possible to override the `any` type with your own more specific type by extending the `NotFoundErrorData` interface: + ```ts declare module '@tanstack/react-router' { interface NotFoundErrorData {