react-router 0.0.0-experimental-54614613e → 0.0.0-experimental-c8b52c995

package/CHANGELOG.md

@@ -1,5 +1,45 @@
 # `react-router`
 
+## 7.5.0
+
+### Minor Changes
+
+- Add granular object-based API for `route.lazy` to support lazy loading of individual route properties, for example: ([#13294](https://github.com/remix-run/react-router/pull/13294))
+
+  ```ts
+  createBrowserRouter([
+    {
+      path: "/show/:showId",
+      lazy: {
+        loader: async () => (await import("./show.loader.js")).loader,
+        action: async () => (await import("./show.action.js")).action,
+        Component: async () => (await import("./show.component.js")).Component,
+      },
+    },
+  ]);
+  ```
+
+  **Breaking change for `route.unstable_lazyMiddleware` consumers**
+
+  The `route.unstable_lazyMiddleware` property is no longer supported. If you want to lazily load middleware, you must use the new object-based `route.lazy` API with `route.lazy.unstable_middleware`, for example:
+
+  ```ts
+  createBrowserRouter([
+    {
+      path: "/show/:showId",
+      lazy: {
+        unstable_middleware: async () =>
+          (await import("./show.middleware.js")).middleware,
+        // etc.
+      },
+    },
+  ]);
+  ```
+
+### Patch Changes
+
+- Introduce `unstable_subResourceIntegrity` future flag that enables generation of an importmap with integrity for the scripts that will be loaded by the browser. ([#13163](https://github.com/remix-run/react-router/pull/13163))
+
 ## 7.4.1
 
 ### Patch Changes

package/dist/development/{chunk-VTWKMGAY.mjs → chunk-4K5PIBZY.mjs}

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-54614613e
+ * react-router v0.0.0-experimental-c8b52c995
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -3610,19 +3610,29 @@ var loadLazyRouteProperty = ({
   return propertyPromise;
 };
 var lazyRouteFunctionCache = /* @__PURE__ */ new WeakMap();
-async function loadLazyRoute(route, manifest, mapRouteProperties2) {
+function loadLazyRoute(route, type, manifest, mapRouteProperties2) {
   let routeToUpdate = manifest[route.id];
   invariant(routeToUpdate, "No route found in manifest");
   if (!route.lazy) {
-    return;
+    return {
+      lazyRoutePromise: void 0,
+      lazyHandlerPromise: void 0
+    };
   }
   if (typeof route.lazy === "function") {
     let cachedPromise = lazyRouteFunctionCache.get(routeToUpdate);
     if (cachedPromise) {
-      await cachedPromise;
-      return;
+      return {
+        lazyRoutePromise: cachedPromise,
+        lazyHandlerPromise: cachedPromise
+      };
     }
-    let lazyRoutePromise = route.lazy().then((lazyRoute) => {
+    let lazyRoutePromise2 = (async () => {
+      invariant(
+        typeof route.lazy === "function",
+        "No lazy route function found"
+      );
+      let lazyRoute = await route.lazy();
       let routeUpdates = {};
       for (let lazyRouteProperty in lazyRoute) {
         let lazyValue = lazyRoute[lazyRouteProperty];
@@ -3656,22 +3666,39 @@ async function loadLazyRoute(route, manifest, mapRouteProperties2) {
         ...mapRouteProperties2(routeToUpdate),
         lazy: void 0
       });
-    });
-    lazyRouteFunctionCache.set(routeToUpdate, lazyRoutePromise);
-    await lazyRoutePromise;
-    return;
+    })();
+    lazyRouteFunctionCache.set(routeToUpdate, lazyRoutePromise2);
+    return {
+      lazyRoutePromise: lazyRoutePromise2,
+      lazyHandlerPromise: lazyRoutePromise2
+    };
   }
   let lazyKeys = Object.keys(route.lazy);
-  await Promise.all(
-    lazyKeys.map(
-      (key) => loadLazyRouteProperty({
-        key,
-        route,
-        manifest,
-        mapRouteProperties: mapRouteProperties2
-      })
-    )
-  );
+  let lazyPropertyPromises = [];
+  let lazyHandlerPromise = void 0;
+  for (let key of lazyKeys) {
+    let promise = loadLazyRouteProperty({
+      key,
+      route,
+      manifest,
+      mapRouteProperties: mapRouteProperties2
+    });
+    if (promise) {
+      lazyPropertyPromises.push(promise);
+      if (key === type) {
+        lazyHandlerPromise = promise;
+      }
+    }
+  }
+  let lazyRoutePromise = Promise.all(lazyPropertyPromises).then(() => {
+  });
+  return {
+    lazyRoutePromise,
+    lazyHandlerPromise
+  };
+}
+function isNonNullable(value) {
+  return value !== void 0;
 }
 function loadLazyMiddlewareForMatches(matches, manifest, mapRouteProperties2) {
   let promises = matches.map(({ route }) => {
@@ -3684,7 +3711,7 @@ function loadLazyMiddlewareForMatches(matches, manifest, mapRouteProperties2) {
       manifest,
       mapRouteProperties: mapRouteProperties2
     });
-  }).filter((p) => p != null);
+  }).filter(isNonNullable);
   return promises.length > 0 ? Promise.all(promises) : void 0;
 }
 async function defaultDataStrategy(args) {
@@ -3807,27 +3834,28 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
     manifest,
     mapRouteProperties2
   );
-  let loadLazyRoutePromises = matches.map(
-    (m) => m.route.lazy ? loadLazyRoute(m.route, manifest, mapRouteProperties2) : void 0
+  let lazyRoutePromises = matches.map(
+    (m) => loadLazyRoute(m.route, type, manifest, mapRouteProperties2)
   );
   if (loadMiddlewarePromise) {
     await loadMiddlewarePromise;
   }
   let dsMatches = matches.map((match, i) => {
-    let loadRoutePromise = loadLazyRoutePromises[i];
+    let { lazyRoutePromise, lazyHandlerPromise } = lazyRoutePromises[i];
     let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
     let resolve = async (handlerOverride) => {
       if (handlerOverride && request.method === "GET" && (match.route.lazy || match.route.loader)) {
         shouldLoad = true;
       }
-      return shouldLoad ? callLoaderOrAction(
+      return shouldLoad ? callLoaderOrAction({
         type,
         request,
         match,
-        loadRoutePromise,
+        lazyHandlerPromise,
+        lazyRoutePromise,
         handlerOverride,
         scopedContext
-      ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
+      }) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
       ...match,
@@ -3842,13 +3870,24 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
     fetcherKey,
     context: scopedContext
   });
+  let allLazyRoutePromises = lazyRoutePromises.flatMap(
+    (promiseMap) => Object.values(promiseMap).filter(isNonNullable)
+  );
   try {
-    await Promise.all(loadLazyRoutePromises);
+    await Promise.all(allLazyRoutePromises);
   } catch (e) {
   }
   return results;
 }
-async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, scopedContext) {
+async function callLoaderOrAction({
+  type,
+  request,
+  match,
+  lazyHandlerPromise,
+  lazyRoutePromise,
+  handlerOverride,
+  scopedContext
+}) {
   let result;
   let onReject;
   let runHandler = (handler) => {
@@ -3885,7 +3924,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
   };
   try {
     let handler = match.route[type];
-    if (loadRoutePromise) {
+    if (lazyHandlerPromise || lazyRoutePromise) {
       if (handler) {
         let handlerError;
         let [value] = await Promise.all([
@@ -3895,17 +3934,19 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
           runHandler(handler).catch((e) => {
             handlerError = e;
           }),
-          loadRoutePromise
+          // Ensure all lazy route promises are resolved before continuing
+          lazyHandlerPromise,
+          lazyRoutePromise
         ]);
         if (handlerError !== void 0) {
           throw handlerError;
         }
         result = value;
       } else {
-        await loadRoutePromise;
+        await lazyHandlerPromise;
         handler = match.route[type];
         if (handler) {
-          result = await runHandler(handler);
+          [result] = await Promise.all([runHandler(handler), lazyRoutePromise]);
         } else if (type === "action") {
           let url = new URL(request.url);
           let pathname = url.pathname + url.search;
@@ -6754,6 +6795,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         unstable_middleware: routeModule.unstable_clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
+          dataRoute.path,
           routeModule,
           route,
           ssr,
@@ -6906,6 +6948,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         shouldRevalidate: async () => {
           let lazyRoute = await getLazyRoute();
           return getShouldRevalidateFunction(
+            dataRoute.path,
             lazyRoute,
             route,
             ssr,
@@ -6933,7 +6976,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
     return dataRoute;
   });
 }
-function getShouldRevalidateFunction(route, manifestRoute, ssr, needsRevalidation) {
+function getShouldRevalidateFunction(path, route, manifestRoute, ssr, needsRevalidation) {
   if (needsRevalidation) {
     return wrapShouldRevalidateForHdr(
       manifestRoute.id,
@@ -6942,11 +6985,16 @@ function getShouldRevalidateFunction(route, manifestRoute, ssr, needsRevalidatio
     );
   }
   if (!ssr && manifestRoute.hasLoader && !manifestRoute.hasClientLoader) {
+    let myParams = path ? compilePath(path)[1].map((p) => p.paramName) : [];
+    const didParamsChange = (opts) => myParams.some((p) => opts.currentParams[p] !== opts.nextParams[p]);
     if (route.shouldRevalidate) {
       let fn = route.shouldRevalidate;
-      return (opts) => fn({ ...opts, defaultShouldRevalidate: false });
+      return (opts) => fn({
+        ...opts,
+        defaultShouldRevalidate: didParamsChange(opts)
+      });
     } else {
-      return () => false;
+      return (opts) => didParamsChange(opts);
     }
   }
   if (ssr && route.shouldRevalidate) {
@@ -7675,7 +7723,7 @@ 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-54614613e";
+    window.__reactRouterVersion = "0.0.0-experimental-c8b52c995";
   }
 } catch (e) {
 }
@@ -9697,9 +9745,6 @@ var createRequestHandler = (build, mode) => {
   let errorHandler;
   return async function requestHandler(request, initialContext) {
     _build = typeof build === "function" ? await build() : build;
-    let loadContext = _build.future.unstable_middleware ? new unstable_RouterContextProvider(
-      initialContext
-    ) : initialContext || {};
     if (typeof build === "function") {
       let derived = derive(_build, mode);
       routes = derived.routes;
@@ -9713,18 +9758,8 @@ var createRequestHandler = (build, mode) => {
       staticHandler = derived.staticHandler;
       errorHandler = derived.errorHandler;
     }
-    let url = new URL(request.url);
-    let normalizedBasename = _build.basename || "/";
-    let normalizedPath = url.pathname;
-    if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
-      normalizedPath = normalizedBasename;
-    } else if (normalizedPath.endsWith(".data")) {
-      normalizedPath = normalizedPath.replace(/\.data$/, "");
-    }
-    if (stripBasename(normalizedPath, normalizedBasename) !== "/" && normalizedPath.endsWith("/")) {
-      normalizedPath = normalizedPath.slice(0, -1);
-    }
     let params = {};
+    let loadContext;
     let handleError = (error) => {
       if (mode === "development" /* Development */) {
         getDevServerHooks()?.processRequestError?.(error);
@@ -9735,6 +9770,38 @@ var createRequestHandler = (build, mode) => {
         request
       });
     };
+    if (_build.future.unstable_middleware) {
+      if (initialContext == null) {
+        loadContext = new unstable_RouterContextProvider();
+      } else {
+        try {
+          loadContext = new unstable_RouterContextProvider(
+            initialContext
+          );
+        } catch (e) {
+          let error = new Error(
+            `Unable to create initial \`unstable_RouterContextProvider\` instance. Please confirm you are returning an instance of \`Map<unstable_routerContext, unknown>\` from your \`getLoadContext\` function.
+
+Error: ${e instanceof Error ? e.toString() : e}`
+          );
+          handleError(error);
+          return returnLastResortErrorResponse(error, serverMode);
+        }
+      }
+    } else {
+      loadContext = initialContext || {};
+    }
+    let url = new URL(request.url);
+    let normalizedBasename = _build.basename || "/";
+    let normalizedPath = url.pathname;
+    if (stripBasename(normalizedPath, normalizedBasename) === "/_root.data") {
+      normalizedPath = normalizedBasename;
+    } else if (normalizedPath.endsWith(".data")) {
+      normalizedPath = normalizedPath.replace(/\.data$/, "");
+    }
+    if (stripBasename(normalizedPath, normalizedBasename) !== "/" && normalizedPath.endsWith("/")) {
+      normalizedPath = normalizedPath.slice(0, -1);
+    }
     if (!_build.ssr) {
       if (_build.prerender.length === 0) {
         request.headers.set("X-React-Router-SPA-Mode", "yes");

package/dist/development/dom-export.js

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-54614613e
+ * react-router v0.0.0-experimental-c8b52c995
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -2898,19 +2898,29 @@ var loadLazyRouteProperty = ({
   return propertyPromise;
 };
 var lazyRouteFunctionCache = /* @__PURE__ */ new WeakMap();
-async function loadLazyRoute(route, manifest, mapRouteProperties2) {
+function loadLazyRoute(route, type, manifest, mapRouteProperties2) {
   let routeToUpdate = manifest[route.id];
   invariant(routeToUpdate, "No route found in manifest");
   if (!route.lazy) {
-    return;
+    return {
+      lazyRoutePromise: void 0,
+      lazyHandlerPromise: void 0
+    };
   }
   if (typeof route.lazy === "function") {
     let cachedPromise = lazyRouteFunctionCache.get(routeToUpdate);
     if (cachedPromise) {
-      await cachedPromise;
-      return;
+      return {
+        lazyRoutePromise: cachedPromise,
+        lazyHandlerPromise: cachedPromise
+      };
     }
-    let lazyRoutePromise = route.lazy().then((lazyRoute) => {
+    let lazyRoutePromise2 = (async () => {
+      invariant(
+        typeof route.lazy === "function",
+        "No lazy route function found"
+      );
+      let lazyRoute = await route.lazy();
       let routeUpdates = {};
       for (let lazyRouteProperty in lazyRoute) {
         let lazyValue = lazyRoute[lazyRouteProperty];
@@ -2944,22 +2954,39 @@ async function loadLazyRoute(route, manifest, mapRouteProperties2) {
         ...mapRouteProperties2(routeToUpdate),
         lazy: void 0
       });
-    });
-    lazyRouteFunctionCache.set(routeToUpdate, lazyRoutePromise);
-    await lazyRoutePromise;
-    return;
+    })();
+    lazyRouteFunctionCache.set(routeToUpdate, lazyRoutePromise2);
+    return {
+      lazyRoutePromise: lazyRoutePromise2,
+      lazyHandlerPromise: lazyRoutePromise2
+    };
   }
   let lazyKeys = Object.keys(route.lazy);
-  await Promise.all(
-    lazyKeys.map(
-      (key) => loadLazyRouteProperty({
-        key,
-        route,
-        manifest,
-        mapRouteProperties: mapRouteProperties2
-      })
-    )
-  );
+  let lazyPropertyPromises = [];
+  let lazyHandlerPromise = void 0;
+  for (let key of lazyKeys) {
+    let promise = loadLazyRouteProperty({
+      key,
+      route,
+      manifest,
+      mapRouteProperties: mapRouteProperties2
+    });
+    if (promise) {
+      lazyPropertyPromises.push(promise);
+      if (key === type) {
+        lazyHandlerPromise = promise;
+      }
+    }
+  }
+  let lazyRoutePromise = Promise.all(lazyPropertyPromises).then(() => {
+  });
+  return {
+    lazyRoutePromise,
+    lazyHandlerPromise
+  };
+}
+function isNonNullable(value) {
+  return value !== void 0;
 }
 function loadLazyMiddlewareForMatches(matches, manifest, mapRouteProperties2) {
   let promises = matches.map(({ route }) => {
@@ -2972,7 +2999,7 @@ function loadLazyMiddlewareForMatches(matches, manifest, mapRouteProperties2) {
       manifest,
       mapRouteProperties: mapRouteProperties2
     });
-  }).filter((p) => p != null);
+  }).filter(isNonNullable);
   return promises.length > 0 ? Promise.all(promises) : void 0;
 }
 async function defaultDataStrategy(args) {
@@ -3095,27 +3122,28 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
     manifest,
     mapRouteProperties2
   );
-  let loadLazyRoutePromises = matches.map(
-    (m) => m.route.lazy ? loadLazyRoute(m.route, manifest, mapRouteProperties2) : void 0
+  let lazyRoutePromises = matches.map(
+    (m) => loadLazyRoute(m.route, type, manifest, mapRouteProperties2)
   );
   if (loadMiddlewarePromise) {
     await loadMiddlewarePromise;
   }
   let dsMatches = matches.map((match, i) => {
-    let loadRoutePromise = loadLazyRoutePromises[i];
+    let { lazyRoutePromise, lazyHandlerPromise } = lazyRoutePromises[i];
     let shouldLoad = matchesToLoad.some((m) => m.route.id === match.route.id);
     let resolve = async (handlerOverride) => {
       if (handlerOverride && request.method === "GET" && (match.route.lazy || match.route.loader)) {
         shouldLoad = true;
       }
-      return shouldLoad ? callLoaderOrAction(
+      return shouldLoad ? callLoaderOrAction({
         type,
         request,
         match,
-        loadRoutePromise,
+        lazyHandlerPromise,
+        lazyRoutePromise,
         handlerOverride,
         scopedContext
-      ) : Promise.resolve({ type: "data" /* data */, result: void 0 });
+      }) : Promise.resolve({ type: "data" /* data */, result: void 0 });
     };
     return {
       ...match,
@@ -3130,13 +3158,24 @@ async function callDataStrategyImpl(dataStrategyImpl, type, request, matchesToLo
     fetcherKey,
     context: scopedContext
   });
+  let allLazyRoutePromises = lazyRoutePromises.flatMap(
+    (promiseMap) => Object.values(promiseMap).filter(isNonNullable)
+  );
   try {
-    await Promise.all(loadLazyRoutePromises);
+    await Promise.all(allLazyRoutePromises);
   } catch (e) {
   }
   return results;
 }
-async function callLoaderOrAction(type, request, match, loadRoutePromise, handlerOverride, scopedContext) {
+async function callLoaderOrAction({
+  type,
+  request,
+  match,
+  lazyHandlerPromise,
+  lazyRoutePromise,
+  handlerOverride,
+  scopedContext
+}) {
   let result;
   let onReject;
   let runHandler = (handler) => {
@@ -3173,7 +3212,7 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
   };
   try {
     let handler = match.route[type];
-    if (loadRoutePromise) {
+    if (lazyHandlerPromise || lazyRoutePromise) {
       if (handler) {
         let handlerError;
         let [value] = await Promise.all([
@@ -3183,17 +3222,19 @@ async function callLoaderOrAction(type, request, match, loadRoutePromise, handle
           runHandler(handler).catch((e) => {
             handlerError = e;
           }),
-          loadRoutePromise
+          // Ensure all lazy route promises are resolved before continuing
+          lazyHandlerPromise,
+          lazyRoutePromise
         ]);
         if (handlerError !== void 0) {
           throw handlerError;
         }
         result = value;
       } else {
-        await loadRoutePromise;
+        await lazyHandlerPromise;
         handler = match.route[type];
         if (handler) {
-          result = await runHandler(handler);
+          [result] = await Promise.all([runHandler(handler), lazyRoutePromise]);
         } else if (type === "action") {
           let url = new URL(request.url);
           let pathname = url.pathname + url.search;
@@ -5214,6 +5255,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         unstable_middleware: routeModule.unstable_clientMiddleware,
         handle: routeModule.handle,
         shouldRevalidate: getShouldRevalidateFunction(
+          dataRoute.path,
           routeModule,
           route,
           ssr,
@@ -5366,6 +5408,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
         shouldRevalidate: async () => {
           let lazyRoute = await getLazyRoute();
           return getShouldRevalidateFunction(
+            dataRoute.path,
             lazyRoute,
             route,
             ssr,
@@ -5393,7 +5436,7 @@ function createClientRoutes(manifest, routeModulesCache, initialState, ssr, isSp
     return dataRoute;
   });
 }
-function getShouldRevalidateFunction(route, manifestRoute, ssr, needsRevalidation) {
+function getShouldRevalidateFunction(path, route, manifestRoute, ssr, needsRevalidation) {
   if (needsRevalidation) {
     return wrapShouldRevalidateForHdr(
       manifestRoute.id,
@@ -5402,11 +5445,16 @@ function getShouldRevalidateFunction(route, manifestRoute, ssr, needsRevalidatio
     );
   }
   if (!ssr && manifestRoute.hasLoader && !manifestRoute.hasClientLoader) {
+    let myParams = path ? compilePath(path)[1].map((p) => p.paramName) : [];
+    const didParamsChange = (opts) => myParams.some((p) => opts.currentParams[p] !== opts.nextParams[p]);
     if (route.shouldRevalidate) {
       let fn = route.shouldRevalidate;
-      return (opts) => fn({ ...opts, defaultShouldRevalidate: false });
+      return (opts) => fn({
+        ...opts,
+        defaultShouldRevalidate: didParamsChange(opts)
+      });
     } else {
-      return () => false;
+      return (opts) => didParamsChange(opts);
     }
   }
   if (ssr && route.shouldRevalidate) {

package/dist/development/dom-export.mjs

@@ -1,5 +1,5 @@
 /**
- * react-router v0.0.0-experimental-54614613e
+ * react-router v0.0.0-experimental-c8b52c995
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -25,7 +25,7 @@ import {
   matchRoutes,
   shouldHydrateRouteLoader,
   useFogOFWarDiscovery
-} from "./chunk-VTWKMGAY.mjs";
+} from "./chunk-4K5PIBZY.mjs";
 
 // lib/dom-export/dom-router-provider.tsx
 import * as React from "react";