typegen: dynamic segments with dot (#12246)

* test that dynamic params only match `(\w-)+`

* fix PathParams to match `(\w+)` and add type tests

* typegen: fix param detection

* internal: configure wireit for typegen/ dir

* refactor typegen tests to use react-router style path patterns

instead of solely relying on flat routes for everything

Author: pcattori

integration/typegen-test.ts

@@ -30,14 +30,25 @@ const viteConfig = tsx`
   };
 `;
 
+const assertType = tsx`
+  export function assertType<T>(t: T) {}
+`;
+
 test.describe("typegen", () => {
   test("basic", async () => {
     const cwd = await createProject({
       "vite.config.ts": viteConfig,
-      "app/routes/products.$id.tsx": tsx`
-        import type { Route } from "./+types.products.$id"
+      "app/assertType.ts": assertType,
+      "app/routes.ts": tsx`
+        import { type RouteConfig, route } from "@react-router/dev/routes";
 
-        function assertType<T>(t: T) {}
+        export const routes: RouteConfig = [
+          route("products/:id", "routes/product.tsx")
+        ]
+      `,
+      "app/routes/product.tsx": tsx`
+        import { assertType } from "../assertType"
+        import type { Route } from "./+types.product"
 
         export function loader({ params }: Route.LoaderArgs) {
           assertType<string>(params.id)
@@ -61,10 +72,17 @@ test.describe("typegen", () => {
     test("repeated", async () => {
       const cwd = await createProject({
         "vite.config.ts": viteConfig,
-        "app/routes/repeated.$id.($id).$id.tsx": tsx`
-          import type { Route } from "./+types.repeated.$id.($id).$id"
+        "app/assertType.ts": assertType,
+        "app/routes.ts": tsx`
+          import { type RouteConfig, route } from "@react-router/dev/routes";
 
-          function assertType<T>(t: T) {}
+          export const routes: RouteConfig = [
+            route("repeated-params/:id/:id?/:id", "routes/repeated-params.tsx")
+          ]
+        `,
+        "app/routes/repeated-params.tsx": tsx`
+          import { assertType } from "../assertType"
+          import type { Route } from "./+types.repeated-params"
 
           export function loader({ params }: Route.LoaderArgs) {
             assertType<[string, string | undefined, string]>(params.id)
@@ -81,10 +99,17 @@ test.describe("typegen", () => {
     test("splat", async () => {
       const cwd = await createProject({
         "vite.config.ts": viteConfig,
-        "app/routes/splat.$.tsx": tsx`
-          import type { Route } from "./+types.splat.$"
+        "app/assertType.ts": assertType,
+        "app/routes.ts": tsx`
+          import { type RouteConfig, route } from "@react-router/dev/routes";
 
-          function assertType<T>(t: T) {}
+          export const routes: RouteConfig = [
+            route("splat/*", "routes/splat.tsx")
+          ]
+        `,
+        "app/routes/splat.tsx": tsx`
+          import { assertType } from "../assertType"
+          import type { Route } from "./+types.splat"
 
           export function loader({ params }: Route.LoaderArgs) {
             assertType<string>(params["*"])
@@ -97,16 +122,53 @@ test.describe("typegen", () => {
       expect(proc.stderr.toString()).toBe("");
       expect(proc.status).toBe(0);
     });
+
+    test("with extension", async () => {
+      const cwd = await createProject({
+        "vite.config.ts": viteConfig,
+        "app/assertType.ts": assertType,
+        "app/routes.ts": tsx`
+          import { type RouteConfig, route } from "@react-router/dev/routes";
+
+          export const routes: RouteConfig = [
+            route(":lang.xml", "routes/param-with-ext.tsx"),
+            route(":user?.pdf", "routes/optional-param-with-ext.tsx"),
+          ]
+        `,
+        "app/routes/param-with-ext.tsx": tsx`
+          import { assertType } from "../assertType"
+          import type { Route } from "./+types.param-with-ext"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            assertType<string>(params["lang"])
+            return null
+          }
+        `,
+        "app/routes/optional-param-with-ext.tsx": tsx`
+          import { assertType } from "../assertType"
+          import type { Route } from "./+types.optional-param-with-ext"
+
+          export function loader({ params }: Route.LoaderArgs) {
+            assertType<string | undefined>(params["user"])
+            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 () => {
     const cwd = await createProject({
       "vite.config.ts": viteConfig,
+      "app/assertType.ts": assertType,
       "app/routes/_index.tsx": tsx`
+        import { assertType } from "../assertType"
         import type { Route } from "./+types._index"
 
-        function assertType<T>(t: T) {}
-
         export function loader() {
           return { server: "server" }
         }
@@ -141,11 +203,11 @@ test.describe("typegen", () => {
           plugins: [reactRouter({ appDirectory: "src/myapp" })],
         };
       `,
+      "app/assertType.ts": assertType,
       "app/routes/products.$id.tsx": tsx`
+        import { assertType } from "../assertType"
         import type { Route } from "./+types.products.$id"
 
-        function assertType<T>(t: T) {}
-
         export function loader({ params }: Route.LoaderArgs) {
           assertType<string>(params.id)
           return { planet: "world" }

packages/react-router-dev/package.json

@@ -39,7 +39,7 @@
       "files": [
         "cli/**",
         "config/**",
-        "typescript/**",
+        "typegen/**",
         "vite/**",
         "*.ts",
         "bin.js",

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

@@ -76,19 +76,16 @@ function parseParams(urlpath: string) {
   const result: Record<string, boolean[]> = {};
 
   let segments = urlpath.split("/");
-  segments
-    .filter((s) => s.startsWith(":"))
-    .forEach((param) => {
-      param = param.slice(1); // omit leading `:`
-      let isOptional = param.endsWith("?");
-      if (isOptional) {
-        param = param.slice(0, -1); // omit trailing `?`
-      }
-
-      result[param] ??= [];
-      result[param].push(isOptional);
-      return;
-    });
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isOptional = match[2] !== undefined;
+
+    result[param] ??= [];
+    result[param].push(isOptional);
+    return;
+  });
 
   const hasSplat = segments.at(-1) === "*";
   if (hasSplat) result["*"] = [false];

packages/react-router/__tests__/path-matching-test.tsx

@@ -1,5 +1,5 @@
 import type { RouteObject } from "react-router";
-import { matchRoutes } from "react-router";
+import { matchPath, matchRoutes } from "react-router";
 
 function pickPaths(routes: RouteObject[], pathname: string): string[] | null {
   let matches = matchRoutes(routes, pathname);
@@ -168,6 +168,24 @@ describe("path matching", () => {
       ]
     `);
   });
+
+  test("dynamic segment params match word with dashes `(\\w-)+`", () => {
+    expect(
+      matchPath("/sitemap/:lang.xml", "/sitemap/blah.xml")?.params
+    ).toStrictEqual({ lang: "blah" });
+    expect(
+      matchPath("/sitemap/:lang.xml", "/sitemap/blah")?.params
+    ).toStrictEqual(undefined);
+    expect(
+      matchPath("/sitemap/:lang.:xml", "/sitemap/blah.:xml")?.params
+    ).toStrictEqual({ lang: "blah" });
+    expect(
+      matchPath("/sitemap/:lang.:xml", "/sitemap/blah.pdf")?.params
+    ).toStrictEqual(undefined);
+    expect(
+      matchPath("/sitemap/:lang?.xml", "/sitemap/.xml")?.params
+    ).toStrictEqual({ lang: undefined });
+  });
 });
 
 describe("path matching with a basename", () => {

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

@@ -1,3 +1,4 @@
+import type { Equal, Expect } from "../test-types";
 import type { Location, Path, To } from "./history";
 import { invariant, parsePath, warning } from "./history";
 
@@ -342,28 +343,39 @@ export type RouteManifest<R = AgnosticDataRouteObject> = Record<
   R | undefined
 >;
 
+// prettier-ignore
+type Regex_az = "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m" | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z"
+// prettier-ignore
+type Regez_AZ = "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M" | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z"
+type Regex_09 = "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9";
+type Regex_w = Regex_az | Regez_AZ | Regex_09 | "_";
+type ParamChar = Regex_w | "-";
+
+// Emulates regex `+`
+type RegexMatchPlus<
+  CharPattern extends string,
+  T extends string
+> = T extends `${infer First}${infer Rest}`
+  ? First extends CharPattern
+    ? RegexMatchPlus<CharPattern, Rest> extends never
+      ? First
+      : `${First}${RegexMatchPlus<CharPattern, Rest>}`
+    : never
+  : never;
+
 // Recursive helper for finding path parameters in the absence of wildcards
 type _PathParam<Path extends string> =
   // split path into individual path segments
   Path extends `${infer L}/${infer R}`
     ? _PathParam<L> | _PathParam<R>
     : // find params after `:`
     Path extends `:${infer Param}`
-    ? Param extends `${infer Optional}?`
-      ? Optional
-      : Param
+    ? Param extends `${infer Optional}?${string}`
+      ? RegexMatchPlus<ParamChar, Optional>
+      : RegexMatchPlus<ParamChar, Param>
     : // otherwise, there aren't any params present
       never;
 
-/**
- * Examples:
- * "/a/b/*" -> "*"
- * ":a" -> "a"
- * "/a/:b" -> "b"
- * "/a/blahblahblah:b" -> "b"
- * "/:a/:b" -> "a" | "b"
- * "/:a/b/:c/*" -> "a" | "c" | "*"
- */
 export type PathParam<Path extends string> =
   // check if path is just a wildcard
   Path extends "*" | "/*"
@@ -374,6 +386,18 @@ export type PathParam<Path extends string> =
     : // look for params in the absence of wildcards
       _PathParam<Path>;
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type _tests = [
+  Expect<Equal<PathParam<"/a/b/*">, "*">>,
+  Expect<Equal<PathParam<":a">, "a">>,
+  Expect<Equal<PathParam<"/a/:b">, "b">>,
+  Expect<Equal<PathParam<"/a/blahblahblah:b">, never>>,
+  Expect<Equal<PathParam<"/:a/:b">, "a" | "b">>,
+  Expect<Equal<PathParam<"/:a/b/:c/*">, "a" | "c" | "*">>,
+  Expect<Equal<PathParam<"/:lang.xml">, "lang">>,
+  Expect<Equal<PathParam<"/:lang?.xml">, "lang">>
+];
+
 // Attempt to parse the given string segment. If it fails, then just return the
 // plain string type as a default fallback. Otherwise, return the union of the
 // parsed string literals that were referenced as dynamic segments in the route.

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

@@ -0,0 +1,6 @@
+export type Expect<T extends true> = T;
+
+// prettier-ignore
+export type Equal<X, Y> =
+  (<T>() => T extends X ? 1 : 2) extends
+  (<T>() => T extends Y ? 1 : 2) ? true : false

packages/react-router/lib/types.ts

@@ -5,12 +5,8 @@ import type {
 import type { DataWithResponseInit } from "./router/utils";
 import type { AppLoadContext } from "./server-runtime/data";
 import type { Serializable } from "./server-runtime/single-fetch";
+import type { Equal, Expect } from "./test-types";
 
-export type Expect<T extends true> = T;
-// prettier-ignore
-type Equal<X, Y> =
-  (<T>() => T extends X ? 1 : 2) extends
-  (<T>() => T extends Y ? 1 : 2) ? true : false
 type IsAny<T> = 0 extends 1 & T ? true : false;
 type IsDefined<T> = Equal<T, undefined> extends true ? false : true;
 type Fn = (...args: any[]) => unknown;