react-perf-devtool - npm Package Compare versions

Comparing version 3.0.6 to 3.0.7

lib/npm/hook.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.registerObserver = undefined;
+exports.getMeasuresByComponentName = exports.registerObserver = undefined;
 
@@ -80,3 +80,2 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
   This function logs the measures to the console. Requires a server running on a specified port. Default port number is 8080.
-  TODO: Change this behaviour if Chrome lands the support for recording performance when inspecting the node apps.
 */
@@ -90,5 +89,3 @@ var logToConsole = function logToConsole(_ref, measures) {
   } else if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) !== undefined && Array.isArray(components)) {
-    var requiredMeasures = getRequiredMeasures(components, measures);
-
-    logMeasures(port, requiredMeasures);
+    logMeasures(port, getMeasuresByComponentName(components, measures));
   }
@@ -116,3 +113,2 @@ };
     // The time is in millisecond (ms)
-    // TODO: The data generated is generalized. Make it concrete!
     var data = {
@@ -145,18 +141,9 @@ component: componentName,
 
-var getRequiredMeasures = function getRequiredMeasures(components, measures) {
-  var requiredMeasures = [];
-
-  if (!Array.isArray(components)) {
-    components = [components];
-  }
-
-  measures.forEach(function (measure) {
-    if (components.includes(measure.componentName)) {
-      requiredMeasures.push(measure);
-    }
+var getMeasuresByComponentName = function getMeasuresByComponentName(componentNames, measures) {
+  return measures.filter(function (measure) {
+    return componentNames.includes(measure.componentName);
   });
-
-  return requiredMeasures;
 };
 
-exports.registerObserver = registerObserver;
+exports.registerObserver = registerObserver;
+exports.getMeasuresByComponentName = getMeasuresByComponentName;

lib/shared/generate.js

@@ -10,19 +10,4 @@ 'use strict';
 
-// Sort the all components by total time
-var sortComponents = function sortComponents(components) {
-  return components.sort(function (a, b) {
-    return b.totalTime - a.totalTime;
-  });
-};
-
-// Align the components by their name and total time
-var alignComponents = function alignComponents(totalTime) {
-  return Object.keys(totalTime).reduce(function (acc, name) {
-    acc.push({ name: name, totalTime: totalTime[name] });
-    return acc;
-  }, []);
-};
-
 // Get the total time taken combining all the phases
-var getTotalTime = function getTotalTime(components) {
+var getSummarisedTotalTime = function getSummarisedTotalTime(components) {
   return components.reduce(function (acc, component) {
@@ -63,43 +48,24 @@ return acc += component.totalTime;
 
-// Generate the data from React performance measures
+var getTotalComponentTimeSpent = function getTotalComponentTimeSpent(componentPhases) {
+  var phases = ['mount', 'unmount', 'update', 'render', 'componentWillMount', 'componentDidMount', 'componentWillReceiveProps', 'shouldComponentUpdate', 'componentWillUpdate', 'componentDidUpdate', 'componentWillUnmount'];
+  return phases.reduce(function (totalTimeSpent, phase) {
+    return totalTimeSpent += (0, _math.add)(componentPhases[phase].timeSpent);
+  }, 0);
+};
+
 var generateDataFromMeasures = function generateDataFromMeasures(store) {
-  var componentsByTotalTime = {};
-
-  for (var componentName in store) {
-    // Default
-    componentsByTotalTime[componentName] = componentsByTotalTime[componentName] || 0;
-
-    // mount time
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].mount.timeSpent);
-    // unmount time
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].unmount.timeSpent);
-    // update time
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].update.timeSpent);
-    // render time
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].render.timeSpent);
-    // time spent in componentWillMount
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentWillMount.timeSpent);
-    // time spent in componentDidMount
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentDidMount.timeSpent);
-    // time spent in componentWillReceiveProps
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentWillReceiveProps.timeSpent);
-    // time spent in shouldComponentUpdate
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].shouldComponentUpdate.timeSpent);
-    // time spent in componentWillUpdate
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentWillUpdate.timeSpent);
-    // time spent in componentDidUpdate
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentDidUpdate.timeSpent);
-    // time spent in componentWillUnmount
-    componentsByTotalTime[componentName] += (0, _math.add)(store[componentName].componentWillUnmount.timeSpent);
-  }
-
-  var components = alignComponents(componentsByTotalTime);
-
-  var totalTime = getTotalTime(components);
-
-  return sortComponents(components).map(function (component) {
-    return createSchema(store, component, totalTime);
+  var componentsWithTotalTime = Object.keys(store).map(function (componentName) {
+    return {
+      name: componentName,
+      totalTime: getTotalComponentTimeSpent(store[componentName])
+    };
   });
+  var totalTime = getSummarisedTotalTime(componentsWithTotalTime);
+  return componentsWithTotalTime.map(function (componentWithTotalTime) {
+    return createSchema(store, componentWithTotalTime, totalTime);
+  }).sort(function (a, b) {
+    return b.totalTimeSpent - a.totalTimeSpent;
+  });
 };
 
 exports.generateDataFromMeasures = generateDataFromMeasures;

lib/shared/parse.js

@@ -102,38 +102,15 @@ 'use strict';
   var store = {};
+  measures.filter(function (measure) {
+    return (0, _parseMeasures.getComponentAndPhaseName)(measure) !== null;
+  }).forEach(function (measure) {
+    var _getComponentAndPhase = (0, _parseMeasures.getComponentAndPhaseName)(measure),
+        componentName = _getComponentAndPhase.componentName,
+        phase = _getComponentAndPhase.phase;
 
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
-
-  try {
-    for (var _iterator = measures[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-      var measure = _step.value;
-
-      if ((0, _parseMeasures.getComponentAndPhaseName)(measure) !== null) {
-        var _getComponentAndPhase = (0, _parseMeasures.getComponentAndPhaseName)(measure),
-            componentName = _getComponentAndPhase.componentName,
-            phase = _getComponentAndPhase.phase;
-
-        if (!store[componentName]) {
-          store[componentName] = createSchema();
-        }
-
-        updateTime(store, componentName, phase, measure);
-      }
+    if (!store[componentName]) {
+      store[componentName] = createSchema();
     }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
-      }
-    } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
-      }
-    }
-  }
 
+    updateTime(store, componentName, phase, measure);
+  });
   return store;
@@ -140,0 +117,0 @@ };

package.json

 {
   "name": "react-perf-devtool",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "description": "A devtool for inspecting the performance of React Components",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -6,3 +6,3 @@ # React Performance Devtool
 ![Author](https://img.shields.io/badge/author-Nitin%20Tulswani-lightgrey.svg)
-![current-version](https://img.shields.io/badge/version-3.0.5-blue.svg)
+![current-version](https://img.shields.io/badge/version-3.0.7-blue.svg)
 
@@ -9,0 +9,0 @@ > A devtool for inspecting the performance of React Components

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

Worsened metrics

Total package byte prevSize

38740

decreased by-5.66%

Lines of code

538

decreased by-9.43%

No dependency changes