@react-router/dev 7.2.0-pre.0 → 7.2.0-pre.1

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # `@react-router/dev`
 
+## 7.2.0-pre.1
+
+### Minor Changes
+
+- New type-safe `href` utility that guarantees links point to actual paths in your app ([#13012](https://github.com/remix-run/react-router/pull/13012))
+
+  ```tsx
+  import { href } from "react-router";
+
+  export default function Component() {
+    const link = href("/blog/:slug", { slug: "my-first-post" });
+    return (
+      <main>
+        <Link to={href("/products/:id", { id: "asdf" })} />
+        <NavLink to={href("/:lang?/about", { lang: "en" })} />
+      </main>
+    );
+  }
+  ```
+
+### Patch Changes
+
+- Fix typegen for repeated params ([#13012](https://github.com/remix-run/react-router/pull/13012))
+
+  In React Router, path parameters are keyed by their name.
+  So for a path pattern like `/a/:id/b/:id?/c/:id`, the last `:id` will set the value for `id` in `useParams` and the `params` prop.
+  For example, `/a/1/b/2/c/3` will result in the value `{ id: 3 }` at runtime.
+
+  Previously, generated types for params incorrectly modeled repeated params with an array.
+  So `/a/1/b/2/c/3` generated a type like `{ id: [1,2,3] }`.
+
+  To be consistent with runtime behavior, the generated types now correctly model the "last one wins" semantics of path parameters.
+  So `/a/1/b/2/c/3` now generates a type like `{ id: 3 }`.
+
+- Fix `ArgError: unknown or unexpected option: --version` when running `react-router --version` ([#13012](https://github.com/remix-run/react-router/pull/13012))
+- Updated dependencies:
+  - `react-router@7.2.0-pre.1`
+  - `@react-router/node@7.2.0-pre.1`
+  - `@react-router/serve@7.2.0-pre.1`
+
 ## 7.2.0-pre.0
 
 ### Minor Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.2.0-pre.0
+ * @react-router/dev v7.2.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -636,6 +636,25 @@ var init_profiler = __esm({
   }
 });
 
+// vite/babel.ts
+var babel_exports = {};
+__export(babel_exports, {
+  generate: () => generate,
+  parse: () => import_parser.parse,
+  t: () => t,
+  traverse: () => traverse
+});
+var import_parser, t, traverse, generate;
+var init_babel = __esm({
+  "vite/babel.ts"() {
+    "use strict";
+    import_parser = require("@babel/parser");
+    t = __toESM(require("@babel/types"));
+    traverse = require("@babel/traverse").default;
+    generate = require("@babel/generator").default;
+  }
+});
+
 // typegen/paths.ts
 function getTypesDir(ctx) {
   return Path2.join(ctx.rootDirectory, ".react-router/types");
@@ -657,12 +676,55 @@ var init_paths = __esm({
   }
 });
 
+// typegen/params.ts
+function parse2(fullpath2) {
+  const result = {};
+  let segments = fullpath2.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isRequired = match[2] === void 0;
+    result[param] ||= isRequired;
+    return;
+  });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = true;
+  return result;
+}
+var init_params = __esm({
+  "typegen/params.ts"() {
+    "use strict";
+  }
+});
+
+// typegen/route.ts
+function lineage(routes2, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes2[route.parentId];
+  }
+  result.reverse();
+  return result;
+}
+function fullpath(lineage2) {
+  if (lineage2.length === 1 && lineage2[0].id === "root") return "/";
+  return "/" + lineage2.map((route) => route.path?.replace(/^\//, "")?.replace(/\/$/, "")).filter((path9) => path9 !== void 0 && path9 !== "").join("/");
+}
+var init_route = __esm({
+  "typegen/route.ts"() {
+    "use strict";
+  }
+});
+
 // typegen/generate.ts
-function generate(ctx, route) {
-  const lineage = getRouteLineage(ctx.config.routes, route);
-  const urlpath = lineage.map((route2) => route2.path).join("/");
+function generate2(ctx, route) {
+  const lineage2 = lineage(ctx.config.routes, route);
+  const fullpath2 = fullpath(lineage2);
   const typesPath = getTypesPath(ctx, route);
-  const parents = lineage.slice(0, -1);
+  const parents = lineage2.slice(0, -1);
   const parentTypeImports = parents.map((parent, i) => {
     const rel = Path3.relative(
       Path3.dirname(typesPath),
@@ -689,7 +751,7 @@ function generate(ctx, route) {
       file: "${route.file}"
       path: "${route.path}"
       params: {${formatParamProperties(
-    urlpath
+    fullpath2
   )}} & { [key: string]: string | undefined }
       module: Module
       loaderData: T.CreateLoaderData<Module>
@@ -718,46 +780,13 @@ function generate(ctx, route) {
     }
   `;
 }
-function getRouteLineage(routes2, route) {
-  const result = [];
-  while (route) {
-    result.push(route);
-    if (!route.parentId) break;
-    route = routes2[route.parentId];
-  }
-  result.reverse();
-  return result;
-}
-function formatParamProperties(urlpath) {
-  const params = parseParams(urlpath);
-  const properties = Object.entries(params).map(([name, values]) => {
-    if (values.length === 1) {
-      const isOptional = values[0];
-      return isOptional ? `"${name}"?: string` : `"${name}": string`;
-    }
-    const items = values.map(
-      (isOptional) => isOptional ? "string | undefined" : "string"
-    );
-    return `"${name}": [${items.join(", ")}]`;
-  });
+function formatParamProperties(fullpath2) {
+  const params = parse2(fullpath2);
+  const properties = Object.entries(params).map(
+    ([name, isRequired]) => isRequired ? `"${name}": string` : `"${name}"?: string`
+  );
   return properties.join("; ");
 }
-function parseParams(urlpath) {
-  const result = {};
-  let segments = urlpath.split("/");
-  segments.forEach((segment) => {
-    const match = segment.match(/^:([\w-]+)(\?)?/);
-    if (!match) return;
-    const param = match[1];
-    const isOptional = match[2] !== void 0;
-    result[param] ??= [];
-    result[param].push(isOptional);
-    return;
-  });
-  const hasSplat = segments.at(-1) === "*";
-  if (hasSplat) result["*"] = [false];
-  return result;
-}
 var import_dedent, Path3, Pathe2, noExtension;
 var init_generate = __esm({
   "typegen/generate.ts"() {
@@ -766,6 +795,8 @@ var init_generate = __esm({
     Path3 = __toESM(require("pathe"));
     Pathe2 = __toESM(require("pathe/utils"));
     init_paths();
+    init_params();
+    init_route();
     noExtension = (path9) => Path3.join(Path3.dirname(path9), Pathe2.filename(path9));
   }
 });
@@ -818,33 +849,67 @@ async function writeAll(ctx) {
   import_node_fs3.default.rmSync(typegenDir, { recursive: true, force: true });
   Object.values(ctx.config.routes).forEach((route) => {
     const typesPath = getTypesPath(ctx, route);
-    const content = generate(ctx, route);
+    const content = generate2(ctx, route);
     import_node_fs3.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
     import_node_fs3.default.writeFileSync(typesPath, content);
   });
+  const registerPath = Path4.join(typegenDir, "+register.ts");
+  import_node_fs3.default.writeFileSync(registerPath, register(ctx));
 }
-var import_node_fs3, Path4, import_picocolors3;
+function register(ctx) {
+  const register2 = import_dedent2.default`
+    import "react-router";
+
+    declare module "react-router" {
+      interface Register {
+        params: Params;
+      }
+    }
+  `;
+  const { t: t2 } = babel_exports;
+  const typeParams = t2.tsTypeAliasDeclaration(
+    t2.identifier("Params"),
+    null,
+    t2.tsTypeLiteral(
+      Object.values(ctx.config.routes).map((route) => {
+        if (route.id !== "root" && !route.path) return void 0;
+        const lineage2 = lineage(ctx.config.routes, route);
+        const fullpath2 = fullpath(lineage2);
+        const params = parse2(fullpath2);
+        return t2.tsPropertySignature(
+          t2.stringLiteral(fullpath2),
+          t2.tsTypeAnnotation(
+            t2.tsTypeLiteral(
+              Object.entries(params).map(([param, isRequired]) => {
+                const property = t2.tsPropertySignature(
+                  t2.stringLiteral(param),
+                  t2.tsTypeAnnotation(t2.tsStringKeyword())
+                );
+                property.optional = !isRequired;
+                return property;
+              })
+            )
+          )
+        );
+      }).filter((x) => x !== void 0)
+    )
+  );
+  return [register2, generate(typeParams).code].join("\n\n");
+}
+var import_node_fs3, import_dedent2, Path4, import_picocolors3;
 var init_typegen = __esm({
   "typegen/index.ts"() {
     "use strict";
     import_node_fs3 = __toESM(require("fs"));
+    import_dedent2 = __toESM(require("dedent"));
     Path4 = __toESM(require("pathe"));
     import_picocolors3 = __toESM(require("picocolors"));
     init_config();
+    init_babel();
     init_generate();
     init_paths();
-  }
-});
-
-// vite/babel.ts
-var import_parser, t, traverse, generate2;
-var init_babel = __esm({
-  "vite/babel.ts"() {
-    "use strict";
-    import_parser = require("@babel/parser");
-    t = __toESM(require("@babel/types"));
-    traverse = require("@babel/traverse").default;
-    generate2 = require("@babel/generator").default;
+    init_params();
+    init_route();
   }
 });
 
@@ -971,11 +1036,11 @@ var init_route_chunks = __esm({
 });
 
 // vite/with-props.ts
-var import_dedent2, vmod;
+var import_dedent3, vmod;
 var init_with_props = __esm({
   "vite/with-props.ts"() {
     "use strict";
-    import_dedent2 = __toESM(require("dedent"));
+    import_dedent3 = __toESM(require("dedent"));
     init_babel();
     init_virtual_module();
     vmod = create("with-props");
@@ -1993,7 +2058,7 @@ async function run2(argv = process.argv.slice(2)) {
     return;
   }
   if (flags.version) {
-    let version = require("../package.json").version;
+    let version = require("../../package.json").version;
     console.log(version);
     return;
   }

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.2.0-pre.0
+ * @react-router/dev v7.2.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.2.0-pre.0
+ * @react-router/dev v7.2.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.2.0-pre.0
+ * @react-router/dev v7.2.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.2.0-pre.0
+ * @react-router/dev v7.2.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -59,6 +59,7 @@ var import_kebabCase = __toESM(require("lodash/kebabCase"));
 
 // typegen/index.ts
 var import_node_fs2 = __toESM(require("fs"));
+var import_dedent2 = __toESM(require("dedent"));
 var Path4 = __toESM(require("pathe"));
 var import_picocolors2 = __toESM(require("picocolors"));
 
@@ -633,6 +634,19 @@ function findEntry(dir, basename2, options) {
   return void 0;
 }
 
+// vite/babel.ts
+var babel_exports = {};
+__export(babel_exports, {
+  generate: () => generate,
+  parse: () => import_parser.parse,
+  t: () => t,
+  traverse: () => traverse
+});
+var import_parser = require("@babel/parser");
+var t = __toESM(require("@babel/types"));
+var traverse = require("@babel/traverse").default;
+var generate = require("@babel/generator").default;
+
 // typegen/generate.ts
 var import_dedent = __toESM(require("dedent"));
 var Path3 = __toESM(require("pathe"));
@@ -653,12 +667,45 @@ function getTypesPath(ctx, route) {
   );
 }
 
+// typegen/params.ts
+function parse2(fullpath2) {
+  const result = {};
+  let segments = fullpath2.split("/");
+  segments.forEach((segment) => {
+    const match = segment.match(/^:([\w-]+)(\?)?/);
+    if (!match) return;
+    const param = match[1];
+    const isRequired = match[2] === void 0;
+    result[param] ||= isRequired;
+    return;
+  });
+  const hasSplat = segments.at(-1) === "*";
+  if (hasSplat) result["*"] = true;
+  return result;
+}
+
+// typegen/route.ts
+function lineage(routes, route) {
+  const result = [];
+  while (route) {
+    result.push(route);
+    if (!route.parentId) break;
+    route = routes[route.parentId];
+  }
+  result.reverse();
+  return result;
+}
+function fullpath(lineage2) {
+  if (lineage2.length === 1 && lineage2[0].id === "root") return "/";
+  return "/" + lineage2.map((route) => route.path?.replace(/^\//, "")?.replace(/\/$/, "")).filter((path7) => path7 !== void 0 && path7 !== "").join("/");
+}
+
 // typegen/generate.ts
-function generate(ctx, route) {
-  const lineage = getRouteLineage(ctx.config.routes, route);
-  const urlpath = lineage.map((route2) => route2.path).join("/");
+function generate2(ctx, route) {
+  const lineage2 = lineage(ctx.config.routes, route);
+  const fullpath2 = fullpath(lineage2);
   const typesPath = getTypesPath(ctx, route);
-  const parents = lineage.slice(0, -1);
+  const parents = lineage2.slice(0, -1);
   const parentTypeImports = parents.map((parent, i) => {
     const rel = Path3.relative(
       Path3.dirname(typesPath),
@@ -685,7 +732,7 @@ function generate(ctx, route) {
       file: "${route.file}"
       path: "${route.path}"
       params: {${formatParamProperties(
-    urlpath
+    fullpath2
   )}} & { [key: string]: string | undefined }
       module: Module
       loaderData: T.CreateLoaderData<Module>
@@ -715,46 +762,13 @@ function generate(ctx, route) {
   `;
 }
 var noExtension = (path7) => Path3.join(Path3.dirname(path7), Pathe2.filename(path7));
-function getRouteLineage(routes, route) {
-  const result = [];
-  while (route) {
-    result.push(route);
-    if (!route.parentId) break;
-    route = routes[route.parentId];
-  }
-  result.reverse();
-  return result;
-}
-function formatParamProperties(urlpath) {
-  const params = parseParams(urlpath);
-  const properties = Object.entries(params).map(([name, values]) => {
-    if (values.length === 1) {
-      const isOptional = values[0];
-      return isOptional ? `"${name}"?: string` : `"${name}": string`;
-    }
-    const items = values.map(
-      (isOptional) => isOptional ? "string | undefined" : "string"
-    );
-    return `"${name}": [${items.join(", ")}]`;
-  });
+function formatParamProperties(fullpath2) {
+  const params = parse2(fullpath2);
+  const properties = Object.entries(params).map(
+    ([name, isRequired]) => isRequired ? `"${name}": string` : `"${name}"?: string`
+  );
   return properties.join("; ");
 }
-function parseParams(urlpath) {
-  const result = {};
-  let segments = urlpath.split("/");
-  segments.forEach((segment) => {
-    const match = segment.match(/^:([\w-]+)(\?)?/);
-    if (!match) return;
-    const param = match[1];
-    const isOptional = match[2] !== void 0;
-    result[param] ??= [];
-    result[param].push(isOptional);
-    return;
-  });
-  const hasSplat = segments.at(-1) === "*";
-  if (hasSplat) result["*"] = [false];
-  return result;
-}
 
 // typegen/index.ts
 async function watch(rootDirectory, { logger } = {}) {
@@ -800,17 +814,53 @@ async function writeAll(ctx) {
   import_node_fs2.default.rmSync(typegenDir, { recursive: true, force: true });
   Object.values(ctx.config.routes).forEach((route) => {
     const typesPath = getTypesPath(ctx, route);
-    const content = generate(ctx, route);
+    const content = generate2(ctx, route);
     import_node_fs2.default.mkdirSync(Path4.dirname(typesPath), { recursive: true });
     import_node_fs2.default.writeFileSync(typesPath, content);
   });
+  const registerPath = Path4.join(typegenDir, "+register.ts");
+  import_node_fs2.default.writeFileSync(registerPath, register(ctx));
 }
+function register(ctx) {
+  const register2 = import_dedent2.default`
+    import "react-router";
 
-// vite/babel.ts
-var import_parser = require("@babel/parser");
-var t = __toESM(require("@babel/types"));
-var traverse = require("@babel/traverse").default;
-var generate2 = require("@babel/generator").default;
+    declare module "react-router" {
+      interface Register {
+        params: Params;
+      }
+    }
+  `;
+  const { t: t2 } = babel_exports;
+  const typeParams = t2.tsTypeAliasDeclaration(
+    t2.identifier("Params"),
+    null,
+    t2.tsTypeLiteral(
+      Object.values(ctx.config.routes).map((route) => {
+        if (route.id !== "root" && !route.path) return void 0;
+        const lineage2 = lineage(ctx.config.routes, route);
+        const fullpath2 = fullpath(lineage2);
+        const params = parse2(fullpath2);
+        return t2.tsPropertySignature(
+          t2.stringLiteral(fullpath2),
+          t2.tsTypeAnnotation(
+            t2.tsTypeLiteral(
+              Object.entries(params).map(([param, isRequired]) => {
+                const property = t2.tsPropertySignature(
+                  t2.stringLiteral(param),
+                  t2.tsTypeAnnotation(t2.tsStringKeyword())
+                );
+                property.optional = !isRequired;
+                return property;
+              })
+            )
+          )
+        );
+      }).filter((x) => x !== void 0)
+    )
+  );
+  return [register2, generate(typeParams).code].join("\n\n");
+}
 
 // vite/node-adapter.ts
 var import_node_events = require("events");
@@ -1598,7 +1648,7 @@ function getChunkedExport(code, exportName, generateOptions = {}, cache, cacheKe
         }
         throw new Error(`Unknown export node type: ${node.type}`);
       }).filter((node) => node !== null);
-      return generate2(ast, generateOptions);
+      return generate(ast, generateOptions);
     }
   );
 }
@@ -1714,7 +1764,7 @@ function omitChunkedExports(code, exportNames, generateOptions = {}, cache, cach
       if (ast.program.body.length === 0) {
         return void 0;
       }
-      return generate2(ast, generateOptions);
+      return generate(ast, generateOptions);
     }
   );
 }
@@ -1776,7 +1826,7 @@ function getRouteChunkNameFromModuleId(id) {
 }
 
 // vite/with-props.ts
-var import_dedent2 = __toESM(require("dedent"));
+var import_dedent3 = __toESM(require("dedent"));
 var vmod = create("with-props");
 var NAMED_COMPONENT_EXPORTS = ["HydrateFallback", "ErrorBoundary"];
 var plugin = {
@@ -1787,7 +1837,7 @@ var plugin = {
   },
   async load(id) {
     if (id !== vmod.resolvedId) return;
-    return import_dedent2.default`
+    return import_dedent3.default`
       import { createElement as h } from "react";
       import { useActionData, useLoaderData, useMatches, useParams, useRouteError } from "react-router";
 
@@ -3086,7 +3136,7 @@ var reactRouterVitePlugin = () => {
           removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
         }
         transform(ast);
-        return generate2(ast, {
+        return generate(ast, {
           sourceMaps: true,
           filename: id,
           sourceFileName: filepath

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.2.0-pre.0",
+  "version": "7.2.0-pre.1",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -88,7 +88,7 @@
     "set-cookie-parser": "^2.6.0",
     "valibot": "^0.41.0",
     "vite-node": "3.0.0-beta.2",
-    "@react-router/node": "7.2.0-pre.0"
+    "@react-router/node": "7.2.0-pre.1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -117,15 +117,15 @@
     "vite": "^6.0.0",
     "wireit": "0.14.9",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "7.2.0-pre.0",
-    "react-router": "^7.2.0-pre.0"
+    "@react-router/serve": "7.2.0-pre.1",
+    "react-router": "^7.2.0-pre.1"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0",
     "wrangler": "^3.28.2",
-    "@react-router/serve": "^7.2.0-pre.0",
-    "react-router": "^7.2.0-pre.0"
+    "@react-router/serve": "^7.2.0-pre.1",
+    "react-router": "^7.2.0-pre.1"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {