@remix-run/router 0.0.0-experimental-9c60e757e → 0.0.0-experimental-3ce8d73c7

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # `@remix-run/router`
 
+## 1.17.0
+
+### Minor Changes
+
+- Add support for Lazy Route Discovery (a.k.a. Fog of War) ([#11626](https://github.com/remix-run/react-router/pull/11626))
+
+  - RFC: <https://github.com/remix-run/react-router/discussions/11113>
+  - `unstable_patchRoutesOnMiss` docs: <https://reactrouter.com/en/main/routers/create-browser-router>
+
 ## 1.16.1
 
 ### Patch Changes

package/dist/router.cjs.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-9c60e757e
+ * @remix-run/router v0.0.0-experimental-3ce8d73c7
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1216,7 +1216,7 @@ function getResolveToMatches(matches, v7_relativeSplatPath) {
   // match so we include splat values for "." links.  See:
   // https://github.com/remix-run/react-router/issues/11052#issuecomment-1836589329
   if (v7_relativeSplatPath) {
-    return pathMatches.map((match, idx) => idx === matches.length - 1 ? match.pathname : match.pathnameBase);
+    return pathMatches.map((match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase);
   }
   return pathMatches.map(match => match.pathnameBase);
 }
@@ -2058,6 +2058,8 @@ function createRouter(init) {
     // Always respect the user flag.  Otherwise don't reset on mutation
     // submission navigations unless they redirect
     let preventScrollReset = pendingPreventScrollReset === true || state.navigation.formMethod != null && isMutationMethod(state.navigation.formMethod) && ((_location$state2 = location.state) == null ? void 0 : _location$state2._isRedirect) !== true;
+
+    // Commit any in-flight routes at the end of the HMR revalidation "navigation"
     if (inFlightDataRoutes) {
       dataRoutes = inFlightDataRoutes;
       inFlightDataRoutes = undefined;
@@ -3524,21 +3526,32 @@ function createRouter(init) {
     let partialMatches = matches;
     let route = partialMatches.length > 0 ? partialMatches[partialMatches.length - 1].route : null;
     while (true) {
+      let isNonHMR = inFlightDataRoutes == null;
+      let routesToUse = inFlightDataRoutes || dataRoutes;
       try {
-        await loadLazyRouteChildren(route, patchRoutesOnMissImpl, pathname, partialMatches, dataRoutes || inFlightDataRoutes, manifest, mapRouteProperties, pendingPatchRoutes, signal);
-        if (signal.aborted) {
-          return {
-            type: "aborted"
-          };
-        }
+        await loadLazyRouteChildren(patchRoutesOnMissImpl, pathname, partialMatches, routesToUse, manifest, mapRouteProperties, pendingPatchRoutes, signal);
       } catch (e) {
         return {
           type: "error",
           error: e,
           partialMatches
         };
+      } finally {
+        // If we are not in the middle of an HMR revalidation and we changed the
+        // routes, provide a new identity so when we `updateState` at the end of
+        // this navigation/fetch `router.routes` will be a new identity and
+        // trigger a re-run of memoized `router.routes` dependencies.
+        // HMR will already update the identity and reflow when it lands
+        // `inFlightDataRoutes` in `completeNavigation`
+        if (isNonHMR) {
+          dataRoutes = [...dataRoutes];
+        }
+      }
+      if (signal.aborted) {
+        return {
+          type: "aborted"
+        };
       }
-      let routesToUse = inFlightDataRoutes || dataRoutes;
       let newMatches = matchRoutes(routesToUse, pathname, basename);
       let matchedSplat = false;
       if (newMatches) {
@@ -3567,21 +3580,14 @@ function createRouter(init) {
       }
       let newPartialMatches = matchRoutesImpl(routesToUse, pathname, basename, true);
 
-      // Loop detection if we find the same partials after a run through patchRoutesOnMiss
+      // If we are no longer partially matching anything, this was either a
+      // legit splat match above, or it's a 404.  Also avoid loops if the
+      // second pass results in the same partial matches
       if (!newPartialMatches || partialMatches.map(m => m.route.id).join("-") === newPartialMatches.map(m => m.route.id).join("-")) {
-        // We are no longer partially matching anything new so this was either a
-        // legit splat match above, or it's a 404
-        if (matchedSplat) {
-          return {
-            type: "success",
-            matches: newMatches
-          };
-        } else {
-          return {
-            type: "success",
-            matches: null
-          };
-        }
+        return {
+          type: "success",
+          matches: matchedSplat ? newMatches : null
+        };
       }
       partialMatches = newPartialMatches;
       route = partialMatches[partialMatches.length - 1].route;
@@ -3598,6 +3604,35 @@ function createRouter(init) {
     manifest = {};
     inFlightDataRoutes = convertRoutesToDataRoutes(newRoutes, mapRouteProperties, undefined, manifest);
   }
+
+  // single-patch implementation:
+  //   router.patchRoutes(parentId, children);
+  //
+  // batch-patch implementation:
+  //   router.patchRoutes((patch) => {
+  //     patch(parentId1, children1);
+  //     patch(parentId2, children2);
+  //     patch(parentId3, children3);
+  //   });
+  function patchRoutes(routeIdOrCb, children) {
+    let isNonHMR = inFlightDataRoutes == null;
+    let routesToUse = inFlightDataRoutes || dataRoutes;
+    if (typeof routeIdOrCb === "function") {
+      routeIdOrCb((r, c) => patchRoutesImpl(r, c, routesToUse, manifest, mapRouteProperties));
+    } else if (typeof routeIdOrCb === "string" && children != null) {
+      patchRoutesImpl(routeIdOrCb, children, routesToUse, manifest, mapRouteProperties);
+    }
+
+    // If we are not in the middle of an HMR revalidation and we changed the
+    // routes, provide a new identity and trigger a reflow via `updateState`
+    // to re-run memoized `router.routes` dependencies.
+    // HMR will already update the identity and reflow when it lands
+    // `inFlightDataRoutes` in `completeNavigation`
+    if (isNonHMR) {
+      dataRoutes = [...dataRoutes];
+      updateState({});
+    }
+  }
   router = {
     get basename() {
       return basename;
@@ -3629,9 +3664,7 @@ function createRouter(init) {
     dispose,
     getBlocker,
     deleteBlocker,
-    patchRoutes(routeId, children) {
-      return patchRoutes(routeId, children, dataRoutes || inFlightDataRoutes, manifest, mapRouteProperties);
-    },
+    patchRoutes,
     _internalFetchControllers: fetchControllers,
     _internalActiveDeferreds: activeDeferreds,
     // TODO: Remove setRoutes, it's temporary to avoid dealing with
@@ -4449,38 +4482,33 @@ function shouldRevalidateLoader(loaderMatch, arg) {
 }
 
 /**
- * Idempotent utility to execute route.children() method to lazily load route
+ * Idempotent utility to execute patchRoutesOnMiss() to lazily load route
  * definitions and update the routes/routeManifest
  */
-async function loadLazyRouteChildren(route, patchRoutesOnMissImpl, path, matches, routes, manifest, mapRouteProperties, pendingRouteChildren, signal) {
+async function loadLazyRouteChildren(patchRoutesOnMissImpl, path, matches, routes, manifest, mapRouteProperties, pendingRouteChildren, signal) {
   let key = [path, ...matches.map(m => m.route.id)].join("-");
-  let pending = pendingRouteChildren.get(key);
-  let children = null;
-  if (!pending) {
-    let maybePromise = patchRoutesOnMissImpl(path, matches, (r, c) => patchRoutes(r, c, routes, manifest, mapRouteProperties));
-    if (isPromise(maybePromise)) {
-      pending = maybePromise;
-      pendingRouteChildren.set(key, pending);
-    } else {
-      children = maybePromise;
-    }
-  }
   try {
-    if (pending) {
-      children = await pending;
+    let pending = pendingRouteChildren.get(key);
+    if (!pending) {
+      pending = patchRoutesOnMissImpl({
+        path,
+        matches,
+        patch: (routeId, children) => {
+          if (!signal.aborted) {
+            patchRoutesImpl(routeId, children, routes, manifest, mapRouteProperties);
+          }
+        }
+      });
+      pendingRouteChildren.set(key, pending);
     }
-    if (children && !signal.aborted) {
-      if (route) {
-        patchRoutes(route.id, children, routes, manifest, mapRouteProperties);
-      } else {
-        warning(false, "You cannot return routes from `patchRoutesOnMiss` when there were no " + "partial matches, since React Router doesn't know where to patch the " + "routes.  Please use `patch(routeId, children)` instead.");
-      }
+    if (pending && isPromise(pending)) {
+      await pending;
     }
   } finally {
     pendingRouteChildren.delete(key);
   }
 }
-function patchRoutes(routeId, children, routes, manifest, mapRouteProperties) {
+function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties) {
   if (routeId) {
     var _route$children;
     let route = manifest[routeId];
@@ -4492,8 +4520,8 @@ function patchRoutes(routeId, children, routes, manifest, mapRouteProperties) {
       route.children = dataChildren;
     }
   } else {
-    let dataChildren = convertRoutesToDataRoutes(children, mapRouteProperties, ["patch", String(routes.length || "0")], manifest);
-    routes.push(...dataChildren);
+    let dataChildren = convertRoutesToDataRoutes(children, mapRouteProperties, ["patch", String(routesToUse.length || "0")], manifest);
+    routesToUse.push(...dataChildren);
   }
 }