test(vue-router): rsbuild suites (#6117)

Author: birkskyum

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

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

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

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

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

@@ -0,0 +1,33 @@
+{
+  "name": "tanstack-router-e2e-vue-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": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/vue-router": "workspace:^",
+    "@tanstack/vue-router-devtools": "workspace:^",
+    "redaxios": "^0.5.1",
+    "vue": "^3.5.16"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@rsbuild/core": "^1.2.4",
+    "@rsbuild/plugin-babel": "^1.0.6",
+    "@rsbuild/plugin-vue": "^1.2.2",
+    "@rsbuild/plugin-vue-jsx": "^1.1.1",
+    "@tailwindcss/postcss": "^4.1.15",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@tanstack/router-plugin": "workspace:^",
+    "@tanstack/virtual-file-routes": "workspace:^",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^4.1.17",
+    "typescript": "^5.7.2",
+    "vue-tsc": "^3.1.5"
+  }
+}

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

@@ -0,0 +1,41 @@
+import { defineConfig, devices } from '@playwright/test'
+import {
+  getDummyServerPort,
+  getTestServerPort,
+} from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(packageJson.name)
+const EXTERNAL_PORT = await getDummyServerPort(packageJson.name)
+const baseURL = `http://localhost:${PORT}`
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  workers: 1,
+
+  reporter: [['line']],
+
+  globalSetup: './tests/setup/global.setup.ts',
+  globalTeardown: './tests/setup/global.teardown.ts',
+
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL,
+  },
+
+  webServer: {
+    command: `PUBLIC_NODE_ENV="test" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm build && PUBLIC_NODE_ENV="test" PUBLIC_EXTERNAL_PORT=${EXTERNAL_PORT} PUBLIC_SERVER_PORT=${PORT} pnpm preview --port ${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})

e2e/vue-router/rspack-basic-file-based/postcss.config.mjs

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

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

@@ -0,0 +1,33 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginVue } from '@rsbuild/plugin-vue'
+import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx'
+import { tanstackRouter } from '@tanstack/router-plugin/rspack'
+import { pluginBabel } from '@rsbuild/plugin-babel'
+
+export default defineConfig({
+  plugins: [
+    pluginBabel({
+      include: /\.(?:jsx|tsx)$/,
+    }),
+    pluginVue(),
+    pluginVueJsx(),
+  ],
+  source: {
+    define: {
+      // Rsbuild only defines `import.meta.env.PUBLIC_*` when the env var exists.
+      // When it doesn't, rspack can transform `import.meta.env` to `void 0`, which
+      // makes `import.meta.env.PUBLIC_*` crash at runtime.
+      'import.meta.env.PUBLIC_NODE_ENV': JSON.stringify(
+        process.env.PUBLIC_NODE_ENV ?? '',
+      ),
+      'import.meta.env.PUBLIC_EXTERNAL_PORT': JSON.stringify(
+        process.env.PUBLIC_EXTERNAL_PORT ?? '',
+      ),
+    },
+  },
+  tools: {
+    rspack: {
+      plugins: [tanstackRouter({ target: 'vue', autoCodeSplitting: true })],
+    },
+  },
+})

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

@@ -0,0 +1,23 @@
+import { RouterProvider, createRouter } from '@tanstack/vue-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/vue-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+const App = () => {
+  return <RouterProvider router={router} />
+}
+
+export default App

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

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

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

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './app'
+
+const rootEl = document.getElementById('root')
+
+if (!rootEl?.innerHTML) {
+  createApp({
+    setup() {
+      return () => <App />
+    },
+  }).mount('#root')
+}

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

@@ -0,0 +1,36 @@
+import { notFound } from '@tanstack/vue-router'
+import axios from 'redaxios'
+
+export type PostType = {
+  id: string
+  title: string
+  body: string
+}
+
+let queryURL = 'https://jsonplaceholder.typicode.com'
+
+if (import.meta.env.PUBLIC_NODE_ENV === 'test') {
+  queryURL = `http://localhost:${import.meta.env.PUBLIC_EXTERNAL_PORT}`
+}
+
+export const fetchPost = async (postId: string) => {
+  console.info(`Fetching post with id ${postId}...`)
+  const post = await axios
+    .get<PostType>(`${queryURL}/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...')
+  return axios
+    .get<Array<PostType>>(`${queryURL}/posts`)
+    .then((r) => r.data.slice(0, 10))
+}