@reactuses/core 5.0.23 → 6.0.1

package/dist/index.cjs

@@ -13,12 +13,6 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var Cookies__default = /*#__PURE__*/_interopDefault(Cookies);
 var screenfull__default = /*#__PURE__*/_interopDefault(screenfull);
 
-const useLatest = (value)=>{
-    const ref = React.useRef(value);
-    ref.current = value;
-    return ref;
-};
-
 var _window_navigator, _window;
 function isFunction(val) {
     return typeof val === 'function';
@@ -32,6 +26,18 @@ const isNavigator = typeof navigator !== 'undefined';
 function noop() {}
 const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
 
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+
+const useLatest = (value)=>{
+    const ref = React.useRef(value);
+    useIsomorphicLayoutEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref;
+};
+
 function on(obj, ...args) {
     if (obj && obj.addEventListener) {
         obj.addEventListener(...args);
@@ -43,6 +49,7 @@ function off(obj, ...args) {
     }
 }
 const defaultWindow =  isBrowser ? window : undefined;
+const defaultDocument =  isBrowser ? document : undefined;
 
 const defaultOptions$1 = {};
 function defaultOnError(e) {
@@ -67,6 +74,12 @@ function getTargetElement(target, defaultElement) {
     return targetElement;
 }
 
+const updateReducer = (num)=>(num + 1) % 1000000;
+function useUpdate() {
+    const [, update] = React.useReducer(updateReducer, 0);
+    return update;
+}
+
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== 'production') {
         if (!Array.isArray(deps) || !deps.length) {
@@ -77,9 +90,16 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
         }
     }
     const ref = React.useRef(undefined);
-    if (!ref.current || !depsEqual(deps, ref.current)) {
+    const forceUpdate = useUpdate();
+    if (!ref.current) {
         ref.current = deps;
     }
+    useIsomorphicLayoutEffect(()=>{
+        if (!depsEqual(deps, ref.current)) {
+            ref.current = deps;
+            forceUpdate();
+        }
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     React.useEffect(effect, ref.current);
 };
@@ -133,8 +153,8 @@ const useActiveElement = ()=>{
         var _window;
         setActive((_window = window) == null ? void 0 : _window.document.activeElement);
     }, []);
-    useEventListener('blur', listener, ()=>window, true);
-    useEventListener('focus', listener, ()=>window, true);
+    useEventListener('blur', listener, defaultWindow, true);
+    useEventListener('focus', listener, defaultWindow, true);
     useMount(()=>{
         var _window;
         setActive((_window = window) == null ? void 0 : _window.document.activeElement);
@@ -288,8 +308,6 @@ const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
     ];
 };
 
-const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
-
 /**
  * keep function reference immutable
  */ const useEvent = (fn)=>{
@@ -695,11 +713,11 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     ];
 }
 
+function value() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
 const useDarkMode = (options)=>{
     const { selector = 'html', attribute = 'class', classNameDark = '', classNameLight = '', storageKey = 'reactuses-color-scheme', storage = ()=>isBrowser ? localStorage : undefined, defaultValue = false } = options;
-    const value = ()=>{
-        return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    };
     const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
         mountStorageValue: value
     });
@@ -2168,7 +2186,7 @@ const useMouse = (target)=>{
             newState.elementH = height;
         }
         setState(newState);
-    }, ()=>document);
+    }, defaultDocument);
     return state;
 };
 
@@ -2465,24 +2483,24 @@ function usePreferredDark(defaultState) {
     return useMediaQuery('(prefers-color-scheme: dark)', defaultState);
 }
 
-function usePrevious(state) {
-    const ref = React.useRef();
-    React.useEffect(()=>{
-        ref.current = state;
-    });
-    return ref.current;
+// Following these issues I think this is the best way to implement usePrevious:
+// https://github.com/childrentime/reactuse/issues/115
+// https://github.com/streamich/react-use/issues/2605
+// https://github.com/alibaba/hooks/issues/2162
+function usePrevious(value) {
+    const [current, setCurrent] = React.useState(value);
+    const [previous, setPrevious] = React.useState();
+    if (value !== current) {
+        setPrevious(current);
+        setCurrent(value);
+    }
+    return previous;
 }
 
 function useReducedMotion(defaultState) {
     return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState);
 }
 
-const updateReducer = (num)=>(num + 1) % 1000000;
-function useUpdate() {
-    const [, update] = React.useReducer(updateReducer, 0);
-    return update;
-}
-
 const topVarName = '--reactuse-safe-area-top';
 const rightVarName = '--reactuse-safe-area-right';
 const bottomVarName = '--reactuse-safe-area-bottom';
@@ -3898,7 +3916,6 @@ const useFetchEventSource = (url, options = {})=>{
                 });
             }
             yield fetchEventSource.fetchEventSource(url.toString(), _extends({}, finalOptions, {
-                openWhenHidden: false,
                 onopen (response) {
                     return _async_to_generator(function*() {
                         if (response.ok) {

package/dist/index.d.cts

@@ -1996,7 +1996,7 @@ declare const usePreferredContrast: UsePreferredContrast;
 
 declare function usePreferredDark(defaultState?: boolean): boolean;
 
-declare function usePrevious<T>(state: T): T | undefined;
+declare function usePrevious<T>(value: T): T | undefined;
 
 /**
  * @title useRafFn
@@ -2435,7 +2435,7 @@ interface UseTimeoutOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }
@@ -2476,7 +2476,7 @@ interface UseTimeoutFnOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }

package/dist/index.d.mts

@@ -1996,7 +1996,7 @@ declare const usePreferredContrast: UsePreferredContrast;
 
 declare function usePreferredDark(defaultState?: boolean): boolean;
 
-declare function usePrevious<T>(state: T): T | undefined;
+declare function usePrevious<T>(value: T): T | undefined;
 
 /**
  * @title useRafFn
@@ -2435,7 +2435,7 @@ interface UseTimeoutOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }
@@ -2476,7 +2476,7 @@ interface UseTimeoutFnOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }

package/dist/index.d.ts

@@ -1996,7 +1996,7 @@ declare const usePreferredContrast: UsePreferredContrast;
 
 declare function usePreferredDark(defaultState?: boolean): boolean;
 
-declare function usePrevious<T>(state: T): T | undefined;
+declare function usePrevious<T>(value: T): T | undefined;
 
 /**
  * @title useRafFn
@@ -2435,7 +2435,7 @@ interface UseTimeoutOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }
@@ -2476,7 +2476,7 @@ interface UseTimeoutFnOptions {
     /**
      * @en Start the timer immediate after calling this function
      * @zh 立即设置定时器
-     * @defaultValue false
+     * @defaultValue true
      */
     immediate?: boolean;
 }

package/dist/index.mjs

@@ -1,16 +1,10 @@
-import React, { useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo, useReducer } from 'react';
+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 { fetchEventSource } from '@microsoft/fetch-event-source';
 
-const useLatest = (value)=>{
-    const ref = useRef(value);
-    ref.current = value;
-    return ref;
-};
-
 var _window_navigator, _window;
 function isFunction(val) {
     return typeof val === 'function';
@@ -24,6 +18,18 @@ const isNavigator = typeof navigator !== 'undefined';
 function noop() {}
 const isIOS = isBrowser && ((_window = window) == null ? void 0 : (_window_navigator = _window.navigator) == null ? void 0 : _window_navigator.userAgent) && /iP(?:ad|hone|od)/.test(window.navigator.userAgent);
 
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+const useLatest = (value)=>{
+    const ref = useRef(value);
+    useIsomorphicLayoutEffect(()=>{
+        ref.current = value;
+    }, [
+        value
+    ]);
+    return ref;
+};
+
 function on(obj, ...args) {
     if (obj && obj.addEventListener) {
         obj.addEventListener(...args);
@@ -35,6 +41,7 @@ function off(obj, ...args) {
     }
 }
 const defaultWindow =  isBrowser ? window : undefined;
+const defaultDocument =  isBrowser ? document : undefined;
 
 const defaultOptions$1 = {};
 function defaultOnError(e) {
@@ -59,6 +66,12 @@ function getTargetElement(target, defaultElement) {
     return targetElement;
 }
 
+const updateReducer = (num)=>(num + 1) % 1000000;
+function useUpdate() {
+    const [, update] = useReducer(updateReducer, 0);
+    return update;
+}
+
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== 'production') {
         if (!Array.isArray(deps) || !deps.length) {
@@ -69,9 +82,16 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
         }
     }
     const ref = useRef(undefined);
-    if (!ref.current || !depsEqual(deps, ref.current)) {
+    const forceUpdate = useUpdate();
+    if (!ref.current) {
         ref.current = deps;
     }
+    useIsomorphicLayoutEffect(()=>{
+        if (!depsEqual(deps, ref.current)) {
+            ref.current = deps;
+            forceUpdate();
+        }
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(effect, ref.current);
 };
@@ -125,8 +145,8 @@ const useActiveElement = ()=>{
         var _window;
         setActive((_window = window) == null ? void 0 : _window.document.activeElement);
     }, []);
-    useEventListener('blur', listener, ()=>window, true);
-    useEventListener('focus', listener, ()=>window, true);
+    useEventListener('blur', listener, defaultWindow, true);
+    useEventListener('focus', listener, defaultWindow, true);
     useMount(()=>{
         var _window;
         setActive((_window = window) == null ? void 0 : _window.document.activeElement);
@@ -280,8 +300,6 @@ const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
     ];
 };
 
-const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-
 /**
  * keep function reference immutable
  */ const useEvent = (fn)=>{
@@ -687,11 +705,11 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     ];
 }
 
+function value() {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+}
 const useDarkMode = (options)=>{
     const { selector = 'html', attribute = 'class', classNameDark = '', classNameLight = '', storageKey = 'reactuses-color-scheme', storage = ()=>isBrowser ? localStorage : undefined, defaultValue = false } = options;
-    const value = ()=>{
-        return window.matchMedia('(prefers-color-scheme: dark)').matches;
-    };
     const [dark, setDark] = useStorage(storageKey, defaultValue, storage, {
         mountStorageValue: value
     });
@@ -2160,7 +2178,7 @@ const useMouse = (target)=>{
             newState.elementH = height;
         }
         setState(newState);
-    }, ()=>document);
+    }, defaultDocument);
     return state;
 };
 
@@ -2457,24 +2475,24 @@ function usePreferredDark(defaultState) {
     return useMediaQuery('(prefers-color-scheme: dark)', defaultState);
 }
 
-function usePrevious(state) {
-    const ref = useRef();
-    useEffect(()=>{
-        ref.current = state;
-    });
-    return ref.current;
+// Following these issues I think this is the best way to implement usePrevious:
+// https://github.com/childrentime/reactuse/issues/115
+// https://github.com/streamich/react-use/issues/2605
+// https://github.com/alibaba/hooks/issues/2162
+function usePrevious(value) {
+    const [current, setCurrent] = useState(value);
+    const [previous, setPrevious] = useState();
+    if (value !== current) {
+        setPrevious(current);
+        setCurrent(value);
+    }
+    return previous;
 }
 
 function useReducedMotion(defaultState) {
     return useMediaQuery('(prefers-reduced-motion: reduce)', defaultState);
 }
 
-const updateReducer = (num)=>(num + 1) % 1000000;
-function useUpdate() {
-    const [, update] = useReducer(updateReducer, 0);
-    return update;
-}
-
 const topVarName = '--reactuse-safe-area-top';
 const rightVarName = '--reactuse-safe-area-right';
 const bottomVarName = '--reactuse-safe-area-bottom';
@@ -3890,7 +3908,6 @@ const useFetchEventSource = (url, options = {})=>{
                 });
             }
             yield fetchEventSource(url.toString(), _extends({}, finalOptions, {
-                openWhenHidden: false,
                 onopen (response) {
                     return _async_to_generator(function*() {
                         if (response.ok) {

package/dist/useQRCode.cjs

@@ -1,13 +1,24 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var QRCode = require('qrcode');
-var react = require('react');
+var React = require('react');
 var lodashEs = require('lodash-es');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var QRCode__default = /*#__PURE__*/_interopDefault(QRCode);
 
+process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isBrowser = typeof window !== 'undefined';
+
+const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;
+
+const updateReducer = (num)=>(num + 1) % 1000000;
+function useUpdate() {
+    const [, update] = React.useReducer(updateReducer, 0);
+    return update;
+}
+
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== 'production') {
         if (!Array.isArray(deps) || !deps.length) {
@@ -17,12 +28,19 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
             console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
         }
     }
-    const ref = react.useRef(undefined);
-    if (!ref.current || !depsEqual(deps, ref.current)) {
+    const ref = React.useRef(undefined);
+    const forceUpdate = useUpdate();
+    if (!ref.current) {
         ref.current = deps;
     }
+    useIsomorphicLayoutEffect(()=>{
+        if (!depsEqual(deps, ref.current)) {
+            ref.current = deps;
+            forceUpdate();
+        }
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    react.useEffect(effect, ref.current);
+    React.useEffect(effect, ref.current);
 };
 
 const useDeepCompareEffect = (effect, deps)=>{
@@ -69,8 +87,8 @@ function generateQRCode(text, options) {
     return QRCode__default.default.toDataURL(text, options);
 }
 const useQRCode = (text, options = defaultOptions)=>{
-    const [qrCode, setQRCode] = react.useState('');
-    const [error, setError] = react.useState(null);
+    const [qrCode, setQRCode] = React.useState('');
+    const [error, setError] = React.useState(null);
     useDeepCompareEffect(()=>{
         const generate = /*#__PURE__*/ _async_to_generator(function*() {
             try {

package/dist/useQRCode.mjs

@@ -1,7 +1,18 @@
 import QRCode from 'qrcode';
-import { useRef, useEffect, useState } from 'react';
+import { useLayoutEffect, useEffect, useReducer, useRef, useState } from 'react';
 import { isEqual } from 'lodash-es';
 
+process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test';
+const isBrowser = typeof window !== 'undefined';
+
+const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+
+const updateReducer = (num)=>(num + 1) % 1000000;
+function useUpdate() {
+    const [, update] = useReducer(updateReducer, 0);
+    return update;
+}
+
 const useCustomCompareEffect = (effect, deps, depsEqual)=>{
     if (process.env.NODE_ENV !== 'production') {
         if (!Array.isArray(deps) || !deps.length) {
@@ -12,9 +23,16 @@ const useCustomCompareEffect = (effect, deps, depsEqual)=>{
         }
     }
     const ref = useRef(undefined);
-    if (!ref.current || !depsEqual(deps, ref.current)) {
+    const forceUpdate = useUpdate();
+    if (!ref.current) {
         ref.current = deps;
     }
+    useIsomorphicLayoutEffect(()=>{
+        if (!depsEqual(deps, ref.current)) {
+            ref.current = deps;
+            forceUpdate();
+        }
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(effect, ref.current);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "5.0.23",
+  "version": "6.0.1",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {
@@ -66,7 +66,7 @@
   },
   "peerDependencies": {
     "qrcode": "^1.5",
-    "react": "^16.8.0  || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "qrcode": {
@@ -75,6 +75,7 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
+    "@testing-library/dom": "^10.4.0",
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
     "screenfull": "^5.0.0",
@@ -83,7 +84,7 @@
   "devDependencies": {
     "@jsdevtools/version-bump-prompt": "^6.1.0",
     "@reactuses/ts-document": "workspace:*",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/jest": "^27.5.2",
     "@types/js-cookie": "^3.0.3",
     "@types/lodash": "^4.14.184",
@@ -99,8 +100,8 @@
     "jest-environment-node": "^29.7.0",
     "lodash": "^4.17.21",
     "qrcode": "^1.5.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "typescript": "^5.3.3"
   }
 }