Minimal implementation of known and unknown synthetic events

Author: eps1lon

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

@@ -15,7 +15,10 @@ import {
   SHOULD_NOT_PROCESS_POLYFILL_EVENT_PLUGINS,
 } from './EventSystemFlags';
 import type {AnyNativeEvent} from './PluginModuleType';
-import type {ReactSyntheticEvent} from './ReactSyntheticEventType';
+import type {
+  KnownReactSyntheticEvent,
+  ReactSyntheticEvent,
+} from './ReactSyntheticEventType';
 import type {ElementListenerMapEntry} from '../client/ReactDOMComponentTree';
 import type {EventPriority} from 'shared/ReactTypes';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
@@ -917,15 +920,12 @@ function getLowestCommonAncestor(instA: Fiber, instB: Fiber): Fiber | null {
 
 function accumulateEnterLeaveListenersForEvent(
   dispatchQueue: DispatchQueue,
-  event: ReactSyntheticEvent,
+  event: KnownReactSyntheticEvent,
   target: Fiber,
   common: Fiber | null,
   inCapturePhase: boolean,
 ): void {
   const registrationName = event._reactName;
-  if (registrationName === null) {
-    return;
-  }
   const listeners: Array<DispatchListener> = [];
 
   let instance = target;
@@ -969,8 +969,8 @@ function accumulateEnterLeaveListenersForEvent(
 // phase event listeners.
 export function accumulateEnterLeaveTwoPhaseListeners(
   dispatchQueue: DispatchQueue,
-  leaveEvent: ReactSyntheticEvent,
-  enterEvent: null | ReactSyntheticEvent,
+  leaveEvent: KnownReactSyntheticEvent,
+  enterEvent: null | KnownReactSyntheticEvent,
   from: Fiber | null,
   to: Fiber | null,
 ): void {

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

@@ -11,6 +11,7 @@
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {EventPriority} from 'shared/ReactTypes';
 import type {DOMEventName} from './DOMEventNames';
+import { MAX_SIGNED_31_BIT_INT } from 'react-reconciler/src/MaxInts';
 
 export type DispatchConfig = {|
   dependencies?: Array<DOMEventName>,
@@ -22,14 +23,20 @@ export type DispatchConfig = {|
   eventPriority?: EventPriority,
 |};
 
-export type ReactSyntheticEvent = {|
+type BaseSyntheticEvent = {
   isPersistent: () => boolean,
   isPropagationStopped: () => boolean,
   _dispatchInstances?: null | Array<Fiber | null> | Fiber,
   _dispatchListeners?: null | Array<Function> | Function,
-  _reactName: string | null,
   _targetInst: Fiber,
   nativeEvent: Event,
+  target?: mixed,
+  relatedTarget?: mixed,
   type: string,
   currentTarget: null | EventTarget,
-|};
+};
+
+export type KnownReactSyntheticEvent = BaseSyntheticEvent & {_reactName: string};
+export type UnknownReactSyntheticEvent = BaseSyntheticEvent & {_reactName: null};
+
+export type ReactSyntheticEvent = KnownReactSyntheticEvent | UnknownReactSyntheticEvent;

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

@@ -25,6 +25,7 @@ import {
   isContainerMarkedAsRoot,
 } from '../../client/ReactDOMComponentTree';
 import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';
+import type {KnownReactSyntheticEvent} from '../ReactSyntheticEventType';
 
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {getNearestMountedFiber} from 'react-reconciler/src/ReactFiberTreeReflection';
@@ -147,16 +148,17 @@ function extractEvents(
   leave.target = fromNode;
   leave.relatedTarget = toNode;
 
-  let enter = new SyntheticEvent(
+  let enter: KnownReactSyntheticEvent | null = new SyntheticEvent(
     enterEventType,
     eventTypePrefix + 'enter',
     to,
     nativeEvent,
     nativeEventTarget,
     eventInterface,
   );
-  enter.target = toNode;
-  enter.relatedTarget = fromNode;
+  // flow thinks `enter` could be `null` at this point
+  ((enter: any): KnownReactSyntheticEvent).target = toNode;
+  ((enter: any): KnownReactSyntheticEvent).relatedTarget = fromNode;
 
   // If we are not processing the first ancestor, then we
   // should not process the same nativeEvent again, as we