automatic typegen when using vite plugin (#12296)

* automatic typegen for react router vite plugin

* typegen: nicer logging

* typegen: handle absolute paths for `route.file`

Author: pcattori

integration/typegen-test.ts

@@ -304,4 +304,38 @@ test.describe("typegen", () => {
     expect(proc.stderr.toString()).toBe("");
     expect(proc.status).toBe(0);
   });
+
+  test("route files with absolute paths", async () => {
+    const cwd = await createProject({
+      "vite.config.ts": viteConfig,
+      "app/expect-type.ts": expectType,
+      "app/routes.ts": tsx`
+        import path from "node:path";
+        import { type RouteConfig, route } from "@react-router/dev/routes";
+
+        export const routes: RouteConfig = [
+          route("absolute/:id", path.resolve(__dirname, "routes/absolute.tsx")),
+        ];
+      `,
+      "app/routes/absolute.tsx": tsx`
+        import { Expect, Equal } from "../expect-type"
+        import type { Route } from "./+types/absolute"
+
+        export function loader({ params }: Route.LoaderArgs) {
+          type Test = Expect<Equal<typeof params.id, string>>
+          return { planet: "world" }
+        }
+
+        export default function Component({ loaderData }: Route.ComponentProps) {
+          type Test = Expect<Equal<typeof loaderData.planet, string>>
+          return <h1>Hello, {loaderData.planet}!</h1>
+        }
+      `,
+    });
+
+    const proc = typecheck(cwd);
+    expect(proc.stdout.toString()).toBe("");
+    expect(proc.stderr.toString()).toBe("");
+    expect(proc.status).toBe(0);
+  });
 });

packages/react-router-dev/cli/commands.ts

@@ -12,6 +12,10 @@ import { loadPluginContext } from "../vite/plugin";
 import { transpile as convertFileToJS } from "./useJavascript";
 import * as profiler from "../vite/profiler";
 import * as Typegen from "../typegen";
+import {
+  importViteEsmSync,
+  preloadViteEsm,
+} from "../vite/import-vite-esm-sync";
 
 export async function routes(
   reactRouterRoot?: string,
@@ -201,7 +205,11 @@ export async function typegen(root: string, flags: { watch: boolean }) {
   root ??= process.cwd();
 
   if (flags.watch) {
-    await Typegen.watch(root);
+    await preloadViteEsm();
+    const vite = importViteEsmSync();
+    const logger = vite.createLogger("info", { prefix: "[react-router]" });
+
+    await Typegen.watch(root, { logger });
     await new Promise(() => {}); // keep alive
     return;
   }

packages/react-router-dev/logger.ts

@@ -2,8 +2,8 @@ import fs from "node:fs";
 
 import * as Path from "pathe";
 import pc from "picocolors";
+import type vite from "vite";
 
-import * as Logger from "../logger";
 import { createConfigLoader } from "../config/config";
 
 import { generate } from "./generate";
@@ -15,46 +15,29 @@ export async function run(rootDirectory: string) {
   await writeAll(ctx);
 }
 
-export async function watch(rootDirectory: string) {
-  const watchStart = performance.now();
+export async function watch(
+  rootDirectory: string,
+  { logger }: { logger?: vite.Logger } = {}
+) {
   const ctx = await createContext({ rootDirectory, watch: true });
-
   await writeAll(ctx);
-  Logger.info("generated initial types", {
-    durationMs: performance.now() - watchStart,
-  });
-
-  ctx.configLoader.onChange(
-    async ({ result, routeConfigChanged, event, path }) => {
-      const eventStart = performance.now();
-
-      if (result.ok) {
-        ctx.config = result.value;
+  logger?.info(pc.green("generated types"), { timestamp: true, clear: true });
 
-        if (routeConfigChanged) {
-          await writeAll(ctx);
-          Logger.info("changed route config", {
-            durationMs: performance.now() - eventStart,
-          });
+  ctx.configLoader.onChange(async ({ result, routeConfigChanged }) => {
+    if (!result.ok) {
+      logger?.error(pc.red(result.error), { timestamp: true, clear: true });
+      return;
+    }
 
-          const route = findRoute(ctx, path);
-          if (route && (event === "add" || event === "unlink")) {
-            Logger.info(
-              `${event === "add" ? "added" : "removed"} route ${pc.blue(
-                route.file
-              )}`,
-              { durationMs: performance.now() - eventStart }
-            );
-            return;
-          }
-        }
-      } else {
-        Logger.error(result.error, {
-          durationMs: performance.now() - eventStart,
-        });
-      }
+    ctx.config = result.value;
+    if (routeConfigChanged) {
+      await writeAll(ctx);
+      logger?.info(pc.green("regenerated types"), {
+        timestamp: true,
+        clear: true,
+      });
     }
-  );
+  });
 }
 
 async function createContext({
@@ -80,18 +63,11 @@ async function createContext({
   };
 }
 
-function findRoute(ctx: Context, path: string) {
-  return Object.values(ctx.config.routes).find(
-    (route) => path === Path.join(ctx.config.appDirectory, route.file)
-  );
-}
-
 async function writeAll(ctx: Context): Promise<void> {
   const typegenDir = getTypesDir(ctx);
 
   fs.rmSync(typegenDir, { recursive: true, force: true });
   Object.values(ctx.config.routes).forEach((route) => {
-    if (!fs.existsSync(Path.join(ctx.config.appDirectory, route.file))) return;
     const typesPath = getTypesPath(ctx, route);
     const content = generate(ctx, route);
     fs.mkdirSync(Path.dirname(typesPath), { recursive: true });

packages/react-router-dev/typegen/index.ts

@@ -9,10 +9,14 @@ export function getTypesDir(ctx: Context) {
 }
 
 export function getTypesPath(ctx: Context, route: RouteManifestEntry) {
+  const rel = Path.isAbsolute(route.file)
+    ? Path.relative(ctx.config.appDirectory, route.file)
+    : route.file;
+
   return Path.join(
     getTypesDir(ctx),
     Path.relative(ctx.rootDirectory, ctx.config.appDirectory),
-    Path.dirname(route.file),
-    "+types/" + Pathe.filename(route.file) + ".ts"
+    Path.dirname(rel),
+    "+types/" + Pathe.filename(rel) + ".ts"
   );
 }

packages/react-router-dev/typegen/paths.ts

@@ -23,6 +23,7 @@ import {
 import jsesc from "jsesc";
 import colors from "picocolors";
 
+import * as Typegen from "../typegen";
 import { type RouteManifestEntry, type RouteManifest } from "../config/routes";
 import type { Manifest as ReactRouterManifest } from "../manifest";
 import invariant from "../invariant";
@@ -746,6 +747,11 @@ export const reactRouterVitePlugin: ReactRouterVitePlugin = () => {
         rootDirectory =
           viteUserConfig.root ?? process.env.REACT_ROUTER_ROOT ?? process.cwd();
 
+        Typegen.watch(rootDirectory, {
+          // ignore `info` logs from typegen since they are redundant when Vite plugin logs are active
+          logger: vite.createLogger("warn", { prefix: "[react-router]" }),
+        });
+
         reactRouterConfigLoader = await createConfigLoader({
           rootDirectory,
           watch: viteCommand === "serve",