matches as component prop (#12291)

pcattori · web-flow · commit 7d365ed991a4 · 2024-11-15T10:24:33.000-05:00
* matches as component prop

* refactor: tidier typegen
diff --git a/integration/typegen-test.ts b/integration/typegen-test.ts
@@ -230,7 +230,7 @@ test.describe("typegen", () => {
     expect(proc.status).toBe(0);
   });
 
-  test("meta matches", async () => {
+  test("matches", async () => {
     const cwd = await createProject({
       "vite.config.ts": viteConfig,
       "app/expect-type.ts": expectType,
@@ -289,6 +289,14 @@ test.describe("typegen", () => {
           type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>
           return []
         }
+
+        export default function Component({ matches }: Route.ComponentProps) {
+          const parent1 = matches[1]
+          type Test1 = Expect<Equal<typeof parent1.data, { parent1: number }>>
+
+          const parent2 = matches[2]
+          type Test2 = Expect<Equal<typeof parent2.data, { parent2: number }>>
+        }
       `,
     });
     const proc = typecheck(cwd);
diff --git a/packages/react-router-dev/typegen/generate.ts b/packages/react-router-dev/typegen/generate.ts
@@ -1,4 +1,4 @@
-import dedent from "dedent";
+import ts from "dedent";
 import * as Path from "pathe";
 import * as Pathe from "pathe/utils";
 
@@ -26,47 +26,43 @@ export function generate(ctx: Context, route: RouteManifestEntry): string {
     })
     .join("\n");
 
-  return dedent`
+  return ts`
     // React Router generated types for route:
     // ${route.file}
 
     import type * as T from "react-router/route-module"
 
     ${parentTypeImports}
-    type Parents = [${parents.map((_, i) => `Parent${i}`).join(", ")}]
 
-    type Params = {${formatParamProperties(urlpath)}}
-
-    type RouteModule = typeof import("../${Pathe.filename(route.file)}")
-    type LoaderData = T.CreateLoaderData<RouteModule>
-    type ActionData = T.CreateActionData<RouteModule>
+    type Module = typeof import("../${Pathe.filename(route.file)}")
 
     export type Info = {
+      parents: [${parents.map((_, i) => `Parent${i}`).join(", ")}],
       id: "${route.id}"
       file: "${route.file}"
       path: "${route.path}"
-      params: Params
-      loaderData: LoaderData
-      actionData: ActionData
+      params: {${formatParamProperties(urlpath)}}
+      module: Module
+      loaderData: T.CreateLoaderData<Module>
+      actionData: T.CreateActionData<Module>
     }
 
     export namespace Route {
-
       export type LinkDescriptors = T.LinkDescriptors
       export type LinksFunction = () => LinkDescriptors
 
-      export type MetaArgs = T.CreateMetaArgs<Params, LoaderData, Parents>
+      export type MetaArgs = T.CreateMetaArgs<Info>
       export type MetaDescriptors = T.MetaDescriptors
       export type MetaFunction = (args: MetaArgs) => MetaDescriptors
 
-      export type LoaderArgs = T.CreateServerLoaderArgs<Params>
-      export type ClientLoaderArgs = T.CreateClientLoaderArgs<Params, RouteModule>
-      export type ActionArgs = T.CreateServerActionArgs<Params>
-      export type ClientActionArgs = T.CreateClientActionArgs<Params, RouteModule>
+      export type LoaderArgs = T.CreateServerLoaderArgs<Info>
+      export type ClientLoaderArgs = T.CreateClientLoaderArgs<Info>
+      export type ActionArgs = T.CreateServerActionArgs<Info>
+      export type ClientActionArgs = T.CreateClientActionArgs<Info>
 
-      export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Params>
-      export type ComponentProps = T.CreateComponentProps<Params, LoaderData, ActionData>
-      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Params, LoaderData, ActionData>
+      export type HydrateFallbackProps = T.CreateHydrateFallbackProps<Info>
+      export type ComponentProps = T.CreateComponentProps<Info>
+      export type ErrorBoundaryProps = T.CreateErrorBoundaryProps<Info>
     }
   `;
 }
@@ -87,24 +83,17 @@ function getRouteLineage(routes: RouteManifest, route: RouteManifestEntry) {
 
 function formatParamProperties(urlpath: string) {
   const params = parseParams(urlpath);
-  const indent = "  ".repeat(3);
   const properties = Object.entries(params).map(([name, values]) => {
     if (values.length === 1) {
       const isOptional = values[0];
-      return indent + (isOptional ? `"${name}"?: string` : `"${name}": string`);
+      return isOptional ? `"${name}"?: string` : `"${name}": string`;
     }
     const items = values.map((isOptional) =>
       isOptional ? "string | undefined" : "string"
     );
-    return indent + `"${name}": [${items.join(", ")}]`;
+    return `"${name}": [${items.join(", ")}]`;
   });
-
-  // prettier-ignore
-  const body =
-    properties.length === 0 ? "" :
-    "\n" + properties.join("\n") + "\n";
-
-  return body;
+  return properties.join("; ");
 }
 
 function parseParams(urlpath: string) {
diff --git a/packages/react-router-dev/vite/with-props.ts b/packages/react-router-dev/vite/with-props.ts
@@ -19,14 +19,15 @@ export const plugin: Plugin = {
     if (id !== VirtualModule.resolve(vmodId)) return;
     return dedent`
       import { createElement as h } from "react";
-      import { useActionData, useLoaderData, useParams } from "react-router";
+      import { useActionData, useLoaderData, useMatches, useParams } from "react-router";
 
       export function withComponentProps(Component) {
         return function Wrapped() {
           const props = {
             params: useParams(),
             loaderData: useLoaderData(),
             actionData: useActionData(),
+            matches: useMatches(),
           };
           return h(Component, props);
         };
diff --git a/packages/react-router/lib/types/route-module.ts b/packages/react-router/lib/types/route-module.ts
@@ -23,9 +23,14 @@ type RouteModule = {
 export type LinkDescriptors = LinkDescriptor[];
 
 type RouteInfo = {
+  parents: RouteInfo[];
+  module: RouteModule;
   id: unknown;
+  file: string;
+  path: string;
   params: unknown;
   loaderData: unknown;
+  actionData: unknown;
 };
 
 type MetaMatch<T extends RouteInfo> = Pretty<
@@ -44,12 +49,12 @@ type MetaMatches<T extends RouteInfo[]> =
     ? [MetaMatch<F>, ...MetaMatches<R>]
     : [];
 
-export type CreateMetaArgs<Params, LoaderData, Parents extends RouteInfo[]> = {
+export type CreateMetaArgs<T extends RouteInfo> = {
   location: Location;
-  params: Params;
-  data: LoaderData;
+  params: T["params"];
+  data: T["loaderData"];
   error?: unknown;
-  matches: MetaMatches<Parents>;
+  matches: MetaMatches<T["parents"]>;
 };
 export type MetaDescriptors = MetaDescriptor[];
 
@@ -95,48 +100,61 @@ type _CreateActionData<ServerActionData, ClientActionData> = Awaited<
   undefined
 >
 
-type ClientDataFunctionArgs<Params> = {
+type ClientDataFunctionArgs<T extends RouteInfo> = {
   request: Request;
-  params: Params;
+  params: T["params"];
 };
 
-type ServerDataFunctionArgs<Params> = ClientDataFunctionArgs<Params> & {
+type ServerDataFunctionArgs<T extends RouteInfo> = ClientDataFunctionArgs<T> & {
   context: AppLoadContext;
 };
 
-export type CreateServerLoaderArgs<Params> = ServerDataFunctionArgs<Params>;
+export type CreateServerLoaderArgs<T extends RouteInfo> =
+  ServerDataFunctionArgs<T>;
 
-export type CreateClientLoaderArgs<
-  Params,
-  T extends RouteModule
-> = ClientDataFunctionArgs<Params> & {
-  serverLoader: () => Promise<ServerDataFrom<T["loader"]>>;
-};
+export type CreateClientLoaderArgs<T extends RouteInfo> =
+  ClientDataFunctionArgs<T> & {
+    serverLoader: () => Promise<ServerDataFrom<T["module"]["loader"]>>;
+  };
 
-export type CreateServerActionArgs<Params> = ServerDataFunctionArgs<Params>;
+export type CreateServerActionArgs<T extends RouteInfo> =
+  ServerDataFunctionArgs<T>;
 
-export type CreateClientActionArgs<
-  Params,
-  T extends RouteModule
-> = ClientDataFunctionArgs<Params> & {
-  serverAction: () => Promise<ServerDataFrom<T["action"]>>;
-};
+export type CreateClientActionArgs<T extends RouteInfo> =
+  ClientDataFunctionArgs<T> & {
+    serverAction: () => Promise<ServerDataFrom<T["module"]["action"]>>;
+  };
 
-export type CreateHydrateFallbackProps<Params> = {
-  params: Params;
+export type CreateHydrateFallbackProps<T extends RouteInfo> = {
+  params: T["params"];
 };
 
-export type CreateComponentProps<Params, LoaderData, ActionData> = {
-  params: Params;
-  loaderData: LoaderData;
-  actionData?: ActionData;
+type Match<T extends RouteInfo> = Pretty<
+  Pick<T, "id" | "params"> & {
+    pathname: string;
+    data: T["loaderData"];
+    handle: unknown;
+  }
+>;
+
+// prettier-ignore
+type Matches<T extends RouteInfo[]> =
+  T extends [infer F extends RouteInfo, ...infer R extends RouteInfo[]]
+    ? [Match<F>, ...Matches<R>]
+    : [];
+
+export type CreateComponentProps<T extends RouteInfo> = {
+  params: T["params"];
+  loaderData: T["loaderData"];
+  actionData?: T["actionData"];
+  matches: Matches<T["parents"]>;
 };
 
-export type CreateErrorBoundaryProps<Params, LoaderData, ActionData> = {
-  params: Params;
+export type CreateErrorBoundaryProps<T extends RouteInfo> = {
+  params: T["params"];
   error: unknown;
-  loaderData?: LoaderData;
-  actionData?: ActionData;
+  loaderData?: T["loaderData"];
+  actionData?: T["actionData"];
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
