diff --git a/package.json b/package.json index f54b478..5d62206 100644 --- a/package.json +++ b/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/router@1.3.2": "patches/@remix-run__router@1.3.2.patch" + } + } } diff --git a/patches/@remix-run__router@1.3.2.patch b/patches/@remix-run__router@1.3.2.patch new file mode 100644 index 0000000..875ece5 --- /dev/null +++ b/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) { \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a8540cc..7ed19e3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,10 @@ lockfileVersion: '6.0' +patchedDependencies: + '@remix-run/router@1.3.2': + hash: sul2q25b7yrot3fzed7bjyqr7m + path: patches/@remix-run__router@1.3.2.patch + devDependencies: '@size-limit/preset-small-lib': specifier: ^8.1.2 @@ -653,10 +658,11 @@ packages: fastq: 1.15.0 dev: true - /@remix-run/router@1.3.2: + /@remix-run/router@1.3.2(patch_hash=sul2q25b7yrot3fzed7bjyqr7m): resolution: {integrity: sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==} engines: {node: '>=14'} dev: true + patched: true /@rollup/pluginutils@5.0.2: resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} @@ -3052,7 +3058,7 @@ packages: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.3.2 + '@remix-run/router': 1.3.2(patch_hash=sul2q25b7yrot3fzed7bjyqr7m) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) react-router: 6.8.1(react@18.2.0) @@ -3064,7 +3070,7 @@ packages: peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.3.2 + '@remix-run/router': 1.3.2(patch_hash=sul2q25b7yrot3fzed7bjyqr7m) react: 18.2.0 dev: true diff --git a/src/index.tsx b/src/index.tsx index ffcf9c2..ff1a185 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -21,7 +21,7 @@ type ReactRouterPromptProps = { * {({isActive, onConfirm, onCancel}) => ( * *
- *

Do you really want to leave?

+ *

Do you really want tox leave?

* * *
@@ -33,6 +33,8 @@ type ReactRouterPromptProps = { function ReactRouterPrompt({ when, children }: ReactRouterPromptProps) { const { isActive, onConfirm, resetConfirmation } = useConfirm(when) + console.log(isActive) + if (isActive) { return (
diff --git a/src/main.tsx b/src/main.tsx index 6e3facf..ce8a1ce 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -19,12 +19,12 @@ function Home() { function Form() { const [input, setInput] = useState("") + const [input2, setInput2] = useState("") return (

About

- - = 1}> + = 1} key={1}> {({ isActive, onConfirm, onCancel }) => isActive && (
@@ -48,6 +48,30 @@ function Form() { placeholder="Enter something" /> + setInput2(e.target.value)} + value={input2} + placeholder="Enter something" + /> + + = 1} key={2}> + {({ isActive, onConfirm, onCancel }) => + isActive && ( +
+
+

Do you really want to leave?

+ + +
+
+ ) + } +
+

Typing more than 1 character in the input cause the prompt to show on navigation