fix: router-plugins correctly handle virtual file routes regardless of their location (#4407)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: schiller-manuel

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

@@ -19,6 +19,11 @@ import type { Config } from '../../config'
 
 const disallowedRouteGroupConfiguration = /\(([^)]+)\).(ts|js|tsx|jsx)/
 
+const virtualConfigFileRegExp = /__virtual\.[mc]?[jt]s$/
+export function isVirtualConfigFile(fileName: string): boolean {
+  return virtualConfigFileRegExp.test(fileName)
+}
+
 export async function getRouteNodes(
   config: Pick<
     Config,
@@ -38,6 +43,7 @@ export async function getRouteNodes(
   const routeFileIgnoreRegExp = new RegExp(routeFileIgnorePattern ?? '', 'g')
 
   const routeNodes: Array<RouteNode> = []
+  const allPhysicalDirectories: Array<string> = []
 
   async function recurse(dir: string) {
     const fullDir = path.resolve(config.routesDirectory, dir)
@@ -63,7 +69,7 @@ export async function getRouteNodes(
     })
 
     const virtualConfigFile = dirList.find((dirent) => {
-      return dirent.isFile() && dirent.name.match(/__virtual\.[mc]?[jt]s$/)
+      return dirent.isFile() && isVirtualConfigFile(dirent.name)
     })
 
     if (virtualConfigFile !== undefined) {
@@ -81,14 +87,16 @@ export async function getRouteNodes(
         file: '',
         children: virtualRouteSubtreeConfig,
       }
-      const { routeNodes: virtualRouteNodes } = await getRouteNodesVirtual(
-        {
-          ...config,
-          routesDirectory: fullDir,
-          virtualRouteConfig: dummyRoot,
-        },
-        root,
-      )
+      const { routeNodes: virtualRouteNodes, physicalDirectories } =
+        await getRouteNodesVirtual(
+          {
+            ...config,
+            routesDirectory: fullDir,
+            virtualRouteConfig: dummyRoot,
+          },
+          root,
+        )
+      allPhysicalDirectories.push(...physicalDirectories)
       virtualRouteNodes.forEach((node) => {
         const filePath = replaceBackslash(path.join(dir, node.filePath))
         const routePath = `/${dir}${node.routePath}`
@@ -192,7 +200,11 @@ export async function getRouteNodes(
     rootRouteNode.variableName = 'root'
   }
 
-  return { rootRouteNode, routeNodes }
+  return {
+    rootRouteNode,
+    routeNodes,
+    physicalDirectories: allPhysicalDirectories,
+  }
 }
 
 /**

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

@@ -53,7 +53,6 @@ export async function getRouteNodes(
     throw new Error(`virtualRouteConfig is undefined`)
   }
   let virtualRouteConfig: VirtualRootRoute
-  let children: Array<RouteNode> = []
   if (typeof tsrConfig.virtualRouteConfig === 'string') {
     virtualRouteConfig = await getVirtualRouteConfigFromFileExport(
       tsrConfig,
@@ -62,7 +61,7 @@ export async function getRouteNodes(
   } else {
     virtualRouteConfig = tsrConfig.virtualRouteConfig
   }
-  children = await getRouteNodesRecursive(
+  const { children, physicalDirectories } = await getRouteNodesRecursive(
     tsrConfig,
     root,
     fullDir,
@@ -80,7 +79,7 @@ export async function getRouteNodes(
   const rootRouteNode = allNodes[0]
   const routeNodes = allNodes.slice(1)
 
-  return { rootRouteNode, routeNodes }
+  return { rootRouteNode, routeNodes, physicalDirectories }
 }
 
 /**
@@ -135,20 +134,22 @@ export async function getRouteNodesRecursive(
   fullDir: string,
   nodes?: Array<VirtualRouteNode>,
   parent?: RouteNode,
-): Promise<Array<RouteNode>> {
+): Promise<{ children: Array<RouteNode>; physicalDirectories: Array<string> }> {
   if (nodes === undefined) {
-    return []
+    return { children: [], physicalDirectories: [] }
   }
+  const allPhysicalDirectories: Array<string> = []
   const children = await Promise.all(
     nodes.map(async (node) => {
       if (node.type === 'physical') {
-        const { routeNodes } = await getRouteNodesPhysical(
+        const { routeNodes, physicalDirectories } = await getRouteNodesPhysical(
           {
             ...tsrConfig,
             routesDirectory: resolve(fullDir, node.directory),
           },
           root,
         )
+        allPhysicalDirectories.push(node.directory)
         routeNodes.forEach((subtreeNode) => {
           subtreeNode.variableName = routePathToVariable(
             `${node.pathPrefix}/${removeExt(subtreeNode.filePath)}`,
@@ -206,14 +207,16 @@ export async function getRouteNodesRecursive(
           }
 
           if (node.children !== undefined) {
-            const children = await getRouteNodesRecursive(
-              tsrConfig,
-              root,
-              fullDir,
-              node.children,
-              routeNode,
-            )
+            const { children, physicalDirectories } =
+              await getRouteNodesRecursive(
+                tsrConfig,
+                root,
+                fullDir,
+                node.children,
+                routeNode,
+              )
             routeNode.children = children
+            allPhysicalDirectories.push(...physicalDirectories)
 
             // If the route has children, it should be a layout
             routeNode._fsRouteType = 'layout'
@@ -242,19 +245,24 @@ export async function getRouteNodesRecursive(
           }
 
           if (node.children !== undefined) {
-            const children = await getRouteNodesRecursive(
-              tsrConfig,
-              root,
-              fullDir,
-              node.children,
-              routeNode,
-            )
+            const { children, physicalDirectories } =
+              await getRouteNodesRecursive(
+                tsrConfig,
+                root,
+                fullDir,
+                node.children,
+                routeNode,
+              )
             routeNode.children = children
+            allPhysicalDirectories.push(...physicalDirectories)
           }
           return routeNode
         }
       }
     }),
   )
-  return children.flat()
+  return {
+    children: children.flat(),
+    physicalDirectories: allPhysicalDirectories,
+  }
 }

packages/router-generator/src/generator.ts

@@ -4,7 +4,10 @@ import { mkdtempSync } from 'node:fs'
 import crypto from 'node:crypto'
 import { deepEqual, rootRouteId } from '@tanstack/router-core'
 import { logging } from './logger'
-import { getRouteNodes as physicalGetRouteNodes } from './filesystem/physical/getRouteNodes'
+import {
+  isVirtualConfigFile,
+  getRouteNodes as physicalGetRouteNodes,
+} from './filesystem/physical/getRouteNodes'
 import { getRouteNodes as virtualGetRouteNodes } from './filesystem/virtual/getRouteNodes'
 import { rootPathId } from './filesystem/physical/rootPathId'
 import {
@@ -170,6 +173,7 @@ export class Generator {
   // this is just a cache for the transform plugins since we need them for each route file that is to be processed
   private transformPlugins: Array<TransformPlugin> = []
   private routeGroupPatternRegex = /\(.+\)/g
+  private physicalDirectories: Array<string> = []
 
   constructor(opts: { config: Config; root: string; fs?: fs }) {
     this.config = opts.config
@@ -203,17 +207,17 @@ export class Generator {
       : path.resolve(this.root, this.config.routesDirectory)
   }
 
+  public getRouteFileList(): Set<string> {
+    return new Set(this.routeNodeCache.keys())
+  }
+
   public async run(event?: GeneratorEvent): Promise<void> {
-    // we are only interested in FileEvents that affect either the generated route tree or files inside the routes folder
-    if (event && event.type !== 'rerun') {
-      if (
-        !(
-          event.path === this.generatedRouteTreePath ||
-          event.path.startsWith(this.routesDirectoryPath)
-        )
-      ) {
-        return
-      }
+    if (
+      event &&
+      event.type !== 'rerun' &&
+      !this.isFileRelevantForRouteTreeGeneration(event.path)
+    ) {
+      return
     }
     this.fileEventQueue.push(event ?? { type: 'rerun' })
     // only allow a single run at a time
@@ -233,7 +237,7 @@ export class Generator {
           await Promise.all(
             tempQueue.map(async (e) => {
               if (e.type === 'update') {
-                let cacheEntry
+                let cacheEntry: GeneratorCacheEntry | undefined
                 if (e.path === this.generatedRouteTreePath) {
                   cacheEntry = this.routeTreeFileCache
                 } else {
@@ -301,14 +305,19 @@ export class Generator {
       getRouteNodesResult = await physicalGetRouteNodes(this.config, this.root)
     }
 
-    const { rootRouteNode, routeNodes: beforeRouteNodes } = getRouteNodesResult
+    const {
+      rootRouteNode,
+      routeNodes: beforeRouteNodes,
+      physicalDirectories,
+    } = getRouteNodesResult
     if (rootRouteNode === undefined) {
       let errorMessage = `rootRouteNode must not be undefined. Make sure you've added your root route into the route-tree.`
       if (!this.config.virtualRouteConfig) {
         errorMessage += `\nMake sure that you add a "${rootPathId}.${this.config.disableTypes ? 'js' : 'tsx'}" file to your routes directory.\nAdd the file in: "${this.config.routesDirectory}/${rootPathId}.${this.config.disableTypes ? 'js' : 'tsx'}"`
       }
       throw new Error(errorMessage)
     }
+    this.physicalDirectories = physicalDirectories
 
     writeRouteTreeFile = await this.handleRootNode(rootRouteNode)
 
@@ -1292,4 +1301,42 @@ ${acc.routeTree.map((child) => `${child.variableName}${exportName}: typeof ${get
 
     acc.routeNodes.push(node)
   }
+
+  // only process files that are relevant for the route tree generation
+  private isFileRelevantForRouteTreeGeneration(filePath: string): boolean {
+    // the generated route tree file
+    if (filePath === this.generatedRouteTreePath) {
+      return true
+    }
+
+    // files inside the routes folder
+    if (filePath.startsWith(this.routesDirectoryPath)) {
+      return true
+    }
+
+    // the virtual route config file passed into `virtualRouteConfig`
+    if (
+      typeof this.config.virtualRouteConfig === 'string' &&
+      filePath === this.config.virtualRouteConfig
+    ) {
+      return true
+    }
+
+    // this covers all files that are mounted via `virtualRouteConfig` or any `__virtual.ts` files
+    if (this.routeNodeCache.has(filePath)) {
+      return true
+    }
+
+    // virtual config files such as`__virtual.ts`
+    if (isVirtualConfigFile(path.basename(filePath))) {
+      return true
+    }
+
+    // route files inside directories mounted via `physical()` inside a virtual route config
+    if (this.physicalDirectories.some((dir) => filePath.startsWith(dir))) {
+      return true
+    }
+
+    return false
+  }
 }

packages/router-generator/src/types.ts

@@ -18,6 +18,7 @@ export type RouteNode = {
 export interface GetRouteNodesResult {
   rootRouteNode?: RouteNode
   routeNodes: Array<RouteNode>
+  physicalDirectories: Array<string>
 }
 
 export type FsRouteType =