react-router 0.0.0-experimental-beaa4f52a → 0.0.0-experimental-df0f1dfda

package/dist/development/dom-export.js

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-beaa4f52a
+ * react-router v0.0.0-experimental-df0f1dfda
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -764,7 +764,6 @@ 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 = {
@@ -777,6 +776,7 @@ function createRouter(init) {
   let getScrollPosition = null;
   let initialScrollRestored = init.hydrationData != null;
   let initialMatches = matchRoutes(dataRoutes, init.history.location, basename);
+  let initialMatchesIsFOW = false;
   let initialErrors = null;
   if (initialMatches == null && !patchRoutesOnNavigationImpl) {
     let error = getInternalRouterError(404, {
@@ -806,6 +806,7 @@ function createRouter(init) {
       init.history.location.pathname
     );
     if (fogOfWar.active && fogOfWar.matches) {
+      initialMatchesIsFOW = true;
       initialMatches = fogOfWar.matches;
     }
   } else if (initialMatches.some((m) => m.route.lazy)) {
@@ -1171,7 +1172,10 @@ function createRouter(init) {
     pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
     let routesToUse = inFlightDataRoutes || dataRoutes;
     let loadingNavigation = opts && opts.overrideNavigation;
-    let matches = matchRoutes(routesToUse, location, basename);
+    let matches = opts?.initialHydration && state.matches && state.matches.length > 0 && !initialMatchesIsFOW ? (
+      // `matchRoutes()` has already been called if we're in here via `router.initialize()`
+      state.matches
+    ) : matchRoutes(routesToUse, location, basename);
     let flushSync2 = (opts && opts.flushSync) === true;
     let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
     if (fogOfWar.active && fogOfWar.matches) {
@@ -1205,7 +1209,6 @@ function createRouter(init) {
       pendingNavigationController.signal,
       opts && opts.submission
     );
-    let scopedContext = { ...routerContext };
     let pendingActionResult;
     if (opts && opts.pendingError) {
       pendingActionResult = [
@@ -1218,7 +1221,6 @@ function createRouter(init) {
         location,
         opts.submission,
         matches,
-        scopedContext,
         fogOfWar.active,
         { replace: opts.replace, flushSync: flushSync2 }
       );
@@ -1259,7 +1261,6 @@ function createRouter(init) {
       request,
       location,
       matches,
-      scopedContext,
       fogOfWar.active,
       loadingNavigation,
       opts && opts.submission,
@@ -1280,7 +1281,7 @@ function createRouter(init) {
       errors
     });
   }
-  async function handleAction(request, location, submission, matches, scopedContext, isFogOfWar, opts = {}) {
+  async function handleAction(request, location, submission, matches, isFogOfWar, opts = {}) {
     interruptActiveLoads();
     let navigation = getSubmittingNavigation(location, submission);
     updateState({ navigation }, { flushSync: opts.flushSync === true });
@@ -1334,23 +1335,15 @@ function createRouter(init) {
         })
       };
     } else {
-      let results = await callRouterDataStrategy(
+      let results = await callDataStrategy(
         "action",
+        state,
         request,
         [actionMatch],
         matches,
-        scopedContext,
         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 };
       }
@@ -1388,7 +1381,7 @@ function createRouter(init) {
       pendingActionResult: [actionMatch.route.id, result]
     };
   }
-  async function handleLoaders(request, location, matches, scopedContext, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace2, initialHydration, flushSync2, pendingActionResult) {
+  async function handleLoaders(request, location, matches, isFogOfWar, overrideNavigation, submission, fetcherSubmission, replace2, initialHydration, flushSync2, pendingActionResult) {
     let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
     let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
     let shouldUpdateNavigationState = !isUninterruptedRevalidation && !initialHydration;
@@ -1498,11 +1491,11 @@ function createRouter(init) {
       );
     }
     let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(
+      state,
       matches,
       matchesToLoad,
       revalidatingFetchers,
-      request,
-      scopedContext
+      request
     );
     if (request.signal.aborted) {
       return { shortCircuited: true };
@@ -1610,7 +1603,6 @@ function createRouter(init) {
       return;
     }
     let match = getTargetMatch(matches, path);
-    let scopedContext = { ...routerContext };
     let preventScrollReset = (opts && opts.preventScrollReset) === true;
     if (submission && isMutationMethod(submission.formMethod)) {
       await handleFetcherAction(
@@ -1619,7 +1611,6 @@ function createRouter(init) {
         path,
         match,
         matches,
-        scopedContext,
         fogOfWar.active,
         flushSync2,
         preventScrollReset,
@@ -1634,14 +1625,13 @@ function createRouter(init) {
       path,
       match,
       matches,
-      scopedContext,
       fogOfWar.active,
       flushSync2,
       preventScrollReset,
       submission
     );
   }
-  async function handleFetcherAction(key, routeId, path, match, requestMatches, scopedContext, isFogOfWar, flushSync2, preventScrollReset, submission) {
+  async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync2, preventScrollReset, submission) {
     interruptActiveLoads();
     fetchLoadMatches.delete(key);
     function detectAndHandle405Error(m) {
@@ -1699,12 +1689,12 @@ function createRouter(init) {
     }
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
-    let actionResults = await callRouterDataStrategy(
+    let actionResults = await callDataStrategy(
       "action",
+      state,
       fetchRequest,
       [match],
       requestMatches,
-      scopedContext,
       key
     );
     let actionResult = actionResults[match.route.id];
@@ -1788,11 +1778,11 @@ function createRouter(init) {
       abortPendingFetchRevalidations
     );
     let { loaderResults, fetcherResults } = await callLoadersAndMaybeResolveData(
+      state,
       matches,
       matchesToLoad,
       revalidatingFetchers,
-      revalidationRequest,
-      scopedContext
+      revalidationRequest
     );
     if (abortController.signal.aborted) {
       return;
@@ -1859,7 +1849,7 @@ function createRouter(init) {
       isRevalidationRequired = false;
     }
   }
-  async function handleFetcherLoader(key, routeId, path, match, matches, scopedContext, isFogOfWar, flushSync2, preventScrollReset, submission) {
+  async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync2, preventScrollReset, submission) {
     let existingFetcher = state.fetchers.get(key);
     updateFetcherState(
       key,
@@ -1901,12 +1891,12 @@ function createRouter(init) {
     }
     fetchControllers.set(key, abortController);
     let originatingLoadId = incrementingLoadId;
-    let results = await callRouterDataStrategy(
+    let results = await callDataStrategy(
       "loader",
+      state,
       fetchRequest,
       [match],
       matches,
-      scopedContext,
       key
     );
     let result = results[match.route.id];
@@ -2008,20 +1998,20 @@ function createRouter(init) {
       });
     }
   }
-  async function callRouterDataStrategy(type, request, matchesToLoad, matches, scopedContext, fetcherKey) {
+  async function callDataStrategy(type, state2, request, matchesToLoad, matches, fetcherKey) {
     let results;
     let dataResults = {};
     try {
       results = await callDataStrategyImpl(
         dataStrategyImpl,
         type,
+        state2,
         request,
         matchesToLoad,
         matches,
         fetcherKey,
         manifest,
-        mapRouteProperties2,
-        scopedContext
+        mapRouteProperties2
       );
     } catch (e) {
       matchesToLoad.forEach((m) => {
@@ -2053,24 +2043,24 @@ function createRouter(init) {
     }
     return dataResults;
   }
-  async function callLoadersAndMaybeResolveData(matches, matchesToLoad, fetchersToLoad, request, scopedContext) {
-    let loaderResultsPromise = callRouterDataStrategy(
+  async function callLoadersAndMaybeResolveData(state2, matches, matchesToLoad, fetchersToLoad, request) {
+    let loaderResultsPromise = callDataStrategy(
       "loader",
+      state2,
       request,
       matchesToLoad,
       matches,
-      scopedContext,
       null
     );
     let fetcherResultsPromise = Promise.all(
       fetchersToLoad.map(async (f) => {
         if (f.matches && f.match && f.controller) {
-          let results = await callRouterDataStrategy(
+          let results = await callDataStrategy(
             "loader",
+            state2,
             createClientSideRequest(init.history, f.path, f.controller.signal),
             [f.match],
             f.matches,
-            scopedContext,
             f.key
           );
           let result = results[f.match.route.id];
@@ -2812,132 +2802,20 @@ async function loadLazyRouteModule(route, mapRouteProperties2, manifest) {
     lazy: void 0
   });
 }
-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;
-      });
-    },
-    (e, keyedResults) => {
-      Object.assign(keyedResults, {
-        [e.routeId]: { type: "error", result: e.error }
-      });
-    }
-  );
-  return results;
-}
-async function runMiddlewarePipeline({
-  request,
-  params,
-  context,
+async function defaultDataStrategy({
   matches
-}, lastIndex, propagateResult, handler, errorHandler) {
-  let middlewareState = {
-    keyedResults: {},
-    propagateResult
-  };
-  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 },
-      middlewareState,
-      handler
-    );
-    return middlewareState.propagateResult ? result : middlewareState.keyedResults;
-  } catch (e) {
-    if (!(e instanceof MiddlewareError)) {
-      throw e;
-    }
-    if (propagateResult && isResponse(e.error)) {
-      throw e.error;
-    }
-    let result = await errorHandler(e, middlewareState.keyedResults);
-    return middlewareState.propagateResult ? result : middlewareState.keyedResults;
-  }
-}
-var MiddlewareError = class {
-  constructor(routeId, error) {
-    this.routeId = routeId;
-    this.error = error;
-  }
-};
-async function callRouteMiddleware(middlewares, idx, args, middlewareState, 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(middlewareState.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,
-      middlewareState,
-      handler
-    );
-    if (middlewareState.propagateResult) {
-      return result;
-    }
-  };
-  try {
-    let result = await middleware({
-      request: args.request,
-      params: args.params,
-      context: args.context,
-      next
-    });
-    return nextCalled ? result : next();
-  } catch (e) {
-    if (e instanceof MiddlewareError) {
-      throw e;
-    }
-    throw new MiddlewareError(routeId, e);
-  }
+}) {
+  let matchesToLoad = matches.filter((m) => m.shouldLoad);
+  let results = await Promise.all(matchesToLoad.map((m) => m.resolve()));
+  return results.reduce(
+    (acc, result, i) => Object.assign(acc, { [matchesToLoad[i].route.id]: result }),
+    {}
+  );
 }
-async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, scopedContext) {
+async function callDataStrategyImpl(dataStrategyImpl, type, state, request, matchesToLoad, matches, fetcherKey, manifest, mapRouteProperties2, requestContext) {
   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);
@@ -2951,7 +2829,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
         match,
         loadRoutePromise,
         handlerOverride,
-        scopedContext
+        requestContext
       ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
@@ -2965,7 +2843,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
     request,
     params: matches[0].params,
     fetcherKey,
-    context: scopedContext
+    context: requestContext
   });
   try {
     await Promise.all(loadRouteDefinitionsPromises);
@@ -2973,7 +2851,7 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
   }
   return results;
 }
-async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, scopedContext) {
+async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, staticContext) {
   let result;
   let onReject;
   let runHandler = (handler) => {
@@ -2993,7 +2871,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
         {
           request,
           params: match.params,
-          context: scopedContext
+          context: staticContext
         },
         ...ctx !== void 0 ? [ctx] : []
       );
@@ -3100,14 +2978,20 @@ async function convertDataStrategyResultToDataResult(dataStrategyResult) {
         return {
           type: "error" /* error */,
           error: result.data,
-          statusCode: result.init?.status
+          statusCode: result.init?.status,
+          headers: result.init?.headers ? new Headers(result.init.headers) : void 0
         };
       }
-      result = new ErrorResponseImpl(
-        result.init?.status || 500,
-        void 0,
-        result.data
-      );
+      return {
+        type: "error" /* error */,
+        error: new ErrorResponseImpl(
+          result.init?.status || 500,
+          void 0,
+          result.data
+        ),
+        statusCode: isRouteErrorResponse(result) ? result.status : void 0,
+        headers: result.init?.headers ? new Headers(result.init.headers) : void 0
+      };
     }
     return {
       type: "error" /* error */,
@@ -3712,7 +3596,7 @@ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPa
     let segments = pathname.replace(/^\//, "").split("/");
     remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
   }
-  let matches = matchRoutes(routes, { pathname: remainingPathname });
+  let matches = dataRouterState && dataRouterState.matches && dataRouterState.matches.length > 0 ? dataRouterState.matches : matchRoutes(routes, { pathname: remainingPathname });
   if (ENABLE_DEV_WARNINGS) {
     warning(
       parentRoute || matches != null,
@@ -4389,6 +4273,31 @@ async function prefetchStyleLink(descriptor) {
 function isPageLinkDescriptor(object) {
   return object != null && typeof object.page === "string";
 }
+function getModuleLinkHrefs(matches, manifest, { includeHydrateFallback } = {}) {
+  return dedupeHrefs(
+    matches.map((match) => {
+      let route = manifest.routes[match.route.id];
+      if (!route) return [];
+      let hrefs = [route.module];
+      if (route.clientActionModule) {
+        hrefs = hrefs.concat(route.clientActionModule);
+      }
+      if (route.clientLoaderModule) {
+        hrefs = hrefs.concat(route.clientLoaderModule);
+      }
+      if (includeHydrateFallback && route.hydrateFallbackModule) {
+        hrefs = hrefs.concat(route.hydrateFallbackModule);
+      }
+      if (route.imports) {
+        hrefs = hrefs.concat(route.imports);
+      }
+      return hrefs;
+    }).flat(1)
+  );
+}
+function dedupeHrefs(hrefs) {
+  return [...new Set(hrefs)];
+}
 var _isPreloadSupported;
 function isPreloadSupported() {
   if (_isPreloadSupported !== void 0) {
@@ -4432,63 +4341,21 @@ async function createRequestInit(request) {
 
 // lib/dom/ssr/single-fetch.tsx
 var SingleFetchRedirectSymbol = Symbol("SingleFetchRedirect");
-function middlewareErrorHandler(e, keyedResults) {
-  Object.assign(keyedResults, {
-    [e.routeId]: { type: "error", result: e.error }
-  });
-}
 function getSingleFetchDataStrategy(manifest, routeModules, getRouter) {
-  return async (args) => {
-    let { request, matches, fetcherKey } = args;
+  return async ({ request, matches, fetcherKey }) => {
     if (request.method !== "GET") {
-      return runMiddlewarePipeline(
-        args,
-        matches.findIndex((m) => m.shouldLoad),
-        false,
-        async (keyedResults) => {
-          let results = await singleFetchActionStrategy(request, matches);
-          Object.assign(keyedResults, results);
-        },
-        middlewareErrorHandler
-      );
+      return singleFetchActionStrategy(request, matches);
     }
     if (fetcherKey) {
-      return runMiddlewarePipeline(
-        args,
-        matches.findIndex((m) => m.shouldLoad),
-        false,
-        async (keyedResults) => {
-          let results = await singleFetchLoaderFetcherStrategy(
-            request,
-            matches
-          );
-          Object.assign(keyedResults, results);
-        },
-        middlewareErrorHandler
-      );
+      return singleFetchLoaderFetcherStrategy(request, matches);
     }
-    let lowestLoadingIndex = getLowestLoadingIndex(
+    return singleFetchLoaderNavigationStrategy(
       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);
-      },
-      middlewareErrorHandler
-    );
   };
 }
 async function singleFetchActionStrategy(request, matches) {
@@ -4518,20 +4385,6 @@ async function singleFetchActionStrategy(request, matches) {
     }
   };
 }
-function isOptedOut(manifestRoute, routeModule, match, router2) {
-  return match.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModule && routeModule.shouldRevalidate;
-}
-function getLowestLoadingIndex(manifest, routeModules, router2, matches) {
-  let tailIdx = [...matches].reverse().findIndex(
-    (m) => m.shouldLoad || !isOptedOut(
-      manifest.routes[m.route.id],
-      routeModules[m.route.id],
-      m,
-      router2
-    )
-  );
-  return tailIdx < 0 ? 0 : matches.length - 1 - tailIdx;
-}
 async function singleFetchLoaderNavigationStrategy(manifest, routeModules, router2, request, matches) {
   let routesParams = /* @__PURE__ */ new Set();
   let foundOptOutRoute = false;
@@ -4550,7 +4403,7 @@ async function singleFetchLoaderNavigationStrategy(manifest, routeModules, route
           if (!router2.state.initialized) {
             return;
           }
-          if (isOptedOut(manifestRoute, routeModules[m.route.id], m, router2)) {
+          if (m.route.id in router2.state.loaderData && manifestRoute && manifestRoute.hasLoader && routeModules[m.route.id]?.shouldRevalidate) {
             foundOptOutRoute = true;
             return;
           }
@@ -4977,6 +4830,21 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       }
       return fetchServerHandler(singleFetch);
     }
+    function prefetchModule(modulePath) {
+      import(
+        /* @vite-ignore */
+        /* webpackIgnore: true */
+        modulePath
+      );
+    }
+    function prefetchRouteModuleChunks(route2) {
+      if (route2.clientActionModule) {
+        prefetchModule(route2.clientActionModule);
+      }
+      if (route2.clientLoaderModule) {
+        prefetchModule(route2.clientLoaderModule);
+      }
+    }
     async function prefetchStylesAndCallHandler(handler) {
       let cachedModule = routeModulesCache[route.id];
       let linkPrefetchPromise = cachedModule ? prefetchStyleLinks(route, cachedModule) : Promise.resolve();
@@ -4995,7 +4863,6 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       Object.assign(dataRoute, {
         ...dataRoute,
         ...getRouteComponents(route, routeModule, isSpaMode),
-        middleware: routeModule.clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
           routeModule,
@@ -5008,7 +4875,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, context }, singleFetch) => {
+      dataRoute.loader = async ({ request, params }, singleFetch) => {
         try {
           let result = await prefetchStylesAndCallHandler(async () => {
             invariant2(
@@ -5022,7 +4889,6 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
             return routeModule.clientLoader({
               request,
               params,
-              context,
               async serverLoader() {
                 preventInvalidServerHandlerCall("loader", route, isSpaMode);
                 if (isHydrationRequest) {
@@ -5047,7 +4913,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
         routeModule,
         isSpaMode
       );
-      dataRoute.action = ({ request, params, context }, singleFetch) => {
+      dataRoute.action = ({ request, params }, singleFetch) => {
         return prefetchStylesAndCallHandler(async () => {
           invariant2(
             routeModule,
@@ -5062,7 +4928,6 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
           return routeModule.clientAction({
             request,
             params,
-            context,
             async serverAction() {
               preventInvalidServerHandlerCall("action", route, isSpaMode);
               return fetchServerAction(singleFetch);
@@ -5072,26 +4937,64 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
       };
     } else {
       if (!route.hasClientLoader) {
-        dataRoute.loader = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.loader = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
           if (isSpaMode) return Promise.resolve(null);
           return fetchServerLoader(singleFetch);
         });
+      } else if (route.clientLoaderModule) {
+        dataRoute.loader = async (args, singleFetch) => {
+          invariant2(route.clientLoaderModule);
+          let { clientLoader } = await import(
+            /* @vite-ignore */
+            /* webpackIgnore: true */
+            route.clientLoaderModule
+          );
+          return clientLoader({
+            ...args,
+            async serverLoader() {
+              preventInvalidServerHandlerCall("loader", route, isSpaMode);
+              return fetchServerLoader(singleFetch);
+            }
+          });
+        };
       }
       if (!route.hasClientAction) {
-        dataRoute.action = (_, singleFetch) => prefetchStylesAndCallHandler(() => {
+        dataRoute.action = ({ request }, singleFetch) => prefetchStylesAndCallHandler(() => {
           if (isSpaMode) {
             throw noActionDefinedError("clientAction", route.id);
           }
           return fetchServerAction(singleFetch);
         });
+      } else if (route.clientActionModule) {
+        dataRoute.action = async (args, singleFetch) => {
+          invariant2(route.clientActionModule);
+          prefetchRouteModuleChunks(route);
+          let { clientAction } = await import(
+            /* @vite-ignore */
+            /* webpackIgnore: true */
+            route.clientActionModule
+          );
+          return clientAction({
+            ...args,
+            async serverAction() {
+              preventInvalidServerHandlerCall("action", route, isSpaMode);
+              return fetchServerAction(singleFetch);
+            }
+          });
+        };
       }
       dataRoute.lazy = async () => {
-        let mod = await loadRouteModuleWithBlockingLinks(
+        if (route.clientLoaderModule || route.clientActionModule) {
+          await new Promise((resolve) => setTimeout(resolve, 0));
+        }
+        let modPromise = loadRouteModuleWithBlockingLinks(
           route,
           routeModulesCache
         );
+        prefetchRouteModuleChunks(route);
+        let mod = await modPromise;
         let lazyRoute = { ...mod };
-        if (mod.clientLoader) {
+        if (mod.clientLoader && !route.clientLoaderModule) {
           let clientLoader = mod.clientLoader;
           lazyRoute.loader = (args, singleFetch) => clientLoader({
             ...args,
@@ -5101,7 +5004,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, isSpaMode
             }
           });
         }
-        if (mod.clientAction) {
+        if (mod.clientAction && !route.clientActionModule) {
           let clientAction = mod.clientAction;
           lazyRoute.action = (args, singleFetch) => clientAction({
             ...args,
@@ -5114,7 +5017,6 @@ 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,
@@ -5172,7 +5074,6 @@ async function loadRouteModuleWithBlockingLinks(route, routeModules) {
   return {
     Component: getRouteModuleComponent(routeModule),
     ErrorBoundary: routeModule.ErrorBoundary,
-    clientMiddleware: routeModule.clientMiddleware,
     clientAction: routeModule.clientAction,
     clientLoader: routeModule.clientLoader,
     handle: routeModule.handle,
@@ -5404,11 +5305,44 @@ function Scripts(props) {
     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)}` : ""};
-${matches.map(
-      (match, index) => `import * as route${index} from ${JSON.stringify(
-        manifest.routes[match.route.id].module
-      )};`
-    ).join("\n")}
+${matches.map((match, routeIndex) => {
+      let routeVarName = `route${routeIndex}`;
+      let manifestEntry = manifest.routes[match.route.id];
+      invariant2(manifestEntry, `Route ${match.route.id} not found in manifest`);
+      let {
+        clientActionModule,
+        clientLoaderModule,
+        hydrateFallbackModule,
+        module: module2
+      } = manifestEntry;
+      let chunks = [
+        ...clientActionModule ? [
+          {
+            module: clientActionModule,
+            varName: `${routeVarName}_clientAction`
+          }
+        ] : [],
+        ...clientLoaderModule ? [
+          {
+            module: clientLoaderModule,
+            varName: `${routeVarName}_clientLoader`
+          }
+        ] : [],
+        ...hydrateFallbackModule ? [
+          {
+            module: hydrateFallbackModule,
+            varName: `${routeVarName}_HydrateFallback`
+          }
+        ] : [],
+        { module: module2, varName: `${routeVarName}_main` }
+      ];
+      if (chunks.length === 1) {
+        return `import * as ${routeVarName} from ${JSON.stringify(module2)};`;
+      }
+      let chunkImportsSnippet = chunks.map((chunk) => `import * as ${chunk.varName} from "${chunk.module}";`).join("\n");
+      let mergedChunksSnippet = `const ${routeVarName} = {${chunks.map((chunk) => `...${chunk.varName}`).join(",")}};`;
+      return [chunkImportsSnippet, mergedChunksSnippet].join("\n");
+    }).join("\n")}
   ${enableFogOfWar ? (
       // Inline a minimal manifest with the SSR matches
       `window.__reactRouterManifest = ${JSON.stringify(
@@ -5439,11 +5373,11 @@ import(${JSON.stringify(manifest.entry.module)});`;
       }
     ));
   }, []);
-  let routePreloads = matches.map((match) => {
-    let route = manifest.routes[match.route.id];
-    return route ? (route.imports || []).concat([route.module]) : [];
-  }).flat(1);
-  let preloads = isHydrated ? [] : manifest.entry.imports.concat(routePreloads);
+  let preloads = isHydrated ? [] : manifest.entry.imports.concat(
+    getModuleLinkHrefs(matches, manifest, {
+      includeHydrateFallback: true
+    })
+  );
   return isHydrated ? null : /* @__PURE__ */ React9.createElement(React9.Fragment, null, !enableFogOfWar ? /* @__PURE__ */ React9.createElement(
     "link",
     {
@@ -5530,9 +5464,7 @@ function initSsrInfo() {
     };
   }
 }
-function createHydratedRouter({
-  context
-}) {
+function createHydratedRouter() {
   initSsrInfo();
   if (!ssrInfo) {
     throw new Error(
@@ -5598,10 +5530,9 @@ function createHydratedRouter({
     routes,
     history: createBrowserHistory(),
     basename: ssrInfo.context.basename,
-    context,
     hydrationData,
     mapRouteProperties,
-    dataStrategy: ssrInfo.context.isSpaMode ? void 0 : getSingleFetchDataStrategy(
+    dataStrategy: getSingleFetchDataStrategy(
       ssrInfo.manifest,
       ssrInfo.routeModules,
       () => router2
@@ -5623,9 +5554,9 @@ function createHydratedRouter({
   window.__reactRouterDataRouter = router2;
   return router2;
 }
-function HydratedRouter(props) {
+function HydratedRouter() {
   if (!router) {
-    router = createHydratedRouter({ context: props.context });
+    router = createHydratedRouter();
   }
   let [criticalCss, setCriticalCss] = React11.useState(
     process.env.NODE_ENV === "development" ? ssrInfo?.context.criticalCss : void 0