feat: add tanstack router

canvas/package.json

@@ -33,6 +33,8 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^2.0.2",
     "@replit/codemirror-vim": "^6.1.0",
+    "@tanstack/react-query": "^5.18.1",
+    "@tanstack/react-router": "^1.15.23",
     "@uiw/codemirror-themes": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
     "classnames": "^2.3.2",
@@ -54,6 +56,8 @@
     "webmidi": "^3.1.8"
   },
   "devDependencies": {
+    "@tanstack/router-devtools": "^1.15.23",
+    "@tanstack/router-vite-plugin": "^1.15.22",
     "@types/lodash": "^4.14.202",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",

canvas/src/App.tsx

@@ -1,23 +1,21 @@
-import "./blocks/types/schema"
+import { createRouter, RouterProvider } from "@tanstack/react-router"
+import { StrictMode } from "react"
 
-import { DndContext } from "@dnd-kit/core"
-import { ReactFlowProvider } from "reactflow"
+import { routeTree } from "./routeTree.gen"
 
-import { Canvas } from "./canvas/Canvas"
-import { SlashCommand } from "./canvas/components/SlashCommand"
-import { Toolbar } from "./toolbar/Toolbar"
+const router = createRouter({ routeTree })
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router
+  }
+}
 
 function App() {
   return (
-    <DndContext>
-      <ReactFlowProvider>
-        <div className="relative bg-stone">
-          <Toolbar />
-          <Canvas />
-          <SlashCommand />
-        </div>
-      </ReactFlowProvider>
-    </DndContext>
+    <StrictMode>
+      <RouterProvider router={router} />
+    </StrictMode>
   )
 }
 

canvas/src/routeTree.gen.ts

@@ -0,0 +1,43 @@
+/* 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 {
+    '/': {
+      preLoaderRoute: typeof IndexLazyImport
+      parentRoute: typeof rootRoute
+    }
+  }
+}
+
+// Create and export the route tree
+
+export const routeTree = rootRoute.addChildren([IndexLazyRoute])
+
+/* prettier-ignore-end */

canvas/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 />
+    </>
+  ),
+})

canvas/src/routes/index.lazy.tsx

@@ -0,0 +1,24 @@
+import { createLazyFileRoute } from "@tanstack/react-router"
+import { ReactFlowProvider } from "reactflow"
+
+import "@/blocks/types/schema"
+
+import { Canvas } from "@/canvas/Canvas"
+import { SlashCommand } from "@/canvas/components/SlashCommand"
+import { Toolbar } from "@/toolbar/Toolbar"
+
+export const Route = createLazyFileRoute("/")({
+  component: () => <Index />,
+})
+
+const Index = () => {
+  return (
+    <ReactFlowProvider>
+      <main className="relative bg-stone">
+        <Toolbar />
+        <Canvas />
+        <SlashCommand />
+      </main>
+    </ReactFlowProvider>
+  )
+}

canvas/vite.config.ts

@@ -1,4 +1,5 @@
 import { lezer } from "@lezer/generator/rollup"
+import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
 import glsl from "vite-plugin-glsl"
@@ -7,5 +8,13 @@ import awaits from "vite-plugin-top-level-await"
 import tsconfigPaths from "vite-tsconfig-paths"
 
 export default defineConfig({
-  plugins: [tsconfigPaths(), react(), awaits(), ViteRsw(), glsl(), lezer()],
+  plugins: [
+    tsconfigPaths(),
+    react(),
+    awaits(),
+    ViteRsw(),
+    glsl(),
+    lezer(),
+    TanStackRouterVite(),
+  ],
 })