Make event config an implementation detail of each plugin (#19236)

* Merge two variables with same purpose

* Replace dispatchConfig with _reactName on event object

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

@@ -8,7 +8,7 @@
  */
 
 import {
-  registrationNames,
+  registrationNameDependencies,
   possibleRegistrationNames,
 } from '../events/EventPluginRegistry';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
@@ -133,7 +133,7 @@ if (__DEV__) {
     validateARIAProperties(type, props);
     validateInputProperties(type, props);
     validateUnknownProperties(type, props, {
-      registrationNames,
+      registrationNameDependencies,
       possibleRegistrationNames,
     });
   };
@@ -356,7 +356,7 @@ function setInitialDOMProperties(
       // We could have excluded it in the property list instead of
       // adding a special case here, but then it wouldn't be emitted
       // on server rendering (but we *do* want to emit it in SSR).
-    } else if (registrationNames.hasOwnProperty(propKey)) {
+    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
       if (nextProp != null) {
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);
@@ -694,7 +694,7 @@ export function diffProperties(
       // Noop
     } else if (propKey === AUTOFOCUS) {
       // Noop. It doesn't work on updates anyway.
-    } else if (registrationNames.hasOwnProperty(propKey)) {
+    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
       // This is a special case. If any listener updates we need to ensure
       // that the "current" fiber pointer gets updated so we need a commit
       // to update this element.
@@ -781,7 +781,7 @@ export function diffProperties(
       propKey === SUPPRESS_HYDRATION_WARNING
     ) {
       // Noop
-    } else if (registrationNames.hasOwnProperty(propKey)) {
+    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
       if (nextProp != null) {
         // We eagerly listen to this even though we haven't committed yet.
         if (__DEV__ && typeof nextProp !== 'function') {
@@ -978,7 +978,7 @@ export function diffHydratedProperties(
           updatePayload = [CHILDREN, '' + nextProp];
         }
       }
-    } else if (registrationNames.hasOwnProperty(propKey)) {
+    } else if (registrationNameDependencies.hasOwnProperty(propKey)) {
       if (nextProp != null) {
         if (__DEV__ && typeof nextProp !== 'function') {
           warnForInvalidEventListener(propKey, nextProp);

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

@@ -13,10 +13,6 @@ import type {
   DOMTopLevelEventType,
 } from '../events/TopLevelEventTypes';
 import type {EventTypes} from '../events/PluginModuleType';
-import type {
-  DispatchConfig,
-  CustomDispatchConfig,
-} from '../events/ReactSyntheticEventType';
 
 import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';
 import {
@@ -35,9 +31,9 @@ import {enableCreateEventHandleAPI} from 'shared/ReactFeatureFlags';
 // update the below line.
 export const simpleEventPluginEventTypes: EventTypes = {};
 
-export const topLevelEventsToDispatchConfig: Map<
+export const topLevelEventsToReactNames: Map<
   TopLevelType,
-  DispatchConfig | CustomDispatchConfig,
+  string | null,
 > = new Map();
 
 const eventPriorities = new Map();
@@ -167,8 +163,8 @@ const continuousPairsForSimpleEventPlugin = [
  *   },
  *   ...
  * };
- * topLevelEventsToDispatchConfig = new Map([
- *   [TOP_ABORT, { sameConfig }],
+ * topLevelEventsToReactNames = new Map([
+ *   [TOP_ABORT, 'onAbort'],
  * ]);
  */
 
@@ -197,7 +193,7 @@ function processSimpleEventPluginPairsByPriority(
       eventPriority: priority,
     };
     eventPriorities.set(topEvent, priority);
-    topLevelEventsToDispatchConfig.set(topEvent, config);
+    topLevelEventsToReactNames.set(topEvent, onEvent);
     simpleEventPluginEventTypes[event] = config;
   }
 }

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

@@ -16,10 +16,7 @@ import type {
   DispatchQueueItemPhase,
   DispatchQueueItemPhaseEntry,
 } from './PluginModuleType';
-import type {
-  ReactSyntheticEvent,
-  CustomDispatchConfig,
-} from './ReactSyntheticEventType';
+import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
 import type {
   ElementListenerMap,
   ElementListenerMapEntry,
@@ -113,7 +110,7 @@ import {
   addEventCaptureListenerWithPassiveFlag,
 } from './EventListener';
 import {removeTrappedEventListener} from './DeprecatedDOMEventResponderSystem';
-import {topLevelEventsToDispatchConfig} from './DOMEventProperties';
+import {topLevelEventsToReactNames} from './DOMEventProperties';
 import * as ModernBeforeInputEventPlugin from './plugins/ModernBeforeInputEventPlugin';
 import * as ModernChangeEventPlugin from './plugins/ModernChangeEventPlugin';
 import * as ModernEnterLeaveEventPlugin from './plugins/ModernEnterLeaveEventPlugin';
@@ -223,14 +220,6 @@ if (enableCreateEventHandleAPI) {
   capturePhaseEvents.add(TOP_AFTER_BLUR);
 }
 
-const emptyDispatchConfigForCustomEvents: CustomDispatchConfig = {
-  customEvent: true,
-  phasedRegistrationNames: {
-    bubbled: null,
-    captured: null,
-  },
-};
-
 function executeDispatch(
   event: ReactSyntheticEvent,
   listener: Function,
@@ -639,11 +628,11 @@ export function accumulateTwoPhaseListeners(
   event: ReactSyntheticEvent,
   accumulateEventHandleListeners?: boolean,
 ): void {
-  const phasedRegistrationNames = event.dispatchConfig.phasedRegistrationNames;
+  const bubbled = event._reactName;
+  const captured = bubbled !== null ? bubbled + 'Capture' : null;
   const capturePhase: DispatchQueueItemPhase = [];
   const bubblePhase: DispatchQueueItemPhase = [];
 
-  const {bubbled, captured} = phasedRegistrationNames;
   // If we are not handling EventTarget only phase, then we're doing the
   // usual two phase accumulation using the React fiber tree to pick up
   // all relevant useEvent and on* prop events.
@@ -826,7 +815,7 @@ function accumulateEnterLeaveListenersForEvent(
   common: Fiber | null,
   capture: boolean,
 ): void {
-  const registrationName = event.dispatchConfig.registrationName;
+  const registrationName = event._reactName;
   if (registrationName === undefined) {
     return;
   }
@@ -944,17 +933,14 @@ export function accumulateEventTargetListeners(
 }
 
 export function addEventTypeToDispatchConfig(type: DOMTopLevelEventType): void {
-  const dispatchConfig = topLevelEventsToDispatchConfig.get(type);
-  // If we don't have a dispatchConfig, then we're dealing with
+  const reactName = topLevelEventsToReactNames.get(type);
+  // If we don't have a reactName, then we're dealing with
   // an event type that React does not know about (i.e. a custom event).
   // We need to register an event config for this or the SimpleEventPlugin
   // will not appropriately provide a SyntheticEvent, so we use out empty
   // dispatch config for custom events.
-  if (dispatchConfig === undefined) {
-    topLevelEventsToDispatchConfig.set(
-      type,
-      emptyDispatchConfigForCustomEvents,
-    );
+  if (reactName === undefined) {
+    topLevelEventsToReactNames.set(type, null);
   }
 }
 

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

@@ -10,13 +10,6 @@
 import type {TopLevelType} from './TopLevelEventTypes';
 import type {EventTypes} from './PluginModuleType';
 
-import invariant from 'shared/invariant';
-
-/**
- * Mapping from registration name to plugin module
- */
-export const registrationNames = {};
-
 /**
  * Mapping from registration name to event name
  */
@@ -62,13 +55,16 @@ function publishRegistrationName(
   registrationName: string,
   dependencies: ?Array<TopLevelType>,
 ): void {
-  invariant(
-    !registrationNames[registrationName],
-    'EventPluginRegistry: More than one plugin attempted to publish the same ' +
-      'registration name, `%s`.',
-    registrationName,
-  );
-  registrationNames[registrationName] = true;
+  if (__DEV__) {
+    if (registrationNameDependencies[registrationName]) {
+      console.error(
+        'EventPluginRegistry: More than one plugin attempted to publish the same ' +
+          'registration name, `%s`.',
+        registrationName,
+      );
+    }
+  }
+
   registrationNameDependencies[registrationName] = dependencies;
 
   if (__DEV__) {

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

@@ -22,21 +22,12 @@ export type DispatchConfig = {|
   eventPriority?: EventPriority,
 |};
 
-export type CustomDispatchConfig = {|
-  phasedRegistrationNames: {|
-    bubbled: null,
-    captured: null,
-  |},
-  registrationName?: string,
-  customEvent: true,
-|};
-
 export type ReactSyntheticEvent = {|
-  dispatchConfig: DispatchConfig | CustomDispatchConfig,
   isPersistent: () => boolean,
   isPropagationStopped: () => boolean,
   _dispatchInstances?: null | Array<Fiber | null> | Fiber,
   _dispatchListeners?: null | Array<Function> | Function,
+  _reactName: string,
   _targetInst: Fiber,
   type: string,
   currentTarget: null | EventTarget,

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

@@ -48,19 +48,9 @@ function functionThatReturnsFalse() {
  * Synthetic events (and subclasses) implement the DOM Level 3 Events API by
  * normalizing browser quirks. Subclasses do not necessarily have to implement a
  * DOM interface; custom application-specific events can also subclass this.
- *
- * @param {object} dispatchConfig Configuration used to dispatch this event.
- * @param {*} targetInst Marker identifying the event target.
- * @param {object} nativeEvent Native browser event.
- * @param {DOMEventTarget} nativeEventTarget Target node.
  */
-function SyntheticEvent(
-  dispatchConfig,
-  targetInst,
-  nativeEvent,
-  nativeEventTarget,
-) {
-  this.dispatchConfig = dispatchConfig;
+function SyntheticEvent(reactName, targetInst, nativeEvent, nativeEventTarget) {
+  this._reactName = reactName;
   this._targetInst = targetInst;
   this.nativeEvent = nativeEvent;
 

packages/react-dom/src/events/plugins/ModernBeforeInputEventPlugin.js

@@ -140,11 +140,11 @@ function isKeypressCommand(nativeEvent) {
 function getCompositionEventType(topLevelType) {
   switch (topLevelType) {
     case TOP_COMPOSITION_START:
-      return eventTypes.compositionStart;
+      return 'onCompositionStart';
     case TOP_COMPOSITION_END:
-      return eventTypes.compositionEnd;
+      return 'onCompositionEnd';
     case TOP_COMPOSITION_UPDATE:
-      return eventTypes.compositionUpdate;
+      return 'onCompositionUpdate';
   }
 }
 
@@ -237,10 +237,10 @@ function extractCompositionEvent(
     eventType = getCompositionEventType(topLevelType);
   } else if (!isComposing) {
     if (isFallbackCompositionStart(topLevelType, nativeEvent)) {
-      eventType = eventTypes.compositionStart;
+      eventType = 'onCompositionStart';
     }
   } else if (isFallbackCompositionEnd(topLevelType, nativeEvent)) {
-    eventType = eventTypes.compositionEnd;
+    eventType = 'onCompositionEnd';
   }
 
   if (!eventType) {
@@ -250,9 +250,9 @@ function extractCompositionEvent(
   if (useFallbackCompositionData && !isUsingKoreanIME(nativeEvent)) {
     // The current composition is stored statically and must not be
     // overwritten while composition continues.
-    if (!isComposing && eventType === eventTypes.compositionStart) {
+    if (!isComposing && eventType === 'onCompositionStart') {
       isComposing = FallbackCompositionStateInitialize(nativeEventTarget);
-    } else if (eventType === eventTypes.compositionEnd) {
+    } else if (eventType === 'onCompositionEnd') {
       if (isComposing) {
         fallbackData = FallbackCompositionStateGetData();
       }
@@ -430,7 +430,7 @@ function extractBeforeInputEvent(
   }
 
   const event = new SyntheticInputEvent(
-    eventTypes.beforeInput,
+    'onBeforeInput',
     null,
     nativeEvent,
     nativeEventTarget,

packages/react-dom/src/events/plugins/ModernChangeEventPlugin.js

@@ -64,12 +64,7 @@ function createAndAccumulateChangeEvent(
   nativeEvent,
   target,
 ) {
-  const event = new SyntheticEvent(
-    eventTypes.change,
-    null,
-    nativeEvent,
-    target,
-  );
+  const event = new SyntheticEvent('onChange', null, nativeEvent, target);
   event.type = 'change';
   // Flag this event loop as needing state restore.
   enqueueStateRestore(((target: any): Node));

packages/react-dom/src/events/plugins/ModernEnterLeaveEventPlugin.js

@@ -126,16 +126,16 @@ function extractEvents(
 
   if (topLevelType === TOP_MOUSE_OUT || topLevelType === TOP_MOUSE_OVER) {
     eventInterface = SyntheticMouseEvent;
-    leaveEventType = eventTypes.mouseLeave;
-    enterEventType = eventTypes.mouseEnter;
+    leaveEventType = 'onMouseLeave';
+    enterEventType = 'onMouseEnter';
     eventTypePrefix = 'mouse';
   } else if (
     topLevelType === TOP_POINTER_OUT ||
     topLevelType === TOP_POINTER_OVER
   ) {
     eventInterface = SyntheticPointerEvent;
-    leaveEventType = eventTypes.pointerLeave;
-    enterEventType = eventTypes.pointerEnter;
+    leaveEventType = 'onPointerLeave';
+    enterEventType = 'onPointerEnter';
     eventTypePrefix = 'pointer';
   }
 

packages/react-dom/src/events/plugins/ModernSelectEventPlugin.js

@@ -133,7 +133,7 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) {
     lastSelection = currentSelection;
 
     const syntheticEvent = new SyntheticEvent(
-      eventTypes.select,
+      'onSelect',
       null,
       nativeEvent,
       nativeEventTarget,