Fix typegen support for routes outside appDirectory

.changeset/yellow-carpets-own.md

@@ -0,0 +1,5 @@
+---
+"@react-router/dev": patch
+---
+
+Fix typegen support for routes outside appDirectory

contributors.yml

@@ -20,6 +20,7 @@
 - alberto
 - AlemTuzlak
 - Aleuck
+- alex-pex
 - alexandernanberg
 - alexanderson1993
 - alexlbr

integration/helpers/fixtures.ts

@@ -31,6 +31,7 @@ type Edits = Record<string, string | ((contents: string) => string)>;
 async function applyEdits(cwd: string, edits: Edits) {
   const promises = Object.entries(edits).map(async ([file, transform]) => {
     const filepath = Path.join(cwd, file);
+    await fs.mkdir(Path.dirname(filepath), { recursive: true });
     await fs.writeFile(
       filepath,
       typeof transform === "function"

integration/typegen-test.ts

@@ -336,6 +336,45 @@ test.describe("typegen", () => {
     await $("pnpm typecheck");
   });
 
+  test("routes outside app dir", async ({ edit, $ }) => {
+    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");
+  });
+
   test("matches", async ({ edit, $ }) => {
     await edit({
       "app/routes.ts": tsx`

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

@@ -119,7 +119,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 }),
     );
@@ -221,9 +221,9 @@ function routeModulesType(ctx: Context) {
   );
 }
 
-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({