typegen: +types.<route> -> +types/<route> (#12284)

* typegen: `+types.` -> `+types/`

* update playground

integration/typegen-test.ts

@@ -52,7 +52,7 @@ test.describe("typegen", () => {
       `,
       "app/routes/product.tsx": tsx`
         import { Expect, Equal } from "../expect-type"
-        import type { Route } from "./+types.product"
+        import type { Route } from "./+types/product"
 
         export function loader({ params }: Route.LoaderArgs) {
           type Test = Expect<Equal<typeof params.id, string>>
@@ -86,7 +86,7 @@ test.describe("typegen", () => {
         `,
         "app/routes/repeated-params.tsx": tsx`
           import { Expect, Equal } from "../expect-type"
-          import type { Route } from "./+types.repeated-params"
+          import type { Route } from "./+types/repeated-params"
 
           export function loader({ params }: Route.LoaderArgs) {
             type Expected = [string, string | undefined, string]
@@ -114,7 +114,7 @@ test.describe("typegen", () => {
         `,
         "app/routes/splat.tsx": tsx`
           import { Expect, Equal } from "../expect-type"
-          import type { Route } from "./+types.splat"
+          import type { Route } from "./+types/splat"
 
           export function loader({ params }: Route.LoaderArgs) {
             type Test = Expect<Equal<typeof params["*"], string>>
@@ -142,7 +142,7 @@ test.describe("typegen", () => {
         `,
         "app/routes/param-with-ext.tsx": tsx`
           import { Expect, Equal } from "../expect-type"
-          import type { Route } from "./+types.param-with-ext"
+          import type { Route } from "./+types/param-with-ext"
 
           export function loader({ params }: Route.LoaderArgs) {
             type Test = Expect<Equal<typeof params["lang"], string>>
@@ -151,7 +151,7 @@ test.describe("typegen", () => {
         `,
         "app/routes/optional-param-with-ext.tsx": tsx`
           import { Expect, Equal } from "../expect-type"
-          import type { Route } from "./+types.optional-param-with-ext"
+          import type { Route } from "./+types/optional-param-with-ext"
 
           export function loader({ params }: Route.LoaderArgs) {
             type Test = Expect<Equal<typeof params["user"], string | undefined>>
@@ -172,7 +172,7 @@ test.describe("typegen", () => {
       "app/expect-type.ts": expectType,
       "app/routes/_index.tsx": tsx`
         import { Expect, Equal } from "../expect-type"
-        import type { Route } from "./+types._index"
+        import type { Route } from "./+types/_index"
 
         export function loader() {
           return { server: "server" }
@@ -211,7 +211,7 @@ test.describe("typegen", () => {
       "app/expect-type.ts": expectType,
       "app/routes/products.$id.tsx": tsx`
         import { Expect, Equal } from "../expect-type"
-        import type { Route } from "./+types.products.$id"
+        import type { Route } from "./+types/products.$id"
 
         export function loader({ params }: Route.LoaderArgs) {
           type Test = Expect<Equal<typeof params.id, string>>
@@ -281,7 +281,7 @@ test.describe("typegen", () => {
       `,
       "app/routes/current.tsx": tsx`
         import { Expect, Equal } from "../expect-type"
-        import type { Route } from "./+types.current"
+        import type { Route } from "./+types/current"
 
         export function meta({ matches }: Route.MetaArgs) {
           const parent1 = matches[1]

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

@@ -1,7 +1,4 @@
-import * as Path from "pathe";
-import * as Pathe from "pathe/utils";
-
-import type { RouteManifest, RouteManifestEntry } from "../config/routes";
+import type { RouteManifest } from "../config/routes";
 import type * as ViteNode from "../vite/vite-node";
 
 export type Context = {
@@ -10,13 +7,3 @@ export type Context = {
   routeConfigEnv: ViteNode.Context;
   routes: RouteManifest;
 };
-
-export function getTypesPath(ctx: Context, route: RouteManifestEntry) {
-  const typegenDir = Path.join(ctx.rootDirectory, ".react-router/types");
-  return Path.join(
-    typegenDir,
-    Path.relative(ctx.rootDirectory, ctx.appDirectory),
-    Path.dirname(route.file),
-    "+types." + Pathe.filename(route.file) + ".d.ts"
-  );
-}

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

@@ -3,7 +3,8 @@ import * as Path from "pathe";
 import * as Pathe from "pathe/utils";
 
 import { type RouteManifest, type RouteManifestEntry } from "../config/routes";
-import { getTypesPath, type Context } from "./context";
+import { type Context } from "./context";
+import { getTypesPath } from "./paths";
 
 export function generate(ctx: Context, route: RouteManifestEntry): string {
   const lineage = getRouteLineage(ctx.routes, route);
@@ -13,14 +14,15 @@ export function generate(ctx: Context, route: RouteManifestEntry): string {
   const parents = lineage.slice(0, -1);
   const parentTypeImports = parents
     .map((parent, i) => {
-      let rel = Path.relative(
+      const rel = Path.relative(
         Path.dirname(typesPath),
         getTypesPath(ctx, parent)
       );
-      if (rel.startsWith("+")) rel = "./" + rel;
+
       const indent = i === 0 ? "" : "  ".repeat(2);
-      const imp = `${indent}import type { Info as Parent${i} } from "${rel}"`;
-      return imp;
+      let source = noExtension(rel);
+      if (!source.startsWith("../")) source = "./" + source;
+      return `${indent}import type { Info as Parent${i} } from "${source}"`;
     })
     .join("\n");
 
@@ -35,7 +37,7 @@ export function generate(ctx: Context, route: RouteManifestEntry): string {
 
     type Params = {${formatParamProperties(urlpath)}}
 
-    type RouteModule = typeof import("./${Pathe.filename(route.file)}")
+    type RouteModule = typeof import("../${Pathe.filename(route.file)}")
     type LoaderData = T.CreateLoaderData<RouteModule>
     type ActionData = T.CreateActionData<RouteModule>
 
@@ -69,6 +71,9 @@ export function generate(ctx: Context, route: RouteManifestEntry): string {
   `;
 }
 
+const noExtension = (path: string) =>
+  Path.join(Path.dirname(path), Pathe.filename(path));
+
 function getRouteLineage(routes: RouteManifest, route: RouteManifestEntry) {
   const result: RouteManifestEntry[] = [];
   while (route) {

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

@@ -13,6 +13,6 @@ export function getTypesPath(ctx: Context, route: RouteManifestEntry) {
     getTypesDir(ctx),
     Path.relative(ctx.rootDirectory, ctx.appDirectory),
     Path.dirname(route.file),
-    "+types." + Pathe.filename(route.file) + ".d.ts"
+    "+types/" + Pathe.filename(route.file) + ".d.ts"
   );
 }

packages/react-router/lib/types/route-module.ts

@@ -8,6 +8,8 @@ import type { Equal, Expect, Func, Pretty } from "./utils";
 type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
 
 type RouteModule = {
+  meta?: Func;
+  links?: Func;
   loader?: Func;
   clientLoader?: Func;
   action?: Func;

playground/compiler/app/routes/_index.tsx

@@ -1,4 +1,4 @@
-import type { Route } from "./+types._index";
+import type { Route } from "./+types/_index";
 
 export function loader({ params }: Route.LoaderArgs) {
   return { planet: "world", date: new Date(), fn: () => 1 };

playground/compiler/app/routes/product.tsx

@@ -1,4 +1,4 @@
-import type { Route } from "./+types.product";
+import type { Route } from "./+types/product";
 
 export function loader({ params }: Route.LoaderArgs) {
   return { name: `Super cool product #${params.id}` };