TanStack · schiller-manuel · Dec 23, 2025 · Dec 23, 2025 · Dec 23, 2025 · Dec 23, 2025
diff --git a/e2e/react-router/i18n-paraglide/.gitignore b/e2e/react-router/i18n-paraglide/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+dist
+src/routeTree.gen.ts
+src/paraglide
+*.local
+port*.txt
+test-results
diff --git a/e2e/react-router/i18n-paraglide/index.html b/e2e/react-router/i18n-paraglide/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="TanStack Router i18n-paraglide e2e test"
+    />
+    <title>TanStack Router i18n-paraglide e2e</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/e2e/react-router/i18n-paraglide/messages/de.json b/e2e/react-router/i18n-paraglide/messages/de.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "example_message": "Guten Tag {username}",
+  "hello_about": "Hallo /ueber!",
+  "home_page": "Startseite",
+  "about_page": "Über uns"
+}
diff --git a/e2e/react-router/i18n-paraglide/messages/en.json b/e2e/react-router/i18n-paraglide/messages/en.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "https://inlang.com/schema/inlang-message-format",
+  "example_message": "Hello world {username}",
+  "hello_about": "Hello /about!",
+  "home_page": "Home page",
+  "about_page": "About page"
+}
diff --git a/e2e/react-router/i18n-paraglide/package.json b/e2e/react-router/i18n-paraglide/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "tanstack-router-e2e-react-i18n-paraglide",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port 3000",
+    "dev:e2e": "vite",
+    "build": "vite build && tsc --noEmit",
+    "preview": "vite preview",
+    "start": "vite",
+    "test:e2e": "rm -rf port*.txt; playwright test --project=chromium"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@tanstack/react-router": "workspace:^",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@inlang/paraglide-js": "^2.4.0",
+    "@playwright/test": "^1.50.1",
+    "@tanstack/router-e2e-utils": "workspace:^",
+    "@tanstack/router-plugin": "workspace:^",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "typescript": "^5.7.2",
+    "vite": "^7.1.7"
+  }
+}
diff --git a/e2e/react-router/i18n-paraglide/playwright.config.ts b/e2e/react-router/i18n-paraglide/playwright.config.ts
@@ -0,0 +1,35 @@
+import { defineConfig, devices } from '@playwright/test'
+import { getTestServerPort } from '@tanstack/router-e2e-utils'
+import packageJson from './package.json' with { type: 'json' }
+
+const PORT = await getTestServerPort(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: `VITE_SERVER_PORT=${PORT} pnpm build && pnpm preview --port ${PORT}`,
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+})
diff --git a/e2e/react-router/i18n-paraglide/project.inlang/.gitignore b/e2e/react-router/i18n-paraglide/project.inlang/.gitignore
@@ -0,0 +1 @@
+cache
diff --git a/e2e/react-router/i18n-paraglide/project.inlang/project_id b/e2e/react-router/i18n-paraglide/project.inlang/project_id
@@ -0,0 +1 @@
+apLjNFHNH2yAHYTN5d
diff --git a/e2e/react-router/i18n-paraglide/project.inlang/settings.json b/e2e/react-router/i18n-paraglide/project.inlang/settings.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://inlang.com/schema/project-settings",
+  "baseLocale": "en",
+  "locales": ["en", "de"],
+  "modules": [
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@4/dist/index.js",
+    "https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@2/dist/index.js"
+  ],
+  "plugin.inlang.messageFormat": {
+    "pathPattern": "./messages/{locale}.json"
+  }
+}
diff --git a/e2e/react-router/i18n-paraglide/src/main.tsx b/e2e/react-router/i18n-paraglide/src/main.tsx
@@ -0,0 +1,40 @@
+import { StrictMode } from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createRouter } from '@tanstack/react-router'
+import './styles.css'
+// Import the generated route tree
+import { routeTree } from './routeTree.gen'
+import { deLocalizeUrl, localizeUrl } from './paraglide/runtime.js'
+
+// Create a new router instance
+const router = createRouter({
+  routeTree,
+  context: {},
+  defaultPreload: 'intent',
+  scrollRestoration: true,
+  defaultStructuralSharing: true,
+  defaultPreloadStaleTime: 0,
+
+  rewrite: {
+    input: ({ url }) => deLocalizeUrl(url),
+    output: ({ url }) => localizeUrl(url),
+  },
+})
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router
+  }
+}
+
+// Render the app
+const rootElement = document.getElementById('app')
+if (rootElement && !rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement)
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>,
+  )
+}
diff --git a/e2e/react-router/i18n-paraglide/src/routes/__root.tsx b/e2e/react-router/i18n-paraglide/src/routes/__root.tsx
@@ -0,0 +1,68 @@
+import { Link, Outlet, createRootRoute, redirect } from '@tanstack/react-router'
+import {
+  getLocale,
+  locales,
+  setLocale,
+  shouldRedirect,
+} from '@/paraglide/runtime'
+import { m } from '@/paraglide/messages'
+
+export const Route = createRootRoute({
+  beforeLoad: async () => {
+    document.documentElement.setAttribute('lang', getLocale())
+
+    const decision = await shouldRedirect({ url: window.location.href })
+
+    if (decision.redirectUrl) {
+      throw redirect({ href: decision.redirectUrl.href })
+    }
+  },
+  component: () => (
+    <>
+      <div className="p-2 flex gap-2 text-lg justify-between">
+        <div className="flex gap-2 text-lg">
+          <Link
+            to="/"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            activeOptions={{ exact: true }}
+            data-testid="home-link"
+          >
+            {m.home_page()}
+          </Link>
+
+          <Link
+            to="/about"
+            activeProps={{
+              className: 'font-bold',
+            }}
+            data-testid="about-link"
+          >
+            {m.about_page()}
+          </Link>
+        </div>
+
+        <div className="flex gap-2 text-lg">
+          {locales.map((locale) => (
+            <button
+              key={locale}
+              onClick={() => setLocale(locale)}
+              data-active-locale={locale === getLocale()}
+              data-testid={`locale-${locale}`}
+              className="rounded p-1 px-2 border border-gray-300 cursor-pointer [&[data-active-locale=true]]:bg-gray-500 [&[data-active-locale=true]]:text-white"
+            >
+              {locale}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <hr />
+
+      <div className="p-2">
+        <Outlet />
+      </div>
+    </>
+  ),
+})
diff --git a/e2e/react-router/i18n-paraglide/src/routes/about.tsx b/e2e/react-router/i18n-paraglide/src/routes/about.tsx
@@ -0,0 +1,10 @@
+import { m } from '@/paraglide/messages'
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/about')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <div data-testid="about-content">{m.hello_about()}</div>
+}
diff --git a/e2e/react-router/i18n-paraglide/src/routes/index.tsx b/e2e/react-router/i18n-paraglide/src/routes/index.tsx
@@ -0,0 +1,18 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { m } from '@/paraglide/messages'
+
+export const Route = createFileRoute('/')({
+  component: App,
+})
+
+function App() {
+  return (
+    <div data-testid="home-content">
+      <p>
+        {m.example_message({
+          username: 'TanStack Router!',
+        })}
+      </p>
+    </div>
+  )
+}
diff --git a/e2e/react-router/i18n-paraglide/src/styles.css b/e2e/react-router/i18n-paraglide/src/styles.css
@@ -0,0 +1 @@
+@import 'tailwindcss';