@tanstack/router-plugin 1.121.0-alpha.26 → 1.121.0-alpha.28

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

@@ -17,9 +17,9 @@ 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 { GetRoutesByFileMapResultValue } from '@tanstack/router-generator'
 import type { Config } from './config'
 import type {
   UnpluginContextMeta,
@@ -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
@@ -48,11 +44,14 @@ const bannedBeforeExternalPlugins: Array<BannedBeforeExternalPlugin> = [
 ]
 
 class FoundPluginInBeforeCode extends Error {
-  constructor(externalPlugin: BannedBeforeExternalPlugin, framework: string) {
-    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: 
+  constructor(
+    externalPlugin: BannedBeforeExternalPlugin,
+    pluginFramework: string,
+  ) {
+    super(`We detected that the '${externalPlugin.pkg}' was passed before '@tanstack/router-plugin/${pluginFramework}'. 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},
 ]
 `)
@@ -82,6 +81,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
   const handleCompilingReferenceFile = (
     code: string,
     id: string,
+    generatorNodeInfo: GetRoutesByFileMapResultValue,
   ): UnpluginTransformResult => {
     if (debug) console.info('Compiling Route: ', id)
 
@@ -102,7 +102,7 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
     const userShouldSplitFn = getShouldSplitFn()
 
     const pluginSplitBehavior = userShouldSplitFn?.({
-      routeId: fromCode.routeId,
+      routeId: generatorNodeInfo.routePath,
     }) as CodeSplitGroupings | undefined
 
     if (pluginSplitBehavior) {
@@ -120,11 +120,12 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
 
     const compiledReferenceRoute = compileCodeSplitReferenceRoute({
       code,
-      runtimeEnv: isProduction ? 'prod' : 'dev',
       codeSplitGroupings: splitGroupings,
       targetFramework: userConfig.target,
       filename: id,
       id,
+      deleteNodes: new Set(userConfig.codeSplittingOptions?.deleteNodes),
+      addHmr: (options.codeSplittingOptions?.addHmr ?? true) && !isProduction,
     })
 
     if (debug) {
@@ -171,83 +172,97 @@ 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)
+  const includedCode = [
+    'createFileRoute(',
+    'createRootRoute(',
+    'createRootRouteWithContext(',
+  ]
+  return [
+    {
+      name: 'tanstack-router:code-splitter:compile-reference-file',
+      enforce: 'pre',
+
+      transform: {
+        filter: {
+          id: {
+            exclude: tsrSplit,
+            // this is necessary for webpack / rspack to avoid matching .html files
+            include: /\.(m|c)?(j|t)sx?$/,
+          },
+          code: {
+            include: includedCode,
+          },
+        },
+        handler(code, id) {
+          const generatorFileInfo = globalThis.TSR_ROUTES_BY_ID_MAP?.get(id)
+          if (
+            generatorFileInfo &&
+            includedCode.some((included) => code.includes(included))
+          ) {
+            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, generatorFileInfo)
           }
-        }
-
-        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)
+        },
+        applyToEnvironment(environment) {
+          if (userConfig.plugin?.vite?.environmentName) {
+            return userConfig.plugin.vite.environmentName === environment.name
+          }
+          return true
+        },
+      },
 
+      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

@@ -1,3 +1,4 @@
+import { getConfig } from '@tanstack/router-generator'
 import { unpluginRouterGeneratorFactory } from './router-generator-plugin'
 import { unpluginRouterCodeSplitterFactory } from './router-code-splitter-plugin'
 import { unpluginRouterHmrFactory } from './router-hmr-plugin'
@@ -8,6 +9,9 @@ import type { UnpluginFactory } from 'unplugin'
 export const unpluginRouterComposedFactory: UnpluginFactory<
   Partial<Config> | undefined
 > = (options = {}, meta) => {
+  const ROOT: string = process.cwd()
+  const userConfig = getConfig(options, ROOT)
+
   const getPlugin = (pluginFactory: UnpluginFactory<Partial<Config>>) => {
     const plugin = pluginFactory(options, meta)
     if (!Array.isArray(plugin)) {
@@ -20,11 +24,17 @@ export const unpluginRouterComposedFactory: UnpluginFactory<
   const routerCodeSplitter = getPlugin(unpluginRouterCodeSplitterFactory)
   const routeAutoImport = getPlugin(unpluginRouteAutoImportFactory)
 
-  const result = [...routerGenerator, ...routerCodeSplitter, ...routeAutoImport]
+  const result = [...routerGenerator]
+  if (userConfig.autoCodeSplitting) {
+    result.push(...routerCodeSplitter)
+  }
+  if (userConfig.verboseFileRoutes === false) {
+    result.push(...routeAutoImport)
+  }
 
   const isProduction = process.env.NODE_ENV === 'production'
 
-  if (!isProduction && !options.autoCodeSplitting) {
+  if (!isProduction && !userConfig.autoCodeSplitting) {
     const routerHmr = getPlugin(unpluginRouterHmrFactory)
     result.push(...routerHmr)
   }

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_ROUTES_BY_ID_MAP = generator.getRoutesByFileMap()
     } 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()
@@ -74,12 +73,13 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
       configResolved() {
         initConfigAndGenerator()
       },
-      async buildStart() {
-        if (this.environment.config.consumer === 'server') {
-          // When building in environment mode, we only need to generate routes
-          // for the client environment
-          return
+      applyToEnvironment(environment) {
+        if (userConfig.plugin?.vite?.environmentName) {
+          return userConfig.plugin.vite.environmentName === environment.name
         }
+        return true
+      },
+      async buildStart() {
         await generate()
       },
       sharedDuringBuild: true,
@@ -89,7 +89,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) {
@@ -101,7 +101,7 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
         const chokidar = await import('chokidar')
         handle = chokidar
           .watch(routesDirectoryPath, { ignoreInitial: true })
-          .on('add', generate)
+          .on('add', (file) => generate({ file, event: 'create' }))
 
         await generate()
       })
@@ -113,11 +113,11 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
       })
     },
     webpack(compiler) {
-      userConfig = getConfig(options, ROOT)
+      initConfigAndGenerator()
 
       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) {
@@ -129,7 +129,7 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
         const chokidar = await import('chokidar')
         handle = chokidar
           .watch(routesDirectoryPath, { ignoreInitial: true })
-          .on('add', generate)
+          .on('add', (file) => generate({ file, event: 'create' }))
 
         await generate()
       })

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

@@ -1,15 +1,21 @@
 import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
-import { getConfig } from './config'
 import { routeHmrStatement } from './route-hmr-statement'
-import { debug, fileIsInRoutesDirectory } from './utils'
-import type { Config } from './config'
+import { debug } from './utils'
+import { getConfig } from './config'
 import type { UnpluginFactory } from 'unplugin'
+import type { Config } from './config'
 
 /**
  * This plugin adds HMR support for file routes.
  * It is only added to the composed plugin in dev when autoCodeSplitting is disabled, since the code splitting plugin
  * handles HMR for code-split routes itself.
  */
+
+const includeCode = [
+  'createFileRoute(',
+  'createRootRoute(',
+  'createRootRouteWithContext(',
+]
 export const unpluginRouterHmrFactory: UnpluginFactory<
   Partial<Config> | undefined
 > = (options = {}) => {
@@ -17,49 +23,48 @@ export const unpluginRouterHmrFactory: UnpluginFactory<
   let userConfig = options as Config
 
   return {
-    name: 'router-hmr-plugin',
+    name: 'tanstack-router:hmr',
     enforce: 'pre',
+    transform: {
+      filter: {
+        // this is necessary for webpack / rspack to avoid matching .html files
+        id: /\.(m|c)?(j|t)sx?$/,
+        code: {
+          include: includeCode,
+        },
+      },
+      handler(code, id) {
+        if (!globalThis.TSR_ROUTES_BY_ID_MAP?.has(id)) {
+          return null
+        }
 
-    transform(code, id) {
-      if (!code.includes('export const Route = createFileRoute(')) {
-        return null
-      }
-
-      if (debug) console.info('Adding HMR handling to route ', id)
-
-      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: {
       configResolved(config) {
         ROOT = config.root
         userConfig = getConfig(options, ROOT)
       },
-    },
-
-    rspack() {
-      ROOT = process.cwd()
-      userConfig = getConfig(options, ROOT)
-    },
-
-    webpack() {
-      ROOT = process.cwd()
-      userConfig = getConfig(options, ROOT)
+      applyToEnvironment(environment) {
+        if (userConfig.plugin?.vite?.environmentName) {
+          return userConfig.plugin.vite.environmentName === environment.name
+        }
+        return true
+      },
     },
   }
 }

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,7 @@
+/* eslint-disable no-var */
+import type { GetRoutesByFileMapResult } from '@tanstack/router-generator'
+
+declare global {
+  var TSR_ROUTES_BY_ID_MAP: GetRoutesByFileMapResult | undefined
+}
+export {}

package/src/index.ts

@@ -2,3 +2,8 @@ export { configSchema, getConfig } from './core/config'
 export { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
 export { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
 export type { Config, ConfigInput, ConfigOutput } from './core/config'
+export {
+  tsrSplit,
+  splitRouteIdentNodes,
+  defaultCodeSplitGroupings,
+} from './core/constants'