@restart/hooks - npm Package Compare versions

Comparing version 0.3.26 to 0.3.27

cjs/useBreakpoint.d.ts

@@ -27,3 +27,3 @@ export declare type BreakpointDirection = 'up' | 'down' | true;
     (breakpointMap: BreakpointMap<TKey>): boolean;
-    (breakpoint: TKey, direction?: true | "up" | "down" | undefined): boolean;
+    (breakpoint: TKey, direction?: BreakpointDirection | undefined): boolean;
 };
@@ -34,4 +34,4 @@ export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;
-    (breakpoint: DefaultBreakpoints, direction?: true | "up" | "down" | undefined): boolean;
+    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined): boolean;
 };
 export default useBreakpoint;

cjs/useFocusManager.js

@@ -50,3 +50,3 @@ "use strict";
     clearTimeout(handle.current);
-    handle.current = setTimeout(function () {
+    handle.current = window.setTimeout(function () {
       if (focused !== lastFocused.current) {
@@ -53,0 +53,0 @@ if (didHandle) didHandle(focused, event); // only fire a change when unmounted if its a blur

cjs/useIntersectionObserver.d.ts

 /**
  * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
- * a DOM Element.
+ * a DOM Element that returns it's entries as they arrive.
  *
@@ -8,2 +8,13 @@ * @param element The DOM element to observe
  */
-export default function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, { threshold, root, rootMargin }?: IntersectionObserverInit): IntersectionObserverEntry[];
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options: IntersectionObserverInit): IntersectionObserverEntry[];
+/**
+ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
+ * a DOM Element. This overload does not trigger component updates when receiving new
+ * entries. This allows for finer grained performance optimizations by the consumer.
+ *
+ * @param element The DOM element to observe
+ * @param callback A listener for intersection updates.
+ * @param init IntersectionObserver options
+ */
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options: IntersectionObserverInit): void;
+export default useIntersectionObserver;

cjs/useIntersectionObserver.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = useIntersectionObserver;
+exports.default = void 0;
 
@@ -12,17 +12,22 @@ var _react = require("react");
 
+var _useEventCallback = _interopRequireDefault(require("./useEventCallback"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-/**
- * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
- * a DOM Element.
- *
- * @param element The DOM element to observe
- * @param init IntersectionObserver options
- */
-function useIntersectionObserver(element, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      threshold = _ref.threshold,
-      root = _ref.root,
-      rootMargin = _ref.rootMargin;
+function useIntersectionObserver(element, callbackOrOptions, maybeOptions) {
+  var callback;
+  var options;
 
+  if (typeof callbackOrOptions === 'function') {
+    callback = callbackOrOptions;
+    options = maybeOptions || {};
+  } else {
+    options = callbackOrOptions || {};
+  }
+
+  var _options = options,
+      threshold = _options.threshold,
+      root = _options.root,
+      rootMargin = _options.rootMargin;
+
   var _useState = (0, _react.useState)(null),
@@ -32,6 +37,5 @@ entries = _useState[0],
 
+  var handler = (0, _useEventCallback.default)(callback || setEntry);
   var observer = (0, _useStableMemo.default)(function () {
-    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(function (entries) {
-      return setEntry(entries);
-    }, {
+    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
       threshold: threshold,
@@ -41,3 +45,3 @@ root: root,
     });
-  }, [root, rootMargin, threshold && JSON.stringify(threshold)]);
+  }, [handler, root, rootMargin, threshold && JSON.stringify(threshold)]);
   (0, _useIsomorphicEffect.default)(function () {
@@ -50,3 +54,6 @@ if (!element || !observer) return;
   }, [observer, element]);
-  return entries || [];
-}
+  return callback ? undefined : entries || [];
+}
+
+var _default = useIntersectionObserver;
+exports.default = _default;

cjs/useMap.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
@@ -19,3 +19,3 @@ function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
@@ -22,0 +22,0 @@ function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

cjs/useMutationObserver.d.ts

@@ -5,3 +5,3 @@ /**
  *
- * ```ts
+ * ```tsx
  * const [element, attachRef] = useCallbackRef(null);
@@ -23,2 +23,20 @@ *
 declare function useMutationObserver(element: Element | null | undefined, config: MutationObserverInit, callback: MutationCallback): void;
+/**
+ * Observe mutations on a DOM node or tree of DOM nodes.
+ * use a `MutationObserver` and return records as the are received.
+ *
+ * ```tsx
+ * const [element, attachRef] = useCallbackRef(null);
+ *
+ * const records = useMutationObserver(element, { subtree: true });
+ *
+ * return (
+ *   <div ref={attachRef} />
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ * @param config The observer configuration
+ */
+declare function useMutationObserver(element: Element | null | undefined, config: MutationObserverInit): MutationRecord[];
 export default useMutationObserver;

cjs/useMutationObserver.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _dequal = require("dequal");
 
@@ -15,2 +15,4 @@ var _useImmediateUpdateEffect = _interopRequireDefault(require("./useImmediateUpdateEffect"));
 
+var _react = require("react");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,3 +25,3 @@
       prevConfig = _ref2[1];
-  return nextElement === prevElement && (0, _isEqual.default)(nextConfig, prevConfig);
+  return nextElement === prevElement && (0, _dequal.dequal)(nextConfig, prevConfig);
 }
@@ -30,3 +32,3 @@ /**
  *
- * ```ts
+ * ```tsx
  * const [element, attachRef] = useCallbackRef(null);
@@ -50,3 +52,7 @@ *
 function useMutationObserver(element, config, callback) {
-  var fn = (0, _useEventCallback.default)(callback);
+  var _useState = (0, _react.useState)(null),
+      records = _useState[0],
+      setRecords = _useState[1];
+
+  var handler = (0, _useEventCallback.default)(callback || setRecords);
   (0, _useCustomEffect.default)(function () {
@@ -58,3 +64,3 @@ if (!element) return; // The behavior around reusing mutation observers is confusing
 
-    var observer = new MutationObserver(fn);
+    var observer = new MutationObserver(handler);
     observer.observe(element, config);
@@ -70,2 +76,3 @@ return function () {
   });
+  return callback ? void 0 : records || [];
 }
@@ -72,0 +79,0 @@

cjs/useSet.js

@@ -12,3 +12,3 @@ "use strict";
 
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
@@ -19,3 +19,3 @@ function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
@@ -22,0 +22,0 @@ function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

esm/useBreakpoint.d.ts

@@ -27,3 +27,3 @@ export declare type BreakpointDirection = 'up' | 'down' | true;
     (breakpointMap: BreakpointMap<TKey>): boolean;
-    (breakpoint: TKey, direction?: true | "up" | "down" | undefined): boolean;
+    (breakpoint: TKey, direction?: BreakpointDirection | undefined): boolean;
 };
@@ -34,4 +34,4 @@ export declare type DefaultBreakpoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     (breakpointMap: Partial<Record<DefaultBreakpoints, BreakpointDirection>>): boolean;
-    (breakpoint: DefaultBreakpoints, direction?: true | "up" | "down" | undefined): boolean;
+    (breakpoint: DefaultBreakpoints, direction?: BreakpointDirection | undefined): boolean;
 };
 export default useBreakpoint;

esm/useFocusManager.js

@@ -41,3 +41,3 @@ import { useCallback, useRef } from 'react';
     clearTimeout(handle.current);
-    handle.current = setTimeout(function () {
+    handle.current = window.setTimeout(function () {
       if (focused !== lastFocused.current) {
@@ -44,0 +44,0 @@ if (didHandle) didHandle(focused, event); // only fire a change when unmounted if its a blur

esm/useIntersectionObserver.d.ts

 /**
  * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
- * a DOM Element.
+ * a DOM Element that returns it's entries as they arrive.
  *
@@ -8,2 +8,13 @@ * @param element The DOM element to observe
  */
-export default function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, { threshold, root, rootMargin }?: IntersectionObserverInit): IntersectionObserverEntry[];
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, options: IntersectionObserverInit): IntersectionObserverEntry[];
+/**
+ * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
+ * a DOM Element. This overload does not trigger component updates when receiving new
+ * entries. This allows for finer grained performance optimizations by the consumer.
+ *
+ * @param element The DOM element to observe
+ * @param callback A listener for intersection updates.
+ * @param init IntersectionObserver options
+ */
+declare function useIntersectionObserver<TElement extends Element>(element: TElement | null | undefined, callback: IntersectionObserverCallback, options: IntersectionObserverInit): void;
+export default useIntersectionObserver;

esm/useIntersectionObserver.js

 import { useState } from 'react';
 import useStableMemo from './useStableMemo';
 import useEffect from './useIsomorphicEffect';
+import useEventCallback from './useEventCallback';
 /**
  * Setup an [`IntersectionObserver`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) on
- * a DOM Element.
+ * a DOM Element that returns it's entries as they arrive.
  *
@@ -12,8 +13,18 @@ * @param element The DOM element to observe
 
-export default function useIntersectionObserver(element, _temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      threshold = _ref.threshold,
-      root = _ref.root,
-      rootMargin = _ref.rootMargin;
+function useIntersectionObserver(element, callbackOrOptions, maybeOptions) {
+  var callback;
+  var options;
 
+  if (typeof callbackOrOptions === 'function') {
+    callback = callbackOrOptions;
+    options = maybeOptions || {};
+  } else {
+    options = callbackOrOptions || {};
+  }
+
+  var _options = options,
+      threshold = _options.threshold,
+      root = _options.root,
+      rootMargin = _options.rootMargin;
+
   var _useState = useState(null),
@@ -23,6 +34,5 @@ entries = _useState[0],
 
+  var handler = useEventCallback(callback || setEntry);
   var observer = useStableMemo(function () {
-    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(function (entries) {
-      return setEntry(entries);
-    }, {
+    return typeof IntersectionObserver !== 'undefined' && new IntersectionObserver(handler, {
       threshold: threshold,
@@ -32,3 +42,3 @@ root: root,
     });
-  }, [root, rootMargin, threshold && JSON.stringify(threshold)]);
+  }, [handler, root, rootMargin, threshold && JSON.stringify(threshold)]);
   useEffect(function () {
@@ -41,3 +51,5 @@ if (!element || !observer) return;
   }, [observer, element]);
-  return entries || [];
-}
+  return callback ? undefined : entries || [];
+}
+
+export default useIntersectionObserver;

esm/useMap.js

@@ -1,2 +0,2 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
@@ -7,3 +7,3 @@ function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
@@ -10,0 +10,0 @@ function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

esm/useMutationObserver.d.ts

@@ -5,3 +5,3 @@ /**
  *
- * ```ts
+ * ```tsx
  * const [element, attachRef] = useCallbackRef(null);
@@ -23,2 +23,20 @@ *
 declare function useMutationObserver(element: Element | null | undefined, config: MutationObserverInit, callback: MutationCallback): void;
+/**
+ * Observe mutations on a DOM node or tree of DOM nodes.
+ * use a `MutationObserver` and return records as the are received.
+ *
+ * ```tsx
+ * const [element, attachRef] = useCallbackRef(null);
+ *
+ * const records = useMutationObserver(element, { subtree: true });
+ *
+ * return (
+ *   <div ref={attachRef} />
+ * )
+ * ```
+ *
+ * @param element The DOM element to observe
+ * @param config The observer configuration
+ */
+declare function useMutationObserver(element: Element | null | undefined, config: MutationObserverInit): MutationRecord[];
 export default useMutationObserver;

esm/useMutationObserver.js

 import useCustomEffect from './useCustomEffect';
-import isEqual from "lodash-es/isEqual";
+import { dequal } from 'dequal';
 import useImmediateUpdateEffect from './useImmediateUpdateEffect';
 import useEventCallback from './useEventCallback';
+import { useState } from 'react';
 
@@ -11,3 +12,3 @@ function isDepsEqual(_ref, _ref2) {
       prevConfig = _ref2[1];
-  return nextElement === prevElement && isEqual(nextConfig, prevConfig);
+  return nextElement === prevElement && dequal(nextConfig, prevConfig);
 }
@@ -18,3 +19,3 @@ /**
  *
- * ```ts
+ * ```tsx
  * const [element, attachRef] = useCallbackRef(null);
@@ -38,3 +39,7 @@ *
 function useMutationObserver(element, config, callback) {
-  var fn = useEventCallback(callback);
+  var _useState = useState(null),
+      records = _useState[0],
+      setRecords = _useState[1];
+
+  var handler = useEventCallback(callback || setRecords);
   useCustomEffect(function () {
@@ -46,3 +51,3 @@ if (!element) return; // The behavior around reusing mutation observers is confusing
 
-    var observer = new MutationObserver(fn);
+    var observer = new MutationObserver(handler);
     observer.observe(element, config);
@@ -58,4 +63,5 @@ return function () {
   });
+  return callback ? void 0 : records || [];
 }
 
 export default useMutationObserver;

esm/useSet.js

@@ -1,2 +0,2 @@
-function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
+function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
 
@@ -7,3 +7,3 @@ function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
@@ -10,0 +10,0 @@ function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; }

package.json

 {
   "name": "@restart/hooks",
-  "version": "0.3.26",
+  "version": "0.3.27",
   "main": "cjs/index.js",
@@ -43,5 +43,4 @@ "types": "cjs/index.d.ts",
   "dependencies": {
-    "lodash": "^4.17.20",
-    "lodash-es": "^4.17.20"
+    "dequal": "^2.0.2"
   }
 }

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

178668

increased by7.09%

Dependency count

2

decreased by-33.33%

Number of package files

204

increased by7.94%

Lines of code

4844

increased by7.24%

Dependency changes

• + Addeddequal@^2.0.2

• + Addeddequal@2.0.3(transitive)

• - Removedlodash@^4.17.20

• - Removedlodash-es@^4.17.20

• - Removedlodash@4.17.21(transitive)

• - Removedlodash-es@4.17.21(transitive)