feat: Add configuration option to generator which enables files exten…

…sions in imports to support `moduleResolution` "bundler"(#1160)

* feat: add file extensions to generated file

* chore: less code repeat

* feat: handle all rootpath extensions

* docs: add doc for addExtensions option

docs/framework/react/guide/file-based-routing.md

@@ -101,6 +101,8 @@ The following options are available for configuration via the `tsr.config.json`
   - (Optional, **Defaults to `false`**) whether to disable generating types for the route tree
   - If set to `true`, the generated route tree will not include any types.
   - If set to `true` and the `generatedRouteTree` file ends with `.ts` or `.tsx`, the generated route tree will be written as a `.js` file instead.
+- **`addExtensions`**
+  - (Optional, **Defaults to `false`**) add file extensions to the route names in the generated route tree
 
 ## File Naming Conventions
 

packages/router-generator/src/config.ts

@@ -9,6 +9,7 @@ export const configSchema = z.object({
   generatedRouteTree: z.string().optional().default('./src/routeTree.gen.ts'),
   quoteStyle: z.enum(['single', 'double']).optional().default('single'),
   disableTypes: z.boolean().optional().default(false),
+  addExtensions: z.boolean().optional().default(false),
 })
 
 export type Config = z.infer<typeof configSchema>

packages/router-generator/src/generator.ts

@@ -365,6 +365,14 @@ export async function generator(config: Config) {
 
   const virtualRouteNodes = sortedRouteNodes.filter((d) => d.isVirtual)
 
+  const rootPath = routeNodes.find((d) =>
+    d.routePath?.includes(`/${rootPathId}`),
+  )
+
+  const rootPathIdExtension = config.addExtensions
+    ? rootPath?.filePath.substring(rootPath?.filePath.lastIndexOf('.'))
+    : ''
+
   const routeImports = [
     '/* prettier-ignore-start */',
     '/* eslint-disable */',
@@ -379,7 +387,10 @@ export async function generator(config: Config) {
       `import { Route as rootRoute } from './${replaceBackslash(
         path.relative(
           path.dirname(config.generatedRouteTree),
-          path.resolve(config.routesDirectory, routePathIdPrefix + rootPathId),
+          path.resolve(
+            config.routesDirectory,
+            `${routePathIdPrefix}${rootPathId}${rootPathIdExtension}`,
+          ),
         ),
       )}'`,
       ...sortedRouteNodes
@@ -393,6 +404,7 @@ export async function generator(config: Config) {
                 path.dirname(config.generatedRouteTree),
                 path.resolve(config.routesDirectory, node.filePath),
               ),
+              config.addExtensions,
             ),
           )}'`
         }),
@@ -436,6 +448,7 @@ export async function generator(config: Config) {
                     path.dirname(config.generatedRouteTree),
                     path.resolve(config.routesDirectory, loaderNode.filePath),
                   ),
+                  config.addExtensions,
                 ),
               )}'), 'loader') })`
             : '',
@@ -458,6 +471,7 @@ export async function generator(config: Config) {
                         path.dirname(config.generatedRouteTree),
                         path.resolve(config.routesDirectory, d[1]!.filePath),
                       ),
+                      config.addExtensions,
                     ),
                   )}'), '${d[0]}')`
                 })
@@ -474,6 +488,7 @@ export async function generator(config: Config) {
                       lazyComponentNode!.filePath,
                     ),
                   ),
+                  config.addExtensions,
                 ),
               )}').then((d) => d.Route))`
             : '',
@@ -557,8 +572,8 @@ function routePathToVariable(d: string): string {
   )
 }
 
-export function removeExt(d: string) {
-  return d.substring(0, d.lastIndexOf('.')) || d
+export function removeExt(d: string, enabled: boolean = true) {
+  return enabled ? d.substring(0, d.lastIndexOf('.')) || d : d
 }
 
 function spaces(d: number): string {