react-router 7.10.0-pre.0 → 7.10.0-pre.1

package/dist/production/{chunk-SGCRBGEM.js → chunk-YU3WNS3T.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.10.0-pre.0
+ * react-router v7.10.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,7 +14,7 @@
 
 
 
-var _chunk55FFLVQPjs = require('./chunk-55FFLVQP.js');
+var _chunkC7S4I3K5js = require('./chunk-C7S4I3K5.js');
 
 // lib/dom/ssr/hydration.tsx
 function getHydrationData({
@@ -29,12 +29,12 @@ function getHydrationData({
     ...state,
     loaderData: { ...state.loaderData }
   };
-  let initialMatches = _chunk55FFLVQPjs.matchRoutes.call(void 0, routes, location, basename);
+  let initialMatches = _chunkC7S4I3K5js.matchRoutes.call(void 0, routes, location, basename);
   if (initialMatches) {
     for (let match of initialMatches) {
       let routeId = match.route.id;
       let routeInfo = getRouteInfo(routeId);
-      if (_chunk55FFLVQPjs.shouldHydrateRouteLoader.call(void 0, 
+      if (_chunkC7S4I3K5js.shouldHydrateRouteLoader.call(void 0, 
         routeId,
         routeInfo.clientLoader,
         routeInfo.hasLoader,
@@ -112,7 +112,7 @@ function RSCDefaultRootErrorBoundaryImpl({
       }
     }
   );
-  if (_chunk55FFLVQPjs.isRouteErrorResponse.call(void 0, error)) {
+  if (_chunkC7S4I3K5js.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),
-      _chunk55FFLVQPjs.ENABLE_DEV_WARNINGS ? heyDeveloper : null
+      _chunkC7S4I3K5js.ENABLE_DEV_WARNINGS ? heyDeveloper : null
     );
   }
   let errorInstance;
@@ -146,7 +146,7 @@ function RSCDefaultRootErrorBoundaryImpl({
 function RSCDefaultRootErrorBoundary({
   hasRootLayout
 }) {
-  let error = _chunk55FFLVQPjs.useRouteError.call(void 0, );
+  let error = _chunkC7S4I3K5js.useRouteError.call(void 0, );
   if (hasRootLayout === void 0) {
     throw new Error("Missing 'hasRootLayout' prop");
   }

package/dist/production/dom-export.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { f as RouterProviderProps$1, e as RouterInit, u as unstable_ClientInstrumentation, g as unstable_ClientOnErrorFunction } from './router-Dgz_Mh9m.mjs';
-export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-BHySFrZ2.mjs';
+import { f as RouterProviderProps$1, e as RouterInit, u as unstable_ClientInstrumentation, g as unstable_ClientOnErrorFunction } from './router-CwNp5l9u.mjs';
+export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-C5z6FZmz.mjs';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
@@ -25,16 +25,9 @@ interface HydratedRouterProps {
      * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
      * mostly useful for observability such as wrapping navigations, fetches,
      * as well as route loaders/actions/middlewares with logging and/or performance
-     * tracing.
+     * tracing. See the [docs](../../how-to/instrumentation) for more information.
      *
      * ```tsx
-     * startTransition(() => {
-     *   hydrateRoot(
-     *     document,
-     *     <HydratedRouter unstable_instrumentations={[logging]} />
-     *   );
-     * });
-     *
      * const logging = {
      *   router({ instrument }) {
      *     instrument({
@@ -67,6 +60,13 @@ interface HydratedRouterProps {
      *   let duration = Math.round(performance.now() - start);
      *   console.log(`end ${label} (${duration}ms)`);
      * }
+     *
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
      * ```
      */
     unstable_instrumentations?: unstable_ClientInstrumentation[];

package/dist/production/dom-export.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RouterProviderProps as RouterProviderProps$1, RouterInit, unstable_ClientOnErrorFunction } from 'react-router';
-import { u as unstable_ClientInstrumentation } from './instrumentation-Dwf-sTWa.js';
-export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-eL-tAN4R.js';
+import { u as unstable_ClientInstrumentation } from './instrumentation-BB0wRuqz.js';
+export { D as unstable_DecodeActionFunction, a as unstable_DecodeFormStateFunction, b as unstable_DecodeReplyFunction, R as unstable_RSCHydratedRouter, d as unstable_RSCManifestPayload, e as unstable_RSCPayload, f as unstable_RSCRenderPayload, c as unstable_createCallServer } from './browser-BpxEZgZC.js';
 
 type RouterProviderProps = Omit<RouterProviderProps$1, "flushSync">;
 declare function RouterProvider(props: Omit<RouterProviderProps, "flushSync">): React.JSX.Element;
@@ -26,16 +26,9 @@ interface HydratedRouterProps {
      * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
      * mostly useful for observability such as wrapping navigations, fetches,
      * as well as route loaders/actions/middlewares with logging and/or performance
-     * tracing.
+     * tracing. See the [docs](../../how-to/instrumentation) for more information.
      *
      * ```tsx
-     * startTransition(() => {
-     *   hydrateRoot(
-     *     document,
-     *     <HydratedRouter unstable_instrumentations={[logging]} />
-     *   );
-     * });
-     *
      * const logging = {
      *   router({ instrument }) {
      *     instrument({
@@ -68,6 +61,13 @@ interface HydratedRouterProps {
      *   let duration = Math.round(performance.now() - start);
      *   console.log(`end ${label} (${duration}ms)`);
      * }
+     *
+     * startTransition(() => {
+     *   hydrateRoot(
+     *     document,
+     *     <HydratedRouter unstable_instrumentations={[logging]} />
+     *   );
+     * });
      * ```
      */
     unstable_instrumentations?: unstable_ClientInstrumentation[];

package/dist/production/dom-export.js

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }/**
- * react-router v7.10.0-pre.0
+ * react-router v7.10.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -13,7 +13,7 @@
 
 
 
-var _chunkSGCRBGEMjs = require('./chunk-SGCRBGEM.js');
+var _chunkYU3WNS3Tjs = require('./chunk-YU3WNS3T.js');
 
 
 
@@ -32,7 +32,7 @@ var _chunkSGCRBGEMjs = require('./chunk-SGCRBGEM.js');
 
 
 
-var _chunk55FFLVQPjs = require('./chunk-55FFLVQP.js');
+var _chunkC7S4I3K5js = require('./chunk-C7S4I3K5.js');
 
 // lib/dom-export/dom-router-provider.tsx
 var _react = require('react'); var React = _interopRequireWildcard(_react); var React2 = _interopRequireWildcard(_react); var React3 = _interopRequireWildcard(_react);
@@ -204,7 +204,7 @@ function HydratedRouter(props) {
   }, []);
   React2.useEffect(() => {
     if (process.env.NODE_ENV === "development" && criticalCss === void 0) {
-      document.querySelectorAll(`[${_chunk55FFLVQPjs.CRITICAL_CSS_DATA_ATTRIBUTE}]`).forEach((element) => element.remove());
+      document.querySelectorAll(`[${_chunkC7S4I3K5js.CRITICAL_CSS_DATA_ATTRIBUTE}]`).forEach((element) => element.remove());
     }
   }, [criticalCss]);
   let [location2, setLocation] = React2.useState(router.state.location);
@@ -376,10 +376,10 @@ function createRouterFromPayload({
     };
   if (payload.type !== "render") throw new Error("Invalid payload type");
   globalVar.__reactRouterRouteModules = _nullishCoalesce(globalVar.__reactRouterRouteModules, () => ( {}));
-  _chunkSGCRBGEMjs.populateRSCRouteModules.call(void 0, globalVar.__reactRouterRouteModules, payload.matches);
+  _chunkYU3WNS3Tjs.populateRSCRouteModules.call(void 0, globalVar.__reactRouterRouteModules, payload.matches);
   let patches = /* @__PURE__ */ new Map();
   _optionalChain([payload, 'access', _22 => _22.patches, 'optionalAccess', _23 => _23.forEach, 'call', _24 => _24((patch) => {
-    _chunk55FFLVQPjs.invariant.call(void 0, patch.parentId, "Invalid patch parentId");
+    _chunkC7S4I3K5js.invariant.call(void 0, patch.parentId, "Invalid patch parentId");
     if (!patches.has(patch.parentId)) {
       patches.set(patch.parentId, []);
     }
@@ -401,12 +401,12 @@ function createRouterFromPayload({
     }
     return [route];
   }, []);
-  globalVar.__reactRouterDataRouter = _chunk55FFLVQPjs.createRouter.call(void 0, {
+  globalVar.__reactRouterDataRouter = _chunkC7S4I3K5js.createRouter.call(void 0, {
     routes,
     getContext,
     basename: payload.basename,
-    history: _chunk55FFLVQPjs.createBrowserHistory.call(void 0, ),
-    hydrationData: _chunkSGCRBGEMjs.getHydrationData.call(void 0, {
+    history: _chunkC7S4I3K5js.createBrowserHistory.call(void 0, ),
+    hydrationData: _chunkYU3WNS3Tjs.getHydrationData.call(void 0, {
       state: {
         loaderData: payload.loaderData,
         actionData: payload.actionData,
@@ -415,7 +415,7 @@ function createRouterFromPayload({
       routes,
       getRouteInfo: (routeId) => {
         let match = payload.matches.find((m) => m.id === routeId);
-        _chunk55FFLVQPjs.invariant.call(void 0, match, "Route not found in payload");
+        _chunkC7S4I3K5js.invariant.call(void 0, match, "Route not found in payload");
         return {
           clientLoader: match.clientLoader,
           hasLoader: match.hasLoader,
@@ -513,9 +513,9 @@ function createRouterFromPayload({
     routeModules: globalVar.__reactRouterRouteModules
   };
 }
-var renderedRoutesContext = _chunk55FFLVQPjs.createContext.call(void 0, );
+var renderedRoutesContext = _chunkC7S4I3K5js.createContext.call(void 0, );
 function getRSCSingleFetchDataStrategy(getRouter, ssr, basename, createFromReadableStream, fetchImplementation) {
-  let dataStrategy = _chunk55FFLVQPjs.getSingleFetchDataStrategyImpl.call(void 0, 
+  let dataStrategy = _chunkC7S4I3K5js.getSingleFetchDataStrategyImpl.call(void 0, 
     getRouter,
     (match) => {
       let M = match;
@@ -571,20 +571,20 @@ function getRSCSingleFetchDataStrategy(getRouter, ssr, basename, createFromReada
 function getFetchAndDecodeViaRSC(createFromReadableStream, fetchImplementation) {
   return async (args, basename, targetRoutes) => {
     let { request, context } = args;
-    let url = _chunk55FFLVQPjs.singleFetchUrl.call(void 0, request.url, basename, "rsc");
+    let url = _chunkC7S4I3K5js.singleFetchUrl.call(void 0, request.url, basename, "rsc");
     if (request.method === "GET") {
-      url = _chunk55FFLVQPjs.stripIndexParam.call(void 0, url);
+      url = _chunkC7S4I3K5js.stripIndexParam.call(void 0, url);
       if (targetRoutes) {
         url.searchParams.set("_routes", targetRoutes.join(","));
       }
     }
     let res = await fetchImplementation(
-      new Request(url, await _chunk55FFLVQPjs.createRequestInit.call(void 0, request))
+      new Request(url, await _chunkC7S4I3K5js.createRequestInit.call(void 0, request))
     );
     if (res.status >= 400 && !res.headers.has("X-Remix-Response")) {
-      throw new (0, _chunk55FFLVQPjs.ErrorResponseImpl)(res.status, res.statusText, await res.text());
+      throw new (0, _chunkC7S4I3K5js.ErrorResponseImpl)(res.status, res.statusText, await res.text());
     }
-    _chunk55FFLVQPjs.invariant.call(void 0, res.body, "No response body to decode");
+    _chunkC7S4I3K5js.invariant.call(void 0, res.body, "No response body to decode");
     try {
       const payload = await createFromReadableStream(res.body, {
         temporaryReferences: void 0
@@ -608,7 +608,7 @@ function getFetchAndDecodeViaRSC(createFromReadableStream, fetchImplementation)
       }
       context.get(renderedRoutesContext).push(...payload.matches);
       let results = { routes: {} };
-      const dataKey = _chunk55FFLVQPjs.isMutationMethod.call(void 0, request.method) ? "actionData" : "loaderData";
+      const dataKey = _chunkC7S4I3K5js.isMutationMethod.call(void 0, request.method) ? "actionData" : "loaderData";
       for (let [routeId, data] of Object.entries(payload[dataKey] || {})) {
         results.routes[routeId] = { data };
       }
@@ -641,7 +641,7 @@ function RSCHydratedRouter({
     [createFromReadableStream, payload, fetchImplementation, getContext]
   );
   React3.useEffect(() => {
-    _chunk55FFLVQPjs.setIsHydrated.call(void 0, );
+    _chunkC7S4I3K5js.setIsHydrated.call(void 0, );
   }, []);
   React3.useLayoutEffect(() => {
     const globalVar = window;
@@ -743,8 +743,8 @@ function RSCHydratedRouter({
     routeDiscovery: { mode: "lazy", manifestPath: "/__manifest" },
     routeModules
   };
-  return /* @__PURE__ */ React3.createElement(_chunk55FFLVQPjs.RSCRouterContext.Provider, { value: true }, /* @__PURE__ */ React3.createElement(_chunkSGCRBGEMjs.RSCRouterGlobalErrorBoundary, { location: state.location }, /* @__PURE__ */ React3.createElement(_chunk55FFLVQPjs.FrameworkContext.Provider, { value: frameworkContext }, /* @__PURE__ */ React3.createElement(
-    _chunk55FFLVQPjs.RouterProvider,
+  return /* @__PURE__ */ React3.createElement(_chunkC7S4I3K5js.RSCRouterContext.Provider, { value: true }, /* @__PURE__ */ React3.createElement(_chunkYU3WNS3Tjs.RSCRouterGlobalErrorBoundary, { location: state.location }, /* @__PURE__ */ React3.createElement(_chunkC7S4I3K5js.FrameworkContext.Provider, { value: frameworkContext }, /* @__PURE__ */ React3.createElement(
+    _chunkC7S4I3K5js.RouterProvider,
     {
       router: transitionEnabledRouter,
       flushSync: ReactDOM2.flushSync,
@@ -761,8 +761,8 @@ function createRouteFromServerManifest(match, payload) {
   // the server loader flow regardless of whether the client loader calls
   // `serverLoader` or not, otherwise we'll have nothing to render.
   match.hasComponent && !match.element;
-  _chunk55FFLVQPjs.invariant.call(void 0, window.__reactRouterRouteModules);
-  _chunkSGCRBGEMjs.populateRSCRouteModules.call(void 0, window.__reactRouterRouteModules, match);
+  _chunkC7S4I3K5js.invariant.call(void 0, window.__reactRouterRouteModules);
+  _chunkYU3WNS3Tjs.populateRSCRouteModules.call(void 0, window.__reactRouterRouteModules, match);
   let dataRoute = {
     id: match.id,
     element: match.element,
@@ -812,7 +812,7 @@ function createRouteFromServerManifest(match, payload) {
         return await callSingleFetch(singleFetch);
       }
     }) : match.hasAction ? (_, singleFetch) => callSingleFetch(singleFetch) : () => {
-      throw _chunk55FFLVQPjs.noActionDefinedError.call(void 0, "action", match.id);
+      throw _chunkC7S4I3K5js.noActionDefinedError.call(void 0, "action", match.id);
     },
     path: match.path,
     shouldRevalidate: match.shouldRevalidate,
@@ -825,7 +825,7 @@ function createRouteFromServerManifest(match, payload) {
     hasShouldRevalidate: match.shouldRevalidate != null
   };
   if (typeof dataRoute.loader === "function") {
-    dataRoute.loader.hydrate = _chunk55FFLVQPjs.shouldHydrateRouteLoader.call(void 0, 
+    dataRoute.loader.hydrate = _chunkC7S4I3K5js.shouldHydrateRouteLoader.call(void 0, 
       match.id,
       match.clientLoader,
       match.hasLoader,
@@ -835,7 +835,7 @@ function createRouteFromServerManifest(match, payload) {
   return dataRoute;
 }
 function callSingleFetch(singleFetch) {
-  _chunk55FFLVQPjs.invariant.call(void 0, typeof singleFetch === "function", "Invalid singleFetch parameter");
+  _chunkC7S4I3K5js.invariant.call(void 0, typeof singleFetch === "function", "Invalid singleFetch parameter");
   return singleFetch();
 }
 function preventInvalidServerHandlerCall(type, routeId, hasHandler) {
@@ -843,7 +843,7 @@ function preventInvalidServerHandlerCall(type, routeId, hasHandler) {
     let fn = type === "action" ? "serverAction()" : "serverLoader()";
     let msg = `You are trying to call ${fn} on a route that does not have a server ${type} (routeId: "${routeId}")`;
     console.error(msg);
-    throw new (0, _chunk55FFLVQPjs.ErrorResponseImpl)(400, "Bad Request", new Error(msg), true);
+    throw new (0, _chunkC7S4I3K5js.ErrorResponseImpl)(400, "Bad Request", new Error(msg), true);
   }
 }
 var nextPaths = /* @__PURE__ */ new Set();

package/dist/production/dom-export.mjs

@@ -1,5 +1,5 @@
 /**
- * react-router v7.10.0-pre.0
+ * react-router v7.10.0-pre.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -14,7 +14,7 @@ import {
   deserializeErrors,
   getHydrationData,
   populateRSCRouteModules
-} from "./chunk-QKAGOFED.mjs";
+} from "./chunk-ISOIFGFA.mjs";
 import {
   CRITICAL_CSS_DATA_ATTRIBUTE,
   ErrorResponseImpl,
@@ -42,7 +42,7 @@ import {
   singleFetchUrl,
   stripIndexParam,
   useFogOFWarDiscovery
-} from "./chunk-KJ5676BZ.mjs";
+} from "./chunk-7F5XUDXM.mjs";
 
 // lib/dom-export/dom-router-provider.tsx
 import * as React from "react";

package/dist/{development/index-react-server-client-CNrKUHDv.d.ts → production/index-react-server-client-CCjKYJTH.d.ts}

@@ -1,4 +1,4 @@
-import { bE as RouteManifest, o as RouteModules, Q as HydrationState, a1 as DataRouteObject, a as ClientLoaderFunction, a5 as StaticHandlerContext, bF as ServerRouteModule, q as MiddlewareEnabled, c as RouterContextProvider, r as AppLoadContext, al as LoaderFunctionArgs, ac as ActionFunctionArgs, au as unstable_ServerInstrumentation, aj as HTMLFormMethod, ah as FormEncType, w as RelativeRoutingType, bh as PageLinkDescriptor, T as To, bG as History, a4 as GetScrollRestorationKeyFunction, e as RouterInit, bH as FutureConfig$1, u as unstable_ClientInstrumentation, p as DataStrategyFunction, a0 as PatchRoutesOnNavigationFunction, s as NavigateOptions, a6 as Fetcher, K as RouteObject, n as Router, v as SerializeFrom, B as BlockerFunction, L as Location, bI as CreateStaticHandlerOptions$1, a2 as StaticHandler } from './instrumentation-Dwf-sTWa.js';
+import { bE as RouteManifest, o as RouteModules, Q as HydrationState, a1 as DataRouteObject, a as ClientLoaderFunction, a5 as StaticHandlerContext, bF as ServerRouteModule, q as MiddlewareEnabled, c as RouterContextProvider, r as AppLoadContext, al as LoaderFunctionArgs, ac as ActionFunctionArgs, au as unstable_ServerInstrumentation, aj as HTMLFormMethod, ah as FormEncType, w as RelativeRoutingType, bh as PageLinkDescriptor, T as To, bG as History, a4 as GetScrollRestorationKeyFunction, e as RouterInit, bH as FutureConfig$1, u as unstable_ClientInstrumentation, p as DataStrategyFunction, a0 as PatchRoutesOnNavigationFunction, s as NavigateOptions, a6 as Fetcher, K as RouteObject, n as Router, v as SerializeFrom, B as BlockerFunction, L as Location, bI as CreateStaticHandlerOptions$1, a2 as StaticHandler } from './instrumentation-BB0wRuqz.js';
 import * as React from 'react';
 
 interface Route {
@@ -536,7 +536,7 @@ interface DOMRouterOpts {
      * added routes via `route.lazy` or `patchRoutesOnNavigation`).  This is
      * mostly useful for observability such as wrapping navigations, fetches,
      * as well as route loaders/actions/middlewares with logging and/or performance
-     * tracing.
+     * tracing.  See the [docs](../../how-to/instrumentation) for more information.
      *
      * ```tsx
      * let router = createBrowserRouter(routes, {
@@ -580,189 +580,32 @@ interface DOMRouterOpts {
      */
     unstable_instrumentations?: unstable_ClientInstrumentation[];
     /**
-     * Override the default data strategy of running loaders in parallel.
-     * See {@link DataStrategyFunction}.
-     *
-     * <docs-warning>This is a low-level API intended for advanced use-cases. This
-     * overrides React Router's internal handling of
-     * [`action`](../../start/data/route-object#action)/[`loader`](../../start/data/route-object#loader)
-     * execution, and if done incorrectly will break your app code. Please use
-     * with caution and perform the appropriate testing.</docs-warning>
-     *
-     * By default, React Router is opinionated about how your data is loaded/submitted -
-     * and most notably, executes all of your [`loader`](../../start/data/route-object#loader)s
-     * in parallel for optimal data fetching. While we think this is the right
-     * behavior for most use-cases, we realize that there is no "one size fits all"
-     * solution when it comes to data fetching for the wide landscape of
-     * application requirements.
-     *
-     * The `dataStrategy` option gives you full control over how your [`action`](../../start/data/route-object#action)s
-     * and [`loader`](../../start/data/route-object#loader)s are executed and lays
-     * the foundation to build in more advanced APIs such as middleware, context,
-     * and caching layers. Over time, we expect that we'll leverage this API
-     * internally to bring more first class APIs to React Router, but until then
-     * (and beyond), this is your way to add more advanced functionality for your
-     * application's data needs.
-     *
-     * The `dataStrategy` function should return a key/value-object of
-     * `routeId` -> {@link DataStrategyResult} and should include entries for any
-     * routes where a handler was executed. A `DataStrategyResult` indicates if
-     * the handler was successful or not based on the `DataStrategyResult.type`
-     * field. If the returned `DataStrategyResult.result` is a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response),
-     * React Router will unwrap it for you (via [`res.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json)
-     * or [`res.text`](https://developer.mozilla.org/en-US/docs/Web/API/Response/text)).
-     * If you need to do custom decoding of a [`Response`](https://developer.mozilla.org/en-US/docs/Web/API/Response)
-     * but want to preserve the status code, you can use the `data` utility to
-     * return your decoded data along with a `ResponseInit`.
-     *
-     * <details>
-     * <summary><b>Example <code>dataStrategy</code> Use Cases</b></summary>
-     *
-     * **Adding logging**
-     *
-     * In the simplest case, let's look at hooking into this API to add some logging
-     * for when our route [`action`](../../start/data/route-object#action)s/[`loader`](../../start/data/route-object#loader)s
-     * execute:
+     * Override the default data strategy of running loaders in parallel -
+     * see the [docs](../../how-to/data-strategy) for more information.
      *
      * ```tsx
      * let router = createBrowserRouter(routes, {
-     *   async dataStrategy({ matches, request }) {
-     *     const matchesToLoad = matches.filter((m) => m.shouldLoad);
-     *     const results: Record<string, DataStrategyResult> = {};
-     *     await Promise.all(
-     *       matchesToLoad.map(async (match) => {
-     *         console.log(`Processing ${match.route.id}`);
-     *         results[match.route.id] = await match.resolve();;
-     *       })
+     *   async dataStrategy({
+     *     matches,
+     *     request,
+     *     runClientMiddleware,
+     *   }) {
+     *     const matchesToLoad = matches.filter((m) =>
+     *       m.shouldCallHandler(),
      *     );
-     *     return results;
-     *   },
-     * });
-     * ```
-     *
-     * **Middleware**
-     *
-     * Let's define a middleware on each route via [`handle`](../../start/data/route-object#handle)
-     * and call middleware sequentially first, then call all
-     * [`loader`](../../start/data/route-object#loader)s in parallel - providing
-     * any data made available via the middleware:
-     *
-     * ```ts
-     * const routes = [
-     *   {
-     *     id: "parent",
-     *     path: "/parent",
-     *     loader({ request }, context) {
-     *        // ...
-     *     },
-     *     handle: {
-     *       async middleware({ request }, context) {
-     *         context.parent = "PARENT MIDDLEWARE";
-     *       },
-     *     },
-     *     children: [
-     *       {
-     *         id: "child",
-     *         path: "child",
-     *         loader({ request }, context) {
-     *           // ...
-     *         },
-     *         handle: {
-     *           async middleware({ request }, context) {
-     *             context.child = "CHILD MIDDLEWARE";
-     *           },
-     *         },
-     *       },
-     *     ],
-     *   },
-     * ];
      *
-     * let router = createBrowserRouter(routes, {
-     *   async dataStrategy({ matches, params, request }) {
-     *     // Run middleware sequentially and let them add data to `context`
-     *     let context = {};
-     *     for (const match of matches) {
-     *       if (match.route.handle?.middleware) {
-     *         await match.route.handle.middleware(
-     *           { request, params },
-     *           context
-     *         );
-     *       }
-     *     }
-     *
-     *     // Run loaders in parallel with the `context` value
-     *     let matchesToLoad = matches.filter((m) => m.shouldLoad);
-     *     let results = await Promise.all(
-     *       matchesToLoad.map((match, i) =>
-     *         match.resolve((handler) => {
-     *           // Whatever you pass to `handler` will be passed as the 2nd parameter
-     *           // to your loader/action
-     *           return handler(context);
-     *         })
-     *       )
-     *     );
-     *     return results.reduce(
-     *       (acc, result, i) =>
-     *         Object.assign(acc, {
-     *           [matchesToLoad[i].route.id]: result,
+     *     const results: Record<string, DataStrategyResult> = {};
+     *     await runClientMiddleware(() =>
+     *       Promise.all(
+     *         matchesToLoad.map(async (match) => {
+     *           results[match.route.id] = await match.resolve();
      *         }),
-     *       {}
+     *       ),
      *     );
-     *   },
-     * });
-     * ```
-     *
-     * **Custom Handler**
-     *
-     * It's also possible you don't even want to define a [`loader`](../../start/data/route-object#loader)
-     * implementation at the route level. Maybe you want to just determine the
-     * routes and issue a single GraphQL request for all of your data? You can do
-     * that by setting your `route.loader=true` so it qualifies as "having a
-     * loader", and then store GQL fragments on `route.handle`:
-     *
-     * ```ts
-     * const routes = [
-     *   {
-     *     id: "parent",
-     *     path: "/parent",
-     *     loader: true,
-     *     handle: {
-     *       gql: gql`
-     *         fragment Parent on Whatever {
-     *           parentField
-     *         }
-     *       `,
-     *     },
-     *     children: [
-     *       {
-     *         id: "child",
-     *         path: "child",
-     *         loader: true,
-     *         handle: {
-     *           gql: gql`
-     *             fragment Child on Whatever {
-     *               childField
-     *             }
-     *           `,
-     *         },
-     *       },
-     *     ],
-     *   },
-     * ];
-     *
-     * let router = createBrowserRouter(routes, {
-     *   async dataStrategy({ matches, params, request }) {
-     *     // Compose route fragments into a single GQL payload
-     *     let gql = getFragmentsFromRouteHandles(matches);
-     *     let data = await fetchGql(gql);
-     *     // Parse results back out into individual route level `DataStrategyResult`'s
-     *     // keyed by `routeId`
-     *     let results = parseResultsFromGql(data);
      *     return results;
      *   },
      * });
      * ```
-     *</details>
      */
     dataStrategy?: DataStrategyFunction;
     /**