react-router 0.0.0-experimental-1ebb6d403 → 0.0.0-experimental-e41ede670

package/dist/development/dom-export.js

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-1ebb6d403
+ * react-router v0.0.0-experimental-e41ede670
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@ __export(dom_export_exports, {
 module.exports = __toCommonJS(dom_export_exports);
 
 // lib/dom-export/dom-router-provider.tsx
-var React11 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var ReactDOM = __toESM(require("react-dom"));
 
 // lib/router/history.ts
@@ -679,7 +679,10 @@ var redirect = (url, init = 302) => {
   }
   let headers = new Headers(responseInit.headers);
   headers.set("Location", url);
-  return new Response(null, { ...responseInit, headers });
+  return new Response(null, {
+    ...responseInit,
+    headers
+  });
 };
 var ErrorResponseImpl = class {
   constructor(status, statusText, data2, internal = false) {
@@ -764,6 +767,7 @@ function createRouter(init) {
   );
   let inFlightDataRoutes;
   let basename = init.basename || "/";
+  let routerContext = typeof init.context !== "undefined" ? init.context : {};
   let dataStrategyImpl = init.dataStrategy || defaultDataStrategy;
   let patchRoutesOnNavigationImpl = init.patchRoutesOnNavigation;
   let future = {
@@ -952,11 +956,6 @@ function createRouter(init) {
         }
       }
     });
-    fetchersQueuedForDeletion.forEach((key) => {
-      if (!state.fetchers.has(key) && !fetchControllers.has(key)) {
-        unmountedFetchers.push(key);
-      }
-    });
     [...subscribers].forEach(
       (subscriber) => subscriber(state, {
         deletedFetchers: unmountedFetchers,
@@ -1339,6 +1338,14 @@ function createRouter(init) {
         null
       );
       result = results[actionMatch.route.id];
+      if (!result) {
+        for (let match of matches) {
+          if (results[match.route.id]) {
+            result = results[match.route.id];
+            break;
+          }
+        }
+      }
       if (request.signal.aborted) {
         return { shortCircuited: true };
       }
@@ -2000,13 +2007,13 @@ function createRouter(init) {
       results = await callDataStrategyImpl(
         dataStrategyImpl,
         type,
-        state2,
         request,
         matchesToLoad,
         matches,
         fetcherKey,
         manifest,
-        mapRouteProperties2
+        mapRouteProperties2,
+        routerContext
       );
     } catch (e) {
       matchesToLoad.forEach((m) => {
@@ -2797,20 +2804,124 @@ async function loadLazyRouteModule(route, mapRouteProperties2, manifest) {
     lazy: void 0
   });
 }
-async function defaultDataStrategy({
-  matches
-}) {
-  let matchesToLoad = matches.filter((m) => m.shouldLoad);
-  let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
-  return results.reduce(
-    (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
-    {}
+async function defaultDataStrategy(args) {
+  let matchesToLoad = args.matches.filter((m) => m.shouldLoad);
+  let lastIndex = args.matches.length - 1;
+  for (let i = lastIndex; i >= 0; i--) {
+    if (args.matches[i].shouldLoad) {
+      lastIndex = i;
+      break;
+    }
+  }
+  let results = await runMiddlewarePipeline(
+    args,
+    lastIndex,
+    false,
+    async (keyedResults) => {
+      let results2 = await Promise.all(matchesToLoad.map((m) => m.resolve()));
+      results2.forEach((result, i) => {
+        keyedResults[matchesToLoad[i].route.id] = result;
+      });
+    }
   );
+  return results;
 }
-async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, requestContext) {
+async function runMiddlewarePipeline({
+  request,
+  params,
+  context,
+  matches
+}, lastIndex, propagateResult, handler) {
+  let keyedResults = {};
+  try {
+    let result = await callRouteMiddleware(
+      matches.slice(0, lastIndex + 1).flatMap(
+        (m) => m.route.middleware ? m.route.middleware.map((fn) => [m.route.id, fn]) : []
+      ),
+      0,
+      { request, params, context },
+      keyedResults,
+      propagateResult,
+      handler
+    );
+    return propagateResult ? result : keyedResults;
+  } catch (e) {
+    if (!(e instanceof MiddlewareError)) {
+      throw e;
+    }
+    if (propagateResult && isResponse(e.error)) {
+      throw e.error;
+    }
+    return {
+      ...keyedResults,
+      [e.routeId]: { type: "error", result: e.error }
+    };
+  }
+}
+var MiddlewareError = class {
+  constructor(routeId, error) {
+    this.routeId = routeId;
+    this.error = error;
+  }
+};
+async function callRouteMiddleware(middlewares, idx, args, keyedResults, propagateResult, handler) {
+  let { request } = args;
+  if (request.signal.aborted) {
+    if (request.signal.reason) {
+      throw request.signal.reason;
+    }
+    throw new Error(
+      `Request aborted without an \`AbortSignal.reason\`: ${request.method} ${request.url}`
+    );
+  }
+  let tuple = middlewares[idx];
+  if (!tuple) {
+    let result = await handler(keyedResults);
+    return result;
+  }
+  let [routeId, middleware] = tuple;
+  let nextCalled = false;
+  let next = async () => {
+    if (nextCalled) {
+      throw new Error("You may only call `next()` once per middleware");
+    }
+    nextCalled = true;
+    let result = await callRouteMiddleware(
+      middlewares,
+      idx + 1,
+      args,
+      keyedResults,
+      propagateResult,
+      handler
+    );
+    return propagateResult ? result : void 0;
+  };
+  try {
+    let result = await middleware(args, next);
+    if (!nextCalled) {
+      result = await next();
+    }
+    return result;
+  } catch (e) {
+    if (e instanceof MiddlewareError) {
+      throw e;
+    }
+    throw new MiddlewareError(routeId, e);
+  }
+}
+async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, routerContext) {
   let loadRouteDefinitionsPromises = matches.map(
     (m) => m.route.lazy ? loadLazyRouteModule(m.route, mapRouteProperties2, manifest) : void 0
   );
+  let lazyMiddlewarePromises = matches.map(
+    (m, i) => m.route.lazy && !("middleware" in m.route) ? (
+      // Swallow the error here, let it bubble up from resolve()
+      loadRouteDefinitionsPromises[i].catch((e) => e)
+    ) : null
+  ).filter((p) => p != null);
+  if (lazyMiddlewarePromises.length > 0) {
+    await Promise.all(lazyMiddlewarePromises);
+  }
   let dsMatches = matches.map((match, i) => {
     let loadRoutePromise = loadRouteDefinitionsPromises[i];
     let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
@@ -2824,7 +2935,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
         match,
         loadRoutePromise,
         handlerOverride,
-        requestContext
+        routerContext
       ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
@@ -2838,7 +2949,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
     request,
     params: matches[0].params,
     fetcherKey,
-    context: requestContext
+    context: routerContext
   });
   try {
     await Promise.all(loadRouteDefinitionsPromises);
@@ -2846,7 +2957,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
   }
   return results;
 }
-async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
+async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, routerContext) {
   let result;
   let onReject;
   let runHandler = (handler) => {
@@ -2866,7 +2977,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
         {
           request,
           params: match.params,
-          context: staticContext
+          context: routerContext
         },
         ...ctx !== void 0 ? [ctx] : []
       );
@@ -3491,7 +3602,7 @@ function createDeferred() {
 }
 
 // lib/components.tsx
-var React4 = __toESM(require("react"));
+var React3 = __toESM(require("react"));
 
 // lib/context.ts
 var React = __toESM(require("react"));
@@ -3869,8 +3980,7 @@ function warnOnce(condition, message) {
   }
 }
 
-// lib/dom/shared.tsx
-var React3 = __toESM(require("react"));
+// lib/components.tsx
 var ENABLE_DEV_WARNINGS2 = true;
 function mapRouteProperties(route) {
   let updates = {
@@ -3922,8 +4032,6 @@ function mapRouteProperties(route) {
   }
   return updates;
 }
-
-// lib/components.tsx
 var Deferred = class {
   constructor() {
     this.status = "pending";
@@ -3947,23 +4055,23 @@ function RouterProvider({
   router: router2,
   flushSync: reactDomFlushSyncImpl
 }) {
-  let [state, setStateImpl] = React4.useState(router2.state);
-  let [pendingState, setPendingState] = React4.useState();
-  let [vtContext, setVtContext] = React4.useState({
+  let [state, setStateImpl] = React3.useState(router2.state);
+  let [pendingState, setPendingState] = React3.useState();
+  let [vtContext, setVtContext] = React3.useState({
     isTransitioning: false
   });
-  let [renderDfd, setRenderDfd] = React4.useState();
-  let [transition, setTransition] = React4.useState();
-  let [interruption, setInterruption] = React4.useState();
-  let fetcherData = React4.useRef(/* @__PURE__ */ new Map());
-  let setState = React4.useCallback(
+  let [renderDfd, setRenderDfd] = React3.useState();
+  let [transition, setTransition] = React3.useState();
+  let [interruption, setInterruption] = React3.useState();
+  let fetcherData = React3.useRef(/* @__PURE__ */ new Map());
+  let setState = React3.useCallback(
     (newState, { deletedFetchers, flushSync: flushSync2, viewTransitionOpts }) => {
+      deletedFetchers.forEach((key) => fetcherData.current.delete(key));
       newState.fetchers.forEach((fetcher, key) => {
         if (fetcher.data !== void 0) {
           fetcherData.current.set(key, fetcher.data);
         }
       });
-      deletedFetchers.forEach((key) => fetcherData.current.delete(key));
       warnOnce(
         flushSync2 === false || reactDomFlushSyncImpl != null,
         'You provided the `flushSync` option to a router update, but you are not using the `<RouterProvider>` from `react-router/dom` so `ReactDOM.flushSync()` is unavailable.  Please update your app to `import { RouterProvider } from "react-router/dom"` and ensure you have `react-dom` installed as a dependency to use the `flushSync` option.'
@@ -3977,7 +4085,7 @@ function RouterProvider({
         if (reactDomFlushSyncImpl && flushSync2) {
           reactDomFlushSyncImpl(() => setStateImpl(newState));
         } else {
-          React4.startTransition(() => setStateImpl(newState));
+          React3.startTransition(() => setStateImpl(newState));
         }
         return;
       }
@@ -4028,18 +4136,18 @@ function RouterProvider({
     },
     [router2.window, reactDomFlushSyncImpl, transition, renderDfd]
   );
-  React4.useLayoutEffect(() => router2.subscribe(setState), [router2, setState]);
-  React4.useEffect(() => {
+  React3.useLayoutEffect(() => router2.subscribe(setState), [router2, setState]);
+  React3.useEffect(() => {
     if (vtContext.isTransitioning && !vtContext.flushSync) {
       setRenderDfd(new Deferred());
     }
   }, [vtContext]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (renderDfd && pendingState && router2.window) {
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
       let transition2 = router2.window.document.startViewTransition(async () => {
-        React4.startTransition(() => setStateImpl(newState));
+        React3.startTransition(() => setStateImpl(newState));
         await renderPromise;
       });
       transition2.finished.finally(() => {
@@ -4051,12 +4159,12 @@ function RouterProvider({
       setTransition(transition2);
     }
   }, [pendingState, renderDfd, router2.window]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (renderDfd && pendingState && state.location.key === pendingState.location.key) {
       renderDfd.resolve();
     }
   }, [renderDfd, transition, state.location, pendingState]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (!vtContext.isTransitioning && interruption) {
       setPendingState(interruption.state);
       setVtContext({
@@ -4068,7 +4176,7 @@ function RouterProvider({
       setInterruption(void 0);
     }
   }, [vtContext.isTransitioning, interruption]);
-  let navigator2 = React4.useMemo(() => {
+  let navigator2 = React3.useMemo(() => {
     return {
       createHref: router2.createHref,
       encodeLocation: router2.encodeLocation,
@@ -4085,7 +4193,7 @@ function RouterProvider({
     };
   }, [router2]);
   let basename = router2.basename || "/";
-  let dataRouterContext = React4.useMemo(
+  let dataRouterContext = React3.useMemo(
     () => ({
       router: router2,
       navigator: navigator2,
@@ -4094,7 +4202,7 @@ function RouterProvider({
     }),
     [router2, navigator2, basename]
   );
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React4.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React4.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React4.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React3.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React3.createElement(FetchersContext.Provider, { value: fetcherData.current }, /* @__PURE__ */ React3.createElement(ViewTransitionContext.Provider, { value: vtContext }, /* @__PURE__ */ React3.createElement(
     Router,
     {
       basename,
@@ -4102,7 +4210,7 @@ function RouterProvider({
       navigationType: state.historyAction,
       navigator: navigator2
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(
       MemoizedDataRoutes,
       {
         routes: router2.routes,
@@ -4112,7 +4220,7 @@ function RouterProvider({
     )
   ))))), null);
 }
-var MemoizedDataRoutes = React4.memo(DataRoutes);
+var MemoizedDataRoutes = React3.memo(DataRoutes);
 function DataRoutes({
   routes,
   future,
@@ -4133,7 +4241,7 @@ function Router({
     `You cannot render a <Router> inside another <Router>. You should never have more than one in your app.`
   );
   let basename = basenameProp.replace(/^\/*/, "/");
-  let navigationContext = React4.useMemo(
+  let navigationContext = React3.useMemo(
     () => ({
       basename,
       navigator: navigator2,
@@ -4152,7 +4260,7 @@ function Router({
     state = null,
     key = "default"
   } = locationProp;
-  let locationContext = React4.useMemo(() => {
+  let locationContext = React3.useMemo(() => {
     let trailingPathname = stripBasename(pathname, basename);
     if (trailingPathname == null) {
       return null;
@@ -4175,11 +4283,11 @@ function Router({
   if (locationContext == null) {
     return null;
   }
-  return /* @__PURE__ */ React4.createElement(NavigationContext.Provider, { value: navigationContext }, /* @__PURE__ */ React4.createElement(LocationContext.Provider, { children, value: locationContext }));
+  return /* @__PURE__ */ React3.createElement(NavigationContext.Provider, { value: navigationContext }, /* @__PURE__ */ React3.createElement(LocationContext.Provider, { children, value: locationContext }));
 }
 
 // lib/dom/ssr/components.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 
 // lib/dom/ssr/invariant.ts
 function invariant2(value, message) {
@@ -4282,7 +4390,7 @@ function createHtml(html) {
 }
 
 // lib/dom/ssr/single-fetch.tsx
-var React5 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_turbo_stream = require("turbo-stream");
 
 // lib/dom/ssr/data.ts
@@ -4309,20 +4417,54 @@ async function createRequestInit(request) {
 // lib/dom/ssr/single-fetch.tsx
 var SingleFetchRedirectSymbol = Symbol("SingleFetchRedirect");
 function getSingleFetchDataStrategy(manifest, routeModules, getRouter) {
-  return async ({ request, matches, fetcherKey }) => {
+  return async (args) => {
+    let { request, matches, fetcherKey } = args;
     if (request.method !== "GET") {
-      return singleFetchActionStrategy(request, matches);
+      return runMiddlewarePipeline(
+        args,
+        matches.findIndex((m) => m.shouldLoad),
+        false,
+        async (keyedResults) => {
+          let results = await singleFetchActionStrategy(request, matches);
+          Object.assign(keyedResults, results);
+        }
+      );
     }
     if (fetcherKey) {
-      return singleFetchLoaderFetcherStrategy(request, matches);
+      return runMiddlewarePipeline(
+        args,
+        matches.findIndex((m) => m.shouldLoad),
+        false,
+        async (keyedResults) => {
+          let results = await singleFetchLoaderFetcherStrategy(
+            request,
+            matches
+          );
+          Object.assign(keyedResults, results);
+        }
+      );
     }
-    return singleFetchLoaderNavigationStrategy(
+    let lowestLoadingIndex = getLowestLoadingIndex(
       manifest,
       routeModules,
       getRouter(),
-      request,
       matches
     );
+    return runMiddlewarePipeline(
+      args,
+      lowestLoadingIndex,
+      false,
+      async (keyedResults) => {
+        let results = await singleFetchLoaderNavigationStrategy(
+          manifest,
+          routeModules,
+          getRouter(),
+          request,
+          matches
+        );
+        Object.assign(keyedResults, results);
+      }
+    );
   };
 }
 async function singleFetchActionStrategy(request, matches) {
@@ -4352,6 +4494,20 @@ async function singleFetchActionStrategy(request, matches) {
     }
   };
 }
+function isOptedOut(manifestRoute, routeModule, match, router2) {
+  return match.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModule && routeModule.shouldRevalidate;
+}
+function getLowestLoadingIndex(manifest, routeModules, router2, matches) {
+  let tailIdx = [...matches].reverse().findIndex(
+    (m) => m.shouldLoad || !isOptedOut(
+      manifest.routes[m.route.id],
+      routeModules[m.route.id],
+      m,
+      router2
+    )
+  );
+  return tailIdx < 0 ? 0 : matches.length - 1 - tailIdx;
+}
 async function singleFetchLoaderNavigationStrategy(manifest, routeModules, router2, request, matches) {
   let routesParams = /* @__PURE__ */ new Set();
   let foundOptOutRoute = false;
@@ -4370,7 +4526,7 @@ async function singleFetchLoaderNavigationStrategy(manifest, routeModules, route
           if (!router2.state.initialized) {
             return;
           }
-          if (m.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModules[m.route.id]?.shouldRevalidate) {
+          if (isOptedOut(manifestRoute, routeModules[m.route.id], m, router2)) {
             foundOptOutRoute = true;
             return;
           }
@@ -4546,7 +4702,7 @@ function unwrapSingleFetchResult(result, routeId) {
     if (result.replace) {
       headers["X-Remix-Replace"] = "yes";
     }
-    throw redirect(result.redirect, { status: result.status, headers });
+    return redirect(result.redirect, { status: result.status, headers });
   } else if ("data" in result) {
     return result.data;
   } else {
@@ -4582,14 +4738,14 @@ function createDeferred2() {
 }
 
 // lib/dom/ssr/fog-of-war.ts
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 
 // lib/dom/ssr/routes.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 
 // lib/dom/ssr/errorBoundaries.tsx
-var React6 = __toESM(require("react"));
-var RemixErrorBoundary = class extends React6.Component {
+var React5 = __toESM(require("react"));
+var RemixErrorBoundary = class extends React5.Component {
   constructor(props) {
     super(props);
     this.state = { error: props.error || null, location: props.location };
@@ -4605,7 +4761,7 @@ var RemixErrorBoundary = class extends React6.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React5.createElement(
         RemixRootDefaultErrorBoundary,
         {
           error: this.state.error,
@@ -4622,7 +4778,7 @@ function RemixRootDefaultErrorBoundary({
   isOutsideRemixApp
 }) {
   console.error(error);
-  let heyDeveloper = /* @__PURE__ */ React6.createElement(
+  let heyDeveloper = /* @__PURE__ */ React5.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -4635,7 +4791,7 @@ function RemixRootDefaultErrorBoundary({
     }
   );
   if (isRouteErrorResponse(error)) {
-    return /* @__PURE__ */ React6.createElement(BoundaryShell, { title: "Unhandled Thrown Response!" }, /* @__PURE__ */ React6.createElement("h1", { style: { fontSize: "24px" } }, error.status, " ", error.statusText), heyDeveloper);
+    return /* @__PURE__ */ React5.createElement(BoundaryShell, { title: "Unhandled Thrown Response!" }, /* @__PURE__ */ React5.createElement("h1", { style: { fontSize: "24px" } }, error.status, " ", error.statusText), heyDeveloper);
   }
   let errorInstance;
   if (error instanceof Error) {
@@ -4644,14 +4800,14 @@ function RemixRootDefaultErrorBoundary({
     let errorString = error == null ? "Unknown Error" : typeof error === "object" && "toString" in error ? error.toString() : JSON.stringify(error);
     errorInstance = new Error(errorString);
   }
-  return /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React5.createElement(
     BoundaryShell,
     {
       title: "Application Error!",
       isOutsideRemixApp
     },
-    /* @__PURE__ */ React6.createElement("h1", { style: { fontSize: "24px" } }, "Application Error"),
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React5.createElement("h1", { style: { fontSize: "24px" } }, "Application Error"),
+    /* @__PURE__ */ React5.createElement(
       "pre",
       {
         style: {
@@ -4676,19 +4832,19 @@ function BoundaryShell({
   if (routeModules.root?.Layout && !isOutsideRemixApp) {
     return children;
   }
-  return /* @__PURE__ */ React6.createElement("html", { lang: "en" }, /* @__PURE__ */ React6.createElement("head", null, /* @__PURE__ */ React6.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React5.createElement("html", { lang: "en" }, /* @__PURE__ */ React5.createElement("head", null, /* @__PURE__ */ React5.createElement("meta", { charSet: "utf-8" }), /* @__PURE__ */ React5.createElement(
     "meta",
     {
       name: "viewport",
       content: "width=device-width,initial-scale=1,viewport-fit=cover"
     }
-  ), /* @__PURE__ */ React6.createElement("title", null, title)), /* @__PURE__ */ React6.createElement("body", null, /* @__PURE__ */ React6.createElement("main", { style: { fontFamily: "system-ui, sans-serif", padding: "2rem" } }, children, renderScripts ? /* @__PURE__ */ React6.createElement(Scripts, null) : null)));
+  ), /* @__PURE__ */ React5.createElement("title", null, title)), /* @__PURE__ */ React5.createElement("body", null, /* @__PURE__ */ React5.createElement("main", { style: { fontFamily: "system-ui, sans-serif", padding: "2rem" } }, children, renderScripts ? /* @__PURE__ */ React5.createElement(Scripts, null) : null)));
 }
 
 // lib/dom/ssr/fallback.tsx
-var React7 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 function RemixRootDefaultHydrateFallback() {
-  return /* @__PURE__ */ React7.createElement(BoundaryShell, { title: "Loading...", renderScripts: true }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React6.createElement(BoundaryShell, { title: "Loading...", renderScripts: true }, /* @__PURE__ */ React6.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -4722,17 +4878,17 @@ function groupRoutesByParentId(manifest) {
 function getRouteComponents(route, routeModule, isSpaMode) {
   let Component4 = getRouteModuleComponent(routeModule);
   let HydrateFallback = routeModule.HydrateFallback && (!isSpaMode || route.id === "root") ? routeModule.HydrateFallback : route.id === "root" ? RemixRootDefaultHydrateFallback : void 0;
-  let ErrorBoundary = routeModule.ErrorBoundary ? routeModule.ErrorBoundary : route.id === "root" ? () => /* @__PURE__ */ React8.createElement(RemixRootDefaultErrorBoundary, { error: useRouteError() }) : void 0;
+  let ErrorBoundary = routeModule.ErrorBoundary ? routeModule.ErrorBoundary : route.id === "root" ? () => /* @__PURE__ */ React7.createElement(RemixRootDefaultErrorBoundary, { error: useRouteError() }) : void 0;
   if (route.id === "root" && routeModule.Layout) {
     return {
       ...Component4 ? {
-        element: /* @__PURE__ */ React8.createElement(routeModule.Layout, null, /* @__PURE__ */ React8.createElement(Component4, null))
+        element: /* @__PURE__ */ React7.createElement(routeModule.Layout, null, /* @__PURE__ */ React7.createElement(Component4, null))
       } : { Component: Component4 },
       ...ErrorBoundary ? {
-        errorElement: /* @__PURE__ */ React8.createElement(routeModule.Layout, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, null))
+        errorElement: /* @__PURE__ */ React7.createElement(routeModule.Layout, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, null))
       } : { ErrorBoundary },
       ...HydrateFallback ? {
-        hydrateFallbackElement: /* @__PURE__ */ React8.createElement(routeModule.Layout, null, /* @__PURE__ */ React8.createElement(HydrateFallback, null))
+        hydrateFallbackElement: /* @__PURE__ */ React7.createElement(routeModule.Layout, null, /* @__PURE__ */ React7.createElement(HydrateFallback, null))
       } : { HydrateFallback }
     };
   }
@@ -4807,6 +4963,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       Object.assign(dataRoute, {
         ...dataRoute,
         ...getRouteComponents(route, routeModule, isSpaMode),
+        middleware: routeModule.clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
           routeModule,
@@ -4819,7 +4976,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       let hasInitialError = initialState && initialState.errors && route.id in initialState.errors;
       let initialError = hasInitialError ? initialState?.errors?.[route.id] : void 0;
       let isHydrationRequest = needsRevalidation == null && (routeModule.clientLoader?.hydrate === true || !route.hasLoader);
-      dataRoute.loader = async ({ request, params }, singleFetch) => {
+      dataRoute.loader = async ({ request, params, context }, singleFetch) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
             invariant2(
@@ -4833,6 +4990,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
             return routeModule.clientLoader({
               request,
               params,
+              context,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route, isSpaMode);
                 if (isHydrationRequest) {
@@ -4857,7 +5015,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
         routeModule,
         isSpaMode
       );
-      dataRoute.action = ({ request, params }, singleFetch) => {
+      dataRoute.action = ({ request, params, context }, singleFetch) => {
         return prefetchStylesAndCallHandler(async () => {
           invariant2(
             routeModule,
@@ -4872,6 +5030,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
           return routeModule.clientAction({
             request,
             params,
+            context,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route, isSpaMode);
               return fetchServerAction(singleFetch);
@@ -4881,13 +5040,13 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       };
     } else {
       if (!route.hasClientLoader) {
-        dataRoute.loader = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.loader = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
           if (isSpaMode) return Promise.resolve(null);
           return fetchServerLoader(singleFetch);
         });
       }
       if (!route.hasClientAction) {
-        dataRoute.action = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.action = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
           if (isSpaMode) {
             throw noActionDefinedError("clientAction", route.id);
           }
@@ -4923,6 +5082,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
         return {
           ...lazyRoute.loader ? { loader: lazyRoute.loader } : {},
           ...lazyRoute.action ? { action: lazyRoute.action } : {},
+          middleware: mod.clientMiddleware,
           hasErrorBoundary: lazyRoute.hasErrorBoundary,
           shouldRevalidate: getShouldRevalidateFunction(
             lazyRoute,
@@ -4980,6 +5140,7 @@ async function loadRouteModuleWithBlockingLinks(route, routeModules) {
   return {
     Component: getRouteModuleComponent(routeModule),
     ErrorBoundary: routeModule.ErrorBoundary,
+    clientMiddleware: routeModule.clientMiddleware,
     clientAction: routeModule.clientAction,
     clientLoader: routeModule.clientLoader,
     handle: routeModule.handle,
@@ -5050,7 +5211,7 @@ function getPatchRoutesOnNavigationFunction(manifest, routeModules, isSpaMode, b
   };
 }
 function useFogOFWarDiscovery(router2, manifest, routeModules, isSpaMode) {
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isFogOfWarEnabled(isSpaMode) || navigator.connection?.saveData === true) {
       return;
     }
@@ -5179,7 +5340,7 @@ function debounce(callback, wait) {
 
 // lib/dom/ssr/components.tsx
 function useDataRouterContext() {
-  let context = React10.useContext(DataRouterContext);
+  let context = React9.useContext(DataRouterContext);
   invariant2(
     context,
     "You must render this element inside a <DataRouterContext.Provider> element"
@@ -5187,17 +5348,17 @@ function useDataRouterContext() {
   return context;
 }
 function useDataRouterStateContext() {
-  let context = React10.useContext(DataRouterStateContext);
+  let context = React9.useContext(DataRouterStateContext);
   invariant2(
     context,
     "You must render this element inside a <DataRouterStateContext.Provider> element"
   );
   return context;
 }
-var FrameworkContext = React10.createContext(void 0);
+var FrameworkContext = React9.createContext(void 0);
 FrameworkContext.displayName = "FrameworkContext";
 function useFrameworkContext() {
-  let context = React10.useContext(FrameworkContext);
+  let context = React9.useContext(FrameworkContext);
   invariant2(
     context,
     "You must render this element inside a <HydratedRouter> element"
@@ -5224,10 +5385,10 @@ function Scripts(props) {
     renderMeta.didRenderScripts = true;
   }
   let matches = getActiveMatches(routerMatches, null, isSpaMode);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     isHydrated = true;
   }, []);
-  let initialScripts = React10.useMemo(() => {
+  let initialScripts = React9.useMemo(() => {
     let streamScript = "window.__reactRouterContext.stream = new ReadableStream({start(controller){window.__reactRouterContext.streamController = controller;}}).pipeThrough(new TextEncoderStream());";
     let contextScript = staticContext ? `window.__reactRouterContext = ${serverHandoffString};${streamScript}` : " ";
     let routeModulesScript = !isStatic ? " " : `${manifest.hmr?.runtime ? `import ${JSON.stringify(manifest.hmr.runtime)};` : ""}${!enableFogOfWar ? `import ${JSON.stringify(manifest.url)}` : ""};
@@ -5247,7 +5408,7 @@ ${matches.map(
   window.__reactRouterRouteModules = {${matches.map((match, index) => `${JSON.stringify(match.route.id)}:route${index}`).join(",")}};
 
 import(${JSON.stringify(manifest.entry.module)});`;
-    return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+    return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
       "script",
       {
         ...props,
@@ -5255,7 +5416,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
         dangerouslySetInnerHTML: createHtml(contextScript),
         type: void 0
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React9.createElement(
       "script",
       {
         ...props,
@@ -5271,21 +5432,21 @@ import(${JSON.stringify(manifest.entry.module)});`;
     return route ? (route.imports || []).concat([route.module]) : [];
   }).flat(1);
   let preloads = isHydrated ? [] : manifest.entry.imports.concat(routePreloads);
-  return isHydrated ? null : /* @__PURE__ */ React10.createElement(React10.Fragment, null, !enableFogOfWar ? /* @__PURE__ */ React10.createElement(
+  return isHydrated ? null : /* @__PURE__ */ React9.createElement(React9.Fragment, null, !enableFogOfWar ? /* @__PURE__ */ React9.createElement(
     "link",
     {
       rel: "modulepreload",
       href: manifest.url,
       crossOrigin: props.crossOrigin
     }
-  ) : null, /* @__PURE__ */ React10.createElement(
+  ) : null, /* @__PURE__ */ React9.createElement(
     "link",
     {
       rel: "modulepreload",
       href: manifest.entry.module,
       crossOrigin: props.crossOrigin
     }
-  ), dedupe(preloads).map((path) => /* @__PURE__ */ React10.createElement(
+  ), dedupe(preloads).map((path) => /* @__PURE__ */ React9.createElement(
     "link",
     {
       key: path,
@@ -5338,11 +5499,11 @@ function deserializeErrors(errors) {
 
 // lib/dom-export/dom-router-provider.tsx
 function RouterProvider2(props) {
-  return /* @__PURE__ */ React11.createElement(RouterProvider, { flushSync: ReactDOM.flushSync, ...props });
+  return /* @__PURE__ */ React10.createElement(RouterProvider, { flushSync: ReactDOM.flushSync, ...props });
 }
 
 // lib/dom-export/hydrated-router.tsx
-var React12 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var ssrInfo = null;
 var router = null;
 function initSsrInfo() {
@@ -5357,7 +5518,9 @@ function initSsrInfo() {
     };
   }
 }
-function createHydratedRouter() {
+function createHydratedRouter({
+  context
+}) {
   initSsrInfo();
   if (!ssrInfo) {
     throw new Error(
@@ -5423,9 +5586,10 @@ function createHydratedRouter() {
     routes,
     history: createBrowserHistory(),
     basename: ssrInfo.context.basename,
+    context,
     hydrationData,
     mapRouteProperties,
-    dataStrategy: getSingleFetchDataStrategy(
+    dataStrategy: ssrInfo.context.isSpaMode ? void 0 : getSingleFetchDataStrategy(
       ssrInfo.manifest,
       ssrInfo.routeModules,
       () => router2
@@ -5447,11 +5611,11 @@ function createHydratedRouter() {
   window.__reactRouterDataRouter = router2;
   return router2;
 }
-function HydratedRouter() {
+function HydratedRouter(props) {
   if (!router) {
-    router = createHydratedRouter();
+    router = createHydratedRouter({ context: props.context });
   }
-  let [criticalCss, setCriticalCss] = React12.useState(
+  let [criticalCss, setCriticalCss] = React11.useState(
     process.env.NODE_ENV === "development" ? ssrInfo?.context.criticalCss : void 0
   );
   if (process.env.NODE_ENV === "development") {
@@ -5459,14 +5623,14 @@ function HydratedRouter() {
       window.__reactRouterClearCriticalCss = () => setCriticalCss(void 0);
     }
   }
-  let [location, setLocation] = React12.useState(router.state.location);
-  React12.useLayoutEffect(() => {
+  let [location, setLocation] = React11.useState(router.state.location);
+  React11.useLayoutEffect(() => {
     if (ssrInfo && ssrInfo.router && !ssrInfo.routerInitialized) {
       ssrInfo.routerInitialized = true;
       ssrInfo.router.initialize();
     }
   }, []);
-  React12.useLayoutEffect(() => {
+  React11.useLayoutEffect(() => {
     if (ssrInfo && ssrInfo.router) {
       return ssrInfo.router.subscribe((newState) => {
         if (newState.location !== location) {
@@ -5485,7 +5649,7 @@ function HydratedRouter() {
   return (
     // This fragment is important to ensure we match the <ServerRouter> JSX
     // structure so that useId values hydrate correctly
-    /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
       FrameworkContext.Provider,
       {
         value: {
@@ -5496,8 +5660,8 @@ function HydratedRouter() {
           isSpaMode: ssrInfo.context.isSpaMode
         }
       },
-      /* @__PURE__ */ React12.createElement(RemixErrorBoundary, { location }, /* @__PURE__ */ React12.createElement(RouterProvider2, { router }))
-    ), /* @__PURE__ */ React12.createElement(React12.Fragment, null))
+      /* @__PURE__ */ React11.createElement(RemixErrorBoundary, { location }, /* @__PURE__ */ React11.createElement(RouterProvider2, { router }))
+    ), /* @__PURE__ */ React11.createElement(React11.Fragment, null))
   );
 }
 // Annotate the CommonJS export names for ESM import in node: