docs: update the documentation on the @tanstack/router-plugin packa…

…ge (#1793)

* docs: update the file-based routing guide

* docs: update the quick-start guide

* docs: update the migrate from react-location guide

* docs: more updates to the migration from react-location guide

* docs: update the code-splitting guide

* docs: update the routing concepts guide

* docs: broken link on the code-splitting guide

docs/framework/react/guide/code-splitting.md

@@ -182,7 +182,7 @@ Tada! 🎉
 
 When using the `experimental.enableCodeSplitting` feature, TanStack Router will automatically code split your route files based on the non-critical route configuration mentioned above.
 
-The automatic code-splitting feature is **ONLY** available when you are using file-based routing with a bundler (e.g: Vite). This will **NOT** work if you are **only** using the CLI (`@tanstack/router-cli`).
+The automatic code-splitting feature is **ONLY** available when you are using file-based routing with one of our [supported bundlers](../../guide/file-based-routing#prerequisites). This will **NOT** work if you are **only** using the CLI (`@tanstack/router-cli`).
 
 To enable this feature, you can add the following to your `tsr.config.json`:
 

docs/framework/react/guide/file-based-routing.md

@@ -6,25 +6,36 @@ Most of the TanStack Router documentation is written for file-based routing. Thi
 
 ## Prerequisites
 
-To enable file-based route generation, you'll need to install either the `@tanstack/router-vite-plugin` or `@tanstack/router-cli` package to generate your route tree file.
+To enable file-based routing, you'll need to be using React with a supported bundler. TanStack Router currently has support for the following bundlers:
 
-## Vite Plugin
+- Vite
+- Rspack (coming soon)
+- Webpack (coming soon)
+- Others (let us know if you'd like to see support for a specific bundler)
 
-The `@tanstack/router-vite-plugin` Vite plugin will **automatically generate your route configuration through Vite's dev and build processes**. It is the easiest way to use TanStack Router's route generation features.
+If your bundler is not yet supported, you reach out to us on Discord or GitHub to let us know you'd like to see support for your bundler. Till then, fear not! You can still use the use the [`@tanstack/router-cli`](#configuration-with-the-tanstack-router-cli) package to generate your route tree file.
+
+## Installation
+
+To get started with file-based routing, you'll need to configure your project's bundler to use the TanStack Router Plugin or the TanStack Router CLI.
+
+If you are using TanStack Router's file-based routing through a bundler, the plugin will **automatically generate your route configuration through your bundler's dev and build processes**. It is the easiest way to use TanStack Router's route generation features.
+
+### Configuration with Vite
+
+To use file-based routing with **Vite**, you'll need to install the `@tanstack/router-plugin` package.
 
 ```sh
-npm install @tanstack/router-vite-plugin
+npm install -D @tanstack/router-plugin
 ```
 
-### Vite Configuration
-
-To enable the Vite plugin, add it to your `vite.config.ts` file:
+Once installed, you'll need to add the plugin to your Vite configuration.
 
 ```tsx
 // vite.config.ts
 import { defineConfig } from 'vite'
 import viteReact from '@vitejs/plugin-react'
-import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -36,59 +47,74 @@ export default defineConfig({
 })
 ```
 
-With the plugin enabled, Vite will now watch your configured `routesDirectory` and generate your route tree whenever a file is added, removed, or changed.
+> ⚠️ If you are using the older `@tanstack/router-vite-plugin` package, you can still continue to use it, as it will be aliased to the `@tanstack/router-plugin/vite` package. However, we would recommend using the `@tanstack/router-plugin` package directly.
 
-> ⚠️ Note: To disable the plugin when running tests via vitest, you can conditionally add it based on the current `NODE_ENV`:
+### Configuration with the TanStack Router CLI
 
-```tsx
-// vite.config.ts
-import { defineConfig } from 'vite'
-import viteReact from '@vitejs/plugin-react'
-import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+To use file-based routing with the TanStack Router CLI, you'll need to install the `@tanstack/router-cli` package.
 
-// vitest automatically sets NODE_ENV to 'test' when running tests
-const isTest = process.env.NODE_ENV === 'test'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    !isTest && TanStackRouterVite(),
-    viteReact(),
-    // ...
-  ],
-})
+```sh
+npm install -D @tanstack/router-cli
 ```
 
-## Router CLI
-
-If you are unable to use Vite, you can always use the Router CLI (which is what the Vite plugin uses) to generate your route configuration from your package dev/build scripts.
+Once installed, you'll need to amend your your scripts in your `package.json` for the CLI to `watch` and `generate` files.
 
-```sh
-npm install @tanstack/router-cli
+```json
+{
+  "scripts": {
+    "generate-routes": "tsr generate",
+    "watch-routes": "tsr watch",
+    "build": "npm run generate-routes && ...",
+    "dev": "npm run watch-routes && ..."
+  }
+}
 ```
 
 With the CLI installed, the following commands are made available via the `tsr` command
 
-### `generate`
+#### Using the `generate` command
 
 Generates the routes for a project based on the provided configuration.
 
-**Usage:**
-
-```bash
+```sh
 tsr generate
 ```
 
-### `watch`
+#### Using the `watch` command
 
 Continuously watches the specified directories and regenerates routes as needed.
 
 **Usage:**
 
-```bash
+```sh
 tsr watch
 ```
 
+With file-based routing enabled, whenever you start your application in development mode, TanStack Router will watch your configured `routesDirectory` and generate your route tree whenever a file is added, removed, or changed.
+
+### Disabling the TanStack Router Plugin during tests
+
+> ⚠️ Note: To disable the plugin when running tests via vitest, you can conditionally add it based on the current `NODE_ENV`:
+
+```tsx
+// vite.config.ts
+import { defineConfig } from 'vite'
+import viteReact from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+
+// vitest automatically sets NODE_ENV to 'test' when running tests
+const isTest = process.env.NODE_ENV === 'test'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    !isTest && TanStackRouterVite(),
+    viteReact(),
+    // ...
+  ],
+})
+```
+
 ## Configuration
 
 File-based routing comes with some sane defaults that should work for most projects:

docs/framework/react/guide/routing-concepts.md

@@ -58,7 +58,7 @@ The `createFileRoute` function takes a single argument, the file-route's path as
 
 **❓❓❓ "Wait, you're making me pass the path of the route file to `createFileRoute`?"**
 
-Yes! But don't worry, this path is **automatically written and managed by the router for you via the Vite plugin or Router CLI.** So, as you create new routes, move routes around or rename routes, the path will be updated for you automatically.
+Yes! But don't worry, this path is **automatically written and managed by the router for you via the TanStack Router plugin or Router CLI.** So, as you create new routes, move routes around or rename routes, the path will be updated for you automatically.
 
 > 🧠 The reason for this pathname has everything to do with the magical type safety of TanStack Router. Without this pathname, TypeScript would have no idea what file we're in! (We wish TypeScript had a built-in for this, but they don't yet 🤷‍♂️)
 

docs/framework/react/migrate-from-react-location.md

@@ -35,42 +35,28 @@ npm uninstall @tanstack/react-location @tanstack/react-location-devtools
 
 ### Step 2: Use the file-based routing watcher
 
-If your project uses vite, you can use the our plugin to watch for changes in your routes files and automatically update the routes configuration.
+If your project uses Vite (or one the supported bundlers), you can use the TanStack Router plugin to watch for changes in your routes files and automatically update the routes configuration.
 
-Install the vite plugin:
+Installation of the Vite plugin:
 
 ```bash
-npm install -D @tanstack/router-vite-plugin
+npm install -D @tanstack/router-plugin
 ```
 
 And add it to your `vite.config.js`:
 
 ```js
 import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+import viteReact from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 
 export default defineConfig({
   // ...
-  plugins: [TanStackRouterVite(), react()],
+  plugins: [TanStackRouterVite(), viteReact()],
 })
 ```
 
-However, if your application does not use vite, you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.
-
-```bash
-npm install -D @tanstack/router-cli
-```
-
-And add a script to your `package.json`:
-
-```json
-{
-  "scripts": {
-    "dev": "tsr watch"
-  }
-}
-```
+However, if your application does not use Vite, you use one of our other [supported bundlers](../guide/file-based-routing#prerequisites), or you can use the `@tanstack/router-cli` package to watch for changes in your routes files and automatically update the routes configuration.
 
 ### Step 3: Add the file-based configuration file to your project
 
@@ -210,9 +196,9 @@ function PostsId() {
 
 ### Step 10: Generate the route tree
 
-If you are using vite as your bundler, the route tree will be generated automatically when you run the dev script.
+If you are using one of the supported bundlers, the route tree will be generated automatically when you run the dev script.
 
-If you are not using vite, you can generate the route tree by running the following command:
+If you are not using one of the supported bundlers, you can generate the route tree by running the following command:
 
 ```bash
 npx tsr generate

docs/framework/react/quick-start.md

@@ -4,42 +4,44 @@ title: Quick Start
 
 If you're feeling impatient and prefer to skip all of our wonderful documentation, here is the bare minimum to get going with TanStack Router using both file-based route generation and code-based route configuration:
 
-## Using File-Based Route Generation + Vite
+## Using File-Based Route Generation
 
-File based route generation (via Vite) is the recommended way to use TanStack Router as it provides the best experience, performance, and ergonomics for the least amount of effort.
-
-> 🧠 You can also use the Router CLI (the `tsr` binary) to generate routes if you are unable to use Vite. See [File-Based Routing](../guide/file-based-routing) for more info.
+File based route generation (through Vite, and other supported bundlers) is the recommended way to use TanStack Router as it provides the best experience, performance, and ergonomics for the least amount of effort.
 
 ### Install the Vite Plugin and the Router Devtools
 
 ```bash
-npm install --save-dev @tanstack/router-vite-plugin @tanstack/router-devtools
+npm install --save-dev @tanstack/router-plugin @tanstack/router-devtools
 ```
 
 ### Configure the Vite Plugin
 
 ```tsx
 // vite.config.ts
 import { defineConfig } from 'vite'
-import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
+import viteReact from '@vitejs/plugin-react'
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    // ...,
     TanStackRouterVite(),
+    viteReact(),
+    // ...,
   ],
 })
 ```
 
+> 🧠 If you are not using Vite, or a bundler at all, you can check out the [File-Based Routing](../guide/file-based-routing) guide for more info.
+
 Create the following files:
 
 - `src/routes/__root.tsx`
 - `src/routes/index.lazy.tsx`
 - `src/routes/about.lazy.tsx`
 - `src/main.tsx`
 
-> 🧠 **Route files with the `.lazy.tsx` extension are lazy loaded via separate bundles to keep the main bundle size as lean as possible.**
+> 🧠 Route files with the `.lazy.tsx` extension are lazy loaded via separate bundles to keep the main bundle size as lean as possible.
 
 ### `src/routes/__root.tsx`
 
@@ -100,9 +102,7 @@ function About() {
 
 ### `src/main.tsx`
 
-Regardless if you are using the `@tanstack/router-vite-plugin` or manually run `tsr watch`/`tsr generate` from your package scripts, the following file will be generated for you:
-
-- `src/routeTree.gen.ts`
+Regardless if you are using the `@tanstack/router-plugin` package or manually running the `tsr watch`/`tsr generate` commands from your package scripts, the following file will be generated for you at `src/routeTree.gen.ts`.
 
 Import the generated route tree and create a new router instance:
 
@@ -136,6 +136,8 @@ if (!rootElement.innerHTML) {
 }
 ```
 
+If you are working with this pattern you should change the `id` of the root `<div>` on your `index.html` file to `<div id='root'></div>`
+
 ## Using Code-Based Route Configuration
 
 > ⚠️ **Note:** The following example shows how to configure routes using code, and for simplicity's sake is in a single file for this demo. While code-based generation allows you to declare many routes and even the router instance in a single file, we recommend splitting your routes into separate files for better organization and performance as your application grows.
@@ -212,8 +214,4 @@ if (!rootElement.innerHTML) {
 }
 ```
 
-## Using File-Based Route Configuration
-
-If you are working with this pattern you should change the `id` of the root `<div>` on your `index.html` file to `<div id='app'></div>`
-
 If you glossed over these examples or didn't understand something, we don't blame you, because there's so much more to learn to really take advantage of TanStack Router! Let's move on.