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

package/dist/esm/vite.d.ts

@@ -12,31 +12,29 @@ declare const TanStackRouterGeneratorVite: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
-    indexToken: string;
-    routeToken: string;
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;
@@ -55,31 +53,29 @@ declare const TanStackRouterCodeSplitterVite: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
-    indexToken: string;
-    routeToken: string;
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;
@@ -98,36 +94,66 @@ declare const TanStackRouterVite: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
+    enableRouteGeneration?: boolean | undefined;
+    codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
+    virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
+    routeFilePrefix?: string | undefined;
+    routeFileIgnorePattern?: string | undefined;
+    pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
+    customScaffolding?: {
+        routeTemplate?: string | undefined;
+        lazyRouteTemplate?: string | undefined;
+    } | undefined;
+    experimental?: {
+        enableCodeSplitting?: boolean | undefined;
+    } | undefined;
+}> | undefined) => import('vite').Plugin<any> | import('vite').Plugin<any>[];
+declare const tanstackRouter: (options?: Partial<{
+    target: "react" | "solid";
+    routeFileIgnorePrefix: string;
+    routesDirectory: string;
+    quoteStyle: "single" | "double";
+    semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
     indexToken: string;
     routeToken: string;
+    generatedRouteTree: string;
+    disableTypes: boolean;
+    addExtensions: boolean;
+    disableManifestGeneration: boolean;
+    enableRouteTreeFormatting: boolean;
+    routeTreeFileFooter: string[];
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;
     } | undefined;
 }> | undefined) => import('vite').Plugin<any> | import('vite').Plugin<any>[];
 export default TanStackRouterVite;
-export { configSchema, TanStackRouterGeneratorVite, TanStackRouterCodeSplitterVite, TanStackRouterVite, };
+export { configSchema, TanStackRouterGeneratorVite, TanStackRouterCodeSplitterVite, TanStackRouterVite, tanstackRouter, };
 export type { Config };

package/dist/esm/vite.js

@@ -10,11 +10,13 @@ const TanStackRouterCodeSplitterVite = createVitePlugin(
   unpluginRouterCodeSplitterFactory
 );
 const TanStackRouterVite = createVitePlugin(unpluginRouterComposedFactory);
+const tanstackRouter = TanStackRouterVite;
 export {
   TanStackRouterCodeSplitterVite,
   TanStackRouterGeneratorVite,
   TanStackRouterVite,
   configSchema,
-  TanStackRouterVite as default
+  TanStackRouterVite as default,
+  tanstackRouter
 };
 //# sourceMappingURL=vite.js.map

package/dist/esm/vite.js.map

@@ -1 +1 @@
-{"version":3,"file":"vite.js","sources":["../../src/vite.ts"],"sourcesContent":["import { createVitePlugin } from 'unplugin'\n\nimport { configSchema } from './core/config'\nimport { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'\nimport { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'\nimport { unpluginRouterComposedFactory } from './core/router-composed-plugin'\n\nimport type { Config } from './core/config'\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterGeneratorVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterGeneratorVite = createVitePlugin(\n  unpluginRouterGeneratorFactory,\n)\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterCodeSplitterVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterCodeSplitterVite = createVitePlugin(\n  unpluginRouterCodeSplitterFactory,\n)\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterVite = createVitePlugin(unpluginRouterComposedFactory)\n\nexport default TanStackRouterVite\nexport {\n  configSchema,\n  TanStackRouterGeneratorVite,\n  TanStackRouterCodeSplitterVite,\n  TanStackRouterVite,\n}\nexport type { Config }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,8BAA8B;AAAA,EAClC;AACF;AAWA,MAAM,iCAAiC;AAAA,EACrC;AACF;AAWM,MAAA,qBAAqB,iBAAiB,6BAA6B;"}
+{"version":3,"file":"vite.js","sources":["../../src/vite.ts"],"sourcesContent":["import { createVitePlugin } from 'unplugin'\n\nimport { configSchema } from './core/config'\nimport { unpluginRouterCodeSplitterFactory } from './core/router-code-splitter-plugin'\nimport { unpluginRouterGeneratorFactory } from './core/router-generator-plugin'\nimport { unpluginRouterComposedFactory } from './core/router-composed-plugin'\n\nimport type { Config } from './core/config'\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterGeneratorVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterGeneratorVite = createVitePlugin(\n  unpluginRouterGeneratorFactory,\n)\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterCodeSplitterVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterCodeSplitterVite = createVitePlugin(\n  unpluginRouterCodeSplitterFactory,\n)\n\n/**\n * @example\n * ```ts\n * export default defineConfig({\n *   plugins: [TanStackRouterVite()],\n *   // ...\n * })\n * ```\n */\nconst TanStackRouterVite = createVitePlugin(unpluginRouterComposedFactory)\nconst tanstackRouter = TanStackRouterVite\n\nexport default TanStackRouterVite\nexport {\n  configSchema,\n  TanStackRouterGeneratorVite,\n  TanStackRouterCodeSplitterVite,\n  TanStackRouterVite,\n  tanstackRouter,\n}\n\nexport type { Config }\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,8BAA8B;AAAA,EAClC;AACF;AAWA,MAAM,iCAAiC;AAAA,EACrC;AACF;AAWM,MAAA,qBAAqB,iBAAiB,6BAA6B;AACzE,MAAM,iBAAiB;"}

package/dist/esm/webpack.d.ts

@@ -12,31 +12,29 @@ declare const TanStackRouterGeneratorWebpack: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
-    indexToken: string;
-    routeToken: string;
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;
@@ -55,31 +53,29 @@ declare const TanStackRouterCodeSplitterWebpack: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
-    indexToken: string;
-    routeToken: string;
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;
@@ -98,31 +94,29 @@ declare const TanStackRouterWebpack: (options?: Partial<{
     target: "react" | "solid";
     routeFileIgnorePrefix: string;
     routesDirectory: string;
-    generatedRouteTree: string;
     quoteStyle: "single" | "double";
     semicolons: boolean;
+    disableLogging: boolean;
+    routeTreeFileHeader: string[];
+    indexToken: string;
+    routeToken: string;
+    generatedRouteTree: string;
     disableTypes: boolean;
     addExtensions: boolean;
-    disableLogging: boolean;
     disableManifestGeneration: boolean;
     enableRouteTreeFormatting: boolean;
-    apiBase: string;
-    routeTreeFileHeader: string[];
     routeTreeFileFooter: string[];
-    indexToken: string;
-    routeToken: string;
     enableRouteGeneration?: boolean | undefined;
     codeSplittingOptions?: import('./core/config.js').CodeSplittingOptions | undefined;
     virtualRouteConfig?: string | import('@tanstack/virtual-file-routes').VirtualRootRoute | undefined;
     routeFilePrefix?: string | undefined;
     routeFileIgnorePattern?: string | undefined;
-    __enableAPIRoutesGeneration?: boolean | undefined;
-    autoCodeSplitting?: boolean | undefined;
     pathParamsAllowedCharacters?: (";" | ":" | "@" | "&" | "=" | "+" | "$" | ",")[] | undefined;
+    verboseFileRoutes?: boolean | undefined;
+    autoCodeSplitting?: boolean | undefined;
     customScaffolding?: {
         routeTemplate?: string | undefined;
         lazyRouteTemplate?: string | undefined;
-        apiTemplate?: string | undefined;
     } | undefined;
     experimental?: {
         enableCodeSplitting?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/router-plugin",
-  "version": "1.120.3",
+  "version": "1.120.4-alpha.10",
   "description": "Modern and scalable routing for React applications",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -100,17 +100,17 @@
     "chokidar": "^3.6.0",
     "unplugin": "^2.1.2",
     "zod": "^3.24.2",
-    "@tanstack/router-core": "^1.120.3",
-    "@tanstack/virtual-file-routes": "^1.115.0",
-    "@tanstack/router-utils": "^1.115.0",
-    "@tanstack/router-generator": "^1.120.3"
+    "@tanstack/router-core": "^1.120.4-alpha.10",
+    "@tanstack/router-generator": "^1.120.4-alpha.10",
+    "@tanstack/virtual-file-routes": "^1.120.4-alpha.1",
+    "@tanstack/router-utils": "^1.120.4-alpha.1"
   },
   "peerDependencies": {
     "@rsbuild/core": ">=1.0.2",
     "vite": ">=5.0.0 || >=6.0.0",
     "vite-plugin-solid": "^2.11.2",
     "webpack": ">=5.92.0",
-    "@tanstack/react-router": "^1.120.3"
+    "@tanstack/react-router": "^1.120.4-alpha.10"
   },
   "peerDependenciesMeta": {
     "@rsbuild/core": {

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

@@ -7,6 +7,7 @@ import {
 } from 'babel-dead-code-elimination'
 import { generateFromAst, parseAst } from '@tanstack/router-utils'
 import { tsrSplit } from '../constants'
+import { routeHmrStatement } from '../route-hmr-statement'
 import { createIdentifier } from './path-ids'
 import { getFrameworkOptions } from './framework-options'
 import type { GeneratorResult, ParseAstOptions } from '@tanstack/router-utils'
@@ -117,6 +118,8 @@ export function compileCodeSplitReferenceRoute(
     runtimeEnv: 'dev' | 'prod'
     codeSplitGroupings: CodeSplitGroupings
     targetFramework: Config['target']
+    filename: string
+    id: string
   },
 ): GeneratorResult {
   const ast = parseAst(opts)
@@ -166,18 +169,13 @@ export function compileCodeSplitReferenceRoute(
                 return
               }
 
-              if (t.isCallExpression(path.parentPath.node)) {
-                const options = resolveIdentifier(
-                  path,
-                  path.parentPath.node.arguments[0],
-                )
-
+              function babelHandleReference(routeOptions: t.Node | undefined) {
                 const hasImportedOrDefinedIdentifier = (name: string) => {
                   return programPath.scope.hasBinding(name)
                 }
 
-                if (t.isObjectExpression(options)) {
-                  options.properties.forEach((prop) => {
+                if (t.isObjectExpression(routeOptions)) {
+                  routeOptions.properties.forEach((prop) => {
                     if (t.isObjectProperty(prop)) {
                       if (t.isIdentifier(prop.key)) {
                         // If the user has not specified a split grouping for this key
@@ -288,18 +286,9 @@ export function compileCodeSplitReferenceRoute(
                             )()
                           }
 
-                          // If the TSRDummyComponent is not defined, define it
-                          if (
-                            opts.runtimeEnv !== 'prod' && // only in development
-                            !hasImportedOrDefinedIdentifier(
-                              frameworkOptions.idents.dummyHMRComponent,
-                            )
-                          ) {
-                            programPath.pushContainer('body', [
-                              template.statement(
-                                frameworkOptions.dummyHMRComponent,
-                              )(),
-                            ])
+                          // add HMR handling
+                          if (opts.runtimeEnv !== 'prod') {
+                            programPath.pushContainer('body', routeHmrStatement)
                           }
                         }
 
@@ -369,6 +358,27 @@ export function compileCodeSplitReferenceRoute(
                   })
                 }
               }
+
+              if (t.isCallExpression(path.parentPath.node)) {
+                // createFileRoute('/')({ ... })
+                const options = resolveIdentifier(
+                  path,
+                  path.parentPath.node.arguments[0],
+                )
+
+                babelHandleReference(options)
+              } else if (t.isVariableDeclarator(path.parentPath.node)) {
+                // createFileRoute({ ... })
+                const caller = resolveIdentifier(
+                  path,
+                  path.parentPath.node.init,
+                )
+
+                if (t.isCallExpression(caller)) {
+                  const options = resolveIdentifier(path, caller.arguments[0])
+                  babelHandleReference(options)
+                }
+              }
             },
           },
           state,
@@ -406,6 +416,7 @@ export function compileCodeSplitReferenceRoute(
 export function compileCodeSplitVirtualRoute(
   opts: ParseAstOptions & {
     splitTargets: Array<SplitRouteIdentNodes>
+    filename: string
   },
 ): GeneratorResult {
   const ast = parseAst(opts)
@@ -448,12 +459,7 @@ export function compileCodeSplitVirtualRoute(
                 return
               }
 
-              if (t.isCallExpression(path.parentPath.node)) {
-                const options = resolveIdentifier(
-                  path,
-                  path.parentPath.node.arguments[0],
-                )
-
+              function babelHandleVirtual(options: t.Node | undefined) {
                 if (t.isObjectExpression(options)) {
                   options.properties.forEach((prop) => {
                     if (t.isObjectProperty(prop)) {
@@ -497,6 +503,27 @@ export function compileCodeSplitVirtualRoute(
                   options.properties = []
                 }
               }
+
+              if (t.isCallExpression(path.parentPath.node)) {
+                // createFileRoute('/')({ ... })
+                const options = resolveIdentifier(
+                  path,
+                  path.parentPath.node.arguments[0],
+                )
+
+                babelHandleVirtual(options)
+              } else if (t.isVariableDeclarator(path.parentPath.node)) {
+                // createFileRoute({ ... })
+                const caller = resolveIdentifier(
+                  path,
+                  path.parentPath.node.init,
+                )
+
+                if (t.isCallExpression(caller)) {
+                  const options = resolveIdentifier(path, caller.arguments[0])
+                  babelHandleVirtual(options)
+                }
+              }
             },
           },
           state,
@@ -841,7 +868,7 @@ function getImportSpecifierAndPathFromLocalName(
 }
 
 // Reusable function to get literal value or resolve variable to literal
-function resolveIdentifier(path: any, node: any) {
+function resolveIdentifier(path: any, node: any): t.Node | undefined {
   if (t.isIdentifier(node)) {
     const binding = path.scope.getBinding(node.name)
     if (

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)
+    }
+   })
+}
+`,
+)()