@tanstack/router-plugin 1.120.7 → 1.120.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.120.7",
+  "version": "1.120.8",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -100,17 +100,17 @@
     "chokidar": "^3.6.0",
     "unplugin": "^2.1.2",
     "zod": "^3.24.2",
-    "@tanstack/router-core": "^1.120.7",
-    "@tanstack/router-generator": "^1.120.7",
-    "@tanstack/virtual-file-routes": "^1.115.0",
-    "@tanstack/router-utils": "^1.115.0"
+    "@tanstack/router-core": "^1.120.8",
+    "@tanstack/router-utils": "^1.115.0",
+    "@tanstack/router-generator": "^1.120.8",
+    "@tanstack/virtual-file-routes": "^1.115.0"
   },
   "peerDependencies": {
     "@rsbuild/core": ">=1.0.2",
     "vite": ">=5.0.0 || >=6.0.0",
     "vite-plugin-solid": "^2.11.2",
     "webpack": ">=5.92.0",
-    "@tanstack/react-router": "^1.120.7"
+    "@tanstack/react-router": "^1.120.8"
   },
   "peerDependenciesMeta": {
     "@rsbuild/core": {

package/src/core/code-splitter/compilers.ts

@@ -7,6 +7,7 @@ import {
 } from 'babel-dead-code-elimination'
 import { generateFromAst, parseAst } from '@tanstack/router-utils'
 import { tsrSplit } from '../constants'
+import { routeHmrStatement } from '../route-hmr-statement'
 import { createIdentifier } from './path-ids'
 import { getFrameworkOptions } from './framework-options'
 import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
@@ -288,18 +289,9 @@ export function compileCodeSplitReferenceRoute(
                             )()
                           }
 
-                          // If the TSRDummyComponent is not defined, define it
-                          if (
-                            opts.runtimeEnv !== 'prod' && // only in development
-                            !hasImportedOrDefinedIdentifier(
-                              frameworkOptions.idents.dummyHMRComponent,
-                            )
-                          ) {
-                            programPath.pushContainer('body', [
-                              template.statement(
-                                frameworkOptions.dummyHMRComponent,
-                              )(),
-                            ])
+                          // add HMR handling
+                          if (opts.runtimeEnv !== 'prod') {
+                            programPath.pushContainer('body', routeHmrStatement)
                           }
                         }
 

package/src/core/code-splitter/framework-options.ts

@@ -4,9 +4,7 @@ type FrameworkOptions = {
     createFileRoute: string
     lazyFn: string
     lazyRouteComponent: string
-    dummyHMRComponent: string
   }
-  dummyHMRComponent: string
 }
 
 export function getFrameworkOptions(framework: string): FrameworkOptions {
@@ -20,9 +18,7 @@ export function getFrameworkOptions(framework: string): FrameworkOptions {
           createFileRoute: 'createFileRoute',
           lazyFn: 'lazyFn',
           lazyRouteComponent: 'lazyRouteComponent',
-          dummyHMRComponent: 'TSRDummyComponent',
         },
-        dummyHMRComponent: `export function TSRDummyComponent() { return null }`,
       }
       break
     case 'solid':
@@ -32,9 +28,7 @@ export function getFrameworkOptions(framework: string): FrameworkOptions {
           createFileRoute: 'createFileRoute',
           lazyFn: 'lazyFn',
           lazyRouteComponent: 'lazyRouteComponent',
-          dummyHMRComponent: 'TSRDummyComponent',
         },
-        dummyHMRComponent: `export function TSRDummyComponent() { return null }`,
       }
       break
     default:

package/src/core/route-hmr-statement.ts

@@ -0,0 +1,13 @@
+import * as template from '@babel/template'
+
+export const routeHmrStatement = template.statement(
+  `
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    if (newModule.Route && typeof newModule.Route.clone === 'function') {
+      newModule.Route.clone(Route)
+    }
+   })
+}
+`,
+)()

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

@@ -3,7 +3,6 @@
  * https://github.com/TanStack/router/pull/3355
  */
 
-import { isAbsolute, join, normalize } from 'node:path'
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { logDiff } from '@tanstack/router-utils'
 import { getConfig, splitGroupingsSchema } from './config'
@@ -18,6 +17,7 @@ import {
   tsrSplit,
 } from './constants'
 import { decodeIdentifier } from './code-splitter/path-ids'
+import { debug, fileIsInRoutesDirectory } from './utils'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from './constants'
 
 import type { Config } from './config'
@@ -27,27 +27,10 @@ import type {
   TransformResult as UnpluginTransformResult,
 } from 'unplugin'
 
-const debug =
-  process.env.TSR_VITE_DEBUG &&
-  ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG)
-
 function capitalizeFirst(str: string): string {
   return str.charAt(0).toUpperCase() + str.slice(1)
 }
 
-function fileIsInRoutesDirectory(
-  filePath: string,
-  routesDirectory: string,
-): boolean {
-  const routesDirectoryPath = isAbsolute(routesDirectory)
-    ? routesDirectory
-    : join(process.cwd(), routesDirectory)
-
-  const path = normalize(filePath)
-
-  return path.startsWith(routesDirectoryPath)
-}
-
 type BannedBeforeExternalPlugin = {
   identifier: string
   pkg: string

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

@@ -1,22 +1,30 @@
 import { unpluginRouterGeneratorFactory } from './router-generator-plugin'
 import { unpluginRouterCodeSplitterFactory } from './router-code-splitter-plugin'
-
+import { unpluginRouterHmrFactory } from './router-hmr-plugin'
 import type { Config } from './config'
 import type { UnpluginFactory } from 'unplugin'
 
 export const unpluginRouterComposedFactory: UnpluginFactory<
   Partial<Config> | undefined
 > = (options = {}, meta) => {
-  const routerGenerator = unpluginRouterGeneratorFactory(options, meta)
+  const getPlugin = (pluginFactory: UnpluginFactory<Partial<Config>>) => {
+    const plugin = pluginFactory(options, meta)
+    if (!Array.isArray(plugin)) {
+      return [plugin]
+    }
+    return plugin
+  }
+
+  const routerGenerator = getPlugin(unpluginRouterGeneratorFactory)
+  const routerCodeSplitter = getPlugin(unpluginRouterCodeSplitterFactory)
 
-  const routerGeneratorOptions = Array.isArray(routerGenerator)
-    ? routerGenerator
-    : [routerGenerator]
+  const result = [...routerGenerator, ...routerCodeSplitter]
 
-  const routerCodeSplitter = unpluginRouterCodeSplitterFactory(options, meta)
-  const routerCodeSplitterOptions = Array.isArray(routerCodeSplitter)
-    ? routerCodeSplitter
-    : [routerCodeSplitter]
+  const isProduction = process.env.NODE_ENV === 'production'
 
-  return [...routerGeneratorOptions, ...routerCodeSplitterOptions]
+  if (!isProduction && !options.autoCodeSplitting) {
+    const routerHmr = getPlugin(unpluginRouterHmrFactory)
+    result.push(...routerHmr)
+  }
+  return result
 }

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

@@ -0,0 +1,67 @@
+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 type { UnpluginFactory } from 'unplugin'
+
+/**
+ * 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.
+ */
+export const unpluginRouterHmrFactory: UnpluginFactory<
+  Partial<Config> | undefined
+> = (options = {}) => {
+  let ROOT: string = process.cwd()
+  let userConfig = options as Config
+
+  return {
+    name: 'router-hmr-plugin',
+    enforce: 'pre',
+
+    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, filename: id, root: ROOT })
+      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
+    },
+
+    transformInclude(id) {
+      return fileIsInRoutesDirectory(id, userConfig.routesDirectory)
+    },
+
+    vite: {
+      configResolved(config) {
+        ROOT = config.root
+        config.mode
+
+        userConfig = getConfig(options, ROOT)
+      },
+    },
+
+    rspack() {
+      ROOT = process.cwd()
+      userConfig = getConfig(options, ROOT)
+    },
+
+    webpack() {
+      ROOT = process.cwd()
+      userConfig = getConfig(options, ROOT)
+    },
+  }
+}

package/src/core/utils.ts

@@ -0,0 +1,18 @@
+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)
+}