feat: added tanstack router

frontend-v2/eslint.config.js

@@ -8,6 +8,7 @@ import tseslint from "typescript-eslint";
 import { FlatCompat } from "@eslint/eslintrc";
 import stylisticPlugin from "@stylistic/eslint-plugin";
 import importPlugin from "eslint-plugin-import";
+import pluginRouter from "@tanstack/eslint-plugin-router";
 
 const compat = new FlatCompat({
   baseDirectory: import.meta.dirname
@@ -17,6 +18,7 @@ export default tseslint.config(
   { ignores: ["dist"] },
   {
     extends: [
+      ...pluginRouter.configs["flat/recommended"],
       js.configs.recommended,
       tseslint.configs.recommended,
       ...compat.extends("airbnb"),
@@ -59,6 +61,12 @@ export default tseslint.config(
       // TODO: This rule will be switched ON after complete revamp of frontend
       "@typescript-eslint/no-explicit-any": "off",
       "jsx-a11y/control-has-associated-label": "off",
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: true
+        }
+      ],
       "no-console": "off",
       "arrow-body-style": "off",
       "no-underscore-dangle": [

frontend-v2/package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.1.0",
+    "@tanstack/react-router": "^1.87.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwind-merge": "^2.5.5"
@@ -23,6 +24,9 @@
     "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
     "@stylistic/eslint-plugin": "^2.12.1",
     "@tailwindcss/typography": "^0.5.15",
+    "@tanstack/eslint-plugin-router": "^1.87.6",
+    "@tanstack/router-devtools": "^1.87.9",
+    "@tanstack/router-plugin": "^1.87.11",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react-swc": "^3.5.0",

frontend-v2/src/main.tsx

@@ -1,12 +1,28 @@
 import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom/client";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
 
-import { App } from "./App";
+// Import the generated route tree
+import { routeTree } from "./routeTree.gen";
 
 import "./index.css";
 
-createRoot(document.getElementById("root")!).render(
+// Create a new router instance
-  <StrictMode>
+const router = createRouter({ routeTree });
-    <App />
+
-  </StrictMode>
+// Register the router instance for type safety
-);
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+const rootElement = document.getElementById("root")!;
+if (!rootElement.innerHTML) {
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
+  );
+}

frontend-v2/src/routeTree.gen.ts

@@ -0,0 +1,88 @@
+/* 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 IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+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
+    }
+  }
+}
+
+// Create and export the route tree
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+}
+
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+}
+
+export interface FileRoutesById {
+  __root__: typeof rootRoute
+  '/': typeof IndexRoute
+}
+
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/'
+  id: '__root__' | '/'
+  fileRoutesById: FileRoutesById
+}
+
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+}
+
+export const routeTree = rootRoute
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/"
+      ]
+    },
+    "/": {
+      "filePath": "index.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

frontend-v2/src/routes/__root.tsx

@@ -0,0 +1,17 @@
+import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <div className="flex gap-2 p-2">
+        <Link to="/" className="[&.active]:font-bold">
+          Home
+        </Link>
+      </div>
+      <hr />
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  )
+});

frontend-v2/src/routes/index.tsx

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+function Index() {
+  return (
+    <div className="p-2">
+      <h3>Welcome Home!</h3>
+    </div>
+  );
+}
+
+export const Route = createFileRoute("/")({
+  component: Index,
+  pendingComponent: () => <div>Loading...</div>
+});

frontend-v2/tsr.config.json

@@ -0,0 +1,6 @@
+{
+  "autoCodeSplitting": true,
+  "routeFileIgnorePrefix": "-",
+  "routesDirectory": "./src/routes",
+  "generatedRouteTree": "./src/routeTree.gen.ts"
+}

frontend-v2/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react-swc'
+import react from "@vitejs/plugin-react-swc";
+import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [TanStackRouterVite(), react()]
-})
+});