@remix-run/router 0.0.0-experimental-bcda00aaf → 0.0.0-experimental-3be88c6fb

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v0.0.0-experimental-bcda00aaf
+ * @remix-run/router v0.0.0-experimental-3be88c6fb
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -1799,25 +1799,12 @@
       // were marked for explicit hydration
       let loaderData = init.hydrationData ? init.hydrationData.loaderData : null;
       let errors = init.hydrationData ? init.hydrationData.errors : null;
-      let isRouteInitialized = m => {
-        // No loader, nothing to initialize
-        if (!m.route.loader) {
-          return true;
-        }
-        // Explicitly opting-in to running on hydration
-        if (typeof m.route.loader === "function" && m.route.loader.hydrate === true) {
-          return false;
-        }
-        // Otherwise, initialized if hydrated with data or an error
-        return loaderData && loaderData[m.route.id] !== undefined || errors && errors[m.route.id] !== undefined;
-      };
-
       // If errors exist, don't consider routes below the boundary
       if (errors) {
         let idx = initialMatches.findIndex(m => errors[m.route.id] !== undefined);
-        initialized = initialMatches.slice(0, idx + 1).every(isRouteInitialized);
+        initialized = initialMatches.slice(0, idx + 1).every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
       } else {
-        initialized = initialMatches.every(isRouteInitialized);
+        initialized = initialMatches.every(m => !shouldLoadRouteOnHydration(m.route, loaderData, errors));
       }
     } else {
       // Without partial hydration - we're initialized if we were provided any
@@ -1917,10 +1904,6 @@
     // we don't need to update UI state if they change
     let blockerFunctions = new Map();
 
-    // Map of pending patchRoutesOnNavigation() promises (keyed by path/matches) so
-    // that we only kick them off once for a given combo
-    let pendingPatchRoutes = new Map();
-
     // Flag to ignore the next history update, so we can revert the URL change on
     // a POP navigation that was blocked by the user without touching router state
     let unblockBlockerHistoryUpdate = undefined;
@@ -2316,7 +2299,7 @@
       pendingViewTransitionEnabled = (opts && opts.enableViewTransition) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let loadingNavigation = opts && opts.overrideNavigation;
-      let matches = isUninterruptedRevalidation && inFlightDataRoutes == null ? state.matches : matchRoutes(routesToUse, location, basename);
+      let matches = matchRoutes(routesToUse, location, basename);
       let flushSync = (opts && opts.flushSync) === true;
       let fogOfWar = checkFogOfWar(matches, routesToUse, location.pathname);
       if (fogOfWar.active && fogOfWar.matches) {
@@ -2345,7 +2328,7 @@
       // Short circuit if it's only a hash change and not a revalidation or
       // mutation submission.
       //
-      // Ignore on initial page loads because since the initial load will always
+      // Ignore on initial page loads because since the initial hydration will always
       // be "same hash".  For example, on /page#hash and submit a <Form method="post">
       // which will default to a navigation to /page
       if (state.initialized && !isRevalidationRequired && isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
@@ -2664,9 +2647,7 @@
         });
       }
       revalidatingFetchers.forEach(rf => {
-        if (fetchControllers.has(rf.key)) {
-          abortFetcher(rf.key);
-        }
+        abortFetcher(rf.key);
         if (rf.controller) {
           // Fetchers use an independent AbortController so that aborting a fetcher
           // (via deleteFetcher) does not abort the triggering navigation that
@@ -2726,7 +2707,7 @@
       let {
         loaderData,
         errors
-      } = processLoaderData(state, matches, matchesToLoad, loaderResults, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds);
+      } = processLoaderData(state, matches, loaderResults, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds);
 
       // Wire up subscribers to update loaderData as promises settle
       activeDeferreds.forEach((deferredData, routeId) => {
@@ -2740,17 +2721,9 @@
         });
       });
 
-      // During partial hydration, preserve SSR errors for routes that don't re-run
+      // Preserve SSR errors during partial hydration
       if (future.v7_partialHydration && initialHydration && state.errors) {
-        Object.entries(state.errors).filter(_ref2 => {
-          let [id] = _ref2;
-          return !matchesToLoad.some(m => m.route.id === id);
-        }).forEach(_ref3 => {
-          let [routeId, error] = _ref3;
-          errors = Object.assign(errors || {}, {
-            [routeId]: error
-          });
-        });
+        errors = _extends({}, state.errors, errors);
       }
       let updatedFetchers = markFetchRedirectsDone();
       let didAbortFetchLoads = abortStaleFetchLoads(pendingNavigationLoadId);
@@ -2793,7 +2766,7 @@
       if (isServer) {
         throw new Error("router.fetch() was called during the server render, but it shouldn't be. " + "You are likely calling a useFetcher() method in the body of your component. " + "Try moving it to a useEffect or a callback.");
       }
-      if (fetchControllers.has(key)) abortFetcher(key);
+      abortFetcher(key);
       let flushSync = (opts && opts.flushSync) === true;
       let routesToUse = inFlightDataRoutes || dataRoutes;
       let normalizedPath = normalizeTo(state.location, state.matches, basename, future.v7_prependBasename, href, future.v7_relativeSplatPath, routeId, opts == null ? void 0 : opts.relative);
@@ -2822,9 +2795,9 @@
         return;
       }
       let match = getTargetMatch(matches, path);
-      pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
+      let preventScrollReset = (opts && opts.preventScrollReset) === true;
       if (submission && isMutationMethod(submission.formMethod)) {
-        handleFetcherAction(key, routeId, path, match, matches, fogOfWar.active, flushSync, submission);
+        handleFetcherAction(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
         return;
       }
 
@@ -2834,12 +2807,12 @@
         routeId,
         path
       });
-      handleFetcherLoader(key, routeId, path, match, matches, fogOfWar.active, flushSync, submission);
+      handleFetcherLoader(key, routeId, path, match, matches, fogOfWar.active, flushSync, preventScrollReset, submission);
     }
 
     // Call the action for the matched fetcher.submit(), and then handle redirects,
     // errors, and revalidation
-    async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, submission) {
+    async function handleFetcherAction(key, routeId, path, match, requestMatches, isFogOfWar, flushSync, preventScrollReset, submission) {
       interruptActiveLoads();
       fetchLoadMatches.delete(key);
       function detectAndHandle405Error(m) {
@@ -2932,7 +2905,8 @@
             fetchRedirectIds.add(key);
             updateFetcherState(key, getLoadingFetcher(submission));
             return startRedirectNavigation(fetchRequest, actionResult, false, {
-              fetcherSubmission: submission
+              fetcherSubmission: submission,
+              preventScrollReset
             });
           }
         }
@@ -2970,9 +2944,7 @@
         let existingFetcher = state.fetchers.get(staleKey);
         let revalidatingFetcher = getLoadingFetcher(undefined, existingFetcher ? existingFetcher.data : undefined);
         state.fetchers.set(staleKey, revalidatingFetcher);
-        if (fetchControllers.has(staleKey)) {
-          abortFetcher(staleKey);
-        }
+        abortFetcher(staleKey);
         if (rf.controller) {
           fetchControllers.set(staleKey, rf.controller);
         }
@@ -2995,7 +2967,9 @@
       revalidatingFetchers.forEach(r => fetchControllers.delete(r.key));
       let redirect = findRedirect(loaderResults);
       if (redirect) {
-        return startRedirectNavigation(revalidationRequest, redirect.result, false);
+        return startRedirectNavigation(revalidationRequest, redirect.result, false, {
+          preventScrollReset
+        });
       }
       redirect = findRedirect(fetcherResults);
       if (redirect) {
@@ -3003,14 +2977,16 @@
         // fetchRedirectIds so it doesn't get revalidated on the next set of
         // loader executions
         fetchRedirectIds.add(redirect.key);
-        return startRedirectNavigation(revalidationRequest, redirect.result, false);
+        return startRedirectNavigation(revalidationRequest, redirect.result, false, {
+          preventScrollReset
+        });
       }
 
       // Process and commit output from loaders
       let {
         loaderData,
         errors
-      } = processLoaderData(state, matches, matchesToLoad, loaderResults, undefined, revalidatingFetchers, fetcherResults, activeDeferreds);
+      } = processLoaderData(state, matches, loaderResults, undefined, revalidatingFetchers, fetcherResults, activeDeferreds);
 
       // Since we let revalidations complete even if the submitting fetcher was
       // deleted, only put it back to idle if it hasn't been deleted
@@ -3046,7 +3022,7 @@
     }
 
     // Call the matched loader for fetcher.load(), handling redirects, errors, etc.
-    async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, submission) {
+    async function handleFetcherLoader(key, routeId, path, match, matches, isFogOfWar, flushSync, preventScrollReset, submission) {
       let existingFetcher = state.fetchers.get(key);
       updateFetcherState(key, getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined), {
         flushSync
@@ -3117,7 +3093,9 @@
           return;
         } else {
           fetchRedirectIds.add(key);
-          await startRedirectNavigation(fetchRequest, result, false);
+          await startRedirectNavigation(fetchRequest, result, false, {
+            preventScrollReset
+          });
           return;
         }
       }
@@ -3156,6 +3134,7 @@
       let {
         submission,
         fetcherSubmission,
+        preventScrollReset,
         replace
       } = _temp2 === void 0 ? {} : _temp2;
       if (redirect.response.headers.has("X-Remix-Revalidate")) {
@@ -3216,7 +3195,7 @@
             formAction: location
           }),
           // Preserve these flags across redirects
-          preventScrollReset: pendingPreventScrollReset,
+          preventScrollReset: preventScrollReset || pendingPreventScrollReset,
           enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
         });
       } else {
@@ -3228,7 +3207,7 @@
           // Send fetcher submissions through for shouldRevalidate
           fetcherSubmission,
           // Preserve these flags across redirects
-          preventScrollReset: pendingPreventScrollReset,
+          preventScrollReset: preventScrollReset || pendingPreventScrollReset,
           enableViewTransition: isNavigation ? pendingViewTransitionEnabled : undefined
         });
       }
@@ -3309,8 +3288,8 @@
       fetchLoadMatches.forEach((_, key) => {
         if (fetchControllers.has(key)) {
           cancelledFetcherLoads.add(key);
-          abortFetcher(key);
         }
+        abortFetcher(key);
       });
     }
     function updateFetcherState(key, fetcher, opts) {
@@ -3383,9 +3362,10 @@
     }
     function abortFetcher(key) {
       let controller = fetchControllers.get(key);
-      invariant(controller, "Expected fetch controller: " + key);
-      controller.abort();
-      fetchControllers.delete(key);
+      if (controller) {
+        controller.abort();
+        fetchControllers.delete(key);
+      }
     }
     function markFetchersDone(keys) {
       for (let key of keys) {
@@ -3450,12 +3430,12 @@
         blockers
       });
     }
-    function shouldBlockNavigation(_ref4) {
+    function shouldBlockNavigation(_ref2) {
       let {
         currentLocation,
         nextLocation,
         historyAction
-      } = _ref4;
+      } = _ref2;
       if (blockerFunctions.size === 0) {
         return;
       }
@@ -3602,12 +3582,26 @@
       };
     }
     async function discoverRoutes(matches, pathname, signal) {
+      if (!patchRoutesOnNavigationImpl) {
+        return {
+          type: "success",
+          matches
+        };
+      }
       let partialMatches = matches;
       while (true) {
         let isNonHMR = inFlightDataRoutes == null;
         let routesToUse = inFlightDataRoutes || dataRoutes;
+        let localManifest = manifest;
         try {
-          await loadLazyRouteChildren(patchRoutesOnNavigationImpl, pathname, partialMatches, routesToUse, manifest, mapRouteProperties, pendingPatchRoutes, signal);
+          await patchRoutesOnNavigationImpl({
+            path: pathname,
+            matches: partialMatches,
+            patch: (routeId, children) => {
+              if (signal.aborted) return;
+              patchRoutesImpl(routeId, children, routesToUse, localManifest, mapRouteProperties);
+            }
+          });
         } catch (e) {
           return {
             type: "error",
@@ -3621,7 +3615,7 @@
           // 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) {
+          if (isNonHMR && !signal.aborted) {
             dataRoutes = [...dataRoutes];
           }
         }
@@ -4200,9 +4194,21 @@
       path.hash = location.hash;
     }
 
-    // Add an ?index param for matched index routes if we don't already have one
-    if ((to == null || to === "" || to === ".") && activeRouteMatch && activeRouteMatch.route.index && !hasNakedIndexQuery(path.search)) {
-      path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
+    // Account for `?index` params when routing to the current location
+    if ((to == null || to === "" || to === ".") && activeRouteMatch) {
+      let nakedIndex = hasNakedIndexQuery(path.search);
+      if (activeRouteMatch.route.index && !nakedIndex) {
+        // Add one when we're targeting an index route
+        path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
+      } else if (!activeRouteMatch.route.index && nakedIndex) {
+        // Remove existing ones when we're not
+        let params = new URLSearchParams(path.search);
+        let indexValues = params.getAll("index");
+        params.delete("index");
+        indexValues.filter(v => v).forEach(v => params.append("index", v));
+        let qs = params.toString();
+        path.search = qs ? "?" + qs : "";
+      }
     }
 
     // If we're operating within a basename, prepend it to the pathname.  If
@@ -4251,8 +4257,8 @@
         }
         let text = typeof opts.body === "string" ? opts.body : opts.body instanceof FormData || opts.body instanceof URLSearchParams ?
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#plain-text-form-data
-        Array.from(opts.body.entries()).reduce((acc, _ref5) => {
-          let [name, value] = _ref5;
+        Array.from(opts.body.entries()).reduce((acc, _ref3) => {
+          let [name, value] = _ref3;
           return "" + acc + name + "=" + value + "\n";
         }, "") : String(opts.body);
         return {
@@ -4342,26 +4348,37 @@
     };
   }
 
-  // Filter out all routes below any caught error as they aren't going to
+  // Filter out all routes at/below any caught error as they aren't going to
   // render so we don't need to load them
-  function getLoaderMatchesUntilBoundary(matches, boundaryId) {
-    let boundaryMatches = matches;
-    if (boundaryId) {
-      let index = matches.findIndex(m => m.route.id === boundaryId);
-      if (index >= 0) {
-        boundaryMatches = matches.slice(0, index);
-      }
+  function getLoaderMatchesUntilBoundary(matches, boundaryId, includeBoundary) {
+    if (includeBoundary === void 0) {
+      includeBoundary = false;
     }
-    return boundaryMatches;
+    let index = matches.findIndex(m => m.route.id === boundaryId);
+    if (index >= 0) {
+      return matches.slice(0, includeBoundary ? index + 1 : index);
+    }
+    return matches;
   }
-  function getMatchesToLoad(history, state, matches, submission, location, isInitialLoad, skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {
+  function getMatchesToLoad(history, state, matches, submission, location, initialHydration, skipActionErrorRevalidation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, deletedFetchers, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionResult) {
     let actionResult = pendingActionResult ? isErrorResult(pendingActionResult[1]) ? pendingActionResult[1].error : pendingActionResult[1].data : undefined;
     let currentUrl = history.createURL(state.location);
     let nextUrl = history.createURL(location);
 
     // Pick navigation matches that are net-new or qualify for revalidation
-    let boundaryId = pendingActionResult && isErrorResult(pendingActionResult[1]) ? pendingActionResult[0] : undefined;
-    let boundaryMatches = boundaryId ? getLoaderMatchesUntilBoundary(matches, boundaryId) : matches;
+    let boundaryMatches = matches;
+    if (initialHydration && state.errors) {
+      // On initial hydration, only consider matches up to _and including_ the boundary.
+      // This is inclusive to handle cases where a server loader ran successfully,
+      // a child server loader bubbled up to this route, but this route has
+      // `clientLoader.hydrate` so we want to still run the `clientLoader` so that
+      // we have a complete version of `loaderData`
+      boundaryMatches = getLoaderMatchesUntilBoundary(matches, Object.keys(state.errors)[0], true);
+    } else if (pendingActionResult && isErrorResult(pendingActionResult[1])) {
+      // If an action threw an error, we call loaders up to, but not including the
+      // boundary
+      boundaryMatches = getLoaderMatchesUntilBoundary(matches, pendingActionResult[0]);
+    }
 
     // Don't revalidate loaders by default after action 4xx/5xx responses
     // when the flag is enabled.  They can still opt-into revalidation via
@@ -4379,13 +4396,8 @@
       if (route.loader == null) {
         return false;
       }
-      if (isInitialLoad) {
-        if (typeof route.loader !== "function" || route.loader.hydrate) {
-          return true;
-        }
-        return state.loaderData[route.id] === undefined && (
-        // Don't re-run if the loader ran and threw an error
-        !state.errors || state.errors[route.id] === undefined);
+      if (initialHydration) {
+        return shouldLoadRouteOnHydration(route, state.loaderData, state.errors);
       }
 
       // Always call the loader on new route instances and pending defer cancellations
@@ -4419,11 +4431,11 @@
     let revalidatingFetchers = [];
     fetchLoadMatches.forEach((f, key) => {
       // Don't revalidate:
-      //  - on initial load (shouldn't be any fetchers then anyway)
+      //  - on initial hydration (shouldn't be any fetchers then anyway)
       //  - if fetcher won't be present in the subsequent render
       //    - no longer matches the URL (v7_fetcherPersist=false)
       //    - was unmounted but persisted due to v7_fetcherPersist=true
-      if (isInitialLoad || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
+      if (initialHydration || !matches.some(m => m.route.id === f.routeId) || deletedFetchers.has(key)) {
         return;
       }
       let fetcherMatches = matchRoutes(routesToUse, f.path, basename);
@@ -4489,6 +4501,32 @@
     });
     return [navigationMatches, revalidatingFetchers];
   }
+  function shouldLoadRouteOnHydration(route, loaderData, errors) {
+    // We dunno if we have a loader - gotta find out!
+    if (route.lazy) {
+      return true;
+    }
+
+    // No loader, nothing to initialize
+    if (!route.loader) {
+      return false;
+    }
+    let hasData = loaderData != null && loaderData[route.id] !== undefined;
+    let hasError = errors != null && errors[route.id] !== undefined;
+
+    // Don't run if we error'd during SSR
+    if (!hasData && hasError) {
+      return false;
+    }
+
+    // Explicitly opting-in to running on hydration
+    if (typeof route.loader === "function" && route.loader.hydrate === true) {
+      return true;
+    }
+
+    // Otherwise, run if we're not yet initialized with anything
+    return !hasData && !hasError;
+  }
   function isNewLoader(currentLoaderData, currentMatch, match) {
     let isNew =
     // [a] -> [a, b]
@@ -4522,34 +4560,6 @@
     }
     return arg.defaultShouldRevalidate;
   }
-
-  /**
-   * Idempotent utility to execute patchRoutesOnNavigation() to lazily load route
-   * definitions and update the routes/routeManifest
-   */
-  async function loadLazyRouteChildren(patchRoutesOnNavigationImpl, path, matches, routes, manifest, mapRouteProperties, pendingRouteChildren, signal) {
-    let key = [path, ...matches.map(m => m.route.id)].join("-");
-    try {
-      let pending = pendingRouteChildren.get(key);
-      if (!pending) {
-        pending = patchRoutesOnNavigationImpl({
-          path,
-          matches,
-          patch: (routeId, children) => {
-            if (!signal.aborted) {
-              patchRoutesImpl(routeId, children, routes, manifest, mapRouteProperties);
-            }
-          }
-        });
-        pendingRouteChildren.set(key, pending);
-      }
-      if (pending && isPromise(pending)) {
-        await pending;
-      }
-    } finally {
-      pendingRouteChildren.delete(key);
-    }
-  }
   function patchRoutesImpl(routeId, children, routesToUse, manifest, mapRouteProperties) {
     var _childrenToPatch;
     let childrenToPatch;
@@ -4567,10 +4577,34 @@
     // Don't patch in routes we already know about so that `patch` is idempotent
     // to simplify user-land code. This is useful because we re-call the
     // `patchRoutesOnNavigation` function for matched routes with params.
-    let uniqueChildren = children.filter(a => !childrenToPatch.some(b => a.index === b.index && a.path === b.path && a.caseSensitive === b.caseSensitive));
+    let uniqueChildren = children.filter(newRoute => !childrenToPatch.some(existingRoute => isSameRoute(newRoute, existingRoute)));
     let newRoutes = convertRoutesToDataRoutes(uniqueChildren, mapRouteProperties, [routeId || "_", "patch", String(((_childrenToPatch = childrenToPatch) == null ? void 0 : _childrenToPatch.length) || "0")], manifest);
     childrenToPatch.push(...newRoutes);
   }
+  function isSameRoute(newRoute, existingRoute) {
+    // Most optimal check is by id
+    if ("id" in newRoute && "id" in existingRoute && newRoute.id === existingRoute.id) {
+      return true;
+    }
+
+    // Second is by pathing differences
+    if (!(newRoute.index === existingRoute.index && newRoute.path === existingRoute.path && newRoute.caseSensitive === existingRoute.caseSensitive)) {
+      return false;
+    }
+
+    // Pathless layout routes are trickier since we need to check children.
+    // If they have no children then they're the same as far as we can tell
+    if ((!newRoute.children || newRoute.children.length === 0) && (!existingRoute.children || existingRoute.children.length === 0)) {
+      return true;
+    }
+
+    // Otherwise, we look to see if every child in the new route is already
+    // represented in the existing route's children
+    return newRoute.children.every((aChild, i) => {
+      var _existingRoute$childr;
+      return (_existingRoute$childr = existingRoute.children) == null ? void 0 : _existingRoute$childr.some(bChild => isSameRoute(aChild, bChild));
+    });
+  }
 
   /**
    * Execute route.lazy() methods to lazily load route modules (loader, action,
@@ -4626,10 +4660,10 @@
   }
 
   // Default implementation of `dataStrategy` which fetches all loaders in parallel
-  async function defaultDataStrategy(_ref6) {
+  async function defaultDataStrategy(_ref4) {
     let {
       matches
-    } = _ref6;
+    } = _ref4;
     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, {
@@ -5043,7 +5077,7 @@
       loaderHeaders
     };
   }
-  function processLoaderData(state, matches, matchesToLoad, results, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds) {
+  function processLoaderData(state, matches, results, pendingActionResult, revalidatingFetchers, fetcherResults, activeDeferreds) {
     let {
       loaderData,
       errors
@@ -5222,9 +5256,6 @@
     // /page#hash -> /page
     return false;
   }
-  function isPromise(val) {
-    return typeof val === "object" && val != null && "then" in val;
-  }
   function isDataStrategyResult(result) {
     return result != null && typeof result === "object" && "type" in result && "result" in result && (result.type === ResultType.data || result.type === ResultType.error);
   }