Add typegen support for routes outside appDirectory

Author: alex-pex

integration/typegen-test.ts

@@ -1,5 +1,6 @@
 import fs from "node:fs/promises";
 
+import { expect } from "@playwright/test";
 import tsx from "dedent";
 import * as Path from "pathe";
 
@@ -336,6 +337,57 @@ test.describe("typegen", () => {
     await $("pnpm typecheck");
   });
 
+  test("routes outside app dir", async ({ cwd, edit, $ }) => {
+    // Create the subdirectories
+    await fs.mkdir(Path.join(cwd, "app/router"), { recursive: true });
+    await fs.mkdir(Path.join(cwd, "app/pages"), { recursive: true });
+    
+    await edit({
+      "react-router.config.ts": tsx`
+        export default {
+          appDirectory: "app/router",
+        }
+      `,
+      "app/router/routes.ts": tsx`
+        import { type RouteConfig, route } from "@react-router/dev/routes";
+
+        export default [
+          route("products/:id", "../pages/product.tsx")
+        ] satisfies RouteConfig;
+      `,
+      "app/router/root.tsx": tsx`
+        import { Outlet } from "react-router";
+
+        export default function Root() {
+          return <Outlet />;
+        }
+      `,
+      "app/pages/product.tsx": tsx`
+        import type { Expect, Equal } from "../expect-type"
+        import type { Route } from "./+types/product"
+
+        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>
+        }
+      `,
+    });
+    await $("pnpm typecheck");
+
+    // Verify that the types file was generated in the correct location
+    const annotationPath = Path.join(
+      cwd,
+      ".react-router/types/app/pages/+types/product.ts",
+    );
+    const annotation = await fs.readFile(annotationPath, "utf8");
+    expect(annotation).toContain("export namespace Route");
+  });
+
   test("matches", async ({ edit, $ }) => {
     await edit({
       "app/routes.ts": tsx`

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

@@ -116,7 +116,7 @@ export function generateRoutes(ctx: Context): Array<VirtualFile> {
 
   // **/+types/*.ts
   const allAnnotations: Array<VirtualFile> = Array.from(fileToRoutes.entries())
-    .filter(([file]) => isInAppDirectory(ctx, file))
+    .filter(([file]) => isInRootDirectory(ctx, file))
     .map(([file, routeIds]) =>
       getRouteAnnotations({ ctx, file, routeIds, lineages }),
     );
@@ -193,9 +193,9 @@ function routeFilesType({
   );
 }
 
-function isInAppDirectory(ctx: Context, routeFile: string): boolean {
+function isInRootDirectory(ctx: Context, routeFile: string): boolean {
   const path = Path.resolve(ctx.config.appDirectory, routeFile);
-  return path.startsWith(ctx.config.appDirectory);
+  return path.startsWith(ctx.rootDirectory);
 }
 
 function getRouteAnnotations({