docs(solid-router): rspack/build guides and example

docs/router/framework/solid/installation/with-rspack.md

@@ -0,0 +1,89 @@
+---
+title: Installation with Rspack
+---
+
+[//]: # 'BundlerConfiguration'
+
+To use file-based routing with **Rspack** or **Rsbuild**, you'll need to install the `@tanstack/router-plugin` package.
+
+```sh
+npm install -D @tanstack/router-plugin
+```
+
+Once installed, you'll need to add the plugin to your configuration.
+
+```tsx
+// rsbuild.config.ts
+import { defineConfig } from '@rsbuild/core'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+  ],
+  tools: {
+    rspack: {
+      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],
+    },
+  },
+})
+```
+
+Or, you can clone our [Quickstart Rspack/Rsbuild example](https://github.com/TanStack/router/tree/main/examples/solid/quickstart-rspack-file-based) and get started.
+
+Now that you've added the plugin to your Rspack/Rsbuild configuration, you're all set to start using file-based routing with TanStack Router.
+
+[//]: # 'BundlerConfiguration'
+
+## Ignoring the generated route tree file
+
+If your project is configured to use a linter and/or formatter, you may want to ignore the generated route tree file. This file is managed by TanStack Router and therefore shouldn't be changed by your linter or formatter.
+
+Here are some resources to help you ignore the generated route tree file:
+
+- Prettier - [https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore](https://prettier.io/docs/en/ignore.html#ignoring-files-prettierignore)
+- ESLint - [https://eslint.org/docs/latest/use/configure/ignore#ignoring-files](https://eslint.org/docs/latest/use/configure/ignore#ignoring-files)
+- Biome - [https://biomejs.dev/reference/configuration/#filesignore](https://biomejs.dev/reference/configuration/#filesignore)
+
+> [!WARNING]
+> If you are using VSCode, you may experience the route tree file unexpectedly open (with errors) after renaming a route.
+
+You can prevent that from the VSCode settings by marking the file as readonly. Our recommendation is to also exclude it from search results and file watcher with the following settings:
+
+```json
+{
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  }
+}
+```
+
+You can use those settings either at a user level or only for a single workspace by creating the file `.vscode/settings.json` at the root of your project.
+
+## Configuration
+
+When using the TanStack Router Plugin with Rspack (or Rsbuild) for File-based routing, it comes with some sane defaults that should work for most projects:
+
+```json
+{
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts",
+  "routeFileIgnorePrefix": "-",
+  "quoteStyle": "single"
+}
+```
+
+If these defaults work for your project, you don't need to configure anything at all! However, if you need to customize the configuration, you can do so by editing the configuration object passed into the `tanstackRouter` function.
+
+You can find all the available configuration options in the [File-based Routing API Reference](../../../../api/file-based-routing.md).

examples/solid/quickstart-esbuild-file-based/build.js

@@ -13,6 +13,7 @@ const ctx = await esbuild.context({
   format: 'esm',
   target: ['esnext'],
   sourcemap: true,
+  conditions: ['style'],
   plugins: [
     solidPlugin(),
     tanstackRouter({ target: 'solid', autoCodeSplitting: true }),

examples/solid/quickstart-esbuild-file-based/package.json

@@ -9,11 +9,12 @@
     "start": "dev"
   },
   "dependencies": {
+    "@tanstack/router-plugin": "^1.135.2",
     "@tanstack/solid-router": "^1.135.2",
     "@tanstack/solid-router-devtools": "^1.135.2",
-    "@tanstack/router-plugin": "^1.135.2",
-    "solid-js": "^1.9.10",
     "redaxios": "^0.5.1",
+    "solid-js": "^1.9.10",
+    "tailwindcss": "^4.1.17",
     "zod": "^3.24.2"
   },
   "devDependencies": {

examples/solid/quickstart-esbuild-file-based/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

examples/solid/quickstart-esbuild-file-based/src/main.tsx

@@ -1,6 +1,7 @@
 import { render } from 'solid-js/web'
 import { RouterProvider, createRouter } from '@tanstack/solid-router'
 import { routeTree } from './routeTree.gen'
+import './styles.css'
 
 // Set up a Router instance
 const router = createRouter({

examples/solid/quickstart-esbuild-file-based/src/styles.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+* {
+  @apply border-gray-200 dark:border-gray-800;
+}
+body {
+  @apply bg-gray-50 text-gray-950 dark:bg-gray-900 dark:text-gray-200;
+}

examples/solid/quickstart-rspack-file-based/.gitignore

@@ -0,0 +1,11 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.idea

examples/solid/quickstart-rspack-file-based/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  }
+}

examples/solid/quickstart-rspack-file-based/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm start` or `yarn start`

examples/solid/quickstart-rspack-file-based/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "tanstack-router-solid-example-quickstart-rspack-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev --port 3000",
+    "build": "rsbuild build && tsc --noEmit",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.1.15",
+    "@tanstack/solid-router": "^1.135.2",
+    "@tanstack/solid-router-devtools": "^1.135.2",
+    "postcss": "^8.5.1",
+    "solid-js": "^1.9.10",
+    "tailwindcss": "^4.1.15"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "1.2.4",
+    "@rsbuild/plugin-babel": "^1.0.6",
+    "@rsbuild/plugin-solid": "1.0.6",
+    "@tanstack/router-plugin": "^1.135.2",
+    "typescript": "^5.6.2"
+  }
+}

examples/solid/quickstart-rspack-file-based/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}

examples/solid/quickstart-rspack-file-based/rsbuild.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+import { pluginSolid } from '@rsbuild/plugin-solid'
+import { tanstackRouter } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginSolid(),
+  ],
+  tools: {
+    rspack: {
+      plugins: [tanstackRouter({ target: 'solid', autoCodeSplitting: true })],
+    },
+  },
+})

examples/solid/quickstart-rspack-file-based/src/app.tsx

@@ -0,0 +1,23 @@
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+
+import { routeTree } from './routeTree.gen'
+import './styles.css'
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+const App = () => {
+  return <RouterProvider router={router} />
+}
+
+export default App

examples/solid/quickstart-rspack-file-based/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

examples/solid/quickstart-rspack-file-based/src/index.tsx

@@ -0,0 +1,8 @@
+import { render } from 'solid-js/web'
+import App from './app'
+
+const rootElement = document.getElementById('root')!
+
+if (!rootElement.innerHTML) {
+  render(() => <App />, rootElement)
+}

examples/solid/quickstart-rspack-file-based/src/routeTree.gen.ts

@@ -0,0 +1,77 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// 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 AboutRouteImport } from './routes/about'
+import { Route as IndexRouteImport } from './routes/index'
+
+const AboutRoute = AboutRouteImport.update({
+  id: '/about',
+  path: '/about',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/about': typeof AboutRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/about'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/about'
+  id: '__root__' | '/' | '/about'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  AboutRoute: typeof AboutRoute
+}
+
+declare module '@tanstack/solid-router' {
+  interface FileRoutesByPath {
+    '/about': {
+      id: '/about'
+      path: '/about'
+      fullPath: '/about'
+      preLoaderRoute: typeof AboutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  AboutRoute: AboutRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

examples/solid/quickstart-rspack-file-based/src/routes/__root.tsx

@@ -0,0 +1,35 @@
+import { Link, Outlet, createRootRoute } from '@tanstack/solid-router'
+import { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+})
+
+function RootComponent() {
+  return (
+    <>
+      <div class="p-2 flex gap-2 text-lg">
+        <Link
+          to="/"
+          activeProps={{
+            class: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+        >
+          Home
+        </Link>{' '}
+        <Link
+          to="/about"
+          activeProps={{
+            class: 'font-bold',
+          }}
+        >
+          About
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  )
+}

examples/solid/quickstart-rspack-file-based/src/routes/about.tsx

@@ -0,0 +1,13 @@
+import { createFileRoute } from '@tanstack/solid-router'
+
+export const Route = createFileRoute('/about')({
+  component: AboutComponent,
+})
+
+function AboutComponent() {
+  return (
+    <div class="p-2">
+      <h3>About</h3>
+    </div>
+  )
+}