Convert the Source to ES Modules (#11389)

* Update transforms to handle ES modules

* Update Jest to handle ES modules

* Convert react package to ES modules

* Convert react-art package to ES Modules

* Convert react-call-return package to ES Modules

* Convert react-test-renderer package to ES Modules

* Convert react-cs-renderer package to ES Modules

* Convert react-rt-renderer package to ES Modules

* Convert react-noop-renderer package to ES Modules

* Convert react-dom/server to ES modules

* Convert react-dom/{client,events,test-utils} to ES modules

* Convert react-dom/shared to ES modules

* Convert react-native-renderer to ES modules

* Convert react-reconciler to ES modules

* Convert events to ES modules

* Convert shared to ES modules

* Remove CommonJS support from transforms

* Move ReactDOMFB entry point code into react-dom/src

This is clearer because we can use ES imports in it.

* Fix Rollup shim configuration to work with ESM

* Fix incorrect comment

* Exclude external imports without side effects

* Fix ReactDOM FB build

* Remove TODOs I don’t intend to fix yet

Author: gaearon

packages/events/EventPluginHub.js

@@ -7,13 +7,13 @@
 
 'use strict';
 
-var ReactErrorUtils = require('shared/ReactErrorUtils');
-var invariant = require('fbjs/lib/invariant');
+import ReactErrorUtils from 'shared/ReactErrorUtils';
+import invariant from 'fbjs/lib/invariant';
 
-var EventPluginRegistry = require('./EventPluginRegistry');
-var EventPluginUtils = require('./EventPluginUtils');
-var accumulateInto = require('./accumulateInto');
-var forEachAccumulated = require('./forEachAccumulated');
+import EventPluginRegistry from './EventPluginRegistry';
+import EventPluginUtils from './EventPluginUtils';
+import accumulateInto from './accumulateInto';
+import forEachAccumulated from './forEachAccumulated';
 
 /**
  * Internal queue of events that have accumulated their dispatches and are
@@ -220,4 +220,4 @@ var EventPluginHub = {
   },
 };
 
-module.exports = EventPluginHub;
+export default EventPluginHub;

packages/events/EventPluginRegistry.js

@@ -16,7 +16,7 @@ import type {
   PluginModule,
 } from './PluginModuleType';
 
-var invariant = require('fbjs/lib/invariant');
+import invariant from 'fbjs/lib/invariant';
 
 type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>};
 type EventPluginOrder = null | Array<PluginName>;
@@ -251,4 +251,4 @@ var EventPluginRegistry = {
   },
 };
 
-module.exports = EventPluginRegistry;
+export default EventPluginRegistry;

packages/events/EventPluginUtils.js

@@ -7,12 +7,9 @@
 
 'use strict';
 
-var ReactErrorUtils = require('shared/ReactErrorUtils');
-var invariant = require('fbjs/lib/invariant');
-
-if (__DEV__) {
-  var warning = require('fbjs/lib/warning');
-}
+import ReactErrorUtils from 'shared/ReactErrorUtils';
+import invariant from 'fbjs/lib/invariant';
+import warning from 'fbjs/lib/warning';
 
 /**
  * Injected dependencies:
@@ -228,4 +225,4 @@ var EventPluginUtils = {
   injection: injection,
 };
 
-module.exports = EventPluginUtils;
+export default EventPluginUtils;

packages/events/EventPropagators.js

@@ -7,20 +7,21 @@
 
 'use strict';
 
-var ReactTreeTraversal = require('shared/ReactTreeTraversal');
+import {
+  getParentInstance,
+  traverseTwoPhase,
+  traverseEnterLeave,
+} from 'shared/ReactTreeTraversal';
+import warning from 'fbjs/lib/warning';
 
-var EventPluginHub = require('./EventPluginHub');
-var accumulateInto = require('./accumulateInto');
-var forEachAccumulated = require('./forEachAccumulated');
+import EventPluginHub from './EventPluginHub';
+import accumulateInto from './accumulateInto';
+import forEachAccumulated from './forEachAccumulated';
 
 type PropagationPhases = 'bubbled' | 'captured';
 
 var getListener = EventPluginHub.getListener;
 
-if (__DEV__) {
-  var warning = require('fbjs/lib/warning');
-}
-
 /**
  * Some event types have a notion of different registration names for different
  * "phases" of propagation. This finds listeners by a given phase.
@@ -60,11 +61,7 @@ function accumulateDirectionalDispatches(inst, phase, event) {
  */
 function accumulateTwoPhaseDispatchesSingle(event) {
   if (event && event.dispatchConfig.phasedRegistrationNames) {
-    ReactTreeTraversal.traverseTwoPhase(
-      event._targetInst,
-      accumulateDirectionalDispatches,
-      event,
-    );
+    traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
   }
 }
 
@@ -74,14 +71,8 @@ function accumulateTwoPhaseDispatchesSingle(event) {
 function accumulateTwoPhaseDispatchesSingleSkipTarget(event) {
   if (event && event.dispatchConfig.phasedRegistrationNames) {
     var targetInst = event._targetInst;
-    var parentInst = targetInst
-      ? ReactTreeTraversal.getParentInstance(targetInst)
-      : null;
-    ReactTreeTraversal.traverseTwoPhase(
-      parentInst,
-      accumulateDirectionalDispatches,
-      event,
-    );
+    var parentInst = targetInst ? getParentInstance(targetInst) : null;
+    traverseTwoPhase(parentInst, accumulateDirectionalDispatches, event);
   }
 }
 
@@ -124,13 +115,7 @@ function accumulateTwoPhaseDispatchesSkipTarget(events) {
 }
 
 function accumulateEnterLeaveDispatches(leave, enter, from, to) {
-  ReactTreeTraversal.traverseEnterLeave(
-    from,
-    to,
-    accumulateDispatches,
-    leave,
-    enter,
-  );
+  traverseEnterLeave(from, to, accumulateDispatches, leave, enter);
 }
 
 function accumulateDirectDispatches(events) {
@@ -155,4 +140,4 @@ var EventPropagators = {
   accumulateEnterLeaveDispatches: accumulateEnterLeaveDispatches,
 };
 
-module.exports = EventPropagators;
+export default EventPropagators;

packages/events/ReactControlledComponent.js

@@ -7,9 +7,9 @@
 
 'use strict';
 
-var invariant = require('fbjs/lib/invariant');
+import invariant from 'fbjs/lib/invariant';
 
-var EventPluginUtils = require('./EventPluginUtils');
+import EventPluginUtils from './EventPluginUtils';
 
 // Use to restore controlled state after a change event has fired.
 
@@ -83,4 +83,4 @@ var ReactControlledComponent = {
   },
 };
 
-module.exports = ReactControlledComponent;
+export default ReactControlledComponent;

packages/events/ReactEventEmitterMixin.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var EventPluginHub = require('./EventPluginHub');
+import EventPluginHub from './EventPluginHub';
 
 function runEventQueueInBatch(events) {
   EventPluginHub.enqueueEvents(events);
@@ -35,4 +35,4 @@ var ReactEventEmitterMixin = {
   },
 };
 
-module.exports = ReactEventEmitterMixin;
+export default ReactEventEmitterMixin;

packages/events/ReactGenericBatching.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var ReactControlledComponent = require('./ReactControlledComponent');
+import ReactControlledComponent from './ReactControlledComponent';
 
 // Used as a way to call batchedUpdates when we don't have a reference to
 // the renderer. Such as when we're dispatching events or if third party
@@ -58,4 +58,4 @@ var ReactGenericBatching = {
   injection: ReactGenericBatchingInjection,
 };
 
-module.exports = ReactGenericBatching;
+export default ReactGenericBatching;

packages/events/ResponderEventPlugin.js

@@ -7,13 +7,13 @@
 
 'use strict';
 
-var ReactTreeTraversal = require('shared/ReactTreeTraversal');
+import {getLowestCommonAncestor, isAncestor} from 'shared/ReactTreeTraversal';
 
-var EventPluginUtils = require('./EventPluginUtils');
-var EventPropagators = require('./EventPropagators');
-var ResponderSyntheticEvent = require('./ResponderSyntheticEvent');
-var ResponderTouchHistoryStore = require('./ResponderTouchHistoryStore');
-var accumulate = require('./accumulate');
+import EventPluginUtils from './EventPluginUtils';
+import EventPropagators from './EventPropagators';
+import ResponderSyntheticEvent from './ResponderSyntheticEvent';
+import ResponderTouchHistoryStore from './ResponderTouchHistoryStore';
+import accumulate from './accumulate';
 
 var isStartish = EventPluginUtils.isStartish;
 var isMoveish = EventPluginUtils.isMoveish;
@@ -327,7 +327,7 @@ function setResponderAndExtractTransfer(
   // TODO: stop one short of the current responder.
   var bubbleShouldSetFrom = !responderInst
     ? targetInst
-    : ReactTreeTraversal.getLowestCommonAncestor(responderInst, targetInst);
+    : getLowestCommonAncestor(responderInst, targetInst);
 
   // When capturing/bubbling the "shouldSet" event, we want to skip the target
   // (deepest ID) if it happens to be the current responder. The reasoning:
@@ -450,7 +450,7 @@ function noResponderTouches(nativeEvent) {
     if (target !== null && target !== undefined && target !== 0) {
       // Is the original touch location inside of the current responder?
       var targetInst = EventPluginUtils.getInstanceFromNode(target);
-      if (ReactTreeTraversal.isAncestor(responderInst, targetInst)) {
+      if (isAncestor(responderInst, targetInst)) {
         return false;
       }
     }
@@ -592,4 +592,4 @@ var ResponderEventPlugin = {
   },
 };
 
-module.exports = ResponderEventPlugin;
+export default ResponderEventPlugin;

packages/events/ResponderSyntheticEvent.js

@@ -7,7 +7,7 @@
 
 'use strict';
 
-var SyntheticEvent = require('./SyntheticEvent');
+import SyntheticEvent from './SyntheticEvent';
 
 /**
  * `touchHistory` isn't actually on the native event, but putting it in the
@@ -43,4 +43,4 @@ function ResponderSyntheticEvent(
 
 SyntheticEvent.augmentClass(ResponderSyntheticEvent, ResponderEventInterface);
 
-module.exports = ResponderSyntheticEvent;
+export default ResponderSyntheticEvent;

packages/events/ResponderTouchHistoryStore.js

@@ -9,14 +9,12 @@
 
 'use strict';
 
-const invariant = require('fbjs/lib/invariant');
+import invariant from 'fbjs/lib/invariant';
+import warning from 'fbjs/lib/warning';
 
-const EventPluginUtils = require('./EventPluginUtils');
-const {isEndish, isMoveish, isStartish} = EventPluginUtils;
+import EventPluginUtils from './EventPluginUtils';
 
-if (__DEV__) {
-  var warning = require('fbjs/lib/warning');
-}
+const {isEndish, isMoveish, isStartish} = EventPluginUtils;
 
 /**
  * Tracks the position and time of each active touch by `touch.identifier`. We
@@ -218,4 +216,4 @@ const ResponderTouchHistoryStore = {
   touchHistory,
 };
 
-module.exports = ResponderTouchHistoryStore;
+export default ResponderTouchHistoryStore;