react-perf-devtool - npm Package Compare versions

Comparing version 3.0.0-beta7 to 3.0.0-beta8

package.json

 {
   "name": "react-perf-devtool",
-  "version": "3.0.0-beta7",
+  "version": "3.0.0-beta8",
   "description": "A chrome devtool extension for inspecting performance of React Components",
@@ -5,0 +5,0 @@ "main": "src/npm/index.js",

src/extension/components/ReactPerfDevtool.js

@@ -5,20 +5,23 @@ const React = require('react')
 const Results = require('./Results')
+const ErrorComponent = require('./ErrorComponent')
 
+// Stores the measures
 let store = []
 
-const ErrorComponent = props => (
-  <div style={props.style}>
-    An error occurred while collecting the measures. To resolve this error, try
-    these solutions:
-    <ul>
-      <li>
-        Register a top level observer in your <b>index.js</b> file.{" "}
-        <a href="#" style={{ textDecoration: 'none' }}>See the detailed documentation</a> on how to register a top
-        level listener in your React app.
-      </li><br/>
-      <li>Refresh the the page or reload the inspected window if you've registered the observer. This may be due to a bug in <b>react-perf-devtool</b>.</li>
-    </ul>
-  </div>
-)
+const commonStyles = { fontWeight: 500, padding: '8px' }
 
+// These fields are evaluated in the inspectedWindow to get information about measures.
+const executeCode = {
+  measuresLength: 'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.length)',
+  measures: 'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.measures)',
+  rawMeasures:
+    'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.rawMeasures)',
+  observer: 'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.instance)',
+  clear: `__REACT_PERF_DEVTOOL_GLOBAL_STORE___ = {
+          length: 0,
+          measures: [],
+          rawMeasures: [],
+        }`,
+}
+
 /**
@@ -32,2 +35,5 @@ This is the main component that renders the table, containing information about
   timer = null
+  evaluate = chrome.devtools.inspectedWindow.eval
+  refresh = chrome.devtools.inspectedWindow.reload
+  panelStyles = { color: chrome.devtools.panels.themeName === 'dark' ? 'white' : 'black' }
 
@@ -44,2 +50,3 @@ constructor(props) {
       hasError: false, // Track errors, occurred when collecting the measures.
+      instance: null
     }
@@ -58,2 +65,3 @@ }
     // Clear the timer.
+    // this.observer.disconnect()
     clearInterval(this.timer)
@@ -63,14 +71,11 @@ }
   getMeasuresLength = () => {
-    chrome.devtools.inspectedWindow.eval(
-      'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.length)',
-      (count, err) => {
-        if (err) {
-          this.setState({ hasError: true })
-          return
-        }
+    this.evaluate(executeCode['measuresLength'], (count, err) => {
+      if (err) {
+        this.setState({ hasError: true })
+        return
+      }
 
-        // Update the event count.
-        this.updateEventsCount(JSON.parse(count))
-      }
-    )
+      // Update the event count.
+      this.updateEventsCount(JSON.parse(count))
+    })
   }
@@ -96,31 +101,28 @@
   getMeasures = () => {
-    chrome.devtools.inspectedWindow.eval(
-      'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.measures)',
-      (measures, err) => {
-        if (err) {
-          this.setState({ hasError: true })
-          return
-        }
+    // Returns the performance entries which are not parsed and not aggregated
+    this.getRawMeasures()
 
-        this.getRawMeasures()
+    this.evaluate(executeCode['measures'], (measures, err) => {
+      if (err) {
+        this.setState({ hasError: true })
+        return
+      }
 
-        // Update the state.
-        this.updateMeasures(JSON.parse(measures))
-      }
-    )
+      // Update the state.
+      this.updateMeasures(JSON.parse(measures))
+    })
   }
 
   getRawMeasures = () => {
-    chrome.devtools.inspectedWindow.eval(
-      'JSON.stringify(__REACT_PERF_DEVTOOL_GLOBAL_STORE___.rawMeasures)',
-      (measures, err) => {
-        if (err) {
-          this.setState({ hasError: true })
-          return
-        }
-        this.setState({
-          rawMeasures: JSON.parse(measures),
-        })
+    this.getObserverInstance()
+
+    this.evaluate(executeCode['rawMeasures'], (measures, err) => {
+      if (err) {
+        this.setState({ hasError: true })
+        return
       }
-    )
+      this.setState({
+        rawMeasures: JSON.parse(measures),
+      })
+    })
   }
@@ -141,11 +143,22 @@
 
-  clearMeasures = () =>
-    chrome.devtools.inspectedWindow.eval(
-      '__REACT_PERF_DEVTOOL_GLOBAL_STORE___ = {}'
-    )
+  getObserverInstance = () => {
+    this.evaluate(executeCode['observer'], (instance, err) => {
+      if (err) {
+        this.setState({ hasError: true })
+        return
+      }
+      this.setState({
+        instance: JSON.parse(instance),
+      })
+    })
+  }
 
+  clearMeasures = () => this.evaluate(executeCode['clear'])
+
   // Clear the panel content.
   clear = () => {
+    store = []
+
     this.setState({
-      perfData: [],
+      perfData: store,
       totalTime: 0,
@@ -165,4 +178,7 @@ rawMeasures: [],
     this.clear()
+    this.browserReload()
+
+    // Set the state back to loading (this avoids a flash when the inspected window is reloaded)
     this.setState({ loading: true })
-    this.browserReload()
+
     chrome.devtools.inspectedWindow.reload()
@@ -172,10 +188,5 @@ }
   render() {
-    const commonStyles = { fontWeight: 500, padding: '8px' }
-
     return (
       <div
-        style={{
-          color:
-            chrome.devtools.panels.themeName === 'dark' ? 'white' : 'black',
-        }}
+        style={this.panelStyles}
       >
@@ -191,3 +202,3 @@ <div style={{ display: 'inlineBlock' }}>
         {this.state.hasError ? (
-          <ErrorComponent style={commonStyles} />
+          <ErrorComponent />
         ) : (
@@ -203,2 +214,3 @@ <React.Fragment>
         )}
+        {typeof this.state.instance.constructor.name}
       </div>
@@ -205,0 +217,0 @@ )

src/npm/hook.js

 var getReactPerformanceData = require('../shared/parse')
 var generateDataFromMeasures = require('../shared/generate')
 
-function registerListener(options) {
-  var observer = new window.PerformanceObserver(list => {
-  	// window.__REACT_PERF_DEVTOOL_GLOBAL_STORE___ = list.getEntries()
+function observerCallback(list, observer) {
+  var measures = generateDataFromMeasures(getReactPerformanceData(list.getEntries()))
 
-    var measures = generateDataFromMeasures(getReactPerformanceData(list.getEntries()))
+  // React Perf Devtool hook
+  window.__REACT_PERF_DEVTOOL_GLOBAL_STORE___ = {
+    name: 'React Performance Measures',
+    measures,
+    length: list.getEntries().length,
+    rawMeasures: list.getEntries(),
+    observer,
+  }
 
-    window.__REACT_PERF_DEVTOOL_GLOBAL_STORE___ = {
-      name: 'React Performance Measures',
-      measures,
-      length: list.getEntries().length,
-      rawMeasures: list.getEntries(),
-      instance: observer,
-    }
+  // For logging to console
+  if (options.log) {
+    logToConsole(measures)
+  }
+}
 
-    if (options.log) {
-      logToConsole(measures)
-    }
-  })
+function registerListener(options) {
+  var observer = new window.PerformanceObserver(observerCallback)
 
@@ -23,0 +25,0 @@ observer.observe({

No alert changes

Improved metrics

Lines of code

830

increased by3.11%

Worsened metrics

Total package byte prevSize

48410

decreased by-37.04%

No dependency changes