typegen: matches and params for child routes (#12397)

Author: pcattori

.changeset/red-eagles-stare.md

@@ -0,0 +1,10 @@
+---
+"@react-router/dev": patch
+"react-router": patch
+---
+
+Generate wide `matches` and `params` types for child routes
+
+At runtime, `matches` includes child route matches and `params` include child route path parameters.
+But previously, we only generated types for parent routes and the current route in `matches` and `params`.
+To align our generated types more closely to the runtime behavior, we now generate more permissive, wider types when accessing child route information.

integration/typegen-test.ts

@@ -55,7 +55,8 @@ test.describe("typegen", () => {
         import type { Route } from "./+types/product"
 
         export function loader({ params }: Route.LoaderArgs) {
-          type Test = Expect<Equal<typeof params.id, string>>
+          type Test1 = Expect<Equal<typeof params.id, string>>
+          type Test2 = Expect<Equal<typeof params.asdf, string | undefined>>
           return { planet: "world" }
         }
 
@@ -287,6 +288,9 @@ test.describe("typegen", () => {
 
           const parent2 = matches[2]
           type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>
+
+          const child1 = matches[4]
+          type Test3 = Expect<Equal<typeof child1.data, unknown>>
           return []
         }
 
@@ -296,6 +300,9 @@ test.describe("typegen", () => {
 
           const parent2 = matches[2]
           type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>
+
+          const child1 = matches[4]
+          type Test3 = Expect<Equal<typeof child1.data, unknown>>
         }
       `,
     });

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

@@ -41,7 +41,9 @@ export function generate(ctx: Context, route: RouteManifestEntry): string {
       id: "${route.id}"
       file: "${route.file}"
       path: "${route.path}"
-      params: {${formatParamProperties(urlpath)}}
+      params: {${formatParamProperties(
+        urlpath
+      )}} & { [key: string]: string | undefined }
       module: Module
       loaderData: T.CreateLoaderData<Module>
       actionData: T.CreateActionData<Module>

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

@@ -48,7 +48,7 @@ type MetaMatch<T extends RouteInfo> = Pretty<
 type MetaMatches<T extends RouteInfo[]> =
   T extends [infer F extends RouteInfo, ...infer R extends RouteInfo[]]
     ? [MetaMatch<F>, ...MetaMatches<R>]
-    : [];
+    : MetaMatch<RouteInfo>[];
 
 export type CreateMetaArgs<T extends RouteInfo> = {
   location: Location;
@@ -149,7 +149,7 @@ type Match<T extends RouteInfo> = Pretty<
 type Matches<T extends RouteInfo[]> =
   T extends [infer F extends RouteInfo, ...infer R extends RouteInfo[]]
     ? [Match<F>, ...Matches<R>]
-    : [];
+    : Match<RouteInfo>[];
 
 export type CreateComponentProps<T extends RouteInfo> = {
   params: T["params"];