@react-router/dev 7.6.1 → 7.6.2

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # `@react-router/dev`
 
+## 7.6.2
+
+### Patch Changes
+
+- Avoid additional `with-props` chunk in Framework Mode by moving route module component prop logic from the Vite plugin to `react-router` ([#13650](https://github.com/remix-run/react-router/pull/13650))
+
+- When `future.unstable_viteEnvironmentApi` is enabled and an absolute Vite `base` has been configured, ensure critical CSS is handled correctly during development ([#13598](https://github.com/remix-run/react-router/pull/13598))
+
+- Update `vite-node` ([#13673](https://github.com/remix-run/react-router/pull/13673))
+
+- Fix typegen for non-{.js,.jsx,.ts,.tsx} routes like .mdx ([#12453](https://github.com/remix-run/react-router/pull/12453))
+
+- Fix href types for optional dynamic params ([#13725](https://github.com/remix-run/react-router/pull/13725))
+
+  7.6.1 introduced fixes for `href` when using optional static segments,
+  but those fixes caused regressions with how optional dynamic params worked in 7.6.0:
+
+  ```ts
+  // 7.6.0
+  href("/users/:id?"); // ✅
+  href("/users/:id?", { id: 1 }); // ✅
+
+  // 7.6.1
+  href("/users/:id?"); // ❌
+  href("/users/:id?", { id: 1 }); // ❌
+  ```
+
+  Now, optional static segments are expanded into different paths for `href`, but optional dynamic params are not.
+  This way `href` can unambiguously refer to an exact URL path, all while keeping the number of path options to a minimum.
+
+  ```ts
+  // 7.6.2
+
+  // path: /users/:id?/edit?
+  href("
+  //    ^ suggestions when cursor is here:
+  //
+  //    /users/:id?
+  //    /users/:id?/edit
+  ```
+
+  Additionally, you can pass `params` from component props without needing to narrow them manually:
+
+  ```ts
+  declare const params: { id?: number };
+
+  // 7.6.0
+  href("/users/:id?", params);
+
+  // 7.6.1
+  href("/users/:id?", params); // ❌
+  "id" in params ? href("/users/:id", params) : href("/users"); // works... but is annoying
+
+  // 7.6.2
+  href("/users/:id?", params); // restores behavior of 7.6.0
+  ```
+
+- Updated dependencies:
+  - `react-router@7.6.2`
+  - `@react-router/node@7.6.2`
+  - `@react-router/serve@7.6.2`
+
 ## 7.6.1
 
 ### Patch Changes

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.6.1
+ * @react-router/dev v7.6.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -928,7 +928,7 @@ function generateRoutes(ctx) {
     lineages.set(route.id, lineage2);
     const fullpath2 = fullpath(lineage2);
     if (!fullpath2) continue;
-    const pages = explodeOptionalSegments(fullpath2);
+    const pages = expand(fullpath2);
     pages.forEach((page) => allPages.add(page));
     lineage2.forEach(({ id }) => {
       let routePages = routeToPages.get(id);
@@ -1136,9 +1136,13 @@ function getRouteAnnotations({
 }
 function relativeImportSource(from, to) {
   let path8 = Path3.relative(Path3.dirname(from), to);
+  let extension = Path3.extname(path8);
   path8 = Path3.join(Path3.dirname(path8), Pathe.filename(path8));
   if (!path8.startsWith("../")) path8 = "./" + path8;
-  return path8 + ".js";
+  if (!extension || /\.(js|ts)x?$/.test(extension)) {
+    extension = ".js";
+  }
+  return path8 + extension;
 }
 function rootDirsPath(ctx, typesPath) {
   const rel = Path3.relative(typesDirectory(ctx), typesPath);
@@ -1157,28 +1161,27 @@ function paramsType(path8) {
     })
   );
 }
-function explodeOptionalSegments(path8) {
-  let segments = path8.split("/");
-  if (segments.length === 0) return [];
-  let [first, ...rest] = segments;
-  let isOptional = first.endsWith("?");
-  let required = first.replace(/\?$/, "");
-  if (rest.length === 0) {
-    return isOptional ? [required, ""] : [required];
-  }
-  let restExploded = explodeOptionalSegments(rest.join("/"));
-  let result = [];
-  result.push(
-    ...restExploded.map(
-      (subpath) => subpath === "" ? required : [required, subpath].join("/")
-    )
-  );
-  if (isOptional) {
-    result.push(...restExploded);
-  }
-  return result.map(
-    (exploded) => path8.startsWith("/") && exploded === "" ? "/" : exploded
-  );
+function expand(fullpath2) {
+  function recurse(segments2, index) {
+    if (index === segments2.length) return [""];
+    const segment = segments2[index];
+    const isOptional = segment.endsWith("?");
+    const isDynamic = segment.startsWith(":");
+    const required = segment.replace(/\?$/, "");
+    const keep = !isOptional || isDynamic;
+    const kept = isDynamic ? segment : required;
+    const withoutSegment = recurse(segments2, index + 1);
+    const withSegment = withoutSegment.map((rest) => [kept, rest].join("/"));
+    if (keep) return withSegment;
+    return [...withoutSegment, ...withSegment];
+  }
+  const segments = fullpath2.split("/");
+  const expanded = /* @__PURE__ */ new Set();
+  for (let result of recurse(segments, 0)) {
+    if (result !== "/") result = result.replace(/\/$/, "");
+    expanded.add(result);
+  }
+  return expanded;
 }
 var import_dedent, Path3, Pathe, t2;
 var init_generate = __esm({
@@ -1392,14 +1395,10 @@ var init_route_chunks = __esm({
 });
 
 // vite/with-props.ts
-var import_dedent2, vmod;
 var init_with_props = __esm({
   "vite/with-props.ts"() {
     "use strict";
-    import_dedent2 = __toESM(require("dedent"));
     init_babel();
-    init_virtual_module();
-    vmod = create("with-props");
   }
 });
 
@@ -1802,7 +1801,7 @@ async function viteAppBuild(root, {
         },
         configResolved(config) {
           let hasReactRouterPlugin = config.plugins.find(
-            (plugin2) => plugin2.name === "react-router"
+            (plugin) => plugin.name === "react-router"
           );
           if (!hasReactRouterPlugin) {
             throw new Error(
@@ -1941,7 +1940,7 @@ async function dev(root, {
     clearScreen,
     logLevel
   });
-  if (!server.config.plugins.find((plugin2) => plugin2.name === "react-router")) {
+  if (!server.config.plugins.find((plugin) => plugin.name === "react-router")) {
     console.error(
       import_picocolors6.default.red("React Router Vite plugin not found in Vite config")
     );

package/dist/config.js

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

package/dist/routes.js

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

package/dist/vite/cloudflare.js

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

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.6.1
+ * @react-router/dev v7.6.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -915,7 +915,7 @@ function generateRoutes(ctx) {
     lineages.set(route.id, lineage2);
     const fullpath2 = fullpath(lineage2);
     if (!fullpath2) continue;
-    const pages = explodeOptionalSegments(fullpath2);
+    const pages = expand(fullpath2);
     pages.forEach((page) => allPages.add(page));
     lineage2.forEach(({ id }) => {
       let routePages = routeToPages.get(id);
@@ -1123,9 +1123,13 @@ function getRouteAnnotations({
 }
 function relativeImportSource(from, to) {
   let path6 = Path3.relative(Path3.dirname(from), to);
+  let extension = Path3.extname(path6);
   path6 = Path3.join(Path3.dirname(path6), Pathe.filename(path6));
   if (!path6.startsWith("../")) path6 = "./" + path6;
-  return path6 + ".js";
+  if (!extension || /\.(js|ts)x?$/.test(extension)) {
+    extension = ".js";
+  }
+  return path6 + extension;
 }
 function rootDirsPath(ctx, typesPath) {
   const rel = Path3.relative(typesDirectory(ctx), typesPath);
@@ -1144,28 +1148,27 @@ function paramsType(path6) {
     })
   );
 }
-function explodeOptionalSegments(path6) {
-  let segments = path6.split("/");
-  if (segments.length === 0) return [];
-  let [first, ...rest] = segments;
-  let isOptional = first.endsWith("?");
-  let required = first.replace(/\?$/, "");
-  if (rest.length === 0) {
-    return isOptional ? [required, ""] : [required];
+function expand(fullpath2) {
+  function recurse(segments2, index) {
+    if (index === segments2.length) return [""];
+    const segment = segments2[index];
+    const isOptional = segment.endsWith("?");
+    const isDynamic = segment.startsWith(":");
+    const required = segment.replace(/\?$/, "");
+    const keep = !isOptional || isDynamic;
+    const kept = isDynamic ? segment : required;
+    const withoutSegment = recurse(segments2, index + 1);
+    const withSegment = withoutSegment.map((rest) => [kept, rest].join("/"));
+    if (keep) return withSegment;
+    return [...withoutSegment, ...withSegment];
   }
-  let restExploded = explodeOptionalSegments(rest.join("/"));
-  let result = [];
-  result.push(
-    ...restExploded.map(
-      (subpath) => subpath === "" ? required : [required, subpath].join("/")
-    )
-  );
-  if (isOptional) {
-    result.push(...restExploded);
+  const segments = fullpath2.split("/");
+  const expanded = /* @__PURE__ */ new Set();
+  for (let result of recurse(segments, 0)) {
+    if (result !== "/") result = result.replace(/\/$/, "");
+    expanded.add(result);
   }
-  return result.map(
-    (exploded) => path6.startsWith("/") && exploded === "" ? "/" : exploded
-  );
+  return expanded;
 }
 
 // typegen/index.ts
@@ -2207,59 +2210,11 @@ function getRouteChunkNameFromModuleId(id) {
 }
 
 // vite/with-props.ts
-var import_dedent2 = __toESM(require("dedent"));
-var vmod = create("with-props");
-var NAMED_COMPONENT_EXPORTS = ["HydrateFallback", "ErrorBoundary"];
-var plugin = {
-  name: "react-router-with-props",
-  enforce: "pre",
-  resolveId(id) {
-    if (id === vmod.id) return vmod.resolvedId;
-  },
-  async load(id) {
-    if (id !== vmod.resolvedId) return;
-    return import_dedent2.default`
-      import { createElement as h } from "react";
-      import { useActionData, useLoaderData, useMatches, useParams, useRouteError } from "react-router";
-
-      export function withComponentProps(Component) {
-        return function Wrapped() {
-          const props = {
-            params: useParams(),
-            loaderData: useLoaderData(),
-            actionData: useActionData(),
-            matches: useMatches(),
-          };
-          return h(Component, props);
-        };
-      }
-
-      export function withHydrateFallbackProps(HydrateFallback) {
-        return function Wrapped() {
-          const props = {
-            params: useParams(),
-            loaderData: useLoaderData(),
-            actionData: useActionData(),
-          };
-          return h(HydrateFallback, props);
-        };
-      }
-
-      export function withErrorBoundaryProps(ErrorBoundary) {
-        return function Wrapped() {
-          const props = {
-            params: useParams(),
-            loaderData: useLoaderData(),
-            actionData: useActionData(),
-            error: useRouteError(),
-          };
-          return h(ErrorBoundary, props);
-        };
-      }
-    `;
-  }
-};
-var transform = (ast) => {
+var namedComponentExports = ["HydrateFallback", "ErrorBoundary"];
+function isNamedComponentExport(name) {
+  return namedComponentExports.includes(name);
+}
+var decorateComponentExportsWithProps = (ast) => {
   const hocs = [];
   function getHocUid(path6, hocName) {
     const uid = path6.scope.generateUidIdentifier(hocName);
@@ -2272,7 +2227,7 @@ var transform = (ast) => {
         const declaration = path6.get("declaration");
         const expr = declaration.isExpression() ? declaration.node : declaration.isFunctionDeclaration() ? toFunctionExpression(declaration.node) : void 0;
         if (expr) {
-          const uid = getHocUid(path6, "withComponentProps");
+          const uid = getHocUid(path6, "UNSAFE_withComponentProps");
           declaration.replaceWith(t.callExpression(uid, [expr]));
         }
         return;
@@ -2287,8 +2242,8 @@ var transform = (ast) => {
             if (!expr) return;
             if (!id.isIdentifier()) return;
             const { name } = id.node;
-            if (!NAMED_COMPONENT_EXPORTS.includes(name)) return;
-            const uid = getHocUid(path6, `with${name}Props`);
+            if (!isNamedComponentExport(name)) return;
+            const uid = getHocUid(path6, `UNSAFE_with${name}Props`);
             init.replaceWith(t.callExpression(uid, [expr]));
           });
           return;
@@ -2297,8 +2252,8 @@ var transform = (ast) => {
           const { id } = decl.node;
           if (!id) return;
           const { name } = id;
-          if (!NAMED_COMPONENT_EXPORTS.includes(name)) return;
-          const uid = getHocUid(path6, `with${name}Props`);
+          if (!isNamedComponentExport(name)) return;
+          const uid = getHocUid(path6, `UNSAFE_with${name}Props`);
           decl.replaceWith(
             t.variableDeclaration("const", [
               t.variableDeclarator(
@@ -2317,7 +2272,7 @@ var transform = (ast) => {
         hocs.map(
           ([name, identifier]) => t.importSpecifier(identifier, t.identifier(name))
         ),
-        t.stringLiteral(vmod.id)
+        t.stringLiteral("react-router")
       )
     );
   }
@@ -2414,8 +2369,8 @@ var virtual = {
   browserManifest: create("browser-manifest")
 };
 var invalidateVirtualModules = (viteDevServer) => {
-  Object.values(virtual).forEach((vmod2) => {
-    let mod = viteDevServer.moduleGraph.getModuleById(vmod2.resolvedId);
+  Object.values(virtual).forEach((vmod) => {
+    let mod = viteDevServer.moduleGraph.getModuleById(vmod.resolvedId);
     if (mod) {
       viteDevServer.moduleGraph.invalidateModule(mod);
     }
@@ -2649,7 +2604,7 @@ var reactRouterVitePlugin = () => {
   };
   let pluginIndex = (pluginName) => {
     invariant(viteConfig);
-    return viteConfig.plugins.findIndex((plugin2) => plugin2.name === pluginName);
+    return viteConfig.plugins.findIndex((plugin) => plugin.name === pluginName);
   };
   let getServerEntry = async ({ routeIds }) => {
     invariant(viteConfig, "viteconfig required to generate the server entry");
@@ -3235,9 +3190,9 @@ var reactRouterVitePlugin = () => {
           envFile: false,
           plugins: [
             childCompilerPlugins.filter(
-              (plugin2) => typeof plugin2 === "object" && plugin2 !== null && "name" in plugin2 && plugin2.name !== "react-router" && plugin2.name !== "react-router:route-exports" && plugin2.name !== "react-router:hmr-updates"
-            ).map((plugin2) => ({
-              ...plugin2,
+              (plugin) => typeof plugin === "object" && plugin !== null && "name" in plugin && plugin.name !== "react-router" && plugin.name !== "react-router:route-exports" && plugin.name !== "react-router:hmr-updates"
+            ).map((plugin) => ({
+              ...plugin,
               configureServer: void 0,
               configurePreviewServer: void 0
             }))
@@ -3319,7 +3274,7 @@ var reactRouterVitePlugin = () => {
         if (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi) {
           viteDevServer.middlewares.use(async (req, res, next) => {
             let [reqPathname, reqSearch] = (req.url ?? "").split("?");
-            if (reqPathname === `${ctx.publicPath}@react-router/critical.css`) {
+            if (reqPathname.endsWith("/@react-router/critical.css")) {
               let pathname = new URLSearchParams(reqSearch).get("pathname");
               if (!pathname) {
                 return next("No pathname provided");
@@ -3627,8 +3582,8 @@ var reactRouterVitePlugin = () => {
       name: "react-router:virtual-modules",
       enforce: "pre",
       resolveId(id) {
-        const vmod2 = Object.values(virtual).find((vmod3) => vmod3.id === id);
-        if (vmod2) return vmod2.resolvedId;
+        const vmod = Object.values(virtual).find((vmod2) => vmod2.id === id);
+        if (vmod) return vmod.resolvedId;
       },
       async load(id) {
         switch (id) {
@@ -3739,7 +3694,6 @@ var reactRouterVitePlugin = () => {
         }
       }
     },
-    plugin,
     {
       name: "react-router:route-exports",
       async transform(code, id, options) {
@@ -3776,7 +3730,7 @@ var reactRouterVitePlugin = () => {
         if (!options?.ssr) {
           removeExports(ast, SERVER_ONLY_ROUTE_EXPORTS);
         }
-        transform(ast);
+        decorateComponentExportsWithProps(ast);
         return generate(ast, {
           sourceMaps: true,
           filename: id,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.6.1",
+  "version": "7.6.2",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -85,8 +85,8 @@
     "semver": "^7.3.7",
     "set-cookie-parser": "^2.6.0",
     "valibot": "^0.41.0",
-    "vite-node": "3.0.0-beta.2",
-    "@react-router/node": "7.6.1"
+    "vite-node": "^3.1.4",
+    "@react-router/node": "7.6.2"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -110,15 +110,15 @@
     "vite": "^6.1.0",
     "wireit": "0.14.9",
     "wrangler": "^4.2.0",
-    "@react-router/serve": "7.6.1",
-    "react-router": "^7.6.1"
+    "@react-router/serve": "7.6.2",
+    "react-router": "^7.6.2"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^7.6.1",
-    "react-router": "^7.6.1"
+    "@react-router/serve": "^7.6.2",
+    "react-router": "^7.6.2"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {