react-router 7.13.0 → 7.13.1-pre.0

package/CHANGELOG.md

@@ -1,5 +1,67 @@
 # `react-router`
 
+## 7.13.1-pre.0
+
+### Patch Changes
+
+- fix null reference exception in bad codepath leading to invalid route tree comparisons ([#14780](https://github.com/remix-run/react-router/pull/14780))
+- fix: clear timeout when turbo-stream encoding completes ([#14810](https://github.com/remix-run/react-router/pull/14810))
+- Improve error message when Origin header is invalid ([#14743](https://github.com/remix-run/react-router/pull/14743))
+- Fix matchPath optional params matching without a "/" separator. ([#14689](https://github.com/remix-run/react-router/pull/14689))
+  - matchPath("/users/:id?", "/usersblah") now returns null.
+  - matchPath("/test_route/:part?", "/test_route_more") now returns null.
+
+- add RSC unstable_getRequest ([#14758](https://github.com/remix-run/react-router/pull/14758))
+- Fix `HydrateFallback` rendering during initial lazy route discovery with matching splat route ([#14740](https://github.com/remix-run/react-router/pull/14740))
+- [UNSTABLE] Add support for `<Link unstable_mask>` in Data Mode which allows users to navigate to a URL in the router but "mask" the URL displayed in the browser. This is useful for contextual routing usages such as displaying an image in a model on top of a gallery, but displaying a browser URL directly to the image that can be shared and loaded without the contextual gallery in the background. ([#14716](https://github.com/remix-run/react-router/pull/14716))
+
+  ```tsx
+  // routes/gallery.tsx
+  export function clientLoader({ request }: Route.LoaderArgs) {
+    let sp = new URL(request.url).searchParams;
+    return {
+      images: getImages(),
+      // When the router location has the image param, load the modal data
+      modalImage: sp.has("image") ? getImage(sp.get("image")!) : null,
+    };
+  }
+
+  export default function Gallery({ loaderData }: Route.ComponentProps) {
+    return (
+      <>
+        <GalleryGrid>
+          {loaderData.images.map((image) => (
+            <Link
+              key={image.id}
+              {/* Navigate the router to /galley?image=N */}}
+              to={`/gallery?image=${image.id}`}
+              {/* But display /images/N in the URL bar */}}
+              unstable_mask={`/images/${image.id}`}
+            >
+              <img src={image.url} alt={image.alt} />
+            </Link>
+          ))}
+        </GalleryGrid>
+
+        {/* When the modal data exists, display the modal */}
+        {data.modalImage ? (
+          <dialog open>
+            <img src={data.modalImage.url} alt={data.modalImage.alt} />
+          </dialog>
+        ) : null}
+      </>
+    );
+  }
+  ```
+
+  Notes:
+  - The masked location, if present, will be available on `useLocation().unstable_mask` so you can detect whether you are currently masked or not.
+  - Masked URLs only work for SPA use cases, and will be removed from `history.state` during SSR.
+  - This provides a first-class API to mask URLs in Data Mode to achieve the same behavior you could do in Declarative Mode via [manual `backgroundLocation` management](https://github.com/remix-run/react-router/tree/main/examples/modal).
+
+- RSC: Update failed origin checks to return a 400 status and appropriate UI instead of a generic 500 ([#14755](https://github.com/remix-run/react-router/pull/14755))
+- Preserve query parameters and hash on manifest version mismatch reload ([#14813](https://github.com/remix-run/react-router/pull/14813))
+
 ## 7.13.0
 
 ### Minor Changes
@@ -37,25 +99,25 @@
 
   | URL `/a/b/c` | **HTTP pathname** | **`request` pathname\`** |
   | ------------ | ----------------- | ------------------------ |
-  | **Document** | `/a/b/c`          | `/a/b/c` ✅               |
-  | **Data**     | `/a/b/c.data`     | `/a/b/c` ✅               |
+  | **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/` ✅              |
+  | **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` ✅               |
+  | **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/` ✅              |
+  | **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.
 
@@ -82,14 +144,12 @@
 - \[UNSTABLE] Add a new `unstable_defaultShouldRevalidate` flag to various APIs to allow opt-ing out of standard revalidation behaviors. ([#14542](https://github.com/remix-run/react-router/pull/14542))
 
   If active routes include a `shouldRevalidate` function, then your value will be passed as `defaultShouldRevalidate` in those function so that the route always has the final revalidation determination.
-
   - `<Form method="post" unstable_defaultShouldRevalidate={false}>`
   - `submit(data, { method: "post", unstable_defaultShouldRevalidate: false })`
   - `<fetcher.Form method="post" unstable_defaultShouldRevalidate={false}>`
   - `fetcher.submit(data, { method: "post", unstable_defaultShouldRevalidate: false })`
 
   This is also available on non-submission APIs that may trigger revalidations due to changing search params:
-
   - `<Link to="/" unstable_defaultShouldRevalidate={false}>`
   - `navigate("/?foo=bar", { unstable_defaultShouldRevalidate: false })`
   - `setSearchParams(params, { unstable_defaultShouldRevalidate: false })`
@@ -112,7 +172,6 @@
   - ⚠️ This is a breaking change if you have begun using `fetcher.unstable_reset()`
 
 - Stabilize the `dataStrategy` `match.shouldRevalidateArgs`/`match.shouldCallHandler()` APIs. ([#14592](https://github.com/remix-run/react-router/pull/14592))
-
   - The `match.shouldLoad` API is now marked deprecated in favor of these more powerful alternatives
 
   - If you're using this API in a custom `dataStrategy` today, you can swap to the new API at your convenience:
@@ -241,7 +300,6 @@
 - Ensure action handlers run for routes with middleware even if no loader is present ([#14443](https://github.com/remix-run/react-router/pull/14443))
 
 - Add `unstable_instrumentations` API to allow users to add observablity to their apps by instrumenting route loaders, actions, middlewares, lazy, as well as server-side request handlers and client side navigations/fetches ([#14412](https://github.com/remix-run/react-router/pull/14412))
-
   - Framework Mode:
     - `entry.server.tsx`: `export const unstable_instrumentations = [...]`
     - `entry.client.tsx`: `<HydratedRouter unstable_instrumentations={[...]} />`
@@ -403,7 +461,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
@@ -430,7 +487,7 @@
 
 - \[UNSTABLE] Add `<RouterProvider unstable_onError>`/`<HydratedRouter unstable_onError>` prop for client side error reporting ([#14162](https://github.com/remix-run/react-router/pull/14162))
 
-- server action revalidation opt out via $SKIP\_REVALIDATION field ([#14154](https://github.com/remix-run/react-router/pull/14154))
+- server action revalidation opt out via $SKIP_REVALIDATION field ([#14154](https://github.com/remix-run/react-router/pull/14154))
 
 - Properly escape interpolated param values in `generatePath()` ([#13530](https://github.com/remix-run/react-router/pull/13530))
 
@@ -479,7 +536,6 @@
 - Remove dependency on `@types/node` in TypeScript declaration files ([#14059](https://github.com/remix-run/react-router/pull/14059))
 
 - Fix types for `UIMatch` to reflect that the `loaderData`/`data` properties may be `undefined` ([#12206](https://github.com/remix-run/react-router/pull/12206))
-
   - When an `ErrorBoundary` is being rendered, not all active matches will have loader data available, since it may have been their `loader` that threw to trigger the boundary
   - The `UIMatch.data` type was not correctly handing this and would always reflect the presence of data, leading to the unexpected runtime errors when an `ErrorBoundary` was rendered
   - ⚠️ This may cause some type errors to show up in your code for unguarded `match.data` accesses - you should properly guard for `undefined` values in those scenarios.
@@ -513,7 +569,6 @@
 - \[UNSTABLE] When middleware is enabled, make the `context` parameter read-only (via `Readonly<unstable_RouterContextProvider>`) so that TypeScript will not allow you to write arbitrary fields to it in loaders, actions, or middleware. ([#14097](https://github.com/remix-run/react-router/pull/14097))
 
 - \[UNSTABLE] Rename and alter the signature/functionality of the `unstable_respond` API in `staticHandler.query`/`staticHandler.queryRoute` ([#14103](https://github.com/remix-run/react-router/pull/14103))
-
   - The API has been renamed to `unstable_generateMiddlewareResponse` for clarity
   - The main functional change is that instead of running the loaders/actions before calling `unstable_respond` and handing you the result, we now pass a `query`/`queryRoute` function as a parameter and you execute the loaders/actions inside your callback, giving you full access to pre-processing and error handling
   - The `query` version of the API now has a signature of `(query: (r: Request) => Promise<StaticHandlerContext | Response>) => Promise<Response>`
@@ -1159,7 +1214,6 @@
   ```
 
   Similar to server-side requests, a fresh `context` will be created per navigation (or `fetcher` call). If you have initial data you'd like to populate in the context for every request, you can provide an `unstable_getContext` function at the root of your app:
-
   - Library mode - `createBrowserRouter(routes, { unstable_getContext })`
   - Framework mode - `<HydratedRouter unstable_getContext>`
 
@@ -1347,7 +1401,6 @@ _No changes_
 - Remove `future.v7_normalizeFormMethod` future flag ([#11697](https://github.com/remix-run/react-router/pull/11697))
 
 - For Remix consumers migrating to React Router, the `crypto` global from the [Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) is now required when using cookie and session APIs. This means that the following APIs are provided from `react-router` rather than platform-specific packages: ([#11837](https://github.com/remix-run/react-router/pull/11837))
-
   - `createCookie`
   - `createCookieSessionStorage`
   - `createMemorySessionStorage`
@@ -1356,7 +1409,6 @@ _No changes_
   For consumers running older versions of Node, the `installGlobals` function from `@remix-run/node` has been updated to define `globalThis.crypto`, using [Node's `require('node:crypto').webcrypto` implementation.](https://nodejs.org/api/webcrypto.html)
 
   Since platform-specific packages no longer need to implement this API, the following low-level APIs have been removed:
-
   - `createCookieFactory`
   - `createSessionStorageFactory`
   - `createCookieSessionStorageFactory`
@@ -1512,7 +1564,6 @@ _No changes_
   ```
 
   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
@@ -1527,7 +1578,6 @@ _No changes_
   ```
 
   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)
 

package/dist/development/{browser-BEPxnEBW.d.mts → browser-DzsJABDQ.d.mts}

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-5iOvts3c.mjs';
+import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-cLsU7kHk.mjs';
 
+declare function getRequest(): Request;
 type RSCRouteConfigEntryBase = {
     action?: ActionFunction;
     clientAction?: ClientActionFunction;
@@ -310,4 +311,4 @@ interface RSCHydratedRouterProps {
  */
 declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
 
-export { type BrowserCreateFromReadableStreamFunction as B, type DecodeActionFunction as D, type EncodeReplyFunction as E, type LoadServerActionFunction as L, RSCHydratedRouter as R, type DecodeFormStateFunction as a, type DecodeReplyFunction as b, createCallServer as c, type RSCManifestPayload as d, type RSCPayload as e, type RSCRenderPayload as f, type RSCHydratedRouterProps as g, type RSCMatch as h, type RSCRouteManifest as i, type RSCRouteMatch as j, type RSCRouteConfigEntry as k, type RSCRouteConfig as l, matchRSCServerRequest as m };
+export { type BrowserCreateFromReadableStreamFunction as B, type DecodeActionFunction as D, type EncodeReplyFunction as E, type LoadServerActionFunction as L, RSCHydratedRouter as R, type DecodeFormStateFunction as a, type DecodeReplyFunction as b, createCallServer as c, type RSCManifestPayload as d, type RSCPayload as e, type RSCRenderPayload as f, getRequest as g, type RSCHydratedRouterProps as h, type RSCMatch as i, type RSCRouteManifest as j, type RSCRouteMatch as k, type RSCRouteConfigEntry as l, matchRSCServerRequest as m, type RSCRouteConfig as n };

package/dist/{production/browser-BEPxnEBW.d.mts → development/browser-sPQ7eaK4.d.ts}

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './router-5iOvts3c.mjs';
+import { L as Location, C as ClientActionFunction, a as ClientLoaderFunction, b as LinksFunction, M as MetaFunction, S as ShouldRevalidateFunction, P as Params, c as RouterContextProvider, A as ActionFunction, H as HeadersFunction, d as LoaderFunction, e as RouterInit } from './instrumentation--6Pioq_G.js';
 
+declare function getRequest(): Request;
 type RSCRouteConfigEntryBase = {
     action?: ActionFunction;
     clientAction?: ClientActionFunction;
@@ -310,4 +311,4 @@ interface RSCHydratedRouterProps {
  */
 declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
 
-export { type BrowserCreateFromReadableStreamFunction as B, type DecodeActionFunction as D, type EncodeReplyFunction as E, type LoadServerActionFunction as L, RSCHydratedRouter as R, type DecodeFormStateFunction as a, type DecodeReplyFunction as b, createCallServer as c, type RSCManifestPayload as d, type RSCPayload as e, type RSCRenderPayload as f, type RSCHydratedRouterProps as g, type RSCMatch as h, type RSCRouteManifest as i, type RSCRouteMatch as j, type RSCRouteConfigEntry as k, type RSCRouteConfig as l, matchRSCServerRequest as m };
+export { type BrowserCreateFromReadableStreamFunction as B, type DecodeActionFunction as D, type EncodeReplyFunction as E, type LoadServerActionFunction as L, RSCHydratedRouter as R, type DecodeFormStateFunction as a, type DecodeReplyFunction as b, createCallServer as c, type RSCManifestPayload as d, type RSCPayload as e, type RSCRenderPayload as f, getRequest as g, type RSCHydratedRouterProps as h, type RSCMatch as i, type RSCRouteManifest as j, type RSCRouteMatch as k, type RSCRouteConfigEntry as l, matchRSCServerRequest as m, type RSCRouteConfig as n };

package/dist/{production/chunk-GSFLVUYQ.mjs → development/chunk-BPFEYQ6M.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.13.0
+ * react-router v7.13.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -51,7 +51,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-Y3R63HEB.mjs";
+} from "./chunk-WQZSGSJA.mjs";
 
 // lib/dom/ssr/server.tsx
 import * as React from "react";
@@ -758,7 +758,14 @@ function prependCookies(parentHeaders, childHeaders) {
 // lib/actions.ts
 function throwIfPotentialCSRFAttack(headers, allowedActionOrigins) {
   let originHeader = headers.get("origin");
-  let originDomain = typeof originHeader === "string" && originHeader !== "null" ? new URL(originHeader).host : originHeader;
+  let originDomain = null;
+  try {
+    originDomain = typeof originHeader === "string" && originHeader !== "null" ? new URL(originHeader).host : originHeader;
+  } catch {
+    throw new Error(
+      `\`origin\` header is not a valid URL. Aborting the action.`
+    );
+  }
   let host = parseHostHeader(headers);
   if (originDomain && (!host || originDomain !== host.value)) {
     if (!isAllowedOrigin(originDomain, allowedActionOrigins)) {
@@ -1049,9 +1056,11 @@ function encodeViaTurboStream(data2, requestSignal, streamTimeout, serverMode) {
     () => controller.abort(new Error("Server Timeout")),
     typeof streamTimeout === "number" ? streamTimeout : 4950
   );
-  requestSignal.addEventListener("abort", () => clearTimeout(timeoutId));
+  let clearStreamTimeout = () => clearTimeout(timeoutId);
+  requestSignal.addEventListener("abort", clearStreamTimeout);
   return encode(data2, {
     signal: controller.signal,
+    onComplete: clearStreamTimeout,
     plugins: [
       (value) => {
         if (value instanceof Error) {

package/dist/{production/chunk-NGWWS4QJ.js → development/chunk-CGPAOPIJ.js}

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }/**
- * react-router v7.13.0
+ * react-router v7.13.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,7 +14,7 @@
 
 
 
-var _chunkQSNCZFX5js = require('./chunk-QSNCZFX5.js');
+var _chunkLF5SS6XEjs = require('./chunk-LF5SS6XE.js');
 
 // lib/dom/ssr/hydration.tsx
 function getHydrationData({
@@ -29,12 +29,12 @@ function getHydrationData({
     ...state,
     loaderData: { ...state.loaderData }
   };
-  let initialMatches = _chunkQSNCZFX5js.matchRoutes.call(void 0, routes, location, basename);
+  let initialMatches = _chunkLF5SS6XEjs.matchRoutes.call(void 0, routes, location, basename);
   if (initialMatches) {
     for (let match of initialMatches) {
       let routeId = match.route.id;
       let routeInfo = getRouteInfo(routeId);
-      if (_chunkQSNCZFX5js.shouldHydrateRouteLoader.call(void 0, 
+      if (_chunkLF5SS6XEjs.shouldHydrateRouteLoader.call(void 0, 
         routeId,
         routeInfo.clientLoader,
         routeInfo.hasLoader,
@@ -112,7 +112,7 @@ function RSCDefaultRootErrorBoundaryImpl({
       }
     }
   );
-  if (_chunkQSNCZFX5js.isRouteErrorResponse.call(void 0, error)) {
+  if (_chunkLF5SS6XEjs.isRouteErrorResponse.call(void 0, error)) {
     return /* @__PURE__ */ _react2.default.createElement(
       ErrorWrapper,
       {
@@ -120,7 +120,7 @@ function RSCDefaultRootErrorBoundaryImpl({
         title: "Unhandled Thrown Response!"
       },
       /* @__PURE__ */ _react2.default.createElement("h1", { style: { fontSize: "24px" } }, error.status, " ", error.statusText),
-      _chunkQSNCZFX5js.ENABLE_DEV_WARNINGS ? heyDeveloper : null
+      _chunkLF5SS6XEjs.ENABLE_DEV_WARNINGS ? heyDeveloper : null
     );
   }
   let errorInstance;
@@ -146,7 +146,7 @@ function RSCDefaultRootErrorBoundaryImpl({
 function RSCDefaultRootErrorBoundary({
   hasRootLayout
 }) {
-  let error = _chunkQSNCZFX5js.useRouteError.call(void 0, );
+  let error = _chunkLF5SS6XEjs.useRouteError.call(void 0, );
   if (hasRootLayout === void 0) {
     throw new Error("Missing 'hasRootLayout' prop");
   }