Fix dead code elimination for feature flags (#11453)

gaearon · web-flow · commit 46f7b0d9451c · 2017-11-06T14:14:48.000Z
* Fix dead code elimination for feature flags Turning flags into named exports fixes dead code elimination. This required some restructuring of how we verify that flag types match up. I used the Check<> trick combined with import typeof, as suggested by @calebmer. For www, we can no longer re-export `require('ReactFeatureFlags')` directly, and instead destructure it. This means flags have to be known at init time. This is already the case so it's not a problem. In fact it may be better since it removes extra property access in tight paths. For things that we *want* to be dynamic on www (currently, only performance flag) we can export a function to toggle it, and then put it on the secret exports. In fact this is better than just letting everyone mutate the flag at arbitrary times since we can provide, e.g., a ref counting interface to it. * Record sizes
diff --git a/.flowconfig b/.flowconfig
@@ -2,7 +2,15 @@
 
 <PROJECT_ROOT>/fixtures/.*
 <PROJECT_ROOT>/build/.*
-<PROJECT_ROOT>/scripts/.*
+<PROJECT_ROOT>/scripts/bench/.*
+
+# These shims are copied into external projects:
+<PROJECT_ROOT>/scripts/rollup/shims/facebook-www/.*
+<PROJECT_ROOT>/scripts/rollup/shims/react-native/.*
+
+# Note: intentionally *don't* ignore /scripts/rollup/shims/rollup/
+# because it is part of the build and isn't external.
+
 <PROJECT_ROOT>/.*/node_modules/y18n/.*
 <PROJECT_ROOT>/node_modules/chrome-devtools-frontend/.*
 <PROJECT_ROOT>/node_modules/devtools-timeline-model/.*
diff --git a/packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js b/packages/react-cs-renderer/src/ReactNativeCSFeatureFlags.js
@@ -7,17 +7,21 @@
  * @flow
  */
 
-import type {FeatureFlags} from 'shared/ReactFeatureFlags';
+import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';
+import typeof * as CSFeatureFlagsType from './ReactNativeCSFeatureFlags';
 
-var ReactNativeCSFeatureFlags: FeatureFlags = {
-  enableAsyncSubtreeAPI: true,
-  enableAsyncSchedulingByDefaultInReactDOM: false,
-  enableReactFragment: false,
-  enableCreateRoot: false,
-  // React Native CS uses persistent reconciler.
-  enableMutatingReconciler: false,
-  enableNoopReconciler: false,
-  enablePersistentReconciler: true,
-};
+export const enableAsyncSubtreeAPI = true;
+export const enableAsyncSchedulingByDefaultInReactDOM = false;
+export const enableReactFragment = false;
+export const enableCreateRoot = false;
 
-export default ReactNativeCSFeatureFlags;
+// React Native CS uses persistent reconciler.
+export const enableMutatingReconciler = false;
+export const enableNoopReconciler = false;
+export const enablePersistentReconciler = true;
+
+// 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;
+// eslint-disable-next-line no-unused-expressions
+(null: Check<CSFeatureFlagsType, FeatureFlagsType>);
diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js
@@ -23,7 +23,10 @@ import * as EventPluginHub from 'events/EventPluginHub';
 import * as EventPluginRegistry from 'events/EventPluginRegistry';
 import * as EventPropagators from 'events/EventPropagators';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {
+  enableAsyncSchedulingByDefaultInReactDOM,
+  enableCreateRoot,
+} from 'shared/ReactFeatureFlags';
 import ReactVersion from 'shared/ReactVersion';
 import * as ReactDOMFrameScheduling from 'shared/ReactDOMFrameScheduling';
 import {ReactCurrentOwner} from 'shared/ReactGlobalSharedState';
@@ -631,7 +634,7 @@ const DOMRenderer = ReactFiberReconciler({
 
   scheduleDeferredCallback: ReactDOMFrameScheduling.rIC,
 
-  useSyncScheduling: !ReactFeatureFlags.enableAsyncSchedulingByDefaultInReactDOM,
+  useSyncScheduling: !enableAsyncSchedulingByDefaultInReactDOM,
 });
 
 ReactGenericBatching.injection.injectFiberBatchedUpdates(
@@ -944,7 +947,7 @@ const ReactDOM: Object = {
   },
 };
 
-if (ReactFeatureFlags.enableCreateRoot) {
+if (enableCreateRoot) {
   ReactDOM.createRoot = function createRoot(
     container: DOMContainer,
     options?: RootOptions,
diff --git a/packages/react-noop-renderer/src/ReactNoop.js b/packages/react-noop-renderer/src/ReactNoop.js
@@ -21,7 +21,7 @@ import type {UpdateQueue} from 'react-reconciler/src/ReactFiberUpdateQueue';
 import ReactFiberInstrumentation
   from 'react-reconciler/src/ReactFiberInstrumentation';
 import ReactFiberReconciler from 'react-reconciler';
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {enablePersistentReconciler} from 'shared/ReactFeatureFlags';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import emptyObject from 'fbjs/lib/emptyObject';
 import expect from 'expect';
@@ -213,7 +213,7 @@ var NoopRenderer = ReactFiberReconciler({
   },
 });
 
-var PersistentNoopRenderer = ReactFeatureFlags.enablePersistentReconciler
+var PersistentNoopRenderer = enablePersistentReconciler
   ? ReactFiberReconciler({
       ...SharedHostConfig,
       persistence: {
diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js
@@ -14,7 +14,7 @@ import type {
   ExpirationTime,
 } from 'react-reconciler/src/ReactFiberExpirationTime';
 
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {enableReactFragment} from 'shared/ReactFeatureFlags';
 import {NoEffect, Placement, Deletion} from 'shared/ReactTypeOfSideEffect';
 import {
   FunctionalComponent,
@@ -1426,7 +1426,7 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {
     // This leads to an ambiguity between <>{[...]}</> and <>...</>.
     // We treat the ambiguous cases above the same.
     if (
-      ReactFeatureFlags.enableReactFragment &&
+      enableReactFragment &&
       typeof newChild === 'object' &&
       newChild !== null &&
       newChild.type === REACT_FRAGMENT_TYPE &&
diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactFiber';
 import type {ExpirationTime} from './ReactFiberExpirationTime';
 
 import {Update} from 'shared/ReactTypeOfSideEffect';
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {enableAsyncSubtreeAPI} from 'shared/ReactFeatureFlags';
 import {isMounted} from 'shared/ReactFiberTreeReflection';
 import * as ReactInstanceMap from 'shared/ReactInstanceMap';
 import emptyObject from 'fbjs/lib/emptyObject';
@@ -450,7 +450,7 @@ export default function(
     instance.context = getMaskedContext(workInProgress, unmaskedContext);
 
     if (
-      ReactFeatureFlags.enableAsyncSubtreeAPI &&
+      enableAsyncSubtreeAPI &&
       workInProgress.type != null &&
       workInProgress.type.prototype != null &&
       workInProgress.type.prototype.unstable_isAsyncReactComponent === true
diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -10,7 +10,11 @@
 import type {HostConfig} from 'react-reconciler';
 import type {Fiber} from './ReactFiber';
 
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {
+  enableMutatingReconciler,
+  enableNoopReconciler,
+  enablePersistentReconciler,
+} from 'shared/ReactFeatureFlags';
 import {
   ClassComponent,
   HostRoot,
@@ -218,12 +222,9 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
         // TODO: this is recursive.
         // We are also not using this parent because
         // the portal will get pushed immediately.
-        if (ReactFeatureFlags.enableMutatingReconciler && mutation) {
+        if (enableMutatingReconciler && mutation) {
           unmountHostComponents(current);
-        } else if (
-          ReactFeatureFlags.enablePersistentReconciler &&
-          persistence
-        ) {
+        } else if (enablePersistentReconciler && persistence) {
           emptyPortalContainer(current);
         }
         return;
@@ -324,10 +325,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
         // Noop
       };
     }
-    if (
-      ReactFeatureFlags.enablePersistentReconciler ||
-      ReactFeatureFlags.enableNoopReconciler
-    ) {
+    if (enablePersistentReconciler || enableNoopReconciler) {
       return {
         commitResetTextContent(finishedWork: Fiber) {},
         commitPlacement(finishedWork: Fiber) {},
@@ -660,7 +658,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
     resetTextContent(current.stateNode);
   }
 
-  if (ReactFeatureFlags.enableMutatingReconciler) {
+  if (enableMutatingReconciler) {
     return {
       commitResetTextContent,
       commitPlacement,
diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.js b/packages/react-reconciler/src/ReactFiberCompleteWork.js
@@ -15,7 +15,11 @@ import type {HostContext} from './ReactFiberHostContext';
 import type {HydrationContext} from './ReactFiberHydrationContext';
 import type {FiberRoot} from './ReactFiberRoot';
 
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {
+  enableMutatingReconciler,
+  enablePersistentReconciler,
+  enableNoopReconciler,
+} from 'shared/ReactFeatureFlags';
 import {
   IndeterminateComponent,
   FunctionalComponent,
@@ -180,7 +184,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
   let updateHostComponent;
   let updateHostText;
   if (mutation) {
-    if (ReactFeatureFlags.enableMutatingReconciler) {
+    if (enableMutatingReconciler) {
       // Mutation mode
       updateHostContainer = function(workInProgress: Fiber) {
         // Noop
@@ -217,7 +221,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
       invariant(false, 'Mutating reconciler is disabled.');
     }
   } else if (persistence) {
-    if (ReactFeatureFlags.enablePersistentReconciler) {
+    if (enablePersistentReconciler) {
       // Persistent host tree mode
       const {
         cloneInstance,
@@ -354,7 +358,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
       invariant(false, 'Persistent reconciler is disabled.');
     }
   } else {
-    if (ReactFeatureFlags.enableNoopReconciler) {
+    if (enableNoopReconciler) {
       // No host operations
       updateHostContainer = function(workInProgress: Fiber) {
         // Noop
diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js
@@ -11,7 +11,7 @@ import type {Fiber} from './ReactFiber';
 import type {FiberRoot} from './ReactFiberRoot';
 import type {ReactNodeList} from 'shared/ReactTypes';
 
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {enableAsyncSubtreeAPI} from 'shared/ReactFeatureFlags';
 import {
   findCurrentHostFiber,
   findCurrentHostFiberWithNoPortals,
@@ -322,7 +322,7 @@ export default function<T, P, I, TI, PI, C, CC, CX, PL>(
     // treat updates to the root as async. This is a bit weird but lets us
     // avoid a separate `renderAsync` API.
     if (
-      ReactFeatureFlags.enableAsyncSubtreeAPI &&
+      enableAsyncSubtreeAPI &&
       element != null &&
       element.type != null &&
       element.type.prototype != null &&
diff --git a/packages/react/src/React.js b/packages/react/src/React.js
@@ -7,7 +7,7 @@
 
 import assign from 'object-assign';
 import ReactVersion from 'shared/ReactVersion';
-import ReactFeatureFlags from 'shared/ReactFeatureFlags';
+import {enableReactFragment} from 'shared/ReactFeatureFlags';
 
 import {Component, PureComponent, AsyncComponent} from './ReactBaseClasses';
 import {forEach, map, count, toArray, only} from './ReactChildren';
@@ -58,7 +58,7 @@ var React = {
   },
 };
 
-if (ReactFeatureFlags.enableReactFragment) {
+if (enableReactFragment) {
   React.Fragment = REACT_FRAGMENT_TYPE;
 }
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
@@ -7,35 +7,16 @@
  * @flow
  */
 
-export type FeatureFlags = {|
-  enableAsyncSubtreeAPI: boolean,
-  enableAsyncSchedulingByDefaultInReactDOM: boolean,
-  enableMutatingReconciler: boolean,
-  enableNoopReconciler: boolean,
-  enablePersistentReconciler: boolean,
-  enableReactFragment: boolean,
-  enableCreateRoot: boolean,
-|};
+export const enableAsyncSubtreeAPI = true;
+export const enableAsyncSchedulingByDefaultInReactDOM = false;
+// Exports React.Fragment
+export const enableReactFragment = false;
+// Exports ReactDOM.createRoot
+export const enableCreateRoot = false;
 
-var ReactFeatureFlags: FeatureFlags = {
-  enableAsyncSubtreeAPI: true,
-  enableAsyncSchedulingByDefaultInReactDOM: false,
-  // Mutating mode (React DOM, React ART, React Native):
-  enableMutatingReconciler: true,
-  // Experimental noop mode (currently unused):
-  enableNoopReconciler: false,
-  // Experimental persistent mode (CS):
-  enablePersistentReconciler: false,
-  // Exports React.Fragment
-  enableReactFragment: false,
-  // Exports ReactDOM.createRoot
-  enableCreateRoot: false,
-};
-
-if (__DEV__) {
-  if (Object.freeze) {
-    Object.freeze(ReactFeatureFlags);
-  }
-}
-
-export default ReactFeatureFlags;
+// Mutating mode (React DOM, React ART, React Native):
+export const enableMutatingReconciler = true;
+// Experimental noop mode (currently unused):
+export const enableNoopReconciler = false;
+// Experimental persistent mode (CS):
+export const enablePersistentReconciler = false;
diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
@@ -12,3 +12,8 @@
 declare var __REACT_DEVTOOLS_GLOBAL_HOOK__: any; /*?{
   inject: ?((stuff: Object) => void)
 };*/
+
+// ReactFeatureFlags rollup shim for www imports the www implementation.
+declare module 'ReactFeatureFlags' {
+  declare module.exports: any;
+}
diff --git a/scripts/jest/setup.js b/scripts/jest/setup.js
@@ -1,12 +1,9 @@
 'use strict';
 
-// We want to globally mock this but jest doesn't let us do that by default
-// for a file that already exists. So we have to explicitly mock it.
 jest.mock('shared/ReactFeatureFlags', () => {
-  const flags = require.requireActual('shared/ReactFeatureFlags').default;
-  return Object.assign({}, flags, {
-    disableNewFiberFeatures: true,
-  });
+  // We can alter flags based on environment here
+  // (e.g. for CI runs with different flags).
+  return require.requireActual('shared/ReactFeatureFlags');
 });
 
 // Error logging varies between Fiber and Stack;
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
diff --git a/scripts/rollup/shims/rollup/ReactCurrentOwner-www.js b/scripts/rollup/shims/rollup/ReactCurrentOwner-www.js
diff --git a/scripts/rollup/shims/rollup/ReactFeatureFlags-www.js b/scripts/rollup/shims/rollup/ReactFeatureFlags-www.js
diff --git a/scripts/rollup/shims/rollup/assign-umd.js b/scripts/rollup/shims/rollup/assign-umd.js
diff --git a/scripts/rollup/shims/rollup/lowPriorityWarning-www.js b/scripts/rollup/shims/rollup/lowPriorityWarning-www.js
