ReactDOMEventListener: clean up module (facebook#18713)

Author: trueadm

packages/react-dom/src/client/ReactDOMComponent.js

@@ -10,7 +10,11 @@
 import {registrationNameModules} from 'legacy-events/EventPluginRegistry';
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import invariant from 'shared/invariant';
-import {setListenToResponderEventTypes} from '../events/DeprecatedDOMEventResponderSystem';
+import {
+  setListenToResponderEventTypes,
+  addResponderEventSystemEvent,
+  removeTrappedEventListener,
+} from '../events/DeprecatedDOMEventResponderSystem';
 
 import {
   getValueForAttribute,
@@ -56,10 +60,6 @@ import {
   TOP_TOGGLE,
 } from '../events/DOMTopLevelEventTypes';
 import {getListenerMapForElement} from '../events/DOMEventListenerMap';
-import {
-  addResponderEventSystemEvent,
-  removeTrappedEventListener,
-} from '../events/ReactDOMEventListener.js';
 import {mediaEventTypes} from '../events/DOMTopLevelEventTypes';
 import {
   createDangerousStringForStyles,

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

@@ -44,9 +44,10 @@ import {
   getRawEventName,
   mediaEventTypes,
 } from './DOMTopLevelEventTypes';
-import {addTrappedEventListener} from './ReactDOMEventListener';
+import {createEventListenerWrapperWithPriority} from './ReactDOMEventListener';
 import {batchedEventUpdates} from './ReactDOMUpdateBatching';
 import getListener from './getListener';
+import {addEventCaptureListener, addEventBubbleListener} from './EventListener';
 
 /**
  * Summary of `DOMEventPluginSystem` event handling:
@@ -399,6 +400,24 @@ export function legacyTrapCapturedEvent(
   listenerMap.set(topLevelType, {passive: undefined, listener});
 }
 
+function addTrappedEventListener(
+  targetContainer: EventTarget,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  capture: boolean,
+): any => void {
+  const rawEventName = getRawEventName(topLevelType);
+  const listener = createEventListenerWrapperWithPriority(
+    targetContainer,
+    topLevelType,
+    eventSystemFlags,
+  );
+  const unsubscribeListener = capture
+    ? addEventCaptureListener(targetContainer, rawEventName, listener)
+    : addEventBubbleListener(targetContainer, rawEventName, listener);
+  return unsubscribeListener;
+}
+
 function getParent(inst: Object | null): Object | null {
   if (!inst) {
     return null;

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

@@ -35,10 +35,6 @@ import {
   HostComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 
-import {
-  addTrappedEventListener,
-  removeTrappedEventListener,
-} from './ReactDOMEventListener';
 import getEventTarget from './getEventTarget';
 import {getListenerMapForElement} from './DOMEventListenerMap';
 import {
@@ -76,17 +72,25 @@ import {
   TOP_PLAYING,
   TOP_CLICK,
   TOP_SELECTION_CHANGE,
+  getRawEventName,
 } from './DOMTopLevelEventTypes';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 import {COMMENT_NODE} from '../shared/HTMLNodeType';
 import {batchedEventUpdates} from './ReactDOMUpdateBatching';
 import getListener from './getListener';
+import {passiveBrowserEventsSupported} from './checkPassiveEvents';
 
 import {enableLegacyFBSupport} from 'shared/ReactFeatureFlags';
 import {
   invokeGuardedCallbackAndCatchFirstError,
   rethrowCaughtError,
 } from 'shared/ReactErrorUtils';
+import {createEventListenerWrapperWithPriority} from './ReactDOMEventListener';
+import {
+  removeEventListener,
+  addEventCaptureListener,
+  addEventBubbleListener,
+} from './EventListener';
 
 const capturePhaseEvents = new Set([
   TOP_FOCUS,
@@ -219,25 +223,6 @@ function dispatchEventsForPlugins(
   dispatchEventsInBatch(syntheticEvents);
 }
 
-function shouldUpgradeListener(
-  listenerEntry: void | ElementListenerMapEntry,
-  passive: void | boolean,
-): boolean {
-  if (listenerEntry === undefined) {
-    return false;
-  }
-  // Upgrade from passive to active.
-  if (passive !== true && listenerEntry.passive) {
-    return true;
-  }
-  // Upgrade from default-active (browser default) to active.
-  if (passive === false && listenerEntry.passive === undefined) {
-    return true;
-  }
-  // Otherwise, do not upgrade
-  return false;
-}
-
 export function listenToTopLevelEvent(
   topLevelType: DOMTopLevelEventType,
   targetContainer: EventTarget,
@@ -247,43 +232,19 @@ export function listenToTopLevelEvent(
   priority?: EventPriority,
   capture?: boolean,
 ): void {
-  // If we explicitly define capture, then these are for EventTarget objects,
-  // rather than React managed DOM elements. So we need to ensure we separate
-  // capture and non-capture events. For React managed DOM nodes we only use
-  // one or the other, never both. Which one we use is determined by the the
-  // capturePhaseEvents Set (in this module) that defines if the event listener
-  // should use the capture phase – otherwise we always use the bubble phase.
-  // Finally, when we get to dispatching and accumulating event listeners, we
-  // check if the user wanted capture/bubble and emulate the behavior at that
-  // point (we call this accumulating two phase listeners).
-  const typeStr = ((topLevelType: any): string);
-  const listenerMapKey =
-    capture === undefined
-      ? topLevelType
-      : `${typeStr}_${capture ? 'capture' : 'bubble'}`;
-
   // TOP_SELECTION_CHANGE needs to be attached to the document
   // otherwise it won't capture incoming events that are only
   // triggered on the document directly.
   if (topLevelType === TOP_SELECTION_CHANGE) {
     targetContainer = (targetContainer: any).ownerDocument || targetContainer;
     listenerMap = getListenerMapForElement(targetContainer);
   }
-  const listenerEntry = listenerMap.get(listenerMapKey);
-  const shouldUpgrade = shouldUpgradeListener(listenerEntry, passive);
-  if (listenerEntry === undefined || shouldUpgrade) {
-    const isCapturePhase =
-      capture === undefined ? capturePhaseEvents.has(topLevelType) : capture;
-    // If we should upgrade, then we need to remove the existing trapped
-    // event listener for the target container.
-    if (shouldUpgrade) {
-      removeTrappedEventListener(
-        targetContainer,
-        topLevelType,
-        isCapturePhase,
-        ((listenerEntry: any): ElementListenerMapEntry).listener,
-      );
-    }
+  const listenerEntry: ElementListenerMapEntry | void = listenerMap.get(
+    topLevelType,
+  );
+  const isCapturePhase =
+    capture === undefined ? capturePhaseEvents.has(topLevelType) : capture;
+  if (listenerEntry === undefined) {
     const listener = addTrappedEventListener(
       targetContainer,
       topLevelType,
@@ -293,7 +254,7 @@ export function listenToTopLevelEvent(
       passive,
       priority,
     );
-    listenerMap.set(listenerMapKey, {passive, listener});
+    listenerMap.set(topLevelType, {passive, listener});
   }
 }
 
@@ -315,6 +276,77 @@ export function listenToEvent(
   }
 }
 
+function addTrappedEventListener(
+  targetContainer: EventTarget,
+  topLevelType: DOMTopLevelEventType,
+  eventSystemFlags: EventSystemFlags,
+  capture: boolean,
+  isDeferredListenerForLegacyFBSupport?: boolean,
+  passive?: boolean,
+  priority?: EventPriority,
+): any => void {
+  let listener = createEventListenerWrapperWithPriority(
+    targetContainer,
+    topLevelType,
+    eventSystemFlags,
+    priority,
+  );
+  // If passive option is not supported, then the event will be
+  // active and not passive.
+  if (passive === true && !passiveBrowserEventsSupported) {
+    passive = false;
+  }
+
+  targetContainer =
+    enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport
+      ? (targetContainer: any).ownerDocument
+      : targetContainer;
+
+  const rawEventName = getRawEventName(topLevelType);
+
+  let unsubscribeListener;
+  // When legacyFBSupport is enabled, it's for when we
+  // want to add a one time event listener to a container.
+  // This should only be used with enableLegacyFBSupport
+  // due to requirement to provide compatibility with
+  // internal FB www event tooling. This works by removing
+  // the event listener as soon as it is invoked. We could
+  // also attempt to use the {once: true} param on
+  // addEventListener, but that requires support and some
+  // browsers do not support this today, and given this is
+  // to support legacy code patterns, it's likely they'll
+  // need support for such browsers.
+  if (enableLegacyFBSupport && isDeferredListenerForLegacyFBSupport) {
+    const originalListener = listener;
+    listener = function(...p) {
+      try {
+        return originalListener.apply(this, p);
+      } finally {
+        removeEventListener(
+          targetContainer,
+          rawEventName,
+          unsubscribeListener,
+          capture,
+        );
+      }
+    };
+  }
+  if (capture) {
+    unsubscribeListener = addEventCaptureListener(
+      targetContainer,
+      rawEventName,
+      listener,
+    );
+  } else {
+    unsubscribeListener = addEventBubbleListener(
+      targetContainer,
+      rawEventName,
+      listener,
+    );
+  }
+  return unsubscribeListener;
+}
+
 function willDeferLaterForLegacyFBSupport(
   topLevelType: DOMTopLevelEventType,
   targetContainer: EventTarget,

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

@@ -10,6 +10,7 @@ import {
   type EventSystemFlags,
   IS_PASSIVE,
   PASSIVE_NOT_SUPPORTED,
+  RESPONDER_EVENT_SYSTEM,
 } from './EventSystemFlags';
 import type {AnyNativeEvent} from 'legacy-events/PluginModuleType';
 import {
@@ -37,6 +38,15 @@ import invariant from 'shared/invariant';
 
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
 import {enqueueStateRestore} from './ReactDOMControlledComponent';
+import {createEventListenerWrapper} from './ReactDOMEventListener';
+import {passiveBrowserEventsSupported} from './checkPassiveEvents';
+import {getRawEventName} from './DOMTopLevelEventTypes';
+import {
+  addEventCaptureListener,
+  addEventCaptureListenerWithPassiveFlag,
+  removeEventListener,
+} from './EventListener';
+
 import {
   ContinuousEvent,
   UserBlockingEvent,
@@ -571,3 +581,50 @@ function DEPRECATED_registerRootEventType(
   rootEventTypesSet.add(rootEventType);
   rootEventResponderInstances.add(eventResponderInstance);
 }
+
+export function addResponderEventSystemEvent(
+  document: Document,
+  topLevelType: string,
+  passive: boolean,
+): any => void {
+  let eventFlags = RESPONDER_EVENT_SYSTEM;
+
+  // If passive option is not supported, then the event will be
+  // active and not passive, but we flag it as using not being
+  // supported too. This way the responder event plugins know,
+  // and can provide polyfills if needed.
+  if (passive) {
+    if (passiveBrowserEventsSupported) {
+      eventFlags |= IS_PASSIVE;
+    } else {
+      eventFlags |= PASSIVE_NOT_SUPPORTED;
+      passive = false;
+    }
+  }
+  // Check if interactive and wrap in discreteUpdates
+  const listener = createEventListenerWrapper(
+    document,
+    ((topLevelType: any): DOMTopLevelEventType),
+    eventFlags,
+  );
+  if (passiveBrowserEventsSupported) {
+    return addEventCaptureListenerWithPassiveFlag(
+      document,
+      topLevelType,
+      listener,
+      passive,
+    );
+  } else {
+    return addEventCaptureListener(document, topLevelType, listener);
+  }
+}
+
+export function removeTrappedEventListener(
+  targetContainer: EventTarget,
+  topLevelType: DOMTopLevelEventType,
+  capture: boolean,
+  listener: any => void,
+): void {
+  const rawEventName = getRawEventName(topLevelType);
+  removeEventListener(targetContainer, rawEventName, listener, capture);
+}