use-animation-frame - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

index.js

 // Based off a tweet and codesandbox:
 // https://mobile.twitter.com/hieuhlc/status/1164369876825169920
-import { useEffect, useRef } from "react";
+import { useLayoutEffect, useRef } from "react";
 
 // Reusable component that also takes dependencies
 export default (cb, deps) => {
-  if( typeof performance === 'undefined' || typeof window === 'undefined' ) {
-    return
+  if (typeof performance === "undefined" || typeof window === "undefined") {
+    return;
   }
@@ -25,3 +25,3 @@
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     frame.current = requestAnimationFrame(animate);
@@ -28,0 +28,0 @@ return () => cancelAnimationFrame(frame.current);

index.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("use-animation-frame",["React"],t):"object"==typeof exports?exports["use-animation-frame"]=t(require("react")):e["use-animation-frame"]=t(e.React)}(this,(function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([function(t,r){t.exports=e},function(e,t,r){"use strict";r.r(t);var n=r(0);t.default=(e,t)=>{if("undefined"==typeof performance||"undefined"==typeof window)return;const r=Object(n.useRef)(),o=Object(n.useRef)(performance.now()),u=Object(n.useRef)(performance.now()),f=()=>{const t=performance.now(),n=(t-u.current)/1e3,i=(t-o.current)/1e3;e({time:n,delta:i}),o.current=t,r.current=requestAnimationFrame(f)};Object(n.useEffect)(()=>(r.current=requestAnimationFrame(f),()=>cancelAnimationFrame(r.current)),t)}}])}));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define("use-animation-frame",["React"],t):"object"==typeof exports?exports["use-animation-frame"]=t(require("react")):e["use-animation-frame"]=t(e.React)}(this,(function(e){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(t,n){t.exports=e},function(e,t,n){"use strict";n.r(t);var r=n(0);t.default=function(e,t){if("undefined"!=typeof performance&&"undefined"!=typeof window){var n=Object(r.useRef)(),o=Object(r.useRef)(performance.now()),u=Object(r.useRef)(performance.now()),f=function t(){var r=performance.now(),f=(r-u.current)/1e3,i=(r-o.current)/1e3;e({time:f,delta:i}),o.current=r,n.current=requestAnimationFrame(t)};Object(r.useLayoutEffect)((function(){return n.current=requestAnimationFrame(f),function(){return cancelAnimationFrame(n.current)}}),t)}}}])}));

package.json

 {
   "name": "use-animation-frame",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A React hook to run requestAnimationFrame seamlessly",
@@ -13,7 +13,8 @@ "homepage": "https://github.com/franciscop/use-animation-frame#readme",
   "scripts": {
-    "build": "webpack -c"
+    "build": "webpack -c",
+    "test": "npx jest --coverage",
+    "start": "npx jest --watch"
   },
   "keywords": [],
   "main": "index.min.js",
-  "dependencies": {},
   "peerDependencies": {
@@ -25,9 +26,12 @@ "react": "^16.8.0",
     "@babel/core": "^7.1.5",
-    "@babel/preset-env": "^7.1.5",
-    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "^8.0.4",
+    "babel-polyfill": "^6.26.0",
+    "jest": "^27.5.1",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-test": "^0.11.0",
     "regenerator-runtime": "^0.12.1",
@@ -37,3 +41,9 @@ "uglify-es": "^3.1.3",
     "webpack-cli": "^3.1.2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ]
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

9910

increased by26.31%

Number of package files

8

increased by33.33%

Lines of code

105

increased by59.09%

Worsened metrics

Dev dependency count

15

increased by25%

No dependency changes