deps: Add TanStack Router

package.json

@@ -44,6 +44,8 @@
     "@sveltejs/adapter-static": "^3.0.0",
     "@sveltejs/kit": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tanstack/router-devtools": "^1.29.2",
+    "@tanstack/router-vite-plugin": "^1.30.0",
     "@tauri-apps/cli": "^1",
     "@types/react": "18.2",
     "@types/react-dom": "^18.2.7",
@@ -79,6 +81,7 @@
     "@mantine/core": "^7.7.0",
     "@mantine/form": "^7.7.0",
     "@mantine/hooks": "^7.7.0",
+    "@tanstack/react-router": "^1.29.2",
     "@tauri-apps/api": "^1",
     "bits-ui": "^0.14.0",
     "clsx": "^2.1.0",

src/App.tsx

@@ -18,9 +18,19 @@ import { F7CircleRighthalfFill } from "./components/icons/F7CircleRightHalfFill"
 import { F7MoonFill } from "./components/icons/F7MoonFill";
 import { F7SunMaxFill } from "./components/icons/F7SunMaxFill";
 import { Sidebar } from "./components/organisms/Sidebar";
-import { Books } from "./components/pages/Books";
 import { settings } from "./stores/settings";
 
+import {routeTree} from "./routeTree.gen";
+import { RouterProvider, createRouter } from "@tanstack/react-router";
+
+const router = createRouter({ routeTree});
+
+declare module '@tanstack/react-router' {
+	interface Register {
+		router: typeof router;
+	}
+}
+
 export const App = () => {
 	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(false);
 	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
@@ -154,7 +164,7 @@ const MainPure = ({
 			</AppShell.Navbar>
 
 			<AppShell.Main>
-				<Books />
+				<RouterProvider router={router} />
 			</AppShell.Main>
 		</>
 	);

src/routeTree.gen.ts

@@ -0,0 +1,38 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+import { Route as IndexImport } from './routes/index'
+
+// Create/Update Routes
+
+const IndexRoute = IndexImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any)
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      preLoaderRoute: typeof IndexImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexRoute])
+
+/* prettier-ignore-end */

src/routes/__root.tsx

@@ -0,0 +1,11 @@
+import { createRootRoute, Outlet } from '@tanstack/react-router'
+import { TanStackRouterDevtools } from '@tanstack/router-devtools'
+
+export const Route = createRootRoute({
+  component: () => (
+    <>
+      <Outlet />
+      <TanStackRouterDevtools />
+    </>
+  ),
+})

src/routes/index.tsx

@@ -0,0 +1,10 @@
+import { Books } from "@/components/pages/Books";
+import { createFileRoute } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/")({
+	component: Index,
+});
+
+function Index() {
+	return <Books />;
+}

vite.config.ts

@@ -1,31 +1,29 @@
 import { defineConfig } from "vitest/config";
 import Icons from "unplugin-icons/vite";
 import react from "@vitejs/plugin-react-swc";
-import path from 'path';
+import path from "path";
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin";
 
 export default defineConfig({
-  plugins: [
-    react(),
-    Icons(),
-  ],
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-      $lib: path.resolve(__dirname, './src/lib'),
-    }
-  },
-  // 1. prevent vite from obscuring rust errors
-  clearScreen: false,
-  server: {
-    port: 1420,
-    // 2. tauri expects a fixed port, fail if that port is not available
-    strictPort: true,
-    watch: {
-      // 3. tell vite to ignore watching `src-tauri`
-      ignored: ["**/src-tauri/**"],
-    },
-  },
-  test: {
-    include: ["src/**/*.{test,spec}.{js,ts}"],
-  },
+	plugins: [react(), Icons(), TanStackRouterVite()],
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "./src"),
+			$lib: path.resolve(__dirname, "./src/lib"),
+		},
+	},
+	// 1. prevent vite from obscuring rust errors
+	clearScreen: false,
+	server: {
+		port: 1420,
+		// 2. tauri expects a fixed port, fail if that port is not available
+		strictPort: true,
+		watch: {
+			// 3. tell vite to ignore watching `src-tauri`
+			ignored: ["**/src-tauri/**"],
+		},
+	},
+	test: {
+		include: ["src/**/*.{test,spec}.{js,ts}"],
+	},
 });