[WIP] React Native: Turn HostComponent into an EventEmitter

packages/react-native-renderer/src/ReactFabricEventEmitter.js

@@ -18,12 +18,12 @@ import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import accumulateInto from './legacy-events/accumulateInto';
 
 import {plugins} from './legacy-events/EventPluginRegistry';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 
 import {RawEventEmitter} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
-export {getListener, registrationNameModules as registrationNames};
+export {getListeners, registrationNameModules as registrationNames};
 
 /**
  * Allows registered plugins an opportunity to extract events from top-level

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -10,6 +10,7 @@
 import type {ReactNodeList, OffscreenMode} from 'shared/ReactTypes';
 import type {ElementRef} from 'react';
 import type {
+  CustomEvent,
   HostComponent,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
@@ -95,6 +96,19 @@ export type RendererInspectionConfig = $ReadOnly<{|
   ) => void,
 |}>;
 
+// TODO: find a better place for this type to live
+export type EventListenerOptions = $ReadOnly<{|
+  capture?: boolean,
+  once?: boolean,
+  passive?: boolean,
+  signal: mixed, // not yet implemented
+|}>;
+export type EventListenerRemoveOptions = $ReadOnly<{|
+  capture?: boolean,
+|}>;
+// TODO: this will be changed in the future to be w3c-compatible and allow "EventListener" objects as well as functions.
+export type EventListener = Function;
+
 // TODO: Remove this conditional once all changes have propagated.
 if (registerEventHandler) {
   /**
@@ -103,6 +117,14 @@ if (registerEventHandler) {
   registerEventHandler(dispatchEvent);
 }
 
+type InternalEventListeners = {
+  [string]: {|
+    listener: EventListener,
+    options: EventListenerOptions,
+    invalidated: boolean,
+  |}[],
+};
+
 /**
  * This is used for refs on host components.
  */
@@ -111,6 +133,7 @@ class ReactFabricHostComponent {
   viewConfig: ViewConfig;
   currentProps: Props;
   _internalInstanceHandle: Object;
+  _eventListeners: ?InternalEventListeners;
 
   constructor(
     tag: number,
@@ -122,6 +145,7 @@ class ReactFabricHostComponent {
     this.viewConfig = viewConfig;
     this.currentProps = props;
     this._internalInstanceHandle = internalInstanceHandle;
+    this._eventListeners = null;
   }
 
   blur() {
@@ -193,6 +217,101 @@ class ReactFabricHostComponent {
 
     return;
   }
+
+  // This API (dispatchEvent, addEventListener, removeEventListener) attempts to adhere to the
+  // w3 Level2 Events spec as much as possible, treating HostComponent as a DOM node.
+  //
+  // Unless otherwise noted, these methods should "just work" and adhere to the W3 specs.
+  // If they deviate in a way that is not explicitly noted here, you've found a bug!
+  //
+  // See:
+  // * https://www.w3.org/TR/DOM-Level-2-Events/events.html
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+  // * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+  dispatchEvent_unstable(event: CustomEvent) {
+    dispatchEvent(this._internalInstanceHandle, event.type, event);
+  }
+
+  // Deviations from spec/TODOs:
+  // (1) listener must currently be a function, we do not support EventListener objects yet.
+  // (2) we do not support the `signal` option / AbortSignal yet
+  addEventListener_unstable(
+    eventType: string,
+    listener: EventListener,
+    options: EventListenerOptions | boolean,
+  ) {
+    if (typeof eventType !== 'string') {
+      throw new Error('addEventListener_unstable eventType must be a string');
+    }
+    if (typeof listener !== 'function') {
+      throw new Error('addEventListener_unstable listener must be a function');
+    }
+
+    // The third argument is either boolean indicating "captures" or an object.
+    const optionsObj =
+      typeof options === 'object' && options !== null ? options : {};
+    const capture =
+      (typeof options === 'boolean' ? options : optionsObj.capture) || false;
+    const once = optionsObj.once || false;
+    const passive = optionsObj.passive || false;
+    const signal = null; // TODO: implement signal/AbortSignal
+
+    const eventListeners: InternalEventListeners = this._eventListeners || {};
+    if (this._eventListeners === null) {
+      this._eventListeners = eventListeners;
+    }
+
+    const namedEventListeners = eventListeners[eventType] || [];
+    if (eventListeners[eventType] == null) {
+      eventListeners[eventType] = namedEventListeners;
+    }
+
+    namedEventListeners.push({
+      listener: listener,
+      invalidated: false,
+      options: {
+        capture: capture,
+        once: once,
+        passive: passive,
+        signal: signal,
+      },
+    });
+  }
+
+  // See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
+  removeEventListener_unstable(
+    eventType: string,
+    listener: EventListener,
+    options: EventListenerRemoveOptions | boolean,
+  ) {
+    // eventType and listener must be referentially equal to be removed from the listeners
+    // data structure, but in "options" we only check the `capture` flag, according to spec.
+    // That means if you add the same function as a listener with capture set to true and false,
+    // you must also call removeEventListener twice with capture set to true/false.
+    const optionsObj =
+      typeof options === 'object' && options !== null ? options : {};
+    const capture =
+      (typeof options === 'boolean' ? options : optionsObj.capture) || false;
+
+    // If there are no event listeners or named event listeners, we can bail early - our
+    // job is already done.
+    const eventListeners = this._eventListeners;
+    if (!eventListeners) {
+      return;
+    }
+    const namedEventListeners = eventListeners[eventType];
+    if (!namedEventListeners) {
+      return;
+    }
+
+    eventListeners[eventType] = namedEventListeners.filter(listenerObj => {
+      return !(
+        listenerObj.listener === listener &&
+        listenerObj.options.capture === capture
+      );
+    });
+  }
 }
 
 // eslint-disable-next-line no-unused-expressions

packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js

@@ -10,11 +10,15 @@
 import type {AnyNativeEvent} from './legacy-events/PluginModuleType';
 import type {TopLevelType} from './legacy-events/TopLevelEventTypes';
 import SyntheticEvent from './legacy-events/SyntheticEvent';
+import type {PropagationPhases} from './legacy-events/PropagationPhases';
 
 // Module provided by RN:
-import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {
+  CustomEvent,
+  ReactNativeViewConfigRegistry,
+} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 import accumulateInto from './legacy-events/accumulateInto';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import forEachAccumulated from './legacy-events/forEachAccumulated';
 import {HostComponent} from 'react-reconciler/src/ReactWorkTags';
 
@@ -26,10 +30,15 @@ const {
 // Start of inline: the below functions were inlined from
 // EventPropagator.js, as they deviated from ReactDOM's newer
 // implementations.
-function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
+function listenersAtPhase(
+  inst,
+  event,
+  propagationPhase: PropagationPhases,
+  isCustomEvent: boolean,
+) {
   const registrationName =
     event.dispatchConfig.phasedRegistrationNames[propagationPhase];
-  return getListener(inst, registrationName);
+  return getListeners(inst, registrationName, propagationPhase, isCustomEvent);
 }
 
 function accumulateDirectionalDispatches(inst, phase, event) {
@@ -38,13 +47,21 @@ function accumulateDirectionalDispatches(inst, phase, event) {
       console.error('Dispatching inst must not be null');
     }
   }
-  const listener = listenerAtPhase(inst, event, phase);
-  if (listener) {
+  const listeners = listenersAtPhase(
+    inst,
+    event,
+    phase,
+    event instanceof CustomEvent,
+  );
+  if (listeners && listeners.length > 0) {
     event._dispatchListeners = accumulateInto(
       event._dispatchListeners,
-      listener,
+      listeners,
     );
-    event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
+    const insts = listeners.map(() => {
+      return inst;
+    });
+    event._dispatchInstances = accumulateInto(event._dispatchInstances, insts);
   }
 }
 
@@ -66,7 +83,12 @@ function getParent(inst) {
 /**
  * Simulates the traversal of a two-phase, capture/bubble event dispatch.
  */
-export function traverseTwoPhase(inst: Object, fn: Function, arg: Function) {
+export function traverseTwoPhase(
+  inst: Object,
+  fn: Function,
+  arg: Function,
+  bubbles: boolean,
+) {
   const path = [];
   while (inst) {
     path.push(inst);
@@ -78,12 +100,28 @@ export function traverseTwoPhase(inst: Object, fn: Function, arg: Function) {
   }
   for (i = 0; i < path.length; i++) {
     fn(path[i], 'bubbled', arg);
+    // It's possible this is false for custom events.
+    if (!bubbles) {
+      break;
+    }
   }
 }
 
 function accumulateTwoPhaseDispatchesSingle(event) {
   if (event && event.dispatchConfig.phasedRegistrationNames) {
-    traverseTwoPhase(event._targetInst, accumulateDirectionalDispatches, event);
+    // bubbles is only set on the dispatchConfig for custom events.
+    // The `event` param here at this point is a SyntheticEvent, not an Event or CustomEvent.
+    const bubbles =
+      event.dispatchConfig.isCustomEvent === true
+        ? !!event.dispatchConfig.bubbles
+        : true;
+
+    traverseTwoPhase(
+      event._targetInst,
+      accumulateDirectionalDispatches,
+      event,
+      bubbles,
+    );
   }
 }
 
@@ -103,13 +141,27 @@ function accumulateDispatches(
 ): void {
   if (inst && event && event.dispatchConfig.registrationName) {
     const registrationName = event.dispatchConfig.registrationName;
-    const listener = getListener(inst, registrationName);
-    if (listener) {
+    // Since we "do not look for phased registration names", that
+    // should be the same as "bubbled" here, for all intents and purposes...?
+    const listeners = getListeners(
+      inst,
+      registrationName,
+      'bubbled',
+      !!event.dispatchConfig.isCustomEvent,
+    );
+    if (listeners) {
       event._dispatchListeners = accumulateInto(
         event._dispatchListeners,
-        listener,
+        listeners,
+      );
+      // an inst for every listener
+      const insts = listeners.map(() => {
+        return inst;
+      });
+      event._dispatchInstances = accumulateInto(
+        event._dispatchInstances,
+        insts,
       );
-      event._dispatchInstances = accumulateInto(event._dispatchInstances, inst);
     }
   }
 }
@@ -130,7 +182,6 @@ function accumulateDirectDispatches(events: ?(Array<Object> | Object)) {
 }
 
 // End of inline
-type PropagationPhases = 'bubbled' | 'captured';
 
 const ReactNativeBridgeEventPlugin = {
   eventTypes: {},
@@ -147,23 +198,53 @@ const ReactNativeBridgeEventPlugin = {
     }
     const bubbleDispatchConfig = customBubblingEventTypes[topLevelType];
     const directDispatchConfig = customDirectEventTypes[topLevelType];
+    let customEventConfig = null;
+    if (nativeEvent instanceof CustomEvent) {
+      // $FlowFixMe
+      if (topLevelType.indexOf('on') !== 0) {
+        throw new Error('Custom event name must start with "on"');
+      }
+      nativeEvent.isTrusted = false;
+      // For now, this custom event name should technically not be used -
+      // CustomEvents emitted in the system do not result in calling prop handlers.
+      customEventConfig = {
+        registrationName: topLevelType,
+        isCustomEvent: true,
+        bubbles: nativeEvent.bubbles,
+        phasedRegistrationNames: {
+          bubbled: topLevelType,
+          // Unlike with the props-based handlers, capture events are registered
+          // to the HostComponent event emitter with the same name but a flag indicating
+          // that the handler is for the capture phase.
+          captured: topLevelType,
+        },
+      };
+    }
 
-    if (!bubbleDispatchConfig && !directDispatchConfig) {
+    if (!bubbleDispatchConfig && !directDispatchConfig && !customEventConfig) {
       throw new Error(
         // $FlowFixMe - Flow doesn't like this string coercion because DOMTopLevelEventType is opaque
         `Unsupported top level event type "${topLevelType}" dispatched`,
       );
     }
 
     const event = SyntheticEvent.getPooled(
-      bubbleDispatchConfig || directDispatchConfig,
+      bubbleDispatchConfig || directDispatchConfig || customEventConfig,
       targetInst,
       nativeEvent,
       nativeEventTarget,
     );
-    if (bubbleDispatchConfig) {
+    if (bubbleDispatchConfig || customEventConfig) {
+      // All CustomEvents go through two-phase dispatching, even if they
+      // are non-bubbling events, which is why we put the `bubbles` param
+      // in the config for CustomEvents only.
+      // CustomEvents are not emitted to prop handler functions ever.
+      // Native two-phase events will be emitted to prop handler functions
+      // and to HostComponent event listeners.
       accumulateTwoPhaseDispatches(event);
     } else if (directDispatchConfig) {
+      // Direct dispatched events do not go to HostComponent EventEmitters,
+      // they *only* go to the prop function handlers.
       accumulateDirectDispatches(event);
     } else {
       return null;

packages/react-native-renderer/src/ReactNativeEventEmitter.js

@@ -17,12 +17,12 @@ import {registrationNameModules} from './legacy-events/EventPluginRegistry';
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 import {plugins} from './legacy-events/EventPluginRegistry';
-import getListener from './ReactNativeGetListener';
+import getListeners from './ReactNativeGetListeners';
 import accumulateInto from './legacy-events/accumulateInto';
 
 import {getInstanceFromNode} from './ReactNativeComponentTree';
 
-export {getListener, registrationNameModules as registrationNames};
+export {getListeners, registrationNameModules as registrationNames};
 
 /**
  * Version of `ReactBrowserEventEmitter` that works on the receiving side of a