feat: add rsbuild support for TanStack Start

e2e/react-start/basic/package.json

@@ -4,12 +4,12 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "dev": "vite dev --port 3000",
-    "dev:e2e": "vite dev",
-    "build": "vite build && tsc --noEmit",
-    "build:spa": "MODE=spa vite build && tsc --noEmit",
-    "build:prerender": "MODE=prerender vite build && tsc --noEmit",
-    "preview": "vite preview",
+    "dev": "node scripts/run-bundler.mjs dev --port 3000",
+    "dev:e2e": "node scripts/run-bundler.mjs dev",
+    "build": "node scripts/run-bundler.mjs build",
+    "build:spa": "MODE=spa node scripts/run-bundler.mjs build",
+    "build:prerender": "MODE=prerender node scripts/run-bundler.mjs build",
+    "preview": "node scripts/run-bundler.mjs preview",
     "start": "node server.js",
     "test:e2e:startDummyServer": "node -e 'import(\"./tests/setup/global.setup.ts\").then(m => m.default())' &",
     "test:e2e:stopDummyServer": "node -e 'import(\"./tests/setup/global.teardown.ts\").then(m => m.default())'",
@@ -33,6 +33,8 @@
   },
   "devDependencies": {
     "@playwright/test": "^1.50.1",
+    "@rsbuild/core": "^1.2.4",
+    "@rsbuild/plugin-react": "^1.1.0",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/router-e2e-utils": "workspace:^",
     "@types/js-cookie": "^3.0.6",

e2e/react-start/basic/rsbuild.config.ts

@@ -0,0 +1,49 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { tanstackStart } from '@tanstack/react-start/plugin/rsbuild'
+import { isSpaMode } from './tests/utils/isSpaMode'
+import { isPrerender } from './tests/utils/isPrerender'
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
+
+const spaModeConfiguration = {
+  enabled: true,
+  prerender: {
+    outputPath: 'index.html',
+  },
+}
+
+const prerenderConfiguration = {
+  enabled: true,
+  filter: (page: { path: string }) =>
+    ![
+      '/this-route-does-not-exist',
+      '/redirect',
+      '/i-do-not-exist',
+      '/not-found/via-beforeLoad',
+      '/not-found/via-loader',
+      '/specialChars/search',
+      '/specialChars/hash',
+      '/specialChars/malformed',
+      '/users',
+    ].some((p) => page.path.includes(p)),
+  maxRedirects: 100,
+}
+
+export default defineConfig({
+  plugins: [
+    pluginReact(),
+    ...tanstackStart({
+      spa: isSpaMode ? spaModeConfiguration : undefined,
+      prerender: isPrerender ? prerenderConfiguration : undefined,
+    }),
+  ],
+  tools: {},
+  source: {
+    alias: {
+      '~': path.resolve(currentDir, 'src'),
+    },
+  },
+})

e2e/react-start/basic/scripts/run-bundler.mjs

@@ -0,0 +1,57 @@
+import { spawn } from 'node:child_process'
+
+const command = process.argv[2]
+const args = process.argv.slice(3)
+
+if (!command) {
+  console.error('Missing bundler command')
+  process.exit(1)
+}
+
+const bundler = process.env.BUNDLER === 'rsbuild' ? 'rsbuild' : 'vite'
+
+const extractPort = (args) => {
+  const portIndex = args.indexOf('--port')
+  if (portIndex >= 0 && args[portIndex + 1]) {
+    return args[portIndex + 1]
+  }
+  return null
+}
+
+const run = (cmd, cmdArgs) =>
+  new Promise((resolve, reject) => {
+    const child = spawn(cmd, cmdArgs, {
+      stdio: 'inherit',
+      env: process.env,
+      shell: process.platform === 'win32',
+    })
+    child.on('error', (error) => {
+      reject(error)
+    })
+    child.on('close', (code) => {
+      if (code === 0) {
+        resolve()
+      } else {
+        reject(new Error(`${cmd} exited with code ${code}`))
+      }
+    })
+  })
+
+try {
+  if (bundler === 'rsbuild' && command === 'preview') {
+    const port = extractPort(args)
+    if (port) {
+      process.env.PORT = port
+    }
+    await run('node', ['server.js'])
+  } else {
+    await run(bundler, [command, ...args])
+
+    if (command === 'build') {
+      await run('tsc', ['--noEmit'])
+    }
+  }
+} catch (error) {
+  console.error(error)
+  process.exit(1)
+}

e2e/react-start/basic/server.js

@@ -18,7 +18,12 @@ export async function createStartServer() {
 
   // to keep testing uniform stop express from redirecting /posts to /posts/
   // when serving pre-rendered pages
-  app.use(express.static('./dist/client', { redirect: !isPrerender }))
+  app.use(
+    express.static('./dist/client', {
+      redirect: !isPrerender,
+      ...(isPrerender ? {} : { index: false }),
+    }),
+  )
 
   app.use(async (req, res, next) => {
     try {

e2e/react-start/basic/src/routeTree.gen.ts

@@ -1,9 +1,3 @@
-/* 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.
@@ -1365,6 +1359,7 @@ export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
 
+
 import type { getRouter } from './router.tsx'
 import type { createStart } from '@tanstack/react-start'
 declare module '@tanstack/react-start' {

e2e/react-start/basic/src/routes/__root.tsx

@@ -10,7 +10,7 @@ import {
 
 import { DefaultCatchBoundary } from '~/components/DefaultCatchBoundary'
 import { NotFound } from '~/components/NotFound'
-import appCss from '~/styles/app.css?url'
+import '~/styles/app.css'
 import { seo } from '~/utils/seo'
 
 export const Route = createRootRoute({
@@ -30,7 +30,6 @@ export const Route = createRootRoute({
       }),
     ],
     links: [
-      { rel: 'stylesheet', href: appCss },
       {
         rel: 'apple-touch-icon',
         sizes: '180x180',

e2e/react-start/basic/src/styles/app.css

@@ -1,30 +1,57 @@
-@import 'tailwindcss' source('../');
-
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-}
-
-@layer base {
-  html {
-    color-scheme: light dark;
-  }
-
-  * {
-    @apply border-gray-200 dark:border-gray-800;
-  }
-
-  html,
-  body {
-    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
-  }
-
-  .using-mouse * {
-    outline: none !important;
-  }
+*,
+*::before,
+*::after,
+::backdrop,
+::file-selector-button {
+  box-sizing: border-box;
+  border-color: #e5e7eb;
+}
+
+html {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+  background-color: #f9fafb;
+  color: #111827;
+}
+
+.using-mouse * {
+  outline: none !important;
+}
+
+.p-2 {
+  padding: 0.5rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.gap-2 {
+  gap: 0.5rem;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.italic {
+  font-style: italic;
 }

packages/react-router/eslint.config.ts

@@ -8,6 +8,12 @@ export default [
   {
     files: ['src/**/*.{ts,tsx}', 'tests/**/*.{ts,tsx}'],
   },
+  {
+    files: ['llms/rules/**/*.ts'],
+    rules: {
+      'no-useless-escape': 'off',
+    },
+  },
   {
     plugins: {
       'react-hooks': pluginReactHooks,

packages/react-start/package.json

@@ -74,6 +74,12 @@
         "default": "./dist/esm/plugin/vite.js"
       }
     },
+    "./plugin/rsbuild": {
+      "import": {
+        "types": "./dist/esm/plugin/rsbuild.d.ts",
+        "default": "./dist/esm/plugin/rsbuild.js"
+      }
+    },
     "./server-entry": {
       "import": {
         "types": "./dist/default-entry/esm/server.d.ts",
@@ -101,8 +107,17 @@
     "pathe": "^2.0.3"
   },
   "peerDependencies": {
+    "@rsbuild/core": ">=1.0.0",
     "react": ">=18.0.0 || >=19.0.0",
     "react-dom": ">=18.0.0 || >=19.0.0",
     "vite": ">=7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@rsbuild/core": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
+    }
   }
 }

packages/react-start/src/plugin/rsbuild.ts

@@ -0,0 +1,35 @@
+import { fileURLToPath } from 'node:url'
+import path from 'pathe'
+import { TanStackStartRsbuildPluginCore } from '@tanstack/start-plugin-core/rsbuild'
+import type { TanStackStartInputConfig } from '@tanstack/start-plugin-core'
+
+type RsbuildPlugin = {
+  name: string
+  setup: (api: any) => void
+}
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url))
+const defaultEntryDir = path.resolve(
+  currentDir,
+  '..',
+  '..',
+  'plugin',
+  'default-entry',
+)
+const defaultEntryPaths = {
+  client: path.resolve(defaultEntryDir, 'client.tsx'),
+  server: path.resolve(defaultEntryDir, 'server.ts'),
+  start: path.resolve(defaultEntryDir, 'start.ts'),
+}
+
+export function tanstackStart(
+  options?: TanStackStartInputConfig,
+): Array<RsbuildPlugin> {
+  return TanStackStartRsbuildPluginCore(
+    {
+      framework: 'react',
+      defaultEntryPaths,
+    },
+    options,
+  )
+}

packages/react-start/vite.config.ts

@@ -31,6 +31,7 @@ export default mergeConfig(
       './src/server-rpc.ts',
       './src/ssr-rpc.ts',
       './src/plugin/vite.ts',
+      './src/plugin/rsbuild.ts',
     ],
     externalDeps: [
       '@tanstack/react-start-client',

packages/router-core/src/router.ts

@@ -2048,7 +2048,7 @@ export class RouterCore<
    * Commit a previously built location to history (push/replace), optionally
    * using view transitions and scroll restoration options.
    */
-  commitLocation: CommitLocationFn = async ({
+  commitLocation: CommitLocationFn = ({
     viewTransition,
     ignoreBlocker,
     ...next
@@ -2379,7 +2379,7 @@ export class RouterCore<
             onReady: async () => {
               // Wrap batch in framework-specific transition wrapper (e.g., Solid's startTransition)
               this.startTransition(() => {
-                this.startViewTransition(async () => {
+                this.startViewTransition(() => {
                   // this.viewTransitionPromise = createControlledPromise<true>()
 
                   // Commit the pending matches. If a previous match was
@@ -2442,6 +2442,8 @@ export class RouterCore<
                       )
                     })
                   })
+
+                  return Promise.resolve()
                 })
               })
             },