@tanstack/router-plugin 1.167.12 → 1.167.14

package/src/core/config.ts

@@ -72,6 +72,10 @@ export type CodeSplittingOptions = {
   addHmr?: boolean
 }
 
+export type HmrOptions = {
+  hotExpression?: string
+}
+
 const codeSplittingOptionsSchema = z.object({
   splitBehavior: z.function().optional(),
   defaultBehavior: splitGroupingsSchema.optional(),
@@ -93,6 +97,11 @@ export const configSchema = generatorConfigSchema.extend({
     .optional(),
   plugin: z
     .object({
+      hmr: z
+        .object({
+          hotExpression: z.string().optional(),
+        })
+        .optional(),
       vite: z
         .object({
           environmentName: z.string().optional(),

package/src/core/hmr-hot-expression.ts

@@ -0,0 +1,31 @@
+import * as template from '@babel/template'
+import type * as t from '@babel/types'
+import type { Config } from './config'
+
+export const DEFAULT_HMR_HOT_EXPRESSION = 'import.meta.hot'
+
+export function resolveHmrHotExpression(hotExpression?: string): string {
+  return hotExpression ?? DEFAULT_HMR_HOT_EXPRESSION
+}
+
+export function createHmrHotExpressionAst(
+  hotExpression?: string,
+): t.Expression {
+  return template.expression.ast(resolveHmrHotExpression(hotExpression))
+}
+
+export function withHmrHotExpression(
+  config: Partial<Config> | undefined,
+  hotExpression: string,
+): Partial<Config> {
+  return {
+    ...config,
+    plugin: {
+      ...config?.plugin,
+      hmr: {
+        ...config?.plugin?.hmr,
+        hotExpression: config?.plugin?.hmr?.hotExpression ?? hotExpression,
+      },
+    },
+  }
+}

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

@@ -1,5 +1,11 @@
 import * as template from '@babel/template'
-import type { AnyRoute, AnyRouteMatch, AnyRouter } from '@tanstack/router-core'
+import { createHmrHotExpressionAst } from './hmr-hot-expression'
+import type {
+  AnyRoute,
+  AnyRouteMatch,
+  AnyRouter,
+  RouterWritableStore,
+} from '@tanstack/router-core'
 
 type AnyRouteWithPrivateProps = AnyRoute & {
   options: Record<string, unknown>
@@ -16,24 +22,15 @@ type AnyRouterWithPrivateMaps = AnyRouter & {
   routesById: Record<string, AnyRoute>
   routesByPath: Record<string, AnyRoute>
   stores: AnyRouter['stores'] & {
-    cachedMatchStoresById: Map<
+    cachedMatchStores: Map<
       string,
-      {
-        setState: (updater: (prev: AnyRouteMatch) => AnyRouteMatch) => void
-      }
+      Pick<RouterWritableStore<AnyRouteMatch>, 'set'>
     >
-    pendingMatchStoresById: Map<
+    pendingMatchStores: Map<
       string,
-      {
-        setState: (updater: (prev: AnyRouteMatch) => AnyRouteMatch) => void
-      }
-    >
-    activeMatchStoresById: Map<
-      string,
-      {
-        setState: (updater: (prev: AnyRouteMatch) => AnyRouteMatch) => void
-      }
+      Pick<RouterWritableStore<AnyRouteMatch>, 'set'>
     >
+    matchStores: Map<string, Pick<RouterWritableStore<AnyRouteMatch>, 'set'>>
   }
 }
 
@@ -59,7 +56,7 @@ function handleRouteUpdate(
   // handles hot-updating the function bodies of these components — our job
   // is only to update non-component route options (loader, head, etc.).
   // For code-split (splittable) routes, the lazyRouteComponent wrapper is
-  // already cached in import.meta.hot.data so its identity is stable.
+  // already cached in the bundler hot data so its identity is stable.
   // For unsplittable routes (e.g. root routes), the component is a plain
   // function reference that gets recreated on every module re-execution,
   // so we must explicitly preserve the old reference.
@@ -95,9 +92,9 @@ function handleRouteUpdate(
   walkReplaceSegmentTree(oldRoute, router.processedTree.segmentTree)
 
   const filter = (m: AnyRouteMatch) => m.routeId === oldRoute.id
-  const activeMatch = router.stores.activeMatchesSnapshot.state.find(filter)
-  const pendingMatch = router.stores.pendingMatchesSnapshot.state.find(filter)
-  const cachedMatches = router.stores.cachedMatchesSnapshot.state.filter(filter)
+  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.
@@ -117,11 +114,11 @@ function handleRouteUpdate(
       router.batch(() => {
         for (const matchId of matchIds) {
           const store =
-            router.stores.pendingMatchStoresById.get(matchId) ||
-            router.stores.activeMatchStoresById.get(matchId) ||
-            router.stores.cachedMatchStoresById.get(matchId)
+            router.stores.pendingMatchStores.get(matchId) ||
+            router.stores.matchStores.get(matchId) ||
+            router.stores.cachedMatchStores.get(matchId)
           if (store) {
-            store.setState((prev) => {
+            store.set((prev) => {
               const next: AnyRouteMatchWithPrivateProps = { ...prev }
 
               if (removedKeys.has('loader')) {
@@ -159,15 +156,20 @@ function handleRouteUpdate(
 
 const handleRouteUpdateStr = handleRouteUpdate.toString()
 
-export function createRouteHmrStatement(stableRouteOptionKeys: Array<string>) {
+export function createRouteHmrStatement(
+  stableRouteOptionKeys: Array<string>,
+  opts?: { hotExpression?: string },
+) {
   return template.statement(
     `
-if (import.meta.hot) {
-  import.meta.hot.accept((newModule) => {
+if (%%hotExpression%%) {
+  const hot = %%hotExpression%%
+  const hotData = hot.data ??= {}
+  hot.accept((newModule) => {
     if (Route && newModule && newModule.Route) {
-      const routeId = import.meta.hot.data['tsr-route-id'] ?? Route.id
+      const routeId = hotData['tsr-route-id'] ?? Route.id
       if (routeId) {
-        import.meta.hot.data['tsr-route-id'] = routeId
+        hotData['tsr-route-id'] = routeId
       }
       (${handleRouteUpdateStr.replace(
         /['"]__TSR_COMPONENT_TYPES__['"]/,
@@ -177,6 +179,10 @@ if (import.meta.hot) {
     })
 }
 `,
-    { placeholderPattern: false },
-  )()
+    {
+      syntacticPlaceholders: true,
+    },
+  )({
+    hotExpression: createHmrHotExpressionAst(opts?.hotExpression),
+  })
 }

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

@@ -6,6 +6,7 @@
 import { fileURLToPath, pathToFileURL } from 'node:url'
 import { logDiff } from '@tanstack/router-utils'
 import { getConfig, splitGroupingsSchema } from './config'
+import { resolveHmrHotExpression } from './hmr-hot-expression'
 import {
   compileCodeSplitReferenceRoute,
   compileCodeSplitSharedRoute,
@@ -158,6 +159,9 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
 
     const addHmr =
       (userConfig.codeSplittingOptions?.addHmr ?? true) && !isProduction
+    const hmrHotExpression = resolveHmrHotExpression(
+      userConfig.plugin?.hmr?.hotExpression,
+    )
 
     const compiledReferenceRoute = compileCodeSplitReferenceRoute({
       code,
@@ -169,10 +173,12 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
         ? new Set(userConfig.codeSplittingOptions.deleteNodes)
         : undefined,
       addHmr,
+      hmrHotExpression,
       sharedBindings: sharedBindings.size > 0 ? sharedBindings : undefined,
       compilerPlugins: getReferenceRouteCompilerPlugins({
         targetFramework: userConfig.target,
         addHmr,
+        hmrHotExpression,
       }),
     })
 
@@ -317,26 +323,14 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
         },
       },
 
-      rspack(compiler) {
+      rspack() {
         ROOT = process.cwd()
         initUserConfig()
-
-        if (compiler.options.mode === 'production') {
-          compiler.hooks.done.tap(PLUGIN_NAME, () => {
-            console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!')
-          })
-        }
       },
 
-      webpack(compiler) {
+      webpack() {
         ROOT = process.cwd()
         initUserConfig()
-
-        if (compiler.options.mode === 'production') {
-          compiler.hooks.done.tap(PLUGIN_NAME, () => {
-            console.info('✅ ' + PLUGIN_NAME + ': code-splitting done!')
-          })
-        }
       },
     },
     {

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

@@ -4,6 +4,7 @@ import { getReferenceRouteCompilerPlugins } from './code-splitter/plugins/framew
 import { createRouteHmrStatement } from './route-hmr-statement'
 import { debug, normalizePath } from './utils'
 import { getConfig } from './config'
+import { resolveHmrHotExpression } from './hmr-hot-expression'
 import type { UnpluginFactory } from 'unplugin'
 import type { Config } from './config'
 
@@ -43,16 +44,22 @@ export const unpluginRouterHmrFactory: UnpluginFactory<
 
         if (debug) console.info('Adding HMR handling to route ', normalizedId)
 
+        const hmrHotExpression = resolveHmrHotExpression(
+          userConfig.plugin?.hmr?.hotExpression,
+        )
+
         if (userConfig.target === 'react') {
           const compilerPlugins = getReferenceRouteCompilerPlugins({
             targetFramework: 'react',
             addHmr: true,
+            hmrHotExpression,
           })
           const compiled = compileCodeSplitReferenceRoute({
             code,
             filename: normalizedId,
             id: normalizedId,
             addHmr: true,
+            hmrHotExpression,
             codeSplitGroupings: [],
             targetFramework: 'react',
             compilerPlugins,
@@ -69,7 +76,9 @@ export const unpluginRouterHmrFactory: UnpluginFactory<
         }
 
         const ast = parseAst({ code })
-        ast.program.body.push(createRouteHmrStatement([]))
+        ast.program.body.push(
+          createRouteHmrStatement([], { hotExpression: hmrHotExpression }),
+        )
         const result = generateFromAst(ast, {
           sourceMaps: true,
           filename: normalizedId,

package/src/index.ts

@@ -7,6 +7,7 @@ export type {
   ConfigOutput,
   CodeSplittingOptions,
   DeletableNodes,
+  HmrOptions,
 } from './core/config'
 export {
   tsrSplit,

package/src/rspack.ts

@@ -1,6 +1,7 @@
 import { createRspackPlugin } from 'unplugin'
 
 import { configSchema } from './core/config'
+import { withHmrHotExpression } from './core/hmr-hot-expression'
 import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
 import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
 import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
@@ -37,7 +38,14 @@ const TanStackRouterGeneratorRspack = /* #__PURE__ */ createRspackPlugin(
  * ```
  */
 const TanStackRouterCodeSplitterRspack = /* #__PURE__ */ createRspackPlugin(
-  unpluginRouterCodeSplitterFactory,
+  (options, meta) =>
+    unpluginRouterCodeSplitterFactory(
+      withHmrHotExpression(
+        options as Partial<Config> | undefined,
+        'import.meta.webpackHot',
+      ),
+      meta,
+    ),
 )
 
 /**
@@ -54,7 +62,14 @@ const TanStackRouterCodeSplitterRspack = /* #__PURE__ */ createRspackPlugin(
  * ```
  */
 const TanStackRouterRspack = /* #__PURE__ */ createRspackPlugin(
-  unpluginRouterComposedFactory,
+  (options, meta) =>
+    unpluginRouterComposedFactory(
+      withHmrHotExpression(
+        options as Partial<Config> | undefined,
+        'import.meta.webpackHot',
+      ),
+      meta,
+    ),
 )
 const tanstackRouter = TanStackRouterRspack
 export default TanStackRouterRspack

package/src/webpack.ts

@@ -1,6 +1,7 @@
 import { createWebpackPlugin } from 'unplugin'
 
 import { configSchema } from './core/config'
+import { withHmrHotExpression } from './core/hmr-hot-expression'
 import { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'
 import { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'
 import { unpluginRouterComposedFactory } from './core/router-composed-plugin'
@@ -29,7 +30,14 @@ const TanStackRouterGeneratorWebpack = /* #__PURE__ */ createWebpackPlugin(
  * ```
  */
 const TanStackRouterCodeSplitterWebpack = /* #__PURE__ */ createWebpackPlugin(
-  unpluginRouterCodeSplitterFactory,
+  (options, meta) =>
+    unpluginRouterCodeSplitterFactory(
+      withHmrHotExpression(
+        options as Partial<Config> | undefined,
+        'import.meta.webpackHot',
+      ),
+      meta,
+    ),
 )
 
 /**
@@ -42,7 +50,14 @@ const TanStackRouterCodeSplitterWebpack = /* #__PURE__ */ createWebpackPlugin(
  * ```
  */
 const TanStackRouterWebpack = /* #__PURE__ */ createWebpackPlugin(
-  unpluginRouterComposedFactory,
+  (options, meta) =>
+    unpluginRouterComposedFactory(
+      withHmrHotExpression(
+        options as Partial<Config> | undefined,
+        'import.meta.webpackHot',
+      ),
+      meta,
+    ),
 )
 
 const tanstackRouter = TanStackRouterWebpack