react-fps - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

build/index.es.js

@@ -1,100 +0,2 @@
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
-
-function useFps(windowWidth) {
-    var lastFpsValues = useRef([]);
-    var frames = useRef(0);
-    var prevTime = useRef(performance.now());
-    var animRef = useRef(0);
-    var _a = useState([]), fps = _a[0], setFps = _a[1];
-    var calcFps = function () {
-        var t = performance.now();
-        frames.current += 1;
-        if (t > prevTime.current + 1000) {
-            var elapsedTime = t - prevTime.current;
-            var currentFps_1 = Math.round((frames.current * 1000) / elapsedTime);
-            lastFpsValues.current = lastFpsValues.current.concat(currentFps_1);
-            if (elapsedTime > 1500) {
-                for (var i = 1; i <= (elapsedTime - 1000) / 1000; i++) {
-                    lastFpsValues.current = lastFpsValues.current.concat(0);
-                }
-            }
-            lastFpsValues.current = lastFpsValues.current.slice(Math.min(lastFpsValues.current.length - windowWidth, 0));
-            setFps(lastFpsValues.current);
-            frames.current = 0;
-            prevTime.current = performance.now();
-        }
-        animRef.current = requestAnimationFrame(calcFps);
-    };
-    useEffect(function () {
-        animRef.current = requestAnimationFrame(calcFps);
-        return function () {
-            cancelAnimationFrame(animRef.current);
-        };
-    }, []);
-    var avgFps = (fps.reduce(function (a, b) { return a + b; }, 0) / fps.length).toFixed(2);
-    var maxFps = Math.max.apply(Math.max, fps);
-    var currentFps = fps[fps.length - 1];
-    return { fps: fps, avgFps: avgFps, maxFps: maxFps, currentFps: currentFps };
-}
-
-function useStyles(width, height, top, right, bottom, left, fpsLength) {
-    var wrapperStyle = useMemo(function () { return ({
-        zIndex: 999999,
-        position: 'fixed',
-        width: width + 6 + 'px',
-        height: height + 30 + 'px',
-        padding: '3px',
-        backgroundColor: '#21006f',
-        color: '#26F0FD',
-        fontSize: '1rem',
-        lineHeight: '1.3rem',
-        fontFamily: 'Helvetica, Arial, sans-serif',
-        fontWeight: 300,
-        boxSizing: 'border-box',
-        top: top,
-        right: right,
-        bottom: bottom,
-        left: left,
-    }); }, [width, height, top, right, bottom, left]);
-    var graphStyle = useMemo(function () { return ({
-        position: 'absolute',
-        left: '3px',
-        right: '3px',
-        bottom: '3px',
-        height: height,
-        backgroundColor: '#282844',
-        MozBoxSizing: 'border-box',
-        boxSizing: 'border-box'
-    }); }, [height]);
-    var barStyle = useCallback(function (calcHeight, i) { return ({
-        position: 'absolute',
-        bottom: '0',
-        right: ((fpsLength - 1 - i) * 4) + 'px',
-        height: calcHeight + 'px',
-        width: '4px',
-        backgroundColor: '#E200F7',
-        MozBoxSizing: 'border-box',
-        boxSizing: 'border-box'
-    }); }, [fpsLength]);
-    return { wrapperStyle: wrapperStyle, graphStyle: graphStyle, barStyle: barStyle };
-}
-
-var FpsView = function (_a) {
-    var _b = _a.top, top = _b === void 0 ? 0 : _b, _c = _a.left, left = _c === void 0 ? 0 : _c, _d = _a.bottom, bottom = _d === void 0 ? 'auto' : _d, _e = _a.right, right = _e === void 0 ? 'auto' : _e, _f = _a.width, width = _f === void 0 ? 140 : _f, _g = _a.height, height = _g === void 0 ? 60 : _g;
-    var _h = useFps(Math.floor(width / 2)), fps = _h.fps, avgFps = _h.avgFps, maxFps = _h.maxFps, currentFps = _h.currentFps;
-    var _j = useStyles(width, height, top, right, bottom, left, fps.length), graphStyle = _j.graphStyle, barStyle = _j.barStyle, wrapperStyle = _j.wrapperStyle;
-    return (
-    // @ts-ignore
-    React.createElement("div", { style: wrapperStyle },
-        React.createElement("span", null,
-            currentFps,
-            " FPS (",
-            avgFps,
-            " Avg)"),
-        React.createElement("div", { style: graphStyle }, fps.map(function (val, i) { return (
-        // @ts-ignore
-        React.createElement("div", { key: i, style: barStyle((height * val) / maxFps, i) })); }))));
-};
-
-export { FpsView, 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.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};
 //# sourceMappingURL=index.es.js.map

build/index.js

@@ -1,108 +0,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-
-function useFps(windowWidth) {
-    var lastFpsValues = React.useRef([]);
-    var frames = React.useRef(0);
-    var prevTime = React.useRef(performance.now());
-    var animRef = React.useRef(0);
-    var _a = React.useState([]), fps = _a[0], setFps = _a[1];
-    var calcFps = function () {
-        var t = performance.now();
-        frames.current += 1;
-        if (t > prevTime.current + 1000) {
-            var elapsedTime = t - prevTime.current;
-            var currentFps_1 = Math.round((frames.current * 1000) / elapsedTime);
-            lastFpsValues.current = lastFpsValues.current.concat(currentFps_1);
-            if (elapsedTime > 1500) {
-                for (var i = 1; i <= (elapsedTime - 1000) / 1000; i++) {
-                    lastFpsValues.current = lastFpsValues.current.concat(0);
-                }
-            }
-            lastFpsValues.current = lastFpsValues.current.slice(Math.min(lastFpsValues.current.length - windowWidth, 0));
-            setFps(lastFpsValues.current);
-            frames.current = 0;
-            prevTime.current = performance.now();
-        }
-        animRef.current = requestAnimationFrame(calcFps);
-    };
-    React.useEffect(function () {
-        animRef.current = requestAnimationFrame(calcFps);
-        return function () {
-            cancelAnimationFrame(animRef.current);
-        };
-    }, []);
-    var avgFps = (fps.reduce(function (a, b) { return a + b; }, 0) / fps.length).toFixed(2);
-    var maxFps = Math.max.apply(Math.max, fps);
-    var currentFps = fps[fps.length - 1];
-    return { fps: fps, avgFps: avgFps, maxFps: maxFps, currentFps: currentFps };
-}
-
-function useStyles(width, height, top, right, bottom, left, fpsLength) {
-    var wrapperStyle = React.useMemo(function () { return ({
-        zIndex: 999999,
-        position: 'fixed',
-        width: width + 6 + 'px',
-        height: height + 30 + 'px',
-        padding: '3px',
-        backgroundColor: '#21006f',
-        color: '#26F0FD',
-        fontSize: '1rem',
-        lineHeight: '1.3rem',
-        fontFamily: 'Helvetica, Arial, sans-serif',
-        fontWeight: 300,
-        boxSizing: 'border-box',
-        top: top,
-        right: right,
-        bottom: bottom,
-        left: left,
-    }); }, [width, height, top, right, bottom, left]);
-    var graphStyle = React.useMemo(function () { return ({
-        position: 'absolute',
-        left: '3px',
-        right: '3px',
-        bottom: '3px',
-        height: height,
-        backgroundColor: '#282844',
-        MozBoxSizing: 'border-box',
-        boxSizing: 'border-box'
-    }); }, [height]);
-    var barStyle = React.useCallback(function (calcHeight, i) { return ({
-        position: 'absolute',
-        bottom: '0',
-        right: ((fpsLength - 1 - i) * 4) + 'px',
-        height: calcHeight + 'px',
-        width: '4px',
-        backgroundColor: '#E200F7',
-        MozBoxSizing: 'border-box',
-        boxSizing: 'border-box'
-    }); }, [fpsLength]);
-    return { wrapperStyle: wrapperStyle, graphStyle: graphStyle, barStyle: barStyle };
-}
-
-var FpsView = function (_a) {
-    var _b = _a.top, top = _b === void 0 ? 0 : _b, _c = _a.left, left = _c === void 0 ? 0 : _c, _d = _a.bottom, bottom = _d === void 0 ? 'auto' : _d, _e = _a.right, right = _e === void 0 ? 'auto' : _e, _f = _a.width, width = _f === void 0 ? 140 : _f, _g = _a.height, height = _g === void 0 ? 60 : _g;
-    var _h = useFps(Math.floor(width / 2)), fps = _h.fps, avgFps = _h.avgFps, maxFps = _h.maxFps, currentFps = _h.currentFps;
-    var _j = useStyles(width, height, top, right, bottom, left, fps.length), graphStyle = _j.graphStyle, barStyle = _j.barStyle, wrapperStyle = _j.wrapperStyle;
-    return (
-    // @ts-ignore
-    React__default.createElement("div", { style: wrapperStyle },
-        React__default.createElement("span", null,
-            currentFps,
-            " FPS (",
-            avgFps,
-            " Avg)"),
-        React__default.createElement("div", { style: graphStyle }, fps.map(function (val, i) { return (
-        // @ts-ignore
-        React__default.createElement("div", { key: i, style: barStyle((height * val) / maxFps, i) })); }))));
-};
-
-exports.FpsView = FpsView;
-exports.useFps = useFps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e;function n(e){var r=t.useRef([]),n=t.useRef(0),o=t.useRef(performance.now()),i=t.useRef(0),u=t.useState([]),a=u[0],c=u[1],p=function(){var t=performance.now();if(n.current+=1,t>o.current+1e3){var u=t-o.current,a=Math.round(1e3*n.current/u);if(r.current=r.current.concat(a),u>1500)for(var l=1;l<=(u-1e3)/1e3;l++)r.current=r.current.concat(0);r.current=r.current.slice(Math.min(r.current.length-e,0)),c(r.current),n.current=0,o.current=performance.now()}i.current=requestAnimationFrame(p)};t.useEffect((function(){return i.current=requestAnimationFrame(p),function(){cancelAnimationFrame(i.current)}}),[]);var l=(a.reduce((function(e,t){return e+t}),0)/a.length).toFixed(2);return{fps:a,avgFps:l,maxFps:Math.max.apply(Math.max,a),currentFps:a[a.length-1]}}exports.FpsView=function(e){var o=e.top,i=void 0===o?0:o,u=e.left,a=void 0===u?0:u,c=e.bottom,p=void 0===c?"auto":c,l=e.right,s=void 0===l?"auto":l,f=e.width,d=void 0===f?140:f,x=e.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(e,r,n,o,i,u,a){return{wrapperStyle:t.useMemo((function(){return{zIndex:999999,position:"fixed",width:e+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}}),[e,r,n,o,i,u]),graphStyle:t.useMemo((function(){return{position:"absolute",left:"3px",right:"3px",bottom:"3px",height:r,backgroundColor:"#282844",MozBoxSizing:"border-box",boxSizing:"border-box"}}),[r]),barStyle:t.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,s,p,a,m.length),S=y.graphStyle,M=y.barStyle,w=y.wrapperStyle;return r.createElement("div",{style:w},r.createElement("span",null,F," FPS (",b," Avg)"),r.createElement("div",{style:S},m.map((function(e,t){return r.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.0",
+  "version": "1.0.1",
   "main": "./build/index.js",
@@ -15,2 +15,3 @@ "module": "./build/index.es.js",
     "performance",
+    "analyzer",
     "stats"
@@ -20,4 +21,4 @@ ],
   "dependencies": {
-    "rollup": "^2.23.1",
-    "rollup-plugin-terser": "^7.0.0"
+    "rollup": "2.23.1",
+    "rollup-plugin-terser": "7.0.0"
   },
@@ -24,0 +25,0 @@ "peerDependencies": {

README.md

@@ -1,7 +0,6 @@
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![MIT License][license-shield]][license-url]
+[![GitHub contributors](https://img.shields.io/github/contributors/Naereen/StrapDown.js.svg)](https://GitHub.com/JohannesKlauss/react-fps/graphs/contributors/)
+[![GitHub issues](https://img.shields.io/github/issues/Naereen/StrapDown.js.svg)](https://GitHub.com/JohannesKlauss/react-fps/issues/)
+[![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://github.com/JohannesKlauss/react-fps/blob/master/LICENSE)
 
+
 <br />
@@ -169,6 +168,1 @@ <p align="center">
 I ported it to use hooks, added a nicer color layout and made it more customizable.
-
-## Found an issue or want a feature?
-Just open up an issue
-
-## A

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

44378

decreased by-13%

Lines of code

273

decreased by-39.33%

Number of low quality alerts

2

increased by100%

Number of lines in readme file

168

decreased by-3.45%

Dependency changes

• + Addedfsevents@2.1.3(transitive)

• + Addedrollup@2.23.1(transitive)

• + Addedrollup-plugin-terser@7.0.0(transitive)

• - Removedfsevents@2.3.3(transitive)

• - Removedrollup@2.79.1(transitive)

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

• Updatedrollup@2.23.1

• Updatedrollup-plugin-terser@7.0.0