TanStack · schiller-manuel · Feb 20, 2025 · Jan 26, 2025 · Jan 26, 2025 · Jan 29, 2025
diff --git a/.github/labeler.yml b/.github/labeler.yml
@@ -32,6 +32,8 @@
   - 'packages/router-vite-plugin/**/*'
 'package: server-functions-plugin':
   - 'packages/server-functions-plugin/**/*'
+'package: solid-router':
+  - 'packages/solid-router/**/*'
 'package: start':
   - 'packages/start/**/*'
 'package: start-api-routes':

diff --git a/e2e/solid-router/basic-esbuild-file-based/.gitignore b/e2e/solid-router/basic-esbuild-file-based/.gitignore
@@ -0,0 +1,10 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/e2e/solid-router/basic-esbuild-file-based/index.html b/e2e/solid-router/basic-esbuild-file-based/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
+    <style type="text/tailwindcss">
+      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;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dist/main.js"></script>
+  </body>
+</html>
diff --git a/e2e/solid-router/basic-esbuild-file-based/package.json b/e2e/solid-router/basic-esbuild-file-based/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "tanstack-router-e2e-solid-basic-esbuild-file-based",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "esbuild src/main.tsx --jsx=preserve --jsx-import-source=solid-js --serve=5601 --bundle --outfile=dist/main.js --watch --servedir=.",
+    "build": "esbuild src/main.tsx --jsx=preserve --jsx-import-source=solid-js --bundle --outfile=dist/main.js && tsc --noEmit",
+    "serve": "esbuild src/main.tsx --jsx=preserve --jsx-import-source=solid-js --bundle --outfile=dist/main.js --servedir=.",
+    "start": "dev",
+    "test:e2e": "playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tanstack/router-plugin": "workspace:^",
+    "@tanstack/solid-router": "workspace:^",
+    "@tanstack/zod-adapter": "workspace:^",
+    "redaxios": "^0.5.1",
+    "solid-js": "^1.9.4",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "esbuild": "^0.25.0",
+    "esbuild-plugin-solid": "^0.6.0"
+  }
+}
diff --git a/e2e/solid-router/basic-esbuild-file-based/playwright.config.ts b/e2e/solid-router/basic-esbuild-file-based/playwright.config.ts
@@ -0,0 +1,34 @@
+import { defineConfig, devices } from '@playwright/test'
+import { derivePort } from '@tanstack/router-e2e-utils'
+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: `pnpm run build && pnpm run serve --serve=${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/e2e/solid-router/basic-esbuild-file-based/src/esbuild.config.js b/e2e/solid-router/basic-esbuild-file-based/src/esbuild.config.js
@@ -0,0 +1,13 @@
+import { TanStackRouterEsbuild } from '@tanstack/router-plugin/esbuild'
+import { solidPlugin } from 'esbuild-plugin-solid'
+
+export default {
+  // ...
+  plugins: [
+    TanStackRouterEsbuild({
+      target: 'solid',
+      autoCodeSplitting: true,
+    }),
+    solidPlugin(),
+  ],
+}
diff --git a/e2e/solid-router/basic-esbuild-file-based/src/main.tsx b/e2e/solid-router/basic-esbuild-file-based/src/main.tsx
@@ -0,0 +1,24 @@
+import { render } from 'solid-js/web'
+import { RouterProvider, createRouter } from '@tanstack/solid-router'
+import { routeTree } from './routeTree.gen'
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultStaleTime: 5000,
+  scrollRestoration: true,
+})
+
+// Register things for typesafety
+declare module '@tanstack/solid-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+const rootElement = document.getElementById('app')!
+
+if (!rootElement.innerHTML) {
+  render(() => <RouterProvider router={router} />, rootElement)
+}
diff --git a/e2e/solid-router/basic-esbuild-file-based/src/posts.tsx b/e2e/solid-router/basic-esbuild-file-based/src/posts.tsx
@@ -0,0 +1,32 @@
+import { notFound } from '@tanstack/solid-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))
+}