improved typegen

Author: pcattori

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

@@ -9,8 +9,6 @@ import {
   type VirtualFile,
   typesDirectory,
   generateFuture,
-  generateRouteModuleAnnotations,
-  generatePages,
   generateRoutes,
   generateServerBuild,
 } from "./generate";
@@ -36,10 +34,8 @@ export async function run(rootDirectory: string, { mode }: { mode: string }) {
   await fs.rm(typesDirectory(ctx), { recursive: true, force: true });
   await write(
     generateFuture(ctx),
-    generatePages(ctx),
-    generateRoutes(ctx),
     generateServerBuild(ctx),
-    ...generateRouteModuleAnnotations(ctx)
+    ...generateRoutes(ctx)
   );
 }
 
@@ -55,10 +51,8 @@ export async function watch(
   await fs.rm(typesDirectory(ctx), { recursive: true, force: true });
   await write(
     generateFuture(ctx),
-    generatePages(ctx),
-    generateRoutes(ctx),
     generateServerBuild(ctx),
-    ...generateRouteModuleAnnotations(ctx)
+    ...generateRoutes(ctx)
   );
   logger?.info(green("generated types"), { timestamp: true, clear: true });
 
@@ -80,11 +74,7 @@ export async function watch(
 
       if (routeConfigChanged) {
         await clearRouteModuleAnnotations(ctx);
-        await write(
-          generatePages(ctx),
-          generateRoutes(ctx),
-          ...generateRouteModuleAnnotations(ctx)
-        );
+        await write(...generateRoutes(ctx));
         logger?.info(green("regenerated types"), {
           timestamp: true,
           clear: true,

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

@@ -15,7 +15,15 @@ export function lineage(
 }
 
 export function fullpath(lineage: RouteManifestEntry[]) {
-  if (lineage.length === 1 && lineage[0].id === "root") return "/";
+  const route = lineage.at(-1);
+
+  // root
+  if (lineage.length === 1 && route?.id === "root") return "/";
+
+  // layout
+  const isLayout = route && route.index !== true && route.path === undefined;
+  if (isLayout) return undefined;
+
   return (
     "/" +
     lineage

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

@@ -1,29 +1,16 @@
-import type { Register } from "./types/register";
+import type { Pages } from "./types/register";
 import type { Equal } from "./types/utils";
 
-type AnyParams = Record<string, string | undefined>;
-type AnyPages = Record<
-  string,
-  {
-    params: AnyParams;
-  }
->;
-type Pages = Register extends {
-  pages: infer RegisteredPages extends AnyPages;
-}
-  ? RegisteredPages
-  : AnyPages;
-
 type Args = { [K in keyof Pages]: ToArgs<Pages[K]["params"]> };
 
 // prettier-ignore
-type ToArgs<T extends AnyParams> =
+type ToArgs<Params extends Record<string, string | undefined>> =
   // path without params -> no `params` arg
-  Equal<T, {}> extends true ? [] :
+  Equal<Params, {}> extends true ? [] :
   // path with only optional params -> optional `params` arg
-  Partial<T> extends T ? [T] | [] :
+  Partial<Params> extends Params ? [Params] | [] :
   // otherwise, require `params` arg
-  [T];
+  [Params];
 
 /**
   Returns a resolved URL path for the specified route.

packages/react-router/lib/href.ts

@@ -1,6 +1,13 @@
-export type { Params } from "./params";
-export type {
-  RouteModuleAnnotations,
-  CreateLoaderData,
-  CreateActionData,
-} from "./route-module";
+export type { GetAnnotations } from "./route-module-annotations";
+
+import type { Params } from "./params";
+import type { RouteFiles } from "./register";
+import type { GetLoaderData, GetActionData } from "./route-data";
+import type { RouteModule } from "./route-module.ts";
+
+export type GetInfo<T extends { file: keyof RouteFiles; module: RouteModule }> =
+  {
+    params: Params<T["file"]>;
+    loaderData: GetLoaderData<T["module"]>;
+    actionData: GetActionData<T["module"]>;
+  };

packages/react-router/lib/types/internal.ts

@@ -1,65 +1,6 @@
-import type { Register } from "./register";
+import type { Pages, RouteFiles } from "./register";
 import type { Normalize } from "./utils";
 
-type AnyRoutes = Record<
-  string,
-  {
-    parentId?: string;
-    path?: string;
-    index?: boolean;
-    file: string;
-    params: Record<string, string | undefined>;
-  }
+export type Params<RouteFile extends keyof RouteFiles> = Normalize<
+  Pages[RouteFiles[RouteFile]["page"]]["params"]
 >;
-type RoutesPre = Register extends {
-  routesPre: infer RegisteredRoutes extends AnyRoutes;
-}
-  ? RegisteredRoutes
-  : AnyRoutes;
-
-type RouteId = keyof RoutesPre;
-
-// prettier-ignore
-type GetParents<Id extends RouteId> =
-  RoutesPre[Id] extends { parentId: infer P extends RouteId } ?
-    [...GetParents<P>, P] :
-    [];
-
-// prettier-ignore
-type _GetChildren<Id extends RouteId> = {
-  [K in RouteId]: RoutesPre[K] extends { parentId : Id } ?
-    RoutesPre[K] extends { index: true } ? [K] :
-    RoutesPre[K] extends { path: undefined } ? [K, ...GetChildren<K>] :
-    [K] | [K, ...GetChildren<K>]
-  :
-  []
-}[RouteId]
-
-type GetChildren<Id extends RouteId> = _GetChildren<Id> extends []
-  ? []
-  : Exclude<_GetChildren<Id>, []>;
-
-type GetBranch<Id extends RouteId> = [
-  ...GetParents<Id>,
-  Id,
-  ...(RoutesPre[Id] extends { path: undefined }
-    ? GetChildren<Id>
-    : _GetChildren<Id>)
-];
-
-type Branches = {
-  [Id in RouteId]: GetBranch<Id>;
-};
-
-type PartialParams = {
-  [Id in RouteId]: RoutesPre[Id]["params"];
-};
-type BranchParams<Branch extends Array<RouteId>> = Branch extends [
-  infer Id extends RouteId,
-  ...infer Ids extends Array<RouteId>
-]
-  ? PartialParams[Id] & BranchParams<Ids>
-  : {};
-export type Params = {
-  [Id in RouteId]: Normalize<BranchParams<Branches[Id]>>;
-};

packages/react-router/lib/types/params.ts

@@ -5,5 +5,23 @@
  * For more on declaration merging and module augmentation, see https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation .
  */
 export interface Register {
-  // params
+  // pages
+  // routeFiles
 }
+
+// pages
+type AnyParams = Record<string, string | undefined>;
+type AnyPages = Record<string, { params: AnyParams }>;
+export type Pages = Register extends {
+  pages: infer Registered extends AnyPages;
+}
+  ? Registered
+  : AnyPages;
+
+// route files
+type AnyRouteFiles = Record<string, { id: string; page: string }>;
+export type RouteFiles = Register extends {
+  routeFiles: infer Registered extends AnyRouteFiles;
+}
+  ? Registered
+  : AnyRouteFiles;

packages/react-router/lib/types/register.ts

@@ -4,6 +4,7 @@ import type {
 } from "../dom/ssr/routeModules";
 import type { DataWithResponseInit } from "../router/utils";
 import type { Serializable } from "../server-runtime/single-fetch";
+import type { RouteModule } from "./route-module";
 import type { unstable_SerializesTo } from "./serializes-to";
 import type { Equal, Expect, Func, IsAny, Pretty } from "./utils";
 
@@ -67,7 +68,50 @@ export type SerializeFrom<T> = T extends (...args: infer Args) => unknown
     : ServerDataFrom<T>
   : T;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
+
+// prettier-ignore
+type IsHydrate<ClientLoader> =
+  ClientLoader extends { hydrate: true } ? true :
+  ClientLoader extends { hydrate: false } ? false :
+  false
+
+export type GetLoaderData<T extends RouteModule> = _DataLoaderData<
+  ServerDataFrom<T["loader"]>,
+  ClientDataFrom<T["clientLoader"]>,
+  IsHydrate<T["clientLoader"]>,
+  T extends { HydrateFallback: Func } ? true : false
+>;
+
+// prettier-ignore
+type _DataLoaderData<
+  ServerLoaderData,
+  ClientLoaderData,
+  ClientLoaderHydrate extends boolean,
+  HasHydrateFallback
+> =
+  [HasHydrateFallback, ClientLoaderHydrate] extends [true, true] ?
+    IsDefined<ClientLoaderData> extends true ? ClientLoaderData :
+    undefined
+  :
+  [IsDefined<ClientLoaderData>, IsDefined<ServerLoaderData>] extends [true, true] ? ServerLoaderData | ClientLoaderData :
+  IsDefined<ClientLoaderData> extends true ? ClientLoaderData :
+  IsDefined<ServerLoaderData> extends true ? ServerLoaderData :
+  undefined
+
+export type GetActionData<T extends RouteModule> = _DataActionData<
+  ServerDataFrom<T["action"]>,
+  ClientDataFrom<T["clientAction"]>
+>;
+
+// prettier-ignore
+type _DataActionData<ServerActionData, ClientActionData> = Awaited<
+  [IsDefined<ServerActionData>, IsDefined<ClientActionData>] extends [true, true] ? ServerActionData | ClientActionData :
+  IsDefined<ClientActionData> extends true ? ClientActionData :
+  IsDefined<ServerActionData> extends true ? ServerActionData :
+  undefined
+>
+
 type __tests = [
   // ServerDataFrom
   Expect<Equal<ServerDataFrom<any>, undefined>>,
@@ -130,5 +174,98 @@ type __tests = [
       | { data: string; b: Date; c: () => boolean }
     >
   >,
-  Expect<Equal<ClientDataFrom<() => { a: string } | Response>, { a: string }>>
+  Expect<Equal<ClientDataFrom<() => { a: string } | Response>, { a: string }>>,
+
+  // GetLoaderData
+  Expect<Equal<GetLoaderData<{}>, undefined>>,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: undefined }
+    >
+  >,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        clientLoader: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: () => { d: string; e: Date; f: () => boolean };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: () => { d: string; e: Date; f: () => boolean };
+        HydrateFallback: () => unknown;
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: (() => { d: string; e: Date; f: () => boolean }) & {
+          hydrate: true;
+        };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      GetLoaderData<{
+        loader: () => { a: string; b: Date; c: () => boolean };
+        clientLoader: (() => { d: string; e: Date; f: () => boolean }) & {
+          hydrate: true;
+        };
+        HydrateFallback: () => unknown;
+      }>,
+      { d: string; e: Date; f: () => boolean }
+    >
+  >,
+
+  // ActionData
+  Expect<Equal<GetActionData<{}>, undefined>>,
+  Expect<
+    Equal<
+      GetActionData<{
+        action: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: undefined }
+    >
+  >,
+  Expect<
+    Equal<
+      GetActionData<{
+        clientAction: () => { a: string; b: Date; c: () => boolean };
+      }>,
+      { a: string; b: Date; c: () => boolean }
+    >
+  >,
+  Expect<
+    Equal<
+      GetActionData<{
+        action: () => { a: string; b: Date; c: () => boolean };
+        clientAction: () => { d: string; e: Date; f: () => boolean };
+      }>,
+      | { a: string; b: Date; c: undefined }
+      | { d: string; e: Date; f: () => boolean }
+    >
+  >
 ];