@remix-run/router 1.3.0 → 1.3.1

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.3.0
+ * @remix-run/router v1.3.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -435,26 +435,17 @@
     }
 
     function handlePop() {
-      let nextAction = exports.Action.Pop;
+      action = exports.Action.Pop;
       let nextIndex = getIndex();
+      let delta = nextIndex == null ? null : nextIndex - index;
+      index = nextIndex;
 
-      if (nextIndex != null) {
-        let delta = nextIndex - index;
-        action = nextAction;
-        index = nextIndex;
-
-        if (listener) {
-          listener({
-            action,
-            location: history.location,
-            delta
-          });
-        }
-      } else {
-        warning$1(false, // TODO: Write up a doc that explains our blocking strategy in detail
-        // and link to it here so people can understand better what is going on
-        // and how to avoid it.
-        "You are trying to block a POP navigation to a location that was not " + "created by @remix-run/router. The block will fail silently in " + "production, but in general you should do all navigation with the " + "router (instead of using window.history.pushState directly) " + "to avoid this situation.");
+      if (listener) {
+        listener({
+          action,
+          location: history.location,
+          delta
+        });
       }
     }
 
@@ -1252,6 +1243,12 @@
           [key]: this.trackPromise(key, value)
         });
       }, {});
+
+      if (this.done) {
+        // All incoming values were resolved
+        this.unlistenAbortSignal();
+      }
+
       this.init = responseInit;
     }
 
@@ -1439,11 +1436,11 @@
   }
   /**
    * Check if the given error is an ErrorResponse generated from a 4xx/5xx
-   * Response throw from an action/loader
+   * Response thrown from an action/loader
    */
 
-  function isRouteErrorResponse(e) {
-    return e instanceof ErrorResponse;
+  function isRouteErrorResponse(error) {
+    return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
   }
 
   //#region Types and Constants
@@ -1618,13 +1615,14 @@
           return;
         }
 
+        warning(activeBlocker != null && delta === null, "You are trying to use a blocker on a POP navigation to a location " + "that was not created by @remix-run/router. This will fail silently in " + "production. This can happen if you are navigating outside the router " + "via `window.history.pushState`/`window.location.hash` instead of using " + "router navigation APIs.  This can also happen if you are using " + "createHashRouter and the user manually changes the URL.");
         let blockerKey = shouldBlockNavigation({
           currentLocation: state.location,
           nextLocation: location,
           historyAction
         });
 
-        if (blockerKey) {
+        if (blockerKey && delta != null) {
           // Restore the URL to match the current UI, but don't update router state
           ignoreNextHistoryUpdate = true;
           init.history.go(delta * -1); // Put the blocker into a blocked state
@@ -1907,10 +1905,12 @@
           }
         });
         return;
-      } // Short circuit if it's only a hash change
+      } // Short circuit if it's only a hash change and not a mutation submission
+      // For example, on /page#hash and submit a <Form method="post"> which will
+      // default to a navigation to /page
 
 
-      if (isHashChangeOnly(state.location, location)) {
+      if (isHashChangeOnly(state.location, location) && !(opts && opts.submission && isMutationMethod(opts.submission.formMethod))) {
         completeNavigation(location, {
           matches
         });
@@ -2124,9 +2124,8 @@
 
 
       if (!isUninterruptedRevalidation) {
-        revalidatingFetchers.forEach(_ref2 => {
-          let [key] = _ref2;
-          let fetcher = state.fetchers.get(key);
+        revalidatingFetchers.forEach(rf => {
+          let fetcher = state.fetchers.get(rf.key);
           let revalidatingFetcher = {
             state: "loading",
             data: fetcher && fetcher.data,
@@ -2136,7 +2135,7 @@
             formData: undefined,
             " _hasFetcherDoneAnything ": true
           };
-          state.fetchers.set(key, revalidatingFetcher);
+          state.fetchers.set(rf.key, revalidatingFetcher);
         });
         let actionData = pendingActionData || state.actionData;
         updateState(_extends({
@@ -2151,10 +2150,7 @@
       }
 
       pendingNavigationLoadId = ++incrementingLoadId;
-      revalidatingFetchers.forEach(_ref3 => {
-        let [key] = _ref3;
-        return fetchControllers.set(key, pendingNavigationController);
-      });
+      revalidatingFetchers.forEach(rf => fetchControllers.set(rf.key, pendingNavigationController));
       let {
         results,
         loaderResults,
@@ -2170,10 +2166,7 @@
       // reassigned to new controllers for the next navigation
 
 
-      revalidatingFetchers.forEach(_ref4 => {
-        let [key] = _ref4;
-        return fetchControllers.delete(key);
-      }); // If any loaders returned a redirect Response, start a new REPLACE navigation
+      revalidatingFetchers.forEach(rf => fetchControllers.delete(rf.key)); // If any loaders returned a redirect Response, start a new REPLACE navigation
 
       let redirect = findRedirect(results);
 
@@ -2237,6 +2230,7 @@
         submission
       } = normalizeNavigateOptions(href, opts, true);
       let match = getTargetMatch(matches, path);
+      pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
 
       if (submission && isMutationMethod(submission.formMethod)) {
         handleFetcherAction(key, routeId, path, match, matches, submission);
@@ -2245,7 +2239,12 @@
       // revalidations
 
 
-      fetchLoadMatches.set(key, [path, match, matches]);
+      fetchLoadMatches.set(key, {
+        routeId,
+        path,
+        match,
+        matches
+      });
       handleFetcherLoader(key, routeId, path, match, matches, submission);
     } // Call the action for the matched fetcher.submit(), and then handle redirects,
     // errors, and revalidation
@@ -2351,11 +2350,8 @@
       // current fetcher which we want to keep in it's current loading state which
       // contains it's action submission info + action data
 
-      revalidatingFetchers.filter(_ref5 => {
-        let [staleKey] = _ref5;
-        return staleKey !== key;
-      }).forEach(_ref6 => {
-        let [staleKey] = _ref6;
+      revalidatingFetchers.filter(rf => rf.key !== key).forEach(rf => {
+        let staleKey = rf.key;
         let existingFetcher = state.fetchers.get(staleKey);
         let revalidatingFetcher = {
           state: "loading",
@@ -2384,10 +2380,7 @@
 
       fetchReloadIds.delete(key);
       fetchControllers.delete(key);
-      revalidatingFetchers.forEach(_ref7 => {
-        let [staleKey] = _ref7;
-        return fetchControllers.delete(staleKey);
-      });
+      revalidatingFetchers.forEach(r => fetchControllers.delete(r.key));
       let redirect = findRedirect(results);
 
       if (redirect) {
@@ -2627,16 +2620,10 @@
       // Call all navigation loaders and revalidating fetcher loaders in parallel,
       // then slice off the results into separate arrays so we can handle them
       // accordingly
-      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, router.basename)), ...fetchersToLoad.map(_ref8 => {
-        let [, href, match, fetchMatches] = _ref8;
-        return callLoaderOrAction("loader", createClientSideRequest(init.history, href, request.signal), match, fetchMatches, router.basename);
-      })]);
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, router.basename)), ...fetchersToLoad.map(f => callLoaderOrAction("loader", createClientSideRequest(init.history, f.path, request.signal), f.match, f.matches, router.basename))]);
       let loaderResults = results.slice(0, matchesToLoad.length);
       let fetcherResults = results.slice(matchesToLoad.length);
-      await Promise.all([resolveDeferredResults(currentMatches, matchesToLoad, loaderResults, request.signal, false, state.loaderData), resolveDeferredResults(currentMatches, fetchersToLoad.map(_ref9 => {
-        let [,, match] = _ref9;
-        return match;
-      }), fetcherResults, request.signal, true)]);
+      await Promise.all([resolveDeferredResults(currentMatches, matchesToLoad, loaderResults, request.signal, false, state.loaderData), resolveDeferredResults(currentMatches, fetchersToLoad.map(f => f.match), fetcherResults, request.signal, true)]);
       return {
         results,
         loaderResults,
@@ -2775,12 +2762,12 @@
       });
     }
 
-    function shouldBlockNavigation(_ref10) {
+    function shouldBlockNavigation(_ref2) {
       let {
         currentLocation,
         nextLocation,
         historyAction
-      } = _ref10;
+      } = _ref2;
 
       if (activeBlocker == null) {
         return;
@@ -3374,24 +3361,15 @@
 
 
     let parsedPath = parsePath(path);
+    let searchParams = convertFormDataToSearchParams(opts.formData); // Since fetcher GET submissions only run a single loader (as opposed to
+    // navigation GET submissions which run all loaders), we need to preserve
+    // any incoming ?index params
 
-    try {
-      let searchParams = convertFormDataToSearchParams(opts.formData); // Since fetcher GET submissions only run a single loader (as opposed to
-      // navigation GET submissions which run all loaders), we need to preserve
-      // any incoming ?index params
-
-      if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
-        searchParams.append("index", "");
-      }
-
-      parsedPath.search = "?" + searchParams;
-    } catch (e) {
-      return {
-        path,
-        error: getInternalRouterError(400)
-      };
+    if (isFetcher && parsedPath.search && hasNakedIndexQuery(parsedPath.search)) {
+      searchParams.append("index", "");
     }
 
+    parsedPath.search = "?" + searchParams;
     return {
       path: createPath(parsedPath),
       submission
@@ -3415,25 +3393,73 @@
   }
 
   function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, pendingActionData, pendingError, fetchLoadMatches) {
-    let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined; // Pick navigation matches that are net-new or qualify for revalidation
+    let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined;
+    let currentUrl = history.createURL(state.location);
+    let nextUrl = history.createURL(location);
+    let defaultShouldRevalidate = // Forced revalidation due to submission, useRevalidate, or X-Remix-Revalidate
+    isRevalidationRequired || // Clicked the same link, resubmitted a GET form
+    currentUrl.toString() === nextUrl.toString() || // Search params affect all loaders
+    currentUrl.search !== nextUrl.search; // Pick navigation matches that are net-new or qualify for revalidation
 
     let boundaryId = pendingError ? Object.keys(pendingError)[0] : undefined;
     let boundaryMatches = getLoaderMatchesUntilBoundary(matches, boundaryId);
-    let navigationMatches = boundaryMatches.filter((match, index) => match.route.loader != null && (isNewLoader(state.loaderData, state.matches[index], match) || // If this route had a pending deferred cancelled it must be revalidated
-    cancelledDeferredRoutes.some(id => id === match.route.id) || shouldRevalidateLoader(history, state.location, state.matches[index], submission, location, match, isRevalidationRequired, actionResult))); // Pick fetcher.loads that need to be revalidated
+    let navigationMatches = boundaryMatches.filter((match, index) => {
+      if (match.route.loader == null) {
+        return false;
+      } // Always call the loader on new route instances and pending defer cancellations
 
-    let revalidatingFetchers = [];
-    fetchLoadMatches && fetchLoadMatches.forEach((_ref11, key) => {
-      let [href, match, fetchMatches] = _ref11;
 
-      // This fetcher was cancelled from a prior action submission - force reload
-      if (cancelledFetcherLoads.includes(key)) {
-        revalidatingFetchers.push([key, href, match, fetchMatches]);
-      } else if (isRevalidationRequired) {
-        let shouldRevalidate = shouldRevalidateLoader(history, href, match, submission, href, match, isRevalidationRequired, actionResult);
+      if (isNewLoader(state.loaderData, state.matches[index], match) || cancelledDeferredRoutes.some(id => id === match.route.id)) {
+        return true;
+      } // This is the default implementation for when we revalidate.  If the route
+      // provides it's own implementation, then we give them full control but
+      // provide this value so they can leverage it if needed after they check
+      // their own specific use cases
+
+
+      let currentRouteMatch = state.matches[index];
+      let nextRouteMatch = match;
+      return shouldRevalidateLoader(match, _extends({
+        currentUrl,
+        currentParams: currentRouteMatch.params,
+        nextUrl,
+        nextParams: nextRouteMatch.params
+      }, submission, {
+        actionResult,
+        defaultShouldRevalidate: defaultShouldRevalidate || isNewRouteInstance(currentRouteMatch, nextRouteMatch)
+      }));
+    }); // Pick fetcher.loads that need to be revalidated
+
+    let revalidatingFetchers = [];
+    fetchLoadMatches && fetchLoadMatches.forEach((f, key) => {
+      if (!matches.some(m => m.route.id === f.routeId)) {
+        // This fetcher is not going to be present in the subsequent render so
+        // there's no need to revalidate it
+        return;
+      } else if (cancelledFetcherLoads.includes(key)) {
+        // This fetcher was cancelled from a prior action submission - force reload
+        revalidatingFetchers.push(_extends({
+          key
+        }, f));
+      } else {
+        // Revalidating fetchers are decoupled from the route matches since they
+        // hit a static href, so they _always_ check shouldRevalidate and the
+        // default is strictly if a revalidation is explicitly required (action
+        // submissions, useRevalidator, X-Remix-Revalidate).
+        let shouldRevalidate = shouldRevalidateLoader(f.match, _extends({
+          currentUrl,
+          currentParams: state.matches[state.matches.length - 1].params,
+          nextUrl,
+          nextParams: matches[matches.length - 1].params
+        }, submission, {
+          actionResult,
+          defaultShouldRevalidate
+        }));
 
         if (shouldRevalidate) {
-          revalidatingFetchers.push([key, href, match, fetchMatches]);
+          revalidatingFetchers.push(_extends({
+            key
+          }, f));
         }
       }
     });
@@ -3456,43 +3482,20 @@
     return (// param change for this match, /users/123 -> /users/456
       currentMatch.pathname !== match.pathname || // splat param changed, which is not present in match.path
       // e.g. /files/images/avatar.jpg -> files/finances.xls
-      currentPath && currentPath.endsWith("*") && currentMatch.params["*"] !== match.params["*"]
+      currentPath != null && currentPath.endsWith("*") && currentMatch.params["*"] !== match.params["*"]
     );
   }
 
-  function shouldRevalidateLoader(history, currentLocation, currentMatch, submission, location, match, isRevalidationRequired, actionResult) {
-    let currentUrl = history.createURL(currentLocation);
-    let currentParams = currentMatch.params;
-    let nextUrl = history.createURL(location);
-    let nextParams = match.params; // This is the default implementation as to when we revalidate.  If the route
-    // provides it's own implementation, then we give them full control but
-    // provide this value so they can leverage it if needed after they check
-    // their own specific use cases
-    // Note that fetchers always provide the same current/next locations so the
-    // URL-based checks here don't apply to fetcher shouldRevalidate calls
-
-    let defaultShouldRevalidate = isNewRouteInstance(currentMatch, match) || // Clicked the same link, resubmitted a GET form
-    currentUrl.toString() === nextUrl.toString() || // Search params affect all loaders
-    currentUrl.search !== nextUrl.search || // Forced revalidation due to submission, useRevalidate, or X-Remix-Revalidate
-    isRevalidationRequired;
-
-    if (match.route.shouldRevalidate) {
-      let routeChoice = match.route.shouldRevalidate(_extends({
-        currentUrl,
-        currentParams,
-        nextUrl,
-        nextParams
-      }, submission, {
-        actionResult,
-        defaultShouldRevalidate
-      }));
+  function shouldRevalidateLoader(loaderMatch, arg) {
+    if (loaderMatch.route.shouldRevalidate) {
+      let routeChoice = loaderMatch.route.shouldRevalidate(arg);
 
       if (typeof routeChoice === "boolean") {
         return routeChoice;
       }
     }
 
-    return defaultShouldRevalidate;
+    return arg.defaultShouldRevalidate;
   }
 
   async function callLoaderOrAction(type, request, match, matches, basename, isStaticRequest, isRouteRequest, requestContext) {
@@ -3667,8 +3670,8 @@
     let searchParams = new URLSearchParams();
 
     for (let [key, value] of formData.entries()) {
-      invariant(typeof value === "string", 'File inputs are not supported with encType "application/x-www-form-urlencoded", ' + 'please use "multipart/form-data" instead.');
-      searchParams.append(key, value);
+      // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#converting-an-entry-list-to-a-list-of-name-value-pairs
+      searchParams.append(key, value instanceof File ? value.name : value);
     }
 
     return searchParams;
@@ -3759,7 +3762,10 @@
     } = processRouteLoaderData(matches, matchesToLoad, results, pendingError, activeDeferreds); // Process results from our revalidating fetchers
 
     for (let index = 0; index < revalidatingFetchers.length; index++) {
-      let [key,, match] = revalidatingFetchers[index];
+      let {
+        key,
+        match
+      } = revalidatingFetchers[index];
       invariant(fetcherResults !== undefined && fetcherResults[index] !== undefined, "Did not find corresponding fetcher result");
       let result = fetcherResults[index]; // Process fetcher non-redirect errors
 
@@ -3865,8 +3871,6 @@
         errorMessage = "You made a " + method + " request to \"" + pathname + "\" but " + ("did not provide a `loader` for route \"" + routeId + "\", ") + "so there is no way to handle the request.";
       } else if (type === "defer-action") {
         errorMessage = "defer() is not supported in actions";
-      } else {
-        errorMessage = "Cannot submit binary form data using GET";
       }
     } else if (status === 403) {
       statusText = "Forbidden";