Convert Performance to single default export

Expensify · Aug 23, 2021 · 9ea80ba · 9ea80ba
1 parent 4427cd9
commit 9ea80ba
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 50 deletions.
diff --git a/src/libs/Performance.js b/src/libs/Performance.js
@@ -8,7 +8,7 @@ import getComponentDisplayName from './getComponentDisplayName';
 import CONST from '../CONST';
 
 /** @type {import('react-native-performance').Performance} */
-let performance;
+let rnPerformance;
 
 /**
  * Deep diff between two objects. Useful for figuring out what changed about an object from one render to the next so
@@ -33,40 +33,41 @@ function diffObject(object, base) {
     return changes(object, base);
 }
 
-// When performance monitoring is disabled the implementations are blank
-/* eslint-disable import/no-mutable-exports */
-let setupPerformanceObserver = () => {};
-let printPerformanceMetrics = () => {};
-let markStart = () => {};
-let markEnd = () => {};
-let traceRender = () => {};
-let withRenderTrace = () => Component => Component;
-/* eslint-enable import/no-mutable-exports */
+const Performance = {
+    // When performance monitoring is disabled the implementations are blank
+    diffObject,
+    setupPerformanceObserver: () => {},
+    printPerformanceMetrics: () => {},
+    markStart: () => {},
+    markEnd: () => {},
+    traceRender: () => {},
+    withRenderTrace: () => Component => Component,
+};
 
 if (canCapturePerformanceMetrics()) {
     /**
      * Sets up an observer to capture events recorded in the native layer before the app fully initializes.
      */
-    setupPerformanceObserver = () => {
+    Performance.setupPerformanceObserver = () => {
         const performanceReported = require('react-native-performance-flipper-reporter');
         performanceReported.setupDefaultFlipperReporter();
 
         const perfModule = require('react-native-performance');
         perfModule.setResourceLoggingEnabled(true);
-        performance = perfModule.default;
+        rnPerformance = perfModule.default;
 
         // Monitor some native marks that we want to put on the timeline
         new perfModule.PerformanceObserver((list, observer) => {
             list.getEntries()
                 .forEach((entry) => {
                     if (entry.name === 'nativeLaunchEnd') {
-                        performance.measure('nativeLaunch', 'nativeLaunchStart', 'nativeLaunchEnd');
+                        rnPerformance.measure('nativeLaunch', 'nativeLaunchStart', 'nativeLaunchEnd');
                     }
                     if (entry.name === 'downloadEnd') {
-                        performance.measure('jsBundleDownload', 'downloadStart', 'downloadEnd');
+                        rnPerformance.measure('jsBundleDownload', 'downloadStart', 'downloadEnd');
                     }
                     if (entry.name === 'runJsBundleEnd') {
-                        performance.measure('runJsBundle', 'runJsBundleStart', 'runJsBundleEnd');
+                        rnPerformance.measure('runJsBundle', 'runJsBundleStart', 'runJsBundleEnd');
                     }
 
                     // We don't need to keep the observer past this point
@@ -85,13 +86,13 @@ if (canCapturePerformanceMetrics()) {
                             const end = mark.name;
                             const name = end.replace(/_end$/, '');
                             const start = `${name}_start`;
-                            performance.measure(name, start, end);
+                            rnPerformance.measure(name, start, end);
                         }
 
                         // Capture any custom measures or metrics below
                         if (mark.name === `${CONST.TIMING.SIDEBAR_LOADED}_end`) {
-                            performance.measure('TTI', 'nativeLaunchStart', mark.name);
-                            printPerformanceMetrics();
+                            rnPerformance.measure('TTI', 'nativeLaunchStart', mark.name);
+                            Performance.printPerformanceMetrics();
                         }
                     } catch (error) {
                         // Sometimes there might be no start mark recorded and the measure will fail with an error
@@ -104,12 +105,12 @@ if (canCapturePerformanceMetrics()) {
     /**
      * Outputs performance stats. We alert these so that they are easy to access in release builds.
      */
-    printPerformanceMetrics = () => {
+    Performance.printPerformanceMetrics = () => {
         const stats = [
-            ...performance.getEntriesByName('nativeLaunch'),
-            ...performance.getEntriesByName('runJsBundle'),
-            ...performance.getEntriesByName('jsBundleDownload'),
-            ...performance.getEntriesByName('TTI'),
+            ...rnPerformance.getEntriesByName('nativeLaunch'),
+            ...rnPerformance.getEntriesByName('runJsBundle'),
+            ...rnPerformance.getEntriesByName('jsBundleDownload'),
+            ...rnPerformance.getEntriesByName('TTI'),
         ]
             .filter(entry => entry.duration > 0)
             .map(entry => `\u2022 ${entry.name}: ${entry.duration.toFixed(1)}ms`);
@@ -123,7 +124,7 @@ if (canCapturePerformanceMetrics()) {
      * @param {Object} [detail]
      * @returns {PerformanceMark}
      */
-    markStart = (name, detail) => performance.mark(`${name}_start`, {detail});
+    Performance.markStart = (name, detail) => rnPerformance.mark(`${name}_start`, {detail});
 
     /**
      * Add an end mark to the performance entries
@@ -132,7 +133,7 @@ if (canCapturePerformanceMetrics()) {
      * @param {Object} [detail]
      * @returns {PerformanceMark}
      */
-    markEnd = (name, detail) => performance.mark(`${name}_end`, {detail});
+    Performance.markEnd = (name, detail) => rnPerformance.mark(`${name}_end`, {detail});
 
     /**
      * Put data emitted by Profiler components on the timeline
@@ -145,15 +146,15 @@ if (canCapturePerformanceMetrics()) {
      * @param {Set} interactions the Set of interactions belonging to this update
      * @returns {PerformanceMeasure}
      */
-    traceRender = (
+    Performance.traceRender = (
         id,
         phase,
         actualDuration,
         baseDuration,
         startTime,
         commitTime,
         interactions,
-    ) => performance.measure(id, {
+    ) => rnPerformance.measure(id, {
         start: startTime,
         duration: actualDuration,
         detail: {
@@ -170,9 +171,9 @@ if (canCapturePerformanceMetrics()) {
      * @param {string} config.id
      * @returns {function(React.Component): React.FunctionComponent}
      */
-    withRenderTrace = ({id}) => (WrappedComponent) => {
+    Performance.withRenderTrace = ({id}) => (WrappedComponent) => {
         const WithRenderTrace = forwardRef((props, ref) => (
-            <Profiler id={id} onRender={traceRender}>
+            <Profiler id={id} onRender={Performance.traceRender}>
                 {/* eslint-disable-next-line react/jsx-props-no-spreading */}
                 <WrappedComponent {...props} ref={ref} />
             </Profiler>
@@ -183,12 +184,4 @@ if (canCapturePerformanceMetrics()) {
     };
 }
 
-export {
-    diffObject,
-    printPerformanceMetrics,
-    setupPerformanceObserver,
-    markStart,
-    markEnd,
-    traceRender,
-    withRenderTrace,
-};
+export default Performance;
diff --git a/src/libs/actions/App.js b/src/libs/actions/App.js
@@ -7,7 +7,7 @@ import CONST from '../../CONST';
 import Log from '../Log';
 import CONFIG from '../../CONFIG';
 import ROUTES from '../../ROUTES';
-import {markEnd, markStart} from '../Performance';
+import Performance from '../Performance';
 import Timing from './Timing';
 
 let currentUserAccountID;
@@ -60,8 +60,8 @@ function setSidebarLoaded() {
 
     Onyx.set(ONYXKEYS.IS_SIDEBAR_LOADED, true);
     Timing.end(CONST.TIMING.SIDEBAR_LOADED);
-    markEnd(CONST.TIMING.SIDEBAR_LOADED);
-    markStart(CONST.TIMING.REPORT_INITIAL_RENDER);
+    Performance.markEnd(CONST.TIMING.SIDEBAR_LOADED);
+    Performance.markStart(CONST.TIMING.REPORT_INITIAL_RENDER);
 }
 
 let appState;

diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
@@ -36,7 +36,7 @@ import {contextMenuRef} from './ContextMenu/ReportActionContextMenu';
 import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu';
 import variables from '../../../styles/variables';
 import MarkerBadge from './MarkerBadge';
-import {markEnd, withRenderTrace} from '../../../libs/Performance';
+import Performance from '../../../libs/Performance';
 
 const propTypes = {
     /** The ID of the report actions will be created for */
@@ -409,10 +409,10 @@ class ReportActionsView extends React.Component {
 
         // Capture the init measurement only once not per each chat switch as the value gets overwritten
         if (!ReportActionsView.initMeasured) {
-            markEnd(CONST.TIMING.REPORT_INITIAL_RENDER);
+            Performance.markEnd(CONST.TIMING.REPORT_INITIAL_RENDER);
             ReportActionsView.initMeasured = true;
         } else {
-            markEnd(CONST.TIMING.SWITCH_REPORT);
+            Performance.markEnd(CONST.TIMING.SWITCH_REPORT);
         }
     }
 
@@ -519,7 +519,7 @@ ReportActionsView.propTypes = propTypes;
 ReportActionsView.defaultProps = defaultProps;
 
 export default compose(
-    withRenderTrace({id: '<ReportActionsView> rendering'}),
+    Performance.withRenderTrace({id: '<ReportActionsView> rendering'}),
     withWindowDimensions,
     withDrawerState,
     withLocalize,

diff --git a/src/pages/home/sidebar/SidebarScreen.js b/src/pages/home/sidebar/SidebarScreen.js
@@ -24,7 +24,7 @@ import {
 import Permissions from '../../../libs/Permissions';
 import ONYXKEYS from '../../../ONYXKEYS';
 import {create} from '../../../libs/actions/Policy';
-import {markStart} from '../../../libs/Performance';
+import Performance from '../../../libs/Performance';
 
 const propTypes = {
     /** Beta features list */
@@ -50,7 +50,7 @@ class SidebarScreen extends Component {
     }
 
     componentDidMount() {
-        markStart(CONST.TIMING.SIDEBAR_LOADED);
+        Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
         Timing.start(CONST.TIMING.SIDEBAR_LOADED, true);
     }
 
@@ -86,7 +86,7 @@ class SidebarScreen extends Component {
      */
     startTimer() {
         Timing.start(CONST.TIMING.SWITCH_REPORT);
-        markStart(CONST.TIMING.SWITCH_REPORT);
+        Performance.markStart(CONST.TIMING.SWITCH_REPORT);
     }
 
     render() {

diff --git a/src/setup/index.native.js b/src/setup/index.native.js
@@ -1,4 +1,4 @@
-import {setupPerformanceObserver} from '../libs/Performance';
+import Performance from '../libs/Performance';
 
 // Setup Flipper plugins when on dev
 export default function () {
@@ -10,5 +10,5 @@ export default function () {
         RNAsyncStorageFlipper(AsyncStorage);
     }
 
-    setupPerformanceObserver();
+    Performance.setupPerformanceObserver();
 }