feat(worker): add MessageEvent, ErrorEvent and handling to Worker API (#4391)

Co-authored-by: Bartek Iwańczuk <biwanczuk@gmail.com>

cli/js/lib.deno.shared_globals.d.ts

@@ -1037,14 +1037,44 @@ declare const URL: {
   revokeObjectURL(url: string): void;
 };
 
+interface MessageEventInit extends EventInit {
+  data?: any;
+  origin?: string;
+  lastEventId?: string;
+}
+
+declare class MessageEvent extends Event {
+  readonly data: any;
+  readonly origin: string;
+  readonly lastEventId: string;
+  constructor(type: string, eventInitDict?: MessageEventInit);
+}
+
+interface ErrorEventInit extends EventInit {
+  message?: string;
+  filename?: string;
+  lineno?: number;
+  colno?: number;
+  error?: any;
+}
+
+declare class ErrorEvent extends Event {
+  readonly message: string;
+  readonly filename: string;
+  readonly lineno: number;
+  readonly colno: number;
+  readonly error: any;
+  constructor(type: string, eventInitDict?: ErrorEventInit);
+}
+
 interface PostMessageOptions {
   transfer?: any[];
 }
 
-declare class Worker {
+declare class Worker extends EventTarget {
-  onerror?: (e: Event) => void;
+  onerror?: (e: ErrorEvent) => void;
-  onmessage?: (data: any) => void;
+  onmessage?: (e: MessageEvent) => void;
-  onmessageerror?: () => void;
+  onmessageerror?: (e: MessageEvent) => void;
   constructor(
     specifier: string,
     options?: {

cli/js/web/workers.ts

@@ -17,6 +17,60 @@ import { EventTargetImpl as EventTarget } from "./event_target.ts";
 const encoder = new TextEncoder();
 const decoder = new TextDecoder();
 
+export interface MessageEventInit extends EventInit {
+  data?: any;
+  origin?: string;
+  lastEventId?: string;
+}
+
+export class MessageEvent extends Event {
+  readonly data: any;
+  readonly origin: string;
+  readonly lastEventId: string;
+
+  constructor(type: string, eventInitDict?: MessageEventInit) {
+    super(type, {
+      bubbles: eventInitDict?.bubbles ?? false,
+      cancelable: eventInitDict?.cancelable ?? false,
+      composed: eventInitDict?.composed ?? false,
+    });
+
+    this.data = eventInitDict?.data ?? null;
+    this.origin = eventInitDict?.origin ?? "";
+    this.lastEventId = eventInitDict?.lastEventId ?? "";
+  }
+}
+
+export interface ErrorEventInit extends EventInit {
+  message?: string;
+  filename?: string;
+  lineno?: number;
+  colno?: number;
+  error?: any;
+}
+
+export class ErrorEvent extends Event {
+  readonly message: string;
+  readonly filename: string;
+  readonly lineno: number;
+  readonly colno: number;
+  readonly error: any;
+
+  constructor(type: string, eventInitDict?: ErrorEventInit) {
+    super(type, {
+      bubbles: eventInitDict?.bubbles ?? false,
+      cancelable: eventInitDict?.cancelable ?? false,
+      composed: eventInitDict?.composed ?? false,
+    });
+
+    this.message = eventInitDict?.message ?? "";
+    this.filename = eventInitDict?.filename ?? "";
+    this.lineno = eventInitDict?.lineno ?? 0;
+    this.colno = eventInitDict?.colno ?? 0;
+    this.error = eventInitDict?.error ?? null;
+  }
+}
+
 function encodeMessage(data: any): Uint8Array {
   const dataJson = JSON.stringify(data);
   return encoder.encode(dataJson);
@@ -27,16 +81,23 @@ function decodeMessage(dataIntArray: Uint8Array): any {
   return JSON.parse(dataJson);
 }
 
-interface WorkerEvent {
+interface WorkerHostError {
-  event: "error" | "msg" | "close";
+  message: string;
+  fileName?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+}
+
+interface WorkerHostMessage {
+  type: "terminalError" | "error" | "msg";
   data?: any;
-  error?: any;
+  error?: WorkerHostError;
 }
 
 export interface Worker {
-  onerror?: (e: any) => void;
+  onerror?: (e: ErrorEvent) => void;
-  onmessage?: (e: { data: any }) => void;
+  onmessage?: (e: MessageEvent) => void;
-  onmessageerror?: () => void;
+  onmessageerror?: (e: MessageEvent) => void;
   postMessage(data: any): void;
   terminate(): void;
 }
@@ -51,9 +112,9 @@ export class WorkerImpl extends EventTarget implements Worker {
   #name: string;
   #terminated = false;
 
-  public onerror?: (e: any) => void;
+  public onerror?: (e: ErrorEvent) => void;
-  public onmessage?: (data: any) => void;
+  public onmessage?: (e: MessageEvent) => void;
-  public onmessageerror?: () => void;
+  public onmessageerror?: (e: MessageEvent) => void;
 
   constructor(specifier: string, options?: WorkerOptions) {
     super();
@@ -95,30 +156,59 @@ export class WorkerImpl extends EventTarget implements Worker {
     this.#poll();
   }
 
-  #handleError = (e: any): boolean => {
+  #handleMessage = (msgData: any): void => {
-    // TODO: this is being handled in a type unsafe way, it should be type safe
+    let data;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    try {
-    const event = new Event("error", { cancelable: true }) as any;
+      data = decodeMessage(new Uint8Array(msgData));
-    event.message = e.message;
+    } catch (e) {
-    event.lineNumber = e.lineNumber ? e.lineNumber + 1 : null;
+      const msgErrorEvent = new MessageEvent("messageerror", {
-    event.columnNumber = e.columnNumber ? e.columnNumber + 1 : null;
+        cancelable: false,
-    event.fileName = e.fileName;
+        data,
-    event.error = null;
+      });
+      if (this.onmessageerror) {
+        this.onmessageerror(msgErrorEvent);
+      }
+      return;
+    }
+
+    const msgEvent = new MessageEvent("message", {
+      cancelable: false,
+      data,
+    });
+
+    if (this.onmessage) {
+      this.onmessage(msgEvent);
+    }
+
+    this.dispatchEvent(msgEvent);
+  };
+
+  #handleError = (e: WorkerHostError): boolean => {
+    const event = new ErrorEvent("error", {
+      cancelable: true,
+      message: e.message,
+      lineno: e.lineNumber ? e.lineNumber + 1 : undefined,
+      colno: e.columnNumber ? e.columnNumber + 1 : undefined,
+      filename: e.fileName,
+      error: null,
+    });
 
     let handled = false;
     if (this.onerror) {
       this.onerror(event);
+    }
+
+    this.dispatchEvent(event);
     if (event.defaultPrevented) {
       handled = true;
     }
-    }
 
     return handled;
   };
 
   #poll = async (): Promise<void> => {
     while (!this.#terminated) {
-      const event = await hostGetMessage(this.#id);
+      const event = (await hostGetMessage(this.#id)) as WorkerHostMessage;
 
       // If terminate was called then we ignore all messages
       if (this.#terminated) {
@@ -129,23 +219,20 @@ export class WorkerImpl extends EventTarget implements Worker {
 
       if (type === "terminalError") {
         this.#terminated = true;
-        if (!this.#handleError(event.error)) {
+        if (!this.#handleError(event.error!)) {
-          throw Error(event.error.message);
+          throw Error(event.error!.message);
         }
         continue;
       }
 
       if (type === "msg") {
-        if (this.onmessage) {
+        this.#handleMessage(event.data);
-          const message = decodeMessage(new Uint8Array(event.data));
-          this.onmessage({ data: message });
-        }
         continue;
       }
 
       if (type === "error") {
-        if (!this.#handleError(event.error)) {
+        if (!this.#handleError(event.error!)) {
-          throw Error(event.error.message);
+          throw Error(event.error!.message);
         }
         continue;
       }

cli/tests/subdir/event_worker.js

@@ -0,0 +1,7 @@
+onmessage = function (e) {
+  if (e.data === "boom") {
+    throw new Error("boom error!");
+  }
+
+  postMessage(e.data);
+};

cli/tests/workers_test.out

@@ -1,9 +1,10 @@
-running 6 tests
+running 7 tests
 test worker terminate ... ok [WILDCARD]
 test worker nested ... ok [WILDCARD]
 test worker throws when executing ... ok [WILDCARD]
 test worker fetch API ... ok [WILDCARD]
 test worker terminate busy loop ... ok [WILDCARD]
 test worker race condition ... ok [WILDCARD]
+test worker is event listener ... ok [WILDCARD]
 
-test result: ok. 6 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out [WILDCARD]
+test result: ok. 7 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out [WILDCARD]

cli/tests/workers_test.ts

@@ -184,3 +184,50 @@ Deno.test({
     await promise;
   },
 });
+
+Deno.test({
+  name: "worker is event listener",
+  fn: async function (): Promise<void> {
+    let messageHandlersCalled = 0;
+    let errorHandlersCalled = 0;
+
+    const promise1 = createResolvable();
+    const promise2 = createResolvable();
+
+    const worker = new Worker("../tests/subdir/event_worker.js", {
+      type: "module",
+    });
+
+    worker.onmessage = (_e: Event): void => {
+      messageHandlersCalled++;
+    };
+    worker.addEventListener("message", (_e: Event) => {
+      messageHandlersCalled++;
+    });
+    worker.addEventListener("message", (_e: Event) => {
+      messageHandlersCalled++;
+      promise1.resolve();
+    });
+
+    worker.onerror = (e): void => {
+      errorHandlersCalled++;
+      e.preventDefault();
+    };
+    worker.addEventListener("error", (_e: Event) => {
+      errorHandlersCalled++;
+    });
+    worker.addEventListener("error", (_e: Event) => {
+      errorHandlersCalled++;
+      promise2.resolve();
+    });
+
+    worker.postMessage("ping");
+    await promise1;
+    assertEquals(messageHandlersCalled, 3);
+
+    worker.postMessage("boom");
+    await promise2;
+    assertEquals(errorHandlersCalled, 3);
+    worker.terminate();
+  },
+});