@tanstack/router-plugin 1.168.22 → 1.168.24-pre.0

package/src/core/code-splitter/plugins/react-refresh-route-components.ts

@@ -13,29 +13,74 @@ const REACT_REFRESH_ROUTE_COMPONENT_IDENTS = new Set([
   'notFoundComponent',
 ])
 
-function hoistInlineRouteComponents(ctx: {
+type RouteComponentContext = {
   programPath: Parameters<typeof getUniqueProgramIdentifier>[0]
   insertionPath: { insertBefore: (nodes: Array<t.VariableDeclaration>) => void }
   routeOptions: t.ObjectExpression
-}) {
+}
+
+function isReactComponentName(name: string) {
+  const firstCharacter = name[0]
+
+  return (
+    firstCharacter !== undefined &&
+    firstCharacter >= 'A' &&
+    firstCharacter <= 'Z'
+  )
+}
+
+function getRouteComponentKey(prop: t.ObjectProperty) {
+  const key = getObjectPropertyKeyName(prop)
+
+  return key && REACT_REFRESH_ROUTE_COMPONENT_IDENTS.has(key) ? key : undefined
+}
+
+function prepareRouteComponentsForReactRefresh(ctx: RouteComponentContext) {
   const hoistedDeclarations: Array<t.VariableDeclaration> = []
+  let modified = false
 
-  ctx.routeOptions.properties.forEach((prop) => {
+  for (const prop of ctx.routeOptions.properties) {
     if (!t.isObjectProperty(prop)) {
-      return
+      continue
     }
 
-    const key = getObjectPropertyKeyName(prop)
+    const key = getRouteComponentKey(prop)
 
-    if (!key || !REACT_REFRESH_ROUTE_COMPONENT_IDENTS.has(key)) {
-      return
+    if (!key) {
+      continue
+    }
+
+    if (t.isIdentifier(prop.value)) {
+      if (isReactComponentName(prop.value.name)) {
+        continue
+      }
+
+      const bindingNode = ctx.programPath.scope.getBinding(prop.value.name)
+        ?.path.node
+      const isLocalComponentBinding =
+        t.isFunctionDeclaration(bindingNode) ||
+        t.isClassDeclaration(bindingNode) ||
+        t.isVariableDeclarator(bindingNode)
+
+      if (!isLocalComponentBinding) {
+        continue
+      }
+
+      const componentIdentifier = getUniqueProgramIdentifier(
+        ctx.programPath,
+        `TSR${key[0]!.toUpperCase()}${key.slice(1)}`,
+      )
+
+      ctx.programPath.scope.rename(prop.value.name, componentIdentifier.name)
+      modified = true
+      continue
     }
 
     if (
       !t.isArrowFunctionExpression(prop.value) &&
       !t.isFunctionExpression(prop.value)
     ) {
-      return
+      continue
     }
 
     const hoistedIdentifier = getUniqueProgramIdentifier(
@@ -50,14 +95,14 @@ function hoistInlineRouteComponents(ctx: {
     )
 
     prop.value = t.cloneNode(hoistedIdentifier)
-  })
+    modified = true
+  }
 
-  if (hoistedDeclarations.length === 0) {
-    return false
+  if (hoistedDeclarations.length > 0) {
+    ctx.insertionPath.insertBefore(hoistedDeclarations)
   }
 
-  ctx.insertionPath.insertBefore(hoistedDeclarations)
-  return true
+  return modified
 }
 
 export function createReactRefreshRouteComponentsPlugin(): ReferenceRouteCompilerPlugin {
@@ -66,27 +111,32 @@ export function createReactRefreshRouteComponentsPlugin(): ReferenceRouteCompile
     getStableRouteOptionKeys() {
       return [...REACT_REFRESH_ROUTE_COMPONENT_IDENTS]
     },
-    onUnsplittableRoute(ctx) {
-      if (!ctx.opts.addHmr) {
-        return
-      }
-
-      if (hoistInlineRouteComponents(ctx)) {
+    onAddHmr(ctx) {
+      if (prepareRouteComponentsForReactRefresh(ctx)) {
         return { modified: true }
       }
 
       return
     },
-    onAddHmr(ctx) {
-      if (!ctx.opts.addHmr) {
+    onVirtualRouteSplitNode(ctx) {
+      if (
+        ctx.splitNodeMeta.splitStrategy !== 'lazyRouteComponent' ||
+        !t.isFunctionDeclaration(ctx.splitNode) ||
+        !ctx.splitNode.id ||
+        isReactComponentName(ctx.splitNode.id.name)
+      ) {
         return
       }
 
-      if (hoistInlineRouteComponents(ctx)) {
-        return { modified: true }
-      }
+      const componentIdentifier = getUniqueProgramIdentifier(
+        ctx.programPath,
+        ctx.splitNodeMeta.localExporterIdent,
+      )
 
-      return
+      ctx.programPath.scope.rename(
+        ctx.splitNode.id.name,
+        componentIdentifier.name,
+      )
     },
   }
 }

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

@@ -40,7 +40,13 @@ export type ReferenceRouteCompilerPluginResult = {
   modified?: boolean
 }
 
-export type ReferenceRouteCompilerPlugin = {
+export type VirtualRouteSplitNodeCompilerPluginContext = {
+  programPath: babel.NodePath<t.Program>
+  splitNode: t.Node
+  splitNodeMeta: SplitNodeMeta
+}
+
+export type CodeSplitCompilerPlugin = {
   name: string
   getStableRouteOptionKeys?: () => Array<string>
   onRouteOptions?: (
@@ -55,4 +61,9 @@ export type ReferenceRouteCompilerPlugin = {
   onSplitRouteProperty?: (
     ctx: ReferenceRouteSplitPropertyCompilerPluginContext,
   ) => void | t.Expression
+  onVirtualRouteSplitNode?: (
+    ctx: VirtualRouteSplitNodeCompilerPluginContext,
+  ) => void
 }
+
+export type ReferenceRouteCompilerPlugin = CodeSplitCompilerPlugin

package/src/core/config.ts

@@ -9,7 +9,7 @@ import type {
   RouteIds,
 } from '@tanstack/router-core'
 import type { CodeSplitGroupings } from './constants'
-import type { ReferenceRouteCompilerPlugin } from './code-splitter/plugins'
+import type { CodeSplitCompilerPlugin } from './code-splitter/plugins'
 
 export const splitGroupingsSchema = z
   .array(
@@ -76,7 +76,7 @@ export type CodeSplittingOptions = {
    * Internal compiler plugins used by framework integrations.
    * @internal
    */
-  compilerPlugins?: Array<ReferenceRouteCompilerPlugin>
+  compilerPlugins?: Array<CodeSplitCompilerPlugin>
 }
 
 export type HmrStyle = 'vite' | 'webpack'

package/src/core/hmr/handle-route-update.ts

@@ -1,15 +1,9 @@
-import type {
-  AnyRoute,
-  AnyRouteMatch,
-  AnyRouter,
-  RouterWritableStore,
-} from '@tanstack/router-core'
+import type { AnyRoute, AnyRouter } from '@tanstack/router-core'
 
 type AnyRouteWithPrivateProps = AnyRoute & {
   options: Record<string, unknown>
   parentRoute: AnyRoute
-  _componentsPromise?: Promise<void>
-  _lazyPromise?: Promise<void>
+  _lazy?: Promise<void> | true
   update: (options: Record<string, unknown>) => unknown
   _path: string
   _id: string
@@ -17,37 +11,19 @@ type AnyRouteWithPrivateProps = AnyRoute & {
   _to: string
 }
 
-type AnyRouterWithPrivateMaps = AnyRouter & {
+type AnyRouterWithPrivateState = AnyRouter & {
   routesById: Record<string, AnyRoute>
   buildRouteTree: () => Parameters<AnyRouter['setRoutes']>[0]
   setRoutes: AnyRouter['setRoutes']
-  stores: AnyRouter['stores'] & {
-    cachedMatchStores: Map<
-      string,
-      Pick<RouterWritableStore<AnyRouteMatch>, 'get' | 'set'>
-    >
-    pendingMatchStores: Map<
-      string,
-      Pick<RouterWritableStore<AnyRouteMatch>, 'get' | 'set'>
-    >
-    matchStores: Map<
-      string,
-      Pick<RouterWritableStore<AnyRouteMatch>, 'get' | 'set'>
-    >
-  }
-}
-
-type AnyRouteMatchWithPrivateProps = AnyRouteMatch & {
-  __beforeLoadContext?: unknown
-  __routeContext?: Record<string, unknown>
-  context?: Record<string, unknown>
+  _refreshRoute?: () => Promise<void>
+  _replaceRouteChunk: (route: AnyRoute, lazyFn: AnyRoute['lazyFn']) => void
 }
 
 function handleRouteUpdate(
   routeId: string,
   newRoute: AnyRouteWithPrivateProps,
 ) {
-  const router = window.__TSR_ROUTER__ as AnyRouterWithPrivateMaps
+  const router = window.__TSR_ROUTER__ as AnyRouterWithPrivateState
   const oldRoute = router.routesById[routeId] as
     | AnyRouteWithPrivateProps
     | undefined
@@ -66,14 +42,6 @@ function handleRouteUpdate(
     }
   })
 
-  const removedKeys = new Set<string>()
-  Object.keys(oldRoute.options).forEach((key) => {
-    if (!generatedRouteOptionKeys.has(key) && !(key in newRoute.options)) {
-      removedKeys.add(key)
-      delete oldRoute.options[key]
-    }
-  })
-
   const oldHasShellComponent = 'shellComponent' in oldRoute.options
   const newHasShellComponent = 'shellComponent' in newRoute.options
   const preserveComponentIdentity =
@@ -106,60 +74,12 @@ function handleRouteUpdate(
 
   oldRoute.options = nextOptions
   oldRoute.update(nextOptions)
-  oldRoute._componentsPromise = undefined
-  oldRoute._lazyPromise = undefined
+  router._replaceRouteChunk(oldRoute, newRoute.lazyFn)
 
   router.setRoutes(router.buildRouteTree())
   syncHotRouteExport(oldRoute)
   router.resolvePathCache.clear()
-
-  const filter = (m: AnyRouteMatch) => m.routeId === oldRoute.id
-  const activeMatch = router.stores.matches.get().find(filter)
-  const pendingMatch = router.stores.pendingMatches.get().find(filter)
-  const cachedMatches = router.stores.cachedMatches.get().filter(filter)
-
-  if (activeMatch || pendingMatch || cachedMatches.length > 0) {
-    // Clear stale match data for removed route options BEFORE invalidating.
-    // Without this, router.invalidate() -> matchRoutes() reuses the existing
-    // match from the store (via ...existingMatch spread) and the stale
-    // loaderData / __beforeLoadContext survives the reload cycle.
-    //
-    // We must update the store directly (not via router.updateMatch) because
-    // updateMatch wraps in startTransition which may defer the state update,
-    // and we need the clear to be visible before invalidate reads the store.
-    if (removedKeys.has('loader') || removedKeys.has('beforeLoad')) {
-      const matchIds = [
-        activeMatch?.id,
-        pendingMatch?.id,
-        ...cachedMatches.map((match) => match.id),
-      ].filter(Boolean) as Array<string>
-      router.batch(() => {
-        for (const matchId of matchIds) {
-          const store =
-            router.stores.pendingMatchStores.get(matchId) ||
-            router.stores.matchStores.get(matchId) ||
-            router.stores.cachedMatchStores.get(matchId)
-          if (store) {
-            store.set((prev) => {
-              const next: AnyRouteMatchWithPrivateProps = { ...prev }
-
-              if (removedKeys.has('loader')) {
-                next.loaderData = undefined
-              }
-              if (removedKeys.has('beforeLoad')) {
-                next.__beforeLoadContext = undefined
-                next.context = rebuildMatchContextWithoutBeforeLoad(next)
-              }
-
-              return next
-            })
-          }
-        }
-      })
-    }
-
-    router.invalidate({ filter, sync: true })
-  }
+  void router._refreshRoute?.()
 
   function syncHotRouteExport(liveRoute: AnyRouteWithPrivateProps) {
     // routeTree.gen.ts mutates the original module export with generated
@@ -172,66 +92,6 @@ function handleRouteUpdate(
     newRoute._fullPath = liveRoute._fullPath
     newRoute._to = liveRoute._to
   }
-
-  function getStoreMatch(matchId: string) {
-    return (
-      router.stores.pendingMatchStores.get(matchId)?.get() ||
-      router.stores.matchStores.get(matchId)?.get() ||
-      router.stores.cachedMatchStores.get(matchId)?.get()
-    )
-  }
-
-  function getMatchList(matchId: string) {
-    const pendingMatches = router.stores.pendingMatches.get()
-    if (pendingMatches.some((match) => match.id === matchId)) {
-      return pendingMatches
-    }
-
-    const activeMatches = router.stores.matches.get()
-    if (activeMatches.some((match) => match.id === matchId)) {
-      return activeMatches
-    }
-
-    const cachedMatches = router.stores.cachedMatches.get()
-    if (cachedMatches.some((match) => match.id === matchId)) {
-      return cachedMatches
-    }
-
-    return []
-  }
-
-  function getParentMatch(match: AnyRouteMatch) {
-    const matchList = getMatchList(match.id)
-    const matchIndex = matchList.findIndex((item) => item.id === match.id)
-
-    if (matchIndex <= 0) {
-      return undefined
-    }
-
-    const parentMatch = matchList[matchIndex - 1]!
-    return getStoreMatch(parentMatch.id) || parentMatch
-  }
-
-  function rebuildMatchContextWithoutBeforeLoad(
-    match: AnyRouteMatchWithPrivateProps,
-  ) {
-    const parentMatch = getParentMatch(match)
-    const getParentContext = (
-      router as unknown as {
-        getParentContext?: (
-          parentMatch?: AnyRouteMatch,
-        ) => Record<string, unknown> | undefined
-      }
-    ).getParentContext
-    const parentContext = getParentContext
-      ? getParentContext.call(router, parentMatch)
-      : (parentMatch?.context ?? router.options.context)
-
-    return {
-      ...(parentContext ?? {}),
-      ...(match.__routeContext ?? {}),
-    }
-  }
 }
 
 const handleRouteUpdateStr = handleRouteUpdate.toString()

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

@@ -13,7 +13,7 @@ import {
   computeSharedBindings,
   detectCodeSplitGroupingsFromRoute,
 } from './code-splitter/compilers'
-import { getReferenceRouteCompilerPlugins } from './code-splitter/plugins/framework-plugins'
+import { getFrameworkHmrCompilerPlugins } from './code-splitter/plugins/framework-plugins'
 import {
   defaultCodeSplitGroupings,
   splitRouteIdentNodes,
@@ -24,7 +24,8 @@ import { debug, normalizePath, routeFactoryCallCodeFilter } from './utils'
 import { createRouterPluginContext } from './router-plugin-context'
 import type { CodeSplitGroupings, SplitRouteIdentNodes } from './constants'
 import type { GetRoutesByFileMapResultValue } from '@tanstack/router-generator'
-import type { Config } from './config'
+import type { CodeSplitCompilerPlugin } from './code-splitter/plugins'
+import type { Config, HmrStyle } from './config'
 import type { RouterPluginContext } from './router-plugin-context'
 import type {
   UnpluginFactory,
@@ -83,6 +84,12 @@ export function createRouterCodeSplitterPlugin(
 ): ReturnType<UnpluginFactory<Partial<Config | (() => Config)> | undefined>> {
   let ROOT: string = process.cwd()
   let userConfig: Config
+  let addHmr: boolean
+  let hmrStyle: HmrStyle
+  let compilerPlugins: Array<CodeSplitCompilerPlugin>
+  let virtualRouteCompilerPlugins: Array<CodeSplitCompilerPlugin>
+
+  let isProduction = process.env.NODE_ENV === 'production'
 
   function initUserConfig() {
     if (typeof options === 'function') {
@@ -90,8 +97,22 @@ export function createRouterCodeSplitterPlugin(
     } else {
       userConfig = getConfig(options, ROOT)
     }
+
+    addHmr = (userConfig.codeSplittingOptions?.addHmr ?? true) && !isProduction
+    hmrStyle = userConfig.plugin?.hmr?.style ?? 'vite'
+    compilerPlugins = [
+      ...(addHmr
+        ? (getFrameworkHmrCompilerPlugins({
+            targetFramework: userConfig.target,
+            hmrStyle,
+          }) ?? [])
+        : []),
+      ...(userConfig.codeSplittingOptions?.compilerPlugins ?? []),
+    ]
+    virtualRouteCompilerPlugins = compilerPlugins.filter(
+      (plugin) => plugin.onVirtualRouteSplitNode,
+    )
   }
-  const isProduction = process.env.NODE_ENV === 'production'
   // Map from normalized route file path → set of shared binding names.
   // Populated by the reference compiler, consumed by virtual and shared compilers.
   const sharedBindingsMap = new Map<string, Set<string>>()
@@ -159,10 +180,6 @@ export function createRouterCodeSplitterPlugin(
       sharedBindingsMap.delete(id)
     }
 
-    const addHmr =
-      (userConfig.codeSplittingOptions?.addHmr ?? true) && !isProduction
-    const hmrStyle = userConfig.plugin?.hmr?.style ?? 'vite'
-
     const compiledReferenceRoute = compileCodeSplitReferenceRoute({
       code,
       codeSplitGroupings: splitGroupings,
@@ -176,14 +193,7 @@ export function createRouterCodeSplitterPlugin(
       hmrStyle,
       hmrRouteId: generatorNodeInfo.routeId,
       sharedBindings: sharedBindings.size > 0 ? sharedBindings : undefined,
-      compilerPlugins: [
-        ...(getReferenceRouteCompilerPlugins({
-          targetFramework: userConfig.target,
-          addHmr,
-          hmrStyle,
-        }) ?? []),
-        ...(userConfig.codeSplittingOptions?.compilerPlugins ?? []),
-      ],
+      compilerPlugins,
     })
 
     if (compiledReferenceRoute === null) {
@@ -232,6 +242,7 @@ export function createRouterCodeSplitterPlugin(
       filename: id,
       splitTargets: grouping,
       sharedBindings: resolvedSharedBindings,
+      compilerPlugins: virtualRouteCompilerPlugins,
     })
 
     if (debug) {
@@ -276,6 +287,7 @@ export function createRouterCodeSplitterPlugin(
 
       vite: {
         configResolved(config) {
+          isProduction = config.command === 'build'
           ROOT = config.root
           initUserConfig()
 
@@ -319,12 +331,14 @@ export function createRouterCodeSplitterPlugin(
         },
       },
 
-      rspack() {
+      rspack(compiler) {
+        isProduction = compiler.options.mode === 'production'
         ROOT = process.cwd()
         initUserConfig()
       },
 
-      webpack() {
+      webpack(compiler) {
+        isProduction = compiler.options.mode === 'production'
         ROOT = process.cwd()
         initUserConfig()
       },

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

@@ -1,6 +1,6 @@
 import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
 import { compileCodeSplitReferenceRoute } from './code-splitter/compilers'
-import { getReferenceRouteCompilerPlugins } from './code-splitter/plugins/framework-plugins'
+import { getFrameworkHmrCompilerPlugins } from './code-splitter/plugins/framework-plugins'
 import { createRouteHmrStatement } from './hmr'
 import { debug, normalizePath, routeFactoryCallCodeFilter } from './utils'
 import { getConfig } from './config'
@@ -50,9 +50,8 @@ export function createRouterHmrPlugin(
         const hmrStyle = userConfig.plugin?.hmr?.style ?? 'vite'
 
         if (userConfig.target === 'react') {
-          const compilerPlugins = getReferenceRouteCompilerPlugins({
+          const compilerPlugins = getFrameworkHmrCompilerPlugins({
             targetFramework: 'react',
-            addHmr: true,
             hmrStyle,
           })
           const compiled = compileCodeSplitReferenceRoute({

package/src/index.ts

@@ -13,8 +13,10 @@ export type {
 export type { RouterPluginContext } from './core/router-plugin-context'
 export { getObjectPropertyKeyName } from './core/utils'
 export type {
+  CodeSplitCompilerPlugin,
   ReferenceRouteCompilerPlugin,
   ReferenceRouteCompilerPluginContext,
+  VirtualRouteSplitNodeCompilerPluginContext,
 } from './core/code-splitter/plugins'
 export {
   tsrSplit,