es6

Author: nitin42

src/extension/components/ComponentTime.js

@@ -1,6 +1,6 @@
-const React = require('react')
+import React from 'react'
 
-const ProgressLoader = require('./ProgressLoader')
+import { ProgressLoader } from './ProgressLoader'
 
 const theme = require('../theme')
 
@@ -22,7 +22,7 @@ const setHrefStyles = theme =>
     ? { textDecoration: 'none', color: '#eff1f4' }
     : { textDecoration: 'none', color: 'black' }
 
-function ComponentTime(props) {
+export function ComponentTime(props) {
   return (
     <div style={calign}>
       <a style={setHrefStyles(theme)} href={`#${props.componentname}`}>
@@ -39,5 +39,3 @@ function ComponentTime(props) {
     </div>
   )
 }
-
-module.exports = ComponentTime

src/extension/components/ErrorComponent.js

@@ -1,6 +1,6 @@
-const React = require('react')
+import React from 'react'
 
-function ErrorComponent() {
+export function ErrorComponent() {
   return (
     <div style={{ fontWeight: 500, padding: '8px' }}>
       An error occurred while collecting the measures. To resolve this error,
@@ -23,5 +23,3 @@ function ErrorComponent() {
     </div>
   )
 }
-
-module.exports = ErrorComponent

src/extension/components/Measures.js

@@ -1,13 +1,13 @@
-const React = require('react')
+import React from 'react'
 
-const ProgressLoader = require('./ProgressLoader')
+import { ProgressLoader } from './ProgressLoader'
 
 const theme = require('../theme')
 
 /**
   This component renders the data (measures of each component)
 */
-function Measures(props) {
+export function Measures(props) {
   return (
     <div>
       <h1 className="component-text">Components</h1>
@@ -119,5 +119,3 @@ function Measures(props) {
     </div>
   )
 }
-
-module.exports = Measures

src/extension/components/Metrics.js

@@ -1,11 +1,11 @@
-const React = require('react')
+import React from 'react'
 
-const ComponentTime = require('./ComponentTime')
+import { ComponentTime } from './ComponentTime'
 
 /**
  This component contains the performance measures of React components in Circular loader .
 */
-function Metrics(props) {
+export function Metrics(props) {
   return (
     <React.Fragment>
       <div className="component-progress-container">
@@ -27,5 +27,3 @@ function Metrics(props) {
     </React.Fragment>
   )
 }
-
-module.exports = Metrics

src/extension/components/ProgressLoader.js

@@ -1,10 +1,10 @@
-const React = require('react')
+import React from 'react'
 
 const theme = require('../theme')
 
 // inspired from https://codepen.io/bbrady/pen/ozrjKE
 
-function ProgressLoader(props) {
+export function ProgressLoader(props) {
   // Size of the enclosing square
   const sqSize = props.sqSize
   // SVG centers the stroke width on the radius, subtract out so circle fits in square
@@ -58,5 +58,3 @@ function ProgressLoader(props) {
     </svg>
   )
 }
-
-module.exports = ProgressLoader

src/extension/components/ReactPerfDevtool.js

@@ -1,8 +1,8 @@
-const React = require('react')
-const Metrics = require('./Metrics')
-const Results = require('./Results')
-const ErrorComponent = require('./ErrorComponent')
-const Measures = require('./Measures')
+import React from 'react'
+import { Metrics } from './Metrics'
+import { Results } from './Results'
+import { ErrorComponent } from './ErrorComponent'
+import { Measures } from './Measures'
 
 const theme = require('../theme')
 
@@ -28,7 +28,7 @@ let queries = {
   It also renders the total time taken while committing the changes, host effects
   and calling all the lifecycle methods.
 */
-class ReactPerfDevtool extends React.Component {
+export class ReactPerfDevtool extends React.Component {
   timer = null
   evaluate = chrome.devtools.inspectedWindow.eval
   panelStyles = {
@@ -247,5 +247,3 @@ class ReactPerfDevtool extends React.Component {
     )
   }
 }
-
-module.exports = ReactPerfDevtool

src/extension/components/Results.js

@@ -1,13 +1,13 @@
-const React = require('react')
+import React from 'react'
 
-const getCommitChangesTime = require('../../shared/commitChanges')
-const {
+import { getCommitChangesTime } from '../../shared/commitChanges'
+import {
   getCommitHostEffectsTime,
   getTotalEffects
-} = require('../../shared/hostEffects')
-const { getLifecycleTime, getTotalMethods } = require('../../shared/lifecycle')
+} from '../../shared/hostEffects'
+import { getLifecycleTime, getTotalMethods } from '../../shared/lifecycle'
 
-const getTotalTime = require('../../shared/totalTime')
+import { getTotalTime } from '../../shared/totalTime'
 
 const theme = require('../theme')
 
@@ -98,13 +98,11 @@ function show(props) {
  This component renders the total time taken combining all the phases of a component,
  committing the changes, host effects and calling all the lifecycle methods.
 */
-function Results(props) {
+export function Results(props) {
   return (
     <div className="container result">
       <h1 className="results">Results</h1>
       {props.rawMeasures.length !== 0 ? show(props) : null}
     </div>
   )
 }
-
-module.exports = Results

src/index.js

@@ -1 +1,4 @@
-module.exports = require('./extension/components/ReactPerfDevtool')
+import { ReactPerfDevtool } from './extension/components/ReactPerfDevtool'
+import { registerObserver } from './npm/hook'
+
+export { ReactPerfDevtool, registerObserver }

src/npm/hook.js

@@ -1,5 +1,5 @@
-var getReactPerformanceData = require('../shared/parse')
-var generateDataFromMeasures = require('../shared/generate')
+import { getReactPerformanceData } from '../shared/parse'
+import { generateDataFromMeasures } from '../shared/generate'
 
 /**
   This registers an observer that listens to the React performance measurement event.
@@ -29,11 +29,13 @@ var generateDataFromMeasures = require('../shared/generate')
 
   NOTE: This should only be used in development mode.
 */
-function registerObserver(params, callback) {
+const registerObserver = (params, callback) => {
   params = params || {}
-  var { shouldLog, port, components } = params
-  var observer = new window.PerformanceObserver(list => {
-    var measures = generateDataFromMeasures(
+
+  const { shouldLog, port, components } = params
+
+  let observer = new window.PerformanceObserver(list => {
+    const measures = generateDataFromMeasures(
       getReactPerformanceData(list.getEntries())
     )
 
@@ -62,17 +64,17 @@ function registerObserver(params, callback) {
   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.
 */
-function logToConsole({ port, components }, measures) {
+const logToConsole = ({ port, components }, measures) => {
   if (!components) {
     logMeasures(port, measures)
   } else if (typeof components !== undefined && Array.isArray(components)) {
-    var requiredMeasures = getRequiredMeasures(components, measures)
+    const requiredMeasures = getRequiredMeasures(components, measures)
 
     logMeasures(port, requiredMeasures)
   }
 }
 
-function logMeasures(port, measures) {
+const logMeasures = (port, measures) => {
   measures.forEach(
     ({
       componentName,
@@ -117,7 +119,7 @@ function logMeasures(port, measures) {
 }
 
 // Send the data to a specified port
-function send(data, port) {
+const send = (data, port) => {
   window.navigator.sendBeacon(
     `http://127.0.0.1:${
       port !== undefined && typeof port === 'number' ? port : 8080
@@ -126,8 +128,8 @@ function send(data, port) {
   )
 }
 
-function getRequiredMeasures(components, measures) {
-  var requiredMeasures = []
+const getRequiredMeasures = (components, measures) => {
+  let requiredMeasures = []
 
   if (!Array.isArray(components)) {
     components = [components]
@@ -142,4 +144,4 @@ function getRequiredMeasures(components, measures) {
   return requiredMeasures
 }
 
-module.exports = registerObserver
+export { registerObserver }