@tanstack/router-plugin 1.167.1 → 1.167.2

package/dist/esm/core/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/core/utils.ts"],"sourcesContent":["import * as t from '@babel/types'\nimport type babel from '@babel/core'\n\nexport const debug =\n  process.env.TSR_VITE_DEBUG &&\n  ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG)\n\n/**\n * Normalizes a file path by converting Windows backslashes to forward slashes.\n * This ensures consistent path handling across different bundlers and operating systems.\n *\n * The route generator stores paths with forward slashes, but rspack/webpack on Windows\n * pass native paths with backslashes to transform handlers.\n */\nexport function normalizePath(path: string): string {\n  return path.replace(/\\\\/g, '/')\n}\n\nexport function getUniqueProgramIdentifier(\n  programPath: babel.NodePath<t.Program>,\n  baseName: string,\n): t.Identifier {\n  let name = baseName\n  let suffix = 2\n\n  while (\n    programPath.scope.hasBinding(name) ||\n    programPath.scope.hasGlobal(name)\n  ) {\n    name = `${baseName}${suffix}`\n    suffix++\n  }\n\n  return t.identifier(name)\n}\n"],"mappings":";;AAGA,IAAa,QACX,QAAQ,IAAI,kBACZ,CAAC,QAAQ,gBAAgB,CAAC,SAAS,QAAQ,IAAI,eAAe;;;;;;;;AAShE,SAAgB,cAAc,MAAsB;AAClD,QAAO,KAAK,QAAQ,OAAO,IAAI;;AAGjC,SAAgB,2BACd,aACA,UACc;CACd,IAAI,OAAO;CACX,IAAI,SAAS;AAEb,QACE,YAAY,MAAM,WAAW,KAAK,IAClC,YAAY,MAAM,UAAU,KAAK,EACjC;AACA,SAAO,GAAG,WAAW;AACrB;;AAGF,QAAO,EAAE,WAAW,KAAK"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/core/utils.ts"],"sourcesContent":["import * as t from '@babel/types'\nimport type babel from '@babel/core'\n\nexport const debug =\n  process.env.TSR_VITE_DEBUG &&\n  ['true', 'router-plugin'].includes(process.env.TSR_VITE_DEBUG)\n\n/**\n * Normalizes a file path by converting Windows backslashes to forward slashes.\n * This ensures consistent path handling across different bundlers and operating systems.\n *\n * The route generator stores paths with forward slashes, but rspack/webpack on Windows\n * pass native paths with backslashes to transform handlers.\n */\nexport function normalizePath(path: string): string {\n  return path.replace(/\\\\/g, '/')\n}\n\nexport function getUniqueProgramIdentifier(\n  programPath: babel.NodePath<t.Program>,\n  baseName: string,\n): t.Identifier {\n  let name = baseName\n  let suffix = 2\n\n  const programScope = programPath.scope.getProgramParent()\n\n  while (\n    programScope.hasBinding(name) ||\n    programScope.hasGlobal(name) ||\n    programScope.hasReference(name)\n  ) {\n    name = `${baseName}${suffix}`\n    suffix++\n  }\n\n  // Register the name so subsequent calls within the same traversal\n  // see it and avoid collisions\n  programScope.references[name] = true\n\n  return t.identifier(name)\n}\n"],"mappings":";;AAGA,IAAa,QACX,QAAQ,IAAI,kBACZ,CAAC,QAAQ,gBAAgB,CAAC,SAAS,QAAQ,IAAI,eAAe;;;;;;;;AAShE,SAAgB,cAAc,MAAsB;AAClD,QAAO,KAAK,QAAQ,OAAO,IAAI;;AAGjC,SAAgB,2BACd,aACA,UACc;CACd,IAAI,OAAO;CACX,IAAI,SAAS;CAEb,MAAM,eAAe,YAAY,MAAM,kBAAkB;AAEzD,QACE,aAAa,WAAW,KAAK,IAC7B,aAAa,UAAU,KAAK,IAC5B,aAAa,aAAa,KAAK,EAC/B;AACA,SAAO,GAAG,WAAW;AACrB;;AAKF,cAAa,WAAW,QAAQ;AAEhC,QAAO,EAAE,WAAW,KAAK"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.167.1",
+  "version": "1.167.2",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",

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

@@ -18,14 +18,8 @@ import type {
 import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from '../constants'
 import type { Config, DeletableNodes } from '../config'
+import type { SplitNodeMeta } from './types'
 
-type SplitNodeMeta = {
-  routeIdent: SplitRouteIdentNodes
-  splitStrategy: 'lazyFn' | 'lazyRouteComponent'
-  localImporterIdent: string
-  exporterIdent: string
-  localExporterIdent: string
-}
 const SPLIT_NODES_CONFIG = new Map<SplitRouteIdentNodes, SplitNodeMeta>([
   [
     'loader',
@@ -183,6 +177,18 @@ export function collectIdentifiersFromNode(node: t.Node): Set<string> {
   return ids
 }
 
+function getObjectPropertyKeyName(prop: t.ObjectProperty): string | undefined {
+  if (t.isIdentifier(prop.key)) {
+    return prop.key.name
+  }
+
+  if (t.isStringLiteral(prop.key)) {
+    return prop.key.value
+  }
+
+  return undefined
+}
+
 /**
  * Build a map from binding name → declaration AST node for all
  * locally-declared module-level bindings. Built once, O(1) lookup.
@@ -297,10 +303,12 @@ export function computeSharedBindings(opts: {
   const splitGroupsPresent = new Set<number>()
   let hasNonSplit = false
   for (const prop of routeOptions.properties) {
-    if (!t.isObjectProperty(prop) || !t.isIdentifier(prop.key)) continue
-    if (prop.key.name === 'codeSplitGroupings') continue
+    if (!t.isObjectProperty(prop)) continue
+    const key = getObjectPropertyKeyName(prop)
+    if (!key) continue
+    if (key === 'codeSplitGroupings') continue
     if (t.isIdentifier(prop.value) && prop.value.name === 'undefined') continue
-    const groupIndex = findIndexForSplitNode(prop.key.name) // -1 if non-split
+    const groupIndex = findIndexForSplitNode(key) // -1 if non-split
     if (groupIndex === -1) {
       hasNonSplit = true
     } else {
@@ -333,8 +341,9 @@ export function computeSharedBindings(opts: {
   const refsByGroup = new Map<string, Set<number>>()
 
   for (const prop of routeOptions.properties) {
-    if (!t.isObjectProperty(prop) || !t.isIdentifier(prop.key)) continue
-    const key = prop.key.name
+    if (!t.isObjectProperty(prop)) continue
+    const key = getObjectPropertyKeyName(prop)
+    if (!key) continue
 
     if (key === 'codeSplitGroupings') continue
 
@@ -707,11 +716,10 @@ export function compileCodeSplitReferenceRoute(
                   routeOptions.properties = routeOptions.properties.filter(
                     (prop) => {
                       if (t.isObjectProperty(prop)) {
-                        if (t.isIdentifier(prop.key)) {
-                          if (opts.deleteNodes!.has(prop.key.name as any)) {
-                            modified = true
-                            return false
-                          }
+                        const key = getObjectPropertyKeyName(prop)
+                        if (key && opts.deleteNodes!.has(key as any)) {
+                          modified = true
+                          return false
                         }
                       }
                       return true
@@ -747,9 +755,9 @@ export function compileCodeSplitReferenceRoute(
                 }
                 routeOptions.properties.forEach((prop) => {
                   if (t.isObjectProperty(prop)) {
-                    if (t.isIdentifier(prop.key)) {
-                      const key = prop.key.name
+                    const key = getObjectPropertyKeyName(prop)
 
+                    if (key) {
                       // If the user has not specified a split grouping for this key
                       // then we should not split it
                       const codeSplitGroupingByKey = findIndexForSplitNode(key)
@@ -858,9 +866,39 @@ export function compileCodeSplitReferenceRoute(
                           ])
                         }
 
-                        prop.value = template.expression(
-                          `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
-                        )()
+                        const insertionPath = path.getStatementParent() ?? path
+                        let splitPropValue: t.Expression | undefined
+
+                        for (const plugin of opts.compilerPlugins ?? []) {
+                          const pluginPropValue = plugin.onSplitRouteProperty?.(
+                            {
+                              programPath,
+                              callExpressionPath: path,
+                              insertionPath,
+                              routeOptions,
+                              prop,
+                              splitNodeMeta,
+                              lazyRouteComponentIdent:
+                                LAZY_ROUTE_COMPONENT_IDENT,
+                            },
+                          )
+
+                          if (!pluginPropValue) {
+                            continue
+                          }
+
+                          modified = true
+                          splitPropValue = pluginPropValue
+                          break
+                        }
+
+                        if (splitPropValue) {
+                          prop.value = splitPropValue
+                        } else {
+                          prop.value = template.expression(
+                            `${LAZY_ROUTE_COMPONENT_IDENT}(${splitNodeMeta.localImporterIdent}, '${splitNodeMeta.exporterIdent}')`,
+                          )()
+                        }
 
                         // add HMR handling
                         if (opts.addHmr && !hmrAdded) {
@@ -1128,10 +1166,7 @@ export function compileCodeSplitVirtualRoute(
                     // since we have special considerations that need
                     // to be accounted for like (not splitting exported identifiers)
                     KNOWN_SPLIT_ROUTE_IDENTS.forEach((splitType) => {
-                      if (
-                        !t.isIdentifier(prop.key) ||
-                        prop.key.name !== splitType
-                      ) {
+                      if (getObjectPropertyKeyName(prop) !== splitType) {
                         return
                       }
 
@@ -1673,33 +1708,32 @@ export function detectCodeSplitGroupingsFromRoute(opts: ParseAstOptions): {
               if (t.isObjectExpression(routeOptions)) {
                 routeOptions.properties.forEach((prop) => {
                   if (t.isObjectProperty(prop)) {
-                    if (t.isIdentifier(prop.key)) {
-                      if (prop.key.name === 'codeSplitGroupings') {
-                        const value = prop.value
+                    const key = getObjectPropertyKeyName(prop)
+                    if (key === 'codeSplitGroupings') {
+                      const value = prop.value
+
+                      if (t.isArrayExpression(value)) {
+                        codeSplitGroupings = value.elements.map((group) => {
+                          if (t.isArrayExpression(group)) {
+                            return group.elements.map((node) => {
+                              if (!t.isStringLiteral(node)) {
+                                throw new Error(
+                                  'You must provide a string literal for the codeSplitGroupings',
+                                )
+                              }
+
+                              return node.value
+                            }) as Array<SplitRouteIdentNodes>
+                          }
 
-                        if (t.isArrayExpression(value)) {
-                          codeSplitGroupings = value.elements.map((group) => {
-                            if (t.isArrayExpression(group)) {
-                              return group.elements.map((node) => {
-                                if (!t.isStringLiteral(node)) {
-                                  throw new Error(
-                                    'You must provide a string literal for the codeSplitGroupings',
-                                  )
-                                }
-
-                                return node.value
-                              }) as Array<SplitRouteIdentNodes>
-                            }
-
-                            throw new Error(
-                              'You must provide arrays with codeSplitGroupings options.',
-                            )
-                          })
-                        } else {
                           throw new Error(
-                            'You must provide an array of arrays for the codeSplitGroupings.',
+                            'You must provide arrays with codeSplitGroupings options.',
                           )
-                        }
+                        })
+                      } else {
+                        throw new Error(
+                          'You must provide an array of arrays for the codeSplitGroupings.',
+                        )
                       }
                     }
                   }

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

@@ -1,4 +1,5 @@
 import { createReactRefreshRouteComponentsPlugin } from './react-refresh-route-components'
+import { createReactStableHmrSplitRouteComponentsPlugin } from './react-stable-hmr-split-route-components'
 import type { ReferenceRouteCompilerPlugin } from '../plugins'
 import type { Config } from '../../config'
 
@@ -9,7 +10,10 @@ export function getReferenceRouteCompilerPlugins(opts: {
   switch (opts.targetFramework) {
     case 'react': {
       if (opts.addHmr) {
-        return [createReactRefreshRouteComponentsPlugin()]
+        return [
+          createReactRefreshRouteComponentsPlugin(),
+          createReactStableHmrSplitRouteComponentsPlugin(),
+        ]
       }
       return undefined
     }

package/src/core/code-splitter/plugins/react-stable-hmr-split-route-components.ts

@@ -0,0 +1,56 @@
+import * as template from '@babel/template'
+import * as t from '@babel/types'
+import { getUniqueProgramIdentifier } from '../../utils'
+import type { ReferenceRouteCompilerPlugin } from '../plugins'
+
+function capitalizeIdentifier(str: string) {
+  return str[0]!.toUpperCase() + str.slice(1)
+}
+
+function createHotDataKey(exportName: string) {
+  return `tsr-split-component:${exportName}`
+}
+
+const buildStableSplitComponentStatements = template.statements(
+  `
+    const %%stableComponentIdent%% = import.meta.hot?.data?.[%%hotDataKey%%] ?? %%lazyRouteComponentIdent%%(%%localImporterIdent%%, %%exporterIdent%%)
+    if (import.meta.hot) {
+      import.meta.hot.data[%%hotDataKey%%] = %%stableComponentIdent%%
+    }
+  `,
+  {
+    syntacticPlaceholders: true,
+  },
+)
+
+export function createReactStableHmrSplitRouteComponentsPlugin(): ReferenceRouteCompilerPlugin {
+  return {
+    name: 'react-stable-hmr-split-route-components',
+    onSplitRouteProperty(ctx) {
+      if (ctx.splitNodeMeta.splitStrategy !== 'lazyRouteComponent') {
+        return
+      }
+
+      const stableComponentIdent = getUniqueProgramIdentifier(
+        ctx.programPath,
+        `TSRSplit${capitalizeIdentifier(ctx.splitNodeMeta.exporterIdent)}`,
+      )
+
+      const hotDataKey = createHotDataKey(ctx.splitNodeMeta.exporterIdent)
+
+      ctx.insertionPath.insertBefore(
+        buildStableSplitComponentStatements({
+          stableComponentIdent,
+          hotDataKey: t.stringLiteral(hotDataKey),
+          lazyRouteComponentIdent: t.identifier(ctx.lazyRouteComponentIdent),
+          localImporterIdent: t.identifier(
+            ctx.splitNodeMeta.localImporterIdent,
+          ),
+          exporterIdent: t.stringLiteral(ctx.splitNodeMeta.exporterIdent),
+        }),
+      )
+
+      return t.identifier(stableComponentIdent.name)
+    },
+  }
+}

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

@@ -2,6 +2,7 @@ import type babel from '@babel/core'
 import type * as t from '@babel/types'
 import type { Config, DeletableNodes } from '../config'
 import type { CodeSplitGroupings } from '../constants'
+import type { SplitNodeMeta } from './types'
 
 export type CompileCodeSplitReferenceRouteOptions = {
   codeSplitGroupings: CodeSplitGroupings
@@ -22,6 +23,16 @@ export type ReferenceRouteCompilerPluginContext = {
   opts: CompileCodeSplitReferenceRouteOptions
 }
 
+export type ReferenceRouteSplitPropertyCompilerPluginContext = {
+  programPath: babel.NodePath<t.Program>
+  callExpressionPath: babel.NodePath<t.CallExpression>
+  insertionPath: babel.NodePath
+  routeOptions: t.ObjectExpression
+  prop: t.ObjectProperty
+  splitNodeMeta: SplitNodeMeta
+  lazyRouteComponentIdent: string
+}
+
 export type ReferenceRouteCompilerPluginResult = {
   modified?: boolean
 }
@@ -31,4 +42,7 @@ export type ReferenceRouteCompilerPlugin = {
   onUnsplittableRoute?: (
     ctx: ReferenceRouteCompilerPluginContext,
   ) => void | ReferenceRouteCompilerPluginResult
+  onSplitRouteProperty?: (
+    ctx: ReferenceRouteSplitPropertyCompilerPluginContext,
+  ) => void | t.Expression
 }

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

@@ -0,0 +1,11 @@
+import type { SplitRouteIdentNodes } from '../constants'
+
+export type SplitStrategy = 'lazyFn' | 'lazyRouteComponent'
+
+export type SplitNodeMeta = {
+  routeIdent: SplitRouteIdentNodes
+  splitStrategy: SplitStrategy
+  localImporterIdent: string
+  exporterIdent: string
+  localExporterIdent: string
+}

package/src/core/utils.ts

@@ -23,13 +23,20 @@ export function getUniqueProgramIdentifier(
   let name = baseName
   let suffix = 2
 
+  const programScope = programPath.scope.getProgramParent()
+
   while (
-    programPath.scope.hasBinding(name) ||
-    programPath.scope.hasGlobal(name)
+    programScope.hasBinding(name) ||
+    programScope.hasGlobal(name) ||
+    programScope.hasReference(name)
   ) {
     name = `${baseName}${suffix}`
     suffix++
   }
 
+  // Register the name so subsequent calls within the same traversal
+  // see it and avoid collisions
+  programScope.references[name] = true
+
   return t.identifier(name)
 }