Ensure listener-collection passes options to removeEventListener

src/util/listener-collection.ts

@@ -0,0 +1,75 @@
+export type Listener = {
+  eventTarget: EventTarget;
+  eventType: string;
+  listener: EventListener;
+  options?: AddEventListenerOptions;
+};
+
+/**
+ * Return the event type that a listener will receive.
+ *
+ * For example `EventType<HTMLElement, 'keydown'>` evaluates to `KeyboardEvent`.
+ *
+ * The event type is extracted from the target's `on${Type}` property (eg.
+ * `HTMLElement.onkeydown` here) If there is no such property, the type defaults
+ * to `Event`.
+ */
+type EventType<
+  Target extends EventTarget,
+  TypeName extends string
+> = `on${TypeName}` extends keyof Target
+  ? Target[`on${TypeName}`] extends ((...args: any[]) => void) | null
+    ? Parameters<NonNullable<Target[`on${TypeName}`]>>[0]
+    : Event
+  : Event;
+
+/**
+ * Utility that provides a way to conveniently remove a set of DOM event
+ * listeners when they are no longer needed.
+ */
+export class ListenerCollection {
+  private _listeners: Map<symbol, Listener>;
+
+  constructor() {
+    this._listeners = new Map();
+  }
+
+  /**
+   * Add a listener and return an ID that can be used to remove it later
+   */
+  add(
+    eventTarget: EventTarget,
+    eventType: string,
+    listener: (event: EventType<EventTarget, string>) => void,
+    options?: AddEventListenerOptions
+  ) {
+    eventTarget.addEventListener(eventType, listener, options);
+    const symbol = Symbol();
+    this._listeners.set(symbol, {
+      eventTarget,
+      eventType,
+      listener,
+      options,
+    });
+    return symbol;
+  }
+
+  /**
+   * Remove a specific listener.
+   */
+  remove(listenerId: symbol) {
+    const event = this._listeners.get(listenerId);
+    if (event) {
+      const { eventTarget, eventType, listener, options } = event;
+      eventTarget.removeEventListener(eventType, listener, options);
+      this._listeners.delete(listenerId);
+    }
+  }
+
+  removeAll() {
+    this._listeners.forEach(({ eventTarget, eventType, listener, options }) => {
+      eventTarget.removeEventListener(eventType, listener, options);
+    });
+    this._listeners.clear();
+  }
+}

src/util/test/listener-collection-test.js

@@ -25,27 +25,43 @@ describe('ListenerCollection', () => {
     it('unregisters the specified listener', () => {
       const listener1 = sinon.stub();
       const listener2 = sinon.stub();
+      const listener3 = sinon.stub();
       listeners.add(window, 'resize', listener1);
       const listenerId = listeners.add(window, 'resize', listener2);
+      const capturePhaseListenerId = listeners.add(
+        window,
+        'resize',
+        listener3,
+        {
+          capture: true,
+        }
+      );
       listeners.remove(listenerId);
+      listeners.remove(capturePhaseListenerId);
 
       window.dispatchEvent(new Event('resize'));
       assert.calledOnce(listener1);
       assert.notCalled(listener2);
+      assert.notCalled(listener3);
     });
   });
 
   describe('#removeAll', () => {
     it('unregisters all event listeners', () => {
       const listener1 = sinon.stub();
       const listener2 = sinon.stub();
+      const listener3 = sinon.stub();
       listeners.add(window, 'resize', listener1);
       listeners.add(window, 'resize', listener2);
+      listeners.add(window, 'resize', listener3, {
+        capture: true,
+      });
       listeners.removeAll();
 
       window.dispatchEvent(new Event('resize'));
       assert.notCalled(listener1);
       assert.notCalled(listener2);
+      assert.notCalled(listener3);
     });
   });
 });