@remix-run/router 1.3.0-pre.1 → 1.3.0-pre.2

package/dist/router.umd.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.3.0-pre.1
+ * @remix-run/router v1.3.0-pre.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -139,7 +139,8 @@
         if (v5Compat && listener) {
           listener({
             action,
-            location: nextLocation
+            location: nextLocation,
+            delta: 1
           });
         }
       },
@@ -152,19 +153,23 @@
         if (v5Compat && listener) {
           listener({
             action,
-            location: nextLocation
+            location: nextLocation,
+            delta: 0
           });
         }
       },
 
       go(delta) {
         action = exports.Action.Pop;
-        index = clampIndex(index + delta);
+        let nextIndex = clampIndex(index + delta);
+        let nextLocation = entries[nextIndex];
+        index = nextIndex;
 
         if (listener) {
           listener({
             action,
-            location: getCurrentLocation()
+            location: nextLocation,
+            delta
           });
         }
       },
@@ -323,10 +328,11 @@
    */
 
 
-  function getHistoryState(location) {
+  function getHistoryState(location, index) {
     return {
       usr: location.state,
-      key: location.key
+      key: location.key,
+      idx: index
     };
   }
   /**
@@ -410,15 +416,45 @@
     let globalHistory = window.history;
     let action = exports.Action.Pop;
     let listener = null;
+    let index = getIndex(); // Index should only be null when we initialize. If not, it's because the
+    // user called history.pushState or history.replaceState directly, in which
+    // case we should log a warning as it will result in bugs.
+
+    if (index == null) {
+      index = 0;
+      globalHistory.replaceState(_extends({}, globalHistory.state, {
+        idx: index
+      }), "");
+    }
+
+    function getIndex() {
+      let state = globalHistory.state || {
+        idx: null
+      };
+      return state.idx;
+    }
 
     function handlePop() {
-      action = exports.Action.Pop;
+      let nextAction = exports.Action.Pop;
+      let nextIndex = getIndex();
 
-      if (listener) {
-        listener({
-          action,
-          location: history.location
-        });
+      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.");
       }
     }
 
@@ -426,7 +462,8 @@
       action = exports.Action.Push;
       let location = createLocation(history.location, to, state);
       if (validateLocation) validateLocation(location, to);
-      let historyState = getHistoryState(location);
+      index = getIndex() + 1;
+      let historyState = getHistoryState(location, index);
       let url = history.createHref(location); // try...catch because iOS limits us to 100 pushState calls :/
 
       try {
@@ -440,7 +477,8 @@
       if (v5Compat && listener) {
         listener({
           action,
-          location: history.location
+          location: history.location,
+          delta: 1
         });
       }
     }
@@ -449,14 +487,16 @@
       action = exports.Action.Replace;
       let location = createLocation(history.location, to, state);
       if (validateLocation) validateLocation(location, to);
-      let historyState = getHistoryState(location);
+      index = getIndex();
+      let historyState = getHistoryState(location, index);
       let url = history.createHref(location);
       globalHistory.replaceState(historyState, "", url);
 
       if (v5Compat && listener) {
         listener({
           action,
-          location: history.location
+          location: history.location,
+          delta: 0
         });
       }
     }
@@ -992,7 +1032,7 @@
       if (typeof console !== "undefined") console.warn(message);
 
       try {
-        // Welcome to debugging React Router!
+        // Welcome to debugging @remix-run/router!
         //
         // This error is thrown as a convenience so you can more easily
         // find the source for a warning that appears in the console by
@@ -1435,6 +1475,12 @@
     formEncType: undefined,
     formData: undefined
   };
+  const IDLE_BLOCKER = {
+    state: "unblocked",
+    proceed: undefined,
+    reset: undefined,
+    location: undefined
+  };
   const isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
   const isServer = !isBrowser; //#endregion
   ////////////////////////////////////////////////////////////////////////////////
@@ -1499,7 +1545,8 @@
       loaderData: init.hydrationData && init.hydrationData.loaderData || {},
       actionData: init.hydrationData && init.hydrationData.actionData || null,
       errors: init.hydrationData && init.hydrationData.errors || initialErrors,
-      fetchers: new Map()
+      fetchers: new Map(),
+      blockers: new Map()
     }; // -- Stateful internal variables to manage navigations --
     // Current navigation in progress (to be committed in completeNavigation)
 
@@ -1541,7 +1588,16 @@
     // promise resolves we update loaderData.  If a new navigation starts we
     // cancel active deferreds for eliminated routes.
 
-    let activeDeferreds = new Map(); // Initialize the router, all side effects should be kicked off from here.
+    let activeDeferreds = new Map(); // We ony support a single active blocker at the moment since we don't have
+    // any compelling use cases for multi-blocker yet
+
+    let activeBlocker = null; // Store blocker functions in a separate Map outside of router state since
+    // we don't need to update UI state if they change
+
+    let blockerFunctions = 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 ignoreNextHistoryUpdate = false; // Initialize the router, all side effects should be kicked off from here.
     // Implemented as a Fluent API for ease of:
     //   let router = createRouter(init).initialize();
 
@@ -1551,8 +1607,54 @@
       unlistenHistory = init.history.listen(_ref => {
         let {
           action: historyAction,
-          location
+          location,
+          delta
         } = _ref;
+
+        // Ignore this event if it was just us resetting the URL from a
+        // blocked POP navigation
+        if (ignoreNextHistoryUpdate) {
+          ignoreNextHistoryUpdate = false;
+          return;
+        }
+
+        let blockerKey = shouldBlockNavigation({
+          currentLocation: state.location,
+          nextLocation: location,
+          historyAction
+        });
+
+        if (blockerKey) {
+          // 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
+
+          updateBlocker(blockerKey, {
+            state: "blocked",
+            location,
+
+            proceed() {
+              updateBlocker(blockerKey, {
+                state: "proceeding",
+                proceed: undefined,
+                reset: undefined,
+                location
+              }); // Re-do the same POP navigation we just blocked
+
+              init.history.go(delta);
+            },
+
+            reset() {
+              deleteBlocker(blockerKey);
+              updateState({
+                blockers: new Map(router.state.blockers)
+              });
+            }
+
+          });
+          return;
+        }
+
         return startNavigation(historyAction, location);
       }); // Kick off initial data load if needed.  Use Pop to avoid modifying history
 
@@ -1572,6 +1674,7 @@
       subscribers.clear();
       pendingNavigationController && pendingNavigationController.abort();
       state.fetchers.forEach((_, key) => deleteFetcher(key));
+      state.blockers.forEach((_, key) => deleteBlocker(key));
     } // Subscribe to state updates for the router
 
 
@@ -1618,9 +1721,15 @@
       } // Always preserve any existing loaderData from re-used routes
 
 
-      let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData; // Always respect the user flag.  Otherwise don't reset on mutation
+      let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData; // On a successful navigation we can assume we got through all blockers
+      // so we can start fresh
+
+      for (let [key] of blockerFunctions) {
+        deleteBlocker(key);
+      } // 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;
       updateState(_extends({}, newState, {
         // matches, errors, fetchers go through as-is
@@ -1632,7 +1741,8 @@
         navigation: IDLE_NAVIGATION,
         revalidation: "idle",
         restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
-        preventScrollReset
+        preventScrollReset,
+        blockers: new Map(state.blockers)
       }));
 
       if (isUninterruptedRevalidation) ; else if (pendingAction === exports.Action.Pop) ; else if (pendingAction === exports.Action.Push) {
@@ -1663,13 +1773,14 @@
         submission,
         error
       } = normalizeNavigateOptions(to, opts);
-      let location = createLocation(state.location, path, opts && opts.state); // When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
+      let currentLocation = state.location;
+      let nextLocation = createLocation(state.location, path, opts && opts.state); // When using navigate as a PUSH/REPLACE we aren't reading an already-encoded
       // URL from window.location, so we need to encode it here so the behavior
       // remains the same as POP and non-data-router usages.  new URL() does all
       // the same encoding we'd get from a history.pushState/window.location read
       // without having to touch history
 
-      location = _extends({}, location, init.history.encodeLocation(location));
+      nextLocation = _extends({}, nextLocation, init.history.encodeLocation(nextLocation));
       let userReplace = opts && opts.replace != null ? opts.replace : undefined;
       let historyAction = exports.Action.Push;
 
@@ -1684,7 +1795,41 @@
       }
 
       let preventScrollReset = opts && "preventScrollReset" in opts ? opts.preventScrollReset === true : undefined;
-      return await startNavigation(historyAction, location, {
+      let blockerKey = shouldBlockNavigation({
+        currentLocation,
+        nextLocation,
+        historyAction
+      });
+
+      if (blockerKey) {
+        // Put the blocker into a blocked state
+        updateBlocker(blockerKey, {
+          state: "blocked",
+          location: nextLocation,
+
+          proceed() {
+            updateBlocker(blockerKey, {
+              state: "proceeding",
+              proceed: undefined,
+              reset: undefined,
+              location: nextLocation
+            }); // Send the same navigation through
+
+            navigate(to, opts);
+          },
+
+          reset() {
+            deleteBlocker(blockerKey);
+            updateState({
+              blockers: new Map(state.blockers)
+            });
+          }
+
+        });
+        return;
+      }
+
+      return await startNavigation(historyAction, nextLocation, {
         submission,
         // Send through the formData serialization error if we have one so we can
         // render at the right error boundary after we match routes
@@ -2592,6 +2737,78 @@
       return yeetedKeys.length > 0;
     }
 
+    function getBlocker(key, fn) {
+      let blocker = state.blockers.get(key) || IDLE_BLOCKER;
+
+      if (blockerFunctions.get(key) !== fn) {
+        blockerFunctions.set(key, fn);
+
+        if (activeBlocker == null) {
+          // This is now the active blocker
+          activeBlocker = key;
+        } else if (key !== activeBlocker) {
+          warning(false, "A router only supports one blocker at a time");
+        }
+      }
+
+      return blocker;
+    }
+
+    function deleteBlocker(key) {
+      state.blockers.delete(key);
+      blockerFunctions.delete(key);
+
+      if (activeBlocker === key) {
+        activeBlocker = null;
+      }
+    } // Utility function to update blockers, ensuring valid state transitions
+
+
+    function updateBlocker(key, newBlocker) {
+      let blocker = state.blockers.get(key) || IDLE_BLOCKER; // 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);
+      updateState({
+        blockers: new Map(state.blockers)
+      });
+    }
+
+    function shouldBlockNavigation(_ref10) {
+      let {
+        currentLocation,
+        nextLocation,
+        historyAction
+      } = _ref10;
+
+      if (activeBlocker == null) {
+        return;
+      } // We only allow a single blocker at the moment.  This will need to be
+      // updated if we enhance to support multiple blockers in the future
+
+
+      let blockerFunction = blockerFunctions.get(activeBlocker);
+      invariant(blockerFunction, "Could not find a function for the active blocker");
+      let blocker = state.blockers.get(activeBlocker);
+
+      if (blocker && blocker.state === "proceeding") {
+        // If the blocker is currently proceeding, we don't need to re-check
+        // it and can let this navigation continue
+        return;
+      } // At this point, we know we're unblocked/blocked so we need to check the
+      // user-provided blocker function
+
+
+      if (blockerFunction({
+        currentLocation,
+        nextLocation,
+        historyAction
+      })) {
+        return activeBlocker;
+      }
+    }
+
     function cancelActiveDeferreds(predicate) {
       let cancelledRouteIds = [];
       activeDeferreds.forEach((dfd, routeId) => {
@@ -2684,6 +2901,8 @@
       getFetcher,
       deleteFetcher,
       dispose,
+      getBlocker,
+      deleteBlocker,
       _internalFetchControllers: fetchControllers,
       _internalActiveDeferreds: activeDeferreds
     };
@@ -3204,8 +3423,8 @@
     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 revalidatingFetchers = [];
-    fetchLoadMatches && fetchLoadMatches.forEach((_ref10, key) => {
-      let [href, match, fetchMatches] = _ref10;
+    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)) {
@@ -3807,6 +4026,7 @@
 
   exports.AbortedDeferredError = AbortedDeferredError;
   exports.ErrorResponse = ErrorResponse;
+  exports.IDLE_BLOCKER = IDLE_BLOCKER;
   exports.IDLE_FETCHER = IDLE_FETCHER;
   exports.IDLE_NAVIGATION = IDLE_NAVIGATION;
   exports.UNSAFE_DEFERRED_SYMBOL = UNSAFE_DEFERRED_SYMBOL;