TSR: remove verboseFileRoutes, add router file

vite.config.ts

@@ -88,8 +88,7 @@ export default defineConfig(
           target: 'react',
           generatedRouteTree: 'website/routeTree.gen.ts',
           routesDirectory: 'website/routes',
-          autoCodeSplitting: true,
-          verboseFileRoutes: false
+          autoCodeSplitting: true
         }),
       react({
         exclude: ['./.cache/**/*', './node_modules/**/*', './website/routeTree.gen.ts']

website/root.tsx

@@ -2,37 +2,9 @@ import './root.css';
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import {
-  createHashHistory,
-  createRouter,
-  ErrorComponent,
-  RouterProvider
-} from '@tanstack/react-router';
+import { RouterProvider } from '@tanstack/react-router';
 
-import { routeTree } from './routeTree.gen';
-
-const router = createRouter({
-  routeTree,
-  history: createHashHistory(),
-  caseSensitive: true,
-  defaultErrorComponent: ErrorComponent,
-  defaultNotFoundComponent: NotFound,
-  defaultPendingMinMs: 0,
-  defaultPreload: 'intent',
-  defaultStructuralSharing: true,
-  scrollRestoration: true
-});
-
-// Register the router instance for type safety
-declare module '@tanstack/react-router' {
-  interface Register {
-    router: typeof router;
-  }
-}
-
-function NotFound() {
-  return 'Nothing to see here';
-}
+import { router } from './router';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

website/routeTree.gen.ts

@@ -8,8 +8,6 @@
 // You should NOT make any changes in this file as it will be overwritten.
 // Additionally, you should also exclude this file from your linter and/or formatter to prevent it from being checked or modified.
 
-import type { CreateFileRoute, FileRoutesByPath } from '@tanstack/react-router'
-
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as VariableRowHeightRouteImport } from './routes/VariableRowHeight'
 import { Route as TreeViewRouteImport } from './routes/TreeView'
@@ -457,196 +455,6 @@ declare module '@tanstack/react-router' {
   }
 }
 
-declare module './routes/index' {
-  const createFileRoute: CreateFileRoute<
-    '/',
-    FileRoutesByPath['/']['parentRoute'],
-    FileRoutesByPath['/']['id'],
-    FileRoutesByPath['/']['path'],
-    FileRoutesByPath['/']['fullPath']
-  >
-}
-declare module './routes/AllFeatures' {
-  const createFileRoute: CreateFileRoute<
-    '/AllFeatures',
-    FileRoutesByPath['/AllFeatures']['parentRoute'],
-    FileRoutesByPath['/AllFeatures']['id'],
-    FileRoutesByPath['/AllFeatures']['path'],
-    FileRoutesByPath['/AllFeatures']['fullPath']
-  >
-}
-declare module './routes/Animation' {
-  const createFileRoute: CreateFileRoute<
-    '/Animation',
-    FileRoutesByPath['/Animation']['parentRoute'],
-    FileRoutesByPath['/Animation']['id'],
-    FileRoutesByPath['/Animation']['path'],
-    FileRoutesByPath['/Animation']['fullPath']
-  >
-}
-declare module './routes/CellNavigation' {
-  const createFileRoute: CreateFileRoute<
-    '/CellNavigation',
-    FileRoutesByPath['/CellNavigation']['parentRoute'],
-    FileRoutesByPath['/CellNavigation']['id'],
-    FileRoutesByPath['/CellNavigation']['path'],
-    FileRoutesByPath['/CellNavigation']['fullPath']
-  >
-}
-declare module './routes/ColumnGrouping' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnGrouping',
-    FileRoutesByPath['/ColumnGrouping']['parentRoute'],
-    FileRoutesByPath['/ColumnGrouping']['id'],
-    FileRoutesByPath['/ColumnGrouping']['path'],
-    FileRoutesByPath['/ColumnGrouping']['fullPath']
-  >
-}
-declare module './routes/ColumnSpanning' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnSpanning',
-    FileRoutesByPath['/ColumnSpanning']['parentRoute'],
-    FileRoutesByPath['/ColumnSpanning']['id'],
-    FileRoutesByPath['/ColumnSpanning']['path'],
-    FileRoutesByPath['/ColumnSpanning']['fullPath']
-  >
-}
-declare module './routes/ColumnsReordering' {
-  const createFileRoute: CreateFileRoute<
-    '/ColumnsReordering',
-    FileRoutesByPath['/ColumnsReordering']['parentRoute'],
-    FileRoutesByPath['/ColumnsReordering']['id'],
-    FileRoutesByPath['/ColumnsReordering']['path'],
-    FileRoutesByPath['/ColumnsReordering']['fullPath']
-  >
-}
-declare module './routes/CommonFeatures' {
-  const createFileRoute: CreateFileRoute<
-    '/CommonFeatures',
-    FileRoutesByPath['/CommonFeatures']['parentRoute'],
-    FileRoutesByPath['/CommonFeatures']['id'],
-    FileRoutesByPath['/CommonFeatures']['path'],
-    FileRoutesByPath['/CommonFeatures']['fullPath']
-  >
-}
-declare module './routes/ContextMenu' {
-  const createFileRoute: CreateFileRoute<
-    '/ContextMenu',
-    FileRoutesByPath['/ContextMenu']['parentRoute'],
-    FileRoutesByPath['/ContextMenu']['id'],
-    FileRoutesByPath['/ContextMenu']['path'],
-    FileRoutesByPath['/ContextMenu']['fullPath']
-  >
-}
-declare module './routes/CustomizableRenderers' {
-  const createFileRoute: CreateFileRoute<
-    '/CustomizableRenderers',
-    FileRoutesByPath['/CustomizableRenderers']['parentRoute'],
-    FileRoutesByPath['/CustomizableRenderers']['id'],
-    FileRoutesByPath['/CustomizableRenderers']['path'],
-    FileRoutesByPath['/CustomizableRenderers']['fullPath']
-  >
-}
-declare module './routes/HeaderFilters' {
-  const createFileRoute: CreateFileRoute<
-    '/HeaderFilters',
-    FileRoutesByPath['/HeaderFilters']['parentRoute'],
-    FileRoutesByPath['/HeaderFilters']['id'],
-    FileRoutesByPath['/HeaderFilters']['path'],
-    FileRoutesByPath['/HeaderFilters']['fullPath']
-  >
-}
-declare module './routes/InfiniteScrolling' {
-  const createFileRoute: CreateFileRoute<
-    '/InfiniteScrolling',
-    FileRoutesByPath['/InfiniteScrolling']['parentRoute'],
-    FileRoutesByPath['/InfiniteScrolling']['id'],
-    FileRoutesByPath['/InfiniteScrolling']['path'],
-    FileRoutesByPath['/InfiniteScrolling']['fullPath']
-  >
-}
-declare module './routes/MasterDetail' {
-  const createFileRoute: CreateFileRoute<
-    '/MasterDetail',
-    FileRoutesByPath['/MasterDetail']['parentRoute'],
-    FileRoutesByPath['/MasterDetail']['id'],
-    FileRoutesByPath['/MasterDetail']['path'],
-    FileRoutesByPath['/MasterDetail']['fullPath']
-  >
-}
-declare module './routes/MillionCells' {
-  const createFileRoute: CreateFileRoute<
-    '/MillionCells',
-    FileRoutesByPath['/MillionCells']['parentRoute'],
-    FileRoutesByPath['/MillionCells']['id'],
-    FileRoutesByPath['/MillionCells']['path'],
-    FileRoutesByPath['/MillionCells']['fullPath']
-  >
-}
-declare module './routes/NoRows' {
-  const createFileRoute: CreateFileRoute<
-    '/NoRows',
-    FileRoutesByPath['/NoRows']['parentRoute'],
-    FileRoutesByPath['/NoRows']['id'],
-    FileRoutesByPath['/NoRows']['path'],
-    FileRoutesByPath['/NoRows']['fullPath']
-  >
-}
-declare module './routes/ResizableGrid' {
-  const createFileRoute: CreateFileRoute<
-    '/ResizableGrid',
-    FileRoutesByPath['/ResizableGrid']['parentRoute'],
-    FileRoutesByPath['/ResizableGrid']['id'],
-    FileRoutesByPath['/ResizableGrid']['path'],
-    FileRoutesByPath['/ResizableGrid']['fullPath']
-  >
-}
-declare module './routes/RowGrouping' {
-  const createFileRoute: CreateFileRoute<
-    '/RowGrouping',
-    FileRoutesByPath['/RowGrouping']['parentRoute'],
-    FileRoutesByPath['/RowGrouping']['id'],
-    FileRoutesByPath['/RowGrouping']['path'],
-    FileRoutesByPath['/RowGrouping']['fullPath']
-  >
-}
-declare module './routes/RowsReordering' {
-  const createFileRoute: CreateFileRoute<
-    '/RowsReordering',
-    FileRoutesByPath['/RowsReordering']['parentRoute'],
-    FileRoutesByPath['/RowsReordering']['id'],
-    FileRoutesByPath['/RowsReordering']['path'],
-    FileRoutesByPath['/RowsReordering']['fullPath']
-  >
-}
-declare module './routes/ScrollToCell' {
-  const createFileRoute: CreateFileRoute<
-    '/ScrollToCell',
-    FileRoutesByPath['/ScrollToCell']['parentRoute'],
-    FileRoutesByPath['/ScrollToCell']['id'],
-    FileRoutesByPath['/ScrollToCell']['path'],
-    FileRoutesByPath['/ScrollToCell']['fullPath']
-  >
-}
-declare module './routes/TreeView' {
-  const createFileRoute: CreateFileRoute<
-    '/TreeView',
-    FileRoutesByPath['/TreeView']['parentRoute'],
-    FileRoutesByPath['/TreeView']['id'],
-    FileRoutesByPath['/TreeView']['path'],
-    FileRoutesByPath['/TreeView']['fullPath']
-  >
-}
-declare module './routes/VariableRowHeight' {
-  const createFileRoute: CreateFileRoute<
-    '/VariableRowHeight',
-    FileRoutesByPath['/VariableRowHeight']['parentRoute'],
-    FileRoutesByPath['/VariableRowHeight']['id'],
-    FileRoutesByPath['/VariableRowHeight']['path'],
-    FileRoutesByPath['/VariableRowHeight']['fullPath']
-  >
-}
-
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AllFeaturesRoute: AllFeaturesRoute,

website/router.tsx

@@ -0,0 +1,26 @@
+import { createHashHistory, createRouter, ErrorComponent } from '@tanstack/react-router';
+
+import { routeTree } from './routeTree.gen';
+
+export const router = createRouter({
+  routeTree,
+  history: createHashHistory(),
+  caseSensitive: true,
+  defaultErrorComponent: ErrorComponent,
+  defaultNotFoundComponent: NotFound,
+  defaultPendingMinMs: 0,
+  defaultPreload: 'intent',
+  defaultStructuralSharing: true,
+  scrollRestoration: true
+});
+
+// Register the router instance for type safety
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}
+
+function NotFound() {
+  return 'Nothing to see here';
+}

website/routes/AllFeatures.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { faker } from '@faker-js/faker';
+import { createFileRoute } from '@tanstack/react-router';
 import { css } from 'ecij';
 import clsx from 'clsx';
 
@@ -8,7 +9,7 @@ import type { CalculatedColumn, CellCopyArgs, CellPasteArgs, Column, FillEvent }
 import { textEditorClassname } from '../../src/editors/renderTextEditor';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/AllFeatures')({
   component: AllFeatures,
   loader() {
     rows ??= createRows();

website/routes/Animation.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router';
 import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/Animation')({
   component: Animation
 });
 

website/routes/CellNavigation.tsx

@@ -1,10 +1,11 @@
 import { useId, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router';
 
 import { DataGrid } from '../../src';
 import type { CellKeyboardEvent, CellKeyDownArgs, Column } from '../../src';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/CellNavigation')({
   component: CellNavigation
 });
 

website/routes/ColumnGrouping.tsx

@@ -1,8 +1,10 @@
+import { createFileRoute } from '@tanstack/react-router';
+
 import { DataGrid, type ColumnOrColumnGroup } from '../../src';
 import { renderCoordinates } from '../renderers';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/ColumnGrouping')({
   component: ColumnGrouping
 });
 

website/routes/ColumnSpanning.tsx

@@ -1,10 +1,11 @@
+import { createFileRoute } from '@tanstack/react-router';
 import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { renderCoordinates } from '../renderers';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/ColumnSpanning')({
   component: ColumnSpanning
 });
 

website/routes/ColumnsReordering.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
+import { createFileRoute } from '@tanstack/react-router';
 
 import { DataGrid, type Column, type ColumnWidths, type SortColumn } from '../../src';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/ColumnsReordering')({
   component: ColumnsReordering
 });
 

website/routes/CommonFeatures.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useRef, useState } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 import { faker } from '@faker-js/faker';
+import { createFileRoute } from '@tanstack/react-router';
 import { css } from 'ecij';
 
 import {
@@ -17,7 +18,7 @@ import { textEditorClassname } from '../../src/editors/renderTextEditor';
 import { exportToCsv, exportToPdf } from '../utils';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/CommonFeatures')({
   component: CommonFeatures
 });
 

website/routes/ContextMenu.tsx

@@ -1,12 +1,13 @@
 import { useLayoutEffect, useReducer, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { faker } from '@faker-js/faker';
+import { createFileRoute } from '@tanstack/react-router';
 import { css } from 'ecij';
 
 import { DataGrid, type Column } from '../../src';
 import { useDirection } from '../directionContext';
 
-export const Route = createFileRoute({
+export const Route = createFileRoute('/ContextMenu')({
   component: ContextMenuDemo
 });