@tanstack/router-plugin 1.120.5 → 1.121.0-alpha.2

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-autoimport-plugin.ts

@@ -0,0 +1,102 @@
+import { generateFromAst, logDiff, parseAst } from '@tanstack/router-utils'
+import babel from '@babel/core'
+import * as template from '@babel/template'
+import { getConfig } from './config'
+import { debug, fileIsInRoutesDirectory } from './utils'
+import type { Config } from './config'
+import type { UnpluginFactory } from 'unplugin'
+
+/**
+ * This plugin adds imports for createFileRoute and createLazyFileRoute to the file route.
+ */
+export const unpluginRouteAutoImportFactory: UnpluginFactory<
+  Partial<Config> | undefined
+> = (options = {}) => {
+  let ROOT: string = process.cwd()
+  let userConfig = options as Config
+
+  return {
+    name: 'router-autoimport-plugin',
+    enforce: 'pre',
+
+    transform(code, id) {
+      let routeType: 'createFileRoute' | 'createLazyFileRoute'
+      if (code.includes('export const Route = createFileRoute(')) {
+        routeType = 'createFileRoute'
+      } else if (code.includes('export const Route = createLazyFileRoute(')) {
+        routeType = 'createLazyFileRoute'
+      } else {
+        return null
+      }
+
+      const routerImportPath = `@tanstack/${userConfig.target}-router`
+
+      const ast = parseAst({ code })
+
+      let isCreateRouteFunctionImported = false as boolean
+
+      babel.traverse(ast, {
+        Program: {
+          enter(programPath) {
+            programPath.traverse({
+              ImportDeclaration(path) {
+                const importedSpecifiers = path.node.specifiers.map(
+                  (specifier) => specifier.local.name,
+                )
+                if (
+                  importedSpecifiers.includes(routeType) &&
+                  path.node.source.value === routerImportPath
+                ) {
+                  isCreateRouteFunctionImported = true
+                }
+              },
+            })
+          },
+        },
+      })
+
+      if (!isCreateRouteFunctionImported) {
+        if (debug) console.info('Adding autoimports to route ', id)
+
+        const autoImportStatement = template.statement(
+          `import { ${routeType} } from '${routerImportPath}'`,
+        )()
+        ast.program.body.unshift(autoImportStatement)
+
+        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
+      }
+
+      return null
+    },
+
+    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/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
@@ -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.config.consumer === '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/esbuild.ts

@@ -37,13 +37,13 @@ const TanStackRouterCodeSplitterEsbuild = createEsbuildPlugin(
  * @example
  * ```ts
  * export default {
- *   plugins: [TanStackRouterEsbuild()],
+ *   plugins: [tanstackRouter()],
  *   // ...
  * }
  * ```
  */
 const TanStackRouterEsbuild = createEsbuildPlugin(unpluginRouterComposedFactory)
-
+const tanstackRouter = TanStackRouterEsbuild
 export default TanStackRouterEsbuild
 
 export {
@@ -51,6 +51,7 @@ export {
   TanStackRouterGeneratorEsbuild,
   TanStackRouterCodeSplitterEsbuild,
   TanStackRouterEsbuild,
+  tanstackRouter,
 }
 
 export type { Config }

package/src/rspack.ts

@@ -47,7 +47,7 @@ const TanStackRouterCodeSplitterRspack = /* #__PURE__ */ createRspackPlugin(
  *   // ...
  *   tools: {
  *     rspack: {
- *       plugins: [TanStackRouterRspack()],
+ *       plugins: [tanstackRouter()],
  *     },
  *   },
  * })
@@ -56,12 +56,13 @@ const TanStackRouterCodeSplitterRspack = /* #__PURE__ */ createRspackPlugin(
 const TanStackRouterRspack = /* #__PURE__ */ createRspackPlugin(
   unpluginRouterComposedFactory,
 )
-
+const tanstackRouter = TanStackRouterRspack
 export default TanStackRouterRspack
 export {
   configSchema,
   TanStackRouterRspack,
   TanStackRouterGeneratorRspack,
   TanStackRouterCodeSplitterRspack,
+  tanstackRouter,
 }
 export type { Config }

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 }

package/src/webpack.ts

@@ -37,7 +37,7 @@ const TanStackRouterCodeSplitterWebpack = /* #__PURE__ */ createWebpackPlugin(
  * ```ts
  * export default {
  *   // ...
- *   plugins: [TanStackRouterWebpack()],
+ *   plugins: [tanstackRouter()],
  * }
  * ```
  */
@@ -45,11 +45,13 @@ const TanStackRouterWebpack = /* #__PURE__ */ createWebpackPlugin(
   unpluginRouterComposedFactory,
 )
 
+const tanstackRouter = TanStackRouterWebpack
 export default TanStackRouterWebpack
 export {
   configSchema,
   TanStackRouterWebpack,
   TanStackRouterGeneratorWebpack,
   TanStackRouterCodeSplitterWebpack,
+  tanstackRouter,
 }
 export type { Config }