Experimental Event API: Redesign event responder propagation (#15408)

* Event API: Redesign event instance propagation
facebook · Apr 13, 2019 · 9ebe176 · 9ebe176
1 parent a30e7d9
commit 9ebe176
Show file tree

Hide file tree

Showing 10 changed files with 698 additions and 356 deletions.
diff --git a/packages/react-dom/src/events/DOMEventResponderSystem.js b/packages/react-dom/src/events/DOMEventResponderSystem.js
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -13,7 +13,7 @@ import type {DOMTopLevelEventType} from 'events/TopLevelEventTypes';
 
 import {batchedUpdates, interactiveUpdates} from 'events/ReactGenericBatching';
 import {runExtractedPluginEventsInBatch} from 'events/EventPluginHub';
-import {runResponderEventsInBatch} from '../events/DOMEventResponderSystem';
+import {dispatchEventForResponderEventSystem} from '../events/DOMEventResponderSystem';
 import {isFiberMounted} from 'react-reconciler/reflection';
 import {HostRoot} from 'shared/ReactWorkTags';
 import {
@@ -48,7 +48,6 @@ type BookKeepingInstance = {
   nativeEvent: AnyNativeEvent | null,
   targetInst: Fiber | null,
   ancestors: Array<Fiber | null>,
-  eventSystemFlags: EventSystemFlags,
 };
 
 /**
@@ -75,22 +74,19 @@ function getTopLevelCallbackBookKeeping(
   topLevelType: DOMTopLevelEventType,
   nativeEvent: AnyNativeEvent,
   targetInst: Fiber | null,
-  eventSystemFlags: EventSystemFlags,
 ): BookKeepingInstance {
   if (callbackBookkeepingPool.length) {
     const instance = callbackBookkeepingPool.pop();
     instance.topLevelType = topLevelType;
     instance.nativeEvent = nativeEvent;
     instance.targetInst = targetInst;
-    instance.eventSystemFlags = eventSystemFlags;
     return instance;
   }
   return {
     topLevelType,
     nativeEvent,
     targetInst,
     ancestors: [],
-    eventSystemFlags,
   };
 }
 
@@ -101,7 +97,6 @@ function releaseTopLevelCallbackBookKeeping(
   instance.nativeEvent = null;
   instance.targetInst = null;
   instance.ancestors.length = 0;
-  instance.eventSystemFlags = 0;
   if (callbackBookkeepingPool.length < CALLBACK_BOOKKEEPING_POOL_SIZE) {
     callbackBookkeepingPool.push(instance);
   }
@@ -131,28 +126,16 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
 
   for (let i = 0; i < bookKeeping.ancestors.length; i++) {
     targetInst = bookKeeping.ancestors[i];
-    const eventSystemFlags = bookKeeping.eventSystemFlags;
     const eventTarget = getEventTarget(bookKeeping.nativeEvent);
     const topLevelType = ((bookKeeping.topLevelType: any): DOMTopLevelEventType);
     const nativeEvent = ((bookKeeping.nativeEvent: any): AnyNativeEvent);
 
-    if (eventSystemFlags === PLUGIN_EVENT_SYSTEM) {
-      runExtractedPluginEventsInBatch(
-        topLevelType,
-        targetInst,
-        nativeEvent,
-        eventTarget,
-      );
-    } else if (enableEventAPI) {
-      // Responder event system (experimental event API)
-      runResponderEventsInBatch(
-        topLevelType,
-        targetInst,
-        nativeEvent,
-        eventTarget,
-        eventSystemFlags,
-      );
-    }
+    runExtractedPluginEventsInBatch(
+      topLevelType,
+      targetInst,
+      nativeEvent,
+      eventTarget,
+    );
   }
 }
 
@@ -242,6 +225,27 @@ function dispatchInteractiveEvent(topLevelType, eventSystemFlags, nativeEvent) {
   );
 }
 
+function dispatchEventForPluginEventSystem(
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  nativeEvent: AnyNativeEvent,
+  targetInst: null | Fiber,
+): void {
+  const bookKeeping = getTopLevelCallbackBookKeeping(
+    topLevelType,
+    nativeEvent,
+    targetInst,
+  );
+
+  try {
+    // Event queue being processed in the same cycle allows
+    // `preventDefault`.
+    batchedUpdates(handleTopLevel, bookKeeping);
+  } finally {
+    releaseTopLevelCallbackBookKeeping(bookKeeping);
+  }
+}
+
 export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
@@ -250,9 +254,9 @@ export function dispatchEvent(
   if (!_enabled) {
     return;
   }
-
   const nativeEventTarget = getEventTarget(nativeEvent);
   let targetInst = getClosestInstanceFromNode(nativeEventTarget);
+
   if (
     targetInst !== null &&
     typeof targetInst.tag === 'number' &&
@@ -265,18 +269,30 @@ export function dispatchEvent(
     targetInst = null;
   }
 
-  const bookKeeping = getTopLevelCallbackBookKeeping(
-    topLevelType,
-    nativeEvent,
-    targetInst,
-    eventSystemFlags,
-  );
-
-  try {
-    // Event queue being processed in the same cycle allows
-    // `preventDefault`.
-    batchedUpdates(handleTopLevel, bookKeeping);
-  } finally {
-    releaseTopLevelCallbackBookKeeping(bookKeeping);
+  if (enableEventAPI) {
+    if (eventSystemFlags === PLUGIN_EVENT_SYSTEM) {
+      dispatchEventForPluginEventSystem(
+        topLevelType,
+        eventSystemFlags,
+        nativeEvent,
+        targetInst,
+      );
+    } else {
+      // Responder event system (experimental event API)
+      dispatchEventForResponderEventSystem(
+        topLevelType,
+        targetInst,
+        nativeEvent,
+        nativeEventTarget,
+        eventSystemFlags,
+      );
+    }
+  } else {
+    dispatchEventForPluginEventSystem(
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+      targetInst,
+    );
   }
 }