Put both whitelists in one file

Author: gaearon

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

@@ -22,6 +22,7 @@ import * as inputValueTracking from './inputValueTracking';
 import setInnerHTML from './setInnerHTML';
 import setTextContent from './setTextContent';
 import {listenTo, trapBubbledEvent} from '../events/ReactBrowserEventEmitter';
+import {mediaEventTypes} from '../events/BrowserEventConstants';
 import * as CSSPropertyOperations from '../shared/CSSPropertyOperations';
 import {Namespaces, getIntrinsicNamespace} from '../shared/DOMNamespaces';
 import {
@@ -223,34 +224,6 @@ function getOwnerDocumentFromRootContainer(
     : rootContainerElement.ownerDocument;
 }
 
-// There are so many media events, it makes sense to just
-// maintain a list rather than create a `trapBubbledEvent` for each
-const mediaEvents = {
-  topAbort: 'abort',
-  topCanPlay: 'canplay',
-  topCanPlayThrough: 'canplaythrough',
-  topDurationChange: 'durationchange',
-  topEmptied: 'emptied',
-  topEncrypted: 'encrypted',
-  topEnded: 'ended',
-  topError: 'error',
-  topLoadedData: 'loadeddata',
-  topLoadedMetadata: 'loadedmetadata',
-  topLoadStart: 'loadstart',
-  topPause: 'pause',
-  topPlay: 'play',
-  topPlaying: 'playing',
-  topProgress: 'progress',
-  topRateChange: 'ratechange',
-  topSeeked: 'seeked',
-  topSeeking: 'seeking',
-  topStalled: 'stalled',
-  topSuspend: 'suspend',
-  topTimeUpdate: 'timeupdate',
-  topVolumeChange: 'volumechange',
-  topWaiting: 'waiting',
-};
-
 function trapClickOnNonInteractiveElement(node: HTMLElement) {
   // Mobile Safari does not fire properly bubble click events on
   // non-interactive elements, which means delegated click listeners do not
@@ -472,9 +445,9 @@ export function setInitialProperties(
     case 'video':
     case 'audio':
       // Create listener for each media event
-      for (const event in mediaEvents) {
-        if (mediaEvents.hasOwnProperty(event)) {
-          trapBubbledEvent(event, mediaEvents[event], domElement);
+      for (const event in mediaEventTypes) {
+        if (mediaEventTypes.hasOwnProperty(event)) {
+          trapBubbledEvent(event, mediaEventTypes[event], domElement);
         }
       }
       props = rawProps;
@@ -860,9 +833,9 @@ export function diffHydratedProperties(
     case 'video':
     case 'audio':
       // Create listener for each media event
-      for (const event in mediaEvents) {
-        if (mediaEvents.hasOwnProperty(event)) {
-          trapBubbledEvent(event, mediaEvents[event], domElement);
+      for (const event in mediaEventTypes) {
+        if (mediaEventTypes.hasOwnProperty(event)) {
+          trapBubbledEvent(event, mediaEventTypes[event], domElement);
         }
       }
       break;

packages/react-dom/src/events/BrowserEventConstants.js

@@ -14,7 +14,7 @@ import getVendorPrefixedEventName from './getVendorPrefixedEventName';
  * bubble (which we trap at a lower node than `document`), binding
  * at `document` would cause duplicate events so we don't include them here.
  */
-const topLevelTypes = {
+export const topLevelTypes = {
   topAnimationEnd: getVendorPrefixedEventName('animationend'),
   topAnimationIteration: getVendorPrefixedEventName('animationiteration'),
   topAnimationStart: getVendorPrefixedEventName('animationstart'),
@@ -63,10 +63,35 @@ const topLevelTypes = {
   topWheel: 'wheel',
 };
 
-export type TopLevelTypes = $Enum<typeof topLevelTypes>;
-
-const BrowserEventConstants = {
-  topLevelTypes,
+// There are so many media events, it makes sense to just
+// maintain a list of them. Note these aren't technically
+// "top-level" since they don't bubble. We should come up
+// with a better naming convention if we come to refactoring
+// the event system.
+export const mediaEventTypes = {
+  topAbort: 'abort',
+  topCanPlay: 'canplay',
+  topCanPlayThrough: 'canplaythrough',
+  topDurationChange: 'durationchange',
+  topEmptied: 'emptied',
+  topEncrypted: 'encrypted',
+  topEnded: 'ended',
+  topError: 'error',
+  topLoadedData: 'loadeddata',
+  topLoadedMetadata: 'loadedmetadata',
+  topLoadStart: 'loadstart',
+  topPause: 'pause',
+  topPlay: 'play',
+  topPlaying: 'playing',
+  topProgress: 'progress',
+  topRateChange: 'ratechange',
+  topSeeked: 'seeked',
+  topSeeking: 'seeking',
+  topStalled: 'stalled',
+  topSuspend: 'suspend',
+  topTimeUpdate: 'timeupdate',
+  topVolumeChange: 'volumechange',
+  topWaiting: 'waiting',
 };
 
-export default BrowserEventConstants;
+export type TopLevelTypes = $Enum<typeof topLevelTypes>;

packages/react-dom/src/events/ReactBrowserEventEmitter.js

@@ -13,9 +13,7 @@ import {
   trapCapturedEvent,
 } from './ReactDOMEventListener';
 import isEventSupported from './isEventSupported';
-import BrowserEventConstants from './BrowserEventConstants';
-
-const {topLevelTypes} = BrowserEventConstants;
+import {topLevelTypes} from './BrowserEventConstants';
 
 /**
  * Summary of `ReactBrowserEventEmitter` event handling:

packages/react-dom/src/test-utils/ReactTestUtils.js

@@ -18,7 +18,7 @@ import {
 import SyntheticEvent from 'events/SyntheticEvent';
 import invariant from 'fbjs/lib/invariant';
 
-import BrowserEventConstants from '../events/BrowserEventConstants';
+import {topLevelTypes} from '../events/BrowserEventConstants';
 
 const {findDOMNode} = ReactDOM;
 const {
@@ -30,8 +30,6 @@ const {
   ReactDOMEventListener,
 } = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
 
-const topLevelTypes = BrowserEventConstants.topLevelTypes;
-
 function Event(suffix) {}
 
 /**