Decouple event priority list from event name list (#20760)

* Remove some dead code

* Decouple event priority list from event name list

* Fix lint

Author: gaearon

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

@@ -7,7 +7,6 @@
  * @flow
  */
 
-import type {EventPriority} from 'shared/ReactTypes';
 import type {DOMEventName} from './DOMEventNames';
 
 import {registerTwoPhaseEvent} from './EventRegistry';
@@ -17,7 +16,6 @@ import {
   ANIMATION_START,
   TRANSITION_END,
 } from './DOMEventNames';
-import {DiscreteEvent, ContinuousEvent, DefaultEvent} from 'shared/ReactTypes';
 
 import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 
@@ -26,19 +24,8 @@ export const topLevelEventsToReactNames: Map<
   string | null,
 > = new Map();
 
-const eventPriorities = new Map();
-
-// We store most of the events in this module in pairs of two strings so we can re-use
-// the code required to apply the same logic for event prioritization and that of the
-// SimpleEventPlugin. This complicates things slightly, but the aim is to reduce code
-// duplication (for which there would be quite a bit). For the events that are not needed
-// for the SimpleEventPlugin (otherDiscreteEvents) we process them separately as an
-// array of top level events.
-
-// Lastly, we ignore prettier so we can keep the formatting sane.
-
 // prettier-ignore
-const discreteEventPairsForSimpleEventPlugin = [
+const simpleEventPluginNames = [
   ('cancel': DOMEventName), 'cancel',
   ('click': DOMEventName), 'click',
   ('close': DOMEventName), 'close',
@@ -73,27 +60,7 @@ const discreteEventPairsForSimpleEventPlugin = [
   ('touchend': DOMEventName), 'touchEnd',
   ('touchstart': DOMEventName), 'touchStart',
   ('volumechange': DOMEventName), 'volumeChange',
-];
-
-const otherDiscreteEvents: Array<DOMEventName> = [
-  'change',
-  'selectionchange',
-  'textInput',
-  'compositionstart',
-  'compositionend',
-  'compositionupdate',
-];
-
-if (enableCreateEventHandleAPI) {
-  // Special case: these two events don't have on* React handler
-  // and are only accessible via the createEventHandle API.
-  topLevelEventsToReactNames.set('beforeblur', null);
-  topLevelEventsToReactNames.set('afterblur', null);
-  otherDiscreteEvents.push('beforeblur', 'afterblur');
-}
 
-// prettier-ignore
-const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('drag': DOMEventName), 'drag',
   ('dragenter': DOMEventName), 'dragEnter',
   ('dragexit': DOMEventName), 'dragExit',
@@ -109,10 +76,7 @@ const continuousPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('toggle': DOMEventName), 'toggle',
   ('touchmove': DOMEventName), 'touchMove',
   ('wheel': DOMEventName), 'wheel',
-];
 
-// prettier-ignore
-const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('abort': DOMEventName), 'abort',
   (ANIMATION_END: DOMEventName), 'animationEnd',
   (ANIMATION_ITERATION: DOMEventName), 'animationIteration',
@@ -140,6 +104,13 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
   ('waiting': DOMEventName), 'waiting',
 ];
 
+if (enableCreateEventHandleAPI) {
+  // Special case: these two events don't have on* React handler
+  // and are only accessible via the createEventHandle API.
+  topLevelEventsToReactNames.set('beforeblur', null);
+  topLevelEventsToReactNames.set('afterblur', null);
+}
+
 /**
  * Turns
  * ['abort', ...]
@@ -152,75 +123,19 @@ const defaultPairsForSimpleEventPlugin: Array<string | DOMEventName> = [
  *
  * and registers them.
  */
-function registerSimplePluginEventsAndSetTheirPriorities(
-  eventTypes: Array<DOMEventName | string>,
-  priority: EventPriority,
-): void {
+export function registerSimpleEvents() {
   // As the event types are in pairs of two, we need to iterate
   // through in twos. The events are in pairs of two to save code
   // and improve init perf of processing this array, as it will
   // result in far fewer object allocations and property accesses
   // if we only use three arrays to process all the categories of
   // instead of tuples.
-  for (let i = 0; i < eventTypes.length; i += 2) {
-    const topEvent = ((eventTypes[i]: any): DOMEventName);
-    const event = ((eventTypes[i + 1]: any): string);
+  for (let i = 0; i < simpleEventPluginNames.length; i += 2) {
+    const topEvent = ((simpleEventPluginNames[i]: any): DOMEventName);
+    const event = ((simpleEventPluginNames[i + 1]: any): string);
     const capitalizedEvent = event[0].toUpperCase() + event.slice(1);
     const reactName = 'on' + capitalizedEvent;
-    eventPriorities.set(topEvent, priority);
     topLevelEventsToReactNames.set(topEvent, reactName);
     registerTwoPhaseEvent(reactName, [topEvent]);
   }
 }
-
-function setEventPriorities(
-  eventTypes: Array<DOMEventName>,
-  priority: EventPriority,
-): void {
-  for (let i = 0; i < eventTypes.length; i++) {
-    eventPriorities.set(eventTypes[i], priority);
-  }
-}
-
-export function getEventPriorityForPluginSystem(
-  domEventName: DOMEventName,
-): EventPriority {
-  const priority = eventPriorities.get(domEventName);
-  // Default to a DefaultEvent. Note: we might
-  // want to warn if we can't detect the priority
-  // for the event.
-  return priority === undefined ? DefaultEvent : priority;
-}
-
-export function getEventPriorityForListenerSystem(
-  type: DOMEventName,
-): EventPriority {
-  const priority = eventPriorities.get(type);
-  if (priority !== undefined) {
-    return priority;
-  }
-  if (__DEV__) {
-    console.warn(
-      'The event "%s" provided to createEventHandle() does not have a known priority type.' +
-        ' This is likely a bug in React.',
-      type,
-    );
-  }
-  return DefaultEvent;
-}
-
-export function registerSimpleEvents() {
-  registerSimplePluginEventsAndSetTheirPriorities(
-    discreteEventPairsForSimpleEventPlugin,
-    DiscreteEvent,
-  );
-  registerSimplePluginEventsAndSetTheirPriorities(
-    continuousPairsForSimpleEventPlugin,
-    ContinuousEvent,
-  );
-  registerSimplePluginEventsAndSetTheirPriorities(
-    defaultPairsForSimpleEventPlugin,
-    DefaultEvent,
-  );
-  setEventPriorities(otherDiscreteEvents, DiscreteEvent);
-}

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

@@ -11,6 +11,7 @@ import type {AnyNativeEvent} from '../events/PluginModuleType';
 import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes';
 import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMEventName} from '../events/DOMEventNames';
+import type {EventPriority} from 'shared/ReactTypes';
 
 // Intentionally not named imports because Rollup would use dynamic dispatch for
 // CommonJS interop named imports.
@@ -44,7 +45,6 @@ import {
   enableNewReconciler,
 } from 'shared/ReactFeatureFlags';
 import {ContinuousEvent, DefaultEvent, DiscreteEvent} from 'shared/ReactTypes';
-import {getEventPriorityForPluginSystem} from './DOMEventProperties';
 import {dispatchEventForPluginEventSystem} from './DOMPluginEventSystem';
 import {
   flushDiscreteUpdatesIfNeeded,
@@ -339,3 +339,76 @@ export function attemptToDispatchEvent(
   // We're not blocked on anything.
   return null;
 }
+
+function getEventPriorityForPluginSystem(
+  domEventName: DOMEventName,
+): EventPriority {
+  switch (domEventName) {
+    // Used by SimpleEventPlugin:
+    case 'cancel':
+    case 'click':
+    case 'close':
+    case 'contextmenu':
+    case 'copy':
+    case 'cut':
+    case 'auxclick':
+    case 'dblclick':
+    case 'dragend':
+    case 'dragstart':
+    case 'drop':
+    case 'focusin':
+    case 'focusout':
+    case 'input':
+    case 'invalid':
+    case 'keydown':
+    case 'keypress':
+    case 'keyup':
+    case 'mousedown':
+    case 'mouseup':
+    case 'paste':
+    case 'pause':
+    case 'play':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+    case 'ratechange':
+    case 'reset':
+    case 'seeked':
+    case 'submit':
+    case 'touchcancel':
+    case 'touchend':
+    case 'touchstart':
+    case 'volumechange':
+    // Used by polyfills:
+    // eslint-disable-next-line no-fallthrough
+    case 'change':
+    case 'selectionchange':
+    case 'textInput':
+    case 'compositionstart':
+    case 'compositionend':
+    case 'compositionupdate':
+    // Only enableCreateEventHandleAPI:
+    // eslint-disable-next-line no-fallthrough
+    case 'beforeblur':
+    case 'afterblur':
+      return DiscreteEvent;
+    case 'drag':
+    case 'dragenter':
+    case 'dragexit':
+    case 'dragleave':
+    case 'dragover':
+    case 'mousemove':
+    case 'mouseout':
+    case 'mouseover':
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'scroll':
+    case 'toggle':
+    case 'touchmove':
+    case 'wheel':
+      return ContinuousEvent;
+    default:
+      return DefaultEvent;
+  }
+}

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

@@ -9,7 +9,6 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {EventPriority} from 'shared/ReactTypes';
 import type {DOMEventName} from './DOMEventNames';
 
 export type DispatchConfig = {|
@@ -19,7 +18,6 @@ export type DispatchConfig = {|
     captured: null | string,
   |},
   registrationName?: string,
-  eventPriority?: EventPriority,
 |};
 
 type BaseSyntheticEvent = {

packages/react-native-renderer/src/legacy-events/ReactSyntheticEventType.js

@@ -9,7 +9,6 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {EventPriority} from 'shared/ReactTypes';
 import type {TopLevelType} from './TopLevelEventTypes';
 
 export type DispatchConfig = {|
@@ -19,7 +18,6 @@ export type DispatchConfig = {|
     captured: null | string,
   |},
   registrationName?: string,
-  eventPriority: EventPriority,
 |};
 
 export type CustomDispatchConfig = {|