Jake code review

src/components/App/client-api.ts

@@ -1,5 +1,5 @@
 import App from './index';
-import { SideEvent, SideEventType } from '../compress/index';
+import { SquooshStartEventType, SquooshSideEventType } from '../compress/index';
 
 import { expose } from 'comlink';
 
@@ -15,21 +15,26 @@ export function exposeAPI(app: App) {
   expose(new API(app), self.parent);
 }
 
-class API {
-  constructor(private _app: App) { }
+function addRemovableGlobalListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(name: K, listener: (ev: GlobalEventHandlersEventMap[K]) => void): () => void {
+  document.addEventListener(name, listener);
+  return () => document.removeEventListener(name, listener);
+}
 
-  setFile(blob: Blob, name: string) {
+class API {
+  constructor(private _app: App) {}
+
+  async setFile(blob: Blob, name: string) {
     return new Promise((resolve) => {
-      document.addEventListener(
-        SideEventType.START,
-        () => resolve(),
-        { once: true },
-      );
+      document.addEventListener(SquooshStartEventType.START, () => resolve(), {
+        once: true,
+      });
       this._app.openFile(new File([blob], name));
     });
   }
 
-  getBlob(side: 0 | 1) {
+  async getBlob(side: 0 | 1) {
     if (!this._app.state.file || !this._app.compressInstance) {
       throw new Error('No file has been loaded');
     }
@@ -40,34 +45,35 @@ class API {
       return this._app.compressInstance!.state.sides[side].file;
     }
 
-    return new Promise((resolve, reject) => {
-      document.addEventListener(
-        SideEventType.DONE,
-        (event: Event) => {
-          if ((event as SideEvent).side !== side) {
+    const listeners: ReturnType<typeof addRemovableGlobalListener>[] = [];
+
+    const r = new Promise((resolve, reject) => {
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.DONE, (event) => {
+          if (event.side !== side) {
             return;
           }
           resolve(this._app.compressInstance!.state.sides[side].file);
-        },
+        }),
       );
-      document.addEventListener(
-        SideEventType.ABORT,
-        (event) => {
-          if ((event as SideEvent).side !== side) {
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ABORT, (event) => {
+          if (event.side !== side) {
             return;
           }
           reject(new DOMException('Aborted', 'AbortError'));
-        },
+        }),
       );
-      document.addEventListener(
-        SideEventType.ERROR,
-        (event) => {
-          if ((event as SideEvent).side !== side) {
+      listeners.push(
+        addRemovableGlobalListener(SquooshSideEventType.ERROR, (event) => {
+          if (event.side !== side) {
             return;
           }
-          reject((event as SideEvent).error);
-        },
+          reject(event.error);
+        }),
       );
     });
+    r.then(() => listeners.forEach(remove => remove()));
+    return r;
   }
 }