Router setup

packages/webui/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@effect/schema": "^0.68.17",
     "@tanstack/react-query": "4",
+    "@tanstack/react-router": "^1.44.2",
     "@thilawyn/thilalib": "^0.1.5",
     "@todo-tests/common": "workspace:*",
     "@trpc/client": "^10.45.2",
@@ -23,6 +24,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@tanstack/router-devtools": "^1.44.2",
+    "@tanstack/router-plugin": "^1.44.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.15.0",

packages/webui/src/App.tsx

@@ -1,19 +0,0 @@
-import { PrimeReactProvider } from "primereact/api"
-import "primereact/resources/themes/lara-light-cyan/theme.css"
-import "./index.css"
-import { VTodosSubscription } from "./todo/VTodosSubscription"
-import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
-
-
-export function App() {
-
-    return (
-        <PrimeReactProvider>
-            <TRPCClientProvider>
-                {/* <Index /> */}
-                <VTodosSubscription />
-            </TRPCClientProvider>
-        </PrimeReactProvider>
-    )
-
-}

packages/webui/src/Index.tsx

@@ -1,45 +0,0 @@
-import { Schema as S } from "@effect/schema"
-import { JsonifiableTodo } from "@todo-tests/common/data"
-import { flow } from "effect"
-import { observable } from "mobx"
-import { Todo } from "./data"
-import { VTodos } from "./todo/VTodos"
-import { trpc } from "./trpc/trpc"
-
-
-const decodeTodos = flow(
-    S.decodeSync(
-        S.mutable(S.Array(
-            JsonifiableTodo.pipe(S.compose(Todo))
-        ))
-    ),
-
-    observable.array,
-)
-
-
-export function Index() {
-
-    const todosQuery = trpc.todos.all.useQuery(undefined, { select: decodeTodos })
-
-
-    return <>
-        <div className="container mx-auto">
-            <p className="text-4xl text-center">Todos</p>
-
-            {function() {
-                switch (todosQuery.status) {
-                    case "success":
-                        return <VTodos todos={todosQuery.data} />
-
-                    case "error":
-                        return <p>Failed.</p>
-
-                    case "loading":
-                        return <p>Loading...</p>
-                }
-            }()}
-        </div>
-    </>
-
-}

packages/webui/src/main.tsx

@@ -1,10 +1,29 @@
+import { RouterProvider, createRouter } from "@tanstack/react-router"
+import { PrimeReactProvider } from "primereact/api"
 import React from "react"
 import ReactDOM from "react-dom/client"
-import { App } from "./App"
+import { routeTree } from "./routeTree.gen"
+import { TRPCClientProvider } from "./trpc/TRPCClientProvider"
+
+import "primereact/resources/themes/lara-light-cyan/theme.css"
+import "./index.css"
+
+
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+    interface Register {
+        router: typeof router
+    }
+}
 
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-        <App />
+        <PrimeReactProvider>
+            <TRPCClientProvider>
+                <RouterProvider router={router} />
+            </TRPCClientProvider>
+        </PrimeReactProvider>
     </React.StrictMode>
 )

packages/webui/src/routeTree.gen.ts

@@ -0,0 +1,62 @@
+/* prettier-ignore-start */
+
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file is auto-generated by TanStack Router
+
+import { createFileRoute } from '@tanstack/react-router'
+
+// Import Routes
+
+import { Route as rootRoute } from './routes/__root'
+
+// Create Virtual Routes
+
+const IndexLazyImport = createFileRoute('/')()
+
+// Create/Update Routes
+
+const IndexLazyRoute = IndexLazyImport.update({
+  path: '/',
+  getParentRoute: () => rootRoute,
+} as any).lazy(() => import('./routes/index.lazy').then((d) => d.Route))
+
+// Populate the FileRoutesByPath interface
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexLazyImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren({ IndexLazyRoute })
+
+/* prettier-ignore-end */
+
+/* ROUTE_MANIFEST_START
+{
+  "routes": {
+    "__root__": {
+      "filePath": "__root.tsx",
+      "children": [
+        "/"
+      ]
+    },
+    "/": {
+      "filePath": "index.lazy.tsx"
+    }
+  }
+}
+ROUTE_MANIFEST_END */

packages/webui/src/routes/__root.tsx

@@ -0,0 +1,12 @@
+import { Outlet, createRootRoute } from "@tanstack/react-router"
+
+
+export function Root() {
+    return <>
+        <div className="container mx-auto">
+            <Outlet />
+        </div>
+    </>
+}
+
+export const Route = createRootRoute({ component: Root })

packages/webui/src/routes/index.lazy.tsx

@@ -0,0 +1,9 @@
+import { createLazyFileRoute } from "@tanstack/react-router"
+import { VTodosSubscription } from "../todo/VTodosSubscription"
+
+
+export function Index() {
+    return <VTodosSubscription />
+}
+
+export const Route = createLazyFileRoute("/")({ component: Index })

packages/webui/vite.config.ts

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