Modern Event System: improve dispatching queue (#18799)

facebook · May 4, 2020 · 9751935 · 9751935
1 parent 3e13d70
commit 9751935
Show file tree

Hide file tree

Showing 14 changed files with 258 additions and 179 deletions.
diff --git a/packages/legacy-events/EventPluginRegistry.js b/packages/legacy-events/EventPluginRegistry.js
@@ -11,12 +11,18 @@ import type {DispatchConfig} from './ReactSyntheticEventType';
 import type {
   AnyNativeEvent,
   PluginName,
-  PluginModule,
+  LegacyPluginModule,
+  ModernPluginModule,
 } from './PluginModuleType';
 
 import invariant from 'shared/invariant';
 
-type NamesToPlugins = {[key: PluginName]: PluginModule<AnyNativeEvent>, ...};
+type NamesToPlugins = {
+  [key: PluginName]:
+    | LegacyPluginModule<AnyNativeEvent>
+    | ModernPluginModule<AnyNativeEvent>,
+  ...,
+};
 type EventPluginOrder = null | Array<PluginName>;
 
 /**
@@ -84,7 +90,9 @@ function recomputePluginOrdering(): void {
  */
 function publishEventForPlugin(
   dispatchConfig: DispatchConfig,
-  pluginModule: PluginModule<AnyNativeEvent>,
+  pluginModule:
+    | LegacyPluginModule<AnyNativeEvent>
+    | ModernPluginModule<AnyNativeEvent>,
   eventName: string,
 ): boolean {
   invariant(
@@ -128,7 +136,9 @@ function publishEventForPlugin(
  */
 function publishRegistrationName(
   registrationName: string,
-  pluginModule: PluginModule<AnyNativeEvent>,
+  pluginModule:
+    | LegacyPluginModule<AnyNativeEvent>
+    | ModernPluginModule<AnyNativeEvent>,
   eventName: string,
 ): void {
   invariant(
@@ -243,7 +253,7 @@ export function injectEventPluginsByName(
 }
 
 export function injectEventPlugins(
-  eventPlugins: [PluginModule<AnyNativeEvent>],
+  eventPlugins: [ModernPluginModule<AnyNativeEvent>],
 ): void {
   for (let i = 0; i < eventPlugins.length; i++) {
     const pluginModule = eventPlugins[i];

diff --git a/packages/legacy-events/PluginModuleType.js b/packages/legacy-events/PluginModuleType.js
@@ -22,7 +22,7 @@ export type PluginName = string;
 
 export type EventSystemFlags = number;
 
-export type PluginModule<NativeEvent> = {
+export type LegacyPluginModule<NativeEvent> = {
   eventTypes: EventTypes,
   extractEvents: (
     topLevelType: TopLevelType,
@@ -34,3 +34,32 @@ export type PluginModule<NativeEvent> = {
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
 };
+
+export type DispatchQueueItemPhaseEntry = {|
+  instance: null | Fiber,
+  listener: Function,
+  currentTarget: EventTarget,
+|};
+
+export type DispatchQueueItemPhase = Array<DispatchQueueItemPhaseEntry>;
+
+export type DispatchQueueItem = {|
+  event: ReactSyntheticEvent,
+  capture: DispatchQueueItemPhase,
+  bubble: DispatchQueueItemPhase,
+|};
+
+export type DispatchQueue = Array<DispatchQueueItem>;
+
+export type ModernPluginModule<NativeEvent> = {
+  eventTypes: EventTypes,
+  extractEvents: (
+    dispatchQueue: DispatchQueue,
+    topLevelType: TopLevelType,
+    targetInst: null | Fiber,
+    nativeTarget: NativeEvent,
+    nativeEventTarget: null | EventTarget,
+    eventSystemFlags: number,
+    container: null | EventTarget,
+  ) => void,
+};
diff --git a/packages/legacy-events/ReactSyntheticEventType.js b/packages/legacy-events/ReactSyntheticEventType.js
@@ -41,9 +41,8 @@ export type ReactSyntheticEvent = {|
   ) => ReactSyntheticEvent,
   isPersistent: () => boolean,
   isPropagationStopped: () => boolean,
-  _dispatchInstances: null | Array<Fiber | null> | Fiber,
-  _dispatchListeners: null | Array<Function> | Function,
-  _dispatchCurrentTargets: null | Array<EventTarget>,
+  _dispatchInstances?: null | Array<Fiber | null> | Fiber,
+  _dispatchListeners?: null | Array<Function> | Function,
   _targetInst: Fiber,
   type: string,
   currentTarget: null | EventTarget,

diff --git a/packages/legacy-events/SyntheticEvent.js b/packages/legacy-events/SyntheticEvent.js
@@ -8,6 +8,7 @@
 /* eslint valid-typeof: 0 */
 
 import invariant from 'shared/invariant';
+import {enableModernEventSystem} from 'shared/ReactFeatureFlags';
 
 const EVENT_POOL_SIZE = 10;
 
@@ -76,9 +77,10 @@ function SyntheticEvent(
   this.dispatchConfig = dispatchConfig;
   this._targetInst = targetInst;
   this.nativeEvent = nativeEvent;
-  this._dispatchListeners = null;
-  this._dispatchInstances = null;
-  this._dispatchCurrentTargets = null;
+  if (!enableModernEventSystem) {
+    this._dispatchListeners = null;
+    this._dispatchInstances = null;
+  }
 
   const Interface = this.constructor.Interface;
   for (const propName in Interface) {
@@ -186,9 +188,10 @@ Object.assign(SyntheticEvent.prototype, {
     this.nativeEvent = null;
     this.isDefaultPrevented = functionThatReturnsFalse;
     this.isPropagationStopped = functionThatReturnsFalse;
-    this._dispatchListeners = null;
-    this._dispatchInstances = null;
-    this._dispatchCurrentTargets = null;
+    if (!enableModernEventSystem) {
+      this._dispatchListeners = null;
+      this._dispatchInstances = null;
+    }
     if (__DEV__) {
       Object.defineProperty(
         this,

diff --git a/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js b/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
@@ -12,7 +12,7 @@ import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
 import type {ElementListenerMap} from '../client/ReactDOMComponentTree';
 import type {EventSystemFlags} from './EventSystemFlags';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {PluginModule} from 'legacy-events/PluginModuleType';
+import type {LegacyPluginModule} from 'legacy-events/PluginModuleType';
 import type {ReactSyntheticEvent} from 'legacy-events/ReactSyntheticEventType';
 import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';
 import forEachAccumulated from 'legacy-events/forEachAccumulated';
@@ -191,9 +191,10 @@ function extractPluginEvents(
   eventSystemFlags: EventSystemFlags,
 ): Array<ReactSyntheticEvent> | ReactSyntheticEvent | null {
   let events = null;
-  for (let i = 0; i < plugins.length; i++) {
+  const legacyPlugins = ((plugins: any): Array<LegacyPluginModule<Event>>);
+  for (let i = 0; i < legacyPlugins.length; i++) {
     // Not every plugin in the ordering may be loaded at runtime.
-    const possiblePlugin: PluginModule<AnyNativeEvent> = plugins[i];
+    const possiblePlugin = legacyPlugins[i];
     if (possiblePlugin) {
       const extractedEvents = possiblePlugin.extractEvents(
         topLevelType,