@reactuses/core 5.0.18 → 5.0.19-beta.1

package/dist/index.mjs

@@ -199,7 +199,7 @@ const useClickOutside = (target, handler, enabled = true)=>{
     useEventListener('touchstart', listener, defaultWindow, listerOptions);
 };
 
-function getInitialState$4(key, defaultValue) {
+function getInitialState$5(key, defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -213,7 +213,7 @@ function getInitialState$4(key, defaultValue) {
     return '';
 }
 const useCookie = (key, options = defaultOptions$1, defaultValue)=>{
-    const [cookieValue, setCookieValue] = useState(getInitialState$4(key, defaultValue));
+    const [cookieValue, setCookieValue] = useState(getInitialState$5(key, defaultValue));
     useEffect(()=>{
         const getStoredValue = ()=>{
             const raw = Cookies.get(key);
@@ -434,7 +434,7 @@ const defaultOptions = {
     observe: false
 };
 
-function getInitialState$3(defaultValue) {
+function getInitialState$4(defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -449,7 +449,7 @@ function getInitialState$3(defaultValue) {
 }
 const useCssVar = (prop, target, defaultValue, options = defaultOptions)=>{
     const { observe } = options;
-    const [variable, setVariable] = useState(getInitialState$3(defaultValue));
+    const [variable, setVariable] = useState(getInitialState$4(defaultValue));
     const observerRef = useRef();
     const set = useCallback((v)=>{
         const element = getTargetElement(target);
@@ -571,7 +571,7 @@ const StorageSerializers = {
         write: (v)=>v.toISOString()
     }
 };
-function getInitialState$2(key, defaultValue, storage, serializer, onError) {
+function getInitialState$3(key, defaultValue, storage, serializer, onError) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -604,7 +604,7 @@ function useStorage(key, defaultValue, getStorage = ()=>isBrowser ? sessionStora
     const type = guessSerializerType(defaultValue);
     var _options_serializer;
     const serializer = (_options_serializer = options.serializer) != null ? _options_serializer : StorageSerializers[type];
-    const [state, setState] = useState(getInitialState$2(key, defaultValue, storage, serializer, onError));
+    const [state, setState] = useState(getInitialState$3(key, defaultValue, storage, serializer, onError));
     useDeepCompareEffect(()=>{
         var _ref;
         const data = (_ref = effectStorageValue ? isFunction(effectStorageValue) ? effectStorageValue() : effectStorageValue : defaultValue) != null ? _ref : null;
@@ -747,7 +747,7 @@ const useDebounce = (value, wait, options)=>{
     return debounced;
 };
 
-function getInitialState$1(defaultValue) {
+function getInitialState$2(defaultValue) {
     // Prevent a React hydration mismatch when a default value is provided.
     if (defaultValue !== undefined) {
         return defaultValue;
@@ -761,7 +761,7 @@ function getInitialState$1(defaultValue) {
     return 'visible';
 }
 function useDocumentVisibility(defaultValue) {
-    const [visible, setVisible] = useState(getInitialState$1(defaultValue));
+    const [visible, setVisible] = useState(getInitialState$2(defaultValue));
     useEventListener('visibilitychange', ()=>{
         setVisible(document.visibilityState);
     }, ()=>document);
@@ -2027,7 +2027,7 @@ const useMediaDevices = (options = {})=>{
     ];
 };
 
-function getInitialState(query, defaultState) {
+function getInitialState$1(query, defaultState) {
     // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
     if (defaultState !== undefined) {
         return defaultState;
@@ -2042,7 +2042,7 @@ function getInitialState(query, defaultState) {
     return false;
 }
 const useMediaQuery = (query, defaultState)=>{
-    const [state, setState] = useState(getInitialState(query, defaultState));
+    const [state, setState] = useState(getInitialState$1(query, defaultState));
     useEffect(()=>{
         let mounted = true;
         const mql = window.matchMedia(query);
@@ -3517,4 +3517,214 @@ const useEventSource = (url, events = [], options = defaultOptions$1)=>{
     }
 });
 
-export { defaultOptions, use, useActiveElement, useAsyncEffect, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };
+function getInitialState(defaultState) {
+    // Prevent a React hydration mismatch when a default value is provided by not defaulting to window.matchMedia(query).matches.
+    if (defaultState !== undefined) {
+        return defaultState;
+    }
+    if (isBrowser) {
+        const navigator1 = window.navigator;
+        return navigator1.languages;
+    }
+    // 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('`usePreferredLanguage` When server side rendering, defaultState should be defined to prevent a hydration mismatches.');
+    }
+    return [
+        'en'
+    ];
+}
+const usePreferredLanguages = (defaultLanguages)=>{
+    const [state, setState] = useState(getInitialState(defaultLanguages));
+    useEventListener('languagechange', ()=>{
+        setState(navigator.languages);
+    });
+    return state;
+};
+
+const useBroadcastChannel = (options)=>{
+    const { name } = options;
+    const isSupported = useSupported(()=>window && 'BroadcastChannel' in window);
+    const [isClosed, setIsClosed] = useState(false);
+    const [data, setData] = useState();
+    const [error, setError] = useState(null);
+    const [timeStamp, setTimeStamp] = useState(0);
+    const channelRef = useRef();
+    const post = useCallback((data)=>{
+        if (channelRef.current) {
+            channelRef.current.postMessage(data);
+        }
+    }, []);
+    const close = useCallback(()=>{
+        if (channelRef.current) {
+            channelRef.current.close();
+        }
+        setIsClosed(true);
+    }, []);
+    useEffect(()=>{
+        if (isSupported) {
+            channelRef.current = new BroadcastChannel(name);
+            setError(null);
+            const handleMessage = (e)=>{
+                setData(e.data);
+                // avoid data is same between two messages
+                setTimeStamp(Date.now());
+            };
+            const handleError = (e)=>{
+                setError(e);
+            };
+            const handleClose = ()=>{
+                setIsClosed(true);
+            };
+            channelRef.current.addEventListener('message', handleMessage, {
+                passive: true
+            });
+            channelRef.current.addEventListener('messageerror', handleError, {
+                passive: true
+            });
+            channelRef.current.addEventListener('close', handleClose);
+            return ()=>{
+                if (channelRef.current) {
+                    channelRef.current.removeEventListener('message', handleMessage);
+                    channelRef.current.removeEventListener('messageerror', handleError);
+                    channelRef.current.removeEventListener('close', handleClose);
+                    close();
+                }
+            };
+        }
+        return close;
+    }, [
+        isSupported,
+        name,
+        close
+    ]);
+    return {
+        isSupported,
+        channel: channelRef.current,
+        data,
+        post,
+        close,
+        error,
+        isClosed,
+        timeStamp
+    };
+};
+
+const useDevicePixelRatio = ()=>{
+    const [pixelRatio, setPixelRatio] = useState(1);
+    const observe = useCallback(()=>{
+        if (!window) return;
+        setPixelRatio(window.devicePixelRatio);
+        const media = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        const handleChange = ()=>{
+            observe();
+        };
+        media.addEventListener('change', handleChange, {
+            once: true
+        });
+        return ()=>{
+            media.removeEventListener('change', handleChange);
+        };
+    }, []);
+    useEffect(()=>{
+        const cleanup = observe();
+        return cleanup;
+    }, [
+        observe
+    ]);
+    return {
+        pixelRatio
+    };
+};
+
+const useElementByPoint = (options)=>{
+    const { x, y, document: doc = typeof document !== 'undefined' ? document : null, multiple = false, interval = 'requestAnimationFrame', immediate = true } = options;
+    const isSupported = useSupported(()=>{
+        if (multiple) return doc && 'elementsFromPoint' in doc;
+        return doc && 'elementFromPoint' in doc;
+    });
+    const [element, setElement] = useState(null);
+    const [isActive, setIsActive] = useState(immediate);
+    const rafIdRef = useRef(null);
+    const intervalIdRef = useRef(null);
+    const getXY = useCallback(()=>{
+        // 需要判断 NaN
+        const currentX = typeof x === 'function' ? x() : x;
+        const currentY = typeof y === 'function' ? y() : y;
+        return {
+            x: Number.isNaN(currentX) ? 0 : currentX,
+            y: Number.isNaN(currentY) ? 0 : currentY
+        };
+    }, [
+        x,
+        y
+    ]);
+    const cb = useCallback(()=>{
+        const { x: currentX, y: currentY } = getXY();
+        var _doc_elementsFromPoint, _doc_elementFromPoint;
+        setElement(multiple ? (_doc_elementsFromPoint = doc == null ? void 0 : doc.elementsFromPoint(currentX, currentY)) != null ? _doc_elementsFromPoint : [] : (_doc_elementFromPoint = doc == null ? void 0 : doc.elementFromPoint(currentX, currentY)) != null ? _doc_elementFromPoint : null);
+    }, [
+        doc,
+        multiple,
+        getXY
+    ]);
+    const cleanup = useCallback(()=>{
+        if (rafIdRef.current !== null) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        if (intervalIdRef.current !== null) {
+            clearInterval(intervalIdRef.current);
+            intervalIdRef.current = null;
+        }
+    }, []);
+    const pause = useCallback(()=>{
+        setIsActive(false);
+        cleanup();
+    }, [
+        cleanup
+    ]);
+    const resume = useCallback(()=>{
+        setIsActive(true);
+    }, []);
+    useEffect(()=>{
+        if (!isActive) {
+            return;
+        }
+        if (interval === 'requestAnimationFrame') {
+            const runRaf = ()=>{
+                cb();
+                rafIdRef.current = requestAnimationFrame(runRaf);
+            };
+            runRaf();
+        } else {
+            cb();
+            intervalIdRef.current = setInterval(cb, interval);
+        }
+        return cleanup;
+    }, [
+        isActive,
+        interval,
+        cb,
+        cleanup
+    ]);
+    useEffect(()=>{
+        if (immediate) {
+            resume();
+        }
+        return pause;
+    }, [
+        immediate,
+        resume,
+        pause
+    ]);
+    return {
+        isSupported,
+        element,
+        pause,
+        resume,
+        isActive
+    };
+};
+
+export { defaultOptions, use, useActiveElement, useAsyncEffect, useBroadcastChannel, useClickOutside, useClipboard, useControlled, useCookie, useCountDown, useCounter, useCssVar, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDevicePixelRatio, useDisclosure, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementByPoint, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEventSource, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, useFps, useFullscreen, useGeolocation, useHover, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLocationSelector, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMobileLandscape, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, useOnceEffect, useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePlatform, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePreferredLanguages, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScreenSafeArea, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, useUpdateLayoutEffect, useWebNotification, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/useQRCode.cjs

@@ -0,0 +1,95 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var QRCode = require('qrcode');
+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);
+
+const useCustomCompareEffect = (effect, deps, depsEqual)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (!Array.isArray(deps) || !deps.length) {
+            console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+        }
+        if (typeof depsEqual !== 'function') {
+            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)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    react.useEffect(effect, ref.current);
+};
+
+const useDeepCompareEffect = (effect, deps)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (!Array.isArray(deps) || !deps.length) {
+            console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+        }
+    }
+    useCustomCompareEffect(effect, deps, lodashEs.isEqual);
+};
+
+const defaultOptions = {};
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+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);
+    useDeepCompareEffect(()=>{
+        const generate = /*#__PURE__*/ _async_to_generator(function*() {
+            try {
+                const qrCode = yield generateQRCode(text, options);
+                setQRCode(qrCode);
+            } catch (error) {
+                setError(error);
+            }
+        });
+        generate();
+    }, [
+        text,
+        options
+    ]);
+    return {
+        qrCode,
+        error
+    };
+};
+
+exports.generateQRCode = generateQRCode;
+exports.useQRCode = useQRCode;

package/dist/useQRCode.d.cts

@@ -0,0 +1,36 @@
+import QRCode from 'qrcode';
+
+/**
+ * @title UseQRCode
+ */
+type UseQRCode = (
+/**
+ * @zh 文本
+ * @en Text
+ */
+text: string, 
+/**
+ * @zh 传递给 `QRCode.toDataURL` 的选项
+ * @en Options passed to `QRCode.toDataURL`
+ */
+options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
+/**
+ * @title UseQRCodeReturn
+ */
+interface UseQRCodeReturn {
+    /**
+     * @zh 生成的二维码
+     * @en Generated QR code
+     */
+    qrCode: string;
+    /**
+     * @zh 错误
+     * @en Error
+     */
+    error: unknown;
+}
+
+declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
+declare const useQRCode: UseQRCode;
+
+export { generateQRCode, useQRCode };

package/dist/useQRCode.d.mts

@@ -0,0 +1,36 @@
+import QRCode from 'qrcode';
+
+/**
+ * @title UseQRCode
+ */
+type UseQRCode = (
+/**
+ * @zh 文本
+ * @en Text
+ */
+text: string, 
+/**
+ * @zh 传递给 `QRCode.toDataURL` 的选项
+ * @en Options passed to `QRCode.toDataURL`
+ */
+options?: QRCode.QRCodeToDataURLOptions) => UseQRCodeReturn;
+/**
+ * @title UseQRCodeReturn
+ */
+interface UseQRCodeReturn {
+    /**
+     * @zh 生成的二维码
+     * @en Generated QR code
+     */
+    qrCode: string;
+    /**
+     * @zh 错误
+     * @en Error
+     */
+    error: unknown;
+}
+
+declare function generateQRCode(text: string, options?: QRCode.QRCodeToDataURLOptions): Promise<string>;
+declare const useQRCode: UseQRCode;
+
+export { generateQRCode, useQRCode };

package/dist/useQRCode.mjs

@@ -0,0 +1,88 @@
+import QRCode from 'qrcode';
+import { useRef, useEffect, useState } from 'react';
+import { isEqual } from 'lodash-es';
+
+const useCustomCompareEffect = (effect, deps, depsEqual)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (!Array.isArray(deps) || !deps.length) {
+            console.warn('`useCustomCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+        }
+        if (typeof depsEqual !== 'function') {
+            console.warn('`useCustomCompareEffect` should be used with depsEqual callback for comparing deps list');
+        }
+    }
+    const ref = useRef(undefined);
+    if (!ref.current || !depsEqual(deps, ref.current)) {
+        ref.current = deps;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, ref.current);
+};
+
+const useDeepCompareEffect = (effect, deps)=>{
+    if (process.env.NODE_ENV !== 'production') {
+        if (!Array.isArray(deps) || !deps.length) {
+            console.warn('`useDeepCompareEffect` should not be used with no dependencies. Use React.useEffect instead.');
+        }
+    }
+    useCustomCompareEffect(effect, deps, isEqual);
+};
+
+const defaultOptions = {};
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function generateQRCode(text, options) {
+    return QRCode.toDataURL(text, options);
+}
+const useQRCode = (text, options = defaultOptions)=>{
+    const [qrCode, setQRCode] = useState('');
+    const [error, setError] = useState(null);
+    useDeepCompareEffect(()=>{
+        const generate = /*#__PURE__*/ _async_to_generator(function*() {
+            try {
+                const qrCode = yield generateQRCode(text, options);
+                setQRCode(qrCode);
+            } catch (error) {
+                setError(error);
+            }
+        });
+        generate();
+    }, [
+        text,
+        options
+    ]);
+    return {
+        qrCode,
+        error
+    };
+};
+
+export { generateQRCode, useQRCode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "5.0.18",
+  "version": "5.0.19-beta.1",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {
@@ -31,6 +31,16 @@
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
+    },
+    "./useQRCode": {
+      "import": {
+        "types": "./dist/useQRCode.d.mts",
+        "default": "./dist/useQRCode.mjs"
+      },
+      "require": {
+        "types": "./dist/useQRCode.d.cts",
+        "default": "./dist/useQRCode.cjs"
+      }
     }
   },
   "main": "./dist/index.cjs",
@@ -55,8 +65,14 @@
     "test:coverage": "jest --coverage"
   },
   "peerDependencies": {
+    "qrcode": "^1.5",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0"
   },
+  "peerDependenciesMeta": {
+    "qrcode": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "js-cookie": "^3.0.5",
     "lodash-es": "^4.17.21",
@@ -71,6 +87,7 @@
     "@types/js-cookie": "^3.0.3",
     "@types/lodash": "^4.14.184",
     "@types/lodash-es": "^4.17.7",
+    "@types/qrcode": "^1.5.5",
     "@types/use-sync-external-store": "^0.0.6",
     "babel-jest": "^29.0.2",
     "consola": "^2.15.3",
@@ -80,6 +97,7 @@
     "jest-environment-jsdom": "^29.0.2",
     "jest-environment-node": "^29.7.0",
     "lodash": "^4.17.21",
+    "qrcode": "^1.5.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3"