From 7a66c98b179926d4ba1cd8a02394a6a0e52e8d4f Mon Sep 17 00:00:00 2001 From: Nicolas Stepien Date: Fri, 13 Sep 2024 14:23:48 +0100 Subject: [PATCH 1/2] Migrate to tanstack router --- .prettierignore | 1 + biome.json | 3 +- package.json | 3 +- vite.config.ts | 7 + website/Nav.tsx | 100 +-- .../components/CellExpanderFormatter.tsx | 0 .../components/ChildRowDeleteButton.tsx | 0 .../components/DraggableRowRenderer.tsx | 2 +- website/{demos => }/components/index.ts | 0 website/demos/renderers/index.ts | 3 - website/demos/renderers/renderAvatar.tsx | 14 - website/demos/renderers/renderDropdown.tsx | 22 - website/demos/types.ts | 5 - website/directionContext.ts | 11 + website/{demos => }/exportUtils.tsx | 2 +- website/renderers/index.ts | 1 + .../renderers/renderCoordinates.ts | 2 +- website/root.tsx | 96 +-- website/routeTree.gen.ts | 618 ++++++++++++++++++ .../AllFeatures.lazy.tsx} | 44 +- .../Animation.lazy.tsx} | 10 +- .../CellNavigation.lazy.tsx} | 10 +- .../ColumnGrouping.lazy.tsx} | 14 +- .../ColumnSpanning.lazy.tsx} | 13 +- .../ColumnsReordering.lazy.tsx} | 10 +- .../CommonFeatures.lazy.tsx} | 12 +- .../ContextMenu.lazy.tsx} | 10 +- .../CustomizableRenderers.lazy.tsx} | 25 +- .../HeaderFilters.lazy.tsx} | 10 +- .../InfiniteScrolling.lazy.tsx} | 10 +- .../MasterDetail.lazy.tsx} | 13 +- .../MillionCells.lazy.tsx} | 13 +- .../NoRows.tsx => routes/NoRows.lazy.tsx} | 10 +- .../ResizableGrid.lazy.tsx} | 14 +- .../RowGrouping.lazy.tsx} | 10 +- .../RowsReordering.lazy.tsx} | 12 +- .../ScrollToCell.lazy.tsx} | 12 +- .../TreeView.tsx => routes/TreeView.lazy.tsx} | 12 +- .../VariableRowHeight.lazy.tsx} | 13 +- website/routes/__root.tsx | 33 + website/routes/index.tsx | 5 + 41 files changed, 958 insertions(+), 247 deletions(-) rename website/{demos => }/components/CellExpanderFormatter.tsx (100%) rename website/{demos => }/components/ChildRowDeleteButton.tsx (100%) rename website/{demos => }/components/DraggableRowRenderer.tsx (95%) rename website/{demos => }/components/index.ts (100%) delete mode 100644 website/demos/renderers/index.ts delete mode 100644 website/demos/renderers/renderAvatar.tsx delete mode 100644 website/demos/renderers/renderDropdown.tsx delete mode 100644 website/demos/types.ts create mode 100644 website/directionContext.ts rename website/{demos => }/exportUtils.tsx (97%) create mode 100644 website/renderers/index.ts rename website/{demos => }/renderers/renderCoordinates.ts (68%) create mode 100644 website/routeTree.gen.ts rename website/{demos/AllFeatures.tsx => routes/AllFeatures.lazy.tsx} (81%) rename website/{demos/Animation.tsx => routes/Animation.lazy.tsx} (88%) rename website/{demos/CellNavigation.tsx => routes/CellNavigation.lazy.tsx} (95%) rename website/{demos/ColumnGrouping.tsx => routes/ColumnGrouping.lazy.tsx} (87%) rename website/{demos/ColumnSpanning.tsx => routes/ColumnSpanning.lazy.tsx} (83%) rename website/{demos/ColumnsReordering.tsx => routes/ColumnsReordering.lazy.tsx} (92%) rename website/{demos/CommonFeatures.tsx => routes/CommonFeatures.lazy.tsx} (96%) rename website/{demos/ContextMenu.tsx => routes/ContextMenu.lazy.tsx} (93%) rename website/{demos/CustomizableRenderers.tsx => routes/CustomizableRenderers.lazy.tsx} (85%) rename website/{demos/HeaderFilters.tsx => routes/HeaderFilters.lazy.tsx} (97%) rename website/{demos/InfiniteScrolling.tsx => routes/InfiniteScrolling.lazy.tsx} (90%) rename website/{demos/MasterDetail.tsx => routes/MasterDetail.lazy.tsx} (92%) rename website/{demos/MillionCells.tsx => routes/MillionCells.lazy.tsx} (69%) rename website/{demos/NoRows.tsx => routes/NoRows.lazy.tsx} (82%) rename website/{demos/Resizable.tsx => routes/ResizableGrid.lazy.tsx} (60%) rename website/{demos/RowGrouping.tsx => routes/RowGrouping.lazy.tsx} (94%) rename website/{demos/RowsReordering.tsx => routes/RowsReordering.lazy.tsx} (84%) rename website/{demos/ScrollToCell.tsx => routes/ScrollToCell.lazy.tsx} (88%) rename website/{demos/TreeView.tsx => routes/TreeView.lazy.tsx} (93%) rename website/{demos/VariableRowHeight.tsx => routes/VariableRowHeight.lazy.tsx} (71%) create mode 100644 website/routes/__root.tsx create mode 100644 website/routes/index.tsx diff --git a/.prettierignore b/.prettierignore index e914fabe37..242f7524ea 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,2 +1,3 @@ *.js *.json +/website/routeTree.gen.ts diff --git a/biome.json b/biome.json index e9d27c7079..621760b362 100644 --- a/biome.json +++ b/biome.json @@ -6,7 +6,8 @@ "./coverage/**/*", "./dist/**/*", "./lib/**/*", - "./node_modules/**/*" + "./node_modules/**/*", + "./website/routeTree.gen.ts" ] }, "formatter": { diff --git a/package.json b/package.json index 13b990670d..b026865629 100644 --- a/package.json +++ b/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", diff --git a/vite.config.ts b/vite.config.ts index 2a716973cf..69c7e42205 100644 --- a/vite.config.ts +++ b/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/**/*'] }), diff --git a/website/Nav.tsx b/website/Nav.tsx index 25a65058b7..608cb455ce 100644 --- a/website/Nav.tsx +++ b/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) {

react-data-grid

Demos

- - Common Features - - - All Features - - - Cell Navigation - - - Column Spanning - - - Column Grouping - - - Columns Reordering - - - Context Menu - - - Customizable Renderers - - - Row Grouping - - - Header Filters - - - Infinite Scrolling - - - Master Detail - - - A Million Cells - - - No Rows - - - Resizable Grid - - - Rows Reordering - - - Scroll To Cell - - - Tree View - - - Variable Row Height - - - Animation - + Common Features + All Features + Cell Navigation + Column Spanning + Column Grouping + Columns Reordering + Context Menu + Customizable Renderers + Row Grouping + Header Filters + Infinite Scrolling + Master Detail + A Million Cells + No Rows + Resizable Grid + Rows Reordering + Scroll To Cell + Tree View + Variable Row Height + Animation

Links

); } - -function getActiveClassname({ isActive }: { isActive: boolean }) { - return isActive ? activeNavClassname : ''; -} diff --git a/website/demos/components/CellExpanderFormatter.tsx b/website/components/CellExpanderFormatter.tsx similarity index 100% rename from website/demos/components/CellExpanderFormatter.tsx rename to website/components/CellExpanderFormatter.tsx diff --git a/website/demos/components/ChildRowDeleteButton.tsx b/website/components/ChildRowDeleteButton.tsx similarity index 100% rename from website/demos/components/ChildRowDeleteButton.tsx rename to website/components/ChildRowDeleteButton.tsx diff --git a/website/demos/components/DraggableRowRenderer.tsx b/website/components/DraggableRowRenderer.tsx similarity index 95% rename from website/demos/components/DraggableRowRenderer.tsx rename to website/components/DraggableRowRenderer.tsx index e81d207d0d..7b33d5987b 100644 --- a/website/demos/components/DraggableRowRenderer.tsx +++ b/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; diff --git a/website/demos/components/index.ts b/website/components/index.ts similarity index 100% rename from website/demos/components/index.ts rename to website/components/index.ts diff --git a/website/demos/renderers/index.ts b/website/demos/renderers/index.ts deleted file mode 100644 index a77f06605f..0000000000 --- a/website/demos/renderers/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './renderAvatar'; -export * from './renderCoordinates'; -export * from './renderDropdown'; diff --git a/website/demos/renderers/renderAvatar.tsx b/website/demos/renderers/renderAvatar.tsx deleted file mode 100644 index b86408ca00..0000000000 --- a/website/demos/renderers/renderAvatar.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { css } from '@linaria/core'; - -import type { Row } from '../AllFeatures'; - -const avatarClassname = css` - margin: auto; - background-size: 100%; - block-size: 28px; - inline-size: 28px; -`; - -export function renderAvatar({ row }: { row: Row }) { - return
; -} diff --git a/website/demos/renderers/renderDropdown.tsx b/website/demos/renderers/renderDropdown.tsx deleted file mode 100644 index bfbc0de65b..0000000000 --- a/website/demos/renderers/renderDropdown.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { RenderEditCellProps } from '../../../src'; -import { textEditorClassname } from '../../../src/editors/textEditor'; -import type { Row } from '../AllFeatures'; - -const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'] as const; - -export function renderDropdown({ row, onRowChange }: RenderEditCellProps) { - return ( - - ); -} diff --git a/website/demos/types.ts b/website/demos/types.ts deleted file mode 100644 index 413b505c7f..0000000000 --- a/website/demos/types.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { Direction } from '../../src/types'; - -export interface Props { - direction: Direction; -} diff --git a/website/directionContext.ts b/website/directionContext.ts new file mode 100644 index 0000000000..5098898dc8 --- /dev/null +++ b/website/directionContext.ts @@ -0,0 +1,11 @@ +import { createContext, useContext } from 'react'; + +import type { Direction } from '../src/types'; + +const DirectionContext = createContext('ltr'); + +export const DirectionContextProvider = DirectionContext.Provider; + +export function useDirection(): Direction { + return useContext(DirectionContext); +} diff --git a/website/demos/exportUtils.tsx b/website/exportUtils.tsx similarity index 97% rename from website/demos/exportUtils.tsx rename to website/exportUtils.tsx index 19ee1aca5b..9628c4f185 100644 --- a/website/demos/exportUtils.tsx +++ b/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( gridElement: ReactElement>, diff --git a/website/renderers/index.ts b/website/renderers/index.ts new file mode 100644 index 0000000000..7852a09837 --- /dev/null +++ b/website/renderers/index.ts @@ -0,0 +1 @@ +export * from './renderCoordinates'; diff --git a/website/demos/renderers/renderCoordinates.ts b/website/renderers/renderCoordinates.ts similarity index 68% rename from website/demos/renderers/renderCoordinates.ts rename to website/renderers/renderCoordinates.ts index 8714795892..d023195c8f 100644 --- a/website/demos/renderers/renderCoordinates.ts +++ b/website/renderers/renderCoordinates.ts @@ -1,4 +1,4 @@ -import type { RenderCellProps } from '../../../src'; +import type { RenderCellProps } from '../../src'; export function renderCoordinates(props: RenderCellProps) { return `${props.column.key}×${props.row}`; diff --git a/website/root.tsx b/website/root.tsx index 0201879cd1..e6b2ed9e28 100644 --- a/website/root.tsx +++ b/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('ltr'); - return ( - -