react-perf-devtool - npm Package Compare versions

Comparing version 3.0.7 to 3.0.8-beta.0

lib/index.js

@@ -1,13 +0,22 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './extension/components/ReactPerfDevtool', './npm/hook'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./extension/components/ReactPerfDevtool'), require('./npm/hook'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.ReactPerfDevtool, global.hook);
+    global.index = mod.exports;
+  }
+})(this, function (exports, _ReactPerfDevtool, _hook) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.registerObserver = exports.ReactPerfDevtool = undefined;
-
-var _ReactPerfDevtool = require('./extension/components/ReactPerfDevtool');
-
-var _hook = require('./npm/hook');
-
-exports.ReactPerfDevtool = _ReactPerfDevtool.ReactPerfDevtool;
-exports.registerObserver = _hook.registerObserver;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.registerObserver = exports.ReactPerfDevtool = undefined;
+  exports.ReactPerfDevtool = _ReactPerfDevtool.ReactPerfDevtool;
+  exports.registerObserver = _hook.registerObserver;
+});

lib/npm/hook.js

@@ -1,144 +0,158 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', '../shared/parse', '../shared/generate'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('../shared/parse'), require('../shared/generate'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.parse, global.generate);
+    global.hook = mod.exports;
+  }
+})(this, function (exports, _parse, _generate) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getMeasuresByComponentName = exports.registerObserver = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getMeasuresByComponentName = exports.registerObserver = undefined;
 
-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; };
+  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;
+  };
 
-var _parse = require('../shared/parse');
+  /**
+    This registers an observer that listens to the React performance measurement event.
+    It hooks an object containing information about the events and performance measures of React components to the
+    global state (window object) which can then be accessed inside the inspected window using eval().
+  
+    With every re-render, this object is updated with new measures and events count.
+    The extension takes care of clearing up the memory (required to store this object) and also the cache.
+  
+    Calculating and aggregating the results happens inside the app frame and not in the devtool. It has its own benefits.
+      * These measures can be send to a server for analyses
+      * Measures can be logged to a console
+      * Particular measures can be inspected in the console with the help of configuration object (not done with the API for it yet)
+      * This also gives control to the developer on how to manage and inspect the measures apart from using the extension
+  
+    Trade-offs of previous version:
+      * Need to update the commonjs react-dom development bundle (commenting the line)
+      * No way of sending the measures from the app frame to the console
+      * Need to query measures rather than listening to an event once
+      * No control on how to inspect the measures for a particular use case (for eg - render and update performance of a component)
+  
+    Options, passed to listener:
+      * log (log to console)
+      * port (port number to send the data to console)
+  
+    Callback (optional): A callback can also be passed. The callback receives the parsed and aggregated results of the performance measures.
+  
+    NOTE: This should only be used in development mode.
+  */
+  var registerObserver = function registerObserver(params, callback) {
+    params = params || {};
 
-var _generate = require('../shared/generate');
+    // TODO: Is there any way to polyfill this API ?
+    if (window.PerformanceObserver) {
+      var _params = params,
+          shouldLog = _params.shouldLog,
+          port = _params.port,
+          components = _params.components;
 
-/**
-  This registers an observer that listens to the React performance measurement event.
-  It hooks an object containing information about the events and performance measures of React components to the
-  global state (window object) which can then be accessed inside the inspected window using eval().
 
-  With every re-render, this object is updated with new measures and events count.
-  The extension takes care of clearing up the memory (required to store this object) and also the cache.
+      var observer = new window.PerformanceObserver(function (list) {
+        var measures = (0, _generate.generateDataFromMeasures)((0, _parse.getReactPerformanceData)(list.getEntries()));
 
-  Calculating and aggregating the results happens inside the app frame and not in the devtool. It has its own benefits.
-    * These measures can be send to a server for analyses
-    * Measures can be logged to a console
-    * Particular measures can be inspected in the console with the help of configuration object (not done with the API for it yet)
-    * This also gives control to the developer on how to manage and inspect the measures apart from using the extension
+        if (callback && typeof callback === 'function') {
+          callback(measures);
+        }
 
-  Trade-offs of previous version:
-    * Need to update the commonjs react-dom development bundle (commenting the line)
-    * No way of sending the measures from the app frame to the console
-    * Need to query measures rather than listening to an event once
-    * No control on how to inspect the measures for a particular use case (for eg - render and update performance of a component)
+        window.__REACT_PERF_DEVTOOL_GLOBAL_STORE__ = {
+          measures: measures,
+          length: list.getEntries().length,
+          rawMeasures: list.getEntries()
 
-  Options, passed to listener:
-    * log (log to console)
-    * port (port number to send the data to console)
+          // For logging to console
+        };if (shouldLog) {
+          logToConsole(params, measures);
+        }
+      });
 
-  Callback (optional): A callback can also be passed. The callback receives the parsed and aggregated results of the performance measures.
+      observer.observe({
+        entryTypes: ['measure']
+      });
+    }
+  };
 
-  NOTE: This should only be used in development mode.
-*/
-var registerObserver = function registerObserver(params, callback) {
-  params = params || {};
+  /**
+    This function logs the measures to the console. Requires a server running on a specified port. Default port number is 8080.
+  */
+  var logToConsole = function logToConsole(_ref, measures) {
+    var port = _ref.port,
+        components = _ref.components;
 
-  // TODO: Is there any way to polyfill this API ?
-  if (window.PerformanceObserver) {
-    var _params = params,
-        shouldLog = _params.shouldLog,
-        port = _params.port,
-        components = _params.components;
+    if (!components) {
+      logMeasures(port, measures);
+    } else if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) !== undefined && Array.isArray(components)) {
+      logMeasures(port, getMeasuresByComponentName(components, measures));
+    }
+  };
 
+  var logMeasures = function logMeasures(port, measures) {
+    measures.forEach(function (_ref2) {
+      var componentName = _ref2.componentName,
+          mount = _ref2.mount,
+          render = _ref2.render,
+          update = _ref2.update,
+          unmount = _ref2.unmount,
+          totalTimeSpent = _ref2.totalTimeSpent,
+          percentTimeSpent = _ref2.percentTimeSpent,
+          numberOfInstances = _ref2.numberOfInstances,
+          componentWillMount = _ref2.componentWillMount,
+          componentDidMount = _ref2.componentDidMount,
+          componentWillReceiveProps = _ref2.componentWillReceiveProps,
+          shouldComponentUpdate = _ref2.shouldComponentUpdate,
+          componentWillUpdate = _ref2.componentWillUpdate,
+          componentDidUpdate = _ref2.componentDidUpdate,
+          componentWillUnmount = _ref2.componentWillUnmount;
 
-    var observer = new window.PerformanceObserver(function (list) {
-      var measures = (0, _generate.generateDataFromMeasures)((0, _parse.getReactPerformanceData)(list.getEntries()));
+      // The time is in millisecond (ms)
+      var data = {
+        component: componentName,
+        mount: mount,
+        render: render,
+        update: update,
+        unmount: unmount,
+        totalTimeSpent: totalTimeSpent,
+        percentTimeSpent: percentTimeSpent,
+        numberOfInstances: numberOfInstances,
+        componentWillMount: componentWillMount,
+        componentDidMount: componentDidMount,
+        componentWillReceiveProps: componentWillReceiveProps,
+        shouldComponentUpdate: shouldComponentUpdate,
+        componentWillUpdate: componentWillUpdate,
+        componentDidUpdate: componentDidUpdate,
+        componentWillUnmount: componentWillUnmount
+      };
 
-      if (callback && typeof callback === 'function') {
-        callback(measures);
-      }
+      send(data, port);
+    });
+  };
 
-      window.__REACT_PERF_DEVTOOL_GLOBAL_STORE__ = {
-        measures: measures,
-        length: list.getEntries().length,
-        rawMeasures: list.getEntries()
+  // Send the data to a specified port
+  var send = function send(data, port) {
+    window.navigator.sendBeacon('http://127.0.0.1:' + (port !== undefined && typeof port === 'number' ? port : 8080), JSON.stringify(data, null, 2));
+  };
 
-        // For logging to console
-      };if (shouldLog) {
-        logToConsole(params, measures);
-      }
+  var getMeasuresByComponentName = function getMeasuresByComponentName(componentNames, measures) {
+    return measures.filter(function (measure) {
+      return componentNames.includes(measure.componentName);
     });
+  };
 
-    observer.observe({
-      entryTypes: ['measure']
-    });
-  }
-};
-
-/**
-  This function logs the measures to the console. Requires a server running on a specified port. Default port number is 8080.
-*/
-var logToConsole = function logToConsole(_ref, measures) {
-  var port = _ref.port,
-      components = _ref.components;
-
-  if (!components) {
-    logMeasures(port, measures);
-  } else if ((typeof components === 'undefined' ? 'undefined' : _typeof(components)) !== undefined && Array.isArray(components)) {
-    logMeasures(port, getMeasuresByComponentName(components, measures));
-  }
-};
-
-var logMeasures = function logMeasures(port, measures) {
-  measures.forEach(function (_ref2) {
-    var componentName = _ref2.componentName,
-        mount = _ref2.mount,
-        render = _ref2.render,
-        update = _ref2.update,
-        unmount = _ref2.unmount,
-        totalTimeSpent = _ref2.totalTimeSpent,
-        percentTimeSpent = _ref2.percentTimeSpent,
-        numberOfInstances = _ref2.numberOfInstances,
-        componentWillMount = _ref2.componentWillMount,
-        componentDidMount = _ref2.componentDidMount,
-        componentWillReceiveProps = _ref2.componentWillReceiveProps,
-        shouldComponentUpdate = _ref2.shouldComponentUpdate,
-        componentWillUpdate = _ref2.componentWillUpdate,
-        componentDidUpdate = _ref2.componentDidUpdate,
-        componentWillUnmount = _ref2.componentWillUnmount;
-
-    // The time is in millisecond (ms)
-    var data = {
-      component: componentName,
-      mount: mount,
-      render: render,
-      update: update,
-      unmount: unmount,
-      totalTimeSpent: totalTimeSpent,
-      percentTimeSpent: percentTimeSpent,
-      numberOfInstances: numberOfInstances,
-      componentWillMount: componentWillMount,
-      componentDidMount: componentDidMount,
-      componentWillReceiveProps: componentWillReceiveProps,
-      shouldComponentUpdate: shouldComponentUpdate,
-      componentWillUpdate: componentWillUpdate,
-      componentDidUpdate: componentDidUpdate,
-      componentWillUnmount: componentWillUnmount
-    };
-
-    send(data, port);
-  });
-};
-
-// Send the data to a specified port
-var send = function send(data, port) {
-  window.navigator.sendBeacon('http://127.0.0.1:' + (port !== undefined && typeof port === 'number' ? port : 8080), JSON.stringify(data, null, 2));
-};
-
-var getMeasuresByComponentName = function getMeasuresByComponentName(componentNames, measures) {
-  return measures.filter(function (measure) {
-    return componentNames.includes(measure.componentName);
-  });
-};
-
-exports.registerObserver = registerObserver;
-exports.getMeasuresByComponentName = getMeasuresByComponentName;
+  exports.registerObserver = registerObserver;
+  exports.getMeasuresByComponentName = getMeasuresByComponentName;
+});

lib/shared/commitChanges.js

@@ -1,59 +0,72 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './math'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./math'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.math);
+    global.commitChanges = mod.exports;
+  }
+})(this, function (exports, _math) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCommitChangesTime = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getCommitChangesTime = undefined;
 
-var _math = require('./math');
 
-// Update the store with the time spent while committing the changes
-var updateStore = function updateStore(store, measure, delimiter) {
-  if (measure.name.includes(delimiter)) {
-    var measureName = measure.name.split(delimiter).join('');
+  // Update the store with the time spent while committing the changes
+  var updateStore = function updateStore(store, measure, delimiter) {
+    if (measure.name.includes(delimiter)) {
+      var measureName = measure.name.split(delimiter).join('');
 
-    if (measureName.includes('(Committing Changes)')) {
-      if (!store['Committing Changes']) {
-        store['Committing Changes'] = {
-          timeSpent: []
-        };
+      if (measureName.includes('(Committing Changes)')) {
+        if (!store['Committing Changes']) {
+          store['Committing Changes'] = {
+            timeSpent: []
+          };
+        }
+
+        store['Committing Changes'].timeSpent.push(Number(measure.duration.toFixed(2)));
       }
-
-      store['Committing Changes'].timeSpent.push(Number(measure.duration.toFixed(2)));
     }
-  }
-};
+  };
 
-var getCommitChangesTime = function getCommitChangesTime(measures) {
-  var store = {};
+  var getCommitChangesTime = function getCommitChangesTime(measures) {
+    var store = {};
 
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
+    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;
+    try {
+      for (var _iterator = measures[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var measure = _step.value;
 
-      updateStore(store, measure, '⚛');
-      updateStore(store, measure, '⛔');
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
+        updateStore(store, measure, '⚛');
+        updateStore(store, measure, '⛔');
       }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
     } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
-  }
 
-  return store;
-};
+    return store;
+  };
 
-exports.getCommitChangesTime = getCommitChangesTime;
+  exports.getCommitChangesTime = getCommitChangesTime;
+});

lib/shared/generate.js

@@ -1,69 +0,82 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './math'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./math'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.math);
+    global.generate = mod.exports;
+  }
+})(this, function (exports, _math) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generateDataFromMeasures = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.generateDataFromMeasures = undefined;
 
-var _math = require('./math');
 
-// Get the total time taken combining all the phases
-var getSummarisedTotalTime = function getSummarisedTotalTime(components) {
-  return components.reduce(function (acc, component) {
-    return acc += component.totalTime;
-  }, 0);
-};
-
-// Plot the timings (average time in ms, component instances, total time in ms)
-var plotTimings = function plotTimings(nums) {
-  return {
-    averageTimeSpentMs: (0, _math.average)(nums),
-    numberOfTimes: nums.length,
-    totalTimeSpentMs: (0, _math.add)(nums)
+  // Get the total time taken combining all the phases
+  var getSummarisedTotalTime = function getSummarisedTotalTime(components) {
+    return components.reduce(function (acc, component) {
+      return acc += component.totalTime;
+    }, 0);
   };
-};
 
-// Create a schema for each component
-var createSchema = function createSchema(store, component, totalTime) {
-  return {
-    componentName: component.name,
-    totalTimeSpent: component.totalTime,
-    numberOfInstances: store[component.name].mount.timeSpent.length - store[component.name].unmount.timeSpent.length,
-    percentTimeSpent: (0, _math.percent)(component.totalTime / totalTime),
-    render: plotTimings(store[component.name].render.timeSpent),
-    mount: plotTimings(store[component.name].mount.timeSpent),
-    update: plotTimings(store[component.name].update.timeSpent),
-    unmount: plotTimings(store[component.name].unmount.timeSpent),
-    componentWillMount: plotTimings(store[component.name].componentWillMount.timeSpent),
-    componentDidMount: plotTimings(store[component.name].componentDidMount.timeSpent),
-    componentWillReceiveProps: plotTimings(store[component.name].componentWillReceiveProps.timeSpent),
-    shouldComponentUpdate: plotTimings(store[component.name].shouldComponentUpdate.timeSpent),
-    componentWillUpdate: plotTimings(store[component.name].componentWillUpdate.timeSpent),
-    componentDidUpdate: plotTimings(store[component.name].componentDidUpdate.timeSpent),
-    componentWillUnmount: plotTimings(store[component.name].componentWillUnmount.timeSpent)
+  // Plot the timings (average time in ms, component instances, total time in ms)
+  var plotTimings = function plotTimings(nums) {
+    return {
+      averageTimeSpentMs: (0, _math.average)(nums),
+      numberOfTimes: nums.length,
+      totalTimeSpentMs: (0, _math.add)(nums)
+    };
   };
-};
 
-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 componentsWithTotalTime = Object.keys(store).map(function (componentName) {
+  // Create a schema for each component
+  var createSchema = function createSchema(store, component, totalTime) {
     return {
-      name: componentName,
-      totalTime: getTotalComponentTimeSpent(store[componentName])
+      componentName: component.name,
+      totalTimeSpent: component.totalTime,
+      numberOfInstances: store[component.name].mount.timeSpent.length - store[component.name].unmount.timeSpent.length,
+      percentTimeSpent: (0, _math.percent)(component.totalTime / totalTime),
+      render: plotTimings(store[component.name].render.timeSpent),
+      mount: plotTimings(store[component.name].mount.timeSpent),
+      update: plotTimings(store[component.name].update.timeSpent),
+      unmount: plotTimings(store[component.name].unmount.timeSpent),
+      componentWillMount: plotTimings(store[component.name].componentWillMount.timeSpent),
+      componentDidMount: plotTimings(store[component.name].componentDidMount.timeSpent),
+      componentWillReceiveProps: plotTimings(store[component.name].componentWillReceiveProps.timeSpent),
+      shouldComponentUpdate: plotTimings(store[component.name].shouldComponentUpdate.timeSpent),
+      componentWillUpdate: plotTimings(store[component.name].componentWillUpdate.timeSpent),
+      componentDidUpdate: plotTimings(store[component.name].componentDidUpdate.timeSpent),
+      componentWillUnmount: plotTimings(store[component.name].componentWillUnmount.timeSpent)
     };
-  });
-  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;
+  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 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/hostEffects.js

@@ -1,76 +0,89 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './math'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./math'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.math);
+    global.hostEffects = mod.exports;
+  }
+})(this, function (exports, _math) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getCommitHostEffectsTime = exports.getTotalEffects = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getCommitHostEffectsTime = exports.getTotalEffects = undefined;
 
-var _math = require('./math');
 
-// Update the store with the time spent while committing host effects
-var updateStore = function updateStore(store, measure) {
-  if (measure.name.includes('⚛')) {
-    var measureName = measure.name.split('⚛ ').join('');
+  // Update the store with the time spent while committing host effects
+  var updateStore = function updateStore(store, measure) {
+    if (measure.name.includes('⚛')) {
+      var measureName = measure.name.split('⚛ ').join('');
 
-    if (measureName.includes('Committing Host Effects')) {
-      var totalEffects = Number(measureName.split(':')[1].split(' ')[1]);
-      if (!store['Committing Host Effects']) {
-        store['Committing Host Effects'] = {
-          timeSpent: [],
-          totalEffects: []
-        };
+      if (measureName.includes('Committing Host Effects')) {
+        var totalEffects = Number(measureName.split(':')[1].split(' ')[1]);
+        if (!store['Committing Host Effects']) {
+          store['Committing Host Effects'] = {
+            timeSpent: [],
+            totalEffects: []
+          };
+        }
+
+        store['Committing Host Effects'].timeSpent.push(Number(measure.duration.toFixed(2)));
+        store['Committing Host Effects'].totalEffects.push(totalEffects);
       }
-
-      store['Committing Host Effects'].timeSpent.push(Number(measure.duration.toFixed(2)));
-      store['Committing Host Effects'].totalEffects.push(totalEffects);
     }
-  }
 
-  return {};
-};
+    return {};
+  };
 
-var getCommitHostEffectsTime = function getCommitHostEffectsTime(measures) {
-  var store = {};
+  var getCommitHostEffectsTime = function getCommitHostEffectsTime(measures) {
+    var store = {};
 
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
+    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;
+    try {
+      for (var _iterator = measures[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var measure = _step.value;
 
-      updateStore(store, measure);
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
+        updateStore(store, measure);
       }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
     } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
-  }
 
-  return store;
-};
+    return store;
+  };
 
-// Get total number of host effects
-var getTotalEffects = function getTotalEffects(store) {
-  var totalEffects = 0;
+  // Get total number of host effects
+  var getTotalEffects = function getTotalEffects(store) {
+    var totalEffects = 0;
 
-  for (var measure in store) {
-    totalEffects = totalEffects || 0;
-    totalEffects += (0, _math.add)(store[measure].totalEffects);
-  }
+    for (var measure in store) {
+      totalEffects = totalEffects || 0;
+      totalEffects += (0, _math.add)(store[measure].totalEffects);
+    }
 
-  return Number(totalEffects.toFixed(2));
-};
+    return Number(totalEffects.toFixed(2));
+  };
 
-exports.getTotalEffects = getTotalEffects;
-exports.getCommitHostEffectsTime = getCommitHostEffectsTime;
+  exports.getTotalEffects = getTotalEffects;
+  exports.getCommitHostEffectsTime = getCommitHostEffectsTime;
+});

lib/shared/lifecycle.js

@@ -1,76 +0,89 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './math'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./math'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.math);
+    global.lifecycle = mod.exports;
+  }
+})(this, function (exports, _math) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getLifecycleTime = exports.getTotalMethods = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getLifecycleTime = exports.getTotalMethods = undefined;
 
-var _math = require('./math');
 
-// Update the time spent while calling all the lifcycle methods
-var updateStore = function updateStore(store, measure) {
-  if (measure.name.includes('⚛')) {
-    var measureName = measure.name.split('⚛ ').join('');
+  // Update the time spent while calling all the lifcycle methods
+  var updateStore = function updateStore(store, measure) {
+    if (measure.name.includes('⚛')) {
+      var measureName = measure.name.split('⚛ ').join('');
 
-    if (measureName.includes('Calling Lifecycle Methods')) {
-      var totalMethods = Number(measureName.split(':')[1].split(' ')[1]);
-      if (!store['Calling Lifecycle Methods']) {
-        store['Calling Lifecycle Methods'] = {
-          timeSpent: [],
-          totalMethods: []
-        };
+      if (measureName.includes('Calling Lifecycle Methods')) {
+        var totalMethods = Number(measureName.split(':')[1].split(' ')[1]);
+        if (!store['Calling Lifecycle Methods']) {
+          store['Calling Lifecycle Methods'] = {
+            timeSpent: [],
+            totalMethods: []
+          };
+        }
+
+        store['Calling Lifecycle Methods'].timeSpent.push(Number(measure.duration.toFixed(2)));
+        store['Calling Lifecycle Methods'].totalMethods.push(totalMethods);
       }
-
-      store['Calling Lifecycle Methods'].timeSpent.push(Number(measure.duration.toFixed(2)));
-      store['Calling Lifecycle Methods'].totalMethods.push(totalMethods);
     }
-  }
 
-  return {};
-};
+    return {};
+  };
 
-var getLifecycleTime = function getLifecycleTime(measures) {
-  var store = {};
+  var getLifecycleTime = function getLifecycleTime(measures) {
+    var store = {};
 
-  var _iteratorNormalCompletion = true;
-  var _didIteratorError = false;
-  var _iteratorError = undefined;
+    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;
+    try {
+      for (var _iterator = measures[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var measure = _step.value;
 
-      updateStore(store, measure);
-    }
-  } catch (err) {
-    _didIteratorError = true;
-    _iteratorError = err;
-  } finally {
-    try {
-      if (!_iteratorNormalCompletion && _iterator.return) {
-        _iterator.return();
+        updateStore(store, measure);
       }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
     } finally {
-      if (_didIteratorError) {
-        throw _iteratorError;
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
       }
     }
-  }
 
-  return store;
-};
+    return store;
+  };
 
-// Get the total number of lifecycle methods that were called
-var getTotalMethods = function getTotalMethods(store) {
-  var totalMethods = 0;
+  // Get the total number of lifecycle methods that were called
+  var getTotalMethods = function getTotalMethods(store) {
+    var totalMethods = 0;
 
-  for (var measure in store) {
-    totalMethods = totalMethods || 0;
-    totalMethods += (0, _math.add)(store[measure].totalMethods);
-  }
+    for (var measure in store) {
+      totalMethods = totalMethods || 0;
+      totalMethods += (0, _math.add)(store[measure].totalMethods);
+    }
 
-  return Number(totalMethods.toFixed(2));
-};
+    return Number(totalMethods.toFixed(2));
+  };
 
-exports.getTotalMethods = getTotalMethods;
-exports.getLifecycleTime = getLifecycleTime;
+  exports.getTotalMethods = getTotalMethods;
+  exports.getLifecycleTime = getLifecycleTime;
+});

lib/shared/math.js

@@ -1,27 +0,41 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.math = mod.exports;
+  }
+})(this, function (exports) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-function add(nums) {
-  return Number(nums.reduce(function (acc, v) {
-    return acc += v;
-  }, 0).toFixed(2));
-}
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  function add(nums) {
+    return Number(nums.reduce(function (acc, v) {
+      return acc += v;
+    }, 0).toFixed(2));
+  }
 
-function average(nums) {
-  if (nums.length === 0) {
-    return '-';
+  function average(nums) {
+    if (nums.length === 0) {
+      return '-';
+    }
+    return (nums.reduce(function (acc, v) {
+      return acc += v;
+    }, 0) / nums.length).toFixed(2);
   }
-  return (nums.reduce(function (acc, v) {
-    return acc += v;
-  }, 0) / nums.length).toFixed(2);
-}
 
-function percent(num) {
-  return Math.round(num * 100) + '%';
-}
+  function percent(num) {
+    return Math.round(num * 100) + '%';
+  }
 
-exports.add = add;
-exports.average = average;
-exports.percent = percent;
+  exports.add = add;
+  exports.average = average;
+  exports.percent = percent;
+});

lib/shared/parse.js

@@ -1,118 +0,131 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './parseMeasures'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./parseMeasures'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.parseMeasures);
+    global.parse = mod.exports;
+  }
+})(this, function (exports, _parseMeasures) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getReactPerformanceData = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getReactPerformanceData = undefined;
 
-var _parseMeasures = require('./parseMeasures');
 
-// Schema for storing the time duration of each phase of a React component
-var createSchema = function createSchema() {
-  return {
-    // Phases
-    mount: {
-      timeSpent: []
-    },
-    unmount: {
-      timeSpent: []
-    },
-    update: {
-      timeSpent: []
-    },
-    render: {
-      timeSpent: []
-    },
+  // Schema for storing the time duration of each phase of a React component
+  var createSchema = function createSchema() {
+    return {
+      // Phases
+      mount: {
+        timeSpent: []
+      },
+      unmount: {
+        timeSpent: []
+      },
+      update: {
+        timeSpent: []
+      },
+      render: {
+        timeSpent: []
+      },
 
-    // Lifecycle hooks
-    componentWillMount: {
-      timeSpent: []
-    },
-    componentDidMount: {
-      timeSpent: []
-    },
-    componentWillReceiveProps: {
-      timeSpent: []
-    },
-    shouldComponentUpdate: {
-      timeSpent: []
-    },
-    componentWillUpdate: {
-      timeSpent: []
-    },
-    componentDidUpdate: {
-      timeSpent: []
-    },
-    componentWillUnmount: {
-      timeSpent: []
-    }
+      // Lifecycle hooks
+      componentWillMount: {
+        timeSpent: []
+      },
+      componentDidMount: {
+        timeSpent: []
+      },
+      componentWillReceiveProps: {
+        timeSpent: []
+      },
+      shouldComponentUpdate: {
+        timeSpent: []
+      },
+      componentWillUpdate: {
+        timeSpent: []
+      },
+      componentDidUpdate: {
+        timeSpent: []
+      },
+      componentWillUnmount: {
+        timeSpent: []
+      }
+    };
   };
-};
 
-// Update the time duration of each phase
-var updateTime = function updateTime(store, componentName, phase, measure) {
-  if (phase === '[mount]') {
-    store[componentName].mount.timeSpent.push(measure.duration);
-  }
+  // Update the time duration of each phase
+  var updateTime = function updateTime(store, componentName, phase, measure) {
+    if (phase === '[mount]') {
+      store[componentName].mount.timeSpent.push(measure.duration);
+    }
 
-  if (phase === '[unmount]') {
-    store[componentName].unmount.timeSpent.push(measure.duration);
-  }
+    if (phase === '[unmount]') {
+      store[componentName].unmount.timeSpent.push(measure.duration);
+    }
 
-  if (phase === '[update]') {
-    store[componentName].update.timeSpent.push(measure.duration);
-  }
+    if (phase === '[update]') {
+      store[componentName].update.timeSpent.push(measure.duration);
+    }
 
-  if (phase === '[render]') {
-    store[componentName].render.timeSpent.push(measure.duration);
-  }
+    if (phase === '[render]') {
+      store[componentName].render.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentWillMount') {
-    store[componentName].componentWillMount.timeSpent.push(measure.duration);
-  }
+    if (phase === 'componentWillMount') {
+      store[componentName].componentWillMount.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentWillUnmount') {
-    store[componentName].componentWillUnmount.timeSpent.push(measure.duration);
-  }
+    if (phase === 'componentWillUnmount') {
+      store[componentName].componentWillUnmount.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentDidMount') {
-    store[componentName].componentDidMount.timeSpent.push(measure.duration);
-  }
+    if (phase === 'componentDidMount') {
+      store[componentName].componentDidMount.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentWillReceiveProps') {
-    store[componentName].componentWillReceiveProps.timeSpent.push(measure.duration);
-  }
+    if (phase === 'componentWillReceiveProps') {
+      store[componentName].componentWillReceiveProps.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'shouldComponentUpdate') {
-    store[componentName].shouldComponentUpdate.timeSpent.push(measure.duration);
-  }
+    if (phase === 'shouldComponentUpdate') {
+      store[componentName].shouldComponentUpdate.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentWillUpdate') {
-    store[componentName].componentWillUpdate.timeSpent.push(measure.duration);
-  }
+    if (phase === 'componentWillUpdate') {
+      store[componentName].componentWillUpdate.timeSpent.push(measure.duration);
+    }
 
-  if (phase === 'componentDidUpdate') {
-    store[componentName].componentDidUpdate.timeSpent.push(measure.duration);
-  }
-};
+    if (phase === 'componentDidUpdate') {
+      store[componentName].componentDidUpdate.timeSpent.push(measure.duration);
+    }
+  };
 
-// Get data from the performance measures
-var getReactPerformanceData = function getReactPerformanceData(measures) {
-  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;
+  // Get data from the performance measures
+  var getReactPerformanceData = function getReactPerformanceData(measures) {
+    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;
 
-    if (!store[componentName]) {
-      store[componentName] = createSchema();
-    }
+      if (!store[componentName]) {
+        store[componentName] = createSchema();
+      }
 
-    updateTime(store, componentName, phase, measure);
-  });
-  return store;
-};
+      updateTime(store, componentName, phase, measure);
+    });
+    return store;
+  };
 
-exports.getReactPerformanceData = getReactPerformanceData;
+  exports.getReactPerformanceData = getReactPerformanceData;
+});

lib/shared/parseMeasures.js

@@ -1,58 +0,107 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.parseMeasures = mod.exports;
+  }
+})(this, function (exports) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+  var _slicedToArray = function () {
+    function sliceIterator(arr, i) {
+      var _arr = [];
+      var _n = true;
+      var _d = false;
+      var _e = undefined;
 
-/**
- This function returns the component name and phase name from the measure name (returned from React performance data).
- This may break if React changes the mark name (measure name).
-*/
-var getComponentAndPhaseName = function getComponentAndPhaseName(measure) {
-  if (measure.name.includes('⚛')) {
-    var index = measure.name.split('⚛ ').join('');
+      try {
+        for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+          _arr.push(_s.value);
 
-    // "App [mount]"
-    if (/\[\w+\]/.test(index)) {
-      var _index$split = index.split(' '),
-          _index$split2 = _slicedToArray(_index$split, 2),
-          componentName = _index$split2[0],
-          phase = _index$split2[1];
+          if (i && _arr.length === i) break;
+        }
+      } catch (err) {
+        _d = true;
+        _e = err;
+      } finally {
+        try {
+          if (!_n && _i["return"]) _i["return"]();
+        } finally {
+          if (_d) throw _e;
+        }
+      }
 
-      return {
-        componentName: componentName,
-        phase: phase
-      };
-    } else if (/\w+\.\w+/.test(index)) {
-      // App.componentWillMount
-      var _index$split3 = index.split('.'),
-          _index$split4 = _slicedToArray(_index$split3, 2),
-          _componentName = _index$split4[0],
-          lifecycle = _index$split4[1];
-
-      return {
-        componentName: _componentName,
-        phase: lifecycle
-      };
-    } else {
-      return null;
+      return _arr;
     }
-  } else if (measure.name.includes('⛔')) {
-    var _index = measure.name.split('⛔ ').join('');
 
-    if (/\w+\.\w+/.test(_index)) {
-      return {
-        componentName: _index.split('.')[0],
-        phase: _index.split('.')[1].split(' Warning:')[0]
-      };
-    } else {
-      return null;
+    return function (arr, i) {
+      if (Array.isArray(arr)) {
+        return arr;
+      } else if (Symbol.iterator in Object(arr)) {
+        return sliceIterator(arr, i);
+      } else {
+        throw new TypeError("Invalid attempt to destructure non-iterable instance");
+      }
+    };
+  }();
+
+  /**
+   This function returns the component name and phase name from the measure name (returned from React performance data).
+   This may break if React changes the mark name (measure name).
+  */
+  var getComponentAndPhaseName = function getComponentAndPhaseName(measure) {
+    if (measure.name.includes('⚛')) {
+      var index = measure.name.split('⚛ ').join('');
+
+      // "App [mount]"
+      if (/\[\w+\]/.test(index)) {
+        var _index$split = index.split(' '),
+            _index$split2 = _slicedToArray(_index$split, 2),
+            componentName = _index$split2[0],
+            phase = _index$split2[1];
+
+        return {
+          componentName: componentName,
+          phase: phase
+        };
+      } else if (/\w+\.\w+/.test(index)) {
+        var _index$split3 = index.split('.'),
+            _index$split4 = _slicedToArray(_index$split3, 2),
+            _componentName = _index$split4[0],
+            lifecycle = _index$split4[1];
+
+        return {
+          componentName: _componentName,
+          phase: lifecycle
+        };
+      } else {
+        return null;
+      }
+    } else if (measure.name.includes('⛔')) {
+      var _index = measure.name.split('⛔ ').join('');
+
+      if (/\w+\.\w+/.test(_index)) {
+        return {
+          componentName: _index.split('.')[0],
+          phase: _index.split('.')[1].split(' Warning:')[0]
+        };
+      } else {
+        return null;
+      }
     }
-  }
 
-  return null;
-};
+    return null;
+  };
 
-exports.getComponentAndPhaseName = getComponentAndPhaseName;
+  exports.getComponentAndPhaseName = getComponentAndPhaseName;
+});

lib/shared/totalTime.js

@@ -1,22 +0,35 @@
-'use strict';
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(['exports', './math'], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require('./math'));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.math);
+    global.totalTime = mod.exports;
+  }
+})(this, function (exports, _math) {
+  'use strict';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTotalTime = undefined;
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.getTotalTime = undefined;
 
-var _math = require('./math');
 
-// Computes the total time of each measure (commit changes, host effects and lifecycle methods)
-var getTotalTime = function getTotalTime(store) {
-  var totalTime = 0;
+  // Computes the total time of each measure (commit changes, host effects and lifecycle methods)
+  var getTotalTime = function getTotalTime(store) {
+    var totalTime = 0;
 
-  for (var measure in store) {
-    totalTime = totalTime || 0;
-    totalTime += (0, _math.add)(store[measure].timeSpent);
-  }
+    for (var measure in store) {
+      totalTime = totalTime || 0;
+      totalTime += (0, _math.add)(store[measure].timeSpent);
+    }
 
-  return totalTime;
-};
+    return totalTime;
+  };
 
-exports.getTotalTime = getTotalTime;
+  exports.getTotalTime = getTotalTime;
+});

package.json

 {
   "name": "react-perf-devtool",
-  "version": "3.0.7",
+  "version": "3.0.8-beta.0",
   "description": "A devtool for inspecting the performance of React Components",
   "main": "index.js",
   "types": "index.d.ts",
-  "files": ["lib/shared", "lib/npm"],
+  "files": [
+    "lib/shared",
+    "lib/npm"
+  ],
   "author": "Nitin Tulswani",
@@ -19,2 +22,3 @@ "license": "MIT",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-es2015-modules-umd": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
@@ -37,11 +41,7 @@ "babel-preset-env": "^1.6.1",
     "build:babel": "rm -rf lib && babel src --out-dir lib",
-    "build:watch":
-      "rm -rf ./extension/build && NODE_ENV=production ./node_modules/.bin/webpack-cli --watch --config ./webpack/webpack.config.js --progress",
-    "build":
-      "rm -rf ./extension/build && NODE_ENV=production ./node_modules/.bin/webpack-cli --config ./webpack/webpack.config.js --progress && yarn build:babel",
+    "build:watch": "rm -rf ./extension/build && NODE_ENV=production ./node_modules/.bin/webpack-cli --watch --config ./webpack/webpack.config.js --progress",
+    "build": "rm -rf ./extension/build && NODE_ENV=production ./node_modules/.bin/webpack-cli --config ./webpack/webpack.config.js --progress && yarn build:babel",
     "precommit": "lint-staged",
-    "format":
-      "find src -name '*.js' | xargs ./node_modules/.bin/prettier --write --no-semi --single-quote",
-    "generate":
-      "yarn build && rm -rf ./extension/extension.zip && zip -r ./extension/extension.zip ./extension",
+    "format": "find src -name '*.js' | xargs ./node_modules/.bin/prettier --write --no-semi --single-quote",
+    "generate": "yarn build && rm -rf ./extension/extension.zip && zip -r ./extension/extension.zip ./extension",
     "build:extension": "yarn format && yarn test && yarn generate"
@@ -48,0 +48,0 @@ },

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

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

43704

increased by12.81%

Lines of code

701

increased by30.3%

Worsened metrics

Dev dependency count

18

increased by5.88%

Number of low quality alerts

2

increased by100%

No dependency changes