main 🧊 rework test add unmount, add use broadcast channel

Author: debabin

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

@@ -5,6 +5,7 @@ export * from './useBattery/useBattery';
 export * from './useBluetooth/useBluetooth';
 export * from './useBoolean/useBoolean';
 export * from './useBreakpoints/useBreakpoints';
+export * from './useBroadcastChannel/useBroadcastChannel';
 export * from './useBrowserLanguage/useBrowserLanguage';
 export * from './useClickOutside/useClickOutside';
 export * from './useClipboard/useClipboard';

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

@@ -17,14 +17,14 @@ export const useBattery = () => {
     'getBattery' in navigator &&
     typeof navigator.getBattery === 'function';
   const [value, setValue] = useState({
-    loading: true,
+    loading: supported,
     level: 0,
     charging: false,
     chargingTime: 0,
     dischargingTime: 0
   });
   useEffect(() => {
-    if (!supported) return setValue({ ...value, loading: false });
+    if (!supported) return;
     let battery;
     const onChange = () =>
       setValue({
@@ -44,6 +44,7 @@ export const useBattery = () => {
     });
     return () => {
       if (!battery) return;
+      console.log('unmount', battery);
       battery.removeEventListener('levelchange', onChange);
       battery.removeEventListener('chargingchange', onChange);
       battery.removeEventListener('chargingtimechange', onChange);

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

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState } from 'react';
+/**
+ * @name useBroadcastChannel
+ * @description Hook that provides cross-tab/window communication
+ * @category Browser
+ *
+ * @browserapi BroadcastChannel https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel
+ *
+ * @param {string} name The name of the channel
+ * @param {Function} callback A callback function that will be called when a message is received
+ * @returns {UseBroadcastChannelReturn} An object containing the channel state and controls
+ *
+ * @example
+ * const { supported, data, post, error } = useBroadcastChannel('channel');
+ */
+export const useBroadcastChannel = (name, callback) => {
+  const supported = typeof window !== 'undefined' && 'BroadcastChannel' in window;
+  const [closed, setClosed] = useState(false);
+  const [data, setData] = useState();
+  const [error, setError] = useState();
+  const channelRef = useRef(undefined);
+  useEffect(() => {
+    if (!supported) return;
+    channelRef.current = new BroadcastChannel(name);
+    const onMessage = (event) => {
+      setData(event.data);
+      callback?.(event.data);
+    };
+    const onMessageError = (event) => setError(event);
+    const onClose = () => setClosed(true);
+    channelRef.current.addEventListener('message', onMessage);
+    channelRef.current.addEventListener('messageerror', onMessageError);
+    channelRef.current.addEventListener('close', onClose);
+    return () => {
+      if (channelRef.current) {
+        channelRef.current.removeEventListener('message', onMessage);
+        channelRef.current.removeEventListener('messageerror', onMessageError);
+        channelRef.current.removeEventListener('close', onClose);
+        channelRef.current.close();
+      }
+    };
+  }, [name]);
+  const post = (data) => {
+    console.log('post', data, channelRef.current);
+    if (!channelRef.current) return;
+    channelRef.current.postMessage(data);
+  };
+  const close = () => {
+    if (!channelRef.current) return;
+    channelRef.current.close();
+    setClosed(true);
+  };
+  return {
+    supported,
+    channel: channelRef.current,
+    data,
+    post,
+    close,
+    error,
+    closed
+  };
+};

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

@@ -31,6 +31,7 @@ export const useClickOutside = (...params) => {
   const internalCallbackRef = useRef(callback);
   internalCallbackRef.current = callback;
   useEffect(() => {
+    console.log('target', target);
     if (!target && !internalRef.state) return;
     const onClick = (event) => {
       const element = target ? getElement(target) : internalRef.current;

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

@@ -38,36 +38,34 @@ export const useDisplayMedia = (...params) => {
   const options = params[1] ? params[1] : params[0];
   const immediately = options?.immediately ?? false;
   const [sharing, setSharing] = useState(false);
+  const elementRef = useRef(null);
   const streamRef = useRef(null);
   const internalRef = useRefState();
   const stop = () => {
-    if (!streamRef.current || !supported) return;
-    const element = target ? getElement(target) : internalRef.current;
-    if (!element) return;
+    if (!streamRef.current || !supported || !elementRef.current) return;
     setSharing(false);
-    element.srcObject = null;
+    elementRef.current.srcObject = null;
     streamRef.current.getTracks().forEach((track) => track.stop());
     streamRef.current = null;
   };
   const start = async () => {
-    if (!supported) return;
-    const element = target ? getElement(target) : internalRef.current;
-    if (!element) return;
+    if (!supported || !elementRef.current) return;
     const displayMedia = await navigator.mediaDevices.getDisplayMedia({
       video: options?.video,
       audio: options?.audio
     });
     setSharing(true);
     streamRef.current = displayMedia;
-    element.srcObject = displayMedia;
+    elementRef.current.srcObject = displayMedia;
     displayMedia.getTracks().forEach((track) => (track.onended = stop));
     return displayMedia;
   };
   useEffect(() => {
-    if (!supported || !immediately) return;
-    if (!target && !internalRef.state) return;
+    if (!supported || (!target && !internalRef.state)) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
+    elementRef.current = element;
+    if (!immediately) return;
     start();
     return () => {
       stop();

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

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { useInterval } from '../useInterval/useInterval';
+import { useEffect, useState } from 'react';
 /**
  * @name useMemory
  * @description - Hook that gives you current memory usage
@@ -21,8 +20,10 @@ export const useMemory = () => {
       usedJSHeapSize: 0
     }
   );
-  useInterval(() => setValue(performance.memory), 1000, {
-    immediately: supported
-  });
+  useEffect(() => {
+    if (!supported) return;
+    const intervalId = setInterval(() => setValue(performance.memory), 1000);
+    return () => clearInterval(intervalId);
+  }, []);
   return { supported, value };
 };

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

@@ -9,7 +9,4 @@ import { useReducer } from 'react';
  * @example
  * const rerender = useRerender();
  */
-export const useRerender = () => {
-  const rerender = useReducer(() => ({}), {})[1];
-  return rerender;
-};
+export const useRerender = () => useReducer(() => ({}), {})[1];

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

@@ -1,6 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
-import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 import { useRefState } from '../useRefState/useRefState';
 /**
  * @name useTextDirection
@@ -43,7 +42,7 @@ export const useTextDirection = (...params) => {
     setValue(value);
     element.setAttribute('dir', value);
   };
-  useIsomorphicLayoutEffect(() => {
+  useEffect(() => {
     if (!target && !internalRef.state) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;

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

@@ -43,7 +43,6 @@ export const useThrottleCallback = (callback, delay) => {
       timeoutRef.current = setTimeout(timer, delayRef.current);
     };
     throttledCallback.cancel = cancel;
-    console.log('cancel', timeoutRef.current);
     cancel();
     return throttledCallback;
   }, [delay]);

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

@@ -1,6 +1,5 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getDate } from '@/utils/helpers';
-import { useInterval } from '../useInterval/useInterval';
 /**
  * @name useTime
  * @description - Hook that gives you current time in different values
@@ -13,6 +12,11 @@ import { useInterval } from '../useInterval/useInterval';
  */
 export const useTime = () => {
   const [time, setTime] = useState(getDate());
-  useInterval(() => setTime(getDate()), 1000);
+  useEffect(() => {
+    const timerId = setInterval(() => setTime(getDate()), 1000);
+    return () => {
+      clearInterval(timerId);
+    };
+  }, []);
   return time;
 };