@remix-run/router: Add support for navigation blocking

.changeset/light-phones-impress.md

@@ -0,0 +1,5 @@
+---
+"@remix-run/router": minor
+---
+
+Added support for navigation blocking APIs

.gitignore

@@ -22,4 +22,5 @@ node_modules/
 /packages/react-router-dom-v5-compat/react-router-dom
 
 .eslintcache
-/.env
+/.env
+/NOTES.md

examples/data-router/src/routes.tsx

@@ -17,6 +17,8 @@ import {
   useRouteError,
   json,
   useActionData,
+  useBlocker,
+  usePrompt,
 } from "react-router-dom";
 
 import type { Todos } from "./todos";
@@ -92,10 +94,37 @@ export async function homeLoader(): Promise<HomeLoaderData> {
 
 export function Home() {
   let data = useLoaderData() as HomeLoaderData;
+  let [shouldBlockNavigation, setShouldBlockNavigation] = React.useState(false);
+
+  let blocker = useBlocker(shouldBlockNavigation);
+  // usePrompt(
+  //   shouldBlockNavigation ? "Are you *really* sure you want to leave?" : null,
+  //   { beforeUnload: true }
+  // );
+
   return (
     <>
       <h2>Home</h2>
       <p>Last loaded at: {data.date}</p>
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            checked={shouldBlockNavigation}
+            onChange={(e) => setShouldBlockNavigation(e.target.checked)}
+          />
+          Block navigation
+        </label>
+        {blocker.state === "blocked" ? (
+          <div>
+            <p>Navigation is blocked.</p>
+            <button onClick={blocker.proceed}>Proceed</button>
+            <button onClick={blocker.reset}>Reset</button>
+          </div>
+        ) : blocker.state === "proceeding" ? (
+          <p>Proceeding...</p>
+        ) : null}
+      </div>
     </>
   );
 }

packages/react-router-dom/index.tsx

@@ -25,6 +25,7 @@ import {
   UNSAFE_enhanceManualRouteObjects as enhanceManualRouteObjects,
 } from "react-router";
 import type {
+  BlockerFunction,
   BrowserHistory,
   Fetcher,
   FormEncType,
@@ -976,6 +977,95 @@ export function useFormAction(
   return createPath(path);
 }
 
+let blockerKey = "blocker-singleton";
+
+export function useBlocker(
+  shouldBlock: boolean | (() => boolean) | BlockerFunction
+) {
+  let { router } = useDataRouterContext(DataRouterHook.UseFetcher);
+
+  let blockerFunction = React.useCallback<BlockerFunction>(() => {
+    return typeof shouldBlock === "function"
+      ? shouldBlock() === true
+      : shouldBlock === true;
+  }, [shouldBlock]);
+
+  let blocker = router.getBlocker(blockerKey, blockerFunction);
+
+  // Cleanup on unmount
+  React.useEffect(() => () => router.deleteBlocker(blockerKey), [router]);
+
+  return blocker;
+}
+
+export function usePrompt(
+  message: string | null | false,
+  opts?: { beforeUnload: boolean }
+) {
+  let { beforeUnload } = opts ? opts : { beforeUnload: false };
+  let blockerFunction = React.useCallback<BlockerFunction>(() => {
+    if (!message) {
+      return false;
+    }
+
+    // Here be dragons! This is not bulletproof (at least at the moment).  If
+    // you click the back button again while the global window.confirm prompt
+    // is open, it returns `false` (telling us to "block") but then _also_
+    // processes the back button click!
+
+    // So, consider:
+    //  - you have a stack of [/a, /b, /c] and you usePrompt() on /c
+    //  - user clicks back button trying to POP /c -> /b
+    //  - prompt shows up (URL shows /b but UI shows /c)
+    //  - user clicks back button _again_ (POP /b -> /a)
+    //    - this seems to queue up internally
+    //  - we get a `false` back from window.confirm() (block!)
+    //  - so we undo the _original_ POP /c -> /b and call history.go(1) to
+    //    instead POP forward /b -> /c and we also tell our router to ignore
+    //    the next history update
+    //  - and then it seems that the queued history trumps our history revert,
+    //    and so we receive the popstate event for the POP /b -> /a and then
+    //    we ignore it thinking it was our revert of POP /b -> /c
+    //
+    //  I think the solution here is to track more thn a boolean
+    //  ignoreNextHistoryUpdate and instead track the key we're reverting from
+    //  and the delta and compare that to any incoming popstate events.
+    return !window.confirm(message);
+  }, [message]);
+
+  let blocker = useBlocker(blockerFunction);
+
+  let prevState = React.useRef(blocker.state);
+  React.useEffect(() => {
+    if (blocker.state === "blocked") {
+      blocker.reset();
+    }
+    prevState.current = blocker.state;
+  }, [blocker]);
+
+  // User is leaving the domain or refreshing the page. Here we have to rely on
+  // the `beforeunload` which is opt-in. Modern browsers will not display the
+  // custom message but will still block navigation when evt.returnValue is
+  // assigned.
+  React.useEffect(() => {
+    if (!beforeUnload) return;
+    let handleBeforeUnload = (evt: BeforeUnloadEvent) => {
+      if (blockerFunction()) {
+        evt.returnValue = message;
+        return message;
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload, {
+      capture: true,
+    });
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload, {
+        capture: true,
+      });
+    };
+  }, [blocker, message, beforeUnload, blockerFunction]);
+}
+
 function createFetcherForm(fetcherKey: string, routeId: string) {
   let FetcherForm = React.forwardRef<HTMLFormElement, FormProps>(
     (props, ref) => {

packages/react-router-dom/server.tsx

@@ -267,6 +267,7 @@ export function createStaticRouter(
         preventScrollReset: false,
         revalidation: "idle" as RevalidationState,
         fetchers: new Map(),
+        blockers: new Map(),
       };
     },
     get routes() {
@@ -301,6 +302,12 @@ export function createStaticRouter(
     dispose() {
       throw msg("dispose");
     },
+    getBlocker() {
+      throw msg("getBlocker");
+    },
+    deleteBlocker() {
+      throw msg("deleteBlocker");
+    },
     _internalFetchControllers: new Map(),
     _internalActiveDeferreds: new Map(),
   };

packages/router/__tests__/TestSequences/GoBack.ts

@@ -31,6 +31,7 @@ export default async function GoBack(history: History) {
   });
   expect(spy).toHaveBeenCalledWith({
     action: "POP",
+    delta: expect.any(Number),
     location: {
       hash: "",
       key: expect.any(String),

packages/router/__tests__/TestSequences/GoForward.ts

@@ -31,6 +31,7 @@ export default async function GoForward(history: History) {
   });
   expect(spy).toHaveBeenCalledWith({
     action: "POP",
+    delta: expect.any(Number),
     location: {
       hash: "",
       key: expect.any(String),
@@ -58,6 +59,7 @@ export default async function GoForward(history: History) {
   });
   expect(spy).toHaveBeenCalledWith({
     action: "POP",
+    delta: expect.any(Number),
     location: {
       hash: "",
       key: expect.any(String),