Replace React Router with TanStack Router in Sync Diagnostics Client (#833)

Author: bean1352

.changeset/tough-singers-boil.md

@@ -0,0 +1,5 @@
+---
+'@powersync/diagnostics-app': minor
+---
+
+Migrate routing to @tanstack/react-router and simplify client parameters UI

.gitignore

@@ -8,6 +8,9 @@ dist
 .idea
 .fleet
 
+# TanStack Router generated files
+routeTree.gen.ts
+
 # Useful if running repository in VSCode dev container
 .pnpm-store
 __screenshots__

package.json

@@ -35,6 +35,7 @@
   "devDependencies": {
     "@actions/core": "^1.10.1",
     "@arethetypeswrong/cli": "^0.18.2",
+    "tsx": "^4.8.1",
     "@changesets/cli": "2.27.2",
     "@pnpm/workspace.find-packages": "catalog:",
     "@pnpm/workspace.read-manifest": "catalog:",

pnpm-lock.yaml

@@ -20,19 +20,21 @@
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.2.8",
+    "@tanstack/react-router": "^1.153.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "formik": "^2.4.9",
     "lucide-react": "^0.562.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.3",
     "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0"
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@swc/core": "~1.6.0",
     "@tailwindcss/vite": "^4.1.17",
+    "@tanstack/router-plugin": "^1.153.2",
     "@types/node": "^22.18.1",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",

tools/diagnostics-app/package.json

@@ -1,18 +1,26 @@
 import { createRoot } from 'react-dom/client';
-import { RouterProvider } from 'react-router-dom';
-import { SystemProvider } from '../components/providers/SystemProvider';
-import { ThemeProviderContainer } from '../components/providers/ThemeProviderContainer';
-import { router } from './router';
+import { createRouter, RouterProvider } from '@tanstack/react-router';
+import { routeTree } from '../routeTree.gen';
 
-const root = createRoot(document.getElementById('app')!);
-root.render(<App />);
+// Create the router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: 'intent',
+  defaultPendingComponent: () => (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary"></div>
+      </div>
+    </div>
+  )
+});
 
-export function App() {
-  return (
-    <ThemeProviderContainer>
-      <SystemProvider>
-        <RouterProvider router={router} />
-      </SystemProvider>
-    </ThemeProviderContainer>
-  );
+// Register router for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
 }
+
+const root = createRoot(document.getElementById('app')!);
+root.render(<RouterProvider router={router} />);