Expose a way to toggle user timing flag in www

Author: gaearon

packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import invariant from 'fbjs/lib/invariant';
+
 import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
 import typeof * as CSFeatureFlagsType from './ReactNativeCSFeatureFlags';
 
@@ -21,6 +23,10 @@ export const enableMutatingReconciler = false;
 export const enableNoopReconciler = false;
 export const enablePersistentReconciler = true;
 
+export function addUserTimingListener() {
+  invariant(false, 'Not implemented.');
+}
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y=_X> = null;

packages/react-dom/src/client/ReactDOMFB.js

@@ -13,6 +13,7 @@ import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import * as ReactFiberErrorLogger
   from 'react-reconciler/src/ReactFiberErrorLogger';
 import ReactErrorUtils from 'shared/ReactErrorUtils';
+import {addUserTimingListener} from 'shared/ReactFeatureFlags';
 
 import ReactDOM from './ReactDOM';
 import * as ReactBrowserEventEmitter from '../events/ReactBrowserEventEmitter';
@@ -31,6 +32,8 @@ Object.assign(
     ReactInstanceMap,
     // Used by www msite:
     TapEventPlugin,
+    // Perf experiment
+    addUserTimingListener,
   },
 );
 

packages/shared/ReactFeatureFlags.js

@@ -7,6 +7,8 @@
  * @flow
  */
 
+import invariant from 'fbjs/lib/invariant';
+
 export const enableAsyncSubtreeAPI = true;
 export const enableAsyncSchedulingByDefaultInReactDOM = false;
 // Exports React.Fragment
@@ -21,3 +23,7 @@ export const enableMutatingReconciler = true;
 export const enableNoopReconciler = false;
 // Experimental persistent mode (CS):
 export const enablePersistentReconciler = false;
+
+export function addUserTimingListener() {
+  invariant(false, 'Not implemented.');
+}

scripts/rollup/shims/rollup/ReactFeatureFlags-www.js

@@ -16,13 +16,38 @@ export const {
   enableAsyncSchedulingByDefaultInReactDOM,
   enableReactFragment,
   enableCreateRoot,
-  enableUserTimingAPI,
   // Reconciler flags
   enableMutatingReconciler,
   enableNoopReconciler,
   enablePersistentReconciler,
 } = require('ReactFeatureFlags');
 
+export let enableUserTimingAPI = __DEV__;
+
+let refCount = 0;
+export function addUserTimingListener() {
+  if (__DEV__) {
+    // Noop.
+    return () => {};
+  }
+  refCount++;
+  updateFlagOutsideOfReactCallStack();
+  return () => {
+    refCount--;
+    updateFlagOutsideOfReactCallStack();
+  };
+}
+
+let timeout = null;
+function updateFlagOutsideOfReactCallStack() {
+  if (!timeout) {
+    timeout = setTimeout(() => {
+      timeout = null;
+      enableUserTimingAPI = refCount > 0;
+    });
+  }
+}
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y=_X> = null;