Allow parameterizing event types in EventTarget

packages/react-native/Libraries/Blob/FileReader.js

@@ -179,51 +179,51 @@ class FileReader extends EventTarget {
     return this._result;
   }
 
-  get onabort(): EventCallback | null {
+  get onabort(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'abort');
   }
 
-  set onabort(listener: ?EventCallback) {
+  set onabort(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'abort', listener);
   }
 
-  get onerror(): EventCallback | null {
+  get onerror(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'error');
   }
 
-  set onerror(listener: ?EventCallback) {
+  set onerror(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'error', listener);
   }
 
-  get onload(): EventCallback | null {
+  get onload(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'load');
   }
 
-  set onload(listener: ?EventCallback) {
+  set onload(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'load', listener);
   }
 
-  get onloadstart(): EventCallback | null {
+  get onloadstart(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadstart');
   }
 
-  set onloadstart(listener: ?EventCallback) {
+  set onloadstart(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadstart', listener);
   }
 
-  get onloadend(): EventCallback | null {
+  get onloadend(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadend');
   }
 
-  set onloadend(listener: ?EventCallback) {
+  set onloadend(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadend', listener);
   }
 
-  get onprogress(): EventCallback | null {
+  get onprogress(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'progress');
   }
 
-  set onprogress(listener: ?EventCallback) {
+  set onprogress(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'progress', listener);
   }
 }

packages/react-native/Libraries/Network/XMLHttpRequest.js

@@ -83,46 +83,46 @@ const SUPPORTED_RESPONSE_TYPES = {
 };
 
 class XMLHttpRequestEventTarget extends EventTarget {
-  get onload(): EventCallback | null {
+  get onload(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'load');
   }
-  set onload(listener: ?EventCallback) {
+  set onload(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'load', listener);
   }
-  get onloadstart(): EventCallback | null {
+  get onloadstart(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadstart');
   }
-  set onloadstart(listener: ?EventCallback) {
+  set onloadstart(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadstart', listener);
   }
-  get onprogress(): EventCallback | null {
+  get onprogress(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'progress');
   }
-  set onprogress(listener: ?EventCallback) {
+  set onprogress(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'progress', listener);
   }
-  get ontimeout(): EventCallback | null {
+  get ontimeout(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'timeout');
   }
-  set ontimeout(listener: ?EventCallback) {
+  set ontimeout(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'timeout', listener);
   }
-  get onerror(): EventCallback | null {
+  get onerror(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'error');
   }
-  set onerror(listener: ?EventCallback) {
+  set onerror(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'error', listener);
   }
-  get onabort(): EventCallback | null {
+  get onabort(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'abort');
   }
-  set onabort(listener: ?EventCallback) {
+  set onabort(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'abort', listener);
   }
-  get onloadend(): EventCallback | null {
+  get onloadend(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadend');
   }
-  set onloadend(listener: ?EventCallback) {
+  set onloadend(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadend', listener);
   }
 }
@@ -705,7 +705,7 @@ class XMLHttpRequest extends EventTarget {
     }
   }
 
-  addEventListener(type: string, listener: EventListener | null): void {
+  addEventListener(type: string, listener: EventListener<> | null): void {
     // If we dont' have a 'readystatechange' event handler, we don't
     // have to send repeated LOADING events with incremental updates
     // to responseText, which will avoid a bunch of native -> JS
@@ -726,67 +726,67 @@ class XMLHttpRequest extends EventTarget {
    * `on<event>` event handling (without JS prototype magic).
    */
 
-  get onabort(): EventCallback | null {
+  get onabort(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'abort');
   }
 
-  set onabort(listener: ?EventCallback) {
+  set onabort(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'abort', listener);
   }
 
-  get onerror(): EventCallback | null {
+  get onerror(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'error');
   }
 
-  set onerror(listener: ?EventCallback) {
+  set onerror(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'error', listener);
   }
 
-  get onload(): EventCallback | null {
+  get onload(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'load');
   }
 
-  set onload(listener: ?EventCallback) {
+  set onload(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'load', listener);
   }
 
-  get onloadstart(): EventCallback | null {
+  get onloadstart(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadstart');
   }
 
-  set onloadstart(listener: ?EventCallback) {
+  set onloadstart(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadstart', listener);
   }
 
-  get onprogress(): EventCallback | null {
+  get onprogress(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'progress');
   }
 
-  set onprogress(listener: ?EventCallback) {
+  set onprogress(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'progress', listener);
   }
 
-  get ontimeout(): EventCallback | null {
+  get ontimeout(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'timeout');
   }
 
-  set ontimeout(listener: ?EventCallback) {
+  set ontimeout(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'timeout', listener);
   }
 
-  get onloadend(): EventCallback | null {
+  get onloadend(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'loadend');
   }
 
-  set onloadend(listener: ?EventCallback) {
+  set onloadend(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'loadend', listener);
   }
 
-  get onreadystatechange(): EventCallback | null {
+  get onreadystatechange(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'readystatechange');
   }
 
-  set onreadystatechange(listener: ?EventCallback) {
+  set onreadystatechange(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'readystatechange', listener);
   }
 }

packages/react-native/Libraries/WebSocket/WebSocket.js

@@ -289,35 +289,35 @@ class WebSocket extends EventTarget {
     ];
   }
 
-  get onclose(): EventCallback | null {
+  get onclose(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'close');
   }
 
-  set onclose(listener: ?EventCallback) {
+  set onclose(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'close', listener);
   }
 
-  get onerror(): EventCallback | null {
+  get onerror(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'error');
   }
 
-  set onerror(listener: ?EventCallback) {
+  set onerror(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'error', listener);
   }
 
-  get onmessage(): EventCallback | null {
+  get onmessage(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'message');
   }
 
-  set onmessage(listener: ?EventCallback) {
+  set onmessage(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'message', listener);
   }
 
-  get onopen(): EventCallback | null {
+  get onopen(): EventCallback<> | null {
     return getEventHandlerAttribute(this, 'open');
   }
 
-  set onopen(listener: ?EventCallback) {
+  set onopen(listener: ?EventCallback<>) {
     setEventHandlerAttribute(this, 'open', listener);
   }
 }

packages/react-native/src/private/webapis/dom/events/Event.js

@@ -66,7 +66,7 @@ export default class Event {
   [COMPOSED_PATH_KEY]: boolean = [];
 
   // $FlowExpectedError[unsupported-syntax]
-  [CURRENT_TARGET_KEY]: EventTarget | null = null;
+  [CURRENT_TARGET_KEY]: EventTarget<> | null = null;
 
   // $FlowExpectedError[unsupported-syntax]
   [EVENT_PHASE_KEY]: boolean = Event.NONE;
@@ -84,7 +84,7 @@ export default class Event {
   [STOP_PROPAGATION_FLAG_KEY]: boolean = false;
 
   // $FlowExpectedError[unsupported-syntax]
-  [TARGET_KEY]: EventTarget | null = null;
+  [TARGET_KEY]: EventTarget<> | null = null;
 
   constructor(type: string, options?: ?EventInit) {
     if (arguments.length < 1) {
@@ -123,7 +123,7 @@ export default class Event {
     return this._composed;
   }
 
-  get currentTarget(): EventTarget | null {
+  get currentTarget(): EventTarget<> | null {
     return getCurrentTarget(this);
   }
 
@@ -139,7 +139,7 @@ export default class Event {
     return getIsTrusted(this);
   }
 
-  get target(): EventTarget | null {
+  get target(): EventTarget<> | null {
     return getTarget(this);
   }
 
@@ -151,7 +151,7 @@ export default class Event {
     return this._type;
   }
 
-  composedPath(): $ReadOnlyArray<EventTarget> {
+  composedPath(): $ReadOnlyArray<EventTarget<>> {
     return getComposedPath(this).slice();
   }
 

packages/react-native/src/private/webapis/dom/events/EventHandlerAttributes.js

@@ -40,28 +40,33 @@
  * ```
  */
 
+import type Event from './Event';
 import type EventTarget from './EventTarget';
-import type {EventCallback} from './EventTarget';
+import type {EventCallback, GenericEventMap} from './EventTarget';
 
-type EventHandler = $ReadOnly<{
-  handleEvent: EventCallback,
+type EventHandler<EventTypes: Event> = $ReadOnly<{
+  handleEvent: EventCallback<EventTypes>,
 }>;
-type EventHandlerAttributeMap = Map<string, EventHandler | null>;
+
+type EventHandlerAttributeMap<EventTypes: GenericEventMap> = Map<
+  $Keys<EventTypes>,
+  EventHandler<$Values<EventTypes>> | null,
+>;
 
 const EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY = Symbol(
   'eventHandlerAttributeMap',
 );
 
-function getEventHandlerAttributeMap(
-  target: EventTarget,
-): ?EventHandlerAttributeMap {
+function getEventHandlerAttributeMap<EventTypes: GenericEventMap>(
+  target: EventTarget<EventTypes>,
+): ?EventHandlerAttributeMap<EventTypes> {
   // $FlowExpectedError[prop-missing]
   return target[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY];
 }
 
-function setEventHandlerAttributeMap(
-  target: EventTarget,
-  map: ?EventHandlerAttributeMap,
+function setEventHandlerAttributeMap<EventTypes: GenericEventMap>(
+  target: EventTarget<EventTypes>,
+  map: ?EventHandlerAttributeMap<EventTypes>,
 ) {
   // $FlowExpectedError[prop-missing]
   target[EVENT_HANDLER_CONTENT_ATTRIBUTE_MAP_KEY] = map;
@@ -73,10 +78,13 @@ function setEventHandlerAttributeMap(
  *
  * Should be used to get the current value for `target.on{type}`.
  */
-export function getEventHandlerAttribute(
-  target: EventTarget,
-  type: string,
-): EventCallback | null {
+export function getEventHandlerAttribute<
+  EventTypes: GenericEventMap,
+  EventType: $Keys<EventTypes>,
+>(
+  target: EventTarget<EventTypes>,
+  type: EventType,
+): EventCallback<EventTypes[EventType]> | null {
   const listener = getEventHandlerAttributeMap(target)?.get(type);
   return listener != null ? listener.handleEvent : null;
 }
@@ -87,10 +95,13 @@ export function getEventHandlerAttribute(
  *
  * Should be used to set a value for `target.on{type}`.
  */
-export function setEventHandlerAttribute(
-  target: EventTarget,
-  type: string,
-  callback: ?EventCallback,
+export function setEventHandlerAttribute<
+  EventTypes: GenericEventMap,
+  EventName: $Keys<EventTypes>,
+>(
+  target: EventTarget<EventTypes>,
+  type: EventName,
+  callback: ?EventCallback<EventTypes[EventName]>,
 ): void {
   let map = getEventHandlerAttributeMap(target);
   if (map != null) {