Modern Event System: make on*Capture events use capture phase

WIP WIP FIX FIX Fix WIP Virtualize plugins Fix lint
facebook · Jun 30, 2020 · c1fac38 · c1fac38
1 parent f4097c1
commit c1fac38
Show file tree

Hide file tree

Showing 18 changed files with 388 additions and 188 deletions.
diff --git a/packages/legacy-events/PluginModuleType.js b/packages/legacy-events/PluginModuleType.js
@@ -45,8 +45,7 @@ export type DispatchQueueItemPhase = Array<DispatchQueueItemPhaseEntry>;
 
 export type DispatchQueueItem = {|
   event: ReactSyntheticEvent,
-  capture: DispatchQueueItemPhase,
-  bubble: DispatchQueueItemPhase,
+  phase: DispatchQueueItemPhase,
 |};
 
 export type DispatchQueue = Array<DispatchQueueItem>;

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2714,11 +2714,6 @@ describe('ReactDOMComponent', () => {
 
       innerRef.current.click();
 
-      // The order we receive here is not ideal since it is expected that the
-      // capture listener fire before all bubble listeners. Other React apps
-      // might depend on this.
-      //
-      // @see https://github.com/facebook/react/pull/12919#issuecomment-395224674
       if (
         ReactFeatureFlags.enableModernEventSystem &
         ReactFeatureFlags.enableLegacyFBSupport
@@ -2728,17 +2723,17 @@ describe('ReactDOMComponent', () => {
         expect(eventOrder).toEqual([
           'document capture',
           'document bubble',
+          'outer capture',
           'inner capture',
           'inner bubble',
-          'outer capture',
           'outer bubble',
         ]);
       } else {
         expect(eventOrder).toEqual([
           'document capture',
+          'outer capture',
           'inner capture',
           'inner bubble',
-          'outer capture',
           'outer bubble',
           'document bubble',
         ]);

diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -7,6 +7,8 @@
  * @flow
  */
 
+import type {ElementListenerMapEntry} from '../client/ReactDOMComponentTree';
+
 import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import invariant from 'shared/invariant';
@@ -94,7 +96,7 @@ import {
   legacyListenToEvent,
   legacyTrapBubbledEvent,
 } from '../events/DOMLegacyEventPluginSystem';
-import {listenToEvent} from '../events/DOMModernPluginEventSystem';
+import {listenToReactPropEvent} from '../events/DOMModernPluginEventSystem';
 import {getEventListenerMap} from './ReactDOMComponentTree';
 
 let didWarnInvalidHydration = false;
@@ -271,7 +273,7 @@ if (__DEV__) {
 
 export function ensureListeningTo(
   rootContainerInstance: Element | Node,
-  registrationName: string,
+  reactPropEvent: string,
 ): void {
   if (enableModernEventSystem) {
     // If we have a comment node, then use the parent node,
@@ -289,7 +291,10 @@ export function ensureListeningTo(
       'ensureListeningTo(): received a container that was not an element node. ' +
         'This is likely a bug in React.',
     );
-    listenToEvent(registrationName, ((rootContainerElement: any): Element));
+    listenToReactPropEvent(
+      reactPropEvent,
+      ((rootContainerElement: any): Element),
+    );
   } else {
     // Legacy plugin event system path
     const isDocumentOrFragment =
@@ -298,7 +303,7 @@ export function ensureListeningTo(
     const doc = isDocumentOrFragment
       ? rootContainerInstance
       : rootContainerInstance.ownerDocument;
-    legacyListenToEvent(registrationName, ((doc: any): Document));
+    legacyListenToEvent(reactPropEvent, ((doc: any): Document));
   }
 }
 
@@ -1368,7 +1373,9 @@ export function listenToEventResponderEventTypes(
           // existing passive event listener before we add the
           // active event listener.
           const passiveKey = targetEventType + '_passive';
-          const passiveItem = listenerMap.get(passiveKey);
+          const passiveItem = ((listenerMap.get(
+            passiveKey,
+          ): any): ElementListenerMapEntry | void);
           if (passiveItem !== undefined) {
             removeTrappedEventListener(
               document,

diff --git a/packages/react-dom/src/client/ReactDOMComponentTree.js b/packages/react-dom/src/client/ReactDOMComponentTree.js
@@ -42,7 +42,7 @@ const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
 
 export type ElementListenerMap = Map<
   DOMTopLevelEventType | string,
-  ElementListenerMapEntry,
+  null | ElementListenerMapEntry,
 >;
 
 export type ElementListenerMapEntry = {

diff --git a/packages/react-dom/src/client/ReactDOMEventHandle.js b/packages/react-dom/src/client/ReactDOMEventHandle.js
@@ -86,6 +86,7 @@ function registerEventOnNearestTargetContainer(
   topLevelType: DOMTopLevelEventType,
   passive: boolean | void,
   priority: EventPriority | void,
+  capture: boolean,
 ): void {
   // If it is, find the nearest root or portal and make it
   // our event handle target container.
@@ -103,6 +104,7 @@ function registerEventOnNearestTargetContainer(
     targetContainer,
     listenerMap,
     PLUGIN_EVENT_SYSTEM,
+    capture,
     passive,
     priority,
   );
@@ -179,6 +181,7 @@ export function createEventHandle(
             topLevelType,
             passive,
             priority,
+            capture,
           );
         } else if (enableScopeAPI && isReactScope(target)) {
           const scopeTarget = ((target: any): ReactScopeInstance);
@@ -192,6 +195,7 @@ export function createEventHandle(
             topLevelType,
             passive,
             priority,
+            capture,
           );
         } else if (isValidEventTarget(target)) {
           const eventTarget = ((target: any): EventTarget);
@@ -201,9 +205,9 @@ export function createEventHandle(
             eventTarget,
             listenerMap,
             PLUGIN_EVENT_SYSTEM | IS_TARGET_PHASE_ONLY,
+            capture,
             passive,
             priority,
-            capture,
           );
         } else {
           invariant(

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -82,7 +82,7 @@ import {
 import {HostComponent, HostText} from 'react-reconciler/src/ReactWorkTags';
 import {TOP_BEFORE_BLUR, TOP_AFTER_BLUR} from '../events/DOMTopLevelEventTypes';
 import {
-  listenToEvent,
+  listenToReactPropEvent,
   clearEventHandleListenersForTarget,
 } from '../events/DOMModernPluginEventSystem';
 
@@ -1124,7 +1124,7 @@ export function makeOpaqueHydratingObject(
 
 export function preparePortalMount(portalInstance: Instance): void {
   if (enableModernEventSystem) {
-    listenToEvent('onMouseEnter', portalInstance);
+    listenToReactPropEvent('onMouseEnter', portalInstance);
   }
 }