fix: Fix file-based route generation when custom routeToken or `ind… (#7048)

fix: Fix file-based route generation when custom `routeToken` or `indexToken` values start with regex metacharacters like `+`.

fixes #7036

Author: schiller-manuel

.changeset/tiny-cars-taste.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/router-generator': patch
+---
+
+Fix file-based route generation when custom `routeToken` or `indexToken` values start with regex metacharacters like `+`.

packages/router-generator/src/filesystem/physical/getRouteNodes.ts

@@ -2,6 +2,7 @@ import path from 'node:path'
 import * as fsp from 'node:fs/promises'
 import {
   determineInitialRoutePath,
+  escapeRegExp,
   hasEscapedLeadingUnderscore,
   removeExt,
   replaceBackslash,
@@ -265,9 +266,12 @@ export async function getRouteNodes(
 
           if (suffixToStrip || shouldStripRouteToken) {
             const stripSegment = suffixToStrip ?? lastRouteSegment
-            routePath = routePath.replace(new RegExp(`/${stripSegment}$`), '')
+            routePath = routePath.replace(
+              new RegExp(`/${escapeRegExp(stripSegment)}$`),
+              '',
+            )
             originalRoutePath = originalRoutePath.replace(
-              new RegExp(`/${stripSegment}$`),
+              new RegExp(`/${escapeRegExp(stripSegment)}$`),
               '',
             )
           }
@@ -305,13 +309,13 @@ export async function getRouteNodes(
 
               routePath =
                 routePath.replace(
-                  new RegExp(`/${updatedLastRouteSegment}$`),
+                  new RegExp(`/${escapeRegExp(updatedLastRouteSegment)}$`),
                   '/',
                 ) || (isLayoutRoute ? '' : '/')
 
               originalRoutePath =
                 originalRoutePath.replace(
-                  new RegExp(`/${indexTokenCandidate}$`),
+                  new RegExp(`/${escapeRegExp(indexTokenCandidate)}$`),
                   '/',
                 ) || (isLayoutRoute ? '' : '/')
             }

packages/router-generator/src/utils.ts

@@ -414,7 +414,7 @@ export function isSegmentPathless(
   return !hasEscapedLeadingUnderscore(originalSegment)
 }
 
-function escapeRegExp(s: string): string {
+export function escapeRegExp(s: string): string {
   return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 

packages/router-generator/tests/generator/regex-tokens-plus-json/routeTree.snapshot.ts

@@ -0,0 +1,123 @@
+/* eslint-disable */
+
+// @ts-nocheck
+
+// noinspection JSUnusedGlobalSymbols
+
+// This file was automatically generated by TanStack Router.
+// 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 { Route as rootRouteImport } from './routes/__root'
+import { Route as DashboardChar43layoutRouteImport } from './routes/dashboard/+layout'
+import { Route as Char43pageRouteImport } from './routes/+page'
+import { Route as DashboardChar43pageRouteImport } from './routes/dashboard/+page'
+import { Route as DashboardSettingsRouteImport } from './routes/dashboard/settings'
+
+const DashboardChar43layoutRoute = DashboardChar43layoutRouteImport.update({
+  id: '/dashboard',
+  path: '/dashboard',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const Char43pageRoute = Char43pageRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const DashboardChar43pageRoute = DashboardChar43pageRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => DashboardChar43layoutRoute,
+} as any)
+const DashboardSettingsRoute = DashboardSettingsRouteImport.update({
+  id: '/settings',
+  path: '/settings',
+  getParentRoute: () => DashboardChar43layoutRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof Char43pageRoute
+  '/dashboard': typeof DashboardChar43layoutRouteWithChildren
+  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/dashboard/': typeof DashboardChar43pageRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof Char43pageRoute
+  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/dashboard': typeof DashboardChar43pageRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof Char43pageRoute
+  '/dashboard': typeof DashboardChar43layoutRouteWithChildren
+  '/dashboard/settings': typeof DashboardSettingsRoute
+  '/dashboard/': typeof DashboardChar43pageRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/dashboard' | '/dashboard/settings' | '/dashboard/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/dashboard/settings' | '/dashboard'
+  id: '__root__' | '/' | '/dashboard' | '/dashboard/settings' | '/dashboard/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  Char43pageRoute: typeof Char43pageRoute
+  DashboardChar43layoutRoute: typeof DashboardChar43layoutRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/dashboard': {
+      id: '/dashboard'
+      path: '/dashboard'
+      fullPath: '/dashboard'
+      preLoaderRoute: typeof DashboardChar43layoutRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof Char43pageRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/dashboard/': {
+      id: '/dashboard/'
+      path: '/'
+      fullPath: '/dashboard/'
+      preLoaderRoute: typeof DashboardChar43pageRouteImport
+      parentRoute: typeof DashboardChar43layoutRoute
+    }
+    '/dashboard/settings': {
+      id: '/dashboard/settings'
+      path: '/settings'
+      fullPath: '/dashboard/settings'
+      preLoaderRoute: typeof DashboardSettingsRouteImport
+      parentRoute: typeof DashboardChar43layoutRoute
+    }
+  }
+}
+
+interface DashboardChar43layoutRouteChildren {
+  DashboardSettingsRoute: typeof DashboardSettingsRoute
+  DashboardChar43pageRoute: typeof DashboardChar43pageRoute
+}
+
+const DashboardChar43layoutRouteChildren: DashboardChar43layoutRouteChildren = {
+  DashboardSettingsRoute: DashboardSettingsRoute,
+  DashboardChar43pageRoute: DashboardChar43pageRoute,
+}
+
+const DashboardChar43layoutRouteWithChildren =
+  DashboardChar43layoutRoute._addFileChildren(
+    DashboardChar43layoutRouteChildren,
+  )
+
+const rootRouteChildren: RootRouteChildren = {
+  Char43pageRoute: Char43pageRoute,
+  DashboardChar43layoutRoute: DashboardChar43layoutRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/router-generator/tests/generator/regex-tokens-plus-json/routes/+page.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/')({
+  component: () => <div>Home Page</div>,
+})

packages/router-generator/tests/generator/regex-tokens-plus-json/routes/__root.tsx

@@ -0,0 +1,5 @@
+import { Outlet, createRootRoute } from '@tanstack/react-router'
+
+export const Route = createRootRoute({
+  component: () => <Outlet />,
+})

packages/router-generator/tests/generator/regex-tokens-plus-json/routes/dashboard/+layout.tsx

@@ -0,0 +1,10 @@
+import { Outlet, createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard')({
+  component: () => (
+    <div>
+      <h1>Dashboard Layout</h1>
+      <Outlet />
+    </div>
+  ),
+})

packages/router-generator/tests/generator/regex-tokens-plus-json/routes/dashboard/+page.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard/')({
+  component: () => <div>Dashboard Home</div>,
+})

packages/router-generator/tests/generator/regex-tokens-plus-json/routes/dashboard/settings.tsx

@@ -0,0 +1,5 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard/settings')({
+  component: () => <div>Dashboard Settings</div>,
+})

packages/router-generator/tests/generator/regex-tokens-plus-json/tsr.config.json

@@ -0,0 +1,4 @@
+{
+  "indexToken": { "regex": "\\+page" },
+  "routeToken": { "regex": "\\+layout" }
+}