@restart/hooks - npm Package Compare versions

Comparing version 0.3.19 to 0.3.20

cjs/useCallbackRef.js

@@ -8,4 +8,26 @@ "use strict";
 
+/**
+ * A convenience hook around `useState` designed to be paired with
+ * the component [callback ref](https://reactjs.org/docs/refs-and-the-dom.html#callback-refs) api.
+ * Callback refs are useful over `useRef()` when you need to respond to the ref being set
+ * instead of lazily accessing it in an effect.
+ *
+ * ```ts
+ * const [element, attachRef] = useCallbackRef<HTMLDivElement>()
+ *
+ * useEffect(() => {
+ *   if (!element) return
+ *
+ *   const calendar = new FullCalendar.Calendar(element)
+ *
+ *   return () => {
+ *     calendar.destroy()
+ *   }
+ * }, [element])
+ *
+ * return <div ref={attachRef} />
+ * ```
+ */
 function useCallbackRef() {
   return (0, _react.useState)(null);
 }

cjs/useCommittedRef.js

@@ -8,2 +8,11 @@ "use strict";
 
+/**
+ * Creates a `Ref` whose value is updated in an effect, ensuring the most recent
+ * value is the one rendered with. Generally only required for Concurrent mode usage
+ * where previous work in `render()` may be discarded befor being used.
+ *
+ * This is safe to access in an event handler.
+ *
+ * @param value The `Ref` value
+ */
 function useCommittedRef(value) {
@@ -10,0 +19,0 @@ var ref = (0, _react.useRef)(value);

cjs/useForceUpdate.js

@@ -8,2 +8,18 @@ "use strict";
 
+/**
+ * Returns a function that triggers a component update. the hook equivalent to
+ * `this.forceUpdate()` in a class component. In most cases using a state value directly
+ * is preferable but may be required in some advanced usages of refs for interop or
+ * when direct DOM manipulation is required.
+ *
+ * ```ts
+ * const forceUpdate = useForceUpdate();
+ *
+ * const updateOnClick = useCallback(() => {
+ *  forceUpdate()
+ * }, [forceUpdate])
+ *
+ * return <button type="button" onClick={updateOnClick}>Hi there</button>
+ * ```
+ */
 function useForceUpdate() {
@@ -10,0 +26,0 @@ // The toggling state value is designed to defeat React optimizations for skipping

cjs/useMounted.js

@@ -8,2 +8,22 @@ "use strict";
 
+/**
+ * Track whether a component is current mounted. Generally less preferable than
+ * properlly canceling effects so they don't run after a component is unmounted,
+ * but helpful in cases where that isn't feasible, such as a `Promise` resolution.
+ *
+ * @returns a function that returns the current isMounted state of the component
+ *
+ * ```ts
+ * const [data, setData] = useState(null)
+ * const isMounted = useMounted()
+ *
+ * useEffect(() => {
+ *   fetchdata().then((newData) => {
+ *      if (isMounted()) {
+ *        setData(newData);
+ *      }
+ *   })
+ * })
+ * ```
+ */
 function useMounted() {
@@ -10,0 +30,0 @@ var mounted = (0, _react.useRef)(true);

cjs/usePrevious.js

@@ -8,2 +8,19 @@ "use strict";
 
+/**
+ * Store the last of some value. Tracked via a `Ref` only updating it
+ * after the component renders.
+ *
+ * Helpful if you need to compare a prop value to it's previous value during render.
+ *
+ * ```ts
+ * function Component(props) {
+ *   const lastProps = usePrevious(props)
+ *
+ *   if (lastProps.foo !== props.foo)
+ *     resetValueFromProps(props.foo)
+ * }
+ * ```
+ *
+ * @param value the value to track
+ */
 function usePrevious(value) {
@@ -10,0 +27,0 @@ var ref = (0, _react.useRef)(null);

cjs/useTimeout.d.ts

@@ -6,4 +6,4 @@ /**
 export default function useTimeout(): {
-    set(fn: () => void, ms?: number | undefined): void;
+    set: (fn: () => void, delayMs?: number) => void;
     clear: () => void;
 };

cjs/useTimeout.js

@@ -8,8 +8,24 @@ "use strict";
 
+var _useMounted = _interopRequireDefault(require("./useMounted"));
+
 var _useWillUnmount = _interopRequireDefault(require("./useWillUnmount"));
 
-var _useMounted = _interopRequireDefault(require("./useMounted"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+/*
+ * Browsers including Internet Explorer, Chrome, Safari, and Firefox store the
+ * delay as a 32-bit signed integer internally. This causes an integer overflow
+ * when using delays larger than 2,147,483,647 ms (about 24.8 days),
+ * resulting in the timeout being executed immediately.
+ *
+ * via: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+ */
+var MAX_DELAY_MS = Math.pow(2, 31) - 1;
+
+function setChainedTimeout(handleRef, fn, timeoutAtMs) {
+  var delayMs = timeoutAtMs - Date.now();
+  handleRef.current = delayMs <= MAX_DELAY_MS ? setTimeout(fn, delayMs) : setTimeout(function () {
+    return setChainedTimeout(handleRef, fn, timeoutAtMs);
+  }, MAX_DELAY_MS);
+}
 /**
@@ -19,19 +35,37 @@ * Returns a controller object for setting a timeout that is properly cleaned up
  */
+
+
 function useTimeout() {
-  var isMounted = (0, _useMounted.default)();
-  var handle = (0, _react.useRef)();
+  var isMounted = (0, _useMounted.default)(); // types are confused between node and web here IDK
 
-  var clear = function clear() {
-    return clearTimeout(handle.current);
-  };
+  var handleRef = (0, _react.useRef)();
+  (0, _useWillUnmount.default)(function () {
+    return clearTimeout(handleRef.current);
+  });
+  return (0, _react.useMemo)(function () {
+    var clear = function clear() {
+      return clearTimeout(handleRef.current);
+    };
 
-  (0, _useWillUnmount.default)(clear);
-  return {
-    set: function set(fn, ms) {
+    function set(fn, delayMs) {
+      if (delayMs === void 0) {
+        delayMs = 0;
+      }
+
       if (!isMounted()) return;
       clear();
-      handle.current = setTimeout(fn, ms);
-    },
-    clear: clear
-  };
+
+      if (delayMs <= MAX_DELAY_MS) {
+        // For simplicity, if the timeout is short, just set a normal timeout.
+        handleRef.current = setTimeout(fn, delayMs);
+      } else {
+        setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+      }
+    }
+
+    return {
+      set: set,
+      clear: clear
+    };
+  }, []);
 }

cjs/useUpdatedRef.js

@@ -8,2 +8,7 @@ "use strict";
 
+/**
+ * Returns a ref that is immediately updated with the new value
+ *
+ * @param value The Ref value
+ */
 function useUpdatedRef(value) {
@@ -10,0 +15,0 @@ var valueRef = (0, _react.useRef)(value);

cjs/useWillUnmount.js

@@ -12,2 +12,7 @@ "use strict";
 
+/**
+ * Attach a callback that fires when a component unmounts
+ *
+ * @param fn Handler to run when the component unmounts
+ */
 function useWillUnmount(fn) {
@@ -14,0 +19,0 @@ var onUnmount = (0, _useUpdatedRef.default)(fn);

esm/useTimeout.d.ts

@@ -6,4 +6,4 @@ /**
 export default function useTimeout(): {
-    set(fn: () => void, ms?: number | undefined): void;
+    set: (fn: () => void, delayMs?: number) => void;
     clear: () => void;
 };

esm/useTimeout.js

@@ -1,4 +0,21 @@
-import { useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import useMounted from './useMounted';
 import useWillUnmount from './useWillUnmount';
-import useMounted from './useMounted';
+/*
+ * Browsers including Internet Explorer, Chrome, Safari, and Firefox store the
+ * delay as a 32-bit signed integer internally. This causes an integer overflow
+ * when using delays larger than 2,147,483,647 ms (about 24.8 days),
+ * resulting in the timeout being executed immediately.
+ *
+ * via: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout
+ */
+
+var MAX_DELAY_MS = Math.pow(2, 31) - 1;
+
+function setChainedTimeout(handleRef, fn, timeoutAtMs) {
+  var delayMs = timeoutAtMs - Date.now();
+  handleRef.current = delayMs <= MAX_DELAY_MS ? setTimeout(fn, delayMs) : setTimeout(function () {
+    return setChainedTimeout(handleRef, fn, timeoutAtMs);
+  }, MAX_DELAY_MS);
+}
 /**
@@ -9,19 +26,36 @@ * Returns a controller object for setting a timeout that is properly cleaned up
 
+
 export default function useTimeout() {
-  var isMounted = useMounted();
-  var handle = useRef();
+  var isMounted = useMounted(); // types are confused between node and web here IDK
 
-  var clear = function clear() {
-    return clearTimeout(handle.current);
-  };
+  var handleRef = useRef();
+  useWillUnmount(function () {
+    return clearTimeout(handleRef.current);
+  });
+  return useMemo(function () {
+    var clear = function clear() {
+      return clearTimeout(handleRef.current);
+    };
 
-  useWillUnmount(clear);
-  return {
-    set: function set(fn, ms) {
+    function set(fn, delayMs) {
+      if (delayMs === void 0) {
+        delayMs = 0;
+      }
+
       if (!isMounted()) return;
       clear();
-      handle.current = setTimeout(fn, ms);
-    },
-    clear: clear
-  };
+
+      if (delayMs <= MAX_DELAY_MS) {
+        // For simplicity, if the timeout is short, just set a normal timeout.
+        handleRef.current = setTimeout(fn, delayMs);
+      } else {
+        setChainedTimeout(handleRef, fn, Date.now() + delayMs);
+      }
+    }
+
+    return {
+      set: set,
+      clear: clear
+    };
+  }, []);
 }

package.json

 {
   "name": "@restart/hooks",
-  "version": "0.3.19",
+  "version": "0.3.20",
   "main": "cjs/index.js",
@@ -42,3 +42,3 @@ "types": "cjs/index.d.ts",
   "readme": "ERROR: No README data found!",
-  "_id": "@restart/hooks@0.3.18"
+  "_id": "@restart/hooks@0.3.19"
 }

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

136260

increased by3.84%

Lines of code

3592

increased by4.36%

No dependency changes