react-router 0.0.0-experimental-56b72276e → 0.0.0-experimental-58b44aa83

package/CHANGELOG.md

@@ -1,5 +1,125 @@
 # `react-router`
 
+## 7.13.2
+
+### Patch Changes
+
+- Fix clientLoader.hydrate when an ancestor route is also hydrating a clientLoader ([#14835](https://github.com/remix-run/react-router/pull/14835))
+
+- Fix type error when passing Framework Mode route components using `Route.ComponentProps` to `createRoutesStub` ([#14892](https://github.com/remix-run/react-router/pull/14892))
+
+- Fix percent encoding in relative path navigation ([#14786](https://github.com/remix-run/react-router/pull/14786))
+
+- Add `future.unstable_passThroughRequests` flag ([#14775](https://github.com/remix-run/react-router/pull/14775))
+
+  By default, React Router normalizes the `request.url` passed to your `loader`, `action`, and `middleware` functions by removing React Router's internal implementation details (`.data` suffixes, `index` + `_routes` query params).
+
+  Enabling this flag removes that normalization and passes the raw HTTP `request` instance to your handlers. This provides a few benefits:
+  - Reduces server-side overhead by eliminating multiple `new Request()` calls on the critical path
+  - Allows you to distinguish document from data requests in your handlers base don the presence of a `.data` suffix (useful for observability purposes)
+
+  If you were previously relying on the normalization of `request.url`, you can switch to use the new sibling `unstable_url` parameter which contains a `URL` instance representing the normalized location:
+
+  ```tsx
+  // ❌ Before: you could assume there was no `.data` suffix in `request.url`
+  export async function loader({ request }: Route.LoaderArgs) {
+    let url = new URL(request.url);
+    if (url.pathname === "/path") {
+      // This check will fail with the flag enabled because the `.data` suffix will
+      // exist on data requests
+    }
+  }
+
+  // ✅ After: use `unstable_url` for normalized routing logic and `request.url`
+  // for raw routing logic
+  export async function loader({ request, unstable_url }: Route.LoaderArgs) {
+    if (unstable_url.pathname === "/path") {
+      // This will always have the `.data` suffix stripped
+    }
+
+    // And now you can distinguish between document versus data requests
+    let isDataRequest = new URL(request.url).pathname.endsWith(".data");
+  }
+  ```
+
+- Internal refactor to consolidate framework-agnostic/React-specific route type layers - no public API changes ([#14765](https://github.com/remix-run/react-router/pull/14765))
+
+- Sync protocol validation to rsc flows ([#14882](https://github.com/remix-run/react-router/pull/14882))
+
+- Add a new `unstable_url: URL` parameter to route handler methods (`loader`, `action`, `middleware`, etc.) representing the normalized URL the application is navigating to or fetching, with React Router implementation details removed (`.data`suffix, `index`/`_routes` query params) ([#14775](https://github.com/remix-run/react-router/pull/14775))
+
+  This is being added alongside the new `future.unstable_passthroughRequests` future flag so that users still have a way to access the normalized URL when that flag is enabled and non-normalized `request`'s are being passed to your handlers. When adopting this flag, you will only need to start leveraging this new parameter if you are relying on the normalization of `request.url` in your application code.
+
+  If you don't have the flag enabled, then `unstable_url` will match `request.url`.
+
+## 7.13.1
+
+### 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/{production/browser-Cloic07w.d.ts → development/browser-C9Ar1yxG.d.ts}

@@ -1,5 +1,6 @@
 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 './instrumentation-C7Lh_MjH.js';
+import { R as RouterInit } from './instrumentation-BYr6ff5D.js';
+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 } from './routeModules-CA7kSxJJ.js';
 
 declare function getRequest(): Request;
 type RSCRouteConfigEntryBase = {
@@ -64,14 +65,15 @@ type RSCRenderPayload = {
     errors: Record<string, any> | null;
     loaderData: Record<string, any>;
     location: Location;
+    routeDiscovery: RouteDiscovery;
     matches: RSCRouteMatch[];
-    patches?: RSCRouteManifest[];
+    patches?: Promise<RSCRouteManifest[]>;
     nonce?: string;
     formState?: unknown;
 };
 type RSCManifestPayload = {
     type: "manifest";
-    patches: RSCRouteManifest[];
+    patches: Promise<RSCRouteManifest[]>;
 };
 type RSCActionPayload = {
     type: "action";
@@ -98,6 +100,12 @@ type DecodeReplyFunction = (reply: FormData | string, options: {
     temporaryReferences: unknown;
 }) => Promise<unknown[]>;
 type LoadServerActionFunction = (id: string) => Promise<Function>;
+type RouteDiscovery = {
+    mode: "lazy";
+    manifestPath?: string | undefined;
+} | {
+    mode: "initial";
+};
 /**
  * Matches the given routes to a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
  * and returns an [RSC](https://react.dev/reference/rsc/server-components)
@@ -164,12 +172,13 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * @param opts.requestContext An instance of {@link RouterContextProvider}
  * that should be created per request, to be passed to [`action`](../../start/data/route-object#action)s,
  * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
+ * @param opts.routeDiscovery The route discovery configuration, used to determine how the router should discover new routes during navigations.
  * @param opts.routes Your {@link unstable_RSCRouteConfigEntry | route definitions}.
  * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
  * that contains the [RSC](https://react.dev/reference/rsc/server-components)
  * data for hydration.
  */
-declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, routeDiscovery, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
     allowedActionOrigins?: string[];
     createTemporaryReferenceSet: () => unknown;
     basename?: string;
@@ -181,6 +190,7 @@ declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryRe
     onError?: (error: unknown) => void;
     request: Request;
     routes: RSCRouteConfigEntry[];
+    routeDiscovery?: RouteDiscovery;
     generateResponse: (match: RSCMatch, { onError, temporaryReferences, }: {
         onError(error: unknown): string | undefined;
         temporaryReferences: unknown;
@@ -255,11 +265,6 @@ interface RSCHydratedRouterProps {
      * The decoded {@link unstable_RSCPayload} to hydrate.
      */
     payload: RSCPayload;
-    /**
-     * `"eager"` or `"lazy"` - Determines if links are eagerly discovered, or
-     * delayed until clicked.
-     */
-    routeDiscovery?: "eager" | "lazy";
     /**
      * A function that returns an {@link RouterContextProvider} instance
      * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
@@ -305,10 +310,9 @@ interface RSCHydratedRouterProps {
  * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
  * @param {unstable_RSCHydratedRouterProps.getContext} props.getContext n/a
  * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
- * @param {unstable_RSCHydratedRouterProps.routeDiscovery} props.routeDiscovery n/a
  * @returns A hydrated {@link DataRouter} that can be used to navigate and
  * render routes.
  */
-declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
+declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, 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, 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/{browser-Cloic07w.d.ts → browser-vtIR1Kpe.d.mts}

@@ -1,5 +1,6 @@
 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 './instrumentation-C7Lh_MjH.js';
+import { R as RouterInit } from './context-phCt_zmH.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 } from './routeModules-BRrCYrSL.mjs';
 
 declare function getRequest(): Request;
 type RSCRouteConfigEntryBase = {
@@ -64,14 +65,15 @@ type RSCRenderPayload = {
     errors: Record<string, any> | null;
     loaderData: Record<string, any>;
     location: Location;
+    routeDiscovery: RouteDiscovery;
     matches: RSCRouteMatch[];
-    patches?: RSCRouteManifest[];
+    patches?: Promise<RSCRouteManifest[]>;
     nonce?: string;
     formState?: unknown;
 };
 type RSCManifestPayload = {
     type: "manifest";
-    patches: RSCRouteManifest[];
+    patches: Promise<RSCRouteManifest[]>;
 };
 type RSCActionPayload = {
     type: "action";
@@ -98,6 +100,12 @@ type DecodeReplyFunction = (reply: FormData | string, options: {
     temporaryReferences: unknown;
 }) => Promise<unknown[]>;
 type LoadServerActionFunction = (id: string) => Promise<Function>;
+type RouteDiscovery = {
+    mode: "lazy";
+    manifestPath?: string | undefined;
+} | {
+    mode: "initial";
+};
 /**
  * Matches the given routes to a [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
  * and returns an [RSC](https://react.dev/reference/rsc/server-components)
@@ -164,12 +172,13 @@ type LoadServerActionFunction = (id: string) => Promise<Function>;
  * @param opts.requestContext An instance of {@link RouterContextProvider}
  * that should be created per request, to be passed to [`action`](../../start/data/route-object#action)s,
  * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
+ * @param opts.routeDiscovery The route discovery configuration, used to determine how the router should discover new routes during navigations.
  * @param opts.routes Your {@link unstable_RSCRouteConfigEntry | route definitions}.
  * @returns A [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
  * that contains the [RSC](https://react.dev/reference/rsc/server-components)
  * data for hydration.
  */
-declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryReferenceSet, basename, decodeReply, requestContext, routeDiscovery, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
     allowedActionOrigins?: string[];
     createTemporaryReferenceSet: () => unknown;
     basename?: string;
@@ -181,6 +190,7 @@ declare function matchRSCServerRequest({ allowedActionOrigins, createTemporaryRe
     onError?: (error: unknown) => void;
     request: Request;
     routes: RSCRouteConfigEntry[];
+    routeDiscovery?: RouteDiscovery;
     generateResponse: (match: RSCMatch, { onError, temporaryReferences, }: {
         onError(error: unknown): string | undefined;
         temporaryReferences: unknown;
@@ -255,11 +265,6 @@ interface RSCHydratedRouterProps {
      * The decoded {@link unstable_RSCPayload} to hydrate.
      */
     payload: RSCPayload;
-    /**
-     * `"eager"` or `"lazy"` - Determines if links are eagerly discovered, or
-     * delayed until clicked.
-     */
-    routeDiscovery?: "eager" | "lazy";
     /**
      * A function that returns an {@link RouterContextProvider} instance
      * which is provided as the `context` argument to client [`action`](../../start/data/route-object#action)s,
@@ -305,10 +310,9 @@ interface RSCHydratedRouterProps {
  * @param {unstable_RSCHydratedRouterProps.fetch} props.fetch n/a
  * @param {unstable_RSCHydratedRouterProps.getContext} props.getContext n/a
  * @param {unstable_RSCHydratedRouterProps.payload} props.payload n/a
- * @param {unstable_RSCHydratedRouterProps.routeDiscovery} props.routeDiscovery n/a
  * @returns A hydrated {@link DataRouter} that can be used to navigate and
  * render routes.
  */
-declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, routeDiscovery, getContext, }: RSCHydratedRouterProps): React.JSX.Element;
+declare function RSCHydratedRouter({ createFromReadableStream, fetch: fetchImplementation, payload, 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, 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 };