@react-router/dev 0.0.0-experimental-f2b42587c → 0.0.0-experimental-3b8ea09a1

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 v0.0.0-experimental-f2b42587c
+ * @react-router/dev v0.0.0-experimental-3b8ea09a1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -130,6 +130,10 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -159,11 +163,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
+  const server = new ViteNodeServer(devServer);
   (0, import_source_map.installSourcemapsSupport)({
     getSourceMap: (source) => server.getSourceMap(source)
   });
-  const runner = new import_client.ViteNodeRunner({
+  const runner = new ViteNodeRunner({
     root: devServer.config.root,
     base: devServer.config.base,
     fetchModule(id) {
@@ -175,12 +179,10 @@ async function createContext({
   });
   return { devServer, server, runner };
 }
-var import_server, import_client, import_source_map;
+var import_source_map;
 var init_vite_node = __esm({
   "vite/vite-node.ts"() {
     "use strict";
-    import_server = require("vite-node/server");
-    import_client = require("vite-node/client");
     import_source_map = require("vite-node/source-map");
     init_vite();
     init_ssr_externals();
@@ -928,7 +930,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 +1138,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 +1163,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({
@@ -1631,7 +1636,7 @@ function resolveEnvironmentsOptions(environmentResolvers, resolverOptions) {
 function isNonNullable(x) {
   return x != null;
 }
-var import_node_crypto, fs4, path6, url, fse, babel2, import_react_router2, import_es_module_lexer, import_pick3, import_jsesc, import_picocolors4, import_kebabCase, CLIENT_NON_COMPONENT_EXPORTS, CLIENT_ROUTE_EXPORTS, BUILD_CLIENT_ROUTE_QUERY_STRING, SSR_BUNDLE_PREFIX, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
+var import_node_crypto, fs4, path6, url, fse, babel2, import_react_router2, import_es_module_lexer, import_tinyglobby, import_pick3, import_jsesc, import_picocolors4, import_kebabCase, CLIENT_NON_COMPONENT_EXPORTS, CLIENT_ROUTE_EXPORTS, BUILD_CLIENT_ROUTE_QUERY_STRING, SSR_BUNDLE_PREFIX, virtualHmrRuntime, virtualInjectHmrRuntime, virtual, getServerBuildDirectory, getClientBuildDirectory, defaultEntriesDir, defaultEntries, REACT_REFRESH_HEADER;
 var init_plugin = __esm({
   "vite/plugin.ts"() {
     "use strict";
@@ -1643,6 +1648,7 @@ var init_plugin = __esm({
     babel2 = __toESM(require("@babel/core"));
     import_react_router2 = require("react-router");
     import_es_module_lexer = require("es-module-lexer");
+    import_tinyglobby = require("tinyglobby");
     import_pick3 = __toESM(require("lodash/pick"));
     import_jsesc = __toESM(require("jsesc"));
     import_picocolors4 = __toESM(require("picocolors"));

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-f2b42587c
+ * @react-router/dev v0.0.0-experimental-3b8ea09a1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-f2b42587c
+ * @react-router/dev v0.0.0-experimental-3b8ea09a1
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/vite/cloudflare.d.ts

@@ -1,6 +1,6 @@
 import { UNSAFE_MiddlewareEnabled, unstable_InitialContext, AppLoadContext } from 'react-router';
 import { Plugin } from 'vite';
-import { PlatformProxy, GetPlatformProxyOptions } from 'wrangler';
+import { GetPlatformProxyOptions, PlatformProxy } from 'wrangler';
 
 type MaybePromise<T> = T | Promise<T>;
 type CfProperties = Record<string, unknown>;

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-f2b42587c
+ * @react-router/dev v0.0.0-experimental-3b8ea09a1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -175,8 +175,6 @@ var import_node_child_process = require("child_process");
 var import_package_json = __toESM(require("@npmcli/package-json"));
 
 // vite/vite-node.ts
-var import_server = require("vite-node/server");
-var import_client = require("vite-node/client");
 var import_source_map = require("vite-node/source-map");
 
 // vite/ssr-externals.ts
@@ -202,6 +200,10 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -231,11 +233,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
+  const server = new ViteNodeServer(devServer);
   (0, import_source_map.installSourcemapsSupport)({
     getSourceMap: (source) => server.getSourceMap(source)
   });
-  const runner = new import_client.ViteNodeRunner({
+  const runner = new ViteNodeRunner({
     root: devServer.config.root,
     base: devServer.config.base,
     fetchModule(id) {

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-f2b42587c
+ * @react-router/dev v0.0.0-experimental-3b8ea09a1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -53,6 +53,7 @@ var fse = __toESM(require("fs-extra"));
 var babel = __toESM(require("@babel/core"));
 var import_react_router2 = require("react-router");
 var import_es_module_lexer = require("es-module-lexer");
+var import_tinyglobby = require("tinyglobby");
 var import_pick3 = __toESM(require("lodash/pick"));
 var import_jsesc = __toESM(require("jsesc"));
 var import_picocolors3 = __toESM(require("picocolors"));
@@ -69,8 +70,6 @@ var import_node_child_process = require("child_process");
 var import_package_json = __toESM(require("@npmcli/package-json"));
 
 // vite/vite-node.ts
-var import_server = require("vite-node/server");
-var import_client = require("vite-node/client");
 var import_source_map = require("vite-node/source-map");
 
 // vite/vite.ts
@@ -140,6 +139,10 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -169,11 +172,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
+  const server = new ViteNodeServer(devServer);
   (0, import_source_map.installSourcemapsSupport)({
     getSourceMap: (source) => server.getSourceMap(source)
   });
-  const runner = new import_client.ViteNodeRunner({
+  const runner = new ViteNodeRunner({
     root: devServer.config.root,
     base: devServer.config.base,
     fetchModule(id) {
@@ -915,7 +918,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 +1126,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 +1151,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
@@ -2966,6 +2972,7 @@ var reactRouterVitePlugin = () => {
       config: async (_viteUserConfig, _viteConfigEnv) => {
         await preloadVite();
         let vite2 = getVite();
+        let viteMajorVersion = parseInt(vite2.version.split(".")[0], 10);
         viteUserConfig = _viteUserConfig;
         viteConfigEnv = _viteConfigEnv;
         viteCommand = viteConfigEnv.command;
@@ -3024,7 +3031,13 @@ var reactRouterVitePlugin = () => {
               ...Object.values(ctx.reactRouterConfig.routes).map(
                 (route) => resolveRelativeRouteFilePath(route, ctx.reactRouterConfig)
               )
-            ] : [],
+            ].map(
+              (entry) => (
+                // In Vite 7, the `optimizeDeps.entries` option only accepts glob patterns.
+                // In prior versions, absolute file paths were treated differently.
+                viteMajorVersion >= 7 ? (0, import_tinyglobby.escapePath)(entry) : entry
+              )
+            ) : [],
             include: [
               // Pre-bundle React dependencies to avoid React duplicates,
               // even if React dependencies are not direct dependencies.
@@ -3271,7 +3284,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");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-f2b42587c",
+  "version": "0.0.0-experimental-3b8ea09a1",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -84,9 +84,10 @@
     "react-refresh": "^0.14.0",
     "semver": "^7.3.7",
     "set-cookie-parser": "^2.6.0",
+    "tinyglobby": "^0.2.14",
     "valibot": "^0.41.0",
     "vite-node": "^3.1.4",
-    "@react-router/node": "0.0.0-experimental-f2b42587c"
+    "@react-router/node": "0.0.0-experimental-3b8ea09a1"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -110,15 +111,15 @@
     "vite": "^6.1.0",
     "wireit": "0.14.9",
     "wrangler": "^4.2.0",
-    "@react-router/serve": "0.0.0-experimental-f2b42587c",
-    "react-router": "^0.0.0-experimental-f2b42587c"
+    "@react-router/serve": "0.0.0-experimental-3b8ea09a1",
+    "react-router": "^0.0.0-experimental-3b8ea09a1"
   },
   "peerDependencies": {
     "typescript": "^5.1.0",
-    "vite": "^5.1.0 || ^6.0.0",
+    "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "react-router": "^0.0.0-experimental-f2b42587c",
-    "@react-router/serve": "^0.0.0-experimental-f2b42587c"
+    "@react-router/serve": "^0.0.0-experimental-3b8ea09a1",
+    "react-router": "^0.0.0-experimental-3b8ea09a1"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {