main 🧊 update use query, use websocket

Author: debabin

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siberiacancode/reactuse",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "The ultimate collection of react hooks",
   "author": {
     "name": "SIBERIA CAN CODE 🧊",

packages/core/src/bundle/hooks/useDeviceList/useDeviceList.js

@@ -41,22 +41,22 @@ export const useDeviceList = (...params) => {
     optionsRef.current?.onUpdate?.(list);
     return list;
   };
-  const trigger = async () => {
+  const trigger = async (constraints) => {
     if (!supported) return;
     const list = await navigator.mediaDevices.enumerateDevices();
     const hasCamera = list.some((device) => device.kind === 'videoinput');
-    const hasMicrophone = list.some((device) => device.kind === 'audioinput');
-    if (!hasCamera && !hasMicrophone) return update();
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: hasCamera,
-        audio: hasMicrophone
-      });
-      stream.getTracks().forEach((track) => track.stop());
-    } catch {}
-    setDevices(list);
-    optionsRef.current?.onUpdate?.(list);
-    return list;
+    const hasMicrophone = list.some(
+      (device) => device.kind === 'audioinput' || device.kind === 'audiooutput'
+    );
+    const video = constraints?.video ?? optionsRef.current?.constraints?.video ?? hasCamera;
+    const audio = constraints?.video ?? optionsRef.current?.constraints?.audio ?? hasMicrophone;
+    if (video || audio) {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video, audio });
+        stream.getTracks().forEach((track) => track.stop());
+      } catch {}
+    }
+    return update();
   };
   useEffect(() => {
     if (!supported) return;

packages/core/src/bundle/hooks/useQuery/useQuery.js

@@ -14,19 +14,18 @@ import { useMount } from '../useMount/useMount';
  * @param {(data: Data) => void} [options.onSuccess] The callback function to be invoked on success
  * @param {(error: Error) => void} [options.onError] The callback function to be invoked on error
  * @param {UseQueryOptionsSelect<Data>} [options.select] The select function to be invoked
- * @param {Data | (() => Data)} [options.initialData] The initial data for the hook
  * @param {Data | (() => Data)} [options.placeholderData] The placeholder data for the hook
  * @param {number} [options.refetchInterval] The refetch interval
- * @param {boolean | number} [options.retry] The retry count of requests
+ * @param {boolean | number | ((failureCount: number, error: Error) => boolean)} [options.retry] The retry count of requests, or a function to decide whether to retry
  * @returns {UseQueryReturn<Data>} An object with the state of the query
  *
  * @example
- * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort, aborted } = useQuery(() => fetch('url'));
+ * const { data, isFetching, isLoading, isError, isSuccess, error, refetch, isRefetching, abort } = useQuery(() => fetch('url'));
  */
 export const useQuery = (callback, options) => {
   const enabled = options?.enabled ?? true;
   const canRequestOnMount = enabled && typeof window !== 'undefined';
-  const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);
+  const failureCountRef = useRef(0);
   const alreadyRequestedRef = useRef(false);
   const [isFetching, setIsFetching] = useState(canRequestOnMount);
   const [isLoading, setIsLoading] = useState(canRequestOnMount);
@@ -54,6 +53,7 @@ export const useQuery = (callback, options) => {
       .then((response) => {
         const data = options?.select ? options?.select(response) : response;
         options?.onSuccess?.(data);
+        failureCountRef.current = 0;
         setData(data);
         setIsSuccess(true);
         setError(undefined);
@@ -63,35 +63,35 @@ export const useQuery = (callback, options) => {
         if (action === 'refetch') setIsRefetching(false);
       })
       .catch((error) => {
-        if (retryCountRef.current > 0) {
-          retryCountRef.current -= 1;
-          const retryDelay =
-            typeof options?.retryDelay === 'function'
-              ? options?.retryDelay(retryCountRef.current, error)
-              : options?.retryDelay;
-          if (retryDelay) {
-            setTimeout(request, retryDelay, action);
-            return;
-          }
+        if (
+          typeof options?.retry === 'function'
+            ? options.retry(failureCountRef.current, error)
+            : failureCountRef.current < getRetry(options?.retry ?? 0)
+        ) {
+          failureCountRef.current += 1;
           request(action);
           return;
         }
         options?.onError?.(error);
+        failureCountRef.current = 0;
         setData(undefined);
         setIsSuccess(false);
         setError(error);
         setIsError(true);
         setIsFetching(false);
         if (action === 'init') setIsLoading(false);
         if (action === 'refetch') setIsRefetching(false);
-        retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;
       })
       .finally(() => {
-        if (options?.refetchInterval) {
+        const refetchInterval =
+          typeof options?.refetchInterval === 'function'
+            ? options.refetchInterval()
+            : options?.refetchInterval;
+        if (refetchInterval) {
           const interval = setInterval(() => {
             clearInterval(interval);
             request('refetch');
-          }, options?.refetchInterval);
+          }, refetchInterval);
           intervalIdRef.current = interval;
         }
       });
@@ -108,7 +108,7 @@ export const useQuery = (callback, options) => {
     () => () => {
       clearInterval(intervalIdRef.current);
     },
-    [enabled, options?.refetchInterval, options?.retry, ...keys]
+    [enabled, options?.retry, ...keys]
   );
   const refetch = () => {
     request('refetch');

packages/core/src/bundle/hooks/useWebSocket/useWebSocket.js

@@ -10,27 +10,30 @@ import { getRetry } from '@/utils/helpers';
  *
  * @param {UseWebSocketUrl} url The URL of the WebSocket server
  * @param {(webSocket: WebSocket) => void} [options.onConnected] The callback function that is called when the WebSocket connection is established
- * @param {(event: CloseEvent, webSocket: WebSocket) => void} [options.onDisconnected] The callback function that is called when the WebSocket connection is closed
+ * @param {(event: CloseEvent, webSocket: WebSocket) => void} [options.onClose] The callback function that is called when the WebSocket connection is closed
  * @param {(event: Event, webSocket: WebSocket) => void} [options.onError] The callback function that is called when an error occurs
  * @param {(event: MessageEvent, webSocket: WebSocket) => void} [options.onMessage] The callback function that is called when a message is received
- * @param {boolean | number} [options.retry] The number of times to retry the connection
+ * @param {boolean} [options.immediately=true] Immediately open the connection when calling this hook
+ * @param {boolean | number | ((failureCount: number, event: CloseEvent) => boolean)} [options.retry] The number of times to retry the connection, or a function to decide whether to retry
  * @param {Array<'soap' | 'wasm'>} [options.protocols] The list of protocols to use
- * @returns {UseWebSocketReturn} An object with the status, close, send, open, and ws properties
+ * @returns {UseWebSocketReturn} An object with the status, close, send, open, and client properties
  *
  * @example
  * const { status, close, send, open, client } = useWebSocket('url');
  */
 export const useWebSocket = (url, options) => {
+  const immediately = options?.immediately ?? true;
   const webSocketRef = useRef(undefined);
-  const retryCountRef = useRef(options?.retry ? getRetry(options.retry) : 0);
+  const failureCountRef = useRef(0);
   const explicityCloseRef = useRef(false);
-  const [status, setStatus] = useState('connecting');
+  const [status, setStatus] = useState(immediately ? 'connecting' : 'disconnected');
   const send = (data) => {
     webSocketRef.current?.send(data);
   };
   const close = () => {
     explicityCloseRef.current = true;
     webSocketRef.current?.close();
+    webSocketRef.current = undefined;
   };
   const init = () => {
     webSocketRef.current = new WebSocket(
@@ -41,6 +44,7 @@ export const useWebSocket = (url, options) => {
     const webSocket = webSocketRef.current;
     if (!webSocket) return;
     webSocket.onopen = () => {
+      failureCountRef.current = 0;
       setStatus('connected');
       options?.onConnected?.(webSocket);
     };
@@ -51,26 +55,36 @@ export const useWebSocket = (url, options) => {
     webSocket.onmessage = (event) => options?.onMessage?.(event, webSocket);
     webSocket.onclose = (event) => {
       setStatus('disconnected');
-      options?.onDisconnected?.(event, webSocket);
+      options?.onClose?.(event, webSocket);
       if (explicityCloseRef.current) return;
-      if (retryCountRef.current > 0) {
-        retryCountRef.current -= 1;
+      const shouldRetry =
+        typeof options?.retry === 'function'
+          ? options.retry(failureCountRef.current, event)
+          : failureCountRef.current < getRetry(options?.retry ?? 0);
+      if (shouldRetry) {
+        failureCountRef.current += 1;
         return init();
       }
-      retryCountRef.current = options?.retry ? getRetry(options.retry) : 0;
+      failureCountRef.current = 0;
     };
   };
-  useEffect(() => {
+  const open = () => {
+    explicityCloseRef.current = false;
+    if (webSocketRef.current) {
+      webSocketRef.current.onclose = null;
+      webSocketRef.current.close();
+      webSocketRef.current = undefined;
+    }
     init();
+  };
+  useEffect(() => {
+    if (immediately) init();
     return () => {
       if (!webSocketRef.current) return;
+      webSocketRef.current.onclose = null;
       webSocketRef.current.close();
       webSocketRef.current = undefined;
     };
   }, [url]);
-  const open = () => {
-    explicityCloseRef.current = false;
-    init();
-  };
   return { client: webSocketRef.current, close, open, send, status };
 };

packages/core/src/hooks/useDeviceList/useDeviceList.test.ts

@@ -112,7 +112,7 @@ it('Should load devices immediately', async () => {
     audio: true,
     video: true
   });
-  expect(mockEnumerateDevices).toHaveBeenCalledOnce();
+  expect(mockEnumerateDevices).toHaveBeenCalledTimes(2);
   expect(mockStop).toHaveBeenCalledTimes(1);
 });
 
@@ -151,7 +151,7 @@ it('Should trigger device permissions and update devices by action', async () =>
     audio: true,
     video: true
   });
-  expect(mockEnumerateDevices).toHaveBeenCalledOnce();
+  expect(mockEnumerateDevices).toHaveBeenCalledTimes(2);
   expect(result.current.devices).toEqual(devices);
   expect(mockStop).toHaveBeenCalledTimes(1);
 });

packages/core/src/hooks/useDeviceList/useDeviceList.ts

@@ -5,6 +5,8 @@ export type UseDeviceListCallback = (devices: MediaDeviceInfo[]) => void;
 
 /** The use device list options type */
 export interface UseDeviceListOptions {
+  /** The constraints passed to `getUserMedia` when requesting permissions */
+  constraints?: MediaStreamConstraints;
   /** Whether the device list should be requested immediately */
   immediately?: boolean;
   /** The callback fired when the device list updates */
@@ -87,25 +89,26 @@ export const useDeviceList = ((...params: any[]) => {
     return list;
   };
 
-  const trigger = async () => {
+  const trigger = async (constraints?: MediaStreamConstraints) => {
     if (!supported) return;
 
     const list = await navigator.mediaDevices.enumerateDevices();
     const hasCamera = list.some((device) => device.kind === 'videoinput');
-    const hasMicrophone = list.some((device) => device.kind === 'audioinput');
-    if (!hasCamera && !hasMicrophone) return update();
+    const hasMicrophone = list.some(
+      (device) => device.kind === 'audioinput' || device.kind === 'audiooutput'
+    );
 
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: hasCamera,
-        audio: hasMicrophone
-      });
-      stream.getTracks().forEach((track) => track.stop());
-    } catch {}
+    const video = constraints?.video ?? optionsRef.current?.constraints?.video ?? hasCamera;
+    const audio = constraints?.video ?? optionsRef.current?.constraints?.audio ?? hasMicrophone;
 
-    setDevices(list);
-    optionsRef.current?.onUpdate?.(list);
-    return list;
+    if (video || audio) {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({ video, audio });
+        stream.getTracks().forEach((track) => track.stop());
+      } catch {}
+    }
+
+    return update();
   };
 
   useEffect(() => {