@tanstack/router-plugin 1.121.4 → 1.121.7

package/src/core/route-autoimport-plugin.ts

@@ -2,7 +2,7 @@ import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
 import babel from '@babel/core'
 import * as template from '@babel/template'
 import { getConfig } from './config'
-import { debug, fileIsInRoutesDirectory } from './utils'
+import { debug } from './utils'
 import type { Config } from './config'
 import type { UnpluginFactory } from 'unplugin'
 
@@ -16,70 +16,74 @@ export const unpluginRouteAutoImportFactory: UnpluginFactory<
   let userConfig = options as Config
 
   return {
-    name: 'router-autoimport-plugin',
+    name: 'tanstack-router:autoimport',
     enforce: 'pre',
 
-    transform(code, id) {
-      let routeType: 'createFileRoute' | 'createLazyFileRoute'
-      if (code.includes('export const Route = createFileRoute(')) {
-        routeType = 'createFileRoute'
-      } else if (code.includes('export const Route = createLazyFileRoute(')) {
-        routeType = 'createLazyFileRoute'
-      } else {
-        return null
-      }
+    transform: {
+      filter: {
+        code: /createFileRoute\(|createLazyFileRoute\(/,
+      },
+      handler(code, id) {
+        if (!globalThis.TSR_ROUTE_FILES?.has(id)) {
+          return null
+        }
+        let routeType: 'createFileRoute' | 'createLazyFileRoute'
+        if (code.includes('createFileRoute(')) {
+          routeType = 'createFileRoute'
+        } else if (code.includes('createLazyFileRoute(')) {
+          routeType = 'createLazyFileRoute'
+        } else {
+          return null
+        }
 
-      const routerImportPath = `@tanstack/${userConfig.target}-router`
+        const routerImportPath = `@tanstack/${userConfig.target}-router`
 
-      const ast = parseAst({ code })
+        const ast = parseAst({ code })
 
-      let isCreateRouteFunctionImported = false as boolean
+        let isCreateRouteFunctionImported = false as boolean
 
-      babel.traverse(ast, {
-        Program: {
-          enter(programPath) {
-            programPath.traverse({
-              ImportDeclaration(path) {
-                const importedSpecifiers = path.node.specifiers.map(
-                  (specifier) => specifier.local.name,
-                )
-                if (
-                  importedSpecifiers.includes(routeType) &&
-                  path.node.source.value === routerImportPath
-                ) {
-                  isCreateRouteFunctionImported = true
-                }
-              },
-            })
+        babel.traverse(ast, {
+          Program: {
+            enter(programPath) {
+              programPath.traverse({
+                ImportDeclaration(path) {
+                  const importedSpecifiers = path.node.specifiers.map(
+                    (specifier) => specifier.local.name,
+                  )
+                  if (
+                    importedSpecifiers.includes(routeType) &&
+                    path.node.source.value === routerImportPath
+                  ) {
+                    isCreateRouteFunctionImported = true
+                  }
+                },
+              })
+            },
           },
-        },
-      })
+        })
 
-      if (!isCreateRouteFunctionImported) {
-        if (debug) console.info('Adding autoimports to route ', id)
+        if (!isCreateRouteFunctionImported) {
+          if (debug) console.info('Adding autoimports to route ', id)
 
-        const autoImportStatement = template.statement(
-          `import { ${routeType} } from '${routerImportPath}'`,
-        )()
-        ast.program.body.unshift(autoImportStatement)
+          const autoImportStatement = template.statement(
+            `import { ${routeType} } from '${routerImportPath}'`,
+          )()
+          ast.program.body.unshift(autoImportStatement)
 
-        const result = generateFromAst(ast, {
-          sourceMaps: true,
-          filename: id,
-          sourceFileName: id,
-        })
-        if (debug) {
-          logDiff(code, result.code)
-          console.log('Output:\n', result.code + '\n\n')
+          const result = generateFromAst(ast, {
+            sourceMaps: true,
+            filename: id,
+            sourceFileName: id,
+          })
+          if (debug) {
+            logDiff(code, result.code)
+            console.log('Output:\n', result.code + '\n\n')
+          }
+          return result
         }
-        return result
-      }
-
-      return null
-    },
 
-    transformInclude(id) {
-      return fileIsInRoutesDirectory(id, userConfig.routesDirectory)
+        return null
+      },
     },
 
     vite: {

package/src/core/router-code-splitter-plugin.ts

@@ -17,7 +17,7 @@ import {
   tsrSplit,
 } from './constants'
 import { decodeIdentifier } from './code-splitter/path-ids'
-import { debug, fileIsInRoutesDirectory } from './utils'
+import { debug } from './utils'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from './constants'
 
 import type { Config } from './config'
@@ -27,10 +27,6 @@ import type {
   TransformResult as UnpluginTransformResult,
 } from 'unplugin'
 
-function capitalizeFirst(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
 type BannedBeforeExternalPlugin = {
   identifier: string
   pkg: string
@@ -52,7 +48,7 @@ class FoundPluginInBeforeCode extends Error {
     super(`We detected that the '${externalPlugin.pkg}' was passed before '@tanstack/router-plugin'. Please make sure that '@tanstack/router-plugin' is passed before '${externalPlugin.pkg}' and try again: 
 e.g.
 plugins: [
-  TanStackRouter${capitalizeFirst(framework)}(), // Place this before ${externalPlugin.usage}
+  tanstackRouter(), // Place this before ${externalPlugin.usage}
   ${externalPlugin.usage},
 ]
 `)
@@ -171,83 +167,81 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
     return result
   }
 
-  return {
-    name: 'router-code-splitter-plugin',
-    enforce: 'pre',
-
-    transform(code, id) {
-      if (!userConfig.autoCodeSplitting) {
-        return null
-      }
-
-      const url = pathToFileURL(id)
-      url.searchParams.delete('v')
-      id = fileURLToPath(url).replace(/\\/g, '/')
-
-      if (id.includes(tsrSplit)) {
-        return handleCompilingVirtualFile(code, id)
-      } else if (
-        fileIsInRoutesDirectory(id, userConfig.routesDirectory) &&
-        (code.includes('createRoute(') || code.includes('createFileRoute('))
-      ) {
-        for (const externalPlugin of bannedBeforeExternalPlugins) {
-          if (!externalPlugin.frameworks.includes(framework)) {
-            continue
-          }
-
-          if (code.includes(externalPlugin.identifier)) {
-            throw new FoundPluginInBeforeCode(externalPlugin, framework)
+  return [
+    {
+      name: 'tanstack-router:code-splitter:compile-reference-file',
+      enforce: 'pre',
+
+      transform: {
+        filter: {
+          id: {
+            exclude: tsrSplit,
+          },
+          code: 'createFileRoute(',
+        },
+        handler(code, id) {
+          if (
+            globalThis.TSR_ROUTE_FILES?.has(id) &&
+            code.includes('createFileRoute(')
+          ) {
+            for (const externalPlugin of bannedBeforeExternalPlugins) {
+              if (!externalPlugin.frameworks.includes(framework)) {
+                continue
+              }
+
+              if (code.includes(externalPlugin.identifier)) {
+                throw new FoundPluginInBeforeCode(externalPlugin, framework)
+              }
+            }
+
+            return handleCompilingReferenceFile(code, id)
           }
-        }
-
-        return handleCompilingReferenceFile(code, id)
-      }
-
-      return null
-    },
-
-    transformInclude(id) {
-      if (!userConfig.autoCodeSplitting) {
-        return undefined
-      }
 
-      if (
-        fileIsInRoutesDirectory(id, userConfig.routesDirectory) ||
-        id.includes(tsrSplit)
-      ) {
-        return true
-      }
-      return false
-    },
+          return null
+        },
+      },
 
-    vite: {
-      configResolved(config) {
-        ROOT = config.root
+      vite: {
+        configResolved(config) {
+          ROOT = config.root
+          userConfig = getConfig(options, ROOT)
+        },
+      },
 
+      rspack() {
+        ROOT = process.cwd()
         userConfig = getConfig(options, ROOT)
       },
-    },
 
-    rspack(_compiler) {
-      ROOT = process.cwd()
-      userConfig = getConfig(options, ROOT)
-    },
+      webpack(compiler) {
+        ROOT = process.cwd()
+        userConfig = getConfig(options, ROOT)
 
-    webpack(compiler) {
-      ROOT = process.cwd()
-      userConfig = getConfig(options, ROOT)
-
-      if (
-        userConfig.autoCodeSplitting &&
-        compiler.options.mode === 'production'
-      ) {
-        compiler.hooks.done.tap(PLUGIN_NAME, () => {
-          console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!')
-          setTimeout(() => {
-            process.exit(0)
+        if (compiler.options.mode === 'production') {
+          compiler.hooks.done.tap(PLUGIN_NAME, () => {
+            console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!')
+            setTimeout(() => {
+              process.exit(0)
+            })
           })
-        })
-      }
+        }
+      },
     },
-  }
+    {
+      name: 'tanstack-router:code-splitter:compile-virtual-file',
+      enforce: 'pre',
+
+      transform: {
+        filter: {
+          id: /tsr-split/,
+        },
+        handler(code, id) {
+          const url = pathToFileURL(id)
+          url.searchParams.delete('v')
+          id = fileURLToPath(url).replace(/\\/g, '/')
+          return handleCompilingVirtualFile(code, id)
+        },
+      },
+    },
+  ]
 }

package/src/core/router-composed-plugin.ts

@@ -20,7 +20,13 @@ export const unpluginRouterComposedFactory: UnpluginFactory<
   const routerCodeSplitter = getPlugin(unpluginRouterCodeSplitterFactory)
   const routeAutoImport = getPlugin(unpluginRouteAutoImportFactory)
 
-  const result = [...routerGenerator, ...routerCodeSplitter, ...routeAutoImport]
+  const result = [...routerGenerator]
+  if (options.autoCodeSplitting) {
+    result.push(...routerCodeSplitter)
+  }
+  if (options.verboseFileRoutes === false) {
+    result.push(...routeAutoImport)
+  }
 
   const isProduction = process.env.NODE_ENV === 'production'
 

package/src/core/router-generator-plugin.ts

@@ -1,7 +1,8 @@
 import { isAbsolute, join, normalize } from 'node:path'
 import { Generator, resolveConfigPath } from '@tanstack/router-generator'
-
 import { getConfig } from './config'
+
+import type { GeneratorEvent } from '@tanstack/router-generator'
 import type { FSWatcher } from 'chokidar'
 import type { UnpluginFactory } from 'unplugin'
 import type { Config } from './config'
@@ -31,41 +32,39 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
     })
   }
 
-  const generate = async () => {
+  const generate = async (opts?: {
+    file: string
+    event: 'create' | 'update' | 'delete'
+  }) => {
     if (routeGenerationDisabled()) {
       return
     }
-    try {
-      await generator.run()
-    } catch (e) {
-      console.error(e)
+    let generatorEvent: GeneratorEvent | undefined = undefined
+    if (opts) {
+      const filePath = normalize(opts.file)
+      if (filePath === resolveConfigPath({ configDirectory: ROOT })) {
+        initConfigAndGenerator()
+        return
+      }
+      generatorEvent = { path: filePath, type: opts.event }
     }
-  }
-
-  const handleFile = async (
-    file: string,
-    event: 'create' | 'update' | 'delete',
-  ) => {
-    const filePath = normalize(file)
 
-    if (filePath === resolveConfigPath({ configDirectory: ROOT })) {
-      initConfigAndGenerator()
-      return
-    }
     try {
-      await generator.run({ path: filePath, type: event })
+      await generator.run(generatorEvent)
+      globalThis.TSR_ROUTE_FILES = generator.getRouteFileList()
     } catch (e) {
       console.error(e)
     }
   }
 
   return {
-    name: 'router-generator-plugin',
+    name: 'tanstack:router-generator',
     enforce: 'pre',
     async watchChange(id, { event }) {
-      if (!routeGenerationDisabled()) {
-        await handleFile(id, event)
-      }
+      await generate({
+        file: id,
+        event,
+      })
     },
     async buildStart() {
       await generate()
@@ -89,7 +88,7 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
 
       let handle: FSWatcher | null = null
 
-      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, generate)
+      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, () => generate())
 
       compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async () => {
         if (handle) {
@@ -117,7 +116,7 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
 
       let handle: FSWatcher | null = null
 
-      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, generate)
+      compiler.hooks.beforeRun.tapPromise(PLUGIN_NAME, () => generate())
 
       compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async () => {
         if (handle) {

package/src/core/router-hmr-plugin.ts

@@ -1,7 +1,7 @@
 import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
 import { getConfig } from './config'
 import { routeHmrStatement } from './route-hmr-statement'
-import { debug, fileIsInRoutesDirectory } from './utils'
+import { debug } from './utils'
 import type { Config } from './config'
 import type { UnpluginFactory } from 'unplugin'
 
@@ -17,32 +17,33 @@ export const unpluginRouterHmrFactory: UnpluginFactory<
   let userConfig = options as Config
 
   return {
-    name: 'router-hmr-plugin',
+    name: 'tanstack-router:hmr',
     enforce: 'pre',
 
-    transform(code, id) {
-      if (!code.includes('export const Route = createFileRoute(')) {
-        return null
-      }
-
-      if (debug) console.info('Adding HMR handling to route ', id)
+    transform: {
+      filter: {
+        code: 'createFileRoute(',
+      },
+      handler(code, id) {
+        if (!globalThis.TSR_ROUTE_FILES?.has(id)) {
+          return null
+        }
 
-      const ast = parseAst({ code })
-      ast.program.body.push(routeHmrStatement)
-      const result = generateFromAst(ast, {
-        sourceMaps: true,
-        filename: id,
-        sourceFileName: id,
-      })
-      if (debug) {
-        logDiff(code, result.code)
-        console.log('Output:\n', result.code + '\n\n')
-      }
-      return result
-    },
+        if (debug) console.info('Adding HMR handling to route ', id)
 
-    transformInclude(id) {
-      return fileIsInRoutesDirectory(id, userConfig.routesDirectory)
+        const ast = parseAst({ code })
+        ast.program.body.push(routeHmrStatement)
+        const result = generateFromAst(ast, {
+          sourceMaps: true,
+          filename: id,
+          sourceFileName: id,
+        })
+        if (debug) {
+          logDiff(code, result.code)
+          console.log('Output:\n', result.code + '\n\n')
+        }
+        return result
+      },
     },
 
     vite: {

package/src/core/utils.ts

@@ -1,18 +1,3 @@
-import { isAbsolute, join, normalize } from 'node:path'
-
 export const debug =
   process.env.TSR_VITE_DEBUG &&
   ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG)
-
-export function fileIsInRoutesDirectory(
-  filePath: string,
-  routesDirectory: string,
-): boolean {
-  const routesDirectoryPath = isAbsolute(routesDirectory)
-    ? routesDirectory
-    : join(process.cwd(), routesDirectory)
-
-  const path = normalize(filePath)
-
-  return path.startsWith(routesDirectoryPath)
-}

package/src/global.d.ts

@@ -0,0 +1,5 @@
+/* eslint-disable no-var */
+declare global {
+  var TSR_ROUTE_FILES: Set<string> | undefined
+}
+export {}