ahooks - npm Package Compare versions

Comparing version 2.6.1 to 2.7.0

es/index.d.ts

@@ -54,3 +54,4 @@ import useRequest, { UseRequestProvider } from '@ahooksjs/use-request';
 import useCountDown from './useCountDown';
+import useWebSocket from './useWebSocket';
 declare const useControlledValue: typeof useControllableValue;
-export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown, };
+export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown, useWebSocket, };

es/index.js

@@ -89,2 +89,3 @@ var __read = this && this.__read || function (o, n) {
 import useCountDown from './useCountDown';
+import useWebSocket from './useWebSocket';
 
@@ -102,2 +103,2 @@ var useControlledValue = function useControlledValue() {
 
-export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown };
+export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown, useWebSocket };

es/useCookieState/index.d.ts

 import Cookies from 'js-cookie';
-export interface IOptions extends Cookies.CookieAttributes {
-    defaultValue?: TCookieState | ((cookieState?: string) => TCookieState);
+export declare type TCookieState = string | undefined | null;
+export declare type TCookieOptions = Cookies.CookieAttributes;
+export interface IOptions extends TCookieOptions {
+    defaultValue?: TCookieState | (() => TCookieState);
 }
-export declare type TCookieState = string | null | undefined;
-export declare type TCookieOptions = Cookies.CookieAttributes;
 declare function useCookieState(cookieKey: string, options?: IOptions): readonly [string | null | undefined, (newValue?: string | ((prevState: TCookieState) => TCookieState) | null | undefined, newOptions?: Cookies.CookieAttributes) => void];
 export default useCookieState;

es/useCookieState/index.js

@@ -57,9 +57,7 @@ var __assign = this && this.__assign || function () {
 
-import { useState, useCallback } from 'react';
 import Cookies from 'js-cookie';
+import { useState } from 'react';
+import { usePersistFn } from '../';
+import { isFunction } from '../utils';
 
-function isFunction(obj) {
-  return typeof obj === 'function';
-}
-
 function useCookieState(cookieKey, options) {
@@ -77,5 +75,6 @@ if (options === void 0) {
       state = _a[0],
-      setState = _a[1];
+      setState = _a[1]; // usePersistFn 保证返回的 updateState 不会变化
 
-  var updateState = useCallback(function (newValue, newOptions) {
+
+  var updateState = usePersistFn(function (newValue, newOptions) {
     if (newOptions === void 0) {
@@ -100,3 +99,3 @@ newOptions = {};
     });
-  }, [cookieKey, options]);
+  });
   return [state, updateState];
@@ -103,0 +102,0 @@ }

es/useCountDown/index.js

@@ -29,2 +29,3 @@ var __read = this && this.__read || function (o, n) {
 import { useEffect, useMemo, useState } from 'react';
+import dayjs from 'dayjs';
 
@@ -34,6 +35,7 @@ var calcLeft = function calcLeft(t) {
     return 0;
-  }
+  } // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
 
-  var left = new Date(t).getTime() - new Date().getTime();
 
+  var left = dayjs(t).valueOf() - new Date().getTime();
+
   if (left < 0) {
@@ -40,0 +42,0 @@ return 0;

es/useCounter/index.d.ts

@@ -11,3 +11,8 @@ export interface Options {
 }
-declare function useCounter(initialValue?: number, options?: Options): [number, Actions];
+declare function useCounter(initialValue?: number, options?: Options): readonly [number, {
+    inc: (delta?: number) => void;
+    dec: (delta?: number) => void;
+    set: (value: number | ((c: number) => number)) => void;
+    reset: () => void;
+}];
 export default useCounter;

es/useDebounceFn/index.d.ts

@@ -0,9 +1,9 @@
+/// <reference types="lodash" />
 import { DebounceOptions } from '../useDebounce/debounceOptions';
 declare type Fn = (...args: any) => any;
-interface ReturnValue<T extends Fn> {
-    run: T;
+declare function useDebounceFn<T extends Fn>(fn: T, options?: DebounceOptions): {
+    run: T & import("lodash").Cancelable;
     cancel: () => void;
     flush: () => void;
-}
-declare function useDebounceFn<T extends Fn>(fn: T, options?: DebounceOptions): ReturnValue<T>;
+};
 export default useDebounceFn;

es/useDebounceFn/index.js

@@ -38,3 +38,3 @@ var __read = this && this.__read || function (o, n) {
 import { useRef } from 'react';
-import { useCreation } from '../';
+import useCreation from '../useCreation';
 
@@ -55,3 +55,3 @@ function useDebounceFn(fn, options) {
 
-      fnRef.current.apply(fnRef, __spread(args));
+      return fnRef.current.apply(fnRef, __spread(args));
     }, wait, options);
@@ -58,0 +58,0 @@ }, []);

es/useDocumentVisibility/index.js

@@ -28,3 +28,4 @@ var __read = this && this.__read || function (o, n) {
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
+import useEventListener from '../useEventListener';
 
@@ -37,16 +38,13 @@ var getVisibility = function getVisibility() {
 function useDocumentVisibility() {
-  var _a = __read(useState(getVisibility()), 2),
+  var _a = __read(useState(function () {
+    return getVisibility();
+  }), 2),
       documentVisibility = _a[0],
       setDocumentVisibility = _a[1];
 
-  useEffect(function () {
-    var handleVisibilityChange = function handleVisibilityChange() {
-      setDocumentVisibility(getVisibility());
-    };
-
-    window.addEventListener('visibilitychange', handleVisibilityChange);
-    return function () {
-      window.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
+  useEventListener('visibilitychange', function () {
+    setDocumentVisibility(getVisibility());
+  }, {
+    target: document
+  });
   return documentVisibility;
@@ -53,0 +51,0 @@ }

es/useEventListener/index.d.ts

 import { BasicTarget } from '../utils/dom';
-export declare type Target = BasicTarget<HTMLElement | Window>;
+export declare type Target = BasicTarget<HTMLElement | Element | Window | Document>;
 declare type Options = {
@@ -4,0 +4,0 @@ target?: Target;

es/useEventListener/index.js

@@ -5,28 +5,33 @@ import { useEffect, useRef } from 'react';
 function useEventListener(eventName, handler, options) {
-  var savedHandler = useRef();
+  if (options === void 0) {
+    options = {};
+  }
+
+  var handlerRef = useRef();
+  handlerRef.current = handler;
   useEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  useEffect(function () {
-    var targetElement = getTargetElement(options === null || options === void 0 ? void 0 : options.target, window);
-    var isSupported = targetElement.addEventListener;
-    if (!isSupported) return;
+    var targetElement = getTargetElement(options.target, window);
 
+    if (!targetElement.addEventListener) {
+      return;
+    }
+
     var eventListener = function eventListener(event) {
-      return savedHandler.current && savedHandler.current(event);
+      return handlerRef.current && handlerRef.current(event);
     };
 
     targetElement.addEventListener(eventName, eventListener, {
-      capture: options === null || options === void 0 ? void 0 : options.capture,
-      once: options === null || options === void 0 ? void 0 : options.once,
-      passive: options === null || options === void 0 ? void 0 : options.passive
+      capture: options.capture,
+      once: options.once,
+      passive: options.passive
     });
     return function () {
       targetElement.removeEventListener(eventName, eventListener, {
-        capture: options === null || options === void 0 ? void 0 : options.capture
+        capture: options.capture
       });
     };
-  }, [eventName, options]);
+  }, [eventName, // 如果 options.target 是函数类型，比如 ()=>ref.current，则 useEffect 会多执行一次，因为初始化的时候 ref.current 是 undefined
+  typeof options.target === 'function' ? undefined : options.target, options.capture, options.once, options.passive]);
 }
 
 export default useEventListener;

es/useEventTarget/index.d.ts

@@ -6,7 +6,7 @@ interface EventTarget<U> {
 }
-interface Params<T, U> {
+export interface Options<T, U> {
     initialValue?: T;
     transformer?: (value: U) => T;
 }
-declare function useEventTarget<T, U = T>(params?: Params<T, U>): readonly [T | undefined, {
+declare function useEventTarget<T, U = T>(options?: Options<T, U>): readonly [T | undefined, {
     readonly onChange: (e: EventTarget<U>) => void;
@@ -13,0 +13,0 @@ readonly reset: () => void;

es/useEventTarget/index.js

@@ -30,4 +30,4 @@ var __read = this && this.__read || function (o, n) {
 
-function useEventTarget(params) {
-  var _a = params || {},
+function useEventTarget(options) {
+  var _a = options || {},
       initialValue = _a.initialValue,
@@ -42,3 +42,3 @@ transformer = _a.transformer;
     return setValue(initialValue);
-  }, [setValue]);
+  }, []);
   var transformerRef = useRef(transformer);
@@ -55,3 +55,3 @@ transformerRef.current = transformer;
     return setValue(_value);
-  }, [setValue]);
+  }, []);
   return [value, {
@@ -58,0 +58,0 @@ onChange: onChange,

es/useFavicon/index.js

@@ -13,6 +13,6 @@ import { useEffect } from 'react'; // image/vnd.microsoft.icon MIME类型只有当图像真的是ICO文件时才会起作用
 var useFavicon = function useFavicon(favUrl) {
-  var cutUrl = favUrl.split('.');
-  var imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase();
   useEffect(function () {
     if (!favUrl) return;
+    var cutUrl = favUrl.split('.');
+    var imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase();
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
@@ -19,0 +19,0 @@ link.type = ImgTypeMap[imgSuffix];

es/useFullscreen/index.d.ts

@@ -6,10 +6,7 @@ import { BasicTarget } from '../utils/dom';
 }
-interface Callback {
-    setFull: () => void;
-    exitFull: () => void;
-    toggleFull: () => void;
-}
-declare type Value = boolean;
-declare type Result = [Value, Callback];
-declare const _default: (target: BasicTarget, options?: Options | undefined) => Result;
+declare const _default: (target: BasicTarget, options?: Options | undefined) => readonly [boolean, {
+    readonly setFull: () => void;
+    readonly exitFull: () => void;
+    readonly toggleFull: () => void;
+}];
 export default _default;

es/useFullscreen/index.js

@@ -29,3 +29,3 @@ /* eslint no-empty: 0 */
 
-import { useLayoutEffect, useRef } from 'react';
+import { useCallback, useLayoutEffect, useRef } from 'react';
 import screenfull from 'screenfull';
@@ -105,8 +105,6 @@ import useBoolean from '../useBoolean';
     };
-  }, [state, typeof target === 'function' ? undefined : target]);
-
-  var toggleFull = function toggleFull() {
+  }, [state, toggle, setTrue, setFalse, typeof target === 'function' ? undefined : target]);
+  var toggleFull = useCallback(function () {
     return toggle();
-  };
-
+  }, [toggle]);
   return [!!state, {
@@ -113,0 +111,0 @@ setFull: setTrue,

es/useHover/index.js

@@ -28,5 +28,4 @@ var __read = this && this.__read || function (o, n) {
 
-import { useEffect, useRef } from 'react';
 import useBoolean from '../useBoolean';
-import { getTargetElement } from '../utils/dom';
+import useEventListener from '../useEventListener';
 export default (function (target, options) {
@@ -37,7 +36,2 @@ var _a = options || {},
 
-  var onEnterRef = useRef(onEnter);
-  onEnterRef.current = onEnter;
-  var onLeaveRef = useRef(onLeave);
-  onLeaveRef.current = onLeave;
-
   var _b = __read(useBoolean(false), 2),
@@ -49,25 +43,15 @@ state = _b[0],
 
-  useEffect(function () {
-    var onMouseEnter = function onMouseEnter() {
-      if (onEnterRef.current) onEnterRef.current();
-      setTrue();
-    };
-
-    var onMouseLeave = function onMouseLeave() {
-      if (onLeaveRef.current) onLeaveRef.current();
-      setFalse();
-    };
-
-    var targetElement = getTargetElement(target); // 如果 传入dom
-
-    if (targetElement) {
-      targetElement.addEventListener('mouseenter', onMouseEnter);
-      targetElement.addEventListener('mouseleave', onMouseLeave);
-      return function () {
-        targetElement.removeEventListener('mouseenter', onMouseEnter);
-        targetElement.removeEventListener('mouseleave', onMouseLeave);
-      };
-    }
-  }, [typeof target === 'function' ? undefined : target]);
+  useEventListener('mouseenter', function () {
+    onEnter && onEnter();
+    setTrue();
+  }, {
+    target: target
+  });
+  useEventListener('mouseleave', function () {
+    onLeave && onLeave();
+    setFalse();
+  }, {
+    target: target
+  });
   return state;
 });

es/useLocalStorageState/index.js

 import useStorageState from '../useStorageState';
 
 function useLocalStorageState(key, defaultValue) {
-  return useStorageState(localStorage, key, defaultValue);
+  return useStorageState(function () {
+    return localStorage;
+  }, key, defaultValue);
 }
 
 export default useLocalStorageState;

es/useSessionStorageState/index.js

 import useStorageState from '../useStorageState';
 
 function useSessionStorageState(key, defaultValue) {
-  return useStorageState(sessionStorage, key, defaultValue);
+  return useStorageState(function () {
+    return sessionStorage;
+  }, key, defaultValue);
 }
 
 export default useSessionStorageState;

es/useStorageState/index.d.ts

 export interface IFuncUpdater<T> {
     (previousState?: T): T;
 }
+export interface IFuncStorage {
+    (): Storage;
+}
 export declare type StorageStateDefaultValue<T> = T | IFuncUpdater<T>;
 export declare type StorageStateResult<T> = [T | undefined, (value: StorageStateDefaultValue<T>) => void];
-declare function useStorageState<T>(storage: Storage, key: string, defaultValue?: StorageStateDefaultValue<T>): StorageStateResult<T>;
+declare function useStorageState<T>(storage: Storage | IFuncStorage, key: string, defaultValue?: StorageStateDefaultValue<T>): StorageStateResult<T>;
 export default useStorageState;

es/useStorageState/index.js

@@ -36,2 +36,4 @@ var __read = this && this.__read || function (o, n) {
 function useStorageState(storage, key, defaultValue) {
+  if (typeof window !== 'object') return [isFunction(defaultValue) ? defaultValue() : defaultValue, function () {}];
+
   var _a = __read(useState(function () {
@@ -43,3 +45,11 @@ return getStoredValue();
 
+  useUpdateEffect(function () {
+    setState(getStoredValue());
+  }, [key]);
+
   function getStoredValue() {
+    if (isFunction(storage)) {
+      storage = storage();
+    }
+
     var raw = storage.getItem(key);
@@ -61,2 +71,6 @@
   function updateState(value) {
+    if (isFunction(storage)) {
+      storage = storage();
+    }
+
     if (typeof value === 'undefined') {
@@ -76,5 +90,2 @@ storage.removeItem(key);
 
-  useUpdateEffect(function () {
-    setState(getStoredValue());
-  }, [key]);
   return [state, updateState];
@@ -81,0 +92,0 @@ }

es/useThrottleFn/index.d.ts

@@ -0,9 +1,9 @@
+/// <reference types="lodash" />
 import { ThrottleOptions } from '../useThrottle/throttleOptions';
 declare type Fn = (...args: any) => any;
-interface ReturnValue<T extends Fn> {
-    run: T;
+declare function useThrottleFn<T extends Fn>(fn: T, options?: ThrottleOptions): {
+    run: T & import("lodash").Cancelable;
     cancel: () => void;
     flush: () => void;
-}
-declare function useThrottleFn<T extends Fn>(fn: T, options?: ThrottleOptions): ReturnValue<T>;
+};
 export default useThrottleFn;

es/useThrottleFn/index.js

@@ -38,3 +38,3 @@ var __read = this && this.__read || function (o, n) {
 import { useRef } from 'react';
-import { useCreation } from '../';
+import useCreation from '../useCreation';
 
@@ -55,3 +55,3 @@ function useThrottleFn(fn, options) {
 
-      fnRef.current.apply(fnRef, __spread(args));
+      return fnRef.current.apply(fnRef, __spread(args));
     }, wait, options);
@@ -58,0 +58,0 @@ }, []);

es/utils/dom.d.ts

 import { MutableRefObject } from 'react';
 export declare type BasicTarget<T = HTMLElement> = (() => T | null) | T | null | MutableRefObject<T | null | undefined>;
-declare type TargetElement = HTMLElement | Document | Window;
+declare type TargetElement = HTMLElement | Element | Document | Window;
 export declare function getTargetElement(target?: BasicTarget<TargetElement>, defaultElement?: TargetElement): TargetElement | undefined | null;
 export {};

lib/index.d.ts

@@ -54,3 +54,4 @@ import useRequest, { UseRequestProvider } from '@ahooksjs/use-request';
 import useCountDown from './useCountDown';
+import useWebSocket from './useWebSocket';
 declare const useControlledValue: typeof useControllableValue;
-export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown, };
+export { useControlledValue, useControllableValue, useDynamicList, useVirtualList, useResponsive, useEventEmitter, useLocalStorageState, useSessionStorageState, useSize, configResponsive, useUpdateEffect, useUpdateLayoutEffect, useBoolean, useToggle, useDocumentVisibility, useSelections, useThrottle, useThrottleFn, useThrottleEffect, useDebounce, useDebounceFn, useDebounceEffect, usePrevious, useMouse, useScroll, useClickAway, useFullscreen, useInViewport, useKeyPress, useEventListener, useHover, useRequest, UseRequestProvider, useAntdTable, useUnmount, useSet, usePersistFn, useMap, useCreation, useDrag, useDrop, useMount, useCounter, useUpdate, useTextSelection, useEventTarget, useHistoryTravel, useFusionTable, useCookieState, useSetState, useInterval, useWhyDidYouUpdate, useTitle, useNetwork, useTimeout, useFavicon, useCountDown, useWebSocket, };

lib/index.js

@@ -81,3 +81,3 @@ "use strict";
 });
-exports.useCountDown = exports.useFavicon = exports.useTimeout = exports.useNetwork = exports.useTitle = exports.useWhyDidYouUpdate = exports.useInterval = exports.useSetState = exports.useCookieState = exports.useFusionTable = exports.useHistoryTravel = exports.useEventTarget = exports.useTextSelection = exports.useUpdate = exports.useCounter = exports.useMount = exports.useDrop = exports.useDrag = exports.useCreation = exports.useMap = exports.usePersistFn = exports.useSet = exports.useUnmount = exports.useAntdTable = exports.UseRequestProvider = exports.useRequest = exports.useHover = exports.useEventListener = exports.useKeyPress = exports.useInViewport = exports.useFullscreen = exports.useClickAway = exports.useScroll = exports.useMouse = exports.usePrevious = exports.useDebounceEffect = exports.useDebounceFn = exports.useDebounce = exports.useThrottleEffect = exports.useThrottleFn = exports.useThrottle = exports.useSelections = exports.useDocumentVisibility = exports.useToggle = exports.useBoolean = exports.useUpdateLayoutEffect = exports.useUpdateEffect = exports.configResponsive = exports.useSize = exports.useSessionStorageState = exports.useLocalStorageState = exports.useEventEmitter = exports.useResponsive = exports.useVirtualList = exports.useDynamicList = exports.useControllableValue = exports.useControlledValue = void 0;
+exports.useWebSocket = exports.useCountDown = exports.useFavicon = exports.useTimeout = exports.useNetwork = exports.useTitle = exports.useWhyDidYouUpdate = exports.useInterval = exports.useSetState = exports.useCookieState = exports.useFusionTable = exports.useHistoryTravel = exports.useEventTarget = exports.useTextSelection = exports.useUpdate = exports.useCounter = exports.useMount = exports.useDrop = exports.useDrag = exports.useCreation = exports.useMap = exports.usePersistFn = exports.useSet = exports.useUnmount = exports.useAntdTable = exports.UseRequestProvider = exports.useRequest = exports.useHover = exports.useEventListener = exports.useKeyPress = exports.useInViewport = exports.useFullscreen = exports.useClickAway = exports.useScroll = exports.useMouse = exports.usePrevious = exports.useDebounceEffect = exports.useDebounceFn = exports.useDebounce = exports.useThrottleEffect = exports.useThrottleFn = exports.useThrottle = exports.useSelections = exports.useDocumentVisibility = exports.useToggle = exports.useBoolean = exports.useUpdateLayoutEffect = exports.useUpdateEffect = exports.configResponsive = exports.useSize = exports.useSessionStorageState = exports.useLocalStorageState = exports.useEventEmitter = exports.useResponsive = exports.useVirtualList = exports.useDynamicList = exports.useControllableValue = exports.useControlledValue = void 0;
 
@@ -324,2 +324,6 @@ var use_request_1 = __importStar(require("@ahooksjs/use-request"));
 
+var useWebSocket_1 = __importDefault(require("./useWebSocket"));
+
+exports.useWebSocket = useWebSocket_1["default"];
+
 var useControlledValue = function useControlledValue() {
@@ -326,0 +330,0 @@ var args = [];

lib/useCookieState/index.d.ts

 import Cookies from 'js-cookie';
-export interface IOptions extends Cookies.CookieAttributes {
-    defaultValue?: TCookieState | ((cookieState?: string) => TCookieState);
+export declare type TCookieState = string | undefined | null;
+export declare type TCookieOptions = Cookies.CookieAttributes;
+export interface IOptions extends TCookieOptions {
+    defaultValue?: TCookieState | (() => TCookieState);
 }
-export declare type TCookieState = string | null | undefined;
-export declare type TCookieOptions = Cookies.CookieAttributes;
 declare function useCookieState(cookieKey: string, options?: IOptions): readonly [string | null | undefined, (newValue?: string | ((prevState: TCookieState) => TCookieState) | null | undefined, newOptions?: Cookies.CookieAttributes) => void];
 export default useCookieState;

lib/useCookieState/index.js

@@ -69,9 +69,9 @@ "use strict";
 
+var js_cookie_1 = __importDefault(require("js-cookie"));
+
 var react_1 = require("react");
 
-var js_cookie_1 = __importDefault(require("js-cookie"));
+var __1 = require("../");
 
-function isFunction(obj) {
-  return typeof obj === 'function';
-}
+var utils_1 = require("../utils");
 
@@ -86,9 +86,10 @@ function useCookieState(cookieKey, options) {
     if (typeof cookieValue === 'string') return cookieValue;
-    if (isFunction(options.defaultValue)) return options.defaultValue();
+    if (utils_1.isFunction(options.defaultValue)) return options.defaultValue();
     return options.defaultValue;
   }), 2),
       state = _a[0],
-      setState = _a[1];
+      setState = _a[1]; // usePersistFn 保证返回的 updateState 不会变化
 
-  var updateState = react_1.useCallback(function (newValue, newOptions) {
+
+  var updateState = __1.usePersistFn(function (newValue, newOptions) {
     if (newOptions === void 0) {
@@ -103,3 +104,3 @@ newOptions = {};
     setState(function (prevState) {
-      var value = isFunction(newValue) ? newValue(prevState) : newValue;
+      var value = utils_1.isFunction(newValue) ? newValue(prevState) : newValue;
 
@@ -114,3 +115,4 @@ if (value === undefined || value === null) {
     });
-  }, [cookieKey, options]);
+  });
+
   return [state, updateState];
@@ -117,0 +119,0 @@ }

lib/useCountDown/index.js

@@ -30,2 +30,8 @@ "use strict";
 
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
 Object.defineProperty(exports, "__esModule", {
@@ -37,9 +43,12 @@ value: true
 
+var dayjs_1 = __importDefault(require("dayjs"));
+
 var calcLeft = function calcLeft(t) {
   if (!t) {
     return 0;
-  }
+  } // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
 
-  var left = new Date(t).getTime() - new Date().getTime();
 
+  var left = dayjs_1["default"](t).valueOf() - new Date().getTime();
+
   if (left < 0) {
@@ -46,0 +55,0 @@ return 0;

lib/useCounter/index.d.ts

@@ -11,3 +11,8 @@ export interface Options {
 }
-declare function useCounter(initialValue?: number, options?: Options): [number, Actions];
+declare function useCounter(initialValue?: number, options?: Options): readonly [number, {
+    inc: (delta?: number) => void;
+    dec: (delta?: number) => void;
+    set: (value: number | ((c: number) => number)) => void;
+    reset: () => void;
+}];
 export default useCounter;

lib/useDebounceFn/index.d.ts

@@ -0,9 +1,9 @@
+/// <reference types="lodash" />
 import { DebounceOptions } from '../useDebounce/debounceOptions';
 declare type Fn = (...args: any) => any;
-interface ReturnValue<T extends Fn> {
-    run: T;
+declare function useDebounceFn<T extends Fn>(fn: T, options?: DebounceOptions): {
+    run: T & import("lodash").Cancelable;
     cancel: () => void;
     flush: () => void;
-}
-declare function useDebounceFn<T extends Fn>(fn: T, options?: DebounceOptions): ReturnValue<T>;
+};
 export default useDebounceFn;

lib/useDebounceFn/index.js

@@ -52,3 +52,3 @@ "use strict";
 
-var __1 = require("../");
+var useCreation_1 = __importDefault(require("../useCreation"));
 
@@ -61,4 +61,3 @@ function useDebounceFn(fn, options) {
   var wait = (_a = options === null || options === void 0 ? void 0 : options.wait) !== null && _a !== void 0 ? _a : 1000;
-
-  var debounced = __1.useCreation(function () {
+  var debounced = useCreation_1["default"](function () {
     return lodash_debounce_1["default"](function () {
@@ -71,6 +70,5 @@ var args = [];
 
-      fnRef.current.apply(fnRef, __spread(args));
+      return fnRef.current.apply(fnRef, __spread(args));
     }, wait, options);
   }, []);
-
   return {
@@ -77,0 +75,0 @@ run: debounced,

lib/useDocumentVisibility/index.js

@@ -30,2 +30,8 @@ "use strict";
 
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+
 Object.defineProperty(exports, "__esModule", {
@@ -37,2 +43,4 @@ value: true
 
+var useEventListener_1 = __importDefault(require("../useEventListener"));
+
 var getVisibility = function getVisibility() {
@@ -44,16 +52,13 @@ if (typeof document === 'undefined') return;
 function useDocumentVisibility() {
-  var _a = __read(react_1.useState(getVisibility()), 2),
+  var _a = __read(react_1.useState(function () {
+    return getVisibility();
+  }), 2),
       documentVisibility = _a[0],
       setDocumentVisibility = _a[1];
 
-  react_1.useEffect(function () {
-    var handleVisibilityChange = function handleVisibilityChange() {
-      setDocumentVisibility(getVisibility());
-    };
-
-    window.addEventListener('visibilitychange', handleVisibilityChange);
-    return function () {
-      window.removeEventListener('visibilitychange', handleVisibilityChange);
-    };
-  }, []);
+  useEventListener_1["default"]('visibilitychange', function () {
+    setDocumentVisibility(getVisibility());
+  }, {
+    target: document
+  });
   return documentVisibility;
@@ -60,0 +65,0 @@ }

lib/useEventListener/index.d.ts

 import { BasicTarget } from '../utils/dom';
-export declare type Target = BasicTarget<HTMLElement | Window>;
+export declare type Target = BasicTarget<HTMLElement | Element | Window | Document>;
 declare type Options = {
@@ -4,0 +4,0 @@ target?: Target;

lib/useEventListener/index.js

@@ -12,28 +12,33 @@ "use strict";
 function useEventListener(eventName, handler, options) {
-  var savedHandler = react_1.useRef();
+  if (options === void 0) {
+    options = {};
+  }
+
+  var handlerRef = react_1.useRef();
+  handlerRef.current = handler;
   react_1.useEffect(function () {
-    savedHandler.current = handler;
-  }, [handler]);
-  react_1.useEffect(function () {
-    var targetElement = dom_1.getTargetElement(options === null || options === void 0 ? void 0 : options.target, window);
-    var isSupported = targetElement.addEventListener;
-    if (!isSupported) return;
+    var targetElement = dom_1.getTargetElement(options.target, window);
 
+    if (!targetElement.addEventListener) {
+      return;
+    }
+
     var eventListener = function eventListener(event) {
-      return savedHandler.current && savedHandler.current(event);
+      return handlerRef.current && handlerRef.current(event);
     };
 
     targetElement.addEventListener(eventName, eventListener, {
-      capture: options === null || options === void 0 ? void 0 : options.capture,
-      once: options === null || options === void 0 ? void 0 : options.once,
-      passive: options === null || options === void 0 ? void 0 : options.passive
+      capture: options.capture,
+      once: options.once,
+      passive: options.passive
     });
     return function () {
       targetElement.removeEventListener(eventName, eventListener, {
-        capture: options === null || options === void 0 ? void 0 : options.capture
+        capture: options.capture
       });
     };
-  }, [eventName, options]);
+  }, [eventName, // 如果 options.target 是函数类型，比如 ()=>ref.current，则 useEffect 会多执行一次，因为初始化的时候 ref.current 是 undefined
+  typeof options.target === 'function' ? undefined : options.target, options.capture, options.once, options.passive]);
 }
 
 exports["default"] = useEventListener;

lib/useEventTarget/index.d.ts

@@ -6,7 +6,7 @@ interface EventTarget<U> {
 }
-interface Params<T, U> {
+export interface Options<T, U> {
     initialValue?: T;
     transformer?: (value: U) => T;
 }
-declare function useEventTarget<T, U = T>(params?: Params<T, U>): readonly [T | undefined, {
+declare function useEventTarget<T, U = T>(options?: Options<T, U>): readonly [T | undefined, {
     readonly onChange: (e: EventTarget<U>) => void;
@@ -13,0 +13,0 @@ readonly reset: () => void;

lib/useEventTarget/index.js

@@ -36,4 +36,4 @@ "use strict";
 
-function useEventTarget(params) {
-  var _a = params || {},
+function useEventTarget(options) {
+  var _a = options || {},
       initialValue = _a.initialValue,
@@ -48,3 +48,3 @@ transformer = _a.transformer;
     return setValue(initialValue);
-  }, [setValue]);
+  }, []);
   var transformerRef = react_1.useRef(transformer);
@@ -61,3 +61,3 @@ transformerRef.current = transformer;
     return setValue(_value);
-  }, [setValue]);
+  }, []);
   return [value, {
@@ -64,0 +64,0 @@ onChange: onChange,

lib/useFavicon/index.js

@@ -20,6 +20,6 @@ "use strict";
 var useFavicon = function useFavicon(favUrl) {
-  var cutUrl = favUrl.split('.');
-  var imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase();
   react_1.useEffect(function () {
     if (!favUrl) return;
+    var cutUrl = favUrl.split('.');
+    var imgSuffix = cutUrl[cutUrl.length - 1].toLocaleUpperCase();
     var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
@@ -26,0 +26,0 @@ link.type = ImgTypeMap[imgSuffix];

lib/useFullscreen/index.d.ts

@@ -6,10 +6,7 @@ import { BasicTarget } from '../utils/dom';
 }
-interface Callback {
-    setFull: () => void;
-    exitFull: () => void;
-    toggleFull: () => void;
-}
-declare type Value = boolean;
-declare type Result = [Value, Callback];
-declare const _default: (target: BasicTarget, options?: Options | undefined) => Result;
+declare const _default: (target: BasicTarget, options?: Options | undefined) => readonly [boolean, {
+    readonly setFull: () => void;
+    readonly exitFull: () => void;
+    readonly toggleFull: () => void;
+}];
 export default _default;

lib/useFullscreen/index.js

@@ -120,8 +120,6 @@ "use strict";
     };
-  }, [state, typeof target === 'function' ? undefined : target]);
-
-  var toggleFull = function toggleFull() {
+  }, [state, toggle, setTrue, setFalse, typeof target === 'function' ? undefined : target]);
+  var toggleFull = react_1.useCallback(function () {
     return toggle();
-  };
-
+  }, [toggle]);
   return [!!state, {
@@ -128,0 +126,0 @@ setFull: setTrue,

lib/useHover/index.js

@@ -40,7 +40,5 @@ "use strict";
 
-var react_1 = require("react");
-
 var useBoolean_1 = __importDefault(require("../useBoolean"));
 
-var dom_1 = require("../utils/dom");
+var useEventListener_1 = __importDefault(require("../useEventListener"));
 
@@ -52,7 +50,2 @@ exports["default"] = function (target, options) {
 
-  var onEnterRef = react_1.useRef(onEnter);
-  onEnterRef.current = onEnter;
-  var onLeaveRef = react_1.useRef(onLeave);
-  onLeaveRef.current = onLeave;
-
   var _b = __read(useBoolean_1["default"](false), 2),
@@ -64,25 +57,15 @@ state = _b[0],
 
-  react_1.useEffect(function () {
-    var onMouseEnter = function onMouseEnter() {
-      if (onEnterRef.current) onEnterRef.current();
-      setTrue();
-    };
-
-    var onMouseLeave = function onMouseLeave() {
-      if (onLeaveRef.current) onLeaveRef.current();
-      setFalse();
-    };
-
-    var targetElement = dom_1.getTargetElement(target); // 如果 传入dom
-
-    if (targetElement) {
-      targetElement.addEventListener('mouseenter', onMouseEnter);
-      targetElement.addEventListener('mouseleave', onMouseLeave);
-      return function () {
-        targetElement.removeEventListener('mouseenter', onMouseEnter);
-        targetElement.removeEventListener('mouseleave', onMouseLeave);
-      };
-    }
-  }, [typeof target === 'function' ? undefined : target]);
+  useEventListener_1["default"]('mouseenter', function () {
+    onEnter && onEnter();
+    setTrue();
+  }, {
+    target: target
+  });
+  useEventListener_1["default"]('mouseleave', function () {
+    onLeave && onLeave();
+    setFalse();
+  }, {
+    target: target
+  });
   return state;
 };

lib/useLocalStorageState/index.js

@@ -16,5 +16,7 @@ "use strict";
 function useLocalStorageState(key, defaultValue) {
-  return useStorageState_1["default"](localStorage, key, defaultValue);
+  return useStorageState_1["default"](function () {
+    return localStorage;
+  }, key, defaultValue);
 }
 
 exports["default"] = useLocalStorageState;

lib/useSessionStorageState/index.js

@@ -16,5 +16,7 @@ "use strict";
 function useSessionStorageState(key, defaultValue) {
-  return useStorageState_1["default"](sessionStorage, key, defaultValue);
+  return useStorageState_1["default"](function () {
+    return sessionStorage;
+  }, key, defaultValue);
 }
 
 exports["default"] = useSessionStorageState;

lib/useStorageState/index.d.ts

 export interface IFuncUpdater<T> {
     (previousState?: T): T;
 }
+export interface IFuncStorage {
+    (): Storage;
+}
 export declare type StorageStateDefaultValue<T> = T | IFuncUpdater<T>;
 export declare type StorageStateResult<T> = [T | undefined, (value: StorageStateDefaultValue<T>) => void];
-declare function useStorageState<T>(storage: Storage, key: string, defaultValue?: StorageStateDefaultValue<T>): StorageStateResult<T>;
+declare function useStorageState<T>(storage: Storage | IFuncStorage, key: string, defaultValue?: StorageStateDefaultValue<T>): StorageStateResult<T>;
 export default useStorageState;

lib/useStorageState/index.js

@@ -49,2 +49,4 @@ "use strict";
 function useStorageState(storage, key, defaultValue) {
+  if (typeof window !== 'object') return [isFunction(defaultValue) ? defaultValue() : defaultValue, function () {}];
+
   var _a = __read(react_1.useState(function () {
@@ -56,3 +58,11 @@ return getStoredValue();
 
+  useUpdateEffect_1["default"](function () {
+    setState(getStoredValue());
+  }, [key]);
+
   function getStoredValue() {
+    if (isFunction(storage)) {
+      storage = storage();
+    }
+
     var raw = storage.getItem(key);
@@ -74,2 +84,6 @@
   function updateState(value) {
+    if (isFunction(storage)) {
+      storage = storage();
+    }
+
     if (typeof value === 'undefined') {
@@ -89,5 +103,2 @@ storage.removeItem(key);
 
-  useUpdateEffect_1["default"](function () {
-    setState(getStoredValue());
-  }, [key]);
   return [state, updateState];
@@ -94,0 +105,0 @@ }

lib/useThrottleFn/index.d.ts

@@ -0,9 +1,9 @@
+/// <reference types="lodash" />
 import { ThrottleOptions } from '../useThrottle/throttleOptions';
 declare type Fn = (...args: any) => any;
-interface ReturnValue<T extends Fn> {
-    run: T;
+declare function useThrottleFn<T extends Fn>(fn: T, options?: ThrottleOptions): {
+    run: T & import("lodash").Cancelable;
     cancel: () => void;
     flush: () => void;
-}
-declare function useThrottleFn<T extends Fn>(fn: T, options?: ThrottleOptions): ReturnValue<T>;
+};
 export default useThrottleFn;

lib/useThrottleFn/index.js

@@ -52,3 +52,3 @@ "use strict";
 
-var __1 = require("../");
+var useCreation_1 = __importDefault(require("../useCreation"));
 
@@ -61,4 +61,3 @@ function useThrottleFn(fn, options) {
   var wait = (_a = options === null || options === void 0 ? void 0 : options.wait) !== null && _a !== void 0 ? _a : 1000;
-
-  var throttled = __1.useCreation(function () {
+  var throttled = useCreation_1["default"](function () {
     return lodash_throttle_1["default"](function () {
@@ -71,6 +70,5 @@ var args = [];
 
-      fnRef.current.apply(fnRef, __spread(args));
+      return fnRef.current.apply(fnRef, __spread(args));
     }, wait, options);
   }, []);
-
   return {
@@ -77,0 +75,0 @@ run: throttled,

lib/utils/dom.d.ts

 import { MutableRefObject } from 'react';
 export declare type BasicTarget<T = HTMLElement> = (() => T | null) | T | null | MutableRefObject<T | null | undefined>;
-declare type TargetElement = HTMLElement | Document | Window;
+declare type TargetElement = HTMLElement | Element | Document | Window;
 export declare function getTargetElement(target?: BasicTarget<TargetElement>, defaultElement?: TargetElement): TargetElement | undefined | null;
 export {};

package.json

 {
   "name": "ahooks",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "react hooks library",
@@ -35,4 +35,5 @@ "keywords": [
   "dependencies": {
-    "@ahooksjs/use-request": "^2.6.0",
+    "@ahooksjs/use-request": "^2.7.0",
     "@types/js-cookie": "^2.2.6",
+    "dayjs": "^1.9.1",
     "intersection-observer": "^0.7.0",
@@ -54,2 +55,4 @@ "js-cookie": "^2.2.1",
     "enzyme-adapter-react-16": "^1.15.4",
+    "jest-websocket-mock": "^2.1.0",
+    "mock-socket": "^9.0.3",
     "react-drag-listview": "^0.1.6",
@@ -56,0 +59,0 @@ "umi-request": "^1.0.8"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

375032

increased by5.63%

Number of package files

255

increased by3.24%

Lines of code

9069

increased by4.42%

Worsened metrics

Dependency count

11

increased by10%

Dev dependency count

8

increased by33.33%

Dependency changes

• + Addeddayjs@^1.9.1

• + Addeddayjs@1.11.13(transitive)

• Updated@ahooksjs/use-request@^2.7.0