react-fps - npm Package Compare versions

Comparing version 1.0.2 to 1.0.4

build/index.es.js

@@ -1,2 +0,2 @@
-import r,{useRef as t,useState as e,useEffect as n,useMemo as o,useCallback as i}from"react";function a(r){var o=t([]),i=t(0),a=t(performance.now()),c=t(0),u=e([]),p=u[0],l=u[1],f=function(){var t=performance.now();if(i.current+=1,t>a.current+1e3){var e=t-a.current,n=Math.round(1e3*i.current/e);if(o.current=o.current.concat(n),e>1500)for(var u=1;u<=(e-1e3)/1e3;u++)o.current=o.current.concat(0);o.current=o.current.slice(Math.min(o.current.length-r,0)),l(o.current),i.current=0,a.current=performance.now()}c.current=requestAnimationFrame(f)};n((function(){return c.current=requestAnimationFrame(f),function(){cancelAnimationFrame(c.current)}}),[]);var g=(p.reduce((function(r,t){return r+t}),0)/p.length).toFixed(2);return{fps:p,avgFps:g,maxFps:Math.max.apply(Math.max,p),currentFps:p[p.length-1]}}var c=function(t){var e=t.top,n=void 0===e?0:e,c=t.left,u=void 0===c?0:c,p=t.bottom,l=void 0===p?"auto":p,f=t.right,g=void 0===f?"auto":f,h=t.width,m=void 0===h?140:h,d=t.height,x=void 0===d?60:d,b=a(Math.floor(m/2)),s=b.fps,v=b.avgFps,F=b.maxFps,S=b.currentFps,y=function(r,t,e,n,a,c,u){return{wrapperStyle:o((function(){return{zIndex:999999,position:"fixed",width:r+6+"px",height:t+30+"px",padding:"3px",backgroundColor:"#21006f",color:"#26F0FD",fontSize:"1rem",lineHeight:"1.3rem",fontFamily:"Helvetica, Arial, sans-serif",fontWeight:300,boxSizing:"border-box",top:e,right:n,bottom:a,left:c}}),[r,t,e,n,a,c]),graphStyle:o((function(){return{position:"absolute",left:"3px",right:"3px",bottom:"3px",height:t,backgroundColor:"#282844",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[t]),barStyle:i((function(r,t){return{position:"absolute",bottom:"0",right:4*(u-1-t)+"px",height:r+"px",width:"4px",backgroundColor:"#E200F7",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[u])}}(m,x,n,g,l,u,s.length),z=y.graphStyle,w=y.barStyle,M=y.wrapperStyle;return r.createElement("div",{style:M},r.createElement("span",null,S," FPS (",v," Avg)"),r.createElement("div",{style:z},s.map((function(t,e){return r.createElement("div",{key:e,style:w(x*t/F,e)})}))))};export{c as FpsView,a as useFps};
+import r,{useRef as t,useState as e,useEffect as n,useMemo as o,useCallback as i}from"react";function a(r){var o=t([]),i=t(0),a=t(performance.now()),c=t(0),u=e([]),p=u[0],l=u[1],f=function(){var t=performance.now();if(i.current+=1,t>a.current+1e3){var e=t-a.current,n=Math.round(1e3*i.current/e);if(o.current=o.current.concat(n),e>1500)for(var u=1;u<=(e-1e3)/1e3;u++)o.current=o.current.concat(0);o.current=o.current.slice(Math.max(o.current.length-r,0)),l(o.current),i.current=0,a.current=performance.now()}c.current=requestAnimationFrame(f)};n((function(){return c.current=requestAnimationFrame(f),function(){cancelAnimationFrame(c.current)}}),[]);var g=(p.reduce((function(r,t){return r+t}),0)/p.length).toFixed(2);return{fps:p,avgFps:g,maxFps:Math.max.apply(Math.max,p),currentFps:p[p.length-1]}}var c=function(t){var e=t.top,n=void 0===e?0:e,c=t.left,u=void 0===c?0:c,p=t.bottom,l=void 0===p?"auto":p,f=t.right,g=void 0===f?"auto":f,h=t.width,m=void 0===h?140:h,x=t.height,d=void 0===x?60:x,b=a(Math.floor(m/2)),s=b.fps,v=b.avgFps,F=b.maxFps,S=b.currentFps,y=function(r,t,e,n,a,c,u){return{wrapperStyle:o((function(){return{zIndex:999999,position:"fixed",width:r+6+"px",height:t+30+"px",padding:"3px",backgroundColor:"#21006f",color:"#26F0FD",fontSize:"1rem",lineHeight:"1.3rem",fontFamily:"Helvetica, Arial, sans-serif",fontWeight:300,boxSizing:"border-box",top:e,right:n,bottom:a,left:c}}),[r,t,e,n,a,c]),graphStyle:o((function(){return{position:"absolute",left:"3px",right:"3px",bottom:"3px",height:t,backgroundColor:"#282844",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[t]),barStyle:i((function(r,t){return{position:"absolute",bottom:"0",right:4*(u-1-t)+"px",height:r+"px",width:"4px",backgroundColor:"#E200F7",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[u])}}(m,d,n,g,l,u,s.length),z=y.graphStyle,w=y.barStyle,M=y.wrapperStyle;return r.createElement("div",{style:M},r.createElement("span",null,S," FPS (",v," Avg)"),r.createElement("div",{style:z},s.map((function(t,e){return r.createElement("div",{key:e,style:w(d*t/F,e)})}))))};export{c as FpsView,a as useFps};
 //# sourceMappingURL=index.es.js.map

build/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(t){var r=e.useRef([]),n=e.useRef(0),o=e.useRef(performance.now()),i=e.useRef(0),u=e.useState([]),a=u[0],c=u[1],l=function(){var e=performance.now();if(n.current+=1,e>o.current+1e3){var u=e-o.current,a=Math.round(1e3*n.current/u);if(r.current=r.current.concat(a),u>1500)for(var f=1;f<=(u-1e3)/1e3;f++)r.current=r.current.concat(0);r.current=r.current.slice(Math.min(r.current.length-t,0)),c(r.current),n.current=0,o.current=performance.now()}i.current=requestAnimationFrame(l)};e.useEffect((function(){return i.current=requestAnimationFrame(l),function(){cancelAnimationFrame(i.current)}}),[]);var f=(a.reduce((function(e,t){return e+t}),0)/a.length).toFixed(2);return{fps:a,avgFps:f,maxFps:Math.max.apply(Math.max,a),currentFps:a[a.length-1]}}exports.FpsView=function(t){var o=t.top,i=void 0===o?0:o,u=t.left,a=void 0===u?0:u,c=t.bottom,l=void 0===c?"auto":c,f=t.right,p=void 0===f?"auto":f,s=t.width,d=void 0===s?140:s,x=t.height,g=void 0===x?60:x,h=n(Math.floor(d/2)),m=h.fps,b=h.avgFps,v=h.maxFps,F=h.currentFps,y=function(t,r,n,o,i,u,a){return{wrapperStyle:e.useMemo((function(){return{zIndex:999999,position:"fixed",width:t+6+"px",height:r+30+"px",padding:"3px",backgroundColor:"#21006f",color:"#26F0FD",fontSize:"1rem",lineHeight:"1.3rem",fontFamily:"Helvetica, Arial, sans-serif",fontWeight:300,boxSizing:"border-box",top:n,right:o,bottom:i,left:u}}),[t,r,n,o,i,u]),graphStyle:e.useMemo((function(){return{position:"absolute",left:"3px",right:"3px",bottom:"3px",height:r,backgroundColor:"#282844",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[r]),barStyle:e.useCallback((function(e,t){return{position:"absolute",bottom:"0",right:4*(a-1-t)+"px",height:e+"px",width:"4px",backgroundColor:"#E200F7",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[a])}}(d,g,i,p,l,a,m.length),S=y.graphStyle,M=y.barStyle,w=y.wrapperStyle;return r.default.createElement("div",{style:w},r.default.createElement("span",null,F," FPS (",b," Avg)"),r.default.createElement("div",{style:S},m.map((function(e,t){return r.default.createElement("div",{key:t,style:M(g*e/v,t)})}))))},exports.useFps=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(e);function n(t){var r=e.useRef([]),n=e.useRef(0),o=e.useRef(performance.now()),i=e.useRef(0),u=e.useState([]),a=u[0],c=u[1],l=function(){var e=performance.now();if(n.current+=1,e>o.current+1e3){var u=e-o.current,a=Math.round(1e3*n.current/u);if(r.current=r.current.concat(a),u>1500)for(var f=1;f<=(u-1e3)/1e3;f++)r.current=r.current.concat(0);r.current=r.current.slice(Math.max(r.current.length-t,0)),c(r.current),n.current=0,o.current=performance.now()}i.current=requestAnimationFrame(l)};e.useEffect((function(){return i.current=requestAnimationFrame(l),function(){cancelAnimationFrame(i.current)}}),[]);var f=(a.reduce((function(e,t){return e+t}),0)/a.length).toFixed(2);return{fps:a,avgFps:f,maxFps:Math.max.apply(Math.max,a),currentFps:a[a.length-1]}}exports.FpsView=function(t){var o=t.top,i=void 0===o?0:o,u=t.left,a=void 0===u?0:u,c=t.bottom,l=void 0===c?"auto":c,f=t.right,p=void 0===f?"auto":f,s=t.width,d=void 0===s?140:s,x=t.height,g=void 0===x?60:x,h=n(Math.floor(d/2)),m=h.fps,b=h.avgFps,v=h.maxFps,F=h.currentFps,y=function(t,r,n,o,i,u,a){return{wrapperStyle:e.useMemo((function(){return{zIndex:999999,position:"fixed",width:t+6+"px",height:r+30+"px",padding:"3px",backgroundColor:"#21006f",color:"#26F0FD",fontSize:"1rem",lineHeight:"1.3rem",fontFamily:"Helvetica, Arial, sans-serif",fontWeight:300,boxSizing:"border-box",top:n,right:o,bottom:i,left:u}}),[t,r,n,o,i,u]),graphStyle:e.useMemo((function(){return{position:"absolute",left:"3px",right:"3px",bottom:"3px",height:r,backgroundColor:"#282844",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[r]),barStyle:e.useCallback((function(e,t){return{position:"absolute",bottom:"0",right:4*(a-1-t)+"px",height:e+"px",width:"4px",backgroundColor:"#E200F7",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[a])}}(d,g,i,p,l,a,m.length),S=y.graphStyle,M=y.barStyle,w=y.wrapperStyle;return r.default.createElement("div",{style:w},r.default.createElement("span",null,F," FPS (",b," Avg)"),r.default.createElement("div",{style:S},m.map((function(e,t){return r.default.createElement("div",{key:t,style:M(g*e/v,t)})}))))},exports.useFps=n;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-fps",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "./build/index.js",
@@ -19,6 +19,2 @@ "module": "./build/index.es.js",
   "license": "MIT",
-  "dependencies": {
-    "rollup": "2.26.2",
-    "rollup-plugin-terser": "7.0.0"
-  },
   "peerDependencies": {
@@ -29,27 +25,29 @@ "react": "16.13.1",
   "devDependencies": {
-    "@babel/core": "7.11.1",
-    "@rollup/plugin-commonjs": "15.0.0",
+    "@babel/core": "7.11.6",
+    "@rollup/plugin-commonjs": "15.1.0",
     "@rollup/plugin-node-resolve": "9.0.0",
-    "@storybook/addon-actions": "6.0.10",
-    "@storybook/addon-essentials": "6.0.10",
-    "@storybook/addon-knobs": "6.0.10",
-    "@storybook/addon-links": "6.0.10",
-    "@storybook/addons": "6.0.10",
+    "@storybook/addon-actions": "6.0.26",
+    "@storybook/addon-essentials": "6.0.26",
+    "@storybook/addon-knobs": "6.0.26",
+    "@storybook/addon-links": "6.0.26",
+    "@storybook/addons": "6.0.26",
     "@storybook/preset-typescript": "3.0.0",
-    "@storybook/react": "6.0.10",
-    "@typescript-eslint/eslint-plugin": "3.9.0",
-    "@typescript-eslint/parser": "3.9.0",
+    "@storybook/react": "6.0.26",
+    "@typescript-eslint/eslint-plugin": "4.4.0",
+    "@typescript-eslint/parser": "4.4.0",
     "babel-loader": "8.1.0",
-    "eslint": "7.7.0",
-    "eslint-config-prettier": "6.11.0",
+    "eslint": "7.10.0",
+    "eslint-config-prettier": "6.12.0",
     "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.6",
-    "fork-ts-checker-webpack-plugin": "5.0.14",
-    "jest": "26.4.0",
-    "prettier": "2.0.5",
+    "eslint-plugin-react": "7.21.3",
+    "fork-ts-checker-webpack-plugin": "5.2.0",
+    "jest": "26.5.2",
+    "prettier": "2.1.2",
     "react-is": "16.13.1",
+    "rollup": "2.29.0",
     "rollup-plugin-peer-deps-external": "2.2.3",
-    "rollup-plugin-typescript2": "0.27.2",
-    "ts-loader": "8.0.2",
-    "typescript": "3.9.7"
+    "rollup-plugin-terser": "7.0.2",
+    "rollup-plugin-typescript2": "0.27.3",
+    "ts-loader": "8.0.4",
+    "typescript": "4.0.3"
   },
@@ -60,4 +58,6 @@ "scripts": {
     "build": "rollup -c",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix"
+    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
+    "test": "jest --passWithNoTests",
+    "publish": "np"
   }
 }

src/useFps.ts

@@ -28,3 +28,3 @@ import {useEffect, useRef, useState} from "react";
 
-      lastFpsValues.current = lastFpsValues.current.slice(Math.min(lastFpsValues.current.length - windowWidth, 0));
+      lastFpsValues.current = lastFpsValues.current.slice(Math.max(lastFpsValues.current.length - windowWidth, 0));
 
@@ -31,0 +31,0 @@ setFps(lastFpsValues.current);

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

44911

increased by0.04%

Dependency count

2

decreased by-50%

Worsened metrics

Dev dependency count

27

increased by8%

Dependency changes

• - Removedrollup@2.26.2

• - Removedrollup-plugin-terser@7.0.0

• - Removed@babel/code-frame@7.24.7(transitive)

• - Removed@babel/helper-validator-identifier@7.24.7(transitive)

• - Removed@babel/highlight@7.24.7(transitive)

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/source-map@0.3.6(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/node@22.5.5(transitive)

• - Removedacorn@8.12.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

• - Removedbuffer-from@1.1.2(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedcommander@2.20.3(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfsevents@2.1.3(transitive)

• - Removedhas-flag@3.0.04.0.0(transitive)

• - Removedjest-worker@26.6.2(transitive)

• - Removedmerge-stream@2.0.0(transitive)

• - Removedpicocolors@1.1.0(transitive)

• - Removedrandombytes@2.1.0(transitive)

• - Removedrollup@2.26.2(transitive)

• - Removedrollup-plugin-terser@7.0.0(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedserialize-javascript@4.0.0(transitive)

• - Removedsource-map@0.6.1(transitive)

• - Removedsource-map-support@0.5.21(transitive)

• - Removedsupports-color@5.5.07.2.0(transitive)

• - Removedterser@5.33.0(transitive)

• - Removedundici-types@6.19.8(transitive)