Remove event constants (#19276)

* Remove opaque event type * Rename type and merge files * Use literals where we have Flow coverage * Flowify some plugins * Remove constants except necessary ones
facebook · Jul 30, 2020 · 22d16cc · 22d16cc
1 parent 6ef997b
commit 22d16cc
Show file tree

Hide file tree

Showing 20 changed files with 791 additions and 888 deletions.
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -91,14 +91,6 @@ import {
   listenToNonDelegatedEvent,
 } from '../events/DOMPluginEventSystem';
 import {getEventListenerMap} from './ReactDOMComponentTree';
-import {
-  TOP_LOAD,
-  TOP_ERROR,
-  TOP_TOGGLE,
-  TOP_INVALID,
-  TOP_CANCEL,
-  TOP_CLOSE,
-} from '../events/DOMTopLevelEventTypes';
 
 let didWarnInvalidHydration = false;
 let didWarnScriptTags = false;
@@ -542,16 +534,16 @@ export function setInitialProperties(
   let props: Object;
   switch (tag) {
     case 'dialog':
-      listenToNonDelegatedEvent(TOP_CANCEL, domElement);
-      listenToNonDelegatedEvent(TOP_CLOSE, domElement);
+      listenToNonDelegatedEvent('cancel', domElement);
+      listenToNonDelegatedEvent('close', domElement);
       props = rawProps;
       break;
     case 'iframe':
     case 'object':
     case 'embed':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the load event.
-      listenToNonDelegatedEvent(TOP_LOAD, domElement);
+      listenToNonDelegatedEvent('load', domElement);
       props = rawProps;
       break;
     case 'video':
@@ -566,30 +558,30 @@ export function setInitialProperties(
     case 'source':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the error event.
-      listenToNonDelegatedEvent(TOP_ERROR, domElement);
+      listenToNonDelegatedEvent('error', domElement);
       props = rawProps;
       break;
     case 'img':
     case 'image':
     case 'link':
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for error and load events.
-      listenToNonDelegatedEvent(TOP_ERROR, domElement);
-      listenToNonDelegatedEvent(TOP_LOAD, domElement);
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
       props = rawProps;
       break;
     case 'details':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the toggle event.
-      listenToNonDelegatedEvent(TOP_TOGGLE, domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
       props = rawProps;
       break;
     case 'input':
       ReactDOMInputInitWrapperState(domElement, rawProps);
       props = ReactDOMInputGetHostProps(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -603,7 +595,7 @@ export function setInitialProperties(
       props = ReactDOMSelectGetHostProps(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -613,7 +605,7 @@ export function setInitialProperties(
       props = ReactDOMTextareaGetHostProps(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -947,15 +939,15 @@ export function diffHydratedProperties(
   // TODO: Make sure that we check isMounted before firing any of these events.
   switch (tag) {
     case 'dialog':
-      listenToNonDelegatedEvent(TOP_CANCEL, domElement);
-      listenToNonDelegatedEvent(TOP_CLOSE, domElement);
+      listenToNonDelegatedEvent('cancel', domElement);
+      listenToNonDelegatedEvent('close', domElement);
       break;
     case 'iframe':
     case 'object':
     case 'embed':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the load event.
-      listenToNonDelegatedEvent(TOP_LOAD, domElement);
+      listenToNonDelegatedEvent('load', domElement);
       break;
     case 'video':
     case 'audio':
@@ -968,26 +960,26 @@ export function diffHydratedProperties(
     case 'source':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the error event.
-      listenToNonDelegatedEvent(TOP_ERROR, domElement);
+      listenToNonDelegatedEvent('error', domElement);
       break;
     case 'img':
     case 'image':
     case 'link':
       // We listen to these events in case to ensure emulated bubble
       // listeners still fire for error and load events.
-      listenToNonDelegatedEvent(TOP_ERROR, domElement);
-      listenToNonDelegatedEvent(TOP_LOAD, domElement);
+      listenToNonDelegatedEvent('error', domElement);
+      listenToNonDelegatedEvent('load', domElement);
       break;
     case 'details':
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the toggle event.
-      listenToNonDelegatedEvent(TOP_TOGGLE, domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
       break;
     case 'input':
       ReactDOMInputInitWrapperState(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -999,7 +991,7 @@ export function diffHydratedProperties(
       ReactDOMSelectInitWrapperState(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);
@@ -1008,7 +1000,7 @@ export function diffHydratedProperties(
       ReactDOMTextareaInitWrapperState(domElement, rawProps);
       // We listen to this event in case to ensure emulated bubble
       // listeners still fire for the invalid event.
-      listenToNonDelegatedEvent(TOP_INVALID, domElement);
+      listenToNonDelegatedEvent('invalid', domElement);
       // For controlled components we always need to ensure we're listening
       // to onChange. Even if there is no listener.
       ensureListeningTo(rootContainerElement, 'onChange', domElement);

diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -17,7 +17,7 @@ import type {
   SuspenseInstance,
   Props,
 } from './ReactDOMHostConfig';
-import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
+import type {DOMEventName} from '../events/DOMEventNames';
 
 import {
   HostComponent,
@@ -41,7 +41,7 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;
 const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
 
 export type ElementListenerMap = Map<
-  DOMTopLevelEventType | string,
+  DOMEventName | string,
   ElementListenerMapEntry | null,
 >;
 

diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {DOMTopLevelEventType} from '../events/TopLevelEventTypes';
+import type {DOMEventName} from '../events/DOMEventNames';
 import type {EventPriority, ReactScopeInstance} from 'shared/ReactTypes';
 import type {
   ReactDOMEventHandle,
@@ -69,7 +69,7 @@ function isReactScope(target: EventTarget | ReactScopeInstance): boolean {
 }
 
 function createEventHandleListener(
-  type: DOMTopLevelEventType,
+  type: DOMEventName,
   isCapturePhaseListener: boolean,
   callback: (SyntheticEvent<EventTarget>) => void,
 ): ReactDOMEventHandleListener {
@@ -82,7 +82,7 @@ function createEventHandleListener(
 
 function registerEventOnNearestTargetContainer(
   targetFiber: Fiber,
-  topLevelType: DOMTopLevelEventType,
+  domEventName: DOMEventName,
   isPassiveListener: boolean | void,
   listenerPriority: EventPriority | void,
   isCapturePhaseListener: boolean,
@@ -102,7 +102,7 @@ function registerEventOnNearestTargetContainer(
     targetContainer = ((targetContainer.parentNode: any): Element);
   }
   listenToNativeEvent(
-    topLevelType,
+    domEventName,
     isCapturePhaseListener,
     targetContainer,
     targetElement,
@@ -113,7 +113,7 @@ function registerEventOnNearestTargetContainer(
 
 function registerReactDOMEvent(
   target: EventTarget | ReactScopeInstance,
-  topLevelType: DOMTopLevelEventType,
+  domEventName: DOMEventName,
   isPassiveListener: boolean | void,
   isCapturePhaseListener: boolean,
   listenerPriority: EventPriority | void,
@@ -132,7 +132,7 @@ function registerReactDOMEvent(
     }
     registerEventOnNearestTargetContainer(
       targetFiber,
-      topLevelType,
+      domEventName,
       isPassiveListener,
       listenerPriority,
       isCapturePhaseListener,
@@ -147,7 +147,7 @@ function registerReactDOMEvent(
     }
     registerEventOnNearestTargetContainer(
       targetFiber,
-      topLevelType,
+      domEventName,
       isPassiveListener,
       listenerPriority,
       isCapturePhaseListener,
@@ -158,7 +158,7 @@ function registerReactDOMEvent(
     // These are valid event targets, but they are also
     // non-managed React nodes.
     listenToNativeEvent(
-      topLevelType,
+      domEventName,
       isCapturePhaseListener,
       eventTarget,
       null,
@@ -180,7 +180,7 @@ export function createEventHandle(
   options?: EventHandleOptions,
 ): ReactDOMEventHandle {
   if (enableCreateEventHandleAPI) {
-    const topLevelType = ((type: any): DOMTopLevelEventType);
+    const domEventName = ((type: any): DOMEventName);
     let isCapturePhaseListener = false;
     let isPassiveListener = undefined; // Undefined means to use the browser default
     let listenerPriority;
@@ -201,7 +201,7 @@ export function createEventHandle(
       }
     }
     if (listenerPriority === undefined) {
-      listenerPriority = getEventPriorityForListenerSystem(topLevelType);
+      listenerPriority = getEventPriorityForListenerSystem(domEventName);
     }
 
     const registeredReactDOMEvents = new PossiblyWeakSet();
@@ -219,16 +219,16 @@ export function createEventHandle(
         registeredReactDOMEvents.add(target);
         registerReactDOMEvent(
           target,
-          topLevelType,
+          domEventName,
           isPassiveListener,
           isCapturePhaseListener,
           listenerPriority,
         );
         // Add the event to our known event types list.
-        addEventTypeToDispatchConfig(topLevelType);
+        addEventTypeToDispatchConfig(domEventName);
       }
       const listener = createEventHandleListener(
-        topLevelType,
+        domEventName,
         isCapturePhaseListener,
         callback,
       );

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -7,7 +7,7 @@
  * @flow
  */
 
-import type {TopLevelType} from '../events/TopLevelEventTypes';
+import type {DOMEventName} from '../events/DOMEventNames';
 import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   BoundingRect,
@@ -79,7 +79,6 @@ import {
   enableScopeAPI,
 } from 'shared/ReactFeatureFlags';
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
-import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
 import {listenToReactEvent} from '../events/DOMPluginEventSystem';
 
 export type Type = string;
@@ -504,15 +503,15 @@ export function insertInContainerBefore(
   }
 }
 
-function createEvent(type: TopLevelType, bubbles: boolean): Event {
+function createEvent(type: DOMEventName, bubbles: boolean): Event {
   const event = document.createEvent('Event');
   event.initEvent(((type: any): string), bubbles, false);
   return event;
 }
 
 function dispatchBeforeDetachedBlur(target: HTMLElement): void {
   if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {
-    const event = createEvent(TOP_BEFORE_BLUR, true);
+    const event = createEvent('beforeblur', true);
     // Dispatch "beforeblur" directly on the target,
     // so it gets picked up by the event system and
     // can propagate through the React internal tree.
@@ -522,7 +521,7 @@ function dispatchBeforeDetachedBlur(target: HTMLElement): void {
 
 function dispatchAfterDetachedBlur(target: HTMLElement): void {
   if (enableDeprecatedFlareAPI || enableCreateEventHandleAPI) {
-    const event = createEvent(TOP_AFTER_BLUR, false);
+    const event = createEvent('afterblur', false);
     // So we know what was detached, make the relatedTarget the
     // detached target on the "afterblur" event.
     (event: any).relatedTarget = target;