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

package/dist/development/{chunk-5XVYBMAF.mjs → chunk-H3OBLXFX.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-1ebb6d403
+ * react-router v0.0.0-experimental-e41ede670
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -812,7 +812,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 redirectDocument = (url, init) => {
   let response = redirect(url, init);
@@ -907,6 +910,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 = {
@@ -1095,11 +1099,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,
@@ -1482,6 +1481,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 };
       }
@@ -2143,13 +2150,13 @@ function createRouter(init) {
       results = await callDataStrategyImpl(
         dataStrategyImpl,
         type,
-        state2,
         request,
         matchesToLoad,
         matches,
         fetcherKey,
         manifest,
-        mapRouteProperties2
+        mapRouteProperties2,
+        routerContext
       );
     } catch (e) {
       matchesToLoad.forEach((m) => {
@@ -2575,16 +2582,18 @@ function createStaticHandler(routes, opts) {
   async function query(request, {
     requestContext,
     skipLoaderErrorBubbling,
-    dataStrategy
+    dataStrategy,
+    respond
   } = {}) {
     let url = new URL(request.url);
     let method = request.method;
     let location = createLocation("", createPath(url), null, "default");
     let matches = matchRoutes(dataRoutes, location, basename);
+    let staticContext;
     if (!isValidMethod(method) && method !== "HEAD") {
       let error = getInternalRouterError(405, { method });
       let { matches: methodNotAllowedMatches, route } = getShortCircuitMatches(dataRoutes);
-      return {
+      staticContext = {
         basename,
         location,
         matches: methodNotAllowedMatches,
@@ -2600,7 +2609,7 @@ function createStaticHandler(routes, opts) {
     } else if (!matches) {
       let error = getInternalRouterError(404, { pathname: location.pathname });
       let { matches: notFoundMatches, route } = getShortCircuitMatches(dataRoutes);
-      return {
+      staticContext = {
         basename,
         location,
         matches: notFoundMatches,
@@ -2613,25 +2622,76 @@ function createStaticHandler(routes, opts) {
         loaderHeaders: {},
         actionHeaders: {}
       };
+    } else if (respond) {
+      try {
+        let response = await runMiddlewarePipeline(
+          {
+            request,
+            matches,
+            params: matches[0].params,
+            context: requestContext
+          },
+          matches.length - 1,
+          true,
+          async () => {
+            let result = await callQueryHandlers(
+              request,
+              location,
+              matches,
+              requestContext,
+              dataStrategy || defaultDataStrategyWithoutMiddleware,
+              skipLoaderErrorBubbling === true,
+              null
+            );
+            if (isResponse(result)) {
+              return result;
+            }
+            let res = await respond({
+              location,
+              basename,
+              ...result
+            });
+            return res;
+          }
+        );
+        invariant(isResponse(response), "Expected a response in query()");
+        return response;
+      } catch (e) {
+        if (isResponse(e)) {
+          return e;
+        }
+        throw e;
+      }
+    } else {
+      let result = await callQueryHandlers(
+        request,
+        location,
+        matches,
+        requestContext,
+        dataStrategy || null,
+        skipLoaderErrorBubbling === true,
+        null
+      );
+      if (isResponse(result)) {
+        return result;
+      }
+      staticContext = {
+        location,
+        basename,
+        ...result
+      };
     }
-    let result = await queryImpl(
-      request,
-      location,
-      matches,
-      requestContext,
-      dataStrategy || null,
-      skipLoaderErrorBubbling === true,
-      null
-    );
-    if (isResponse(result)) {
-      return result;
+    if (respond) {
+      let res = await respond(staticContext);
+      return res;
     }
-    return { location, basename, ...result };
+    return staticContext;
   }
   async function queryRoute(request, {
     routeId,
     requestContext,
-    dataStrategy
+    dataStrategy,
+    respond
   } = {}) {
     let url = new URL(request.url);
     let method = request.method;
@@ -2651,31 +2711,64 @@ function createStaticHandler(routes, opts) {
     } else if (!match) {
       throw getInternalRouterError(404, { pathname: location.pathname });
     }
-    let result = await queryImpl(
-      request,
-      location,
-      matches,
-      requestContext,
-      dataStrategy || null,
-      false,
-      match
-    );
-    if (isResponse(result)) {
-      return result;
-    }
-    let error = result.errors ? Object.values(result.errors)[0] : void 0;
-    if (error !== void 0) {
-      throw error;
-    }
-    if (result.actionData) {
-      return Object.values(result.actionData)[0];
-    }
-    if (result.loaderData) {
-      return Object.values(result.loaderData)[0];
+    if (respond) {
+      let response = await runMiddlewarePipeline(
+        {
+          request,
+          matches,
+          params: matches[0].params,
+          context: requestContext
+        },
+        matches.length - 1,
+        true,
+        async () => {
+          let result = await callQueryHandlers(
+            request,
+            location,
+            matches,
+            requestContext,
+            dataStrategy || defaultDataStrategyWithoutMiddleware,
+            false,
+            match
+          );
+          if (isResponse(result)) {
+            return result;
+          }
+          let error = result.errors ? Object.values(result.errors)[0] : void 0;
+          if (error !== void 0) {
+            throw error;
+          }
+          throw new Error("Expected a response from queryRoute");
+        }
+      );
+      return response;
+    } else {
+      let result = await callQueryHandlers(
+        request,
+        location,
+        matches,
+        requestContext,
+        dataStrategy || null,
+        false,
+        match
+      );
+      if (isResponse(result)) {
+        return result;
+      }
+      let error = result.errors ? Object.values(result.errors)[0] : void 0;
+      if (error !== void 0) {
+        throw error;
+      }
+      if (result.actionData) {
+        return Object.values(result.actionData)[0];
+      }
+      if (result.loaderData) {
+        return Object.values(result.loaderData)[0];
+      }
+      return void 0;
     }
-    return void 0;
   }
-  async function queryImpl(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {
+  async function callQueryHandlers(request, location, matches, requestContext, dataStrategy, skipLoaderErrorBubbling, routeMatch) {
     invariant(
       request.signal,
       "query()/queryRoute() requests must contain an AbortController signal"
@@ -2780,7 +2873,7 @@ function createStaticHandler(routes, opts) {
     });
     if (isErrorResult(result)) {
       let boundaryMatch = skipLoaderErrorBubbling ? actionMatch : findNearestBoundary(matches, actionMatch.route.id);
-      let context2 = await loadRouteData(
+      let handlerContext2 = await loadRouteData(
         loaderRequest,
         matches,
         requestContext,
@@ -2790,7 +2883,7 @@ function createStaticHandler(routes, opts) {
         [boundaryMatch.route.id, result]
       );
       return {
-        ...context2,
+        ...handlerContext2,
         statusCode: isRouteErrorResponse(result.error) ? result.error.status : result.statusCode != null ? result.statusCode : 500,
         actionData: null,
         actionHeaders: {
@@ -2798,7 +2891,7 @@ function createStaticHandler(routes, opts) {
         }
       };
     }
-    let context = await loadRouteData(
+    let handlerContext = await loadRouteData(
       loaderRequest,
       matches,
       requestContext,
@@ -2807,7 +2900,7 @@ function createStaticHandler(routes, opts) {
       null
     );
     return {
-      ...context,
+      ...handlerContext,
       actionData: {
         [actionMatch.route.id]: result.data
       },
@@ -2856,7 +2949,7 @@ function createStaticHandler(routes, opts) {
     if (request.signal.aborted) {
       throwStaticHandlerAbortedError(request, isRouteRequest);
     }
-    let context = processRouteLoaderData(
+    let handlerContext = processRouteLoaderData(
       matches,
       results,
       pendingActionResult,
@@ -2868,26 +2961,25 @@ function createStaticHandler(routes, opts) {
     );
     matches.forEach((match) => {
       if (!executedLoaders.has(match.route.id)) {
-        context.loaderData[match.route.id] = null;
+        handlerContext.loaderData[match.route.id] = null;
       }
     });
     return {
-      ...context,
+      ...handlerContext,
       matches
     };
   }
-  async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, requestContext, dataStrategy) {
+  async function callDataStrategy(type, request, matchesToLoad, matches, isRouteRequest, routerContext, dataStrategy) {
     let results = await callDataStrategyImpl(
       dataStrategy || defaultDataStrategy,
       type,
-      null,
       request,
       matchesToLoad,
       matches,
       null,
       manifest,
       mapRouteProperties2,
-      requestContext
+      routerContext
     );
     let dataResults = {};
     await Promise.all(
@@ -2920,15 +3012,14 @@ function createStaticHandler(routes, opts) {
     queryRoute
   };
 }
-function getStaticContextFromError(routes, context, error) {
-  let newContext = {
-    ...context,
+function getStaticContextFromError(routes, handlerContext, error) {
+  return {
+    ...handlerContext,
     statusCode: isRouteErrorResponse(error) ? error.status : 500,
     errors: {
-      [context._deepestRenderedBoundaryId || routes[0].id]: error
+      [handlerContext._deepestRenderedBoundaryId || routes[0].id]: error
     }
   };
-  return newContext;
 }
 function throwStaticHandlerAbortedError(request, isRouteRequest) {
   if (request.signal.reason !== void 0) {
@@ -3321,20 +3412,133 @@ async function loadLazyRouteModule(route, mapRouteProperties2, manifest) {
     lazy: void 0
   });
 }
-async function defaultDataStrategy({
-  matches
-}) {
-  let matchesToLoad = matches.filter((m) => m.shouldLoad);
+async function defaultDataStrategyWithoutMiddleware(args) {
+  let matchesToLoad = args.matches.filter((m) => m.shouldLoad);
+  let keyedResults = {};
   let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
-  return results.reduce(
-    (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
-    {}
+  results.forEach((result, i) => {
+    keyedResults[matchesToLoad[i].route.id] = result;
+  });
+  return keyedResults;
+}
+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);
@@ -3348,7 +3552,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
         match,
         loadRoutePromise,
         handlerOverride,
-        requestContext
+        routerContext
       ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
@@ -3362,7 +3566,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matc
     request,
     params: matches[0].params,
     fetcherKey,
-    context: requestContext
+    context: routerContext
   });
   try {
     await Promise.all(loadRouteDefinitionsPromises);
@@ -3370,7 +3574,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) => {
@@ -3390,7 +3594,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
         {
           request,
           params: match.params,
-          context: staticContext
+          context: routerContext
         },
         ...ctx !== void 0 ? [ctx] : []
       );
@@ -4024,7 +4228,7 @@ function createDeferred() {
 }
 
 // lib/components.tsx
-import * as React4 from "react";
+import * as React3 from "react";
 
 // lib/context.ts
 import * as React from "react";
@@ -4642,23 +4846,8 @@ function warnOnce(condition, message) {
   }
 }
 
-// lib/dom/shared.tsx
-import * as React3 from "react";
+// lib/components.tsx
 var ENABLE_DEV_WARNINGS2 = true;
-function createHref(to) {
-  return typeof to === "string" ? to : createPath(to);
-}
-function encodeLocation(to) {
-  let href = typeof to === "string" ? to : createPath(to);
-  href = href.replace(/ $/, "%20");
-  let encoded = ABSOLUTE_URL_REGEX2.test(href) ? new URL(href) : new URL(href, "http://localhost");
-  return {
-    pathname: encoded.pathname,
-    search: encoded.search,
-    hash: encoded.hash
-  };
-}
-var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
 function mapRouteProperties(route) {
   let updates = {
     // Note: this check also occurs in createRoutesFromChildren so update
@@ -4709,11 +4898,10 @@ function mapRouteProperties(route) {
   }
   return updates;
 }
-
-// lib/components.tsx
 function createMemoryRouter(routes, opts) {
   return createRouter({
     basename: opts?.basename,
+    context: opts?.context,
     future: opts?.future,
     history: createMemoryHistory({
       initialEntries: opts?.initialEntries,
@@ -4749,23 +4937,23 @@ function RouterProvider({
   router,
   flushSync: reactDomFlushSyncImpl
 }) {
-  let [state, setStateImpl] = React4.useState(router.state);
-  let [pendingState, setPendingState] = React4.useState();
-  let [vtContext, setVtContext] = React4.useState({
+  let [state, setStateImpl] = React3.useState(router.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, 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(
         flushSync === 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.'
@@ -4779,7 +4967,7 @@ function RouterProvider({
         if (reactDomFlushSyncImpl && flushSync) {
           reactDomFlushSyncImpl(() => setStateImpl(newState));
         } else {
-          React4.startTransition(() => setStateImpl(newState));
+          React3.startTransition(() => setStateImpl(newState));
         }
         return;
       }
@@ -4830,18 +5018,18 @@ function RouterProvider({
     },
     [router.window, reactDomFlushSyncImpl, transition, renderDfd]
   );
-  React4.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
-  React4.useEffect(() => {
+  React3.useLayoutEffect(() => router.subscribe(setState), [router, setState]);
+  React3.useEffect(() => {
     if (vtContext.isTransitioning && !vtContext.flushSync) {
       setRenderDfd(new Deferred());
     }
   }, [vtContext]);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     if (renderDfd && pendingState && router.window) {
       let newState = pendingState;
       let renderPromise = renderDfd.promise;
       let transition2 = router.window.document.startViewTransition(async () => {
-        React4.startTransition(() => setStateImpl(newState));
+        React3.startTransition(() => setStateImpl(newState));
         await renderPromise;
       });
       transition2.finished.finally(() => {
@@ -4853,12 +5041,12 @@ function RouterProvider({
       setTransition(transition2);
     }
   }, [pendingState, renderDfd, router.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({
@@ -4870,7 +5058,7 @@ function RouterProvider({
       setInterruption(void 0);
     }
   }, [vtContext.isTransitioning, interruption]);
-  let navigator2 = React4.useMemo(() => {
+  let navigator2 = React3.useMemo(() => {
     return {
       createHref: router.createHref,
       encodeLocation: router.encodeLocation,
@@ -4887,7 +5075,7 @@ function RouterProvider({
     };
   }, [router]);
   let basename = router.basename || "/";
-  let dataRouterContext = React4.useMemo(
+  let dataRouterContext = React3.useMemo(
     () => ({
       router,
       navigator: navigator2,
@@ -4896,7 +5084,7 @@ function RouterProvider({
     }),
     [router, 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,
@@ -4904,7 +5092,7 @@ function RouterProvider({
       navigationType: state.historyAction,
       navigator: navigator2
     },
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React3.createElement(
       MemoizedDataRoutes,
       {
         routes: router.routes,
@@ -4914,7 +5102,7 @@ function RouterProvider({
     )
   ))))), null);
 }
-var MemoizedDataRoutes = React4.memo(DataRoutes);
+var MemoizedDataRoutes = React3.memo(DataRoutes);
 function DataRoutes({
   routes,
   future,
@@ -4928,7 +5116,7 @@ function MemoryRouter({
   initialEntries,
   initialIndex
 }) {
-  let historyRef = React4.useRef();
+  let historyRef = React3.useRef();
   if (historyRef.current == null) {
     historyRef.current = createMemoryHistory({
       initialEntries,
@@ -4937,18 +5125,18 @@ function MemoryRouter({
     });
   }
   let history = historyRef.current;
-  let [state, setStateImpl] = React4.useState({
+  let [state, setStateImpl] = React3.useState({
     action: history.action,
     location: history.location
   });
-  let setState = React4.useCallback(
+  let setState = React3.useCallback(
     (newState) => {
-      React4.startTransition(() => setStateImpl(newState));
+      React3.startTransition(() => setStateImpl(newState));
     },
     [setStateImpl]
   );
-  React4.useLayoutEffect(() => history.listen(setState), [history, setState]);
-  return /* @__PURE__ */ React4.createElement(
+  React3.useLayoutEffect(() => history.listen(setState), [history, setState]);
+  return /* @__PURE__ */ React3.createElement(
     Router,
     {
       basename,
@@ -4971,12 +5159,12 @@ function Navigate({
     // the router loaded. We can help them understand how to avoid that.
     `<Navigate> may be used only in the context of a <Router> component.`
   );
-  let { static: isStatic } = React4.useContext(NavigationContext);
+  let { static: isStatic } = React3.useContext(NavigationContext);
   warning(
     !isStatic,
     `<Navigate> must not be used on the initial render in a <StaticRouter>. This is a no-op, but you should modify your code so the <Navigate> is only ever rendered in response to some user interaction or state change.`
   );
-  let { matches } = React4.useContext(RouteContext);
+  let { matches } = React3.useContext(RouteContext);
   let { pathname: locationPathname } = useLocation();
   let navigate = useNavigate();
   let path = resolveTo(
@@ -4986,7 +5174,7 @@ function Navigate({
     relative === "path"
   );
   let jsonPath = JSON.stringify(path);
-  React4.useEffect(() => {
+  React3.useEffect(() => {
     navigate(JSON.parse(jsonPath), { replace: replace2, state, relative });
   }, [navigate, jsonPath, relative, replace2, state]);
   return null;
@@ -5013,7 +5201,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,
@@ -5032,7 +5220,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;
@@ -5055,7 +5243,7 @@ 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 }));
 }
 function Routes({
   children,
@@ -5068,9 +5256,9 @@ function Await({
   errorElement,
   resolve
 }) {
-  return /* @__PURE__ */ React4.createElement(AwaitErrorBoundary, { resolve, errorElement }, /* @__PURE__ */ React4.createElement(ResolveAwait, null, children));
+  return /* @__PURE__ */ React3.createElement(AwaitErrorBoundary, { resolve, errorElement }, /* @__PURE__ */ React3.createElement(ResolveAwait, null, children));
 }
-var AwaitErrorBoundary = class extends React4.Component {
+var AwaitErrorBoundary = class extends React3.Component {
   constructor(props) {
     super(props);
     this.state = { error: null };
@@ -5116,10 +5304,10 @@ var AwaitErrorBoundary = class extends React4.Component {
       throw promise._error;
     }
     if (status === 2 /* error */) {
-      return /* @__PURE__ */ React4.createElement(AwaitContext.Provider, { value: promise, children: errorElement });
+      return /* @__PURE__ */ React3.createElement(AwaitContext.Provider, { value: promise, children: errorElement });
     }
     if (status === 1 /* success */) {
-      return /* @__PURE__ */ React4.createElement(AwaitContext.Provider, { value: promise, children });
+      return /* @__PURE__ */ React3.createElement(AwaitContext.Provider, { value: promise, children });
     }
     throw promise;
   }
@@ -5129,16 +5317,16 @@ function ResolveAwait({
 }) {
   let data2 = useAsyncValue();
   let toRender = typeof children === "function" ? children(data2) : children;
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, toRender);
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, toRender);
 }
 function createRoutesFromChildren(children, parentPath = []) {
   let routes = [];
-  React4.Children.forEach(children, (element, index) => {
-    if (!React4.isValidElement(element)) {
+  React3.Children.forEach(children, (element, index) => {
+    if (!React3.isValidElement(element)) {
       return;
     }
     let treePath = [...parentPath, index];
-    if (element.type === React4.Fragment) {
+    if (element.type === React3.Fragment) {
       routes.push.apply(
         routes,
         createRoutesFromChildren(element.props.children, treePath)
@@ -5187,7 +5375,7 @@ function renderMatches(matches) {
 }
 
 // lib/dom/lib.tsx
-import * as React11 from "react";
+import * as React10 from "react";
 
 // lib/dom/dom.ts
 var defaultMethod = "get";
@@ -5318,7 +5506,7 @@ function getFormSubmissionInfo(target, basename) {
 }
 
 // lib/dom/ssr/components.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 
 // lib/dom/ssr/invariant.ts
 function invariant2(value, message) {
@@ -5570,7 +5758,7 @@ function createHtml(html) {
 }
 
 // lib/dom/ssr/single-fetch.tsx
-import * as React5 from "react";
+import * as React4 from "react";
 import { decode } from "turbo-stream";
 
 // lib/dom/ssr/data.ts
@@ -5628,7 +5816,7 @@ function StreamTransfer({
     throw promise;
   }
   let { done, value } = promise.result;
-  let scriptTag = value ? /* @__PURE__ */ React5.createElement(
+  let scriptTag = value ? /* @__PURE__ */ React4.createElement(
     "script",
     {
       nonce,
@@ -5640,7 +5828,7 @@ function StreamTransfer({
     }
   ) : null;
   if (done) {
-    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, scriptTag, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, scriptTag, /* @__PURE__ */ React4.createElement(
       "script",
       {
         nonce,
@@ -5650,7 +5838,7 @@ function StreamTransfer({
       }
     ));
   } else {
-    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, scriptTag, /* @__PURE__ */ React5.createElement(React5.Suspense, null, /* @__PURE__ */ React5.createElement(
+    return /* @__PURE__ */ React4.createElement(React4.Fragment, null, scriptTag, /* @__PURE__ */ React4.createElement(React4.Suspense, null, /* @__PURE__ */ React4.createElement(
       StreamTransfer,
       {
         context,
@@ -5663,20 +5851,54 @@ function StreamTransfer({
   }
 }
 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) {
@@ -5706,6 +5928,20 @@ async function singleFetchActionStrategy(request, matches) {
     }
   };
 }
+function isOptedOut(manifestRoute, routeModule, match, router) {
+  return match.route.id in router.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModule && routeModule.shouldRevalidate;
+}
+function getLowestLoadingIndex(manifest, routeModules, router, matches) {
+  let tailIdx = [...matches].reverse().findIndex(
+    (m) => m.shouldLoad || !isOptedOut(
+      manifest.routes[m.route.id],
+      routeModules[m.route.id],
+      m,
+      router
+    )
+  );
+  return tailIdx < 0 ? 0 : matches.length - 1 - tailIdx;
+}
 async function singleFetchLoaderNavigationStrategy(manifest, routeModules, router, request, matches) {
   let routesParams = /* @__PURE__ */ new Set();
   let foundOptOutRoute = false;
@@ -5724,7 +5960,7 @@ async function singleFetchLoaderNavigationStrategy(manifest, routeModules, route
           if (!router.state.initialized) {
             return;
           }
-          if (m.route.id in router.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModules[m.route.id]?.shouldRevalidate) {
+          if (isOptedOut(manifestRoute, routeModules[m.route.id], m, router)) {
             foundOptOutRoute = true;
             return;
           }
@@ -5900,7 +6136,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 {
@@ -5936,14 +6172,14 @@ function createDeferred2() {
 }
 
 // lib/dom/ssr/fog-of-war.ts
-import * as React9 from "react";
+import * as React8 from "react";
 
 // lib/dom/ssr/routes.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 
 // lib/dom/ssr/errorBoundaries.tsx
-import * as React6 from "react";
-var RemixErrorBoundary = class extends React6.Component {
+import * as React5 from "react";
+var RemixErrorBoundary = class extends React5.Component {
   constructor(props) {
     super(props);
     this.state = { error: props.error || null, location: props.location };
@@ -5959,7 +6195,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,
@@ -5976,7 +6212,7 @@ function RemixRootDefaultErrorBoundary({
   isOutsideRemixApp
 }) {
   console.error(error);
-  let heyDeveloper = /* @__PURE__ */ React6.createElement(
+  let heyDeveloper = /* @__PURE__ */ React5.createElement(
     "script",
     {
       dangerouslySetInnerHTML: {
@@ -5989,7 +6225,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) {
@@ -5998,14 +6234,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: {
@@ -6030,19 +6266,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
-import * as React7 from "react";
+import * as React6 from "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: {
@@ -6076,17 +6312,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 }
     };
   }
@@ -6116,8 +6352,8 @@ function createServerRoutes(manifest, routeModules, future, isSpaMode, parentId
       // render, so just give it a no-op function so we can render down to the
       // proper fallback
       loader: route.hasLoader || route.hasClientLoader ? () => null : void 0
-      // We don't need action/shouldRevalidate on these routes since they're
-      // for a static render
+      // We don't need middleware/action/shouldRevalidate on these routes since
+      // they're for a static render
     };
     let children = createServerRoutes(
       manifest,
@@ -6201,6 +6437,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       Object.assign(dataRoute, {
         ...dataRoute,
         ...getRouteComponents(route, routeModule, isSpaMode),
+        middleware: routeModule.clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
           routeModule,
@@ -6213,7 +6450,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(
@@ -6227,6 +6464,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
             return routeModule.clientLoader({
               request,
               params,
+              context,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route, isSpaMode);
                 if (isHydrationRequest) {
@@ -6251,7 +6489,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,
@@ -6266,6 +6504,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
           return routeModule.clientAction({
             request,
             params,
+            context,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route, isSpaMode);
               return fetchServerAction(singleFetch);
@@ -6275,13 +6514,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);
           }
@@ -6317,6 +6556,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,
@@ -6374,6 +6614,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,
@@ -6444,7 +6685,7 @@ function getPatchRoutesOnNavigationFunction(manifest, routeModules, isSpaMode, b
   };
 }
 function useFogOFWarDiscovery(router, manifest, routeModules, isSpaMode) {
-  React9.useEffect(() => {
+  React8.useEffect(() => {
     if (!isFogOfWarEnabled(isSpaMode) || navigator.connection?.saveData === true) {
       return;
     }
@@ -6573,7 +6814,7 @@ function debounce(callback, wait) {
 
 // lib/dom/ssr/components.tsx
 function useDataRouterContext2() {
-  let context = React10.useContext(DataRouterContext);
+  let context = React9.useContext(DataRouterContext);
   invariant2(
     context,
     "You must render this element inside a <DataRouterContext.Provider> element"
@@ -6581,17 +6822,17 @@ function useDataRouterContext2() {
   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"
@@ -6599,12 +6840,12 @@ function useFrameworkContext() {
   return context;
 }
 function usePrefetchBehavior(prefetch, theirElementProps) {
-  let frameworkContext = React10.useContext(FrameworkContext);
-  let [maybePrefetch, setMaybePrefetch] = React10.useState(false);
-  let [shouldPrefetch, setShouldPrefetch] = React10.useState(false);
+  let frameworkContext = React9.useContext(FrameworkContext);
+  let [maybePrefetch, setMaybePrefetch] = React9.useState(false);
+  let [shouldPrefetch, setShouldPrefetch] = React9.useState(false);
   let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
-  let ref = React10.useRef(null);
-  React10.useEffect(() => {
+  let ref = React9.useRef(null);
+  React9.useEffect(() => {
     if (prefetch === "render") {
       setShouldPrefetch(true);
     }
@@ -6621,7 +6862,7 @@ function usePrefetchBehavior(prefetch, theirElementProps) {
       };
     }
   }, [prefetch]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (maybePrefetch) {
       let id = setTimeout(() => {
         setShouldPrefetch(true);
@@ -6678,12 +6919,12 @@ function Links() {
   let { isSpaMode, manifest, routeModules, criticalCss } = useFrameworkContext();
   let { errors, matches: routerMatches } = useDataRouterStateContext();
   let matches = getActiveMatches(routerMatches, errors, isSpaMode);
-  let keyedLinks = React10.useMemo(
+  let keyedLinks = React9.useMemo(
     () => getKeyedLinksForMatches(matches, routeModules, manifest),
     [matches, routeModules, manifest]
   );
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, criticalCss ? /* @__PURE__ */ React10.createElement("style", { dangerouslySetInnerHTML: { __html: criticalCss } }) : null, keyedLinks.map(
-    ({ key, link }) => isPageLinkDescriptor(link) ? /* @__PURE__ */ React10.createElement(PrefetchPageLinks, { key, ...link }) : /* @__PURE__ */ React10.createElement("link", { key, ...link })
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, criticalCss ? /* @__PURE__ */ React9.createElement("style", { dangerouslySetInnerHTML: { __html: criticalCss } }) : null, keyedLinks.map(
+    ({ key, link }) => isPageLinkDescriptor(link) ? /* @__PURE__ */ React9.createElement(PrefetchPageLinks, { key, ...link }) : /* @__PURE__ */ React9.createElement("link", { key, ...link })
   ));
 }
 function PrefetchPageLinks({
@@ -6691,19 +6932,19 @@ function PrefetchPageLinks({
   ...dataLinkProps
 }) {
   let { router } = useDataRouterContext2();
-  let matches = React10.useMemo(
+  let matches = React9.useMemo(
     () => matchRoutes(router.routes, page, router.basename),
     [router.routes, page, router.basename]
   );
   if (!matches) {
     return null;
   }
-  return /* @__PURE__ */ React10.createElement(PrefetchPageLinksImpl, { page, matches, ...dataLinkProps });
+  return /* @__PURE__ */ React9.createElement(PrefetchPageLinksImpl, { page, matches, ...dataLinkProps });
 }
 function useKeyedPrefetchLinks(matches) {
   let { manifest, routeModules } = useFrameworkContext();
-  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React10.useState([]);
-  React10.useEffect(() => {
+  let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React9.useState([]);
+  React9.useEffect(() => {
     let interrupted = false;
     void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
       (links) => {
@@ -6726,7 +6967,7 @@ function PrefetchPageLinksImpl({
   let location = useLocation();
   let { manifest, routeModules } = useFrameworkContext();
   let { loaderData, matches } = useDataRouterStateContext();
-  let newMatchesForData = React10.useMemo(
+  let newMatchesForData = React9.useMemo(
     () => getNewMatchesForLinks(
       page,
       nextMatches,
@@ -6737,7 +6978,7 @@ function PrefetchPageLinksImpl({
     ),
     [page, nextMatches, matches, manifest, location]
   );
-  let newMatchesForAssets = React10.useMemo(
+  let newMatchesForAssets = React9.useMemo(
     () => getNewMatchesForLinks(
       page,
       nextMatches,
@@ -6748,7 +6989,7 @@ function PrefetchPageLinksImpl({
     ),
     [page, nextMatches, matches, manifest, location]
   );
-  let dataHrefs = React10.useMemo(() => {
+  let dataHrefs = React9.useMemo(() => {
     if (page === location.pathname + location.search + location.hash) {
       return [];
     }
@@ -6787,15 +7028,15 @@ function PrefetchPageLinksImpl({
     page,
     routeModules
   ]);
-  let moduleHrefs = React10.useMemo(
+  let moduleHrefs = React9.useMemo(
     () => getModuleLinkHrefs(newMatchesForAssets, manifest),
     [newMatchesForAssets, manifest]
   );
   let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React10.createElement("link", { key: href, rel: "prefetch", as: "fetch", href, ...linkProps })), moduleHrefs.map((href) => /* @__PURE__ */ React10.createElement("link", { key: href, rel: "modulepreload", href, ...linkProps })), keyedPrefetchLinks.map(({ key, link }) => (
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React9.createElement("link", { key: href, rel: "prefetch", as: "fetch", href, ...linkProps })), moduleHrefs.map((href) => /* @__PURE__ */ React9.createElement("link", { key: href, rel: "modulepreload", href, ...linkProps })), keyedPrefetchLinks.map(({ key, link }) => (
     // these don't spread `linkProps` because they are full link descriptors
     // already with their own props
-    /* @__PURE__ */ React10.createElement("link", { key, ...link })
+    /* @__PURE__ */ React9.createElement("link", { key, ...link })
   )));
 }
 function Meta() {
@@ -6853,7 +7094,7 @@ function Meta() {
     meta = [...routeMeta];
     leafMeta = meta;
   }
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, meta.flat().map((metaProps) => {
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, meta.flat().map((metaProps) => {
     if (!metaProps) {
       return null;
     }
@@ -6866,22 +7107,22 @@ function Meta() {
         return null;
       }
       let Comp = tagName;
-      return /* @__PURE__ */ React10.createElement(Comp, { key: JSON.stringify(rest), ...rest });
+      return /* @__PURE__ */ React9.createElement(Comp, { key: JSON.stringify(rest), ...rest });
     }
     if ("title" in metaProps) {
-      return /* @__PURE__ */ React10.createElement("title", { key: "title" }, String(metaProps.title));
+      return /* @__PURE__ */ React9.createElement("title", { key: "title" }, String(metaProps.title));
     }
     if ("charset" in metaProps) {
       metaProps.charSet ?? (metaProps.charSet = metaProps.charset);
       delete metaProps.charset;
     }
     if ("charSet" in metaProps && metaProps.charSet != null) {
-      return typeof metaProps.charSet === "string" ? /* @__PURE__ */ React10.createElement("meta", { key: "charSet", charSet: metaProps.charSet }) : null;
+      return typeof metaProps.charSet === "string" ? /* @__PURE__ */ React9.createElement("meta", { key: "charSet", charSet: metaProps.charSet }) : null;
     }
     if ("script:ld+json" in metaProps) {
       try {
         let json = JSON.stringify(metaProps["script:ld+json"]);
-        return /* @__PURE__ */ React10.createElement(
+        return /* @__PURE__ */ React9.createElement(
           "script",
           {
             key: `script:ld+json:${json}`,
@@ -6893,7 +7134,7 @@ function Meta() {
         return null;
       }
     }
-    return /* @__PURE__ */ React10.createElement("meta", { key: JSON.stringify(metaProps), ...metaProps });
+    return /* @__PURE__ */ React9.createElement("meta", { key: JSON.stringify(metaProps), ...metaProps });
   }));
 }
 function isValidMetaTag(tagName) {
@@ -6909,10 +7150,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)}` : ""};
@@ -6932,7 +7173,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,
@@ -6940,7 +7181,7 @@ import(${JSON.stringify(manifest.entry.module)});`;
         dangerouslySetInnerHTML: createHtml(contextScript),
         type: void 0
       }
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React9.createElement(
       "script",
       {
         ...props,
@@ -6956,21 +7197,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,
@@ -6999,13 +7240,14 @@ function mergeRefs(...refs) {
 var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 try {
   if (isBrowser) {
-    window.__reactRouterVersion = "0.0.0-experimental-1ebb6d403";
+    window.__reactRouterVersion = "0.0.0-experimental-e41ede670";
   }
 } catch (e) {
 }
 function createBrowserRouter(routes, opts) {
   return createRouter({
     basename: opts?.basename,
+    context: opts?.context,
     future: opts?.future,
     history: createBrowserHistory({ window: opts?.window }),
     hydrationData: opts?.hydrationData || parseHydrationData(),
@@ -7019,6 +7261,7 @@ function createBrowserRouter(routes, opts) {
 function createHashRouter(routes, opts) {
   return createRouter({
     basename: opts?.basename,
+    context: opts?.context,
     future: opts?.future,
     history: createHashHistory({ window: opts?.window }),
     hydrationData: opts?.hydrationData || parseHydrationData(),
@@ -7079,23 +7322,23 @@ function BrowserRouter({
   children,
   window: window2
 }) {
-  let historyRef = React11.useRef();
+  let historyRef = React10.useRef();
   if (historyRef.current == null) {
     historyRef.current = createBrowserHistory({ window: window2, v5Compat: true });
   }
   let history = historyRef.current;
-  let [state, setStateImpl] = React11.useState({
+  let [state, setStateImpl] = React10.useState({
     action: history.action,
     location: history.location
   });
-  let setState = React11.useCallback(
+  let setState = React10.useCallback(
     (newState) => {
-      React11.startTransition(() => setStateImpl(newState));
+      React10.startTransition(() => setStateImpl(newState));
     },
     [setStateImpl]
   );
-  React11.useLayoutEffect(() => history.listen(setState), [history, setState]);
-  return /* @__PURE__ */ React11.createElement(
+  React10.useLayoutEffect(() => history.listen(setState), [history, setState]);
+  return /* @__PURE__ */ React10.createElement(
     Router,
     {
       basename,
@@ -7107,23 +7350,23 @@ function BrowserRouter({
   );
 }
 function HashRouter({ basename, children, window: window2 }) {
-  let historyRef = React11.useRef();
+  let historyRef = React10.useRef();
   if (historyRef.current == null) {
     historyRef.current = createHashHistory({ window: window2, v5Compat: true });
   }
   let history = historyRef.current;
-  let [state, setStateImpl] = React11.useState({
+  let [state, setStateImpl] = React10.useState({
     action: history.action,
     location: history.location
   });
-  let setState = React11.useCallback(
+  let setState = React10.useCallback(
     (newState) => {
-      React11.startTransition(() => setStateImpl(newState));
+      React10.startTransition(() => setStateImpl(newState));
     },
     [setStateImpl]
   );
-  React11.useLayoutEffect(() => history.listen(setState), [history, setState]);
-  return /* @__PURE__ */ React11.createElement(
+  React10.useLayoutEffect(() => history.listen(setState), [history, setState]);
+  return /* @__PURE__ */ React10.createElement(
     Router,
     {
       basename,
@@ -7139,18 +7382,18 @@ function HistoryRouter({
   children,
   history
 }) {
-  let [state, setStateImpl] = React11.useState({
+  let [state, setStateImpl] = React10.useState({
     action: history.action,
     location: history.location
   });
-  let setState = React11.useCallback(
+  let setState = React10.useCallback(
     (newState) => {
-      React11.startTransition(() => setStateImpl(newState));
+      React10.startTransition(() => setStateImpl(newState));
     },
     [setStateImpl]
   );
-  React11.useLayoutEffect(() => history.listen(setState), [history, setState]);
-  return /* @__PURE__ */ React11.createElement(
+  React10.useLayoutEffect(() => history.listen(setState), [history, setState]);
+  return /* @__PURE__ */ React10.createElement(
     Router,
     {
       basename,
@@ -7162,8 +7405,8 @@ function HistoryRouter({
   );
 }
 HistoryRouter.displayName = "unstable_HistoryRouter";
-var ABSOLUTE_URL_REGEX3 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
-var Link = React11.forwardRef(
+var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+var Link = React10.forwardRef(
   function LinkWithRef({
     onClick,
     discover = "render",
@@ -7178,8 +7421,8 @@ var Link = React11.forwardRef(
     viewTransition,
     ...rest
   }, forwardedRef) {
-    let { basename } = React11.useContext(NavigationContext);
-    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX3.test(to);
+    let { basename } = React10.useContext(NavigationContext);
+    let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX2.test(to);
     let absoluteHref;
     let isExternal = false;
     if (typeof to === "string" && isAbsolute) {
@@ -7223,7 +7466,7 @@ var Link = React11.forwardRef(
     }
     let link = (
       // eslint-disable-next-line jsx-a11y/anchor-has-content
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React10.createElement(
         "a",
         {
           ...rest,
@@ -7236,11 +7479,11 @@ var Link = React11.forwardRef(
         }
       )
     );
-    return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, link, /* @__PURE__ */ React11.createElement(PrefetchPageLinks, { page: href })) : link;
+    return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React10.createElement(React10.Fragment, null, link, /* @__PURE__ */ React10.createElement(PrefetchPageLinks, { page: href })) : link;
   }
 );
 Link.displayName = "Link";
-var NavLink = React11.forwardRef(
+var NavLink = React10.forwardRef(
   function NavLinkWithRef({
     "aria-current": ariaCurrentProp = "page",
     caseSensitive = false,
@@ -7254,8 +7497,8 @@ var NavLink = React11.forwardRef(
   }, ref) {
     let path = useResolvedPath(to, { relative: rest.relative });
     let location = useLocation();
-    let routerState = React11.useContext(DataRouterStateContext);
-    let { navigator: navigator2, basename } = React11.useContext(NavigationContext);
+    let routerState = React10.useContext(DataRouterStateContext);
+    let { navigator: navigator2, basename } = React10.useContext(NavigationContext);
     let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useViewTransitionState(path) && viewTransition === true;
@@ -7291,7 +7534,7 @@ var NavLink = React11.forwardRef(
       ].filter(Boolean).join(" ");
     }
     let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(
       Link,
       {
         ...rest,
@@ -7307,7 +7550,7 @@ var NavLink = React11.forwardRef(
   }
 );
 NavLink.displayName = "NavLink";
-var Form = React11.forwardRef(
+var Form = React10.forwardRef(
   ({
     discover = "render",
     fetcherKey,
@@ -7326,7 +7569,7 @@ var Form = React11.forwardRef(
     let submit = useSubmit();
     let formAction = useFormAction(action, { relative });
     let formMethod = method.toLowerCase() === "get" ? "get" : "post";
-    let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX3.test(action);
+    let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX2.test(action);
     let submitHandler = (event) => {
       onSubmit && onSubmit(event);
       if (event.defaultPrevented) return;
@@ -7344,7 +7587,7 @@ var Form = React11.forwardRef(
         viewTransition
       });
     };
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React10.createElement(
       "form",
       {
         ref: forwardedRef,
@@ -7363,12 +7606,12 @@ function ScrollRestoration({
   storageKey,
   ...props
 }) {
-  let remixContext = React11.useContext(FrameworkContext);
-  let { basename } = React11.useContext(NavigationContext);
+  let remixContext = React10.useContext(FrameworkContext);
+  let { basename } = React10.useContext(NavigationContext);
   let location = useLocation();
   let matches = useMatches();
   useScrollRestoration({ getKey, storageKey });
-  let ssrKey = React11.useMemo(
+  let ssrKey = React10.useMemo(
     () => {
       if (!remixContext || !getKey) return null;
       let userKey = getScrollRestorationKey(
@@ -7402,7 +7645,7 @@ function ScrollRestoration({
       sessionStorage.removeItem(storageKey2);
     }
   }).toString();
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "script",
     {
       ...props,
@@ -7420,12 +7663,12 @@ function getDataRouterConsoleError2(hookName) {
   return `${hookName} must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.`;
 }
 function useDataRouterContext3(hookName) {
-  let ctx = React11.useContext(DataRouterContext);
+  let ctx = React10.useContext(DataRouterContext);
   invariant(ctx, getDataRouterConsoleError2(hookName));
   return ctx;
 }
 function useDataRouterState2(hookName) {
-  let state = React11.useContext(DataRouterStateContext);
+  let state = React10.useContext(DataRouterStateContext);
   invariant(state, getDataRouterConsoleError2(hookName));
   return state;
 }
@@ -7440,7 +7683,7 @@ function useLinkClickHandler(to, {
   let navigate = useNavigate();
   let location = useLocation();
   let path = useResolvedPath(to, { relative });
-  return React11.useCallback(
+  return React10.useCallback(
     (event) => {
       if (shouldProcessLinkClick(event, target)) {
         event.preventDefault();
@@ -7473,10 +7716,10 @@ function useSearchParams(defaultInit) {
     typeof URLSearchParams !== "undefined",
     `You cannot use the \`useSearchParams\` hook in a browser that does not support the URLSearchParams API. If you need to support Internet Explorer 11, we recommend you load a polyfill such as https://github.com/ungap/url-search-params.`
   );
-  let defaultSearchParamsRef = React11.useRef(createSearchParams(defaultInit));
-  let hasSetSearchParamsRef = React11.useRef(false);
+  let defaultSearchParamsRef = React10.useRef(createSearchParams(defaultInit));
+  let hasSetSearchParamsRef = React10.useRef(false);
   let location = useLocation();
-  let searchParams = React11.useMemo(
+  let searchParams = React10.useMemo(
     () => (
       // Only merge in the defaults if we haven't yet called setSearchParams.
       // Once we call that we want those to take precedence, otherwise you can't
@@ -7489,7 +7732,7 @@ function useSearchParams(defaultInit) {
     [location.search]
   );
   let navigate = useNavigate();
-  let setSearchParams = React11.useCallback(
+  let setSearchParams = React10.useCallback(
     (nextInit, navigateOptions) => {
       const newSearchParams = createSearchParams(
         typeof nextInit === "function" ? nextInit(searchParams) : nextInit
@@ -7505,9 +7748,9 @@ var fetcherId = 0;
 var getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
 function useSubmit() {
   let { router } = useDataRouterContext3("useSubmit" /* UseSubmit */);
-  let { basename } = React11.useContext(NavigationContext);
+  let { basename } = React10.useContext(NavigationContext);
   let currentRouteId = useRouteId();
-  return React11.useCallback(
+  return React10.useCallback(
     async (target, options = {}) => {
       let { action, method, encType, formData, body } = getFormSubmissionInfo(
         target,
@@ -7542,8 +7785,8 @@ function useSubmit() {
   );
 }
 function useFormAction(action, { relative } = {}) {
-  let { basename } = React11.useContext(NavigationContext);
-  let routeContext = React11.useContext(RouteContext);
+  let { basename } = React10.useContext(NavigationContext);
+  let routeContext = React10.useContext(RouteContext);
   invariant(routeContext, "useFormAction must be used inside a RouteContext");
   let [match] = routeContext.matches.slice(-1);
   let path = { ...useResolvedPath(action ? action : ".", { relative }) };
@@ -7573,8 +7816,8 @@ function useFetcher({
 } = {}) {
   let { router } = useDataRouterContext3("useFetcher" /* UseFetcher */);
   let state = useDataRouterState2("useFetcher" /* UseFetcher */);
-  let fetcherData = React11.useContext(FetchersContext);
-  let route = React11.useContext(RouteContext);
+  let fetcherData = React10.useContext(FetchersContext);
+  let route = React10.useContext(RouteContext);
   let routeId = route.matches[route.matches.length - 1]?.route.id;
   invariant(fetcherData, `useFetcher must be used inside a FetchersContext`);
   invariant(route, `useFetcher must be used inside a RouteContext`);
@@ -7582,16 +7825,16 @@ function useFetcher({
     routeId != null,
     `useFetcher can only be used on routes that contain a unique "id"`
   );
-  let defaultKey = React11.useId();
-  let [fetcherKey, setFetcherKey] = React11.useState(key || defaultKey);
+  let defaultKey = React10.useId();
+  let [fetcherKey, setFetcherKey] = React10.useState(key || defaultKey);
   if (key && key !== fetcherKey) {
     setFetcherKey(key);
   }
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     router.getFetcher(fetcherKey);
     return () => router.deleteFetcher(fetcherKey);
   }, [router, fetcherKey]);
-  let load = React11.useCallback(
+  let load = React10.useCallback(
     async (href, opts) => {
       invariant(routeId, "No routeId available for fetcher.load()");
       await router.fetch(fetcherKey, routeId, href, opts);
@@ -7599,7 +7842,7 @@ function useFetcher({
     [fetcherKey, routeId, router]
   );
   let submitImpl = useSubmit();
-  let submit = React11.useCallback(
+  let submit = React10.useCallback(
     async (target, opts) => {
       await submitImpl(target, {
         ...opts,
@@ -7609,10 +7852,10 @@ function useFetcher({
     },
     [fetcherKey, submitImpl]
   );
-  let FetcherForm = React11.useMemo(() => {
-    let FetcherForm2 = React11.forwardRef(
+  let FetcherForm = React10.useMemo(() => {
+    let FetcherForm2 = React10.forwardRef(
       (props, ref) => {
-        return /* @__PURE__ */ React11.createElement(Form, { ...props, navigate: false, fetcherKey, ref });
+        return /* @__PURE__ */ React10.createElement(Form, { ...props, navigate: false, fetcherKey, ref });
       }
     );
     FetcherForm2.displayName = "fetcher.Form";
@@ -7620,7 +7863,7 @@ function useFetcher({
   }, [fetcherKey]);
   let fetcher = state.fetchers.get(fetcherKey) || IDLE_FETCHER;
   let data2 = fetcherData.get(fetcherKey);
-  let fetcherWithComponents = React11.useMemo(
+  let fetcherWithComponents = React10.useMemo(
     () => ({
       Form: FetcherForm,
       submit,
@@ -7669,18 +7912,18 @@ function useScrollRestoration({
   let { restoreScrollPosition, preventScrollReset } = useDataRouterState2(
     "useScrollRestoration" /* UseScrollRestoration */
   );
-  let { basename } = React11.useContext(NavigationContext);
+  let { basename } = React10.useContext(NavigationContext);
   let location = useLocation();
   let matches = useMatches();
   let navigation = useNavigation();
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     window.history.scrollRestoration = "manual";
     return () => {
       window.history.scrollRestoration = "auto";
     };
   }, []);
   usePageHide(
-    React11.useCallback(() => {
+    React10.useCallback(() => {
       if (navigation.state === "idle") {
         let key = getScrollRestorationKey(location, matches, basename, getKey);
         savedScrollPositions[key] = window.scrollY;
@@ -7700,7 +7943,7 @@ function useScrollRestoration({
     }, [navigation.state, getKey, basename, location, matches, storageKey])
   );
   if (typeof document !== "undefined") {
-    React11.useLayoutEffect(() => {
+    React10.useLayoutEffect(() => {
       try {
         let sessionPositions = sessionStorage.getItem(
           storageKey || SCROLL_RESTORATION_STORAGE_KEY
@@ -7711,7 +7954,7 @@ function useScrollRestoration({
       } catch (e) {
       }
     }, [storageKey]);
-    React11.useLayoutEffect(() => {
+    React10.useLayoutEffect(() => {
       let disableScrollRestoration = router?.enableScrollRestoration(
         savedScrollPositions,
         () => window.scrollY,
@@ -7719,7 +7962,7 @@ function useScrollRestoration({
       );
       return () => disableScrollRestoration && disableScrollRestoration();
     }, [router, basename, getKey]);
-    React11.useLayoutEffect(() => {
+    React10.useLayoutEffect(() => {
       if (restoreScrollPosition === false) {
         return;
       }
@@ -7745,7 +7988,7 @@ function useScrollRestoration({
 }
 function useBeforeUnload(callback, options) {
   let { capture } = options || {};
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     let opts = capture != null ? { capture } : void 0;
     window.addEventListener("beforeunload", callback, opts);
     return () => {
@@ -7755,7 +7998,7 @@ function useBeforeUnload(callback, options) {
 }
 function usePageHide(callback, options) {
   let { capture } = options || {};
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     let opts = capture != null ? { capture } : void 0;
     window.addEventListener("pagehide", callback, opts);
     return () => {
@@ -7768,7 +8011,7 @@ function usePrompt({
   message
 }) {
   let blocker = useBlocker(when);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (blocker.state === "blocked") {
       let proceed = window.confirm(message);
       if (proceed) {
@@ -7778,14 +8021,14 @@ function usePrompt({
       }
     }
   }, [blocker, message]);
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     if (blocker.state === "blocked" && !when) {
       blocker.reset();
     }
   }, [blocker, when]);
 }
 function useViewTransitionState(to, opts = {}) {
-  let vtContext = React11.useContext(ViewTransitionContext);
+  let vtContext = React10.useContext(ViewTransitionContext);
   invariant(
     vtContext != null,
     "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`.  Did you accidentally import `RouterProvider` from `react-router`?"
@@ -7802,8 +8045,8 @@ function useViewTransitionState(to, opts = {}) {
   return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
 }
 
-// lib/dom/components.tsx
-import * as React12 from "react";
+// lib/dom/server.tsx
+import * as React11 from "react";
 function StaticRouter({
   basename,
   children,
@@ -7821,7 +8064,7 @@ function StaticRouter({
     key: locationProp.key || "default"
   };
   let staticNavigator = getStatelessNavigator();
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Router,
     {
       basename,
@@ -7862,7 +8105,7 @@ function StaticRouterProvider({
     hydrateScript = `window.__staticRouterHydrationData = JSON.parse(${json});`;
   }
   let { state } = dataRouterContext.router;
-  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React12.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React12.createElement(FetchersContext.Provider, { value: fetchersContext }, /* @__PURE__ */ React12.createElement(ViewTransitionContext.Provider, { value: { isTransitioning: false } }, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(DataRouterContext.Provider, { value: dataRouterContext }, /* @__PURE__ */ React11.createElement(DataRouterStateContext.Provider, { value: state }, /* @__PURE__ */ React11.createElement(FetchersContext.Provider, { value: fetchersContext }, /* @__PURE__ */ React11.createElement(ViewTransitionContext.Provider, { value: { isTransitioning: false } }, /* @__PURE__ */ React11.createElement(
     Router,
     {
       basename: dataRouterContext.basename,
@@ -7871,7 +8114,7 @@ function StaticRouterProvider({
       navigator: dataRouterContext.navigator,
       static: dataRouterContext.static
     },
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React11.createElement(
       DataRoutes2,
       {
         routes: router.routes,
@@ -7879,7 +8122,7 @@ function StaticRouterProvider({
         state
       }
     )
-  ))))), hydrateScript ? /* @__PURE__ */ React12.createElement(
+  ))))), hydrateScript ? /* @__PURE__ */ React11.createElement(
     "script",
     {
       suppressHydrationWarning: true,
@@ -7949,19 +8192,6 @@ function getStatelessNavigator() {
     }
   };
 }
-var ESCAPE_LOOKUP2 = {
-  "&": "\\u0026",
-  ">": "\\u003e",
-  "<": "\\u003c",
-  "\u2028": "\\u2028",
-  "\u2029": "\\u2029"
-};
-var ESCAPE_REGEX2 = /[&><\u2028\u2029]/g;
-function htmlEscape(str) {
-  return str.replace(ESCAPE_REGEX2, (match) => ESCAPE_LOOKUP2[match]);
-}
-
-// lib/dom/server.tsx
 function createStaticHandler2(routes, opts) {
   return createStaticHandler(routes, {
     ...opts,
@@ -8060,9 +8290,34 @@ function createStaticRouter(routes, context, opts = {}) {
     }
   };
 }
+function createHref(to) {
+  return typeof to === "string" ? to : createPath(to);
+}
+function encodeLocation(to) {
+  let href = typeof to === "string" ? to : createPath(to);
+  href = href.replace(/ $/, "%20");
+  let encoded = ABSOLUTE_URL_REGEX3.test(href) ? new URL(href) : new URL(href, "http://localhost");
+  return {
+    pathname: encoded.pathname,
+    search: encoded.search,
+    hash: encoded.hash
+  };
+}
+var ABSOLUTE_URL_REGEX3 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
+var ESCAPE_LOOKUP2 = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029"
+};
+var ESCAPE_REGEX2 = /[&><\u2028\u2029]/g;
+function htmlEscape(str) {
+  return str.replace(ESCAPE_REGEX2, (match) => ESCAPE_LOOKUP2[match]);
+}
 
 // lib/dom/ssr/server.tsx
-import * as React13 from "react";
+import * as React12 from "react";
 function ServerRouter({
   context,
   url,
@@ -8090,7 +8345,7 @@ function ServerRouter({
     }
   }
   let router = createStaticRouter(routes, context.staticHandlerContext);
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
     FrameworkContext.Provider,
     {
       value: {
@@ -8104,7 +8359,7 @@ function ServerRouter({
         renderMeta: context.renderMeta
       }
     },
-    /* @__PURE__ */ React13.createElement(RemixErrorBoundary, { location: router.state.location }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React12.createElement(RemixErrorBoundary, { location: router.state.location }, /* @__PURE__ */ React12.createElement(
       StaticRouterProvider,
       {
         router,
@@ -8112,7 +8367,7 @@ function ServerRouter({
         hydrate: false
       }
     ))
-  ), context.serverHandoffStream ? /* @__PURE__ */ React13.createElement(React13.Suspense, null, /* @__PURE__ */ React13.createElement(
+  ), context.serverHandoffStream ? /* @__PURE__ */ React12.createElement(React12.Suspense, null, /* @__PURE__ */ React12.createElement(
     StreamTransfer,
     {
       context,
@@ -8125,7 +8380,7 @@ function ServerRouter({
 }
 
 // lib/dom/ssr/routes-test-stub.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 function createRoutesStub(routes, context = {}) {
   return function RoutesTestStub({
     initialEntries,
@@ -8133,8 +8388,8 @@ function createRoutesStub(routes, context = {}) {
     hydrationData,
     future
   }) {
-    let routerRef = React14.useRef();
-    let remixContextRef = React14.useRef();
+    let routerRef = React13.useRef();
+    let remixContextRef = React13.useRef();
     if (routerRef.current == null) {
       remixContextRef.current = {
         future: {},
@@ -8148,29 +8403,29 @@ function createRoutesStub(routes, context = {}) {
         isSpaMode: false
       };
       let patched = processRoutes(
-        // @ts-expect-error loader/action context types don't match :/
+        // @ts-expect-error `StubRouteObject` is stricter about `loader`/`action`
+        // types compared to `AgnosticRouteObject`
         convertRoutesToDataRoutes(routes, (r) => r),
-        context,
         remixContextRef.current.manifest,
         remixContextRef.current.routeModules
       );
       routerRef.current = createMemoryRouter(patched, {
+        context,
         initialEntries,
         initialIndex,
         hydrationData
       });
     }
-    return /* @__PURE__ */ React14.createElement(FrameworkContext.Provider, { value: remixContextRef.current }, /* @__PURE__ */ React14.createElement(RouterProvider, { router: routerRef.current }));
+    return /* @__PURE__ */ React13.createElement(FrameworkContext.Provider, { value: remixContextRef.current }, /* @__PURE__ */ React13.createElement(RouterProvider, { router: routerRef.current }));
   };
 }
-function processRoutes(routes, context, manifest, routeModules, parentId) {
+function processRoutes(routes, manifest, routeModules, parentId) {
   return routes.map((route) => {
     if (!route.id) {
       throw new Error(
         "Expected a route.id in @remix-run/testing processRoutes() function"
       );
     }
-    let { loader, action } = route;
     let newRoute = {
       id: route.id,
       path: route.path,
@@ -8178,8 +8433,8 @@ function processRoutes(routes, context, manifest, routeModules, parentId) {
       Component: route.Component,
       HydrateFallback: route.HydrateFallback,
       ErrorBoundary: route.ErrorBoundary,
-      action: action ? (args) => action({ ...args, context }) : void 0,
-      loader: loader ? (args) => loader({ ...args, context }) : void 0,
+      action: route.action,
+      loader: route.loader,
       handle: route.handle,
       shouldRevalidate: route.shouldRevalidate
     };
@@ -8211,7 +8466,6 @@ function processRoutes(routes, context, manifest, routeModules, parentId) {
     if (route.children) {
       newRoute.children = processRoutes(
         route.children,
-        context,
         manifest,
         routeModules,
         newRoute.id
@@ -8572,6 +8826,7 @@ function createStaticHandlerDataRoutes(manifest, future, parentId = "", routesBy
       hasErrorBoundary: route.id === "root" || route.module.ErrorBoundary != null,
       id: route.id,
       path: route.path,
+      middleware: route.module.middleware,
       // Need to use RR's version in the param typed here to permit the optional
       // context even though we know it'll always be provided in remix
       loader: route.module.loader ? async (args) => {
@@ -8715,24 +8970,6 @@ function prependCookies(parentHeaders, childHeaders) {
 
 // lib/server-runtime/single-fetch.ts
 var SINGLE_FETCH_REDIRECT_STATUS = 202;
-function getSingleFetchDataStrategy2({
-  isActionDataRequest,
-  loadRouteIds
-} = {}) {
-  return async ({ request, matches }) => {
-    if (isActionDataRequest && request.method === "GET") {
-      return {};
-    }
-    let matchesToLoad = loadRouteIds ? matches.filter((m) => loadRouteIds.includes(m.route.id)) : matches;
-    let results = await Promise.all(
-      matchesToLoad.map((match) => match.resolve())
-    );
-    return results.reduce(
-      (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
-      {}
-    );
-  };
-}
 async function singleFetchAction(build, serverMode, staticHandler, request, handlerUrl, loadContext, handleError) {
   try {
     let handlerRequest = new Request(handlerUrl, {
@@ -8745,12 +8982,45 @@ async function singleFetchAction(build, serverMode, staticHandler, request, hand
     let result = await staticHandler.query(handlerRequest, {
       requestContext: loadContext,
       skipLoaderErrorBubbling: true,
-      dataStrategy: getSingleFetchDataStrategy2({
-        isActionDataRequest: true
-      })
+      async respond(context) {
+        let headers = getDocumentHeaders(build, context);
+        if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
+          return generateSingleFetchResponse(request, build, serverMode, {
+            result: getSingleFetchRedirect(
+              context.statusCode,
+              headers,
+              build.basename
+            ),
+            headers,
+            status: SINGLE_FETCH_REDIRECT_STATUS
+          });
+        }
+        if (context.errors) {
+          Object.values(context.errors).forEach((err) => {
+            if (!isRouteErrorResponse(err) || err.error) {
+              handleError(err);
+            }
+          });
+          context.errors = sanitizeErrors(context.errors, serverMode);
+        }
+        let singleFetchResult;
+        if (context.errors) {
+          singleFetchResult = { error: Object.values(context.errors)[0] };
+        } else {
+          singleFetchResult = {
+            data: Object.values(context.actionData || {})[0]
+          };
+        }
+        return generateSingleFetchResponse(request, build, serverMode, {
+          result: singleFetchResult,
+          headers,
+          status: context.statusCode
+        });
+      }
     });
-    if (isResponse(result)) {
-      return {
+    invariant3(isResponse(result), " Expected a Response from query()");
+    if (isRedirectResponse(result)) {
+      return generateSingleFetchResponse(request, build, serverMode, {
         result: getSingleFetchRedirect(
           result.status,
           result.headers,
@@ -8758,47 +9028,16 @@ async function singleFetchAction(build, serverMode, staticHandler, request, hand
         ),
         headers: result.headers,
         status: SINGLE_FETCH_REDIRECT_STATUS
-      };
-    }
-    let context = result;
-    let headers = getDocumentHeaders(build, context);
-    if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
-      return {
-        result: getSingleFetchRedirect(
-          context.statusCode,
-          headers,
-          build.basename
-        ),
-        headers,
-        status: SINGLE_FETCH_REDIRECT_STATUS
-      };
-    }
-    if (context.errors) {
-      Object.values(context.errors).forEach((err) => {
-        if (!isRouteErrorResponse(err) || err.error) {
-          handleError(err);
-        }
       });
-      context.errors = sanitizeErrors(context.errors, serverMode);
     }
-    let singleFetchResult;
-    if (context.errors) {
-      singleFetchResult = { error: Object.values(context.errors)[0] };
-    } else {
-      singleFetchResult = { data: Object.values(context.actionData || {})[0] };
-    }
-    return {
-      result: singleFetchResult,
-      headers,
-      status: context.statusCode
-    };
+    return result;
   } catch (error) {
     handleError(error);
-    return {
+    return generateSingleFetchResponse(request, build, serverMode, {
       result: { error },
       headers: new Headers(),
       status: 500
-    };
+    });
   }
 }
 async function singleFetchLoaders(build, serverMode, staticHandler, request, handlerUrl, loadContext, handleError) {
@@ -8811,12 +9050,51 @@ async function singleFetchLoaders(build, serverMode, staticHandler, request, han
     let result = await staticHandler.query(handlerRequest, {
       requestContext: loadContext,
       skipLoaderErrorBubbling: true,
-      dataStrategy: getSingleFetchDataStrategy2({
-        loadRouteIds
-      })
+      async respond(context) {
+        let headers = getDocumentHeaders(build, context);
+        if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
+          return generateSingleFetchResponse(request, build, serverMode, {
+            result: {
+              [SingleFetchRedirectSymbol]: getSingleFetchRedirect(
+                context.statusCode,
+                headers,
+                build.basename
+              )
+            },
+            headers,
+            status: SINGLE_FETCH_REDIRECT_STATUS
+          });
+        }
+        if (context.errors) {
+          Object.values(context.errors).forEach((err) => {
+            if (!isRouteErrorResponse(err) || err.error) {
+              handleError(err);
+            }
+          });
+          context.errors = sanitizeErrors(context.errors, serverMode);
+        }
+        let results = {};
+        let loadedMatches = loadRouteIds ? context.matches.filter(
+          (m) => m.route.loader && loadRouteIds.includes(m.route.id)
+        ) : context.matches;
+        loadedMatches.forEach((m) => {
+          let { id } = m.route;
+          if (context.errors && context.errors.hasOwnProperty(id)) {
+            results[id] = { error: context.errors[id] };
+          } else if (context.loaderData.hasOwnProperty(id)) {
+            results[id] = { data: context.loaderData[id] };
+          }
+        });
+        return generateSingleFetchResponse(request, build, serverMode, {
+          result: results,
+          headers,
+          status: context.statusCode
+        });
+      }
     });
-    if (isResponse(result)) {
-      return {
+    invariant3(isResponse(result), " Expected a Response from query()");
+    if (isRedirectResponse(result)) {
+      return generateSingleFetchResponse(request, build, serverMode, {
         result: {
           [SingleFetchRedirectSymbol]: getSingleFetchRedirect(
             result.status,
@@ -8826,56 +9104,41 @@ async function singleFetchLoaders(build, serverMode, staticHandler, request, han
         },
         headers: result.headers,
         status: SINGLE_FETCH_REDIRECT_STATUS
-      };
-    }
-    let context = result;
-    let headers = getDocumentHeaders(build, context);
-    if (isRedirectStatusCode(context.statusCode) && headers.has("Location")) {
-      return {
-        result: {
-          [SingleFetchRedirectSymbol]: getSingleFetchRedirect(
-            context.statusCode,
-            headers,
-            build.basename
-          )
-        },
-        headers,
-        status: SINGLE_FETCH_REDIRECT_STATUS
-      };
-    }
-    if (context.errors) {
-      Object.values(context.errors).forEach((err) => {
-        if (!isRouteErrorResponse(err) || err.error) {
-          handleError(err);
-        }
       });
-      context.errors = sanitizeErrors(context.errors, serverMode);
     }
-    let results = {};
-    let loadedMatches = loadRouteIds ? context.matches.filter(
-      (m) => m.route.loader && loadRouteIds.includes(m.route.id)
-    ) : context.matches;
-    loadedMatches.forEach((m) => {
-      let { id } = m.route;
-      if (context.errors && context.errors.hasOwnProperty(id)) {
-        results[id] = { error: context.errors[id] };
-      } else if (context.loaderData.hasOwnProperty(id)) {
-        results[id] = { data: context.loaderData[id] };
-      }
-    });
-    return {
-      result: results,
-      headers,
-      status: context.statusCode
-    };
+    return result;
   } catch (error) {
     handleError(error);
-    return {
+    return generateSingleFetchResponse(request, build, serverMode, {
       result: { root: { error } },
       headers: new Headers(),
       status: 500
-    };
+    });
+  }
+}
+function generateSingleFetchResponse(request, build, serverMode, {
+  result,
+  headers,
+  status
+}) {
+  let resultHeaders = new Headers(headers);
+  resultHeaders.set("X-Remix-Response", "yes");
+  if (status === 304) {
+    return new Response(null, { status: 304, headers: resultHeaders });
   }
+  resultHeaders.set("Content-Type", "text/x-script");
+  return new Response(
+    encodeViaTurboStream(
+      result,
+      request.signal,
+      build.entry.module.streamTimeout,
+      serverMode
+    ),
+    {
+      status: status || 200,
+      headers: resultHeaders
+    }
+  );
 }
 function getSingleFetchRedirect(status, headers, basename) {
   let redirect2 = headers.get("Location");
@@ -9117,7 +9380,7 @@ async function handleManifestRequest(build, routes, url) {
   return new Response("Invalid Request", { status: 400 });
 }
 async function handleSingleFetchRequest(serverMode, build, staticHandler, request, handlerUrl, loadContext, handleError) {
-  let { result, headers, status } = request.method !== "GET" ? await singleFetchAction(
+  let response = request.method !== "GET" ? await singleFetchAction(
     build,
     serverMode,
     staticHandler,
@@ -9134,129 +9397,67 @@ async function handleSingleFetchRequest(serverMode, build, staticHandler, reques
     loadContext,
     handleError
   );
-  let resultHeaders = new Headers(headers);
-  resultHeaders.set("X-Remix-Response", "yes");
-  if (status === 304) {
-    return new Response(null, { status: 304, headers: resultHeaders });
-  }
-  resultHeaders.set("Content-Type", "text/x-script");
-  return new Response(
-    encodeViaTurboStream(
-      result,
-      request.signal,
-      build.entry.module.streamTimeout,
-      serverMode
-    ),
-    {
-      status: status || 200,
-      headers: resultHeaders
-    }
-  );
+  return response;
 }
 async function handleDocumentRequest(serverMode, build, staticHandler, request, loadContext, handleError, criticalCss) {
-  let context;
   try {
-    context = await staticHandler.query(request, {
-      requestContext: loadContext
+    let response = await staticHandler.query(request, {
+      requestContext: loadContext,
+      respond: renderHtml
     });
+    invariant3(
+      isResponse(response),
+      "Expected a Response to be returned from query"
+    );
+    return response;
   } catch (error) {
     handleError(error);
     return new Response(null, { status: 500 });
   }
-  if (isResponse(context)) {
-    return context;
-  }
-  let headers = getDocumentHeaders(build, context);
-  if (context.statusCode === 304) {
-    return new Response(null, { status: 304, headers });
-  }
-  if (context.errors) {
-    Object.values(context.errors).forEach((err) => {
-      if (!isRouteErrorResponse(err) || err.error) {
-        handleError(err);
-      }
-    });
-    context.errors = sanitizeErrors(context.errors, serverMode);
-  }
-  let state = {
-    loaderData: context.loaderData,
-    actionData: context.actionData,
-    errors: serializeErrors2(context.errors, serverMode)
-  };
-  let entryContext = {
-    manifest: build.assets,
-    routeModules: createEntryRouteModules(build.routes),
-    staticHandlerContext: context,
-    criticalCss,
-    serverHandoffString: createServerHandoffString({
-      basename: build.basename,
-      criticalCss,
-      future: build.future,
-      isSpaMode: build.isSpaMode
-    }),
-    serverHandoffStream: encodeViaTurboStream(
-      state,
-      request.signal,
-      build.entry.module.streamTimeout,
-      serverMode
-    ),
-    renderMeta: {},
-    future: build.future,
-    isSpaMode: build.isSpaMode,
-    serializeError: (err) => serializeError(err, serverMode)
-  };
-  let handleDocumentRequestFunction = build.entry.module.default;
-  try {
-    return await handleDocumentRequestFunction(
-      request,
-      context.statusCode,
-      headers,
-      entryContext,
-      loadContext
-    );
-  } catch (error) {
-    handleError(error);
-    let errorForSecondRender = error;
-    if (isResponse(error)) {
-      try {
-        let data2 = await unwrapResponse(error);
-        errorForSecondRender = new ErrorResponseImpl(
-          error.status,
-          error.statusText,
-          data2
-        );
-      } catch (e) {
-      }
+  async function renderHtml(context) {
+    if (isResponse(context)) {
+      return context;
+    }
+    let headers = getDocumentHeaders(build, context);
+    if (context.statusCode === 304) {
+      return new Response(null, { status: 304, headers });
     }
-    context = getStaticContextFromError(
-      staticHandler.dataRoutes,
-      context,
-      errorForSecondRender
-    );
     if (context.errors) {
+      Object.values(context.errors).forEach((err) => {
+        if (!isRouteErrorResponse(err) || err.error) {
+          handleError(err);
+        }
+      });
       context.errors = sanitizeErrors(context.errors, serverMode);
     }
-    let state2 = {
+    let state = {
       loaderData: context.loaderData,
       actionData: context.actionData,
       errors: serializeErrors2(context.errors, serverMode)
     };
-    entryContext = {
-      ...entryContext,
+    let entryContext = {
+      manifest: build.assets,
+      routeModules: createEntryRouteModules(build.routes),
       staticHandlerContext: context,
+      criticalCss,
       serverHandoffString: createServerHandoffString({
         basename: build.basename,
+        criticalCss,
         future: build.future,
         isSpaMode: build.isSpaMode
       }),
       serverHandoffStream: encodeViaTurboStream(
-        state2,
+        state,
         request.signal,
         build.entry.module.streamTimeout,
         serverMode
       ),
-      renderMeta: {}
+      renderMeta: {},
+      future: build.future,
+      isSpaMode: build.isSpaMode,
+      serializeError: (err) => serializeError(err, serverMode)
     };
+    let handleDocumentRequestFunction = build.entry.module.default;
     try {
       return await handleDocumentRequestFunction(
         request,
@@ -9265,9 +9466,61 @@ async function handleDocumentRequest(serverMode, build, staticHandler, request,
         entryContext,
         loadContext
       );
-    } catch (error2) {
-      handleError(error2);
-      return returnLastResortErrorResponse(error2, serverMode);
+    } catch (error) {
+      handleError(error);
+      let errorForSecondRender = error;
+      if (isResponse(error)) {
+        try {
+          let data2 = await unwrapResponse(error);
+          errorForSecondRender = new ErrorResponseImpl(
+            error.status,
+            error.statusText,
+            data2
+          );
+        } catch (e) {
+        }
+      }
+      context = getStaticContextFromError(
+        staticHandler.dataRoutes,
+        context,
+        errorForSecondRender
+      );
+      if (context.errors) {
+        context.errors = sanitizeErrors(context.errors, serverMode);
+      }
+      let state2 = {
+        loaderData: context.loaderData,
+        actionData: context.actionData,
+        errors: serializeErrors2(context.errors, serverMode)
+      };
+      entryContext = {
+        ...entryContext,
+        staticHandlerContext: context,
+        serverHandoffString: createServerHandoffString({
+          basename: build.basename,
+          future: build.future,
+          isSpaMode: build.isSpaMode
+        }),
+        serverHandoffStream: encodeViaTurboStream(
+          state2,
+          request.signal,
+          build.entry.module.streamTimeout,
+          serverMode
+        ),
+        renderMeta: {}
+      };
+      try {
+        return await handleDocumentRequestFunction(
+          request,
+          context.statusCode,
+          headers,
+          entryContext,
+          loadContext
+        );
+      } catch (error2) {
+        handleError(error2);
+        return returnLastResortErrorResponse(error2, serverMode);
+      }
     }
   }
 }