convert frontend to use rsbuild

PotLock · Jan 15, 2025 · e57b612 · e57b612
1 parent a4393a1
commit e57b612
Show file tree

Hide file tree

Showing 12 changed files with 215 additions and 74 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/frontend/index.html b/frontend/index.html
@@ -7,6 +7,5 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/package.json b/frontend/package.json
@@ -4,23 +4,27 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite --port 5173",
-    "build": "tsc -b && vite build",
-    "lint": "eslint .",
-    "preview": "vite preview"
+    "dev": "rsbuild dev --port 5173",
+    "build": "rsbuild build && tsc --noEmit",
+    "preview": "rsbuild preview",
+    "lint": "eslint ."
   },
   "dependencies": {
+    "@tanstack/react-router": "^1.97.0",
+    "@tanstack/router-devtools": "^1.97.0",
     "@tailwindcss/typography": "^0.5.15",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "lucide-react": "^0.468.0",
     "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.0.2",
     "tailwindcss": "^3.4.16"
   },
   "devDependencies": {
+    "@rsbuild/core": "1.1.9",
+    "@rsbuild/plugin-react": "1.1.0",
+    "@tanstack/router-plugin": "^1.97.0",
     "@eslint/js": "^9.15.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
@@ -30,7 +34,6 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
     "typescript": "~5.6.2",
-    "typescript-eslint": "^8.15.0",
-    "vite": "^6.0.1"
+    "typescript-eslint": "^8.15.0"
   }
 }
diff --git a/frontend/rsbuild.config.ts b/frontend/rsbuild.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from '@rsbuild/core'
+import { pluginReact } from '@rsbuild/plugin-react'
+import { TanStackRouterRspack } from '@tanstack/router-plugin/rspack'
+
+export default defineConfig({
+  plugins: [pluginReact()],
+  html: {
+    template: './index.html',
+  },
+  tools: {
+    rspack: {
+      plugins: [TanStackRouterRspack()],
+    },
+  },
+})
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,49 +1,22 @@
-import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
-import SubmissionList from "./components/SubmissionList";
-import Settings from "./components/Settings";
-import { LiveUpdateProvider } from "./contexts/LiveUpdateContext";
-import LiveStatus from "./components/LiveStatus";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 
-function App() {
-  return (
-    <LiveUpdateProvider>
-      <Router>
-        <div>
-          <nav className="bg-white border-b-2 border-gray-800 p-6">
-            <div className="max-w-7xl mx-auto flex justify-between items-center">
-              <div className="flex items-center space-x-8">
-                <Link to="/" className="hover:text-gray-600 transition-colors">
-                  <h1 className="text-2xl font-bold">Curation Bot</h1>
-                </Link>
-              </div>
-              <div className="flex items-center gap-4">
-                <LiveStatus />
-                <Link
-                  to="/"
-                  className="hover:text-gray-600 font-medium transition-colors"
-                >
-                  Submissions
-                </Link>
-                <Link
-                  to="/settings"
-                  className="hover:text-gray-600 font-medium transition-colors"
-                >
-                  Settings
-                </Link>
-              </div>
-            </div>
-          </nav>
+import { routeTree } from "./routeTree.gen";
+
+// Set up a Router instance
+const router = createRouter({
+  routeTree,
+  defaultPreload: "intent",
+});
 
-          <div className="max-w-4xl mx-auto min-h-screen">
-            <Routes>
-              <Route path="/" element={<SubmissionList />} />
-              <Route path="/settings" element={<Settings />} />
-            </Routes>
-          </div>
-        </div>
-      </Router>
-    </LiveUpdateProvider>
-  );
+// Register things for typesafety
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+function App() {
+  return <RouterProvider router={router} />;
 }
 
 export default App;
diff --git a/frontend/src/main.tsx → frontend/src/index.tsx b/frontend/src/main.tsx → frontend/src/index.tsx
@@ -7,4 +7,4 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-);
+);
diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts
@@ -0,0 +1,111 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// You should NOT make any changes in this file as it will be overwritten.
+// Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as SettingsImport } from './routes/settings'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const SettingsRoute = SettingsImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => rootRoute,
+} as any)
+
+const IndexRoute = IndexImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+    '/settings': {
+      id: '/settings'
+      path: '/settings'
+      fullPath: '/settings'
+      preLoaderRoute: typeof SettingsImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+  '/settings': typeof SettingsRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/settings'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/settings'
+  id: '__root__' | '/' | '/settings'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  SettingsRoute: typeof SettingsRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  SettingsRoute: SettingsRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/",
+        "/settings"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    },
+    "/settings": {
+      "filePath": "settings.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
@@ -0,0 +1,48 @@
+import { Link, Outlet, createRootRoute } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import LiveStatus from "../components/LiveStatus";
+import { LiveUpdateProvider } from "../contexts/LiveUpdateContext";
+
+export const Route = createRootRoute({
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <>
+      <LiveUpdateProvider>
+        <div>
+          <nav className="bg-white border-b-2 border-gray-800 p-6">
+            <div className="max-w-7xl mx-auto flex justify-between items-center">
+              <div className="flex items-center space-x-8">
+                <Link to="/" className="hover:text-gray-600 transition-colors">
+                  <h1 className="text-2xl font-bold">Curation Bot</h1>
+                </Link>
+              </div>
+              <div className="flex items-center gap-4">
+                <LiveStatus />
+                <Link
+                  to="/"
+                  className="hover:text-gray-600 font-medium transition-colors"
+                >
+                  Submissions
+                </Link>
+                <Link
+                  to="/settings"
+                  className="hover:text-gray-600 font-medium transition-colors"
+                >
+                  Settings
+                </Link>
+              </div>
+            </div>
+          </nav>
+
+          <div className="max-w-4xl mx-auto min-h-screen">
+            <Outlet />
+          </div>
+        </div>
+      </LiveUpdateProvider>
+      <TanStackRouterDevtools position="bottom-right" />
+    </>
+  );
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import SubmissionList from "../components/SubmissionList";
+
+export const Route = createFileRoute("/")({
+  component: SubmissionList,
+});
diff --git a/frontend/src/routes/settings.tsx b/frontend/src/routes/settings.tsx
@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import Settings from "../components/Settings";
+
+export const Route = createFileRoute("/settings")({
+  component: Settings,
+});
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
@@ -20,5 +20,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["rsbuild.config.ts"]
 }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -7,6 +7,5 @@ @@
       </head>
       <body>
         <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
       </body>
     </html>