@react-router/dev 7.11.0 → 7.12.0-pre.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # `@react-router/dev`
 
+## 7.12.0-pre.0
+
+### Minor Changes
+
+- Add additional layer of CSRF protection by rejecting submissions to UI routes from external origins. If you need to permit access to specific external origins, you can specify them in the `react-router.config.ts` config `allowedActionOrigins` field. ([#14708](https://github.com/remix-run/react-router/pull/14708))
+
+### Patch Changes
+
+- Fix `Maximum call stack size exceeded` errors when HMR is triggered against code with cyclic imports ([#14522](https://github.com/remix-run/react-router/pull/14522))
+- fix(vite): Skip SSR middleware in preview server for SPA mode ([#14673](https://github.com/remix-run/react-router/pull/14673))
+- [UNSTABLE] Add a new `future.unstable_trailingSlashAwareDataRequests` flag to provide consistent behavior of `request.pathname` inside `middleware`, `loader`, and `action` functions on document and data requests when a trailing slash is present in the browser URL. ([#14644](https://github.com/remix-run/react-router/pull/14644))
+
+  Currently, your HTTP and `request` pathnames would be as follows for `/a/b/c` and `/a/b/c/`
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
+  | ------------ | ----------------- | ----------------------- |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅             |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅             |
+
+  | URL `/a/b/c/` | **HTTP pathname** | **`request` pathname`** |
+  | ------------- | ----------------- | ----------------------- |
+  | **Document**  | `/a/b/c/`         | `/a/b/c/` ✅            |
+  | **Data**      | `/a/b/c.data`     | `/a/b/c` ⚠️             |
+
+  With this flag enabled, these pathnames will be made consistent though a new `_.data` format for client-side `.data` requests:
+
+  | URL `/a/b/c` | **HTTP pathname** | **`request` pathname`** |
+  | ------------ | ----------------- | ----------------------- |
+  | **Document** | `/a/b/c`          | `/a/b/c` ✅             |
+  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅             |
+
+  | URL `/a/b/c/` | **HTTP pathname**  | **`request` pathname`** |
+  | ------------- | ------------------ | ----------------------- |
+  | **Document**  | `/a/b/c/`          | `/a/b/c/` ✅            |
+  | **Data**      | `/a/b/c/_.data` ⬅️ | `/a/b/c/` ✅            |
+
+  This a bug fix but we are putting it behind an opt-in flag because it has the potential to be a "breaking bug fix" if you are relying on the URL format for any other application or caching logic.
+
+  Enabling this flag also changes the format of client side `.data` requests from `/_root.data` to `/_.data` when navigating to `/` to align with the new format. This does not impact the `request` pathname which is still `/` in all cases.
+
+- Updated dependencies:
+  - `react-router@7.12.0-pre.0`
+  - `@react-router/node@7.12.0-pre.0`
+  - `@react-router/serve@7.12.0-pre.0`
+
 ## 7.11.0
 
 ### Minor Changes
@@ -247,7 +292,6 @@
 - Stabilize middleware and context APIs. ([#14215](https://github.com/remix-run/react-router/pull/14215))
 
   We have removed the `unstable_` prefix from the following APIs and they are now considered stable and ready for production use:
-
   - [`RouterContextProvider`](https://reactrouter.com/api/utils/RouterContextProvider)
   - [`createContext`](https://reactrouter.com/api/utils/createContext)
   - `createBrowserRouter` [`getContext`](https://reactrouter.com/api/data-routers/createBrowserRouter#optsgetcontext) option
@@ -990,7 +1034,6 @@
   ```
 
   This initial implementation targets type inference for:
-
   - `Params` : Path parameters from your routing config in `routes.ts` including file-based routing
   - `LoaderData` : Loader data from `loader` and/or `clientLoader` within your route module
   - `ActionData` : Action data from `action` and/or `clientAction` within your route module
@@ -1005,7 +1048,6 @@
   ```
 
   Check out our docs for more:
-
   - [_Explanations > Type Safety_](https://reactrouter.com/dev/guides/explanation/type-safety)
   - [_How-To > Setting up type safety_](https://reactrouter.com/dev/guides/how-to/setting-up-type-safety)
 
@@ -1205,7 +1247,6 @@
 - Vite: Provide `Unstable_ServerBundlesFunction` and `Unstable_VitePluginConfig` types ([#8654](https://github.com/remix-run/remix/pull/8654))
 
 - Vite: add `--sourcemapClient` and `--sourcemapServer` flags to `remix vite:build` ([#8613](https://github.com/remix-run/remix/pull/8613))
-
   - `--sourcemapClient`
 
   - `--sourcemapClient=inline`
@@ -1542,7 +1583,6 @@
 - Add support for `clientLoader`/`clientAction`/`HydrateFallback` route exports ([RFC](https://github.com/remix-run/remix/discussions/7634)) ([#8173](https://github.com/remix-run/remix/pull/8173))
 
   Remix now supports loaders/actions that run on the client (in addition to, or instead of the loader/action that runs on the server). While we still recommend server loaders/actions for the majority of your data needs in a Remix app - these provide some levers you can pull for more advanced use-cases such as:
-
   - Leveraging a data source local to the browser (i.e., `localStorage`)
   - Managing a client-side cache of server data (like `IndexedDB`)
   - Bypassing the Remix server in a BFF setup and hitting your API directly from the browser
@@ -1946,7 +1986,6 @@
 - Output esbuild metafiles for bundle analysis ([#6772](https://github.com/remix-run/remix/pull/6772))
 
   Written to server build directory (`build/` by default):
-
   - `metafile.css.json`
   - `metafile.js.json` (browser JS)
   - `metafile.server.json` (server JS)
@@ -2044,7 +2083,6 @@
 - built-in tls support ([#6483](https://github.com/remix-run/remix/pull/6483))
 
   New options:
-
   - `--tls-key` / `tlsKey`: TLS key
   - `--tls-cert` / `tlsCert`: TLS Certificate
 
@@ -2315,7 +2353,6 @@
   ```
 
   The dev server will:
-
   - force `NODE_ENV=development` and warn you if it was previously set to something else
   - rebuild your app whenever your Remix app code changes
   - restart your app server whenever rebuilds succeed

package/dist/cli/index.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -506,10 +506,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename: basename3,
@@ -523,6 +525,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {
@@ -956,6 +959,7 @@ function generateServerBuild(ctx) {
       export const routeDiscovery: ServerBuild["routeDiscovery"];
       export const routes: ServerBuild["routes"];
       export const ssr: ServerBuild["ssr"];
+      export const allowedActionOrigins: ServerBuild["allowedActionOrigins"];
       export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
     }
   `;

package/dist/config.d.ts

@@ -39,6 +39,7 @@ type ServerModuleFormat = "esm" | "cjs";
 interface FutureConfig {
     unstable_optimizeDeps: boolean;
     unstable_subResourceIntegrity: boolean;
+    unstable_trailingSlashAwareDataRequests: boolean;
     /**
      * Enable route middleware
      */
@@ -147,6 +148,11 @@ type ReactRouterConfig = {
      * SPA without server-rendering. Default's to `true`.
      */
     ssr?: boolean;
+    /**
+     * The allowed origins for actions / mutations. Does not apply to routes
+     * without a component. micromatch glob patterns are supported.
+     */
+    allowedActionOrigins?: string[];
 };
 type ResolvedReactRouterConfig = Readonly<{
     /**
@@ -212,6 +218,11 @@ type ResolvedReactRouterConfig = Readonly<{
      * SPA without server-rendering. Default's to `true`.
      */
     ssr: boolean;
+    /**
+     * The allowed origins for actions / mutations. Does not apply to routes
+     * without a component. micromatch glob patterns are supported.
+     */
+    allowedActionOrigins: string[] | false;
     /**
      * The resolved array of route config entries exported from `routes.ts`
      */

package/dist/config.js

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

package/dist/routes.js

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

package/dist/vite/cloudflare.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -535,10 +535,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename,
@@ -552,6 +554,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {

package/dist/vite.js

@@ -1,5 +1,5 @@
 /**
- * @react-router/dev v7.11.0
+ * @react-router/dev v7.12.0-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -562,10 +562,12 @@ async function resolveConfig({
   let future = {
     unstable_optimizeDeps: userAndPresetConfigs.future?.unstable_optimizeDeps ?? false,
     unstable_subResourceIntegrity: userAndPresetConfigs.future?.unstable_subResourceIntegrity ?? false,
+    unstable_trailingSlashAwareDataRequests: userAndPresetConfigs.future?.unstable_trailingSlashAwareDataRequests ?? false,
     v8_middleware: userAndPresetConfigs.future?.v8_middleware ?? false,
     v8_splitRouteModules: userAndPresetConfigs.future?.v8_splitRouteModules ?? false,
     v8_viteEnvironmentApi: userAndPresetConfigs.future?.v8_viteEnvironmentApi ?? false
   };
+  let allowedActionOrigins = userAndPresetConfigs.allowedActionOrigins ?? false;
   let reactRouterConfig = deepFreeze({
     appDirectory,
     basename: basename3,
@@ -579,6 +581,7 @@ async function resolveConfig({
     serverBundles,
     serverModuleFormat,
     ssr,
+    allowedActionOrigins,
     unstable_routeConfig: routeConfig
   });
   for (let preset of reactRouterUserConfig.presets ?? []) {
@@ -966,6 +969,7 @@ function generateServerBuild(ctx) {
       export const routeDiscovery: ServerBuild["routeDiscovery"];
       export const routes: ServerBuild["routes"];
       export const ssr: ServerBuild["ssr"];
+      export const allowedActionOrigins: ServerBuild["allowedActionOrigins"];
       export const unstable_getCriticalCss: ServerBuild["unstable_getCriticalCss"];
     }
   `;
@@ -2921,7 +2925,9 @@ var reactRouterVitePlugin = () => {
                   href: "${ctx.publicPath}@react-router/critical.css?pathname=" + pathname,
                 };
               }
-            ` : ""}`;
+            ` : ""}
+      export const allowedActionOrigins = ${JSON.stringify(ctx.reactRouterConfig.allowedActionOrigins)};
+    `;
   };
   let loadViteManifest = async (directory) => {
     let manifestContents = await (0, import_promises2.readFile)(
@@ -3536,6 +3542,9 @@ var reactRouterVitePlugin = () => {
       },
       configurePreviewServer(previewServer) {
         return () => {
+          if (!ctx.reactRouterConfig.ssr) {
+            return;
+          }
           previewServer.middlewares.use(async (req, res, next) => {
             try {
               let serverBuildDirectory = getServerBuildDirectory(
@@ -4099,10 +4108,8 @@ var reactRouterVitePlugin = () => {
         if (this.environment.name !== "ssr" && modules.length <= 0) {
           return;
         }
-        let clientModules = uniqueNodes(
-          modules.flatMap(
-            (mod) => getParentClientNodes(server.environments.client.moduleGraph, mod)
-          )
+        let clientModules = modules.flatMap(
+          (mod) => getParentClientNodes(server.environments.client.moduleGraph, mod)
         );
         for (let clientModule of clientModules) {
           server.environments.client.reloadModule(clientModule);
@@ -4113,30 +4120,22 @@ var reactRouterVitePlugin = () => {
     warnOnClientSourceMaps()
   ];
 };
-function getParentClientNodes(clientModuleGraph, module2) {
+function getParentClientNodes(clientModuleGraph, module2, seenNodes = /* @__PURE__ */ new Set()) {
   if (!module2.id) {
     return [];
   }
+  if (seenNodes.has(module2.url)) {
+    return [];
+  }
+  seenNodes.add(module2.url);
   let clientModule = clientModuleGraph.getModuleById(module2.id);
   if (clientModule) {
     return [clientModule];
   }
   return [...module2.importers].flatMap(
-    (importer) => getParentClientNodes(clientModuleGraph, importer)
+    (importer) => getParentClientNodes(clientModuleGraph, importer, seenNodes)
   );
 }
-function uniqueNodes(nodes) {
-  let nodeUrls = /* @__PURE__ */ new Set();
-  let unique = [];
-  for (let node of nodes) {
-    if (nodeUrls.has(node.url)) {
-      continue;
-    }
-    nodeUrls.add(node.url);
-    unique.push(node);
-  }
-  return unique;
-}
 function addRefreshWrapper(reactRouterConfig, code, id) {
   let route = getRoute(reactRouterConfig, id);
   let acceptExports = route ? CLIENT_NON_COMPONENT_EXPORTS : [];
@@ -4411,7 +4410,21 @@ function getStaticPrerenderPaths(routes) {
   };
 }
 async function prerenderData(handler, prerenderPath, onlyRoutes, clientBuildDirectory, reactRouterConfig, viteConfig, requestInit) {
-  let normalizedPath = `${reactRouterConfig.basename}${prerenderPath === "/" ? "/_root.data" : `${prerenderPath.replace(/\/$/, "")}.data`}`.replace(/\/\/+/g, "/");
+  let dataRequestPath;
+  if (reactRouterConfig.future.unstable_trailingSlashAwareDataRequests) {
+    if (prerenderPath.endsWith("/")) {
+      dataRequestPath = `${prerenderPath}_.data`;
+    } else {
+      dataRequestPath = `${prerenderPath}.data`;
+    }
+  } else {
+    if (prerenderPath === "/") {
+      dataRequestPath = "/_root.data";
+    } else {
+      dataRequestPath = `${prerenderPath.replace(/\/$/, "")}.data`;
+    }
+  }
+  let normalizedPath = `${reactRouterConfig.basename}${dataRequestPath}`.replace(/\/\/+/g, "/");
   let url2 = new URL(`http://localhost${normalizedPath}`);
   if (onlyRoutes?.length) {
     url2.searchParams.set("_routes", onlyRoutes.join(","));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-router/dev",
-  "version": "7.11.0",
+  "version": "7.12.0-pre.0",
   "description": "Dev tools and CLI for React Router",
   "homepage": "https://reactrouter.com",
   "bugs": {
@@ -92,7 +92,7 @@
     "tinyglobby": "^0.2.14",
     "valibot": "^1.2.0",
     "vite-node": "^3.2.2",
-    "@react-router/node": "7.11.0"
+    "@react-router/node": "7.12.0-pre.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -116,8 +116,8 @@
     "vite": "^6.3.0",
     "wireit": "0.14.9",
     "wrangler": "^4.23.0",
-    "@react-router/serve": "7.11.0",
-    "react-router": "^7.11.0"
+    "@react-router/serve": "7.12.0-pre.0",
+    "react-router": "^7.12.0-pre.0"
   },
   "peerDependencies": {
     "@vitejs/plugin-rsc": "~0.5.7",
@@ -125,8 +125,8 @@
     "typescript": "^5.1.0",
     "vite": "^5.1.0 || ^6.0.0 || ^7.0.0",
     "wrangler": "^3.28.2 || ^4.0.0",
-    "@react-router/serve": "^7.11.0",
-    "react-router": "^7.11.0"
+    "@react-router/serve": "^7.12.0-pre.0",
+    "react-router": "^7.12.0-pre.0"
   },
   "peerDependenciesMeta": {
     "@vitejs/plugin-rsc": {