Checkpoint

TanStack · Feb 17, 2023 · b87a7a0 · b87a7a0
1 parent 6ed2425
commit b87a7a0
Show file tree

Hide file tree

Showing 236 changed files with 2,760 additions and 7,657 deletions.
diff --git a/README.md b/README.md
@@ -8,10 +8,10 @@
   <img alt="#TanStack" src="https://img.shields.io/twitter/url?color=%2308a0e9&label=%23TanStack&style=social&url=https%3A%2F%2Ftwitter.com%2Fintent%2Ftweet%3Fbutton_hashtag%3DTanStack">
 </a><a href="https://discord.com/invite/WrRKjPJ" target="\_parent">
   <img alt="" src="https://img.shields.io/badge/Discord-TanStack-%235865F2" />
-</a><a href="https://npmjs.com/package/@tanstack/react-router" target="\_parent">
-  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/react-router.svg" />
-</a><a href="https://bundlephobia.com/result?p=@tanstack/react-router" target="\_parent">
-  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/react-router" />
+</a><a href="https://npmjs.com/package/@tanstack/router" target="\_parent">
+  <img alt="" src="https://img.shields.io/npm/dm/@tanstack/router.svg" />
+</a><a href="https://bundlephobia.com/result?p=@tanstack/router" target="\_parent">
+  <img alt="" src="https://badgen.net/bundlephobia/minzip/@tanstack/router" />
 </a><a href="#badge">
     <img alt="semantic-release" src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg">
   </a><a href="https://github.com/tanstack/router/discussions">

diff --git a/docs/adapters/react-router.md b/docs/adapters/react-router.md
@@ -5,7 +5,7 @@ title: React Router
 You can install TanStack React Router with any [NPM](https://npmjs.com) package manager.
 
 ```sh
-npm install @tanstack/react-router@beta
+npm install @tanstack/router@beta
 ```
 
 TanStack React Router is compatible with React v16.8+ and is currently only compatible with ReactDOM only. If you would like to contribute to the React Native adapter, please reach out to us on [Discord](https://tlinz.com/discord).
diff --git a/docs/api/react/Outlet.md b/docs/api/react/Outlet.md
@@ -4,8 +4,7 @@ title: Outlet
 ---
 
 ```tsx
-import { Outlet } from '@tanstack/react-router'
-
+import { Outlet } from '@tanstack/router'
 ```
 
 **Options**
diff --git a/docs/api/react/RouterProvider.md b/docs/api/react/RouterProvider.md
@@ -3,12 +3,12 @@ id: RouterProvider
 title: RouterProvider
 ---
 
-Use the `RouterProvider` component to connect and provide a `ReactRouter` to your application:
+Use the `RouterProvider` component to connect and provide a `Router` to your application:
 
 ```tsx
-import { RouterProvider, ReactRouter } from '@tanstack/react-router'
+import { RouterProvider, Router } from '@tanstack/router'
 
-const router = new ReactRouter()
+const router = new Router()
 
 function App() {
   return <RouterProvider router={router} />
@@ -19,7 +19,7 @@ function App() {
 
 - `router: Router`
   - **Required**
-  - the `ReactRouter` instance to provide
+  - the `Router` instance to provide
 - `history?: BrowserHistory | MemoryHistory | HashHistory`
   - **Optional**
 - `stringifySearch?: SearchSerializer`
@@ -38,7 +38,10 @@ function App() {
   - **Optional**
 - `defaultComponent?: GetFrameworkGeneric<'Component'>`
   - **Optional**
-- `defaultErrorComponent?: GetFrameworkGeneric<'ErrorComponent'>`
+- `defaultErrorComponent?: RouteComponent<{
+  error: Error
+  info: { componentStack: string }
+}>`
   - **Optional**
 - `defaultPendingComponent?: GetFrameworkGeneric<'Component'>`
   - **Optional**
@@ -60,5 +63,3 @@ function App() {
   - **Optional**
 - `context?: TRouterContext`
   - **Optional**
-- `loadComponent?: (component: GetFrameworkGeneric<'Component'>) => Promise<GetFrameworkGeneric<'Component'>`
-  - **Optional**
diff --git a/docs/api/react/createReactRouter.md b/docs/api/react/createReactRouter.md
@@ -1,16 +1,16 @@
 ---
-id: ReactRouter
-title: ReactRouter
+id: Router
+title: Router
 ---
 
-use the 'ReactRouter' to create a router to provide it to the Router Provider, 'ReactRouter' takes in routes config in the options.
+use the 'Router' to create a router to provide it to the Router Provider, 'Router' takes in routes config in the options.
 
 ```tsx
-import { ReactRouter } from '@tanstack/react-router'
+import { Router } from '@tanstack/router'
 
 const routeConfig = rootRoute.addChildren([indexRoute])
 
-const router = new ReactRouter({
+const router = new Router({
   routeConfig,
   //add other options here
 })

diff --git a/docs/api/react/createRouteConfig.md b/docs/api/react/createRouteConfig.md
@@ -6,7 +6,7 @@ title: route
 Use the 'route' to create route to pass to your Route Provider.
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 
 const router = new Route()
 ```
@@ -110,14 +110,14 @@ search: {}}) => void | ((match: {params: {};
 search: {};
 }) => void) | undefined) | undefined `
 
-                                This function is called when moving from an inactive state to an active one. Likewise, when moving from an active to an inactive state, the return function (if provided) is called.
+                                    This function is called when moving from an inactive state to an active one. Likewise, when moving from an active to an inactive state, the return function (if provided) is called.
 
   - `onTransition: ((match: {
 params: {};
 search: {};
 }) => void) | undefined `
 
-                                This function is called when the route remains active from one transition to the next.
+                                    This function is called when the route remains active from one transition to the next.
 
   - `parseParams: ((rawParams: Record<never, string>) => Record<never, string>) | undefined`
 

diff --git a/docs/api/react/lazy.md b/docs/api/react/lazy.md
@@ -4,9 +4,10 @@ title: lazy
 ---
 
 ```tsx
-import { lazy } from '@tanstack/react-router'
+import { lazy } from '@tanstack/router'
 
-export const expensiveRoute = new Route({ getParentRoute: () => rootRoute,
+export const expensiveRoute = new Route({
+  getParentRoute: () => rootRoute,
   path: 'expensive',
   component: lazy(() => import('./Expensive')),
 })

diff --git a/docs/comparison.md b/docs/comparison.md
@@ -62,8 +62,8 @@ Feature/Capability Key:
 | Deferred Loader Streaming                      | 🛑                                               | ✅                                                    | 🔶                                                    |
 | `<Form>` API                                   | 🛑                                               | ✅                                                    | 🛑                                                    |
 
-[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/react-router@beta?label=Router
-[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/react-router@beta
+[bp-tanstack-router]: https://badgen.net/bundlephobia/minzip/@tanstack/router@beta?label=Router
+[bpl-tanstack-router]: https://bundlephobia.com/result?p=@tanstack/router@beta
 [bp-tanstack-loaders]: https://badgen.net/bundlephobia/minzip/@tanstack/react-loaders@beta?label=Loaders
 [bpl-tanstack-loaders]: https://bundlephobia.com/result?p=@tanstack/react-loaders@beta
 [bp-tanstack-actions]: https://badgen.net/bundlephobia/minzip/@tanstack/react-actions@beta?label=Actions

diff --git a/docs/config.json b/docs/config.json
@@ -137,8 +137,8 @@
           "to": "api/react/RouterProvider"
         },
         {
-          "label": "ReactRouter",
-          "to": "api/react/ReactRouter"
+          "label": "Router",
+          "to": "api/react/Router"
         },
         {
           "label": "route",

diff --git a/docs/devtools.md b/docs/devtools.md
@@ -13,13 +13,13 @@ When you begin your TanStack Router journey, you'll want these devtools by your
 ## Installation
 
 ```sh
-npm install @tanstack/react-router-devtools@beta --save
+npm install @tanstack/router-devtools@beta --save
 ```
 
 ## Import the Devtools
 
 ```js
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 ```
 
 ## Only importing and using Devtools in Development
@@ -32,7 +32,7 @@ const TanStackRouterDevtools =
     ? () => null // Render nothing in production
     : React.lazy(() =>
         // Lazy load in development
-        import('@tanstack/react-router-devtools').then((res) => ({
+        import('@tanstack/router-devtools').then((res) => ({
           default: res.TanStackRouterDevtools,
           // For Embedded Mode
           // default: res.TanStackRouterDevtoolsPanel
@@ -54,7 +54,7 @@ const rootRoute = new RootRoute({
   ),
 })
 
-const router = new ReactRouter({
+const router = new Router({
   routes: [rootRoute],
 })
 
@@ -85,7 +85,7 @@ Floating Mode will mount the devtools as a fixed, floating element in your app a
 Place the following code as high in your React app as you can. The closer it is to the root of the page, the better it will work!
 
 ```js
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
 
 function App() {
   return (
@@ -118,7 +118,7 @@ function App() {
 Embedded Mode will embed the devtools as a regular component in your application. You can style it however you'd like after that!
 
 ```js
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/router-devtools'
 
 function App() {
   return (

diff --git a/docs/guide/custom-search-param-serialization.md b/docs/guide/custom-search-param-serialization.md
@@ -6,18 +6,14 @@ title: Custom Search Param Serialization
 
 By default, TanStack Router parses and serializes your search params automatically. Depending on your needs though, you may want to customize the serialization process.
 
-To do so, you can [use `ReactRouter`'s `parseSearch` and `stringifySearch` options combined with the `parseSearchWith` and `stringifySearchWith` utilities](../docs/api#search-param-parsing-and-serialization).
+To do so, you can [use `Router`'s `parseSearch` and `stringifySearch` options combined with the `parseSearchWith` and `stringifySearchWith` utilities](../docs/api#search-param-parsing-and-serialization).
 
 For example: We can reimplement the default parser/serializer with the following code:
 
 ```tsx
-import {
-  ReactRouter,
-  parseSearchWith,
-  stringifySearchWith,
-} from '@tanstack/react-router'
+import { Router, parseSearchWith, stringifySearchWith } from '@tanstack/router'
 
-const router = new ReactRouter({
+const router = new Router({
   parseSearch: parseSearchWith(JSON.parse),
   stringifySearch: stringifySearchWith(JSON.stringify),
 })
@@ -28,13 +24,9 @@ const router = new ReactRouter({
 It's common to base64 encode your search params to achieve maximum compatibility across browsers and URL unfurlers, etc. This can be done with the following code:
 
 ```tsx
-import {
-  ReactRouter,
-  parseSearchWith,
-  stringifySearchWith,
-} from '@tanstack/react-router'
+import { Router, parseSearchWith, stringifySearchWith } from '@tanstack/router'
 
-const router = new ReactRouter({
+const router = new Router({
   parseSearch: parseSearchWith((value) => JSON.parse(decodeFromBinary(value))),
   stringifySearch: stringifySearchWith((value) =>
     encodeToBinary(JSON.stringify(value)),
@@ -66,14 +58,10 @@ export function encodeToBinary(str: string): string {
 [Zipson](https://jgranstrom.github.io/zipson/) is a very user-friendly and performant JSON compression library (both in runtime performance and the resulting compression performance). To compress your search params with it (which requires escaping/unescaping and base64 encoding/decoding them as well), you can use the following code:
 
 ```tsx
-import {
-  ReactRouter,
-  parseSearchWith,
-  stringifySearchWith,
-} from '@tanstack/react-router'
+import { Router, parseSearchWith, stringifySearchWith } from '@tanstack/router'
 import { stringify, parse } from 'zipson'
 
-const router = new ReactRouter({
+const router = new Router({
   parseSearch: parseSearchWith((value) =>
     parse(decodeURIComponent(decodeFromBinary(value))),
   ),
@@ -107,14 +95,10 @@ export function encodeToBinary(str: string): string {
 [JSURL](https://github.com/Sage/jsurl) is a non-standard library that can both compress URLs while still maintaining readability. This can be done with the following code:
 
 ```tsx
-import {
-  ReactRouter,
-  parseSearchWith,
-  stringifySearchWith,
-} from '@tanstack/react-router'
+import { Router, parseSearchWith, stringifySearchWith } from '@tanstack/router'
 import jsurl from 'jsurl'
 
-const router = new ReactRouter({
+const router = new Router({
   parseSearch: parseSearchWith(jsurl.parse),
   stringifySearch: stringifySearchWith(jsurl.stringify),
 })

diff --git a/docs/guide/data-loading.md b/docs/guide/data-loading.md
@@ -60,7 +60,7 @@ The biggest reason for calling `onLoad` every time is to notify your data loadin
 Here is a simple example of using `onLoad` to fetch data for a route:
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postsLoader = new Loader({
@@ -107,7 +107,7 @@ Using these parameters, we can do a lot of cool things. Let's take a look at a f
 The `params` property of the `onLoad` function is an object containing the route's path params.
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postLoader = new Loader({
@@ -140,7 +140,7 @@ const postRoute = new Route({
 The `search` and `routeSearch` properties of the `onLoad` function are objects containing the route's search params. `search` contains _all_ of the search params including parent search params. `routeSearch` only includes specific search params from this route. In this example, we'll use zod to validate and parse the search params for `/posts/$postId` route and use them in an `onload` function and our component.
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postsLoader = new Loader({
@@ -181,7 +181,7 @@ The `context` and `routeContext` properties of the `onLoad` function are objects
 > 🧠 Context is a powerful tool for dependency injection. You can use it to inject services, loaders, and other objects into your router and routes. You can also additively pass data down the route tree at every route using a route's `getContext` option.
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postsLoader = new Loader({
@@ -223,7 +223,7 @@ const postsRoute = new Route({
 
 const routeTree = rootRoute.addChildren([postsRoute])
 
-const router = new ReactRouter({
+const router = new Router({
   routeTree,
   context: {
     // Supply our loaderClient to the whole router
@@ -237,7 +237,7 @@ const router = new ReactRouter({
 The `signal` property of the `onLoad` function is an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) which is cancelled when the route is unloaded or when the `onLoad` call becomes outdated. This is useful for cancelling network requests when the route is unloaded or when the route's params change. Here is an example using TanStack Loader's signal passthrough:
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postsLoader = new Loader({
@@ -270,7 +270,7 @@ const postsRoute = new Route({
 The `prefetch` property of the `onLoad` function is a boolean which is `true` when the route is being loaded via a prefetch action. Some data loading libraries may handle prefetching differently than a standard fetch, so you may want to pass `prefetch` to your data loading library, or use it to execute the appropriate data loading logic. Here is an example using TanStack Loader and it's built-in `prefetch` flag:
 
 ```tsx
-import { Route } from '@tanstack/react-router'
+import { Route } from '@tanstack/router'
 import { Loader, useLoaderInstance } from '@tanstack/react-loaders'
 
 const postsLoader = new Loader({