react-router 7.9.4 → 7.9.5-pre.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # `react-router`
 
+## 7.9.5-pre.0
+
+### Patch Changes
+
+- Move RSCHydratedRouter and utils to `/dom` export. ([#14457](https://github.com/remix-run/react-router/pull/14457))
+- useRoute: return type-safe `handle` ([#14462](https://github.com/remix-run/react-router/pull/14462))
+
+  For example:
+
+  ```ts
+  // app/routes/admin.tsx
+  const handle = { hello: "world" };
+  ```
+
+  ```ts
+  // app/routes/some-other-route.tsx
+  export default function Component() {
+    const admin = useRoute("routes/admin");
+    if (!admin) throw new Error("Not nested within 'routes/admin'");
+    console.log(admin.handle);
+    //                ^? { hello: string }
+  }
+  ```
+
+- 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={[...]} />`
+  - Data Mode
+    - `createBrowserRouter(routes, { unstable_instrumentations: [...] })`
+
+  This also adds a new `unstable_pattern` parameter to loaders/actions/middleware which contains the un-interpolated route pattern (i.e., `/blog/:slug`) which is useful for aggregating performance metrics by route
+
 ## 7.9.4
 
 ### Patch Changes
@@ -153,7 +187,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
@@ -180,7 +213,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))
 
@@ -229,7 +262,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.
@@ -263,7 +295,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>`
@@ -909,7 +940,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>`
 
@@ -1097,7 +1127,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`
@@ -1106,7 +1135,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`
@@ -1262,7 +1290,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
@@ -1277,7 +1304,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-DM83uryY.d.ts

@@ -0,0 +1,310 @@
+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-iAqbU5Q4.js';
+
+type RSCRouteConfigEntryBase = {
+    action?: ActionFunction;
+    clientAction?: ClientActionFunction;
+    clientLoader?: ClientLoaderFunction;
+    ErrorBoundary?: React.ComponentType<any>;
+    handle?: any;
+    headers?: HeadersFunction;
+    HydrateFallback?: React.ComponentType<any>;
+    Layout?: React.ComponentType<any>;
+    links?: LinksFunction;
+    loader?: LoaderFunction;
+    meta?: MetaFunction;
+    shouldRevalidate?: ShouldRevalidateFunction;
+};
+type RSCRouteConfigEntry = RSCRouteConfigEntryBase & {
+    id: string;
+    path?: string;
+    Component?: React.ComponentType<any>;
+    lazy?: () => Promise<RSCRouteConfigEntryBase & ({
+        default?: React.ComponentType<any>;
+        Component?: never;
+    } | {
+        default?: never;
+        Component?: React.ComponentType<any>;
+    })>;
+} & ({
+    index: true;
+} | {
+    children?: RSCRouteConfigEntry[];
+});
+type RSCRouteConfig = Array<RSCRouteConfigEntry>;
+type RSCRouteManifest = {
+    clientAction?: ClientActionFunction;
+    clientLoader?: ClientLoaderFunction;
+    element?: React.ReactElement | false;
+    errorElement?: React.ReactElement;
+    handle?: any;
+    hasAction: boolean;
+    hasComponent: boolean;
+    hasErrorBoundary: boolean;
+    hasLoader: boolean;
+    hydrateFallbackElement?: React.ReactElement;
+    id: string;
+    index?: boolean;
+    links?: LinksFunction;
+    meta?: MetaFunction;
+    parentId?: string;
+    path?: string;
+    shouldRevalidate?: ShouldRevalidateFunction;
+};
+type RSCRouteMatch = RSCRouteManifest & {
+    params: Params;
+    pathname: string;
+    pathnameBase: string;
+};
+type RSCRenderPayload = {
+    type: "render";
+    actionData: Record<string, any> | null;
+    basename: string | undefined;
+    errors: Record<string, any> | null;
+    loaderData: Record<string, any>;
+    location: Location;
+    matches: RSCRouteMatch[];
+    patches?: RSCRouteManifest[];
+    nonce?: string;
+    formState?: unknown;
+};
+type RSCManifestPayload = {
+    type: "manifest";
+    patches: RSCRouteManifest[];
+};
+type RSCActionPayload = {
+    type: "action";
+    actionResult: Promise<unknown>;
+    rerender?: Promise<RSCRenderPayload | RSCRedirectPayload>;
+};
+type RSCRedirectPayload = {
+    type: "redirect";
+    status: number;
+    location: string;
+    replace: boolean;
+    reload: boolean;
+    actionResult?: Promise<unknown>;
+};
+type RSCPayload = RSCRenderPayload | RSCManifestPayload | RSCActionPayload | RSCRedirectPayload;
+type RSCMatch = {
+    statusCode: number;
+    headers: Headers;
+    payload: RSCPayload;
+};
+type DecodeActionFunction = (formData: FormData) => Promise<() => Promise<unknown>>;
+type DecodeFormStateFunction = (result: unknown, formData: FormData) => unknown;
+type DecodeReplyFunction = (reply: FormData | string, { temporaryReferences }: {
+    temporaryReferences: unknown;
+}) => Promise<unknown[]>;
+type LoadServerActionFunction = (id: string) => Promise<Function>;
+/**
+ * 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)
+ * [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+ * encoding an {@link unstable_RSCPayload} for consumption by an [RSC](https://react.dev/reference/rsc/server-components)
+ * enabled client router.
+ *
+ * @example
+ * import {
+ *   createTemporaryReferenceSet,
+ *   decodeAction,
+ *   decodeReply,
+ *   loadServerAction,
+ *   renderToReadableStream,
+ * } from "@vitejs/plugin-rsc/rsc";
+ * import { unstable_matchRSCServerRequest as matchRSCServerRequest } from "react-router";
+ *
+ * matchRSCServerRequest({
+ *   createTemporaryReferenceSet,
+ *   decodeAction,
+ *   decodeFormState,
+ *   decodeReply,
+ *   loadServerAction,
+ *   request,
+ *   routes: routes(),
+ *   generateResponse(match) {
+ *     return new Response(
+ *       renderToReadableStream(match.payload),
+ *       {
+ *         status: match.statusCode,
+ *         headers: match.headers,
+ *       }
+ *     );
+ *   },
+ * });
+ *
+ * @name unstable_matchRSCServerRequest
+ * @public
+ * @category RSC
+ * @mode data
+ * @param opts Options
+ * @param opts.basename The basename to use when matching the request.
+ * @param opts.createTemporaryReferenceSet A function that returns a temporary
+ * reference set for the request, used to track temporary references in the [RSC](https://react.dev/reference/rsc/server-components)
+ * stream.
+ * @param opts.decodeAction Your `react-server-dom-xyz/server`'s `decodeAction`
+ * function, responsible for loading a server action.
+ * @param opts.decodeFormState A function responsible for decoding form state for
+ * progressively enhanceable forms with React's [`useActionState`](https://react.dev/reference/react/useActionState)
+ * using your `react-server-dom-xyz/server`'s `decodeFormState`.
+ * @param opts.decodeReply Your `react-server-dom-xyz/server`'s `decodeReply`
+ * function, used to decode the server function's arguments and bind them to the
+ * implementation for invocation by the router.
+ * @param opts.generateResponse A function responsible for using your
+ * `renderToReadableStream` to generate a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
+ * encoding the {@link unstable_RSCPayload}.
+ * @param opts.loadServerAction Your `react-server-dom-xyz/server`'s
+ * `loadServerAction` function, used to load a server action by ID.
+ * @param opts.onError An optional error handler that will be called with any
+ * errors that occur during the request processing.
+ * @param opts.request The [`Request`](https://developer.mozilla.org/en-US/docs/Web/API/Request)
+ * to match against.
+ * @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.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({ createTemporaryReferenceSet, basename, decodeReply, requestContext, loadServerAction, decodeAction, decodeFormState, onError, request, routes, generateResponse, }: {
+    createTemporaryReferenceSet: () => unknown;
+    basename?: string;
+    decodeReply?: DecodeReplyFunction;
+    decodeAction?: DecodeActionFunction;
+    decodeFormState?: DecodeFormStateFunction;
+    requestContext?: RouterContextProvider;
+    loadServerAction?: LoadServerActionFunction;
+    onError?: (error: unknown) => void;
+    request: Request;
+    routes: RSCRouteConfigEntry[];
+    generateResponse: (match: RSCMatch, { temporaryReferences, }: {
+        temporaryReferences: unknown;
+    }) => Response;
+}): Promise<Response>;
+
+type BrowserCreateFromReadableStreamFunction = (body: ReadableStream<Uint8Array>, { temporaryReferences, }: {
+    temporaryReferences: unknown;
+}) => Promise<unknown>;
+type EncodeReplyFunction = (args: unknown[], options: {
+    temporaryReferences: unknown;
+}) => Promise<BodyInit>;
+/**
+ * Create a React `callServer` implementation for React Router.
+ *
+ * @example
+ * import {
+ *   createFromReadableStream,
+ *   createTemporaryReferenceSet,
+ *   encodeReply,
+ *   setServerCallback,
+ * } from "@vitejs/plugin-rsc/browser";
+ * import { unstable_createCallServer as createCallServer } from "react-router";
+ *
+ * setServerCallback(
+ *   createCallServer({
+ *     createFromReadableStream,
+ *     createTemporaryReferenceSet,
+ *     encodeReply,
+ *   })
+ * );
+ *
+ * @name unstable_createCallServer
+ * @public
+ * @category RSC
+ * @mode data
+ * @param opts Options
+ * @param opts.createFromReadableStream Your `react-server-dom-xyz/client`'s
+ * `createFromReadableStream`. Used to decode payloads from the server.
+ * @param opts.createTemporaryReferenceSet A function that creates a temporary
+ * reference set for the [RSC](https://react.dev/reference/rsc/server-components)
+ * payload.
+ * @param opts.encodeReply Your `react-server-dom-xyz/client`'s `encodeReply`.
+ * Used when sending payloads to the server.
+ * @param opts.fetch Optional [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+ * implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
+ * @returns A function that can be used to call server actions.
+ */
+declare function createCallServer({ createFromReadableStream, createTemporaryReferenceSet, encodeReply, fetch: fetchImplementation, }: {
+    createFromReadableStream: BrowserCreateFromReadableStreamFunction;
+    createTemporaryReferenceSet: () => unknown;
+    encodeReply: EncodeReplyFunction;
+    fetch?: (request: Request) => Promise<Response>;
+}): (id: string, args: unknown[]) => Promise<unknown>;
+/**
+ * Props for the {@link unstable_RSCHydratedRouter} component.
+ *
+ * @name unstable_RSCHydratedRouterProps
+ * @category Types
+ */
+interface RSCHydratedRouterProps {
+    /**
+     * Your `react-server-dom-xyz/client`'s `createFromReadableStream` function,
+     * used to decode payloads from the server.
+     */
+    createFromReadableStream: BrowserCreateFromReadableStreamFunction;
+    /**
+     * Optional fetch implementation. Defaults to global [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch).
+     */
+    fetch?: (request: Request) => Promise<Response>;
+    /**
+     * 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,
+     * [`loader`](../../start/data/route-object#loader)s and [middleware](../../how-to/middleware).
+     * This function is called to generate a fresh `context` instance on each
+     * navigation or fetcher call.
+     */
+    getContext?: RouterInit["getContext"];
+}
+/**
+ * Hydrates a server rendered {@link unstable_RSCPayload} in the browser.
+ *
+ * @example
+ * import { startTransition, StrictMode } from "react";
+ * import { hydrateRoot } from "react-dom/client";
+ * import {
+ *   unstable_getRSCStream as getRSCStream,
+ *   unstable_RSCHydratedRouter as RSCHydratedRouter,
+ * } from "react-router";
+ * import type { unstable_RSCPayload as RSCPayload } from "react-router";
+ *
+ * createFromReadableStream(getRSCStream()).then((payload) =>
+ *   startTransition(async () => {
+ *     hydrateRoot(
+ *       document,
+ *       <StrictMode>
+ *         <RSCHydratedRouter
+ *           createFromReadableStream={createFromReadableStream}
+ *           payload={payload}
+ *         />
+ *       </StrictMode>,
+ *       { formState: await getFormState(payload) },
+ *     );
+ *   }),
+ * );
+ *
+ * @name unstable_RSCHydratedRouter
+ * @public
+ * @category RSC
+ * @mode data
+ * @param props Props
+ * @param {unstable_RSCHydratedRouterProps.createFromReadableStream} props.createFromReadableStream n/a
+ * @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;
+
+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 };