feat: add experimental codegen feature for automatic type annotations in route exports

- Introduced a new experimental feature in the Vite plugin to automatically add type annotations to route exports.
- Implemented a watcher that processes file changes and modifies route files to include appropriate TypeScript types.
- Updated the configuration to enable this feature and added necessary types in the code generation logic.
- Enhanced existing route files with type annotations for loaders, actions, middleware, and other exports.
- Added comprehensive tests to ensure the correctness of the code generation logic.

Author: AlemTuzlak

docs/content/03-configuration/03-general.mdx

@@ -21,6 +21,9 @@ type ReactRouterViteConfig = {
   tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">
   tanstackClientBusConfig?: Partial<ClientEventBusConfig>
   tanstackViteConfig?: TanStackDevtoolsViteConfig
+  experimental_codegen?: {
+    enabled: boolean
+  }
 }
 ```
 
@@ -188,6 +191,83 @@ You can find more info on TanStack specific configuration options here:
 https://tanstack.com/devtools/latest/docs/plugin-configuration
 </InfoAlert>
 
+## Experimental Codegen
+
+The `experimental_codegen` option enables automatic type annotation generation for your React Router route exports. When enabled, the plugin will automatically add type annotations to your route exports (loader, action, default component, etc.) when files are created or modified.
+
+```ts
+experimental_codegen?: {
+  enabled: boolean  // Default: false
+}
+```
+
+### What it does
+
+When you create or edit a route file, the plugin will automatically:
+
+1. Add the Route type import from `./+types/{filename}`
+2. Add type annotations to exported functions like `loader`, `action`, `clientLoader`, `clientAction`, `meta`, `links`, `headers`, `ErrorBoundary`, and `HydrateFallback`
+3. Add type annotations to the default exported component
+4. Add type annotations to `middleware` and `clientMiddleware` array exports
+
+### Example
+
+**Before (what you write):**
+```tsx
+export const loader = ({ request }) => {
+  return { data: "hello" }
+}
+
+export const middleware = []
+
+export default function MyRoute({ loaderData }) {
+  return <div>{loaderData.data}</div>
+}
+```
+
+**After (automatically transformed):**
+```tsx
+import type { Route } from "./+types/my-route";
+
+export const loader = ({ request }: Route.LoaderArgs) => {
+  return { data: "hello" }
+}
+
+export const middleware: Route.MiddlewareFunction[] = []
+
+export default function MyRoute({ loaderData }: Route.ComponentProps) {
+  return <div>{loaderData.data}</div>
+}
+```
+
+### Configuration
+
+To enable this feature, add the `experimental_codegen` option to your config:
+
+```ts
+import { reactRouterDevTools } from "react-router-devtools";
+
+export default defineConfig({
+  plugins: [
+    reactRouterDevTools({
+      experimental_codegen: {
+        enabled: true
+      }
+    }),
+    reactRouter(),
+  ],
+});
+```
+
+<WarningAlert title="Experimental Feature">
+This feature is experimental and may change in future versions. It modifies your source files directly, so make sure you have version control in place before enabling it.
+
+**Notes:**
+- Only functions with parameters will have types added (functions with no parameters are skipped)
+- Exports that already have type annotations are skipped
+- The type import path follows React Router v7 conventions: `./+types/{filename}`
+</WarningAlert>
+
 ## Complete Configuration Example
 
 Here's a complete example showing all general configuration options:
@@ -237,6 +317,11 @@ const rdtConfig = defineRdtConfig({
   // TanStack Vite plugin configuration (advanced)
   tanstackViteConfig: {
     // Custom Vite plugin config if needed
+  },
+
+  // Experimental codegen for automatic type annotations
+  experimental_codegen: {
+    enabled: true
   }
 })
 

packages/react-router-devtools/package.json

@@ -2,7 +2,7 @@
 	"name": "react-router-devtools",
 	"description": "Devtools for React Router - debug, trace, find hydration errors, catch bugs and inspect server/client data with react-router-devtools",
 	"author": "Alem Tuzlak",
-	"version": "6.0.2",
+	"version": "6.1.0",
 	"license": "MIT",
 	"keywords": [
 		"react-router",

packages/react-router-devtools/src/vite/plugin.tsx

@@ -1,3 +1,4 @@
+import fs from "node:fs"
 import type { ClientEventBusConfig, TanStackDevtoolsConfig } from "@tanstack/devtools"
 import { devtools } from "@tanstack/devtools-vite"
 import type { TanStackDevtoolsViteConfig } from "@tanstack/devtools-vite"
@@ -7,6 +8,7 @@ import type { DevToolsServerConfig } from "../server/config.js"
 import { eventClient } from "../shared/event-client.js"
 import { runner } from "./node-server.js"
 import { processPlugins } from "./utils.js"
+import { addRouteTypes } from "./utils/codegen.js"
 import { augmentDataFetchingFunctions } from "./utils/data-functions-augment.js"
 import { injectRdtClient } from "./utils/inject-client.js"
 import { injectContext } from "./utils/inject-context.js"
@@ -156,6 +158,10 @@ type ReactRouterViteConfig = {
 	tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">
 	tanstackClientBusConfig?: Partial<ClientEventBusConfig>
 	tanstackViteConfig?: TanStackDevtoolsViteConfig
+	/** Experimental codegen feature to automatically add type annotations to route exports */
+	experimental_codegen?: {
+		enabled: boolean
+	}
 }
 
 type Route = {
@@ -311,6 +317,67 @@ export const reactRouterDevTools: (args?: ReactRouterViteConfig) => Plugin[] = (
 				return finalCode
 			},
 		},
+		// Codegen plugin - watches for file changes and adds type annotations to route exports
+		...(args?.experimental_codegen?.enabled
+			? [
+					(() => {
+						// Set to track recently processed files to avoid infinite loops
+						const recentlyProcessed = new Set<string>()
+						const DEBOUNCE_MS = 100
+
+						return {
+							name: "react-router-devtools:codegen",
+							apply(config) {
+								return config.mode === "development"
+							},
+							async watchChange(id, change) {
+								// Only process on create or update
+								if (change.event !== "create" && change.event !== "update") {
+									return
+								}
+
+								// Skip if recently processed (debounce)
+								if (recentlyProcessed.has(id)) {
+									return
+								}
+
+								// Ensure routes are loaded
+								await ensureRoutesLoaded()
+
+								// Check if it's a route file
+								const routeId = isTransformable(id)
+								if (!routeId) {
+									return
+								}
+
+								try {
+									// Read the file
+									const code = await fs.promises.readFile(id, "utf-8")
+
+									// Transform the code
+									const result = addRouteTypes(code, id)
+
+									// Only write if modifications were made
+									if (result.modified) {
+										// Add to recently processed set
+										recentlyProcessed.add(id)
+
+										// Write the file
+										await fs.promises.writeFile(id, result.code, "utf-8")
+
+										// Remove from set after debounce period
+										setTimeout(() => {
+											recentlyProcessed.delete(id)
+										}, DEBOUNCE_MS)
+									}
+								} catch (_e) {
+									// Silently ignore errors (invalid syntax, etc.)
+								}
+							},
+						} satisfies Plugin
+					})(),
+				]
+			: []),
 		{
 			enforce: "pre",
 			name: "react-router-devtools:grab-port",