[Events] Make passiveness and priority non-configurable (#19807)

Author: gaearon

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

@@ -20,7 +20,6 @@ import type {
   SuspenseInstance,
   Props,
 } from './ReactDOMHostConfig';
-import type {DOMEventName} from '../events/DOMEventNames';
 
 import {
   HostComponent,
@@ -44,16 +43,6 @@ const internalEventHandlersKey = '__reactEvents$' + randomKey;
 const internalEventHandlerListenersKey = '__reactListeners$' + randomKey;
 const internalEventHandlesSetKey = '__reactHandles$' + randomKey;
 
-export type ElementListenerMap = Map<
-  DOMEventName | string,
-  ElementListenerMapEntry | null,
->;
-
-export type ElementListenerMapEntry = {
-  passive: void | boolean,
-  listener: any => void,
-};
-
 export function precacheFiberNode(
   hostInst: Fiber,
   node: Instance | TextInstance | SuspenseInstance | ReactScopeInstance,
@@ -207,12 +196,12 @@ export function updateFiberProps(
   (node: any)[internalPropsKey] = props;
 }
 
-export function getEventListenerMap(node: EventTarget): ElementListenerMap {
-  let elementListenerMap = (node: any)[internalEventHandlersKey];
-  if (elementListenerMap === undefined) {
-    elementListenerMap = (node: any)[internalEventHandlersKey] = new Map();
+export function getEventListenerSet(node: EventTarget): Set<string> {
+  let elementListenerSet = (node: any)[internalEventHandlersKey];
+  if (elementListenerSet === undefined) {
+    elementListenerSet = (node: any)[internalEventHandlersKey] = new Set();
   }
-  return elementListenerMap;
+  return elementListenerSet;
 }
 
 export function getFiberFromScopeInstance(

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

@@ -8,13 +8,12 @@
  */
 
 import type {DOMEventName} from '../events/DOMEventNames';
-import type {EventPriority, ReactScopeInstance} from 'shared/ReactTypes';
+import type {ReactScopeInstance} from 'shared/ReactTypes';
 import type {
   ReactDOMEventHandle,
   ReactDOMEventHandleListener,
 } from '../shared/ReactDOMTypes';
 
-import {getEventPriorityForListenerSystem} from '../events/DOMEventProperties';
 import {allNativeEvents} from '../events/EventRegistry';
 import {
   getClosestInstanceFromNode,
@@ -25,10 +24,7 @@ import {
   addEventHandleToTarget,
 } from './ReactDOMComponentTree';
 import {ELEMENT_NODE, COMMENT_NODE} from '../shared/HTMLNodeType';
-import {
-  listenToNativeEvent,
-  addEventTypeToDispatchConfig,
-} from '../events/DOMPluginEventSystem';
+import {listenToNativeEvent} from '../events/DOMPluginEventSystem';
 
 import {HostRoot, HostPortal} from 'react-reconciler/src/ReactWorkTags';
 import {IS_EVENT_HANDLE_NON_MANAGED_NODE} from '../events/EventSystemFlags';
@@ -42,8 +38,6 @@ import invariant from 'shared/invariant';
 
 type EventHandleOptions = {|
   capture?: boolean,
-  passive?: boolean,
-  priority?: EventPriority,
 |};
 
 function getNearestRootOrPortalContainer(node: Fiber): null | Element {
@@ -82,76 +76,76 @@ function createEventHandleListener(
 function registerEventOnNearestTargetContainer(
   targetFiber: Fiber,
   domEventName: DOMEventName,
-  isPassiveListener: boolean | void,
-  listenerPriority: EventPriority | void,
   isCapturePhaseListener: boolean,
   targetElement: Element | null,
 ): void {
-  // If it is, find the nearest root or portal and make it
-  // our event handle target container.
-  let targetContainer = getNearestRootOrPortalContainer(targetFiber);
-  if (targetContainer === null) {
-    invariant(
-      false,
-      'ReactDOM.createEventHandle: setListener called on an target ' +
-        'that did not have a corresponding root. This is likely a bug in React.',
+  if (!enableEagerRootListeners) {
+    // If it is, find the nearest root or portal and make it
+    // our event handle target container.
+    let targetContainer = getNearestRootOrPortalContainer(targetFiber);
+    if (targetContainer === null) {
+      if (__DEV__) {
+        console.error(
+          'ReactDOM.createEventHandle: setListener called on an target ' +
+            'that did not have a corresponding root. This is likely a bug in React.',
+        );
+      }
+      return;
+    }
+    if (targetContainer.nodeType === COMMENT_NODE) {
+      targetContainer = ((targetContainer.parentNode: any): Element);
+    }
+    listenToNativeEvent(
+      domEventName,
+      isCapturePhaseListener,
+      targetContainer,
+      targetElement,
     );
   }
-  if (targetContainer.nodeType === COMMENT_NODE) {
-    targetContainer = ((targetContainer.parentNode: any): Element);
-  }
-  listenToNativeEvent(
-    domEventName,
-    isCapturePhaseListener,
-    targetContainer,
-    targetElement,
-    isPassiveListener,
-    listenerPriority,
-  );
 }
 
 function registerReactDOMEvent(
   target: EventTarget | ReactScopeInstance,
   domEventName: DOMEventName,
-  isPassiveListener: boolean | void,
   isCapturePhaseListener: boolean,
-  listenerPriority: EventPriority | void,
 ): void {
   // Check if the target is a DOM element.
   if ((target: any).nodeType === ELEMENT_NODE) {
-    const targetElement = ((target: any): Element);
-    // Check if the DOM element is managed by React.
-    const targetFiber = getClosestInstanceFromNode(targetElement);
-    if (targetFiber === null) {
-      invariant(
-        false,
-        'ReactDOM.createEventHandle: setListener called on an element ' +
-          'target that is not managed by React. Ensure React rendered the DOM element.',
+    if (!enableEagerRootListeners) {
+      const targetElement = ((target: any): Element);
+      // Check if the DOM element is managed by React.
+      const targetFiber = getClosestInstanceFromNode(targetElement);
+      if (targetFiber === null) {
+        if (__DEV__) {
+          console.error(
+            'ReactDOM.createEventHandle: setListener called on an element ' +
+              'target that is not managed by React. Ensure React rendered the DOM element.',
+          );
+        }
+        return;
+      }
+      registerEventOnNearestTargetContainer(
+        targetFiber,
+        domEventName,
+        isCapturePhaseListener,
+        targetElement,
       );
     }
-    registerEventOnNearestTargetContainer(
-      targetFiber,
-      domEventName,
-      isPassiveListener,
-      listenerPriority,
-      isCapturePhaseListener,
-      targetElement,
-    );
   } else if (enableScopeAPI && isReactScope(target)) {
-    const scopeTarget = ((target: any): ReactScopeInstance);
-    const targetFiber = getFiberFromScopeInstance(scopeTarget);
-    if (targetFiber === null) {
-      // Scope is unmounted, do not proceed.
-      return;
+    if (!enableEagerRootListeners) {
+      const scopeTarget = ((target: any): ReactScopeInstance);
+      const targetFiber = getFiberFromScopeInstance(scopeTarget);
+      if (targetFiber === null) {
+        // Scope is unmounted, do not proceed.
+        return;
+      }
+      registerEventOnNearestTargetContainer(
+        targetFiber,
+        domEventName,
+        isCapturePhaseListener,
+        null,
+      );
     }
-    registerEventOnNearestTargetContainer(
-      targetFiber,
-      domEventName,
-      isPassiveListener,
-      listenerPriority,
-      isCapturePhaseListener,
-      null,
-    );
   } else if (isValidEventTarget(target)) {
     const eventTarget = ((target: any): EventTarget);
     // These are valid event targets, but they are also
@@ -161,8 +155,6 @@ function registerReactDOMEvent(
       isCapturePhaseListener,
       eventTarget,
       null,
-      isPassiveListener,
-      listenerPriority,
       IS_EVENT_HANDLE_NON_MANAGED_NODE,
     );
   } else {
@@ -181,46 +173,27 @@ export function createEventHandle(
   if (enableCreateEventHandleAPI) {
     const domEventName = ((type: any): DOMEventName);
 
-    if (enableEagerRootListeners) {
-      // We cannot support arbitrary native events with eager root listeners
-      // because the eager strategy relies on knowing the whole list ahead of time.
-      // If we wanted to support this, we'd have to add code to keep track
-      // (or search) for all portal and root containers, and lazily add listeners
-      // to them whenever we see a previously unknown event. This seems like a lot
-      // of complexity for something we don't even have a particular use case for.
-      // Unfortunately, the downside of this invariant is that *removing* a native
-      // event from the list of known events has now become a breaking change for
-      // any code relying on the createEventHandle API.
-      invariant(
-        allNativeEvents.has(domEventName) ||
-          domEventName === 'beforeblur' ||
-          domEventName === 'afterblur',
-        'Cannot call unstable_createEventHandle with "%s", as it is not an event known to React.',
-        domEventName,
-      );
-    }
+    // We cannot support arbitrary native events with eager root listeners
+    // because the eager strategy relies on knowing the whole list ahead of time.
+    // If we wanted to support this, we'd have to add code to keep track
+    // (or search) for all portal and root containers, and lazily add listeners
+    // to them whenever we see a previously unknown event. This seems like a lot
+    // of complexity for something we don't even have a particular use case for.
+    // Unfortunately, the downside of this invariant is that *removing* a native
+    // event from the list of known events has now become a breaking change for
+    // any code relying on the createEventHandle API.
+    invariant(
+      allNativeEvents.has(domEventName),
+      'Cannot call unstable_createEventHandle with "%s", as it is not an event known to React.',
+      domEventName,
+    );
 
     let isCapturePhaseListener = false;
-    let isPassiveListener = undefined; // Undefined means to use the browser default
-    let listenerPriority;
-
     if (options != null) {
       const optionsCapture = options.capture;
-      const optionsPassive = options.passive;
-      const optionsPriority = options.priority;
-
       if (typeof optionsCapture === 'boolean') {
         isCapturePhaseListener = optionsCapture;
       }
-      if (typeof optionsPassive === 'boolean') {
-        isPassiveListener = optionsPassive;
-      }
-      if (typeof optionsPriority === 'number') {
-        listenerPriority = optionsPriority;
-      }
-    }
-    if (listenerPriority === undefined) {
-      listenerPriority = getEventPriorityForListenerSystem(domEventName);
     }
 
     const eventHandle = (
@@ -234,15 +207,7 @@ export function createEventHandle(
       );
       if (!doesTargetHaveEventHandle(target, eventHandle)) {
         addEventHandleToTarget(target, eventHandle);
-        registerReactDOMEvent(
-          target,
-          domEventName,
-          isPassiveListener,
-          isCapturePhaseListener,
-          listenerPriority,
-        );
-        // Add the event to our known event types list.
-        addEventTypeToDispatchConfig(domEventName);
+        registerReactDOMEvent(target, domEventName, isCapturePhaseListener);
       }
       const listener = createEventHandleListener(
         domEventName,

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

@@ -89,6 +89,10 @@ const otherDiscreteEvents: Array<DOMEventName> = [
 ];
 
 if (enableCreateEventHandleAPI) {
+  // Special case: these two events don't have on* React handler
+  // and are only accessible via the createEventHandle API.
+  topLevelEventsToReactNames.set('beforeblur', null);
+  topLevelEventsToReactNames.set('afterblur', null);
   otherDiscreteEvents.push('beforeblur', 'afterblur');
 }
 
@@ -202,7 +206,7 @@ export function getEventPriorityForListenerSystem(
   if (__DEV__) {
     console.warn(
       'The event "%s" provided to createEventHandle() does not have a known priority type.' +
-        ' It is recommended to provide a "priority" option to specify a priority.',
+        ' This is likely a bug in React.',
       type,
     );
   }