main 🧊 up test coverage, add shallow effect

Author: debabin

README.md

@@ -1 +1 @@
-packages/core/README.md
+packages/core/README.md

packages/core/README.md

@@ -25,9 +25,9 @@ npm install @siberiacancode/reactuse
 ```
 
 ```tsx
-import { useCounter } from "@siberiacancode/reactuse";
+import { useCounter } from '@siberiacancode/reactuse';
 
-function App() {
+const App = () => {
   const counter = useCounter(0);
 
   return (
@@ -37,7 +37,7 @@ function App() {
       <button onClick={() => counter.dec()}>-1</button>
     </div>
   );
-}
+};
 ```
 
 ## CLI installation

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

@@ -108,6 +108,7 @@ export * from './useScrollIntoView/useScrollIntoView';
 export * from './useScrollTo/useScrollTo';
 export * from './useSessionStorage/useSessionStorage';
 export * from './useSet/useSet';
+export * from './useShallowEffect/useShallowEffect';
 export * from './useShare/useShare';
 export * from './useSpeechRecognition/useSpeechRecognition';
 export * from './useSpeechSynthesis/useSpeechSynthesis';

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

@@ -14,7 +14,7 @@ import { copy } from '@/utils/helpers';
  * const { copied, value, copy } = useCopy();
  */
 export const useCopy = (delay = 1000) => {
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState();
   const [copied, setCopied] = useState(false);
   const copyToClipboard = async (text) => {
     await copy(text);

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

@@ -12,7 +12,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseCssVarReturn & { ref: StateRef<Element> }} The object containing the value of the CSS variable and ref
  *
  * @example
- * const { ref, value, set } = useCssVar('--color', 'red');
+ * const { ref, value, set, remove } = useCssVar('--color', 'red');
  *
  * @overload
  * @param {HookTarget} target The target element
@@ -21,7 +21,7 @@ import { useRefState } from '../useRefState/useRefState';
  * @returns {UseCssVarReturn} The object containing the value of the CSS variable
  *
  * @example
- * const { value, set } = useCssVar(ref, '--color', 'red');
+ * const { value, set, remove } = useCssVar(ref, '--color', 'red');
  */
 export const useCssVar = (...params) => {
   const target = isTarget(params[0]) ? params[0] : undefined;
@@ -31,16 +31,15 @@ export const useCssVar = (...params) => {
   const internalRef = useRefState(window.document.documentElement);
   const set = (value) => {
     const element = target ? getElement(target) : internalRef.current;
-    if (!element) return;
-    if (element.style) {
-      if (!value) {
-        element.style.removeProperty(key);
-        setValue(value);
-        return;
-      }
-      element.style.setProperty(key, value);
-      setValue(value);
-    }
+    if (!element || !element.style) return;
+    element.style.setProperty(key, value);
+    setValue(value);
+  };
+  const remove = () => {
+    const element = target ? getElement(target) : internalRef.current;
+    if (!element || !element.style) return;
+    element.style.removeProperty(key);
+    setValue('');
   };
   useEffect(() => {
     if (initialValue) set(initialValue);
@@ -59,6 +58,6 @@ export const useCssVar = (...params) => {
       observer.disconnect();
     };
   }, [target, internalRef.state]);
-  if (target) return { value, set };
-  return { ref: internalRef, value, set };
+  if (target) return { value, set, remove };
+  return { ref: internalRef, value, set, remove };
 };

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

@@ -21,10 +21,9 @@ export const useDebounceCallback = (callback, delay) => {
   delayRef.current = delay;
   const debounced = useMemo(() => {
     const cancel = () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = undefined;
-      }
+      if (!timerRef.current) return;
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
     };
     const debouncedCallback = function (...args) {
       cancel();

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

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { getElement, isTarget } from '@/utils/helpers';
 import { useRefState } from '../useRefState/useRefState';
-const DEFAULT_THRESHOLD_TIME = 300;
+export const DEFAULT_THRESHOLD_TIME = 300;
 /**
  * @name useDoubleClick
  * @description - Hook that defines the logic when double clicking an element

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

@@ -5,23 +5,28 @@ const getHash = () => decodeURIComponent(window.location.hash.replace('#', ''));
  * @description - Hook that manages the hash value
  * @category Browser
  *
+ * @param {string} [initialValue] The initial hash value if no hash exists
  * @returns {UseHashReturn} An array containing the hash value and a function to set the hash value
  *
  * @example
- * const [hash, setHash] = useHash();
+ * const [hash, setHash] = useHash("initial");
  */
-export const useHash = () => {
-  const [hash, setHash] = useState(window ? getHash() : '');
+export const useHash = (initialValue = '', mode = 'replace') => {
+  const [hash, setHash] = useState(() => {
+    if (typeof window === 'undefined') return initialValue;
+    return getHash() || initialValue;
+  });
   const set = (value) => {
     window.location.hash = value;
     setHash(value);
   };
   useEffect(() => {
+    if (mode === 'replace') window.location.hash = hash;
     const onHashChange = () => setHash(getHash());
     window.addEventListener('hashchange', onHashChange);
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  });
+  }, []);
   return [hash, set];
 };

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

@@ -0,0 +1,36 @@
+import { useEffect, useRef } from 'react';
+export const deepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== 'object') return a === b;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  if (Array.isArray(a))
+    return a.length === b.length && a.every((value, index) => deepEqual(value, b[index]));
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!keysB.includes(key)) return false;
+    if (!deepEqual(a[key], b[key])) return false;
+  }
+  return true;
+};
+/**
+ * @name useShallowEffect
+ * @description - Hook that executes an effect only when dependencies change shallowly or deeply.
+ * @category Lifecycle
+ *
+ * @param {EffectCallback} effect The effect callback
+ * @param {DependencyList} [deps] The dependencies list for the effect
+ *
+ * @example
+ * useShallowEffect(() => console.log("effect"), [user]);
+ */
+export const useShallowEffect = (effect, deps) => {
+  const depsRef = useRef(deps);
+  if (!depsRef.current || !deepEqual(deps, depsRef.current)) {
+    depsRef.current = deps;
+  }
+  useEffect(effect, depsRef.current);
+};

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

@@ -5,7 +5,12 @@ export const dispatchStorageEvent = (params) =>
 const setStorageItem = (storage, key, value) => {
   const oldValue = storage.getItem(key);
   storage.setItem(key, value);
-  dispatchStorageEvent({ key, oldValue, newValue: value, storageArea: storage });
+  dispatchStorageEvent({
+    key,
+    oldValue,
+    newValue: value,
+    storageArea: storage
+  });
 };
 const removeStorageItem = (storage, key) => {
   const oldValue = storage.getItem(key);