[WIP] React Native: Turn HostComponent into an EventEmitter

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

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+export type CustomEventOptions = $ReadOnly<{|
+    bubbles?: boolean,
+    cancelable?: boolean,
+    detail?: { ... }
+|}>;
+
+// TODO: should extend an Event base-class that has most of these properties
+class CustomEvent extends Event {
+  type: string;
+  detail: ?{ ... };
+  bubbles: boolean;
+  cancelable: boolean;
+  isTrusted: boolean;
+
+  constructor(typeArg: string, options: CustomEventOptions) {
+    const { bubbles, cancelable } = options;
+    // TODO: support passing in the `composed` param
+    super(typeArg, { bubbles, cancelable });
+
+    this.detail = options.detail; // this would correspond to `NativeEvent` in SyntheticEvent
+
+    // TODO: do we need these since they should be on Event? (for RN we probably need a polyfill)
+    this.type = typeArg;
+    this.bubbles = !!(bubbles || false);
+    this.cancelable = !!(cancelable || false);
+    this.isTrusted = false;
+  }
+}
+
+export default CustomEvent;

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

@@ -23,6 +23,7 @@ import {mountSafeCallback_NOT_REALLY_SAFE} from './NativeMethodsMixinUtils';
 import {create, diff} from './ReactNativeAttributePayload';
 
 import {dispatchEvent} from './ReactFabricEventEmitter';
+import CustomEvent from './CustomEvent';
 
 import {
   DefaultEventPriority,
@@ -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,8 @@ if (registerEventHandler) {
   registerEventHandler(dispatchEvent);
 }
 
+type InternalEventListeners = { [string]: $ReadOnly<{| listener: EventListener, options: EventListenerOptions |}>[] };
+
 /**
  * This is used for refs on host components.
  */
@@ -111,6 +127,7 @@ class ReactFabricHostComponent {
   viewConfig: ViewConfig;
   currentProps: Props;
   _internalInstanceHandle: Object;
+  _eventListeners: ?InternalEventListeners;
 
   constructor(
     tag: number,
@@ -122,6 +139,7 @@ class ReactFabricHostComponent {
     this.viewConfig = viewConfig;
     this.currentProps = props;
     this._internalInstanceHandle = internalInstanceHandle;
+    this._eventListeners = null;
   }
 
   blur() {
@@ -193,6 +211,68 @@ class ReactFabricHostComponent {
 
     return;
   }
+
+  dipatchEvent_unstable(event: CustomEvent) {
+    dispatchEvent(this._internalInstanceHandle, event.type, event);
+  }
+
+  // This API adheres to the w3c addEventListener spec.
+  // See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+  // See https://www.w3.org/TR/DOM-Level-2-Events/events.html
+  //
+  // Exceptions/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
+
+    if (this._eventListeners === null) {
+      this._eventListeners = {};
+    }
+    const eventListeners: InternalEventListeners = this._eventListeners;
+    if (eventListeners != null) {
+      eventListeners[eventType] = eventListeners[eventType] || [];
+      eventListeners[eventType].push({
+        listener: listener,
+        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 (!this._eventListeners[eventType]) {
+      return;
+    }
+
+    this._eventListeners[eventType] = this._eventListeners[eventType].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,6 +10,7 @@
 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';
@@ -29,7 +30,7 @@ const {
 function listenerAtPhase(inst, event, propagationPhase: PropagationPhases) {
   const registrationName =
     event.dispatchConfig.phasedRegistrationNames[propagationPhase];
-  return getListener(inst, registrationName);
+  return getListener(inst, registrationName, propagationPhase);
 }
 
 function accumulateDirectionalDispatches(inst, phase, event) {
@@ -103,7 +104,9 @@ function accumulateDispatches(
 ): void {
   if (inst && event && event.dispatchConfig.registrationName) {
     const registrationName = event.dispatchConfig.registrationName;
-    const listener = getListener(inst, registrationName);
+    // Since we "do not look for phased registration names", that
+    // should be the same as "bubbled" here, for all intents and purposes...?
+    const listener = getListener(inst, registrationName, 'bubbled');
     if (listener) {
       event._dispatchListeners = accumulateInto(
         event._dispatchListeners,
@@ -130,7 +133,6 @@ function accumulateDirectDispatches(events: ?(Array<Object> | Object)) {
 }
 
 // End of inline
-type PropagationPhases = 'bubbled' | 'captured';
 
 const ReactNativeBridgeEventPlugin = {
   eventTypes: {},

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

@@ -7,30 +7,82 @@
  */
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import type {PropagationPhases} from './legacy-events/PropagationPhases';
 
 import {getFiberCurrentPropsFromNode} from './legacy-events/EventPluginUtils';
 
 export default function getListener(
   inst: Fiber,
   registrationName: string,
+  phase: PropagationPhases,
 ): Function | null {
+  // Previously, there was only one possible listener for an event:
+  // the onEventName property in props.
+  // Now, it is also possible to have N listeners
+  // for a specific event on a node. Thus, we accumulate all of the listeners,
+  // including the props listener, and return a function that calls them all in
+  // order, starting with the handler prop and then the listeners in order.
+  // We still return a single function or null.
+  const listeners = [];
+
   const stateNode = inst.stateNode;
-  if (stateNode === null) {
-    // Work in progress (ex: onload events in incremental mode).
-    return null;
+  // If null: Work in progress (ex: onload events in incremental mode).
+  if (stateNode !== null) {
+    const props = getFiberCurrentPropsFromNode(stateNode);
+    if (props === null) {
+      // Work in progress.
+      return null;
+    }
+    const listener = props[registrationName];
+
+    if (listener && typeof listener !== 'function') {
+      throw new Error(
+        `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
+      );
+    }
+
+    if (listener) {
+      listeners.push(listener);
+    }
+  }
+
+  // Get imperative event listeners for this event
+  if (stateNode.canonical?._eventListeners?.[registrationName]?.length > 0) {
+    var toRemove = [];
+    for (var listenerObj of stateNode.canonical._eventListeners[registrationName]) {
+      // Make sure phase of listener matches requested phase
+      const isCaptureEvent = listenerObj.options.capture != null && listenerObj.options.capture;
+      if (isCaptureEvent !== (phase === 'captured')) {
+        continue;
+      }
+
+      listeners.push(listenerObj.listener);
+
+      // Only call once? If so, remove from listeners after calling.
+      if (listenerObj.options.once) {
+        toRemove.push(listenerObj);
+      }
+    }
+    for (var listenerObj of toRemove) {
+      stateNode.canonical.removeEventListener_unstable(registrationName, listenerObj.listener, listenerObj.capture);
+    }
   }
-  const props = getFiberCurrentPropsFromNode(stateNode);
-  if (props === null) {
-    // Work in progress.
+
+  if (listeners.length === 0) {
     return null;
   }
-  const listener = props[registrationName];
 
-  if (listener && typeof listener !== 'function') {
-    throw new Error(
-      `Expected \`${registrationName}\` listener to be a function, instead got a value of \`${typeof listener}\` type.`,
-    );
+  if (listeners.length === 1) {
+    return listeners[0];
   }
 
-  return listener;
+  // We need to call at least 2 event handlers
+  return function () {
+    // any arguments that are passed to the event handlers
+    var args = Array.prototype.slice.call(arguments);
+
+    for (var i = 0; i < listeners.length; i++) {
+      listeners[i] && listeners[i].apply(null, args);
+    }
+  };
 }

packages/react-native-renderer/src/legacy-events/PropagationPhases.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ */
+
+export type PropagationPhases = 'bubbled' | 'captured';