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

package/dist/router.d.ts

@@ -64,13 +64,13 @@ export interface Router {
      * Navigate forward/backward in the history stack
      * @param to Delta to move in the history stack
      */
-    navigate(to: number): void;
+    navigate(to: number): Promise<void>;
     /**
      * Navigate to the given path
      * @param to Path to navigate to
      * @param opts Navigation options (method, submission, etc.)
      */
-    navigate(to: To, opts?: RouterNavigateOptions): void;
+    navigate(to: To, opts?: RouterNavigateOptions): Promise<void>;
     /**
      * @internal
      * PRIVATE - DO NOT USE
@@ -130,6 +130,23 @@ export interface Router {
      * Cleanup listeners and abort any in-progress loads
      */
     dispose(): void;
+    /**
+     * @internal
+     * PRIVATE - DO NOT USE
+     *
+     * Get a navigation blocker
+     * @param key The identifier for the blocker
+     * @param fn The blocker function implementation
+     */
+    getBlocker(key: string, fn: BlockerFunction): Blocker;
+    /**
+     * @internal
+     * PRIVATE - DO NOT USE
+     *
+     * Delete a navigation blocker
+     * @param key The identifier for the blocker
+     */
+    deleteBlocker(key: string): void;
     /**
      * @internal
      * PRIVATE - DO NOT USE
@@ -202,6 +219,10 @@ export interface RouterState {
      * Map of current fetchers
      */
     fetchers: Map<string, Fetcher>;
+    /**
+     * Map of current blockers
+     */
+    blockers: Map<string, Blocker>;
 }
 /**
  * Data that can be passed into hydrate a Router from SSR
@@ -285,6 +306,7 @@ declare type LinkNavigateOptions = {
 declare type SubmissionNavigateOptions = {
     replace?: boolean;
     state?: any;
+    preventScrollReset?: boolean;
     formMethod?: FormMethod;
     formEncType?: FormEncType;
     formData: FormData;
@@ -361,8 +383,33 @@ declare type FetcherStates<TData = any> = {
     };
 };
 export declare type Fetcher<TData = any> = FetcherStates<TData>[keyof FetcherStates<TData>];
+interface BlockerBlocked {
+    state: "blocked";
+    reset(): void;
+    proceed(): void;
+    location: Location;
+}
+interface BlockerUnblocked {
+    state: "unblocked";
+    reset: undefined;
+    proceed: undefined;
+    location: undefined;
+}
+interface BlockerProceeding {
+    state: "proceeding";
+    reset: undefined;
+    proceed: undefined;
+    location: Location;
+}
+export declare type Blocker = BlockerUnblocked | BlockerBlocked | BlockerProceeding;
+export declare type BlockerFunction = (args: {
+    currentLocation: Location;
+    nextLocation: Location;
+    historyAction: HistoryAction;
+}) => boolean;
 export declare const IDLE_NAVIGATION: NavigationStates["Idle"];
 export declare const IDLE_FETCHER: FetcherStates["Idle"];
+export declare const IDLE_BLOCKER: BlockerUnblocked;
 /**
  * Create a router and listen to history POP navigations
  */

package/dist/router.js

@@ -1,5 +1,5 @@
 /**
- * @remix-run/router v1.3.0-pre.0
+ * @remix-run/router v1.3.0-pre.2
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -140,7 +140,8 @@ function createMemoryHistory(options) {
       if (v5Compat && listener) {
         listener({
           action,
-          location: nextLocation
+          location: nextLocation,
+          delta: 1
         });
       }
     },
@@ -153,19 +154,23 @@ function createMemoryHistory(options) {
       if (v5Compat && listener) {
         listener({
           action,
-          location: nextLocation
+          location: nextLocation,
+          delta: 0
         });
       }
     },
 
     go(delta) {
       action = 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
         });
       }
     },
@@ -290,10 +295,11 @@ function createKey() {
  */
 
 
-function getHistoryState(location) {
+function getHistoryState(location, index) {
   return {
     usr: location.state,
-    key: location.key
+    key: location.key,
+    idx: index
   };
 }
 /**
@@ -377,15 +383,45 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
   let globalHistory = window.history;
   let action = 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 = Action.Pop;
+    let nextAction = 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.");
     }
   }
 
@@ -393,7 +429,8 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
     action = 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 {
@@ -407,7 +444,8 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
     if (v5Compat && listener) {
       listener({
         action,
-        location: history.location
+        location: history.location,
+        delta: 1
       });
     }
   }
@@ -416,14 +454,16 @@ function getUrlBasedHistory(getLocation, createHref, validateLocation, options)
     action = 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
       });
     }
   }
@@ -949,7 +989,7 @@ function warning(cond, message) {
     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
@@ -1385,6 +1425,12 @@ const IDLE_FETCHER = {
   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
 ////////////////////////////////////////////////////////////////////////////////
@@ -1449,7 +1495,8 @@ function createRouter(init) {
     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)
 
@@ -1491,7 +1538,16 @@ function createRouter(init) {
   // 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();
 
@@ -1501,8 +1557,54 @@ function createRouter(init) {
     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
 
@@ -1522,6 +1624,7 @@ function createRouter(init) {
     subscribers.clear();
     pendingNavigationController && pendingNavigationController.abort();
     state.fetchers.forEach((_, key) => deleteFetcher(key));
+    state.blockers.forEach((_, key) => deleteBlocker(key));
   } // Subscribe to state updates for the router
 
 
@@ -1542,7 +1645,7 @@ function createRouter(init) {
 
 
   function completeNavigation(location, newState) {
-    var _location$state;
+    var _location$state, _location$state2;
 
     // Deduce if we're in a loading/actionReload state:
     // - We have committed actionData in the store
@@ -1568,7 +1671,16 @@ function createRouter(init) {
     } // Always preserve any existing loaderData from re-used routes
 
 
-    let loaderData = newState.loaderData ? mergeLoaderData(state.loaderData, newState.loaderData, newState.matches || [], newState.errors) : state.loaderData;
+    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, {
       actionData,
       loaderData,
@@ -1577,9 +1689,9 @@ function createRouter(init) {
       initialized: true,
       navigation: IDLE_NAVIGATION,
       revalidation: "idle",
-      // Don't restore on submission navigations
-      restoreScrollPosition: state.navigation.formData ? false : getSavedScrollPosition(location, newState.matches || state.matches),
-      preventScrollReset: pendingPreventScrollReset
+      restoreScrollPosition: getSavedScrollPosition(location, newState.matches || state.matches),
+      preventScrollReset,
+      blockers: new Map(state.blockers)
     }));
 
     if (isUninterruptedRevalidation) ; else if (pendingAction === Action.Pop) ; else if (pendingAction === Action.Push) {
@@ -1610,13 +1722,14 @@ function createRouter(init) {
       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 = Action.Push;
 
@@ -1631,7 +1744,41 @@ function createRouter(init) {
     }
 
     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
@@ -2403,7 +2550,9 @@ function createRouter(init) {
       await startNavigation(redirectHistoryAction, redirectLocation, {
         submission: _extends({}, submission, {
           formAction: redirect.location
-        })
+        }),
+        // Preserve this flag across redirects
+        preventScrollReset: pendingPreventScrollReset
       });
     } else {
       // Otherwise, we kick off a new loading navigation, preserving the
@@ -2416,7 +2565,9 @@ function createRouter(init) {
           formAction: submission ? submission.formAction : undefined,
           formEncType: submission ? submission.formEncType : undefined,
           formData: submission ? submission.formData : undefined
-        }
+        },
+        // Preserve this flag across redirects
+        preventScrollReset: pendingPreventScrollReset
       });
     }
   }
@@ -2535,6 +2686,78 @@ function createRouter(init) {
     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) => {
@@ -2627,6 +2850,8 @@ function createRouter(init) {
     getFetcher,
     deleteFetcher,
     dispose,
+    getBlocker,
+    deleteBlocker,
     _internalFetchControllers: fetchControllers,
     _internalActiveDeferreds: activeDeferreds
   };
@@ -3147,8 +3372,8 @@ function getMatchesToLoad(history, state, matches, submission, location, isReval
   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)) {
@@ -3748,5 +3973,5 @@ function getTargetMatch(matches, location) {
   return pathMatches[pathMatches.length - 1];
 } //#endregion
 
-export { AbortedDeferredError, Action, ErrorResponse, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getPathContributingMatches as UNSAFE_getPathContributingMatches, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, invariant, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, resolvePath, resolveTo, stripBasename, warning };
+export { AbortedDeferredError, Action, ErrorResponse, IDLE_BLOCKER, IDLE_FETCHER, IDLE_NAVIGATION, UNSAFE_DEFERRED_SYMBOL, DeferredData as UNSAFE_DeferredData, convertRoutesToDataRoutes as UNSAFE_convertRoutesToDataRoutes, getPathContributingMatches as UNSAFE_getPathContributingMatches, createBrowserHistory, createHashHistory, createMemoryHistory, createPath, createRouter, createStaticHandler, defer, generatePath, getStaticContextFromError, getToPathname, invariant, isRouteErrorResponse, joinPaths, json, matchPath, matchRoutes, normalizePathname, parsePath, redirect, resolvePath, resolveTo, stripBasename, warning };
 //# sourceMappingURL=router.js.map