feat: impl hooks

Author: hey3

src/index.ts

@@ -0,0 +1,2 @@
+export * from './usePolling'
+export * from './usePollingForce'

src/types.ts

@@ -0,0 +1,7 @@
+import type { Controls } from './usePollingControl'
+
+export type PollingConfig = {
+  onError?: () => void
+}
+
+export type PollingControls = Omit<Controls, 'isPausedRef'>

src/usePolling.ts

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useRef } from 'react'
+import type { PollingConfig, PollingControls } from './types'
+import { usePollingControl } from './usePollingControl'
+
+export const usePolling = <T extends (...args: never[]) => Promise<void>>(
+  callback: T,
+  timeout: number,
+  config: PollingConfig = {}
+): PollingControls => {
+  const timerIdRef = useRef<ReturnType<typeof window.requestAnimationFrame>>()
+  const callbackRef = useRef<T>(callback)
+  const pollTimerRef = useRef<number>()
+
+  const { isPausedRef, ...controls } = usePollingControl()
+
+  const { onError } = config
+  const interval = timeout < 0 ? 0 : timeout
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  const loop = useCallback(
+    async (time: number): Promise<void> => {
+      if (!pollTimerRef.current) {
+        pollTimerRef.current = time
+      }
+      const elapsed = time - pollTimerRef.current
+      if (elapsed >= interval) {
+        if (!isPausedRef.current) {
+          await callbackRef.current().catch(() => {
+            onError?.()
+          })
+          pollTimerRef.current = undefined
+        }
+      }
+      timerIdRef.current = window.requestAnimationFrame(loop)
+    },
+    [interval, isPausedRef, onError]
+  )
+
+  useEffect(() => {
+    timerIdRef.current = window.requestAnimationFrame(loop)
+
+    return () => {
+      if (timerIdRef.current) {
+        window.cancelAnimationFrame(timerIdRef.current)
+      }
+    }
+  }, [loop])
+
+  return controls
+}

src/usePollingControl.ts

@@ -0,0 +1,30 @@
+import { type MutableRefObject, useCallback, useRef, useState } from 'react'
+
+export type Controls = {
+  isPaused: boolean
+  isPausedRef: MutableRefObject<boolean>
+  pause: () => void
+  resume: () => void
+}
+
+export const usePollingControl = (): Controls => {
+  const [isPaused, setIsPaused] = useState<boolean>(false)
+  const isPausedRef = useRef(false)
+
+  const pause = useCallback(() => {
+    isPausedRef.current = true
+    setIsPaused(true)
+  }, [setIsPaused])
+
+  const resume = useCallback(() => {
+    isPausedRef.current = false
+    setIsPaused(false)
+  }, [setIsPaused])
+
+  return {
+    isPaused,
+    isPausedRef,
+    pause,
+    resume,
+  }
+}

src/usePollingForce.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef } from 'react'
+import type { PollingConfig, PollingControls } from './types'
+import { usePollingControl } from './usePollingControl'
+
+export const usePollingForce = <T extends (...args: never[]) => Promise<void>>(
+  callback: T,
+  timeout: number,
+  config: PollingConfig = {}
+): PollingControls => {
+  const timerIdRef = useRef<number>()
+  const callbackRef = useRef<T>(callback)
+
+  const { isPausedRef, ...controls } = usePollingControl()
+
+  const { onError } = config
+  const interval = timeout < 0 ? 0 : timeout
+
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  const loop = useCallback(async () => {
+    if (!isPausedRef.current) {
+      await callbackRef.current().catch(() => {
+        onError?.()
+      })
+    }
+  }, [isPausedRef, onError])
+
+  useEffect(() => {
+    timerIdRef.current = window.setInterval(loop, interval)
+
+    return () => {
+      if (timerIdRef.current) {
+        window.clearInterval(timerIdRef.current)
+      }
+    }
+  }, [interval, loop])
+
+  return controls
+}