Migrate to tanstack router (#3600)

* Migrate to tanstack router

* all features: generate rows in a loader

Author: nstepien

.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/CellExpanderFormatter.tsx renamed to website/components/CellExpanderFormatter.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;