Support multiple blockers

package.json

@@ -90,11 +90,16 @@
   "size-limit": [
     {
       "path": "dist/react-router-prompt.js",
-      "limit": "5 KB"
+      "limit": "1.5 KB"
     },
     {
       "path": "dist/react-router-prompt.umd.cjs",
-      "limit": "8 KB"
+      "limit": "1.5 KB"
     }
-  ]
+  ],
+  "pnpm": {
+    "patchedDependencies": {
+      "@remix-run/[email protected]": "patches/@[email protected]"
+    }
+  }
 }

patches/@remix-run__router@1.3.2.patch

@@ -0,0 +1,57 @@
+diff --git a/dist/router.js b/dist/router.js
+index 941d7a643730c5f1e40b068aa867cfd3854d93e0..3c1addf7e13ab2a6bb6678953eb5e33d14a66a9c 100644
+--- a/dist/router.js
++++ b/dist/router.js
+@@ -2707,33 +2707,31 @@ function createRouter(init) {
+
+     if (blockerFunctions.size === 0) {
+       return;
+-    } // We ony support a single active blocker at the moment since we don't have
+-    // any compelling use cases for multi-blocker yet
+-
+-
+-    if (blockerFunctions.size > 1) {
+-      warning(false, "A router only supports one blocker at a time");
+     }
+
+     let entries = Array.from(blockerFunctions.entries());
+-    let [blockerKey, blockerFunction] = entries[entries.length - 1];
+-    let blocker = state.blockers.get(blockerKey);
+
+-    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
++    let blockingKey = undefined;
+
++    entries.some(entry => {
++      let [blockerKey, blockerFunction] = entry;
++      let blocker = state.blockers.get(blockerKey);
+
+-    if (blockerFunction({
+-      currentLocation,
+-      nextLocation,
+-      historyAction
+-    })) {
+-      return blockerKey;
+-    }
++      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 })) {
++          blockingKey = blockerKey;
++          return blockerKey;
++        }
++      })
++
++      return blockingKey;
+   }
+
+   function cancelActiveDeferreds(predicate) {

src/index.tsx

@@ -21,7 +21,7 @@ type ReactRouterPromptProps = {
  *   {({isActive, onConfirm, onCancel}) => (
  *     <Modal show={isActive}>
  *       <div>
- *         <p>Do you really want to leave?</p>
+ *         <p>Do you really want tox leave?</p>
  *         <button onClick={onCancel}>Cancel</button>
  *         <button onClick={onConfirm}>Ok</button>
  *       </div>
@@ -33,6 +33,8 @@ type ReactRouterPromptProps = {
 function ReactRouterPrompt({ when, children }: ReactRouterPromptProps) {
   const { isActive, onConfirm, resetConfirmation } = useConfirm(when)
 
+  console.log(isActive)
+
   if (isActive) {
     return (
       <div>

src/main.tsx

@@ -19,12 +19,12 @@ function Home() {
 
 function Form() {
   const [input, setInput] = useState("")
+  const [input2, setInput2] = useState("")
 
   return (
     <div>
       <h1>About</h1>
-
-      <ReactRouterPrompt when={input.length >= 1}>
+      <ReactRouterPrompt when={input.length >= 1} key={1}>
         {({ isActive, onConfirm, onCancel }) =>
           isActive && (
             <div className="lightbox">
@@ -48,6 +48,30 @@ function Form() {
         placeholder="Enter something"
       />
 
+      <input
+        onChange={(e) => setInput2(e.target.value)}
+        value={input2}
+        placeholder="Enter something"
+      />
+
+      <ReactRouterPrompt when={input2.length >= 1} key={2}>
+        {({ isActive, onConfirm, onCancel }) =>
+          isActive && (
+            <div className="lightbox">
+              <div className="container">
+                <p>Do you really want to leave?</p>
+                <button type="button" onClick={onCancel}>
+                  Cancel
+                </button>
+                <button type="submit" onClick={onConfirm}>
+                  Ok
+                </button>
+              </div>
+            </div>
+          )
+        }
+      </ReactRouterPrompt>
+
       <p>
         Typing more than 1 character in the input cause the prompt to show on
         navigation