react-router 7.13.0-pre.0 → 7.13.1-pre.0

package/CHANGELOG.md

@@ -1,6 +1,68 @@
 # `react-router`
 
-## 7.13.0-pre.0
+## 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
 

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/development/{chunk-SF52QKH6.mjs → chunk-BPFEYQ6M.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v7.13.0-pre.0
+ * react-router v7.13.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -51,7 +51,7 @@ import {
   withComponentProps,
   withErrorBoundaryProps,
   withHydrateFallbackProps
-} from "./chunk-MINIYV7Y.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-6XK2MF5F.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-pre.0
+ * react-router v7.13.1-pre.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,7 +14,7 @@
 
 
 
-var _chunkITSLVQOXjs = require('./chunk-ITSLVQOX.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 = _chunkITSLVQOXjs.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 (_chunkITSLVQOXjs.shouldHydrateRouteLoader.call(void 0, 
+      if (_chunkLF5SS6XEjs.shouldHydrateRouteLoader.call(void 0, 
         routeId,
         routeInfo.clientLoader,
         routeInfo.hasLoader,
@@ -112,7 +112,7 @@ function RSCDefaultRootErrorBoundaryImpl({
       }
     }
   );
-  if (_chunkITSLVQOXjs.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),
-      _chunkITSLVQOXjs.ENABLE_DEV_WARNINGS ? heyDeveloper : null
+      _chunkLF5SS6XEjs.ENABLE_DEV_WARNINGS ? heyDeveloper : null
     );
   }
   let errorInstance;
@@ -146,7 +146,7 @@ function RSCDefaultRootErrorBoundaryImpl({
 function RSCDefaultRootErrorBoundary({
   hasRootLayout
 }) {
-  let error = _chunkITSLVQOXjs.useRouteError.call(void 0, );
+  let error = _chunkLF5SS6XEjs.useRouteError.call(void 0, );
   if (hasRootLayout === void 0) {
     throw new Error("Missing 'hasRootLayout' prop");
   }