feat(router): add useblocker

packages/router/src/history.tsx

@@ -2,44 +2,66 @@ export interface NavigateOptions {
   replace?: boolean
 }
 
+export type BlockerCallback = (tx: { retry: () => void }) => void
+type Blocker = {
+  id: string;
+  callback: BlockerCallback;
+}
+
 const createHistory = () => {
   type Listener = (ev?: PopStateEvent) => any
 
   const listeners: Record<string, Listener> = {}
+  const blockers: Blocker[] = []
 
-  return {
+  const history = {
     listen: (listener: Listener) => {
       const listenerId = 'RW_HISTORY_LISTENER_ID_' + Date.now()
       listeners[listenerId] = listener
       globalThis.addEventListener('popstate', listener)
       return listenerId
     },
     navigate: (to: string, options?: NavigateOptions) => {
-      const { pathname, search, hash } = new URL(
-        globalThis?.location?.origin + to,
-      )
-
-      if (
-        globalThis?.location?.pathname !== pathname ||
-        globalThis?.location?.search !== search ||
-        globalThis?.location?.hash !== hash
-      ) {
-        if (options?.replace) {
-          globalThis.history.replaceState({}, '', to)
-        } else {
-          globalThis.history.pushState({}, '', to)
+      const performNavigation = () => {
+        const { pathname, search, hash } = new URL(
+          globalThis?.location?.origin + to,
+        )
+
+        if (
+          globalThis?.location?.pathname !== pathname ||
+          globalThis?.location?.search !== search ||
+          globalThis?.location?.hash !== hash
+        ) {
+          if (options?.replace) {
+            globalThis.history.replaceState({}, '', to)
+          } else {
+            globalThis.history.pushState({}, '', to)
+          }
+        }
+
+        for (const listener of Object.values(listeners)) {
+          listener()
         }
       }
 
-      for (const listener of Object.values(listeners)) {
-        listener()
+      if (blockers.length > 0) {
+        processBlockers(0, performNavigation)
+      } else {
+        performNavigation()
       }
     },
     back: () => {
-      globalThis.history.back()
+      const performBack = () => {
+        globalThis.history.back()
+        for (const listener of Object.values(listeners)) {
+          listener()
+        }
+      }
 
-      for (const listener of Object.values(listeners)) {
-        listener()
+      if (blockers.length > 0) {
+        processBlockers(0, performBack)
+      } else {
+        performBack()
       }
     },
     remove: (listenerId: string) => {
@@ -53,11 +75,43 @@ const createHistory = () => {
         )
       }
     },
+    block: (id: string, callback: BlockerCallback) => {
+      const existingBlockerIndex = blockers.findIndex(blocker => blocker.id === id)
+      if (existingBlockerIndex !== -1) {
+        blockers[existingBlockerIndex] = { id, callback }
+      } else {
+        blockers.push({ id, callback })
+      }
+    },
+    unblock: (id: string) => {
+      const index = blockers.findIndex(blocker => blocker.id === id)
+      if (index !== -1) {
+        blockers.splice(index, 1)
+      }
+    }
   }
+
+  const processBlockers = (index: number, navigate: () => void) => {
+    if (index < blockers.length) {
+      blockers[index].callback({
+        retry: () => processBlockers(index + 1, navigate)
+      })
+    } else {
+      navigate()
+    }
+  }
+
+  globalThis.addEventListener('beforeunload', (event: BeforeUnloadEvent) => {
+    if (blockers.length > 0) {
+      event.preventDefault()
+    }
+  })
+
+  return history
 }
 
 const gHistory = createHistory()
 
-const { navigate, back } = gHistory
+const { navigate, back, block, unblock } = gHistory
 
-export { gHistory, navigate, back }
+export { gHistory, navigate, back, block, unblock }

packages/router/src/index.ts

@@ -25,6 +25,7 @@ export * from './route-focus'
 export * from './useRouteName'
 export * from './useRoutePaths'
 export * from './useMatch'
+export * from './useBlocker'
 
 export { parseSearch, getRouteRegexAndParams, matchPath } from './util'
 

packages/router/src/link.tsx

@@ -5,17 +5,18 @@
 
 import React, { forwardRef } from 'react'
 
-import { navigate } from './history'
+import { NavigateOptions, navigate } from './history'
 
 export interface LinkProps {
   to: string
   onClick?: React.MouseEventHandler<HTMLAnchorElement>
+  options?: NavigateOptions
 }
 
 export const Link = forwardRef<
   HTMLAnchorElement,
   LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
->(({ to, onClick, ...rest }, ref) => (
+>(({ to, onClick, options, ...rest }, ref) => (
   <a
     href={to}
     ref={ref}
@@ -36,10 +37,10 @@ export const Link = forwardRef<
       if (onClick) {
         const result = onClick(event)
         if (typeof result !== 'boolean' || result) {
-          navigate(to)
+          navigate(to, options)
         }
       } else {
-        navigate(to)
+        navigate(to, options)
       }
     }}
   />

packages/router/src/useBlocker.ts

@@ -0,0 +1,50 @@
+import { useEffect, useCallback, useState, useRef } from 'react'
+import { block, unblock, BlockerCallback } from './history'
+
+type BlockerState = 'IDLE' | 'BLOCKED'
+
+interface UseBlockerOptions {
+  when: boolean
+}
+
+export function useBlocker({ when }: UseBlockerOptions) {
+  const [blockerState, setBlockerState] = useState<BlockerState>('IDLE')
+  const [pendingNavigation, setPendingNavigation] = useState<(() => void) | null>(null)
+  const blockerId = useRef(`BLOCKER_${Date.now()}${Math.random()}`)
+
+  const blocker: BlockerCallback = useCallback(
+    ({ retry }) => {
+      if (when) {
+        setBlockerState('BLOCKED')
+        setPendingNavigation(() => retry)
+      } else {
+        retry()
+      }
+    },
+    [when]
+  )
+
+  useEffect(() => {
+    if (when) {
+      block(blockerId.current, blocker)
+    } else {
+      unblock(blockerId.current)
+    }
+    return () => unblock(blockerId.current)
+  }, [when, blocker])
+
+  const confirm = useCallback(() => {
+    setBlockerState('IDLE')
+    if (pendingNavigation) {
+      pendingNavigation()
+      setPendingNavigation(null)
+    }
+  }, [pendingNavigation])
+
+  const abort = useCallback(() => {
+    setBlockerState('IDLE')
+    setPendingNavigation(null)
+  }, [])
+
+  return { state: blockerState, confirm, abort }
+}