remove react-router dependency

mickmister · mickmister · commit 29f2ee672492 · 2025-09-24T20:08:08.000-04:00
diff --git a/apps/jamtools/package.json b/apps/jamtools/package.json
@@ -8,7 +8,6 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "react-router-dom": "catalog:",
     "springboard": "workspace:*",
     "@jamtools/core": "workspace:*",
     "@jamtools/features": "workspace:*",
diff --git a/packages/jamtools/features/modules/dashboards/dashboards_module.tsx b/packages/jamtools/features/modules/dashboards/dashboards_module.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import {Link} from 'react-router-dom';
-
 import springboard from 'springboard';
 
 import {ModuleAPI} from 'springboard/engine/module_api';
@@ -35,9 +33,9 @@ springboard.registerModule('Dashboards', {}, async (moduleAPI): Promise<Dashboar
                 <ul>
                     {allDashboards.map(d => (
                         <li key={d.id}>
-                            <Link to={`/modules/Dashboards/${d.id}`}>
+                            <a href={`/modules/Dashboards/${d.id}`}>
                                 {d.label}
-                            </Link>
+                            </a>
                         </li>
                     ))}
                 </ul>
diff --git a/packages/jamtools/features/modules/song_structures_dashboards/song_structures_dashboards_module.tsx b/packages/jamtools/features/modules/song_structures_dashboards/song_structures_dashboards_module.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import {Link} from 'react-router-dom';
-
 import springboard from 'springboard';
 import {MidiEvent} from '@jamtools/core/modules/macro_module/macro_module_types';
 
@@ -140,11 +138,11 @@ springboard.registerModule('song_structures_dashboards', {}, async (moduleAPI):
     moduleAPI.registerRoute('', () => {
         return (
             <div>
-                <Link to='/modules/song_structures_dashboards/bass_guitar'>
+                <a href='/modules/song_structures_dashboards/bass_guitar'>
                     <button>
                         Go to Bass Guitar
                     </button>
-                </Link>
+                </a>
             </div>
         );
     });
diff --git a/packages/jamtools/features/package.json b/packages/jamtools/features/package.json
@@ -22,8 +22,7 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "react": "catalog:",
-    "react-dom": "catalog:",
-    "react-router-dom": "catalog:"
+    "react-dom": "catalog:"
   },
   "config": {
     "dir": "../../../configs"
diff --git a/packages/springboard/core/package.json b/packages/springboard/core/package.json
@@ -28,6 +28,7 @@
     "src",
     "test",
     "types",
+    "ui",
     "utils"
   ],
   "peerDependencies": {
diff --git a/packages/springboard/core/src/index.ts b/packages/springboard/core/src/index.ts
@@ -5,3 +5,5 @@ import {springboard} from '../engine/register';
 // export const SpringboardProvider = engine.SpringboardProvider;
 
 export default springboard;
+
+export {AllModules} from '../module_registry/module_registry';
diff --git a/packages/springboard/external/shoelace/components/shoelace_application_shell.tsx b/packages/springboard/external/shoelace/components/shoelace_application_shell.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 
-import {useLocation, useNavigate} from 'react-router-dom';
+import {useLocation, useNavigate} from '@tanstack/react-router';
 
 import SlTab from '@shoelace-style/shoelace/dist/react/tab/index.js';
 import SlTabGroup from '@shoelace-style/shoelace/dist/react/tab-group/index.js';
@@ -79,10 +79,10 @@ const Tabs = (props: TabsProps) => {
 
     const showRoute = (modId: string, route: string) => {
         if (route.startsWith('/')) {
-            navigate(route);
+            navigate({to: route});
             return;
         }
-        navigate(`/modules/${modId}/${route}`);
+        navigate({to: `/modules/${modId}/${route}`});
     };
 
     const modulesWithRoutes = props.modules.filter(m => m.routes).map(m => (
diff --git a/packages/springboard/external/shoelace/package.json b/packages/springboard/external/shoelace/package.json
@@ -15,7 +15,6 @@
     "springboard": "workspace:*"
   },
   "devDependencies": {
-    "react": "catalog:",
-    "react-router-dom": "catalog:"
+    "@tanstack/react-router": "catalog:"
   }
 }
diff --git a/packages/springboard/platforms/webapp/layout.tsx b/packages/springboard/platforms/webapp/layout.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import {useLocation, matchPath} from 'react-router-dom';
-
 import {Module} from 'springboard/module_registry/module_registry';
 
 type Props = React.PropsWithChildren<{
diff --git a/packages/springboard/platforms/webapp/package.json b/packages/springboard/platforms/webapp/package.json
@@ -8,7 +8,6 @@
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1",
-    "react-router-dom": "^6",
     "springboard": "workspace:*"
   },
   "dependencies": {
diff --git a/packages/springboard/platforms/webapp/tanstack_router_scratch_notes.tsx b/packages/springboard/platforms/webapp/tanstack_router_scratch_notes.tsx
@@ -0,0 +1,112 @@
+// import React from 'react';
+
+// import {
+//     Outlet,
+//     RouterProvider,
+//     createRootRoute,
+//     createRoute,
+//     createRouter,
+//     getRouteApi,
+//     useRouter,
+//     type RouteOptions,
+// } from '@tanstack/react-router';
+
+
+// const root = createRootRoute({
+//     component: () => (
+//         <>
+//             <Outlet />
+//         </>
+//     ),
+// });
+
+
+// const ui = {
+//     enableRouterDevTools: () => { },
+//     root: () => root,
+//     routeProps: {
+//         getParentRoute: () => root,
+//     },
+// };
+
+// interface AllModules { }
+
+// const module1 = () => {
+//     const routes = [
+//         createRoute({
+//             ...ui.routeProps,
+//             path: '/module1',
+//             component: () => {
+//                 return 'hey';
+//             },
+//         })
+//     ];
+
+//     return {
+//         routes,
+//     };
+// };
+
+// interface AllModules {
+//     module1: typeof module1;
+// }
+
+// const module2 = () => {
+//     return {
+//         routes: [
+//             createRoute({
+//                 getParentRoute: ui.root,
+//                 path: '/',
+//                 component: () => {
+//                     const route = getRouteApi('/');
+//                     const search = route.useSearch();
+//                     search.hasDiscount;
+//                     return null;
+//                 },
+//                 validateSearch: search => ({
+//                     query: (search.query as string) || '',
+//                     hasDiscount: search.hasDiscount === 'true',
+//                 }),
+//             }),
+//         ]
+//     };
+// };
+
+// interface AllModules {
+//     module2: typeof module2;
+// }
+
+// const allModules = {
+//     module1,
+//     module2,
+// };//  as const satisfies AllModules;
+
+// type ExtractRoutes<T> = T extends () => {routes: infer R} ? R : never;
+// type Flatten<T> = T extends readonly (infer U)[] ? U : never;
+// type AllRoutes = {
+//     [K in keyof AllModules]: ExtractRoutes<AllModules[K]>;
+// }[keyof AllModules];
+// type AllRoutesFlat = readonly Flatten<AllRoutes>[];
+
+// const allRoutes = [...allModules.module1().routes, ...allModules.module2().routes] as AllRoutesFlat;
+
+// const routeTree = root.addChildren(allRoutes);
+
+// export const router = createRouter({
+//     routeTree,
+//     context: {},
+//     defaultPreload: 'intent',
+//     scrollRestoration: true,
+//     defaultStructuralSharing: true,
+//     defaultPreloadStaleTime: 0,
+// });
+
+// export type Router = typeof router;
+
+// // declare module '@tanstack/react-router' {
+// //     interface Register {
+// //         router: typeof router
+// //     }
+// // }
+
+// // router.navigate({to: '/', search: {hasDiscount: true, query: ''}})
diff --git a/packages/springboard/platforms/webapp/tanstack_types_test.tsx b/packages/springboard/platforms/webapp/tanstack_types_test.tsx
@@ -0,0 +1,15 @@
+import {AnyRoute, createRoute} from '@tanstack/react-router';
+import {rootRoute} from 'springboard/ui/root_route';
+import React from 'react';
+
+const routes: AnyRoute[] = [
+    createRoute({
+        getParentRoute: () => rootRoute,
+        path: '/my-test',
+        component: () => {
+            return (
+                <div/>
+            );
+        },
+    }),
+];
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -27,7 +27,6 @@ catalog:
   "@types/node": "^20.14.2"
   hono: "^4.6.7"
   zod: "^3.23.8"
-  "react-router-dom": "^6.28.1"
   esbuild: "^0.25.0"
   "@tanstack/react-router": "^1.130.12"
   estree-walker: "^2"

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,6 @@`
`15`	`15`	`"springboard": "workspace:*"`
`16`	`16`	`},`
`17`	`17`	`"devDependencies": {`
`18`		`- "react": "catalog:",`
`19`		`- "react-router-dom": "catalog:"`
	`18`	`+ "@tanstack/react-router": "catalog:"`
`20`	`19`	`}`
`21`	`20`	`}`