Migrate to tanstack router

.prettierignore

@@ -1,2 +1,3 @@
 *.js
 *.json
+/website/routeTree.gen.ts

biome.json

@@ -6,7 +6,8 @@
       "./coverage/**/*",
       "./dist/**/*",
       "./lib/**/*",
-      "./node_modules/**/*"
+      "./node_modules/**/*",
+      "./website/routeTree.gen.ts"
     ]
   },
   "formatter": {

package.json

@@ -69,6 +69,8 @@
     "@microsoft/api-extractor": "^7.23.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
+    "@tanstack/react-router": "^1.57.13",
+    "@tanstack/router-plugin": "^1.57.13",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -99,7 +101,6 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.11.1",
     "rollup": "^4.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "~5.6.2",

vite.config.ts

@@ -1,9 +1,11 @@
+import { TanStackRouterVite } from '@tanstack/router-plugin/vite';
 import react from '@vitejs/plugin-react';
 import wyw from '@wyw-in-js/vite';
 import browserslist from 'browserslist';
 import { defineConfig } from 'vite';
 
 const isCI = process.env.CI === 'true';
+const isTest = process.env.NODE_ENV === 'test';
 
 export default defineConfig(({ command }) => ({
   base: '/react-data-grid/',
@@ -19,6 +21,11 @@ export default defineConfig(({ command }) => ({
     stringify: true
   },
   plugins: [
+    !isTest &&
+      TanStackRouterVite({
+        generatedRouteTree: 'website/routeTree.gen.ts',
+        routesDirectory: 'website/routes'
+      }),
     react({
       exclude: ['./.cache/**/*']
     }),

website/Nav.tsx

@@ -1,4 +1,4 @@
-import { NavLink } from 'react-router-dom';
+import { Link } from '@tanstack/react-router';
 import { css } from '@linaria/core';
 
 import type { Direction } from '../src/types';
@@ -27,15 +27,15 @@ const navClassname = css`
     &:hover {
       background-color: light-dark(hsl(210deg 50% 90%), hsl(210deg 50% 30%));
     }
-  }
-`;
 
-const activeNavClassname = css`
-  font-weight: 500;
-  background-color: light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%));
+    &[aria-current='page'] {
+      font-weight: 500;
+      background-color: light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%));
 
-  a&:hover {
-    background-color: light-dark(hsl(210deg 50% 70%), hsl(210deg 50% 50%));
+      &:hover {
+        background-color: light-dark(hsl(210deg 50% 70%), hsl(210deg 50% 50%));
+      }
+    }
   }
 `;
 
@@ -54,66 +54,26 @@ export default function Nav({ direction, onDirectionChange }: Props) {
       <h1>react-data-grid</h1>
 
       <h2>Demos</h2>
-      <NavLink to="/common-features" end className={getActiveClassname}>
-        Common Features
-      </NavLink>
-      <NavLink to="/all-features" end className={getActiveClassname}>
-        All Features
-      </NavLink>
-      <NavLink to="/cell-navigation" end className={getActiveClassname}>
-        Cell Navigation
-      </NavLink>
-      <NavLink to="/column-spanning" end className={getActiveClassname}>
-        Column Spanning
-      </NavLink>
-      <NavLink to="/column-grouping" end className={getActiveClassname}>
-        Column Grouping
-      </NavLink>
-      <NavLink to="/columns-reordering" end className={getActiveClassname}>
-        Columns Reordering
-      </NavLink>
-      <NavLink to="/context-menu" end className={getActiveClassname}>
-        Context Menu
-      </NavLink>
-      <NavLink to="/customizable-renderers" end className={getActiveClassname}>
-        Customizable Renderers
-      </NavLink>
-      <NavLink to="/row-grouping" end className={getActiveClassname}>
-        Row Grouping
-      </NavLink>
-      <NavLink to="/header-filters" end className={getActiveClassname}>
-        Header Filters
-      </NavLink>
-      <NavLink to="/infinite-scrolling" end className={getActiveClassname}>
-        Infinite Scrolling
-      </NavLink>
-      <NavLink to="/master-detail" end className={getActiveClassname}>
-        Master Detail
-      </NavLink>
-      <NavLink to="/million-cells" end className={getActiveClassname}>
-        A Million Cells
-      </NavLink>
-      <NavLink to="/no-rows" end className={getActiveClassname}>
-        No Rows
-      </NavLink>
-      <NavLink to="/resizable-grid" end className={getActiveClassname}>
-        Resizable Grid
-      </NavLink>
-      <NavLink to="/rows-reordering" end className={getActiveClassname}>
-        Rows Reordering
-      </NavLink>
-      <NavLink to="/scroll-to-cell" end className={getActiveClassname}>
-        Scroll To Cell
-      </NavLink>
-      <NavLink to="/tree-view" end className={getActiveClassname}>
-        Tree View
-      </NavLink>
-      <NavLink to="/variable-row-height" end className={getActiveClassname}>
-        Variable Row Height
-      </NavLink>
-      <NavLink to="/animation" end className={getActiveClassname}>
-        Animation
-      </NavLink>
+      <Link to="/CommonFeatures">Common Features</Link>
+      <Link to="/AllFeatures">All Features</Link>
+      <Link to="/CellNavigation">Cell Navigation</Link>
+      <Link to="/ColumnSpanning">Column Spanning</Link>
+      <Link to="/ColumnGrouping">Column Grouping</Link>
+      <Link to="/ColumnsReordering">Columns Reordering</Link>
+      <Link to="/ContextMenu">Context Menu</Link>
+      <Link to="/CustomizableRenderers">Customizable Renderers</Link>
+      <Link to="/RowGrouping">Row Grouping</Link>
+      <Link to="/HeaderFilters">Header Filters</Link>
+      <Link to="/InfiniteScrolling">Infinite Scrolling</Link>
+      <Link to="/MasterDetail">Master Detail</Link>
+      <Link to="/MillionCells">A Million Cells</Link>
+      <Link to="/NoRows">No Rows</Link>
+      <Link to="/ResizableGrid">Resizable Grid</Link>
+      <Link to="/RowsReordering">Rows Reordering</Link>
+      <Link to="/ScrollToCell">Scroll To Cell</Link>
+      <Link to="/TreeView">Tree View</Link>
+      <Link to="/VariableRowHeight">Variable Row Height</Link>
+      <Link to="/Animation">Animation</Link>
 
       <h2>Links</h2>
       <a
@@ -153,7 +113,3 @@ export default function Nav({ direction, onDirectionChange }: Props) {
     </nav>
   );
 }
-
-function getActiveClassname({ isActive }: { isActive: boolean }) {
-  return isActive ? activeNavClassname : '';
-}

website/demos/components/DraggableRowRenderer.tsx → website/components/DraggableRowRenderer.tsx

@@ -2,7 +2,7 @@ import { useDrag, useDrop } from 'react-dnd';
 import { css } from '@linaria/core';
 import clsx from 'clsx';
 
-import { Row, type RenderRowProps } from '../../../src';
+import { Row, type RenderRowProps } from '../../src';
 
 const rowDraggingClassname = css`
   opacity: 0.5;

website/directionContext.ts

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+import type { Direction } from '../src/types';
+
+const DirectionContext = createContext<Direction>('ltr');
+
+export const DirectionContextProvider = DirectionContext.Provider;
+
+export function useDirection(): Direction {
+  return useContext(DirectionContext);
+}

website/demos/exportUtils.tsx → website/exportUtils.tsx

@@ -1,7 +1,7 @@
 import { cloneElement } from 'react';
 import type { ReactElement } from 'react';
 
-import type { DataGridProps } from '../../src';
+import type { DataGridProps } from '../src';
 
 export async function exportToCsv<R, SR>(
   gridElement: ReactElement<DataGridProps<R, SR>>,

website/renderers/index.ts

@@ -0,0 +1 @@
+export * from './renderCoordinates';

website/demos/renderers/renderCoordinates.ts → website/renderers/renderCoordinates.ts

@@ -1,4 +1,4 @@
-import type { RenderCellProps } from '../../../src';
+import type { RenderCellProps } from '../../src';
 
 export function renderCoordinates(props: RenderCellProps<number>) {
   return `${props.column.key}×${props.row}`;

website/root.tsx

@@ -1,82 +1,38 @@
 import './root.css';
 
-import { StrictMode, useState } from 'react';
+import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Navigate, Route, HashRouter as Router, Routes } from 'react-router-dom';
-import { css } from '@linaria/core';
+import {
+  createHashHistory,
+  createRouter,
+  ErrorComponent,
+  RouterProvider
+} from '@tanstack/react-router';
 
-import type { Direction } from '../src/types';
-import AllFeatures from './demos/AllFeatures';
-import Animation from './demos/Animation';
-import CellNavigation from './demos/CellNavigation';
-import ColumnGrouping from './demos/ColumnGrouping';
-import ColumnSpanning from './demos/ColumnSpanning';
-import ColumnsReordering from './demos/ColumnsReordering';
-import CommonFeatures from './demos/CommonFeatures';
-import ContextMenuDemo from './demos/ContextMenu';
-import CustomizableRenderers from './demos/CustomizableRenderers';
-import HeaderFilters from './demos/HeaderFilters';
-import InfiniteScrolling from './demos/InfiniteScrolling';
-import MasterDetail from './demos/MasterDetail';
-import MillionCells from './demos/MillionCells';
-import NoRows from './demos/NoRows';
-import ResizableGrid from './demos/Resizable';
-import RowGrouping from './demos/RowGrouping';
-import RowsReordering from './demos/RowsReordering';
-import ScrollToCell from './demos/ScrollToCell';
-import TreeView from './demos/TreeView';
-import VariableRowHeight from './demos/VariableRowHeight';
-import Nav from './Nav';
+import { routeTree } from './routeTree.gen';
 
-const mainClassname = css`
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  block-size: 100vh;
-  padding: 8px;
-  contain: inline-size;
-`;
+const router = createRouter({
+  routeTree,
+  history: createHashHistory(),
+  caseSensitive: true,
+  defaultErrorComponent: ErrorComponent,
+  defaultNotFoundComponent: NotFound,
+  defaultPreload: 'intent'
+});
 
-function Root() {
-  const [direction, setDirection] = useState<Direction>('ltr');
-  return (
-    <Router>
-      <Nav direction={direction} onDirectionChange={setDirection} />
-      <main className={mainClassname} dir={direction}>
-        <Routes>
-          <Route index element={<Navigate to="common-features" replace />} />
-          <Route path="common-features" element={<CommonFeatures direction={direction} />} />
-          <Route path="all-features" element={<AllFeatures direction={direction} />} />
-          <Route path="cell-navigation" element={<CellNavigation direction={direction} />} />
-          <Route path="column-spanning" element={<ColumnSpanning direction={direction} />} />
-          <Route path="column-grouping" element={<ColumnGrouping direction={direction} />} />
-          <Route path="columns-reordering" element={<ColumnsReordering direction={direction} />} />
-          <Route path="context-menu" element={<ContextMenuDemo direction={direction} />} />
-          <Route
-            path="customizable-renderers"
-            element={<CustomizableRenderers direction={direction} />}
-          />
-          <Route path="row-grouping" element={<RowGrouping direction={direction} />} />
-          <Route path="header-filters" element={<HeaderFilters direction={direction} />} />
-          <Route path="infinite-scrolling" element={<InfiniteScrolling direction={direction} />} />
-          <Route path="master-detail" element={<MasterDetail direction={direction} />} />
-          <Route path="million-cells" element={<MillionCells direction={direction} />} />
-          <Route path="no-rows" element={<NoRows direction={direction} />} />
-          <Route path="resizable-grid" element={<ResizableGrid direction={direction} />} />
-          <Route path="rows-reordering" element={<RowsReordering direction={direction} />} />
-          <Route path="scroll-to-cell" element={<ScrollToCell direction={direction} />} />
-          <Route path="tree-view" element={<TreeView direction={direction} />} />
-          <Route path="variable-row-height" element={<VariableRowHeight direction={direction} />} />
-          <Route path="animation" element={<Animation direction={direction} />} />
-          <Route path="*" element="Nothing to see here" />
-        </Routes>
-      </main>
-    </Router>
-  );
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+function NotFound() {
+  return 'Nothing to see here';
 }
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <Root />
+    <RouterProvider router={router} />
   </StrictMode>
 );