@tanstack/router-plugin 1.120.3 → 1.120.4-alpha.1

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
@@ -104,8 +87,6 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
 
     const fromCode = detectCodeSplitGroupingsFromRoute({
       code,
-      root: ROOT,
-      filename: id,
     })
 
     if (fromCode.groupings) {
@@ -139,11 +120,11 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
 
     const compiledReferenceRoute = compileCodeSplitReferenceRoute({
       code,
-      root: ROOT,
-      filename: id,
       runtimeEnv: isProduction ? 'prod' : 'dev',
       codeSplitGroupings: splitGroupings,
       targetFramework: userConfig.target,
+      filename: id,
+      id,
     })
 
     if (debug) {
@@ -178,7 +159,6 @@ export const unpluginRouterCodeSplitterFactory: UnpluginFactory<
 
     const result = compileCodeSplitVirtualRoute({
       code,
-      root: ROOT,
       filename: id,
       splitTargets: grouping,
     })

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

@@ -1,22 +1,32 @@
 import { unpluginRouterGeneratorFactory } from './router-generator-plugin'
 import { unpluginRouterCodeSplitterFactory } from './router-code-splitter-plugin'
-
+import { unpluginRouterHmrFactory } from './router-hmr-plugin'
+import { unpluginRouteAutoimportFactory } from './route-autoimport-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 routeAutoImport = getPlugin(unpluginRouteAutoimportFactory)
 
-  const routerGeneratorOptions = Array.isArray(routerGenerator)
-    ? routerGenerator
-    : [routerGenerator]
+  const result = [...routerGenerator, ...routerCodeSplitter, ...routeAutoImport]
 
-  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-generator-plugin.ts

@@ -82,12 +82,23 @@ export const unpluginRouterGeneratorFactory: UnpluginFactory<
       })
     },
     vite: {
-      async configResolved(config) {
+      configResolved(config) {
         ROOT = config.root
         userConfig = getConfig(options, ROOT)
 
+        // if (config.command === 'serve') {
+        //   await run(generate)
+        // }
+      },
+      async buildStart() {
+        if (this.environment.name === 'server') {
+          // When building in environment mode, we only need to generate routes
+          // for the client environment
+          return
+        }
         await run(generate)
       },
+      sharedDuringBuild: true,
     },
     rspack(compiler) {
       userConfig = getConfig(options, ROOT)

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

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

package/src/vite.ts

@@ -43,6 +43,7 @@ const TanStackRouterCodeSplitterVite = createVitePlugin(
  * ```
  */
 const TanStackRouterVite = createVitePlugin(unpluginRouterComposedFactory)
+const tanstackRouter = TanStackRouterVite
 
 export default TanStackRouterVite
 export {
@@ -50,5 +51,7 @@ export {
   TanStackRouterGeneratorVite,
   TanStackRouterCodeSplitterVite,
   TanStackRouterVite,
+  tanstackRouter,
 }
+
 export type { Config }