test(e2e): add rsbuild based sandboxed to the end-to-end testing suite (

#2965)

* test(e2e): add rspack basic-file-based sandbox

* test(e2e): add rspack basic-virtual-named-export-config-file-based sandbox

* chore: checkin lockfile

* chore(e2e): switch to referencing the workspace versions

* chore(examples): upgrade rsbuild dependencies to latest

* chore(e2e): remove playwright test results from git history

* chore(root): fix lockfile

* chore(e2e): log out the port being mapped

e2e/react-router/rspack-basic-file-based/.gitignore

@@ -0,0 +1,20 @@
+# Local
+.DS_Store
+*.local
+*.log*
+
+# Dist
+node_modules
+dist/
+
+# IDE
+.vscode/*
+!.vscode/extensions.json
+.idea
+
+# E2E
+src/routeTree.gen.ts
+test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/react-router/rspack-basic-file-based/README.md

@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `pnpm install`
+- `pnpm dev`

e2e/react-router/rspack-basic-file-based/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "tanstack-router-e2e-react-rspack-basic-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "rsbuild dev --port 3000",
+    "build": "rsbuild build && tsc --noEmit",
+    "preview": "rsbuild preview",
+    "start": "rsbuild preview",
+    "test:e2e": "playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "workspace:^",
+    "@tanstack/router-devtools": "workspace:^",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "redaxios": "^0.5.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@rsbuild/core": "1.1.9",
+    "@rsbuild/plugin-react": "1.1.0",
+    "@tanstack/router-plugin": "workspace:^",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
+  }
+}

e2e/react-router/rspack-basic-file-based/playwright.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '../../utils.js'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = derivePort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_SERVER_PORT=${PORT} pnpm start --port ${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/react-router/rspack-basic-file-based/rsbuild.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  html: {
+    tags: [
+      {
+        tag: 'script',
+        attrs: { src: 'https://cdn.tailwindcss.com' },
+      },
+    ],
+  },
+  tools: {
+    rspack: {
+      plugins: [TanStackRouterRspack()],
+    },
+  },
+})

e2e/react-router/rspack-basic-file-based/src/app.tsx

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

e2e/react-router/rspack-basic-file-based/src/env.d.ts

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

e2e/react-router/rspack-basic-file-based/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './app'
+
+const rootEl = document.getElementById('root')
+
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl)
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>,
+  )
+}

e2e/react-router/rspack-basic-file-based/src/posts.tsx

@@ -0,0 +1,32 @@
+import { notFound } from '@tanstack/react-router'
+import axios from 'redaxios'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`)
+  await new Promise((r) => setTimeout(r, 500))
+  const post = await axios
+    .get<PostType>(`https://jsonplaceholder.typicode.com/posts/${postId}`)
+    .then((r) => r.data)
+    .catch((err) => {
+      if (err.status === 404) {
+        throw notFound()
+      }
+      throw err
+    })
+
+  return post
+}
+
+export const fetchPosts = async () => {
+  console.info('Fetching posts...')
+  await new Promise((r) => setTimeout(r, 500))
+  return axios
+    .get<Array<PostType>>('https://jsonplaceholder.typicode.com/posts')
+    .then((r) => r.data.slice(0, 10))
+}

e2e/react-router/rspack-basic-file-based/src/routes/__root.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { Link, Outlet, createRootRoute } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+  component: RootComponent,
+  notFoundComponent: () => {
+    return (
+      <div>
+        <p>This is the notFoundComponent configured on root route</p>
+        <Link to="/">Start Over</Link>
+      </div>
+    )
+  },
+})
+
+function RootComponent() {
+  return (
+    <>
+      <div className="p-2 flex gap-2 text-lg border-b">
+        <Link
+          to="/"
+          activeProps={{
+            className: 'font-bold',
+          }}
+          activeOptions={{ exact: true }}
+        >
+          Home
+        </Link>{' '}
+        <Link
+          to="/posts"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Posts
+        </Link>{' '}
+        <Link
+          to="/layout-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout
+        </Link>{' '}
+        <Link
+          // @ts-expect-error
+          to="/this-route-does-not-exist"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          This Route Does Not Exist
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      {/* Start rendering router matches */}
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  )
+}

e2e/react-router/rspack-basic-file-based/src/routes/_layout.tsx

@@ -0,0 +1,16 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div className="p-2">
+      <div className="border-b">I'm a layout</div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2.tsx

@@ -0,0 +1,34 @@
+import { Link, Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2')({
+  component: LayoutComponent,
+})
+
+function LayoutComponent() {
+  return (
+    <div>
+      <div>I'm a nested layout</div>
+      <div className="flex gap-2 border-b">
+        <Link
+          to="/layout-a"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout A
+        </Link>
+        <Link
+          to="/layout-b"
+          activeProps={{
+            className: 'font-bold',
+          }}
+        >
+          Layout B
+        </Link>
+      </div>
+      <div>
+        <Outlet />
+      </div>
+    </div>
+  )
+}

e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-a.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-a')({
+  component: LayoutAComponent,
+})
+
+function LayoutAComponent() {
+  return <div>I'm layout A!</div>
+}

e2e/react-router/rspack-basic-file-based/src/routes/_layout/_layout-2/layout-b.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/_layout-2/layout-b')({
+  component: LayoutBComponent,
+})
+
+function LayoutBComponent() {
+  return <div>I'm layout B!</div>
+}

e2e/react-router/rspack-basic-file-based/src/routes/index.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: Home,
+})
+
+function Home() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  )
+}

e2e/react-router/rspack-basic-file-based/src/routes/posts.$postId.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { ErrorComponent, createFileRoute } from '@tanstack/react-router'
+import { fetchPost } from '../posts'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/$postId')({
+  loader: async ({ params: { postId } }) => fetchPost(postId),
+  errorComponent: PostErrorComponent,
+  notFoundComponent: () => {
+    return <p>Post not found</p>
+  },
+  component: PostComponent,
+})
+
+export function PostErrorComponent({ error }: ErrorComponentProps) {
+  return <ErrorComponent error={error} />
+}
+
+function PostComponent() {
+  const post = Route.useLoaderData()
+
+  return (
+    <div className="space-y-2">
+      <h4 className="text-xl font-bold underline">{post.title}</h4>
+      <div className="text-sm">{post.body}</div>
+    </div>
+  )
+}

e2e/react-router/rspack-basic-file-based/src/routes/posts.index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/posts/')({
+  component: PostsIndexComponent,
+})
+
+function PostsIndexComponent() {
+  return <div>Select a post.</div>
+}