Better types for params (#13543)

* wip

* wip

* wip

* wip

* wip

* wip

* changeset

* fix params type for layouts

* clear types dir

Author: pcattori

.changeset/neat-candles-stare.md

@@ -0,0 +1,57 @@
+---
+"@react-router/dev": patch
+"react-router": patch
+---
+
+Better types for `params`
+
+For example:
+
+```ts
+// routes.ts
+import { type RouteConfig, route } from "@react-router/dev/routes";
+
+export default [
+  route("parent/:p", "routes/parent.tsx", [
+    route("route/:r", "routes/route.tsx", [
+      route("child1/:c1a/:c1b", "routes/child1.tsx"),
+      route("child2/:c2a/:c2b", "routes/child2.tsx"),
+    ]),
+  ]),
+] satisfies RouteConfig;
+```
+
+Previously, `params` for `routes/route` were calculated as `{ p: string, r: string }`.
+This incorrectly ignores params that could come from child routes.
+If visiting `/parent/1/route/2/child1/3/4`, the actual params passed to `routes/route` will have a type of `{ p: string, r: string, c1a: string, c1b: string }`.
+
+Now, `params` are aware of child routes and autocompletion will include child params as optionals:
+
+```ts
+params.|
+//     ^ cursor is here and you ask for autocompletion
+// p: string
+// r: string
+// c1a?: string
+// c1b?: string
+// c2a?: string
+// c2b?: string
+```
+
+You can also narrow the types for `params` as it is implemented as a normalized union of params for each page that includes `routes/route`:
+
+```ts
+if (typeof params.c1a === 'string') {
+  params.|
+  //     ^ cursor is here and you ask for autocompletion
+  // p: string
+  // r: string
+  // c1a: string
+  // c1b: string
+}
+```
+
+---
+
+UNSTABLE: renamed internal `react-router/route-module` export to `react-router/internal`
+UNSTABLE: removed `Info` export from generated `+types/*` files

integration/typegen-test.ts

@@ -55,8 +55,7 @@ test.describe("typegen", () => {
         import type { Route } from "./+types/product"
 
         export function loader({ params }: Route.LoaderArgs) {
-          type Test1 = Expect<Equal<typeof params.id, string>>
-          type Test2 = Expect<Equal<typeof params.asdf, string | undefined>>
+          type Test = Expect<Equal<typeof params, { id: string} >>
           return { planet: "world" }
         }
 
@@ -92,23 +91,23 @@ test.describe("typegen", () => {
           import type { Expect, Equal } from "../expect-type"
           import type { Route } from "./+types/only-required"
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params.id, string>>
+            type Test = Expect<Equal<typeof params, { id: string }>>
             return null
           }
         `,
         "app/routes/only-optional.tsx": tsx`
           import type { Expect, Equal } from "../expect-type"
           import type { Route } from "./+types/only-optional"
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params.id, string | undefined>>
+            type Test = Expect<Equal<typeof params, { id?: string }>>
             return null
           }
         `,
         "app/routes/optional-then-required.tsx": tsx`
           import type { Expect, Equal } from "../expect-type"
           import type { Route } from "./+types/optional-then-required"
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params.id, string>>
+            type Test = Expect<Equal<typeof params, { id: string }>>
             return null
           }
         `,
@@ -117,7 +116,7 @@ test.describe("typegen", () => {
           import type { Route } from "./+types/required-then-optional"
 
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params.id, string>>
+            type Test = Expect<Equal<typeof params, { id: string }>>
             return null
           }
         `,
@@ -144,7 +143,7 @@ test.describe("typegen", () => {
           import type { Route } from "./+types/splat"
 
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params["*"], string>>
+            type Test = Expect<Equal<typeof params, { "*": string }>>
             return null
           }
         `,
@@ -172,7 +171,7 @@ test.describe("typegen", () => {
           import type { Route } from "./+types/param-with-ext"
 
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params["lang"], string>>
+            type Test = Expect<Equal<typeof params, { lang: string }>>
             return null
           }
         `,
@@ -181,7 +180,7 @@ test.describe("typegen", () => {
           import type { Route } from "./+types/optional-param-with-ext"
 
           export function loader({ params }: Route.LoaderArgs) {
-            type Test = Expect<Equal<typeof params["user"], string | undefined>>
+            type Test = Expect<Equal<typeof params, { user?: string }>>
             return null
           }
         `,
@@ -191,6 +190,106 @@ test.describe("typegen", () => {
       expect(proc.stderr.toString()).toBe("");
       expect(proc.status).toBe(0);
     });
+
+    test("normalized params", async () => {
+      const cwd = await createProject({
+        "vite.config.ts": viteConfig,
+        "app/expect-type.ts": expectType,
+        "app/routes.ts": tsx`
+          import { type RouteConfig, route, layout } from "@react-router/dev/routes";
+
+          export default [
+            route("parent/:p", "routes/parent.tsx", [
+              route("route/:r", "routes/route.tsx", [
+                route("child1/:c1a/:c1b", "routes/child1.tsx"),
+                route("child2/:c2a/:c2b", "routes/child2.tsx")
+              ]),
+            ]),
+            layout("routes/layout.tsx", [
+              route("in-layout1/:id", "routes/in-layout1.tsx"),
+              route("in-layout2/:id/:other", "routes/in-layout2.tsx")
+            ])
+          ] satisfies RouteConfig;
+        `,
+        "app/routes/parent.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/parent"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params,
+              | { p: string, r?: undefined, c1a?: undefined,  c1b?: undefined, c2a?: undefined, c2b?: undefined }
+              | { p: string, r: string, c1a?: undefined,  c1b?: undefined, c2a?: undefined, c2b?: undefined }
+              | { p: string, r: string, c1a: string,  c1b: string, c2a?: undefined, c2b?: undefined }
+              | { p: string, r: string, c1a?: undefined,  c1b?: undefined, c2a: string, c2b: string }
+            >>
+            return null
+          }
+        `,
+        "app/routes/route.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/route"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params,
+              | { p: string, r: string, c1a?: undefined,  c1b?: undefined, c2a?: undefined, c2b?: undefined }
+              | { p: string, r: string, c1a: string,  c1b: string, c2a?: undefined, c2b?: undefined }
+              | { p: string, r: string, c1a?: undefined,  c1b?: undefined, c2a: string, c2b: string }
+            >>
+            return null
+          }
+        `,
+        "app/routes/child1.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/child1"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params, { p: string, r: string, c1a: string,  c1b: string }>>
+            return null
+          }
+        `,
+        "app/routes/child2.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/child2"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params, { p: string, r: string, c2a: string, c2b: string }>>
+            return null
+          }
+        `,
+        "app/routes/layout.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/layout"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params, { id: string, other?: undefined } | { id: string, other: string } >>
+            return null
+          }
+        `,
+        "app/routes/in-layout1.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/in-layout1"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params, { id: string }>>
+            return null
+          }
+        `,
+        "app/routes/in-layout2.tsx": tsx`
+          import type { Expect, Equal } from "../expect-type"
+          import type { Route } from "./+types/in-layout2"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            type Test = Expect<Equal<typeof params, { id: string, other: string }>>
+            return null
+          }
+        `,
+      });
+
+      const proc = typecheck(cwd);
+      expect(proc.stdout.toString()).toBe("");
+      expect(proc.stderr.toString()).toBe("");
+      expect(proc.status).toBe(0);
+    });
   });
 
   test("clientLoader.hydrate = true", async () => {
@@ -240,7 +339,7 @@ test.describe("typegen", () => {
         import type { Route } from "./+types/products.$id"
 
         export function loader({ params }: Route.LoaderArgs) {
-          type Test = Expect<Equal<typeof params.id, string>>
+          type Test = Expect<Equal<typeof params, { id: string }>>
           return { planet: "world" }
         }
 
@@ -372,7 +471,7 @@ test.describe("typegen", () => {
         import type { Route } from "./+types/absolute"
 
         export function loader({ params }: Route.LoaderArgs) {
-          type Test = Expect<Equal<typeof params.id, string>>
+          type Test = Expect<Equal<typeof params, { id: string }>>
           return { planet: "world" }
         }
 

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

@@ -1,7 +1,36 @@
-import type { ConfigLoader, ResolvedReactRouterConfig } from "../config/config";
+import {
+  createConfigLoader,
+  type ConfigLoader,
+  type ResolvedReactRouterConfig,
+} from "../config/config";
 
 export type Context = {
   rootDirectory: string;
   configLoader: ConfigLoader;
   config: ResolvedReactRouterConfig;
 };
+
+export async function createContext({
+  rootDirectory,
+  watch,
+  mode,
+}: {
+  rootDirectory: string;
+  watch: boolean;
+  mode: string;
+}): Promise<Context> {
+  const configLoader = await createConfigLoader({ rootDirectory, mode, watch });
+  const configResult = await configLoader.getConfig();
+
+  if (!configResult.ok) {
+    throw new Error(configResult.error);
+  }
+
+  const config = configResult.value;
+
+  return {
+    configLoader,
+    rootDirectory,
+    config,
+  };
+}