@reactuses/core 6.2.0 → 6.3.0

package/dist/index.cjs

@@ -3,8 +3,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var lodashEs = require('lodash-es');
 var Cookies = require('js-cookie');
-var screenfull = require('screenfull');
 var index_js = require('use-sync-external-store/shim/index.js');
+var screenfull = require('screenfull');
 var fetchEventSource = require('@microsoft/fetch-event-source');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -292,7 +292,7 @@ const useClickOutside = (target, handler, enabled = true)=>{
     useEventListener('touchstart', listener, defaultWindow, listerOptions);
 };
 
-function getInitialState$5(key, defaultValue) {
+function getInitialState$4(key, defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -306,7 +306,7 @@ function getInitialState$5(key, defaultValue) {
     return '';
 }
 const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
-    const [cookieValue, setCookieValue] = React.useState(getInitialState$5(key, defaultValue));
+    const [cookieValue, setCookieValue] = React.useState(getInitialState$4(key, defaultValue));
     React.useEffect(()=>{
         const getStoredValue = ()=>{
             const raw = Cookies__default.default.get(key);
@@ -525,7 +525,7 @@ const defaultOptions = {
     observe: false
 };
 
-function getInitialState$4(defaultValue) {
+function getInitialState$3(defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -540,7 +540,7 @@ function getInitialState$4(defaultValue) {
 }
 const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
     const { observe } = options;
-    const [variable, setVariable] = React.useState(getInitialState$4(defaultValue));
+    const [variable, setVariable] = React.useState(getInitialState$3(defaultValue));
     const observerRef = React.useRef();
     const set = React.useCallback((v)=>{
         const element = getTargetElement(target);
@@ -662,28 +662,6 @@ const StorageSerializers = {
         write: (v)=>v.toISOString()
     }
 };
-function getInitialState$3(key, defaultValue, storage, serializer, onError) {
-    // Prevent a React hydration mismatch when a default value is provided.
-    if (defaultValue !== undefined) {
-        return defaultValue;
-    }
-    if (isBrowser) {
-        try {
-            const raw = storage == null ? void 0 : storage.getItem(key);
-            if (raw !== undefined && raw !== null) {
-                return serializer == null ? void 0 : serializer.read(raw);
-            }
-            return null;
-        } catch (error) {
-            onError == null ? void 0 : onError(error);
-        }
-    }
-    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
-    if (process.env.NODE_ENV !== 'production') {
-        console.warn('`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
-    }
-    return null;
-}
 function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
     let storage;
     const { onError = defaultOnError, effectStorageValue, mountStorageValue, listenToStorageChanges = true } = options;
@@ -697,65 +675,135 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     const type = guessSerializerType(defaultValue);
     var _options_serializer;
     const serializerRef = useLatest((_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type]);
-    const [state, setState] = React.useState(getInitialState$3(key, defaultValue, storage, serializerRef.current, onError));
-    useDeepCompareEffect(()=>{
+    // storageRef and defaultValueRef are updated synchronously each render so that
+    // the stable getSnapshot/getServerSnapshot closures always read current values.
+    const storageRef = React.useRef(storage);
+    storageRef.current = storage;
+    const defaultValueRef = React.useRef(defaultValue);
+    defaultValueRef.current = defaultValue;
+    // Cache for referential stability of deserialized values.
+    // lastRawRef uses three-state semantics:
+    //   undefined → no cached value (initial state or after key change) — absent key yields defaultValue
+    //   null      → key was explicitly removed (setState(null) or cross-tab) — absent key yields null
+    //   string    → cached raw string — compared for referential stability
+    const lastRawRef = React.useRef(undefined);
+    const lastKeyRef = React.useRef(key);
+    const lastValueRef = React.useRef(defaultValue != null ? defaultValue : null);
+    // Reset per-key caches when the key changes (runs during render, before snapshot).
+    if (lastKeyRef.current !== key) {
+        lastKeyRef.current = key;
+        lastRawRef.current = undefined;
+        lastValueRef.current = defaultValue != null ? defaultValue : null;
+    }
+    // Internal per-instance subscriber callback stored so updateState can notify it.
+    const notifyRef = React.useRef(null);
+    const getSnapshot = React.useRef(()=>{
+        const currentStorage = storageRef.current;
+        var _defaultValueRef_current;
+        const fallback = (_defaultValueRef_current = defaultValueRef.current) != null ? _defaultValueRef_current : null;
+        if (!currentStorage) {
+            // Storage unavailable — act as an in-memory state holder using the same
+            // three-state lastRawRef semantics so updateState() still works.
+            if (lastRawRef.current === undefined) return fallback;
+            return lastRawRef.current === null ? null : lastValueRef.current;
+        }
+        try {
+            const raw = currentStorage.getItem(lastKeyRef.current);
+            if (raw === null) {
+                // lastRawRef === null means the key was explicitly removed; return null.
+                // lastRawRef !== null means the key is merely absent (e.g. after key change); return defaultValue.
+                return lastRawRef.current === null ? null : fallback;
+            }
+            if (raw === lastRawRef.current) return lastValueRef.current;
+            const deserialized = serializerRef.current.read(raw);
+            lastRawRef.current = raw;
+            lastValueRef.current = deserialized;
+            return deserialized;
+        } catch (e) {
+            onErrorRef.current(e);
+            return fallback;
+        }
+    }).current;
+    const getServerSnapshot = React.useRef(()=>{
+        var _defaultValueRef_current;
+        return (_defaultValueRef_current = defaultValueRef.current) != null ? _defaultValueRef_current : null;
+    }).current;
+    // subscribe is stable: it only registers/clears the React-provided callback.
+    // Cross-tab listener management is handled separately in a useEffect so that
+    // changes to listenToStorageChanges are properly reflected after mount.
+    const subscribe = React.useRef((callback)=>{
+        notifyRef.current = callback;
+        return ()=>{
+            notifyRef.current = null;
+        };
+    }).current;
+    const state = index_js.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    // Manage the cross-tab storage listener independently so that toggling
+    // listenToStorageChanges after mount correctly adds or removes the listener.
+    React.useEffect(()=>{
+        if (!listenToStorageChanges || !isBrowser) return;
+        const crossTabListener = (e)=>{
+            // e.key is null when storage.clear() is called from another tab (Web Storage
+            // spec). In that case all keys are affected, so always notify. Otherwise only
+            // notify when the event matches the current key.
+            // lastKeyRef is updated synchronously during render, so it always holds the
+            // latest key at the time this async event fires.
+            if (e.key !== null && e.key !== lastKeyRef.current) return;
+            // e.newValue is null when the key was removed (removeItem or clear).
+            // Update the in-memory caches now so getSnapshot returns null immediately
+            // rather than falling back to defaultValue, matching the old behavior where
+            // the cross-tab listener called updateState(null) for absent keys.
+            if (e.newValue === null) {
+                lastRawRef.current = null;
+                lastValueRef.current = null;
+            }
+            notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
+        };
+        window.addEventListener('storage', crossTabListener);
+        return ()=>window.removeEventListener('storage', crossTabListener);
+    }, [
+        listenToStorageChanges
+    ]);
+    // Write mountStorageValue / defaultValue to storage on mount when key is absent.
+    React.useEffect(()=>{
         const serializer = serializerRef.current;
         const storageValue = storageValueRef.current;
         var _ref;
         const data = (_ref = storageValue ? isFunction(storageValue) ? storageValue() : storageValue : defaultValue) != null ? _ref : null;
-        const getStoredValue = ()=>{
-            try {
-                const raw = storage == null ? void 0 : storage.getItem(key);
-                if (raw !== undefined && raw !== null) {
-                    return serializer.read(raw);
-                } else {
-                    storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-                    return data;
-                }
-            } catch (e) {
-                onErrorRef.current(e);
+        try {
+            const raw = storage == null ? void 0 : storage.getItem(key);
+            if ((raw === null || raw === undefined) && data !== null) {
+                storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+                lastRawRef.current = undefined;
+                notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
             }
-        };
-        setState(getStoredValue());
+        } catch (e) {
+            onErrorRef.current(e);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         key,
         storage
     ]);
     const updateState = useEvent((valOrFunc)=>{
-        const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
-        setState(currentState);
+        const currentState = isFunction(valOrFunc) ? valOrFunc(getSnapshot()) : valOrFunc;
         if (currentState === null) {
             storage == null ? void 0 : storage.removeItem(key);
+            lastRawRef.current = null;
+            lastValueRef.current = null;
         } else {
             try {
-                storage == null ? void 0 : storage.setItem(key, serializerRef.current.write(currentState));
+                const raw = serializerRef.current.write(currentState);
+                storage == null ? void 0 : storage.setItem(key, raw);
+                lastRawRef.current = raw;
+                lastValueRef.current = currentState;
             } catch (e) {
                 onErrorRef.current(e);
+                return;
             }
         }
+        notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
     });
-    const listener = useEvent(()=>{
-        try {
-            const raw = storage == null ? void 0 : storage.getItem(key);
-            if (raw !== undefined && raw !== null) {
-                updateState(serializerRef.current.read(raw));
-            } else {
-                updateState(null);
-            }
-        } catch (e) {
-            onErrorRef.current(e);
-        }
-    });
-    React.useEffect(()=>{
-        if (listenToStorageChanges) {
-            window.addEventListener('storage', listener);
-            return ()=>window.removeEventListener('storage', listener);
-        }
-        return ()=>{};
-    }, [
-        listenToStorageChanges,
-        listener
-    ]);
     return [
         state,
         updateState

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import React, { useLayoutEffect, useEffect, useRef, useReducer, useState, useCallback, useMemo } from 'react';
 import { isEqual, debounce, throttle } from 'lodash-es';
 import Cookies from 'js-cookie';
-import screenfull from 'screenfull';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
+import screenfull from 'screenfull';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 var _window_navigator, _window;
@@ -284,7 +284,7 @@ const useClickOutside = (target, handler, enabled = true)=>{
     useEventListener('touchstart', listener, defaultWindow, listerOptions);
 };
 
-function getInitialState$5(key, defaultValue) {
+function getInitialState$4(key, defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -298,7 +298,7 @@ function getInitialState$5(key, defaultValue) {
     return '';
 }
 const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
-    const [cookieValue, setCookieValue] = useState(getInitialState$5(key, defaultValue));
+    const [cookieValue, setCookieValue] = useState(getInitialState$4(key, defaultValue));
     useEffect(()=>{
         const getStoredValue = ()=>{
             const raw = Cookies.get(key);
@@ -517,7 +517,7 @@ const defaultOptions = {
     observe: false
 };
 
-function getInitialState$4(defaultValue) {
+function getInitialState$3(defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -532,7 +532,7 @@ function getInitialState$4(defaultValue) {
 }
 const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
     const { observe } = options;
-    const [variable, setVariable] = useState(getInitialState$4(defaultValue));
+    const [variable, setVariable] = useState(getInitialState$3(defaultValue));
     const observerRef = useRef();
     const set = useCallback((v)=>{
         const element = getTargetElement(target);
@@ -654,28 +654,6 @@ const StorageSerializers = {
         write: (v)=>v.toISOString()
     }
 };
-function getInitialState$3(key, defaultValue, storage, serializer, onError) {
-    // Prevent a React hydration mismatch when a default value is provided.
-    if (defaultValue !== undefined) {
-        return defaultValue;
-    }
-    if (isBrowser) {
-        try {
-            const raw = storage == null ? void 0 : storage.getItem(key);
-            if (raw !== undefined && raw !== null) {
-                return serializer == null ? void 0 : serializer.read(raw);
-            }
-            return null;
-        } catch (error) {
-            onError == null ? void 0 : onError(error);
-        }
-    }
-    // A default value has not been provided, and you are rendering on the server, warn of a possible hydration mismatch when defaulting to false.
-    if (process.env.NODE_ENV !== 'production') {
-        console.warn('`createStorage` When server side rendering, defaultValue should be defined to prevent a hydration mismatches.');
-    }
-    return null;
-}
 function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStorage : undefined, options = defaultOptions$1) {
     let storage;
     const { onError = defaultOnError, effectStorageValue, mountStorageValue, listenToStorageChanges = true } = options;
@@ -689,65 +667,135 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     const type = guessSerializerType(defaultValue);
     var _options_serializer;
     const serializerRef = useLatest((_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type]);
-    const [state, setState] = useState(getInitialState$3(key, defaultValue, storage, serializerRef.current, onError));
-    useDeepCompareEffect(()=>{
+    // storageRef and defaultValueRef are updated synchronously each render so that
+    // the stable getSnapshot/getServerSnapshot closures always read current values.
+    const storageRef = useRef(storage);
+    storageRef.current = storage;
+    const defaultValueRef = useRef(defaultValue);
+    defaultValueRef.current = defaultValue;
+    // Cache for referential stability of deserialized values.
+    // lastRawRef uses three-state semantics:
+    //   undefined → no cached value (initial state or after key change) — absent key yields defaultValue
+    //   null      → key was explicitly removed (setState(null) or cross-tab) — absent key yields null
+    //   string    → cached raw string — compared for referential stability
+    const lastRawRef = useRef(undefined);
+    const lastKeyRef = useRef(key);
+    const lastValueRef = useRef(defaultValue != null ? defaultValue : null);
+    // Reset per-key caches when the key changes (runs during render, before snapshot).
+    if (lastKeyRef.current !== key) {
+        lastKeyRef.current = key;
+        lastRawRef.current = undefined;
+        lastValueRef.current = defaultValue != null ? defaultValue : null;
+    }
+    // Internal per-instance subscriber callback stored so updateState can notify it.
+    const notifyRef = useRef(null);
+    const getSnapshot = useRef(()=>{
+        const currentStorage = storageRef.current;
+        var _defaultValueRef_current;
+        const fallback = (_defaultValueRef_current = defaultValueRef.current) != null ? _defaultValueRef_current : null;
+        if (!currentStorage) {
+            // Storage unavailable — act as an in-memory state holder using the same
+            // three-state lastRawRef semantics so updateState() still works.
+            if (lastRawRef.current === undefined) return fallback;
+            return lastRawRef.current === null ? null : lastValueRef.current;
+        }
+        try {
+            const raw = currentStorage.getItem(lastKeyRef.current);
+            if (raw === null) {
+                // lastRawRef === null means the key was explicitly removed; return null.
+                // lastRawRef !== null means the key is merely absent (e.g. after key change); return defaultValue.
+                return lastRawRef.current === null ? null : fallback;
+            }
+            if (raw === lastRawRef.current) return lastValueRef.current;
+            const deserialized = serializerRef.current.read(raw);
+            lastRawRef.current = raw;
+            lastValueRef.current = deserialized;
+            return deserialized;
+        } catch (e) {
+            onErrorRef.current(e);
+            return fallback;
+        }
+    }).current;
+    const getServerSnapshot = useRef(()=>{
+        var _defaultValueRef_current;
+        return (_defaultValueRef_current = defaultValueRef.current) != null ? _defaultValueRef_current : null;
+    }).current;
+    // subscribe is stable: it only registers/clears the React-provided callback.
+    // Cross-tab listener management is handled separately in a useEffect so that
+    // changes to listenToStorageChanges are properly reflected after mount.
+    const subscribe = useRef((callback)=>{
+        notifyRef.current = callback;
+        return ()=>{
+            notifyRef.current = null;
+        };
+    }).current;
+    const state = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    // Manage the cross-tab storage listener independently so that toggling
+    // listenToStorageChanges after mount correctly adds or removes the listener.
+    useEffect(()=>{
+        if (!listenToStorageChanges || !isBrowser) return;
+        const crossTabListener = (e)=>{
+            // e.key is null when storage.clear() is called from another tab (Web Storage
+            // spec). In that case all keys are affected, so always notify. Otherwise only
+            // notify when the event matches the current key.
+            // lastKeyRef is updated synchronously during render, so it always holds the
+            // latest key at the time this async event fires.
+            if (e.key !== null && e.key !== lastKeyRef.current) return;
+            // e.newValue is null when the key was removed (removeItem or clear).
+            // Update the in-memory caches now so getSnapshot returns null immediately
+            // rather than falling back to defaultValue, matching the old behavior where
+            // the cross-tab listener called updateState(null) for absent keys.
+            if (e.newValue === null) {
+                lastRawRef.current = null;
+                lastValueRef.current = null;
+            }
+            notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
+        };
+        window.addEventListener('storage', crossTabListener);
+        return ()=>window.removeEventListener('storage', crossTabListener);
+    }, [
+        listenToStorageChanges
+    ]);
+    // Write mountStorageValue / defaultValue to storage on mount when key is absent.
+    useEffect(()=>{
         const serializer = serializerRef.current;
         const storageValue = storageValueRef.current;
         var _ref;
         const data = (_ref = storageValue ? isFunction(storageValue) ? storageValue() : storageValue : defaultValue) != null ? _ref : null;
-        const getStoredValue = ()=>{
-            try {
-                const raw = storage == null ? void 0 : storage.getItem(key);
-                if (raw !== undefined && raw !== null) {
-                    return serializer.read(raw);
-                } else {
-                    storage == null ? void 0 : storage.setItem(key, serializer.write(data));
-                    return data;
-                }
-            } catch (e) {
-                onErrorRef.current(e);
+        try {
+            const raw = storage == null ? void 0 : storage.getItem(key);
+            if ((raw === null || raw === undefined) && data !== null) {
+                storage == null ? void 0 : storage.setItem(key, serializer.write(data));
+                lastRawRef.current = undefined;
+                notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
             }
-        };
-        setState(getStoredValue());
+        } catch (e) {
+            onErrorRef.current(e);
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         key,
         storage
     ]);
     const updateState = useEvent((valOrFunc)=>{
-        const currentState = isFunction(valOrFunc) ? valOrFunc(state) : valOrFunc;
-        setState(currentState);
+        const currentState = isFunction(valOrFunc) ? valOrFunc(getSnapshot()) : valOrFunc;
         if (currentState === null) {
             storage == null ? void 0 : storage.removeItem(key);
+            lastRawRef.current = null;
+            lastValueRef.current = null;
         } else {
             try {
-                storage == null ? void 0 : storage.setItem(key, serializerRef.current.write(currentState));
+                const raw = serializerRef.current.write(currentState);
+                storage == null ? void 0 : storage.setItem(key, raw);
+                lastRawRef.current = raw;
+                lastValueRef.current = currentState;
             } catch (e) {
                 onErrorRef.current(e);
+                return;
             }
         }
+        notifyRef.current == null ? void 0 : notifyRef.current.call(notifyRef);
     });
-    const listener = useEvent(()=>{
-        try {
-            const raw = storage == null ? void 0 : storage.getItem(key);
-            if (raw !== undefined && raw !== null) {
-                updateState(serializerRef.current.read(raw));
-            } else {
-                updateState(null);
-            }
-        } catch (e) {
-            onErrorRef.current(e);
-        }
-    });
-    useEffect(()=>{
-        if (listenToStorageChanges) {
-            window.addEventListener('storage', listener);
-            return ()=>window.removeEventListener('storage', listener);
-        }
-        return ()=>{};
-    }, [
-        listenToStorageChanges,
-        listener
-    ]);
     return [
         state,
         updateState

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "Collection of 100+ essential React Hooks with TypeScript support, tree-shaking, and SSR compatibility. Sensors, browser APIs, state management, animations, and more.",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",