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

WIP WIP FIX FIX Fix WIP Virtualize plugins Fix lint Clear up conflict
facebook · Jul 2, 2020 · 52b692b · 52b692b
1 parent b6df441
commit 52b692b
Show file tree

Hide file tree

Showing 19 changed files with 371 additions and 188 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2714,28 +2714,23 @@ 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.enableLegacyFBSupport) {
         // The order will change here, as the legacy FB support adds
         // the event listener onto the document after the one above has.
         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
@@ -11,6 +11,8 @@ import {
   registrationNameDependencies,
   possibleRegistrationNames,
 } from '../events/EventRegistry';
+import type {ElementListenerMapEntry} from '../client/ReactDOMComponentTree';
+
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import invariant from 'shared/invariant';
 import {
@@ -82,7 +84,7 @@ import {
   enableDeprecatedFlareAPI,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
-import {listenToEvent} from '../events/DOMModernPluginEventSystem';
+import {listenToReactPropEvent} from '../events/DOMModernPluginEventSystem';
 import {getEventListenerMap} from './ReactDOMComponentTree';
 
 let didWarnInvalidHydration = false;
@@ -262,7 +264,7 @@ if (__DEV__) {
 
 export function ensureListeningTo(
   rootContainerInstance: Element | Node,
-  registrationName: string,
+  reactPropEvent: string,
 ): void {
   // If we have a comment node, then use the parent node,
   // which should be an element.
@@ -279,7 +281,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),
+  );
 }
 
 function getOwnerDocumentFromRootContainer(
@@ -1267,7 +1272,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
@@ -81,7 +81,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';
 
@@ -1122,7 +1122,7 @@ export function makeOpaqueHydratingObject(
 }
 
 export function preparePortalMount(portalInstance: Instance): void {
-  listenToEvent('onMouseEnter', portalInstance);
+  listenToReactPropEvent('onMouseEnter', portalInstance);
 }
 
 export function prepareScopeUpdate(