@remix-run/router 1.6.3 → 1.7.0

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.6.3
+ * @remix-run/router v1.7.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -569,6 +569,7 @@
    * In v7, active navigation/fetcher form methods are exposed in uppercase on the
    * RouterState.  This is to align with the normalization done via fetch().
    */
+  // Thanks https://github.com/sindresorhus/type-fest!
   /**
    * @private
    * Internal interface to pass around for action submissions, not intended for
@@ -926,28 +927,22 @@
 
     // ensure `/` is added at the beginning if the path is absolute
     const prefix = path.startsWith("/") ? "/" : "";
+    const stringify = p => p == null ? "" : typeof p === "string" ? p : String(p);
     const segments = path.split(/\/+/).map((segment, index, array) => {
       const isLastSegment = index === array.length - 1;
 
       // only apply the splat if it's the last segment
       if (isLastSegment && segment === "*") {
         const star = "*";
-        const starParam = params[star];
-
         // Apply the splat
-        return starParam;
+        return stringify(params[star]);
       }
       const keyMatch = segment.match(/^:(\w+)(\??)$/);
       if (keyMatch) {
         const [, key, optional] = keyMatch;
         let param = params[key];
-        if (optional === "?") {
-          return param == null ? "" : param;
-        }
-        if (param == null) {
-          invariant(false, "Missing \":" + key + "\" param");
-        }
-        return param;
+        invariant(optional === "?" || param != null, "Missing \":" + key + "\" param");
+        return stringify(param);
       }
 
       // Remove any optional markers from optional static segments
@@ -1475,14 +1470,23 @@
   /**
    * Function signature for determining the current scroll position
    */
+  // Allowed for any navigation or fetch
+  // Only allowed for navigations
+  // Only allowed for submission navigations
   /**
-   * Options for a navigate() call for a Link navigation
+   * Options for a navigate() call for a normal (non-submission) navigation
    */
   /**
-   * Options for a navigate() call for a Form navigation
+   * Options for a navigate() call for a submission navigation
    */
   /**
-   * Options to pass to navigate() for either a Link or Form navigation
+   * Options to pass to navigate() for a navigation
+   */
+  /**
+   * Options for a fetch() load
+   */
+  /**
+   * Options for a fetch() submission
    */
   /**
    * Options to pass to fetch()
@@ -1517,7 +1521,9 @@
     formMethod: undefined,
     formAction: undefined,
     formEncType: undefined,
-    formData: undefined
+    formData: undefined,
+    json: undefined,
+    text: undefined
   };
   const IDLE_FETCHER = {
     state: "idle",
@@ -1525,7 +1531,9 @@
     formMethod: undefined,
     formAction: undefined,
     formEncType: undefined,
-    formData: undefined
+    formData: undefined,
+    json: undefined,
+    text: undefined
   };
   const IDLE_BLOCKER = {
     state: "unblocked",
@@ -1741,9 +1749,10 @@
               init.history.go(delta);
             },
             reset() {
-              deleteBlocker(blockerKey);
+              let blockers = new Map(state.blockers);
+              blockers.set(blockerKey, IDLE_BLOCKER);
               updateState({
-                blockers: new Map(router.state.blockers)
+                blockers
               });
             }
           });
@@ -1820,9 +1829,8 @@
 
       // On a successful navigation we can assume we got through all blockers
       // so we can start fresh
-      for (let [key] of blockerFunctions) {
-        deleteBlocker(key);
-      }
+      let blockers = new Map();
+      blockerFunctions.clear();
 
       // Always respect the user flag.  Otherwise don't reset on mutation
       // submission navigations unless they redirect
@@ -1831,6 +1839,11 @@
         dataRoutes = inFlightDataRoutes;
         inFlightDataRoutes = undefined;
       }
+      if (isUninterruptedRevalidation) ; else if (pendingAction === exports.Action.Pop) ; else if (pendingAction === exports.Action.Push) {
+        init.history.push(location, location.state);
+      } else if (pendingAction === exports.Action.Replace) {
+        init.history.replace(location, location.state);
+      }
       updateState(_extends({}, newState, {
         // matches, errors, fetchers go through as-is
         actionData,
@@ -1842,13 +1855,8 @@
         revalidation: "idle",
         restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
         preventScrollReset,
-        blockers: new Map(state.blockers)
+        blockers
       }));
-      if (isUninterruptedRevalidation) ; else if (pendingAction === exports.Action.Pop) ; else if (pendingAction === exports.Action.Push) {
-        init.history.push(location, location.state);
-      } else if (pendingAction === exports.Action.Replace) {
-        init.history.replace(location, location.state);
-      }
 
       // Reset stateful navigation vars
       pendingAction = exports.Action.Pop;
@@ -1914,9 +1922,10 @@
             navigate(to, opts);
           },
           reset() {
-            deleteBlocker(blockerKey);
+            let blockers = new Map(state.blockers);
+            blockers.set(blockerKey, IDLE_BLOCKER);
             updateState({
-              blockers: new Map(state.blockers)
+              blockers
             });
           }
         });
@@ -2042,11 +2051,7 @@
         }
         pendingActionData = actionOutput.pendingActionData;
         pendingError = actionOutput.pendingActionError;
-        let navigation = _extends({
-          state: "loading",
-          location
-        }, opts.submission);
-        loadingNavigation = navigation;
+        loadingNavigation = getLoadingNavigation(location, opts.submission);
 
         // Create a GET request for the loaders
         request = new Request(request.url, {
@@ -2081,13 +2086,13 @@
     // Call the action matched by the leaf route for this navigation and handle
     // redirects/errors
     async function handleAction(request, location, submission, matches, opts) {
+      if (opts === void 0) {
+        opts = {};
+      }
       interruptActiveLoads();
 
       // Put us in a submitting state
-      let navigation = _extends({
-        state: "submitting",
-        location
-      }, submission);
+      let navigation = getSubmittingNavigation(location, submission);
       updateState({
         navigation
       });
@@ -2166,29 +2171,13 @@
     // errors, etc.
     async function handleLoaders(request, location, matches, overrideNavigation, submission, fetcherSubmission, replace, pendingActionData, pendingError) {
       // Figure out the right navigation we want to use for data loading
-      let loadingNavigation = overrideNavigation;
-      if (!loadingNavigation) {
-        let navigation = _extends({
-          state: "loading",
-          location,
-          formMethod: undefined,
-          formAction: undefined,
-          formEncType: undefined,
-          formData: undefined
-        }, submission);
-        loadingNavigation = navigation;
-      }
+      let loadingNavigation = overrideNavigation || getLoadingNavigation(location, submission);
 
       // If this was a redirect from an action we don't have a "submission" but
       // we have it on the loading navigation so use that if available
-      let activeSubmission = submission || fetcherSubmission ? submission || fetcherSubmission : loadingNavigation.formMethod && loadingNavigation.formAction && loadingNavigation.formData && loadingNavigation.formEncType ? {
-        formMethod: loadingNavigation.formMethod,
-        formAction: loadingNavigation.formAction,
-        formData: loadingNavigation.formData,
-        formEncType: loadingNavigation.formEncType
-      } : undefined;
+      let activeSubmission = submission || fetcherSubmission || getSubmissionFromNavigation(loadingNavigation);
       let routesToUse = inFlightDataRoutes || dataRoutes;
-      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, routesToUse, basename, pendingActionData, pendingError);
+      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, activeSubmission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError);
 
       // Cancel pending deferreds for no-longer-matched routes or routes we're
       // about to reload.  Note that if this is an action reload we would have
@@ -2220,15 +2209,7 @@
       if (!isUninterruptedRevalidation) {
         revalidatingFetchers.forEach(rf => {
           let fetcher = state.fetchers.get(rf.key);
-          let revalidatingFetcher = {
-            state: "loading",
-            data: fetcher && fetcher.data,
-            formMethod: undefined,
-            formAction: undefined,
-            formEncType: undefined,
-            formData: undefined,
-            " _hasFetcherDoneAnything ": true
-          };
+          let revalidatingFetcher = getLoadingFetcher(undefined, fetcher ? fetcher.data : undefined);
           state.fetchers.set(rf.key, revalidatingFetcher);
         });
         let actionData = pendingActionData || state.actionData;
@@ -2244,6 +2225,9 @@
       }
       pendingNavigationLoadId = ++incrementingLoadId;
       revalidatingFetchers.forEach(rf => {
+        if (fetchControllers.has(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
@@ -2335,8 +2319,13 @@
       }
       let {
         path,
-        submission
+        submission,
+        error
       } = normalizeNavigateOptions(future.v7_normalizeFormMethod, true, normalizedPath, opts);
+      if (error) {
+        setFetcherError(key, routeId, error);
+        return;
+      }
       let match = getTargetMatch(matches, path);
       pendingPreventScrollReset = (opts && opts.preventScrollReset) === true;
       if (submission && isMutationMethod(submission.formMethod)) {
@@ -2370,12 +2359,7 @@
 
       // Put this fetcher into it's submitting state
       let existingFetcher = state.fetchers.get(key);
-      let fetcher = _extends({
-        state: "submitting"
-      }, submission, {
-        data: existingFetcher && existingFetcher.data,
-        " _hasFetcherDoneAnything ": true
-      });
+      let fetcher = getSubmittingFetcher(submission, existingFetcher);
       state.fetchers.set(key, fetcher);
       updateState({
         fetchers: new Map(state.fetchers)
@@ -2397,12 +2381,7 @@
       if (isRedirectResult(actionResult)) {
         fetchControllers.delete(key);
         fetchRedirectIds.add(key);
-        let loadingFetcher = _extends({
-          state: "loading"
-        }, submission, {
-          data: undefined,
-          " _hasFetcherDoneAnything ": true
-        });
+        let loadingFetcher = getLoadingFetcher(submission);
         state.fetchers.set(key, loadingFetcher);
         updateState({
           fetchers: new Map(state.fetchers)
@@ -2433,14 +2412,9 @@
       invariant(matches, "Didn't find any matches after fetcher action");
       let loadId = ++incrementingLoadId;
       fetchReloadIds.set(key, loadId);
-      let loadFetcher = _extends({
-        state: "loading",
-        data: actionResult.data
-      }, submission, {
-        " _hasFetcherDoneAnything ": true
-      });
+      let loadFetcher = getLoadingFetcher(submission, actionResult.data);
       state.fetchers.set(key, loadFetcher);
-      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, routesToUse, basename, {
+      let [matchesToLoad, revalidatingFetchers] = getMatchesToLoad(init.history, state, matches, submission, nextLocation, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, {
         [match.route.id]: actionResult.data
       }, undefined // No need to send through errors since we short circuit above
       );
@@ -2451,16 +2425,11 @@
       revalidatingFetchers.filter(rf => rf.key !== key).forEach(rf => {
         let staleKey = rf.key;
         let existingFetcher = state.fetchers.get(staleKey);
-        let revalidatingFetcher = {
-          state: "loading",
-          data: existingFetcher && existingFetcher.data,
-          formMethod: undefined,
-          formAction: undefined,
-          formEncType: undefined,
-          formData: undefined,
-          " _hasFetcherDoneAnything ": true
-        };
+        let revalidatingFetcher = getLoadingFetcher(undefined, existingFetcher ? existingFetcher.data : undefined);
         state.fetchers.set(staleKey, revalidatingFetcher);
+        if (fetchControllers.has(staleKey)) {
+          abortFetcher(staleKey);
+        }
         if (rf.controller) {
           fetchControllers.set(staleKey, rf.controller);
         }
@@ -2496,15 +2465,7 @@
       // Since we let revalidations complete even if the submitting fetcher was
       // deleted, only put it back to idle if it hasn't been deleted
       if (state.fetchers.has(key)) {
-        let doneFetcher = {
-          state: "idle",
-          data: actionResult.data,
-          formMethod: undefined,
-          formAction: undefined,
-          formEncType: undefined,
-          formData: undefined,
-          " _hasFetcherDoneAnything ": true
-        };
+        let doneFetcher = getDoneFetcher(actionResult.data);
         state.fetchers.set(key, doneFetcher);
       }
       let didAbortFetchLoads = abortStaleFetchLoads(loadId);
@@ -2539,16 +2500,7 @@
     async function handleFetcherLoader(key, routeId, path, match, matches, submission) {
       let existingFetcher = state.fetchers.get(key);
       // Put this fetcher into it's loading state
-      let loadingFetcher = _extends({
-        state: "loading",
-        formMethod: undefined,
-        formAction: undefined,
-        formEncType: undefined,
-        formData: undefined
-      }, submission, {
-        data: existingFetcher && existingFetcher.data,
-        " _hasFetcherDoneAnything ": true
-      });
+      let loadingFetcher = getLoadingFetcher(submission, existingFetcher ? existingFetcher.data : undefined);
       state.fetchers.set(key, loadingFetcher);
       updateState({
         fetchers: new Map(state.fetchers)
@@ -2602,15 +2554,7 @@
       invariant(!isDeferredResult(result), "Unhandled fetcher deferred data");
 
       // Put the fetcher back into an idle state
-      let doneFetcher = {
-        state: "idle",
-        data: result.data,
-        formMethod: undefined,
-        formAction: undefined,
-        formEncType: undefined,
-        formData: undefined,
-        " _hasFetcherDoneAnything ": true
-      };
+      let doneFetcher = getDoneFetcher(result.data);
       state.fetchers.set(key, doneFetcher);
       updateState({
         fetchers: new Map(state.fetchers)
@@ -2673,27 +2617,14 @@
 
       // Use the incoming submission if provided, fallback on the active one in
       // state.navigation
-      let {
-        formMethod,
-        formAction,
-        formEncType,
-        formData
-      } = state.navigation;
-      if (!submission && formMethod && formAction && formData && formEncType) {
-        submission = {
-          formMethod,
-          formAction,
-          formEncType,
-          formData
-        };
-      }
+      let activeSubmission = submission || getSubmissionFromNavigation(state.navigation);
 
       // If this was a 307/308 submission we want to preserve the HTTP method and
       // re-submit the GET/POST/PUT/PATCH/DELETE as a submission navigation to the
       // redirected location
-      if (redirectPreserveMethodStatusCodes.has(redirect.status) && submission && isMutationMethod(submission.formMethod)) {
+      if (redirectPreserveMethodStatusCodes.has(redirect.status) && activeSubmission && isMutationMethod(activeSubmission.formMethod)) {
         await startNavigation(redirectHistoryAction, redirectLocation, {
-          submission: _extends({}, submission, {
+          submission: _extends({}, activeSubmission, {
             formAction: redirect.location
           }),
           // Preserve this flag across redirects
@@ -2703,30 +2634,16 @@
         // For a fetch action redirect, we kick off a new loading navigation
         // without the fetcher submission, but we send it along for shouldRevalidate
         await startNavigation(redirectHistoryAction, redirectLocation, {
-          overrideNavigation: {
-            state: "loading",
-            location: redirectLocation,
-            formMethod: undefined,
-            formAction: undefined,
-            formEncType: undefined,
-            formData: undefined
-          },
-          fetcherSubmission: submission,
+          overrideNavigation: getLoadingNavigation(redirectLocation),
+          fetcherSubmission: activeSubmission,
           // Preserve this flag across redirects
           preventScrollReset: pendingPreventScrollReset
         });
       } else {
-        // Otherwise, we kick off a new loading navigation, preserving the
-        // submission info for the duration of this navigation
+        // If we have a submission, we will preserve it through the redirect navigation
+        let overrideNavigation = getLoadingNavigation(redirectLocation, activeSubmission);
         await startNavigation(redirectHistoryAction, redirectLocation, {
-          overrideNavigation: {
-            state: "loading",
-            location: redirectLocation,
-            formMethod: submission ? submission.formMethod : undefined,
-            formAction: submission ? submission.formAction : undefined,
-            formEncType: submission ? submission.formEncType : undefined,
-            formData: submission ? submission.formData : undefined
-          },
+          overrideNavigation,
           // Preserve this flag across redirects
           preventScrollReset: pendingPreventScrollReset
         });
@@ -2806,15 +2723,7 @@
     function markFetchersDone(keys) {
       for (let key of keys) {
         let fetcher = getFetcher(key);
-        let doneFetcher = {
-          state: "idle",
-          data: fetcher.data,
-          formMethod: undefined,
-          formAction: undefined,
-          formEncType: undefined,
-          formData: undefined,
-          " _hasFetcherDoneAnything ": true
-        };
+        let doneFetcher = getDoneFetcher(fetcher.data);
         state.fetchers.set(key, doneFetcher);
       }
     }
@@ -2868,9 +2777,10 @@
       // Poor mans state machine :)
       // https://mermaid.live/edit#pako:eNqVkc9OwzAMxl8l8nnjAYrEtDIOHEBIgwvKJTReGy3_lDpIqO27k6awMG0XcrLlnz87nwdonESogKXXBuE79rq75XZO3-yHds0RJVuv70YrPlUrCEe2HfrORS3rubqZfuhtpg5C9wk5tZ4VKcRUq88q9Z8RS0-48cE1iHJkL0ugbHuFLus9L6spZy8nX9MP2CNdomVaposqu3fGayT8T8-jJQwhepo_UtpgBQaDEUom04dZhAN1aJBDlUKJBxE1ceB2Smj0Mln-IBW5AFU2dwUiktt_2Qaq2dBfaKdEup85UV7Yd-dKjlnkabl2Pvr0DTkTreM
       invariant(blocker.state === "unblocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "blocked" || blocker.state === "blocked" && newBlocker.state === "proceeding" || blocker.state === "blocked" && newBlocker.state === "unblocked" || blocker.state === "proceeding" && newBlocker.state === "unblocked", "Invalid blocker state transition: " + blocker.state + " -> " + newBlocker.state);
-      state.blockers.set(key, newBlocker);
+      let blockers = new Map(state.blockers);
+      blockers.set(key, newBlocker);
       updateState({
-        blockers: new Map(state.blockers)
+        blockers
       });
     }
     function shouldBlockNavigation(_ref2) {
@@ -2927,7 +2837,7 @@
     function enableScrollRestoration(positions, getPosition, getKey) {
       savedScrollPositions = positions;
       getScrollPosition = getPosition;
-      getScrollRestorationKey = getKey || (location => location.key);
+      getScrollRestorationKey = getKey || null;
 
       // Perform initial hydration scroll restoration, since we miss the boat on
       // the initial updateState() because we've not yet rendered <ScrollRestoration/>
@@ -2947,17 +2857,22 @@
         getScrollRestorationKey = null;
       };
     }
+    function getScrollKey(location, matches) {
+      if (getScrollRestorationKey) {
+        let key = getScrollRestorationKey(location, matches.map(m => createUseMatchesMatch(m, state.loaderData)));
+        return key || location.key;
+      }
+      return location.key;
+    }
     function saveScrollPosition(location, matches) {
-      if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-        let userMatches = matches.map(m => createUseMatchesMatch(m, state.loaderData));
-        let key = getScrollRestorationKey(location, userMatches) || location.key;
+      if (savedScrollPositions && getScrollPosition) {
+        let key = getScrollKey(location, matches);
         savedScrollPositions[key] = getScrollPosition();
       }
     }
     function getSavedScrollPosition(location, matches) {
-      if (savedScrollPositions && getScrollRestorationKey && getScrollPosition) {
-        let userMatches = matches.map(m => createUseMatchesMatch(m, state.loaderData));
-        let key = getScrollRestorationKey(location, userMatches) || location.key;
+      if (savedScrollPositions) {
+        let key = getScrollKey(location, matches);
         let y = savedScrollPositions[key];
         if (typeof y === "number") {
           return y;
@@ -3240,7 +3155,11 @@
           error
         };
       } else {
-        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename, true, isRouteRequest, requestContext);
+        result = await callLoaderOrAction("action", request, actionMatch, matches, manifest, mapRouteProperties, basename, {
+          isStaticRequest: true,
+          isRouteRequest,
+          requestContext
+        });
         if (request.signal.aborted) {
           let method = isRouteRequest ? "queryRoute" : "query";
           throw new Error(method + "() call aborted");
@@ -3355,7 +3274,11 @@
           activeDeferreds: null
         };
       }
-      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, true, isRouteRequest, requestContext))]);
+      let results = await Promise.all([...matchesToLoad.map(match => callLoaderOrAction("loader", request, match, matches, manifest, mapRouteProperties, basename, {
+        isStaticRequest: true,
+        isRouteRequest,
+        requestContext
+      }))]);
       if (request.signal.aborted) {
         let method = isRouteRequest ? "queryRoute" : "query";
         throw new Error(method + "() call aborted");
@@ -3404,7 +3327,7 @@
     return newContext;
   }
   function isSubmissionNavigation(opts) {
-    return opts != null && "formData" in opts;
+    return opts != null && ("formData" in opts && opts.formData != null || "body" in opts && opts.body !== undefined);
   }
   function normalizeTo(location, matches, basename, prependBasename, to, fromRouteId, relative) {
     let contextualMatches;
@@ -3470,28 +3393,103 @@
         })
       };
     }
+    let getInvalidBodyError = () => ({
+      path,
+      error: getInternalRouterError(400, {
+        type: "invalid-body"
+      })
+    });
 
     // Create a Submission on non-GET navigations
-    let submission;
-    if (opts.formData) {
-      let formMethod = opts.formMethod || "get";
-      submission = {
-        formMethod: normalizeFormMethod ? formMethod.toUpperCase() : formMethod.toLowerCase(),
-        formAction: stripHashFromPath(path),
-        formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
-        formData: opts.formData
-      };
-      if (isMutationMethod(submission.formMethod)) {
+    let rawFormMethod = opts.formMethod || "get";
+    let formMethod = normalizeFormMethod ? rawFormMethod.toUpperCase() : rawFormMethod.toLowerCase();
+    let formAction = stripHashFromPath(path);
+    if (opts.body !== undefined) {
+      if (opts.formEncType === "text/plain") {
+        // text only support POST/PUT/PATCH/DELETE submissions
+        if (!isMutationMethod(formMethod)) {
+          return getInvalidBodyError();
+        }
+        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, _ref3) => {
+          let [name, value] = _ref3;
+          return "" + acc + name + "=" + value + "\n";
+        }, "") : String(opts.body);
         return {
           path,
-          submission
+          submission: {
+            formMethod,
+            formAction,
+            formEncType: opts.formEncType,
+            formData: undefined,
+            json: undefined,
+            text
+          }
         };
+      } else if (opts.formEncType === "application/json") {
+        // json only supports POST/PUT/PATCH/DELETE submissions
+        if (!isMutationMethod(formMethod)) {
+          return getInvalidBodyError();
+        }
+        try {
+          let json = typeof opts.body === "string" ? JSON.parse(opts.body) : opts.body;
+          return {
+            path,
+            submission: {
+              formMethod,
+              formAction,
+              formEncType: opts.formEncType,
+              formData: undefined,
+              json,
+              text: undefined
+            }
+          };
+        } catch (e) {
+          return getInvalidBodyError();
+        }
+      }
+    }
+    invariant(typeof FormData === "function", "FormData is not available in this environment");
+    let searchParams;
+    let formData;
+    if (opts.formData) {
+      searchParams = convertFormDataToSearchParams(opts.formData);
+      formData = opts.formData;
+    } else if (opts.body instanceof FormData) {
+      searchParams = convertFormDataToSearchParams(opts.body);
+      formData = opts.body;
+    } else if (opts.body instanceof URLSearchParams) {
+      searchParams = opts.body;
+      formData = convertSearchParamsToFormData(searchParams);
+    } else if (opts.body == null) {
+      searchParams = new URLSearchParams();
+      formData = new FormData();
+    } else {
+      try {
+        searchParams = new URLSearchParams(opts.body);
+        formData = convertSearchParamsToFormData(searchParams);
+      } catch (e) {
+        return getInvalidBodyError();
       }
     }
+    let submission = {
+      formMethod,
+      formAction,
+      formEncType: opts && opts.formEncType || "application/x-www-form-urlencoded",
+      formData,
+      json: undefined,
+      text: undefined
+    };
+    if (isMutationMethod(submission.formMethod)) {
+      return {
+        path,
+        submission
+      };
+    }
 
     // Flatten submission onto URLSearchParams for GET submissions
     let parsedPath = parsePath(path);
-    let searchParams = convertFormDataToSearchParams(opts.formData);
     // On GET navigation submissions we can drop the ?index param from the
     // resulting location since all loaders will run.  But fetcher GET submissions
     // only run a single loader so we need to preserve any incoming ?index params
@@ -3517,7 +3515,7 @@
     }
     return boundaryMatches;
   }
-  function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, routesToUse, basename, pendingActionData, pendingError) {
+  function getMatchesToLoad(history, state, matches, submission, location, isRevalidationRequired, cancelledDeferredRoutes, cancelledFetcherLoads, fetchLoadMatches, fetchRedirectIds, routesToUse, basename, pendingActionData, pendingError) {
     let actionResult = pendingError ? Object.values(pendingError)[0] : pendingActionData ? Object.values(pendingActionData)[0] : undefined;
     let currentUrl = history.createURL(state.location);
     let nextUrl = history.createURL(location);
@@ -3584,31 +3582,30 @@
         });
         return;
       }
-      let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
-      if (cancelledFetcherLoads.includes(key)) {
-        revalidatingFetchers.push({
-          key,
-          routeId: f.routeId,
-          path: f.path,
-          matches: fetcherMatches,
-          match: fetcherMatch,
-          controller: new AbortController()
-        });
-        return;
-      }
 
       // 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(fetcherMatch, _extends({
+      // load from a static href.  They only set `defaultShouldRevalidate` on
+      // explicit revalidation due to submission, useRevalidator, or X-Remix-Revalidate
+      //
+      // They automatically revalidate without even calling shouldRevalidate if:
+      // - They were cancelled
+      // - They're in the middle of their first load and therefore this is still
+      //   an initial load and not a revalidation
+      //
+      // If neither of those is true, then they _always_ check shouldRevalidate
+      let fetcher = state.fetchers.get(key);
+      let isPerformingInitialLoad = fetcher && fetcher.state !== "idle" && fetcher.data === undefined &&
+      // If a fetcher.load redirected then it'll be "loading" without any data
+      // so ensure we're not processing the redirect from this fetcher
+      !fetchRedirectIds.has(key);
+      let fetcherMatch = getTargetMatch(fetcherMatches, f.path);
+      let shouldRevalidate = cancelledFetcherLoads.includes(key) || isPerformingInitialLoad || shouldRevalidateLoader(fetcherMatch, _extends({
         currentUrl,
         currentParams: state.matches[state.matches.length - 1].params,
         nextUrl,
         nextParams: matches[matches.length - 1].params
       }, submission, {
         actionResult,
-        // Forced revalidation due to submission, useRevalidator, or X-Remix-Revalidate
         defaultShouldRevalidate: isRevalidationRequired
       }));
       if (shouldRevalidate) {
@@ -3710,12 +3707,9 @@
       lazy: undefined
     }));
   }
-  async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, isStaticRequest, isRouteRequest, requestContext) {
-    if (isStaticRequest === void 0) {
-      isStaticRequest = false;
-    }
-    if (isRouteRequest === void 0) {
-      isRouteRequest = false;
+  async function callLoaderOrAction(type, request, match, matches, manifest, mapRouteProperties, basename, opts) {
+    if (opts === void 0) {
+      opts = {};
     }
     let resultType;
     let result;
@@ -3729,7 +3723,7 @@
       return Promise.race([handler({
         request,
         params: match.params,
-        context: requestContext
+        context: opts.requestContext
       }), abortPromise]);
     };
     try {
@@ -3794,7 +3788,7 @@
         // Support relative routing in internal redirects
         if (!ABSOLUTE_URL_REGEX.test(location)) {
           location = normalizeTo(new URL(request.url), matches.slice(0, matches.indexOf(match) + 1), basename, true, location);
-        } else if (!isStaticRequest) {
+        } else if (!opts.isStaticRequest) {
           // Strip off the protocol+origin for same-origin + same-basename absolute
           // redirects. If this is a static request, we can let it go back to the
           // browser as-is
@@ -3810,7 +3804,7 @@
         // Instead, throw the Response and let the server handle it with an HTTP
         // redirect.  We also update the Location header in place in this flow so
         // basename and relative routing is taken into account
-        if (isStaticRequest) {
+        if (opts.isStaticRequest) {
           result.headers.set("Location", location);
           throw result;
         }
@@ -3825,7 +3819,7 @@
       // For SSR single-route requests, we want to hand Responses back directly
       // without unwrapping.  We do this with the QueryRouteResponse wrapper
       // interface so we can know whether it was returned or thrown
-      if (isRouteRequest) {
+      if (opts.isRouteRequest) {
         // eslint-disable-next-line no-throw-literal
         throw {
           type: resultType || ResultType.data,
@@ -3887,27 +3881,45 @@
     if (submission && isMutationMethod(submission.formMethod)) {
       let {
         formMethod,
-        formEncType,
-        formData
+        formEncType
       } = submission;
       // Didn't think we needed this but it turns out unlike other methods, patch
       // won't be properly normalized to uppercase and results in a 405 error.
       // See: https://fetch.spec.whatwg.org/#concept-method
       init.method = formMethod.toUpperCase();
-      init.body = formEncType === "application/x-www-form-urlencoded" ? convertFormDataToSearchParams(formData) : formData;
+      if (formEncType === "application/json") {
+        init.headers = new Headers({
+          "Content-Type": formEncType
+        });
+        init.body = JSON.stringify(submission.json);
+      } else if (formEncType === "text/plain") {
+        // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
+        init.body = submission.text;
+      } else if (formEncType === "application/x-www-form-urlencoded" && submission.formData) {
+        // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
+        init.body = convertFormDataToSearchParams(submission.formData);
+      } else {
+        // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
+        init.body = submission.formData;
+      }
     }
-
-    // Content-Type is inferred (https://fetch.spec.whatwg.org/#dom-request)
     return new Request(url, init);
   }
   function convertFormDataToSearchParams(formData) {
     let searchParams = new URLSearchParams();
     for (let [key, value] of formData.entries()) {
       // 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);
+      searchParams.append(key, typeof value === "string" ? value : value.name);
     }
     return searchParams;
   }
+  function convertSearchParamsToFormData(searchParams) {
+    let formData = new FormData();
+    for (let [key, value] of searchParams.entries()) {
+      formData.append(key, value);
+    }
+    return formData;
+  }
   function processRouteLoaderData(matches, matchesToLoad, results, pendingError, activeDeferreds) {
     // Fill in loaderData/errors from our loaders
     let loaderData = {};
@@ -4021,15 +4033,7 @@
         // in resolveDeferredResults
         invariant(false, "Unhandled fetcher deferred data");
       } else {
-        let doneFetcher = {
-          state: "idle",
-          data: result.data,
-          formMethod: undefined,
-          formAction: undefined,
-          formEncType: undefined,
-          formData: undefined,
-          " _hasFetcherDoneAnything ": true
-        };
+        let doneFetcher = getDoneFetcher(result.data);
         state.fetchers.set(key, doneFetcher);
       }
     }
@@ -4096,6 +4100,8 @@
         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 if (type === "invalid-body") {
+        errorMessage = "Unable to encode submission body";
       }
     } else if (status === 403) {
       statusText = "Forbidden";
@@ -4265,6 +4271,144 @@
     let pathMatches = getPathContributingMatches(matches);
     return pathMatches[pathMatches.length - 1];
   }
+  function getSubmissionFromNavigation(navigation) {
+    let {
+      formMethod,
+      formAction,
+      formEncType,
+      text,
+      formData,
+      json
+    } = navigation;
+    if (!formMethod || !formAction || !formEncType) {
+      return;
+    }
+    if (text != null) {
+      return {
+        formMethod,
+        formAction,
+        formEncType,
+        formData: undefined,
+        json: undefined,
+        text
+      };
+    } else if (formData != null) {
+      return {
+        formMethod,
+        formAction,
+        formEncType,
+        formData,
+        json: undefined,
+        text: undefined
+      };
+    } else if (json !== undefined) {
+      return {
+        formMethod,
+        formAction,
+        formEncType,
+        formData: undefined,
+        json,
+        text: undefined
+      };
+    }
+  }
+  function getLoadingNavigation(location, submission) {
+    if (submission) {
+      let navigation = {
+        state: "loading",
+        location,
+        formMethod: submission.formMethod,
+        formAction: submission.formAction,
+        formEncType: submission.formEncType,
+        formData: submission.formData,
+        json: submission.json,
+        text: submission.text
+      };
+      return navigation;
+    } else {
+      let navigation = {
+        state: "loading",
+        location,
+        formMethod: undefined,
+        formAction: undefined,
+        formEncType: undefined,
+        formData: undefined,
+        json: undefined,
+        text: undefined
+      };
+      return navigation;
+    }
+  }
+  function getSubmittingNavigation(location, submission) {
+    let navigation = {
+      state: "submitting",
+      location,
+      formMethod: submission.formMethod,
+      formAction: submission.formAction,
+      formEncType: submission.formEncType,
+      formData: submission.formData,
+      json: submission.json,
+      text: submission.text
+    };
+    return navigation;
+  }
+  function getLoadingFetcher(submission, data) {
+    if (submission) {
+      let fetcher = {
+        state: "loading",
+        formMethod: submission.formMethod,
+        formAction: submission.formAction,
+        formEncType: submission.formEncType,
+        formData: submission.formData,
+        json: submission.json,
+        text: submission.text,
+        data,
+        " _hasFetcherDoneAnything ": true
+      };
+      return fetcher;
+    } else {
+      let fetcher = {
+        state: "loading",
+        formMethod: undefined,
+        formAction: undefined,
+        formEncType: undefined,
+        formData: undefined,
+        json: undefined,
+        text: undefined,
+        data,
+        " _hasFetcherDoneAnything ": true
+      };
+      return fetcher;
+    }
+  }
+  function getSubmittingFetcher(submission, existingFetcher) {
+    let fetcher = {
+      state: "submitting",
+      formMethod: submission.formMethod,
+      formAction: submission.formAction,
+      formEncType: submission.formEncType,
+      formData: submission.formData,
+      json: submission.json,
+      text: submission.text,
+      data: existingFetcher ? existingFetcher.data : undefined,
+      " _hasFetcherDoneAnything ": true
+    };
+    return fetcher;
+  }
+  function getDoneFetcher(data) {
+    let fetcher = {
+      state: "idle",
+      formMethod: undefined,
+      formAction: undefined,
+      formEncType: undefined,
+      formData: undefined,
+      json: undefined,
+      text: undefined,
+      data,
+      " _hasFetcherDoneAnything ": true
+    };
+    return fetcher;
+  }
   //#endregion
 
   exports.AbortedDeferredError = AbortedDeferredError;