wip

Author: pcattori

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

@@ -1,14 +1,17 @@
 import fs from "node:fs";
 
+import ts from "dedent";
 import * as Path from "pathe";
 import pc from "picocolors";
 import type vite from "vite";
 
 import { createConfigLoader } from "../config/config";
+import * as Babel from "../vite/babel";
 
 import { generate } from "./generate";
 import type { Context } from "./context";
 import { getTypesDir, getTypesPath } from "./paths";
+import type { RouteManifest, RouteManifestEntry } from "../config/routes";
 
 export async function run(rootDirectory: string) {
   const ctx = await createContext({ rootDirectory, watch: false });
@@ -81,4 +84,80 @@ async function writeAll(ctx: Context): Promise<void> {
     fs.mkdirSync(Path.dirname(typesPath), { recursive: true });
     fs.writeFileSync(typesPath, content);
   });
+
+  const registerPath = Path.join(typegenDir, "+register.ts");
+  fs.writeFileSync(registerPath, register(ctx));
+}
+
+function register(ctx: Context) {
+  const register = ts`
+    import "react-router";
+
+    declare module "react-router" {
+      interface Register {
+        params: Params;
+      }
+    }
+  `;
+
+  const { t } = Babel;
+  const typeParams = t.tsTypeAliasDeclaration(
+    t.identifier("Params"),
+    null,
+    t.tsTypeLiteral(
+      Object.values(ctx.config.routes).map((route) => {
+        // TODO: filter out layout (pathless) routes?
+        const lineage = getRouteLineage(ctx.config.routes, route);
+        const fullpath = lineage.map((route) => route.path).join("/");
+        const params = parseParams(fullpath);
+        return t.tsPropertySignature(
+          t.stringLiteral(fullpath),
+          t.tsTypeAnnotation(
+            t.tsTypeLiteral(
+              Object.entries(params).map(([param, isRequired]) => {
+                const property = t.tsPropertySignature(
+                  t.stringLiteral(param),
+                  t.tsTypeAnnotation(t.tsStringKeyword())
+                );
+                property.optional = !isRequired;
+                return property;
+              })
+            )
+          )
+        );
+      })
+    )
+  );
+
+  return [register, Babel.generate(typeParams).code].join("\n\n");
+}
+
+function parseParams(fullpath: string) {
+  const result: Record<string, boolean> = {};
+
+  let segments = fullpath.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isRequired = match[2] === undefined;
+
+    result[param] ||= isRequired;
+    return;
+  });
+
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = true;
+  return result;
+}
+
+function getRouteLineage(routes: RouteManifest, route: RouteManifestEntry) {
+  const result: RouteManifestEntry[] = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes[route.parentId];
+  }
+  result.reverse();
+  return result;
 }

packages/react-router/index.ts

@@ -59,6 +59,7 @@ export {
 export {
   data,
   generatePath,
+  href,
   isRouteErrorResponse,
   matchPath,
   matchRoutes,
@@ -263,6 +264,8 @@ export type {
   FlashSessionData,
 } from "./lib/server-runtime/sessions";
 
+export type { Register } from "./lib/types/register";
+
 ///////////////////////////////////////////////////////////////////////////////
 // DANGER! PLEASE READ ME!
 // We provide these exports as an escape hatch in the event that you need any

packages/react-router/lib/router/utils.ts

@@ -1,3 +1,4 @@
+import type { Register } from "../types/register";
 import type { Equal, Expect } from "../types/utils";
 import type { Location, Path, To } from "./history";
 import { invariant, parsePath, warning } from "./history";
@@ -1471,3 +1472,24 @@ export function isRouteErrorResponse(error: any): error is ErrorResponse {
     "data" in error
   );
 }
+
+type AnyParams = Record<string, Record<string, string | undefined>>;
+type HrefParams = Register extends {
+  params: infer TParams extends AnyParams;
+}
+  ? TParams
+  : AnyParams;
+
+type HrefArgs = {
+  [K in keyof HrefParams]:
+    | [HrefParams[K]]
+    | (Partial<HrefParams[K]> extends HrefParams[K] ? [] : never);
+};
+
+export function href<Path extends keyof HrefArgs>(
+  path: Path,
+  ...args: HrefArgs[Path]
+): string {
+  // TODO: implement this
+  return "";
+}

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

@@ -0,0 +1 @@
+export interface Register {}