@react-router/dev 0.0.0-experimental-4d16948 → 0.0.0-experimental-23decd7bc

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # `@react-router/dev`
 
+## 7.6.3
+
+### Patch Changes
+
+- Add Vite 7 support ([#13748](https://github.com/remix-run/react-router/pull/13748))
+- Skip `package.json` resolution checks when a custom `entry.server.(j|t)sx` file is provided. ([#13744](https://github.com/remix-run/react-router/pull/13744))
+- Add validation for a route's id not being 'root' ([#13792](https://github.com/remix-run/react-router/pull/13792))
+- Updated dependencies:
+  - `@react-router/node@7.6.3`
+  - `react-router@7.6.3`
+  - `@react-router/serve@7.6.3`
+
+## 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-4d16948
+ * @react-router/dev v0.0.0-experimental-23decd7bc
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -130,6 +130,11 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }, { installSourcemapsSupport }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client"),
+    import("vite-node/source-map")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -159,11 +164,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
-  (0, import_source_map.installSourcemapsSupport)({
+  const server = new ViteNodeServer(devServer);
+  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,13 +180,9 @@ async function createContext({
   });
   return { devServer, server, runner };
 }
-var import_server, import_client, 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();
   }
@@ -272,7 +273,12 @@ var init_routes = __esm({
         return !(typeof value === "object" && value !== null && "then" in value && "catch" in value);
       }, "Invalid type: Expected object but received a promise. Did you forget to await?"),
       v.object({
-        id: v.optional(v.string()),
+        id: v.optional(
+          v.pipe(
+            v.string(),
+            v.notValue("root", "A route cannot use the reserved id 'root'.")
+          )
+        ),
         path: v.optional(v.string()),
         index: v.optional(v.boolean()),
         caseSensitive: v.optional(v.boolean()),
@@ -928,7 +934,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 +1142,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 +1167,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({
@@ -1445,7 +1454,7 @@ async function cleanBuildDirectory(viteConfig, ctx) {
     return !relativePath.startsWith("..") && !path6.isAbsolute(relativePath);
   };
   if (viteConfig.build.emptyOutDir ?? isWithinRoot()) {
-    await fse.remove(buildDirectory);
+    await (0, import_promises2.rm)(buildDirectory, { force: true, recursive: true });
   }
 }
 async function cleanViteManifests(environmentsOptions, ctx) {
@@ -1458,15 +1467,15 @@ async function cleanViteManifests(environmentsOptions, ctx) {
   );
   await Promise.all(
     viteManifestPaths.map(async (viteManifestPath) => {
-      let manifestExists = await fse.pathExists(viteManifestPath);
+      let manifestExists = (0, import_node_fs3.existsSync)(viteManifestPath);
       if (!manifestExists) return;
       if (!ctx.viteManifestEnabled) {
-        await fse.remove(viteManifestPath);
+        await (0, import_promises2.rm)(viteManifestPath, { force: true, recursive: true });
       }
       let viteDir = path6.dirname(viteManifestPath);
-      let viteDirFiles = await fse.readdir(viteDir);
+      let viteDirFiles = await (0, import_promises2.readdir)(viteDir, { recursive: true });
       if (viteDirFiles.length === 0) {
-        await fse.remove(viteDir);
+        await (0, import_promises2.rm)(viteDir, { force: true, recursive: true });
       }
     })
   );
@@ -1532,13 +1541,13 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
       },
       build: {
         // We move SSR-only assets to client assets. Note that the
-        // SSR build can also emit code-split JS files (e.g. by
+        // SSR build can also emit code-split JS files (e.g., by
         // dynamic import) under the same assets directory
         // regardless of "ssrEmitAssets" option, so we also need to
-        // keep these JS files have to be kept as-is.
+        // keep these JS files to be kept as-is.
         ssrEmitAssets: true,
         copyPublicDir: false,
-        // Assets in the public directory are only used by the client
+        // The client only uses assets in the public directory
         rollupOptions: {
           input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id,
           output: {
@@ -1562,7 +1571,7 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
                   route.file
                 );
                 let isRootRoute = route.file === ctx.reactRouterConfig.routes.root.file;
-                let code = fse.readFileSync(routeFilePath, "utf-8");
+                let code = (0, import_node_fs3.readFileSync)(routeFilePath, "utf-8");
                 return [
                   `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
                   ...ctx.reactRouterConfig.future.unstable_splitRouteModules && !isRootRoute ? routeChunkExportNames.map(
@@ -1631,18 +1640,19 @@ 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, import_node_fs3, import_promises2, path6, url, 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";
     import_node_crypto = require("crypto");
-    fs4 = __toESM(require("fs"));
+    import_node_fs3 = require("fs");
+    import_promises2 = require("fs/promises");
     path6 = __toESM(require("path"));
     url = __toESM(require("url"));
-    fse = __toESM(require("fs-extra"));
     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"));
@@ -1698,7 +1708,9 @@ var init_plugin = __esm({
       "config",
       "defaults"
     );
-    defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename2) => path6.join(defaultEntriesDir, filename2));
+    defaultEntries = (0, import_node_fs3.readdirSync)(defaultEntriesDir).map(
+      (filename2) => path6.join(defaultEntriesDir, filename2)
+    );
     invariant(defaultEntries.length > 0, "No default entries found");
     REACT_REFRESH_HEADER = `
 import RefreshRuntime from "${virtualHmrRuntime.id}";
@@ -1978,8 +1990,9 @@ var import_semver = __toESM(require("semver"));
 var import_picocolors8 = __toESM(require("picocolors"));
 
 // cli/commands.ts
+var import_node_fs4 = require("fs");
+var import_promises3 = require("fs/promises");
 var path7 = __toESM(require("path"));
-var import_fs_extra = __toESM(require("fs-extra"));
 var import_package_json2 = __toESM(require("@npmcli/package-json"));
 var import_exit_hook = __toESM(require("exit-hook"));
 var import_picocolors7 = __toESM(require("picocolors"));
@@ -2153,21 +2166,21 @@ async function generateEntry(entry, rootDirectory, flags = {}) {
   let useTypeScript = flags.typescript ?? true;
   let outputExtension = useTypeScript ? "tsx" : "jsx";
   let outputEntry = `${entry}.${outputExtension}`;
-  let outputFile2 = path7.resolve(appDirectory, outputEntry);
+  let outputFile = path7.resolve(appDirectory, outputEntry);
   if (!useTypeScript) {
     let javascript = transpile(contents, {
       cwd: rootDirectory,
       filename: isServerEntry ? defaultEntryServer : defaultEntryClient
     });
-    await import_fs_extra.default.writeFile(outputFile2, javascript, "utf-8");
+    await (0, import_promises3.writeFile)(outputFile, javascript, "utf-8");
   } else {
-    await import_fs_extra.default.writeFile(outputFile2, contents, "utf-8");
+    await (0, import_promises3.writeFile)(outputFile, contents, "utf-8");
   }
   console.log(
     import_picocolors7.default.blue(
       `Entry file ${entry} created at ${path7.relative(
         rootDirectory,
-        outputFile2
+        outputFile
       )}.`
     )
   );
@@ -2181,7 +2194,7 @@ function resolveRootDirectory(root, flags) {
 async function checkForEntry(rootDirectory, appDirectory, entries2) {
   for (let entry of entries2) {
     let entryPath = path7.resolve(appDirectory, entry);
-    let exists = await import_fs_extra.default.pathExists(entryPath);
+    let exists = (0, import_node_fs4.existsSync)(entryPath);
     if (exists) {
       let relative7 = path7.relative(rootDirectory, entryPath);
       console.error(import_picocolors7.default.red(`Entry file ${relative7} already exists.`));
@@ -2191,12 +2204,12 @@ async function checkForEntry(rootDirectory, appDirectory, entries2) {
 }
 async function createServerEntry(rootDirectory, appDirectory, inputFile) {
   await checkForEntry(rootDirectory, appDirectory, serverEntries);
-  let contents = await import_fs_extra.default.readFile(inputFile, "utf-8");
+  let contents = await (0, import_promises3.readFile)(inputFile, "utf-8");
   return contents;
 }
 async function createClientEntry(rootDirectory, appDirectory, inputFile) {
   await checkForEntry(rootDirectory, appDirectory, clientEntries);
-  let contents = await import_fs_extra.default.readFile(inputFile, "utf-8");
+  let contents = await (0, import_promises3.readFile)(inputFile, "utf-8");
   return contents;
 }
 async function typegen(root, flags) {

package/dist/config.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-4d16948
+ * @react-router/dev v0.0.0-experimental-23decd7bc
  *
  * Copyright (c) Remix Software Inc.
  *

package/dist/routes.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-4d16948
+ * @react-router/dev v0.0.0-experimental-23decd7bc
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -74,7 +74,12 @@ var routeConfigEntrySchema = v.pipe(
     return !(typeof value === "object" && value !== null && "then" in value && "catch" in value);
   }, "Invalid type: Expected object but received a promise. Did you forget to await?"),
   v.object({
-    id: v.optional(v.string()),
+    id: v.optional(
+      v.pipe(
+        v.string(),
+        v.notValue("root", "A route cannot use the reserved id 'root'.")
+      )
+    ),
     path: v.optional(v.string()),
     index: v.optional(v.boolean()),
     caseSensitive: v.optional(v.boolean()),

package/dist/vite/cloudflare.d.ts

@@ -1,6 +1,6 @@
 import { UNSAFE_MiddlewareEnabled, unstable_InitialContext, AppLoadContext } from 'react-router';
 import { Plugin } from 'vite';
-import { GetPlatformProxyOptions, PlatformProxy } from 'wrangler';
+import { PlatformProxy, GetPlatformProxyOptions } 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-4d16948
+ * @react-router/dev v0.0.0-experimental-23decd7bc
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -174,11 +174,6 @@ var import_node_fs = __toESM(require("fs"));
 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
 var ssrExternals = isReactRouterRepo() ? [
   // This is only needed within this repo because these packages
@@ -202,6 +197,11 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }, { installSourcemapsSupport }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client"),
+    import("vite-node/source-map")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -231,11 +231,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
-  (0, import_source_map.installSourcemapsSupport)({
+  const server = new ViteNodeServer(devServer);
+  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) {
@@ -269,7 +269,12 @@ var routeConfigEntrySchema = v.pipe(
     return !(typeof value === "object" && value !== null && "then" in value && "catch" in value);
   }, "Invalid type: Expected object but received a promise. Did you forget to await?"),
   v.object({
-    id: v.optional(v.string()),
+    id: v.optional(
+      v.pipe(
+        v.string(),
+        v.notValue("root", "A route cannot use the reserved id 'root'.")
+      )
+    ),
     path: v.optional(v.string()),
     index: v.optional(v.boolean()),
     caseSensitive: v.optional(v.boolean()),

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v0.0.0-experimental-4d16948
+ * @react-router/dev v0.0.0-experimental-23decd7bc
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,13 +46,14 @@ module.exports = __toCommonJS(vite_exports);
 
 // vite/plugin.ts
 var import_node_crypto = require("crypto");
-var fs3 = __toESM(require("fs"));
+var import_node_fs2 = require("fs");
+var import_promises2 = require("fs/promises");
 var path5 = __toESM(require("path"));
 var url = __toESM(require("url"));
-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"));
@@ -68,11 +69,6 @@ var import_node_fs = __toESM(require("fs"));
 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
 var import_pathe2 = __toESM(require("pathe"));
 
@@ -140,6 +136,11 @@ async function createContext({
 }) {
   await preloadVite();
   const vite2 = getVite();
+  const [{ ViteNodeServer }, { ViteNodeRunner }, { installSourcemapsSupport }] = await Promise.all([
+    import("vite-node/server"),
+    import("vite-node/client"),
+    import("vite-node/source-map")
+  ]);
   const devServer = await vite2.createServer({
     root,
     mode,
@@ -169,11 +170,11 @@ async function createContext({
     plugins: []
   });
   await devServer.pluginContainer.buildStart({});
-  const server = new import_server.ViteNodeServer(devServer);
-  (0, import_source_map.installSourcemapsSupport)({
+  const server = new ViteNodeServer(devServer);
+  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) {
@@ -207,7 +208,12 @@ var routeConfigEntrySchema = v.pipe(
     return !(typeof value === "object" && value !== null && "then" in value && "catch" in value);
   }, "Invalid type: Expected object but received a promise. Did you forget to await?"),
   v.object({
-    id: v.optional(v.string()),
+    id: v.optional(
+      v.pipe(
+        v.string(),
+        v.notValue("root", "A route cannot use the reserved id 'root'.")
+      )
+    ),
     path: v.optional(v.string()),
     index: v.optional(v.boolean()),
     caseSensitive: v.optional(v.boolean()),
@@ -684,22 +690,22 @@ async function resolveEntryFiles({
   let userEntryServerFile = findEntry(appDirectory, "entry.server");
   let entryServerFile;
   let entryClientFile = userEntryClientFile || "entry.client.tsx";
-  let packageJsonPath = findEntry(rootDirectory, "package", {
-    extensions: [".json"],
-    absolute: true,
-    walkParents: true
-  });
-  if (!packageJsonPath) {
-    throw new Error(
-      `Could not find package.json in ${rootDirectory} or any of its parent directories`
-    );
-  }
-  let packageJsonDirectory = import_pathe3.default.dirname(packageJsonPath);
-  let pkgJson = await import_package_json.default.load(packageJsonDirectory);
-  let deps = pkgJson.content.dependencies ?? {};
   if (userEntryServerFile) {
     entryServerFile = userEntryServerFile;
   } else {
+    let packageJsonPath = findEntry(rootDirectory, "package", {
+      extensions: [".json"],
+      absolute: true,
+      walkParents: true
+    });
+    if (!packageJsonPath) {
+      throw new Error(
+        `Could not find package.json in ${rootDirectory} or any of its parent directories. Please add a package.json, or provide a custom entry.server.tsx/jsx file in your app directory.`
+      );
+    }
+    let packageJsonDirectory = import_pathe3.default.dirname(packageJsonPath);
+    let pkgJson = await import_package_json.default.load(packageJsonDirectory);
+    let deps = pkgJson.content.dependencies ?? {};
     if (!deps["@react-router/node"]) {
       throw new Error(
         `Could not determine server runtime. Please install @react-router/node, or provide a custom entry.server.tsx/jsx file in your app directory.`
@@ -915,7 +921,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 +1129,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 +1154,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
@@ -2444,8 +2453,8 @@ function dedupe(array2) {
   return [...new Set(array2)];
 }
 var writeFileSafe = async (file, contents) => {
-  await fse.ensureDir(path5.dirname(file));
-  await fse.writeFile(file, contents);
+  await (0, import_promises2.mkdir)(path5.dirname(file), { recursive: true });
+  await (0, import_promises2.writeFile)(file, contents);
 };
 var getExportNames = (code) => {
   let [, exportSpecifiers] = (0, import_es_module_lexer.parse)(code);
@@ -2479,7 +2488,7 @@ var compileRouteFile = async (viteChildCompiler, ctx, routeFile, readRouteFile)
   };
   let [id, code] = await Promise.all([
     resolveId(),
-    readRouteFile?.() ?? fse.readFile(routePath, "utf-8"),
+    readRouteFile?.() ?? (0, import_promises2.readFile)(routePath, "utf-8"),
     // pluginContainer.transform(...) fails if we don't do this first:
     moduleGraph.ensureEntryFromUrl(url2, ssr)
   ]);
@@ -2541,7 +2550,9 @@ var defaultEntriesDir = path5.resolve(
   "config",
   "defaults"
 );
-var defaultEntries = fse.readdirSync(defaultEntriesDir).map((filename2) => path5.join(defaultEntriesDir, filename2));
+var defaultEntries = (0, import_node_fs2.readdirSync)(defaultEntriesDir).map(
+  (filename2) => path5.join(defaultEntriesDir, filename2)
+);
 invariant(defaultEntries.length > 0, "No default entries found");
 var reactRouterDevLoadContext = () => void 0;
 var reactRouterVitePlugin = () => {
@@ -2678,7 +2689,7 @@ var reactRouterVitePlugin = () => {
             ` : ""}`;
   };
   let loadViteManifest = async (directory) => {
-    let manifestContents = await fse.readFile(
+    let manifestContents = await (0, import_promises2.readFile)(
       path5.resolve(directory, ".vite", "manifest.json"),
       "utf-8"
     );
@@ -2700,7 +2711,7 @@ var reactRouterVitePlugin = () => {
   };
   let generateSriManifest = async (ctx2) => {
     let clientBuildDirectory = getClientBuildDirectory(ctx2.reactRouterConfig);
-    let entries = fs3.readdirSync(clientBuildDirectory, {
+    let entries = (0, import_node_fs2.readdirSync)(clientBuildDirectory, {
       withFileTypes: true,
       recursive: true
     });
@@ -2710,7 +2721,7 @@ var reactRouterVitePlugin = () => {
         const entryNormalizedPath = "parentPath" in entry && typeof entry.parentPath === "string" ? entry.parentPath : entry.path;
         let contents;
         try {
-          contents = await fse.readFile(
+          contents = await (0, import_promises2.readFile)(
             path5.join(entryNormalizedPath, entry.name),
             "utf-8"
           );
@@ -2966,6 +2977,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;
@@ -2995,7 +3007,7 @@ var reactRouterVitePlugin = () => {
           vite2.loadEnv(
             viteConfigEnv.mode,
             viteUserConfig.envDir ?? ctx.rootDirectory,
-            // We override default prefix of "VITE_" with a blank string since
+            // We override the default prefix of "VITE_" with a blank string since
             // we're targeting the server, so we want to load all environment
             // variables, not just those explicitly marked for the client
             ""
@@ -3024,7 +3036,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.
@@ -3059,7 +3077,7 @@ var reactRouterVitePlugin = () => {
             conditions: viteCommand === "build" ? viteClientConditions : ["development", ...viteClientConditions]
           },
           base: viteUserConfig.base,
-          // When consumer provides an allow list for files that can be read by
+          // When consumer provides an allowlist for files that can be read by
           // the server, ensure that the default entry files are included.
           // If we don't do this and a default entry file is used, the server
           // will throw an error that the file is not allowed to be read.
@@ -3351,15 +3369,15 @@ var reactRouterVitePlugin = () => {
             let src = path5.join(serverBuildDirectory, ssrAssetPath);
             let dest = path5.join(clientBuildDirectory, ssrAssetPath);
             if (!userSsrEmitAssets) {
-              if (!fse.existsSync(dest)) {
-                await fse.move(src, dest);
+              if (!(0, import_node_fs2.existsSync)(dest)) {
+                await (0, import_promises2.rename)(src, dest);
                 movedAssetPaths.push(dest);
               } else {
-                await fse.remove(src);
+                await (0, import_promises2.rm)(src, { force: true, recursive: true });
                 removedAssetPaths.push(dest);
               }
-            } else if (!fse.existsSync(dest)) {
-              await fse.copy(src, dest);
+            } else if (!(0, import_node_fs2.existsSync)(dest)) {
+              await (0, import_promises2.cp)(src, dest, { recursive: true });
               copiedAssetPaths.push(dest);
             }
           }
@@ -3370,7 +3388,7 @@ var reactRouterVitePlugin = () => {
             await Promise.all(
               ssrCssPaths.map(async (cssPath) => {
                 let src = path5.join(serverBuildDirectory, cssPath);
-                await fse.remove(src);
+                await (0, import_promises2.rm)(src, { force: true, recursive: true });
                 removedAssetPaths.push(src);
               })
             );
@@ -3381,9 +3399,9 @@ var reactRouterVitePlugin = () => {
           await Promise.all(
             Array.from(cleanedAssetDirs).map(async (dir) => {
               try {
-                const files = await fse.readdir(dir);
+                const files = await (0, import_promises2.readdir)(dir, { recursive: true });
                 if (files.length === 0) {
-                  await fse.remove(dir);
+                  await (0, import_promises2.rm)(dir, { force: true, recursive: true });
                 }
               } catch {
               }
@@ -3447,7 +3465,7 @@ var reactRouterVitePlugin = () => {
                 "due to ssr:false"
               ].join(" ")
             );
-            fse.removeSync(serverBuildDirectory);
+            (0, import_node_fs2.rmSync)(serverBuildDirectory, { force: true, recursive: true });
           }
         }
       },
@@ -3465,7 +3483,7 @@ var reactRouterVitePlugin = () => {
       // primarily ensures code is never duplicated across a route module and
       // its chunks. If we didn't have this plugin, any app that explicitly
       // imports a route module would result in duplicate code since the app
-      // would contain code for both the unprocessed route module as well as its
+      // would contain code for both the unprocessed route module and its
       // individual chunks. This is because, since they have different module
       // IDs, they are treated as completely separate modules even though they
       // all reference the same underlying file. This plugin addresses this by
@@ -3771,11 +3789,8 @@ var reactRouterVitePlugin = () => {
         );
         return [
           "const exports = {}",
-          await fse.readFile(reactRefreshRuntimePath, "utf8"),
-          await fse.readFile(
-            require.resolve("./static/refresh-utils.cjs"),
-            "utf8"
-          ),
+          await (0, import_promises2.readFile)(reactRefreshRuntimePath, "utf8"),
+          await (0, import_promises2.readFile)(require.resolve("./static/refresh-utils.cjs"), "utf8"),
           "export default exports"
         ].join("\n");
       }
@@ -3858,10 +3873,10 @@ var reactRouterVitePlugin = () => {
     {
       name: "react-router-server-change-trigger-client-hmr",
       // This hook is only available in Vite v6+ so this is a no-op in v5.
-      // Previously the server and client modules were shared in a single module
+      // Previously, the server and client modules were shared in a single module
       // graph. This meant that changes to server code automatically resulted in
-      // client HMR updates. In Vite v6+ these module graphs are separate from
-      // each other so we need to manually trigger client HMR updates if server
+      // client HMR updates. In Vite v6+, these module graphs are separate from
+      // each other, so we need to manually trigger client HMR updates if server
       // code has changed.
       hotUpdate({ server, modules }) {
         if (this.environment.name !== "ssr" && modules.length <= 0) {
@@ -4055,7 +4070,7 @@ async function handleSpaMode(viteConfig, reactRouterConfig, serverBuildDirectory
       "SPA Mode: Did you forget to include `<Scripts/>` in your root route? Your pre-rendered HTML cannot hydrate without `<Scripts />`."
     );
   }
-  await fse.writeFile(path5.join(clientBuildDirectory, filename2), html);
+  await (0, import_promises2.writeFile)(path5.join(clientBuildDirectory, filename2), html);
   let prettyDir = path5.relative(process.cwd(), clientBuildDirectory);
   let prettyPath = path5.join(prettyDir, filename2);
   if (build.prerender.length > 0) {
@@ -4186,8 +4201,8 @@ ${normalizedPath}`
   }
   let outdir = path5.relative(process.cwd(), clientBuildDirectory);
   let outfile = path5.join(outdir, ...normalizedPath.split("/"));
-  await fse.ensureDir(path5.dirname(outfile));
-  await fse.outputFile(outfile, data);
+  await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
+  await (0, import_promises2.writeFile)(outfile, data);
   viteConfig.logger.info(
     `Prerender (data): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
   );
@@ -4225,8 +4240,8 @@ ${html}`
   }
   let outdir = path5.relative(process.cwd(), clientBuildDirectory);
   let outfile = path5.join(outdir, ...normalizedPath.split("/"), "index.html");
-  await fse.ensureDir(path5.dirname(outfile));
-  await fse.outputFile(outfile, html);
+  await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
+  await (0, import_promises2.writeFile)(outfile, html);
   viteConfig.logger.info(
     `Prerender (html): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
   );
@@ -4244,8 +4259,8 @@ ${content.toString("utf8")}`
   }
   let outdir = path5.relative(process.cwd(), clientBuildDirectory);
   let outfile = path5.join(outdir, ...normalizedPath.split("/"));
-  await fse.ensureDir(path5.dirname(outfile));
-  await fse.outputFile(outfile, content);
+  await (0, import_promises2.mkdir)(path5.dirname(outfile), { recursive: true });
+  await (0, import_promises2.writeFile)(outfile, content);
   viteConfig.logger.info(
     `Prerender (resource): ${prerenderPath} -> ${import_picocolors3.default.bold(outfile)}`
   );
@@ -4498,7 +4513,7 @@ async function cleanBuildDirectory(viteConfig, ctx) {
     return !relativePath.startsWith("..") && !path5.isAbsolute(relativePath);
   };
   if (viteConfig.build.emptyOutDir ?? isWithinRoot()) {
-    await fse.remove(buildDirectory);
+    await (0, import_promises2.rm)(buildDirectory, { force: true, recursive: true });
   }
 }
 async function cleanViteManifests(environmentsOptions, ctx) {
@@ -4511,15 +4526,15 @@ async function cleanViteManifests(environmentsOptions, ctx) {
   );
   await Promise.all(
     viteManifestPaths.map(async (viteManifestPath) => {
-      let manifestExists = await fse.pathExists(viteManifestPath);
+      let manifestExists = (0, import_node_fs2.existsSync)(viteManifestPath);
       if (!manifestExists) return;
       if (!ctx.viteManifestEnabled) {
-        await fse.remove(viteManifestPath);
+        await (0, import_promises2.rm)(viteManifestPath, { force: true, recursive: true });
       }
       let viteDir = path5.dirname(viteManifestPath);
-      let viteDirFiles = await fse.readdir(viteDir);
+      let viteDirFiles = await (0, import_promises2.readdir)(viteDir, { recursive: true });
       if (viteDirFiles.length === 0) {
-        await fse.remove(viteDir);
+        await (0, import_promises2.rm)(viteDir, { force: true, recursive: true });
       }
     })
   );
@@ -4655,13 +4670,13 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
       },
       build: {
         // We move SSR-only assets to client assets. Note that the
-        // SSR build can also emit code-split JS files (e.g. by
+        // SSR build can also emit code-split JS files (e.g., by
         // dynamic import) under the same assets directory
         // regardless of "ssrEmitAssets" option, so we also need to
-        // keep these JS files have to be kept as-is.
+        // keep these JS files to be kept as-is.
         ssrEmitAssets: true,
         copyPublicDir: false,
-        // Assets in the public directory are only used by the client
+        // The client only uses assets in the public directory
         rollupOptions: {
           input: (ctx.reactRouterConfig.future.unstable_viteEnvironmentApi ? viteUserConfig.environments?.ssr?.build?.rollupOptions?.input : viteUserConfig.build?.rollupOptions?.input) ?? virtual.serverBuild.id,
           output: {
@@ -4685,7 +4700,7 @@ async function getEnvironmentOptionsResolvers(ctx, viteCommand) {
                   route.file
                 );
                 let isRootRoute = route.file === ctx.reactRouterConfig.routes.root.file;
-                let code = fse.readFileSync(routeFilePath, "utf-8");
+                let code = (0, import_node_fs2.readFileSync)(routeFilePath, "utf-8");
                 return [
                   `${routeFilePath}${BUILD_CLIENT_ROUTE_QUERY_STRING}`,
                   ...ctx.reactRouterConfig.future.unstable_splitRouteModules && !isRootRoute ? routeChunkExportNames.map(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "0.0.0-experimental-4d16948",
+  "version": "0.0.0-experimental-23decd7bc",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -75,7 +75,6 @@
     "dedent": "^1.5.3",
     "es-module-lexer": "^1.3.1",
     "exit-hook": "2.2.1",
-    "fs-extra": "^10.0.0",
     "jsesc": "3.0.2",
     "lodash": "^4.17.21",
     "pathe": "^1.1.2",
@@ -84,9 +83,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-4d16948"
+    "@react-router/node": "0.0.0-experimental-23decd7bc"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -94,7 +94,6 @@
     "@types/babel__traverse": "^7.20.5",
     "@types/dedent": "^0.7.0",
     "@types/express": "^4.17.9",
-    "@types/fs-extra": "^8.1.2",
     "@types/jsesc": "^3.0.1",
     "@types/lodash": "^4.14.182",
     "@types/node": "^20.0.0",
@@ -110,15 +109,15 @@
     "vite": "^6.1.0",
     "wireit": "0.14.9",
     "wrangler": "^4.2.0",
-    "react-router": "^0.0.0-experimental-4d16948",
-    "@react-router/serve": "0.0.0-experimental-4d16948"
+    "@react-router/serve": "0.0.0-experimental-23decd7bc",
+    "react-router": "^0.0.0-experimental-23decd7bc"
   },
   "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/serve": "^0.0.0-experimental-4d16948",
-    "react-router": "^0.0.0-experimental-4d16948"
+    "@react-router/serve": "^0.0.0-experimental-23decd7bc",
+    "react-router": "^0.0.0-experimental-23decd7bc"
   },
   "peerDependenciesMeta": {
     "@react-router/serve": {