main 🧊 add test for observers

Author: debabin

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

@@ -45,7 +45,6 @@ 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/useFocus/useFocus.js

@@ -9,6 +9,15 @@ import { useRefState } from '../useRefState/useRefState';
  *
  * @overload
  * @param {HookTarget} target The target element to focus
+ * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus
+ * @returns {UseFocusReturn} An object with focus state and methods
+ *
+ * @example
+ * const { focus, blur, focused } = useFocus(ref, () => console.log('focused'));
+ *
+ * @overload
+ * @param {HookTarget} target The target element to focus
+ * @param {boolean} [options.enabled=true] The enabled state of the focus hook
  * @param {boolean} [options.initialValue=false] The initial focus state of the target
  * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus
  * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur
@@ -19,6 +28,15 @@ import { useRefState } from '../useRefState/useRefState';
  *
  * @overload
  * @template Target The target element
+ * @param {(event: FocusEvent) => void} [callback] The callback function to be invoked on focus
+ * @returns {UseFocusReturn & { ref: StateRef<Target> }} An object with focus state, methods and ref
+ *
+ * @example
+ * const { ref, focus, blur, focused } = useFocus(() => console.log('focused'));
+ *
+ * @overload
+ * @template Target The target element
+ * @param {boolean} [options.enabled=true] The enabled state of the focus hook
  * @param {boolean} [options.initialValue=false] The initial focus state of the target
  * @param {(event: FocusEvent) => void} [options.onFocus] The callback function to be invoked on focus
  * @param {(event: FocusEvent) => void} [options.onBlur] The callback function to be invoked on blur
@@ -29,17 +47,32 @@ import { useRefState } from '../useRefState/useRefState';
  */
 export const useFocus = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
-  const options = (target ? params[1] : params[0]) ?? {};
-  const initialValue = options.initialValue ?? false;
+  const options = target
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { onFocus: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { onFocus: params[0] };
+  const enabled = options?.enabled ?? true;
+  const initialValue = options?.initialValue ?? false;
   const [focused, setFocused] = useState(initialValue);
   const internalRef = useRefState();
   const internalOptionsRef = useRef(options);
   internalOptionsRef.current = options;
   const elementRef = useRef(null);
-  const focus = () => elementRef.current?.focus();
-  const blur = () => elementRef.current?.blur();
+  const focus = () => {
+    if (!elementRef.current) return;
+    elementRef.current.focus();
+    setFocused(true);
+  };
+  const blur = () => {
+    if (!elementRef.current) return;
+    elementRef.current.blur();
+    setFocused(false);
+  };
   useEffect(() => {
-    if (!target && !internalRef.state) return;
+    if (!enabled || (!target && !internalRef.state)) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
     elementRef.current = element;
@@ -58,7 +91,7 @@ export const useFocus = (...params) => {
       element.removeEventListener('focus', onFocus);
       element.removeEventListener('blur', onBlur);
     };
-  }, [target, internalRef.state]);
+  }, [target, internalRef.state, enabled]);
   if (target) return { focus, blur, focused };
   return {
     ref: internalRef,

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

@@ -17,7 +17,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { ref, entry, inView } = useIntersectionObserver();
+ * const { ref, entry, inView, observer } = useIntersectionObserver();
  *
  * @overload
  * @template Target The target element
@@ -27,23 +27,23 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { entry, inView } = useIntersectionObserver(ref);
+ * const { entry, inView, observer } = useIntersectionObserver(ref);
  *
  * @overload
  * @template Target The target element
  * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected
  * @returns {UseIntersectionObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
  *
  * @example
- * const { ref, entry, inView } = useIntersectionObserver(() => console.log('callback'));
+ * const { ref, entry, inView, observer } = useIntersectionObserver(() => console.log('callback'));
  *
  * @overload
  * @param {UseIntersectionObserverCallback} callback The callback to execute when intersection is detected
  * @param {HookTarget} target The target element to detect intersection
  * @returns {UseIntersectionObserverReturn} An object containing the state
  *
  * @example
- * const { entry, inView } = useIntersectionObserver(() => console.log('callback'), ref);
+ * const { entry, inView, observer } = useIntersectionObserver(() => console.log('callback'), ref);
  */
 export const useIntersectionObserver = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
@@ -56,6 +56,7 @@ export const useIntersectionObserver = (...params) => {
       : { onChange: params[0] };
   const callback = options?.onChange;
   const enabled = options?.enabled ?? true;
+  const [observer, setObserver] = useState();
   const [entry, setEntry] = useState();
   const internalRef = useRefState();
   const internalCallbackRef = useRef(callback);
@@ -65,22 +66,24 @@ export const useIntersectionObserver = (...params) => {
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
     const observer = new IntersectionObserver(
-      ([entry]) => {
+      ([entry], observer) => {
         setEntry(entry);
-        internalCallbackRef.current?.(entry);
+        internalCallbackRef.current?.(entry, observer);
       },
       {
         ...options,
         root: options?.root ? getElement(options.root) : document
       }
     );
+    setObserver(observer);
     observer.observe(element);
     return () => {
       observer.disconnect();
     };
   }, [target, internalRef.state, options?.rootMargin, options?.threshold, options?.root, enabled]);
-  if (target) return { entry, inView: !!entry?.isIntersecting };
+  if (target) return { observer, entry, inView: !!entry?.isIntersecting };
   return {
+    observer,
     ref: internalRef,
     entry,
     inView: !!entry?.isIntersecting

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

@@ -7,65 +7,92 @@ import { useRefState } from '../useRefState/useRefState';
  * @category Sensors
  * @usage low
  *
+ * @browserapi MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+ *
  * @overload
- * @template Target The target element
- * @param {MutationCallback} callback The callback to execute when mutation is detected
+ * @param {HookTarget} target The target element to observe
  * @param {boolean} [options.enabled=true] The enabled state of the mutation observer
+ * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected
  * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed
  * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed
  * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed
- * @param {boolean} [options.subtree]  Set to true if mutations to not just target, but also target's descendants are to be observed
- * @param {boolean} [options.characterDataOldValue] Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
- * @param {boolean} [options.attributeOldValue]  Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
- * @param {string[]} [options.attributeFilter] Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
- * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} An object containing the mutation observer state
+ * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed
+ * @returns {UseMutationObserverReturn} An object containing the mutation observer state
  *
  * @example
- * const { ref, observer, stop } = useMutationObserver(() => console.log('callback'))
+ * const { observer, stop } = useMutationObserver(ref, { childList: true });
  *
  * @overload
- * @param {HookTarget} target The target element to observe
- * @param {MutationCallback} callback The callback to execute when mutation is detected
+ * @template Target The target element
  * @param {boolean} [options.enabled=true] The enabled state of the mutation observer
+ * @param {UseMutationObserverCallback} [options.onChange] The callback to execute when mutation is detected
  * @param {boolean} [options.attributes] Set to true if mutations to target's attributes are to be observed
  * @param {boolean} [options.characterData] Set to true if mutations to target's data are to be observed
  * @param {boolean} [options.childList] Set to true if mutations to target's children are to be observed
- * @param {boolean} [options.subtree]  Set to true if mutations to not just target, but also target's descendants are to be observed
- * @param {boolean} [options.characterDataOldValue] Set to true if characterData is set to true or omitted and target's data before the mutation needs to be recorded
- * @param {boolean} [options.attributeOldValue]  Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
- * @param {string[]} [options.attributeFilter] Set to a list of attribute local names (without namespace) if not all attribute mutations need to be observed and attributes is true or omitted
+ * @param {boolean} [options.subtree] Set to true if mutations to not just target, but also target's descendants are to be observed
+ * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, observer, stop } = useMutationObserver({ childList: true });
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected
+ * @returns {UseMutationObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, observer, stop } = useMutationObserver((mutations) => console.log(mutations));
+ *
+ * @overload
+ * @param {UseMutationObserverCallback} callback The callback to execute when mutation is detected
+ * @param {HookTarget} target The target element to observe
  * @returns {UseMutationObserverReturn} An object containing the mutation observer state
  *
  * @example
- * const { observer, stop } = useMutationObserver(ref, () => console.log('callback'))
+ * const { observer, stop } = useMutationObserver((mutations) => console.log(mutations), ref);
  */
 export const useMutationObserver = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
-  const callback = target ? params[1] : params[0];
-  const options = target ? params[2] : params[1];
-  const [observer, setObserver] = useState();
+  const options = target
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { onChange: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { onChange: params[0] };
+  const callback = options?.onChange;
   const enabled = options?.enabled ?? true;
-  const internalRef = useRefState(window.document.documentElement);
+  const [observer, setObserver] = useState();
+  const internalRef = useRefState();
   const internalCallbackRef = useRef(callback);
   internalCallbackRef.current = callback;
-  const internalOptionsRef = useRef(options);
-  internalOptionsRef.current = options;
   useEffect(() => {
     if (!enabled || (!target && !internalRef.state)) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
-    const observer = new MutationObserver(internalCallbackRef.current);
+    const observer = new MutationObserver((mutations, observer) => {
+      internalCallbackRef.current?.(mutations, observer);
+    });
     setObserver(observer);
-    observer.observe(element, internalOptionsRef.current);
+    observer.observe(element, options);
     return () => {
       observer.disconnect();
     };
-  }, [target, internalRef.state]);
-  const stop = () => observer?.disconnect();
-  if (target) return { stop, observer };
+  }, [
+    target,
+    internalRef.state,
+    options?.childList,
+    options?.attributes,
+    options?.characterData,
+    options?.subtree,
+    options?.attributeOldValue,
+    options?.characterDataOldValue,
+    options?.attributeFilter,
+    enabled
+  ]);
+  if (target) return { observer };
   return {
     ref: internalRef,
-    stop,
     observer
   };
 };

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

@@ -2,58 +2,83 @@ import { useEffect, useRef, useState } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
 import { useRefState } from '../useRefState/useRefState';
 /**
- *  @name useResizeObserver
- *  @description - Hook that gives you resize observer state
- *  @category Sensors
- *  @usage low
- *
- *  @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
- *
- *  @overload
- *  @template Target The target element
- *  @param {boolean} [options.enabled=true] The IntersectionObserver options
- *  @param {boolean} [options.box] The IntersectionObserver options
- *  @param {(entries: ResizeObserverEntry[], observer: ResizeObserver) => void} [options.onChange] The callback to execute when resize is detected
- *  @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} An object containing the resize observer state
- *
- *  @example
- *  const { ref, entries } = useResizeObserver();
- *
- *  @overload
- *  @template Target The target element
- *  @param {HookTarget} target The target element to observe
- *  @param {boolean} [options.enabled=true] The IntersectionObserver options
- *  @param {boolean} [options.box] The IntersectionObserver options
- *  @param {(entries: ResizeObserverEntry[], observer: ResizeObserver) => void} [options.onChange] The callback to execute when resize is detected
- *  @returns {UseResizeObserverReturn} An object containing the resize observer state
- *
- *  @example
- *  const { entries } = useResizeObserver(ref);
+ * @name useResizeObserver
+ * @description - Hook that gives you resize observer state
+ * @category Sensors
+ * @usage low
+ *
+ * @browserapi ResizeObserver https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
+ *
+ * @overload
+ * @param {HookTarget} target The target element to observe
+ * @param {boolean} [options.enabled=true] The enabled state of the resize observer
+ * @param {ResizeObserverBoxOptions} [options.box] The box model to observe
+ * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected
+ * @returns {UseResizeObserverReturn} An object containing the resize observer state
+ *
+ * @example
+ * const { entries, observer } = useResizeObserver(ref);
+ *
+ * @overload
+ * @template Target The target element
+ * @param {boolean} [options.enabled=true] The enabled state of the resize observer
+ * @param {ResizeObserverBoxOptions} [options.box] The box model to observe
+ * @param {UseResizeObserverCallback} [options.onChange] The callback to execute when resize is detected
+ * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, entry, observer } = useResizeObserver();
+ *
+ * @overload
+ * @template Target The target element
+ * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected
+ * @returns {UseResizeObserverReturn & { ref: StateRef<Target> }} A React ref to attach to the target element
+ *
+ * @example
+ * const { ref, entry, observer } = useResizeObserver((entry) => console.log(entry));
+ *
+ * @overload
+ * @param {HookTarget} target The target element to observe
+ * @param {UseResizeObserverCallback} callback The callback to execute when resize is detected
+ * @returns {UseResizeObserverReturn} An object containing the resize observer state
+ *
+ * @example
+ * const { entry, observer } = useResizeObserver(ref, (entry) => console.log(entry));
  */
 export const useResizeObserver = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
-  const options = target ? params[1] : params[0];
+  const options = target
+    ? typeof params[1] === 'object'
+      ? params[1]
+      : { onChange: params[1] }
+    : typeof params[0] === 'object'
+      ? params[0]
+      : { onChange: params[0] };
+  const callback = options?.onChange;
   const enabled = options?.enabled ?? true;
-  const [entries, setEntries] = useState([]);
+  const [entry, setEntry] = useState();
+  const [observer, setObserver] = useState();
   const internalRef = useRefState();
-  const internalOnChangeRef = useRef(options?.onChange);
-  internalOnChangeRef.current = options?.onChange;
+  const internalCallbackRef = useRef(callback);
+  internalCallbackRef.current = callback;
   useEffect(() => {
     if (!enabled || (!target && !internalRef.state)) return;
     const element = target ? getElement(target) : internalRef.current;
     if (!element) return;
-    const observer = new ResizeObserver((entries) => {
-      setEntries(entries);
-      internalOnChangeRef.current?.(entries, observer);
+    const observer = new ResizeObserver(([entry], observer) => {
+      setEntry(entry);
+      internalCallbackRef.current?.(entry, observer);
     });
+    setObserver(observer);
     observer.observe(element, options);
     return () => {
       observer.disconnect();
     };
   }, [target, internalRef.state, options?.box, enabled]);
-  if (target) return { entries };
+  if (target) return { entry, observer };
   return {
     ref: internalRef,
-    entries
+    entry,
+    observer
   };
 };