Create a SideEvent

src/components/App/client-api.ts

@@ -1,4 +1,5 @@
 import App from './index';
+import { SideEvent, SideEventType } from '../compress/index';
 
 import { expose } from 'comlink';
 
@@ -22,7 +23,7 @@ class API {
   setFile(blob: Blob, name: string) {
     return new Promise((resolve) => {
       document.addEventListener(
-        'squoosh:processingstart',
+        SideEventType.START,
         () => resolve(),
         { once: true },
       );
@@ -43,30 +44,30 @@ class API {
 
     return new Promise((resolve, reject) => {
       document.addEventListener(
-        'squoosh:processingdone',
-        (event) => {
-          if ((event as CustomEvent).detail.side !== side) {
+        SideEventType.DONE,
+        (event: Event) => {
+          if ((event as SideEvent).side !== side) {
             return;
           }
           resolve(this._app.compressInstance!.state.sides[side].file);
         },
       );
       document.addEventListener(
-        'squoosh:processingabort',
+        SideEventType.ABORT,
         (event) => {
-          if ((event as CustomEvent).detail.side !== side) {
+          if ((event as SideEvent).side !== side) {
             return;
           }
           reject(new DOMException('Aborted', 'AbortError'));
         },
       );
       document.addEventListener(
-        'squoosh:processingerror',
+        SideEventType.ERROR,
         (event) => {
-          if ((event as CustomEvent).detail.side !== side) {
+          if ((event as SideEvent).side !== side) {
             return;
           }
-          reject(new Error((event as CustomEvent).detail.msg));
+          reject((event as SideEvent).error);
         },
       );
     });

src/components/compress/index.tsx

@@ -32,6 +32,26 @@ import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
 import SnackBarElement from '../../lib/SnackBar';
 import { InputProcessorState, defaultInputProcessorState } from '../../codecs/input-processors';
 
+export enum SideEventType {
+  START = 'squoosh:START',
+  DONE = 'squoosh:done',
+  ABORT = 'squoosh:abort',
+  ERROR = 'squoosh:error',
+}
+export interface SideEventInit extends EventInit {
+  side?: 0|1;
+  error?: Error;
+}
+export class SideEvent extends Event {
+  public side?: 0|1;
+  public error?: Error;
+  constructor(name: SideEventType, init: SideEventInit) {
+    super(name, init);
+    this.side = init.side;
+    this.error = init.error;
+  }
+}
+
 export interface SourceImage {
   file: File | Fileish;
   decoded: ImageData;
@@ -474,28 +494,30 @@ export default class Compress extends Component<Props, State> {
   }
 
   @bind
-  private dispatchCustomEvent(name: string, detail?: {}) {
-    (this.base || document).dispatchEvent(new CustomEvent(name, { detail, bubbles: true }));
+  private dispatchSideEvent(type: SideEventType, init: SideEventInit = {}) {
+    document.dispatchEvent(
+      new SideEvent(type, init),
+    );
   }
 
   @bind
   private signalProcessingStart() {
-    this.dispatchCustomEvent('squoosh:processingstart');
+    this.dispatchSideEvent(SideEventType.START);
   }
 
   @bind
   private signalProcessingDone(side: 0|1) {
-    this.dispatchCustomEvent('squoosh:processingdone', { side });
+    this.dispatchSideEvent(SideEventType.DONE, { side });
   }
 
   @bind
   private signalProcessingAbort(side: 0|1) {
-    this.dispatchCustomEvent('squoosh:processingabort', { side });
+    this.dispatchSideEvent(SideEventType.ABORT, { side });
   }
 
   @bind
   private signalProcessingError(side: 0|1, msg: string) {
-    this.dispatchCustomEvent('squoosh:processingerror', { side, msg });
+    this.dispatchSideEvent(SideEventType.ERROR, { side, error: new Error(msg) });
   }
 
   private async updateImage(index: number, options: UpdateImageOptions = {}): Promise<void> {