react-timing-hooks - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [1.1.0](https://github.com/EricLambrecht/react-timing-hooks/compare/v1.0.1...v1.1.0) (2020-03-21)
+
+
+### Features
+
+* Allow tree shaking by adding a es module export. ([bee51c6](https://github.com/EricLambrecht/react-timing-hooks/commit/bee51c68c88c9d05aeb037d96a7978ee9e01f2aa))
+
+
+### Bug Fixes
+
+* Fix effect cleanups not being executed (useTimeoutEffect & useIdleCallbackEffect) ([f62e393](https://github.com/EricLambrecht/react-timing-hooks/commit/f62e39399e72b49107fae387698a8bd46cb6607c))
+
 ### [1.0.1](https://github.com/EricLambrecht/react-timing-hooks/compare/v1.0.0...v1.0.1) (2020-03-20)
@@ -7,0 +19,0 @@

dist/animation-frame/types.d.ts

 export declare type AnimationFrameHandle = ReturnType<typeof requestAnimationFrame>;

dist/animation-frame/useAnimationFrame.d.ts

@@ -0,0 +0,0 @@ import { Callback } from '../types';

dist/animation-frame/useAnimationFrameLoop.d.ts

 import { Callback } from '../types';
 declare const useAnimationFrameLoop: (callback: Callback, stop?: boolean) => void;
 export default useAnimationFrameLoop;

dist/idle-callback/types.d.ts

@@ -0,0 +0,0 @@ export declare type IdleCallbackCreator = (callback: (deadline: RequestIdleCallbackDeadline) => unknown, options?: RequestIdleCallbackOptions) => RequestIdleCallbackHandle;

dist/idle-callback/useIdleCallback.d.ts

@@ -0,0 +0,0 @@ import { RequestIdleCallbackDeadline, RequestIdleCallbackHandle, RequestIdleCallbackOptions } from './types';

dist/idle-callback/useIdleCallbackEffect.d.ts

@@ -0,0 +0,0 @@ import { DependencyList } from 'react';

dist/index.d.ts

@@ -0,0 +0,0 @@ import useTimeoutEffect from './timeout/useTimeoutEffect';

dist/index.js

@@ -1,30 +0,163 @@
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+const useTimeoutEffect = (effect, deps) => {
+    const timeoutId = react.useRef(null);
+    const timeoutFunc = react.useCallback((handler, timeout) => {
+        timeoutId.current = setTimeout(handler, timeout);
+    }, [timeoutId]);
+    react.useEffect(() => {
+        return effect(timeoutFunc);
+    }, deps);
+    react.useEffect(() => {
+        return function onUnmount() {
+            if (timeoutId.current !== null) {
+                clearTimeout(timeoutId.current);
+            }
+        };
+    }, [timeoutId]);
 };
-(function (factory) {
-    if (typeof module === "object" && typeof module.exports === "object") {
-        var v = factory(require, exports);
-        if (v !== undefined) module.exports = v;
+
+/**
+ * @param callback The callback that is invoked after the timeout expired
+ * @param timeout A timeout in milliseconds
+ */
+const useTimeout = (callback, timeout) => {
+    const timeoutCallback = react.useRef(() => null);
+    const [timeoutId, setTimeoutId] = react.useState(null);
+    react.useEffect(() => {
+        timeoutCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        return () => {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+            }
+        };
+    }, [timeoutId]);
+    return react.useCallback((...args) => {
+        const id = setTimeout(() => timeoutCallback.current(...args), timeout);
+        setTimeoutId(id);
+    }, [timeout]);
+};
+
+/**
+ * This hook was inspired by Dan Abramov's blogpost:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @param callback
+ * @param delay
+ */
+const useInterval = (callback, delay) => {
+    const intervalCallback = react.useRef(() => null);
+    react.useEffect(() => {
+        intervalCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        if (delay !== null) {
+            const id = setInterval(() => intervalCallback.current(), delay);
+            return () => clearInterval(id);
+        }
+    }, [delay]);
+};
+
+const useIdleCallbackEffect = (effect, deps) => {
+    if (!window.requestIdleCallback) {
+        console.warn('This browser does not support "requestIdleCallback"');
+        return;
     }
-    else if (typeof define === "function" && define.amd) {
-        define(["require", "exports", "./timeout/useTimeoutEffect", "./timeout/useTimeout", "./interval/useInterval", "./idle-callback/useIdleCallbackEffect", "./idle-callback/useIdleCallback", "./animation-frame/useAnimationFrame", "./animation-frame/useAnimationFrameLoop"], factory);
+    const idleCallbackHandle = react.useRef(null);
+    const idleCallbackFunc = react.useCallback((callback, options) => {
+        idleCallbackHandle.current = window.requestIdleCallback(callback, options);
+        return idleCallbackHandle.current;
+    }, [idleCallbackHandle]);
+    react.useEffect(() => {
+        return effect(idleCallbackFunc);
+    }, deps);
+    react.useEffect(() => {
+        return function onUnmount() {
+            if (idleCallbackHandle.current !== null) {
+                window.cancelIdleCallback(idleCallbackHandle.current);
+            }
+        };
+    }, [idleCallbackHandle]);
+};
+
+/**
+ * @param callback The callback that is invoked as soons as the browser invokes the idle callback
+ * @param options Options for requestIdleCallback
+ */
+const useIdleCallback = (callback, options) => {
+    if (!window.requestIdleCallback) {
+        console.warn('This browser does not support "requestIdleCallback"');
+        return callback;
     }
-})(function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    const useTimeoutEffect_1 = __importDefault(require("./timeout/useTimeoutEffect"));
-    exports.useTimeoutEffect = useTimeoutEffect_1.default;
-    const useTimeout_1 = __importDefault(require("./timeout/useTimeout"));
-    exports.useTimeout = useTimeout_1.default;
-    const useInterval_1 = __importDefault(require("./interval/useInterval"));
-    exports.useInterval = useInterval_1.default;
-    const useIdleCallbackEffect_1 = __importDefault(require("./idle-callback/useIdleCallbackEffect"));
-    exports.useIdleCallbackEffect = useIdleCallbackEffect_1.default;
-    const useIdleCallback_1 = __importDefault(require("./idle-callback/useIdleCallback"));
-    exports.useIdleCallback = useIdleCallback_1.default;
-    const useAnimationFrame_1 = __importDefault(require("./animation-frame/useAnimationFrame"));
-    exports.useAnimationFrame = useAnimationFrame_1.default;
-    const useAnimationFrameLoop_1 = __importDefault(require("./animation-frame/useAnimationFrameLoop"));
-    exports.useAnimationFrameLoop = useAnimationFrameLoop_1.default;
-});
-//# sourceMappingURL=index.js.map
+    const ricCallback = react.useRef(() => null);
+    const [handle, setHandle] = react.useState(null);
+    react.useEffect(() => {
+        ricCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        return () => {
+            if (handle) {
+                window.cancelIdleCallback(handle);
+            }
+        };
+    }, [handle]);
+    return react.useCallback((...args) => {
+        const h = window.requestIdleCallback(() => ricCallback.current(...args), options);
+        setHandle(h);
+    }, [options]);
+};
+
+/**
+ * @param callback The callback that is invoked in the next animation frame
+ */
+const useAnimationFrame = (callback) => {
+    const rafCallback = react.useRef(() => null);
+    const [handle, setHandle] = react.useState(null);
+    react.useEffect(() => {
+        rafCallback.current = callback;
+    }, [callback]);
+    react.useEffect(() => {
+        return () => {
+            if (handle) {
+                cancelAnimationFrame(handle);
+            }
+        };
+    }, [handle]);
+    return react.useCallback((...args) => {
+        const h = requestAnimationFrame(() => rafCallback.current(...args));
+        setHandle(h);
+    }, []);
+};
+
+const useAnimationFrameLoop = (callback, stop = false) => {
+    const rafCallback = react.useRef(() => null);
+    const stopValue = react.useRef(false);
+    react.useEffect(() => {
+        rafCallback.current = callback;
+        stopValue.current = stop;
+    }, [callback, stop]);
+    const nextCallback = react.useCallback(() => {
+        if (!stopValue.current) {
+            rafCallback.current();
+        }
+        runInLoop();
+    }, []);
+    const runInLoop = useAnimationFrame(nextCallback);
+    react.useEffect(() => {
+        runInLoop();
+    }, [runInLoop]);
+};
+
+exports.useAnimationFrame = useAnimationFrame;
+exports.useAnimationFrameLoop = useAnimationFrameLoop;
+exports.useIdleCallback = useIdleCallback;
+exports.useIdleCallbackEffect = useIdleCallbackEffect;
+exports.useInterval = useInterval;
+exports.useTimeout = useTimeout;
+exports.useTimeoutEffect = useTimeoutEffect;

dist/interval/types.d.ts

 export declare type IntervalCallback = () => unknown;

dist/interval/useInterval.d.ts

@@ -0,0 +0,0 @@ import { IntervalCallback } from './types';

dist/timeout/types.d.ts

@@ -0,0 +0,0 @@ export declare type TimeoutCreator = (handler: () => unknown, timeout: number) => any;

dist/timeout/useTimeout.d.ts

@@ -0,0 +0,0 @@ import { TimeoutCallback } from './types';

dist/timeout/useTimeoutEffect.d.ts

@@ -0,0 +0,0 @@ import { DependencyList } from 'react';

dist/types.d.ts

 export declare type Callback = (...args: any[]) => unknown;

package.json

 {
   "name": "react-timing-hooks",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "React hooks for setTimeout, setInterval, requestAnimationFrame, requestIdleCallback",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "module": "dist/index.es.js",
   "scripts": {
@@ -14,7 +15,7 @@ "test": "npm run test:unit && npm run test:integration",
     "prettier:write": "prettier --write \"{src,integration-tests}/**/*.{ts,tsx}\"",
-    "build": "tsc",
+    "build": "rollup -c",
     "build:watch": "npm run build -- --watch",
-    "build:prod": "rimraf \"./dist\" && npm run build -- --outDir \"./dist\"",
+    "build:prod": "rimraf \"./dist\" && rollup -c rollup.config.prod.js",
     "release": "cli-confirm \"Do you really want to create a new release? (Y/N)\" && standard-version",
-    "prepublishOnly": "cli-confirm \"Do you really want to publish the current release? (Y/N)\" && npm run test && npm run test:integration && npm run build:prod"
+    "prepublishOnly": "cli-confirm \"Do you really want to publish the current release? (Y/N)\" && npm run test && npm run build:prod"
   },
@@ -31,3 +32,4 @@ "repository": {
     "timing",
-    "effects",
+    "effect",
+    "loop",
     "animation",
@@ -63,2 +65,4 @@ "frame",
     "rimraf": "^3.0.2",
+    "rollup": "^2.1.0",
+    "rollup-plugin-typescript2": "^0.26.0",
     "standard-version": "^7.1.0",
@@ -65,0 +69,0 @@ "ts-jest": "^25.2.1",

README.md

@@ -0,0 +0,0 @@ ![minified](https://badgen.net/bundlephobia/minzip/react-timing-hooks)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Worsened metrics

Total package byte prevSize

27658

decreased by-25.74%

Dev dependency count

23

increased by9.52%

Number of package files

19

decreased by-55.81%

Lines of code

381

decreased by-9.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes