feat(router-generator): add isolatedDeclarations config option

packages/router-generator/src/config.ts

@@ -49,6 +49,7 @@ export type BaseConfig = z.infer<typeof baseConfigSchema>
 export const configSchema = baseConfigSchema.extend({
   generatedRouteTree: z.string().optional().default('./src/routeTree.gen.ts'),
   disableTypes: z.boolean().optional().default(false),
+  isolatedDeclarations: z.boolean().optional().default(false),
   addExtensions: z
     .union([z.boolean(), z.string()])
     .optional()

packages/router-generator/src/generator.ts

@@ -659,6 +659,8 @@ export class Generator {
     const routeTreeConfig = buildRouteTreeConfig(
       acc.routeTree,
       config.disableTypes,
+      1,
+      config.isolatedDeclarations,
     )
 
     const createUpdateRoutes = sortedRouteNodes.map((node) => {
@@ -672,7 +674,7 @@ export class Generator {
 
       return [
         [
-          `const ${node.variableName}Route = ${node.variableName}RouteImport.update({
+          `const ${node.variableName}Route${config.isolatedDeclarations && !config.disableTypes ? ': any' : ''} = ${node.variableName}RouteImport.update({
             ${[
               `id: '${node.path}'`,
               !node.isNonPath ||
@@ -789,7 +791,7 @@ export class Generator {
       rootNotFoundComponentNode ||
       rootPendingComponentNode
     ) {
-      rootRouteUpdate = `const rootRouteWithChildren = rootRouteImport${
+      rootRouteUpdate = `const rootRouteWithChildren${config.isolatedDeclarations && !config.disableTypes ? ': any' : ''} = rootRouteImport${
         rootComponentNode ||
         rootErrorComponentNode ||
         rootNotFoundComponentNode ||

packages/router-generator/src/utils.ts

@@ -850,6 +850,7 @@ export function buildRouteTreeConfig(
   nodes: Array<RouteNode>,
   disableTypes: boolean,
   depth = 1,
+  isolatedDeclarations = false,
 ): Array<string> {
   const children = nodes.map((node) => {
     if (node._fsRouteType === '__root') {
@@ -867,6 +868,7 @@ export function buildRouteTreeConfig(
         node.children,
         disableTypes,
         depth + 1,
+        isolatedDeclarations,
       )
 
       const childrenDeclaration = disableTypes
@@ -889,7 +891,7 @@ export function buildRouteTreeConfig(
     .join(',')}
 }`
 
-      const routeWithChildren = `const ${route}RouteWithChildren = ${route}Route._addFileChildren(${route}RouteChildren)`
+      const routeWithChildren = `const ${route}RouteWithChildren${isolatedDeclarations && !disableTypes ? ': any' : ''} = ${route}Route._addFileChildren(${route}RouteChildren)`
 
       return [
         childConfigs.join('\n'),

packages/router-generator/tests/generator.test.ts

@@ -121,6 +121,10 @@ function rewriteConfigByFolderName(folderName: string, config: Config) {
       config.generatedRouteTree =
         makeFolderDir(folderName) + `/routeTree.gen.js`
       break
+    case 'isolated-declarations':
+    case 'isolated-declarations-nested':
+      config.isolatedDeclarations = true
+      break
     case 'custom-scaffolding':
       config.customScaffolding = {
         routeTemplate: [

packages/router-generator/tests/generator/isolated-declarations-nested/routeTree.snapshot.ts

@@ -0,0 +1,103 @@
+/* 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 PostsRouteImport } from './routes/posts'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as PostsIndexRouteImport } from './routes/posts/index'
+
+const PostsRoute: any = PostsRouteImport.update({
+  id: '/posts',
+  path: '/posts',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute: any = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const PostsIndexRoute: any = PostsIndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => PostsRoute,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRouteWithChildren
+  '/posts/': typeof PostsIndexRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/posts': typeof PostsIndexRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRouteWithChildren
+  '/posts/': typeof PostsIndexRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/posts' | '/posts/'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/posts'
+  id: '__root__' | '/' | '/posts' | '/posts/'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  PostsRoute: typeof PostsRouteWithChildren
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/posts': {
+      id: '/posts'
+      path: '/posts'
+      fullPath: '/posts'
+      preLoaderRoute: typeof PostsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/posts/': {
+      id: '/posts/'
+      path: '/'
+      fullPath: '/posts/'
+      preLoaderRoute: typeof PostsIndexRouteImport
+      parentRoute: typeof PostsRoute
+    }
+  }
+}
+
+interface PostsRouteChildren {
+  PostsIndexRoute: typeof PostsIndexRoute
+}
+
+const PostsRouteChildren: PostsRouteChildren = {
+  PostsIndexRoute: PostsIndexRoute,
+}
+
+const PostsRouteWithChildren: any =
+  PostsRoute._addFileChildren(PostsRouteChildren)
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  PostsRoute: PostsRouteWithChildren,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/router-generator/tests/generator/isolated-declarations-nested/routes/__root.tsx

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export const Route = createFileRoute()

packages/router-generator/tests/generator/isolated-declarations-nested/routes/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+// @ts-nocheck
+export const Route = createFileRoute('/')()

packages/router-generator/tests/generator/isolated-declarations-nested/routes/posts.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+// @ts-nocheck
+export const Route = createFileRoute('/posts')()

packages/router-generator/tests/generator/isolated-declarations-nested/routes/posts/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+// @ts-nocheck
+export const Route = createFileRoute('/posts/')()

packages/router-generator/tests/generator/isolated-declarations/routeTree.snapshot.ts

@@ -0,0 +1,77 @@
+/* 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 PostsRouteImport } from './routes/posts'
+import { Route as IndexRouteImport } from './routes/index'
+
+const PostsRoute: any = PostsRouteImport.update({
+  id: '/posts',
+  path: '/posts',
+  getParentRoute: () => rootRouteImport,
+} as any)
+const IndexRoute: any = IndexRouteImport.update({
+  id: '/',
+  path: '/',
+  getParentRoute: () => rootRouteImport,
+} as any)
+
+export interface FileRoutesByFullPath {
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRoute
+}
+export interface FileRoutesByTo {
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRoute
+}
+export interface FileRoutesById {
+  __root__: typeof rootRouteImport
+  '/': typeof IndexRoute
+  '/posts': typeof PostsRoute
+}
+export interface FileRouteTypes {
+  fileRoutesByFullPath: FileRoutesByFullPath
+  fullPaths: '/' | '/posts'
+  fileRoutesByTo: FileRoutesByTo
+  to: '/' | '/posts'
+  id: '__root__' | '/' | '/posts'
+  fileRoutesById: FileRoutesById
+}
+export interface RootRouteChildren {
+  IndexRoute: typeof IndexRoute
+  PostsRoute: typeof PostsRoute
+}
+
+declare module '@tanstack/react-router' {
+  interface FileRoutesByPath {
+    '/posts': {
+      id: '/posts'
+      path: '/posts'
+      fullPath: '/posts'
+      preLoaderRoute: typeof PostsRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+    '/': {
+      id: '/'
+      path: '/'
+      fullPath: '/'
+      preLoaderRoute: typeof IndexRouteImport
+      parentRoute: typeof rootRouteImport
+    }
+  }
+}
+
+const rootRouteChildren: RootRouteChildren = {
+  IndexRoute: IndexRoute,
+  PostsRoute: PostsRoute,
+}
+export const routeTree = rootRouteImport
+  ._addFileChildren(rootRouteChildren)
+  ._addFileTypes<FileRouteTypes>()

packages/router-generator/tests/generator/isolated-declarations/routes/__root.tsx

@@ -0,0 +1,2 @@
+// @ts-nocheck
+export const Route = createFileRoute()

packages/router-generator/tests/generator/isolated-declarations/routes/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+// @ts-nocheck
+export const Route = createFileRoute('/')()

packages/router-generator/tests/generator/isolated-declarations/routes/posts.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from '@tanstack/react-router'
+// @ts-nocheck
+export const Route = createFileRoute('/posts')()