Call web worker as simple typed class methods. And make DOM events available for worker.

Requirements:

npm install worker-typescript-connector --save

and worker-loader to start worker:

npm install worker-loader --save-dev

How to use:

For example we have ExampleClass - this is the Class that we want to run inside worker, and it implements example ExampleInterface

example-class.ts:

import { ExampleInterface } from './example-interface.ts';

export class ExampleClass implements ExampleInterface {
  
  myMethodOne(someArgument: number): void {
    ...some code here
  }
  myMethodTwo(someArgument: string, anotherArgument: boolean): void {
     ...some sode here
  }
  
  async myMethodWithSharedData(someArgument: string, offscreenCanvas: OffscreenCanvas): Promise<string> {
    return `some result string ${someArgument}`;
  }
}

example-interface.ts:

export interface ExampleInterface {
  myMethodOne(someArgument: number): void;
  myMethodTwo(someArgument: string, anotherArgument: boolean): void;
  myMethodWithSharedData(someArgument: string, offscreenCanvas: OffscreenCanvas): Promise<string>;
}

Now create worker client - with just method declarations (empty implementation)

client.ts:

import Worker from 'worker-loader!./worker';
import { WorkerClientBase, AutowiredMethodWithSharedData, AutowiredMethod } from 'worker-typescript-connector';
import { ExampleInterface } from './example-interface';

export class ExampleWorkerClient extends WorkerClientBase implements ExampleInterface {
  constructor() {
    super(new Worker());
  }

  /* 
   *  Call next methods annotated with @AutowiredMethod will be translated to worker calls with all arguments
   *  Implementation do not needed
   *  
   *  Call methods annotated with @AutowiredMethodWithSharedData will also pass shared data as OffscreenCanvas/ArrayBuffers and etc to worker
   */

  @AutowiredMethod
  myMethodOne(): void {}
  
  @AutowiredMethod
  myMethodTwo(): void {}
 
  @AutowiredMethodWithSharedData
  myMethodWithSharedData(): Promise<string> { return null; }

and worker.ts:

 import { startWorkerInterfaceFor } from 'worker-typescript-connector/dist/src/lib/worker-base';
 import { ExampleClass } from './example-class';
 
 const exampleClass = new ExampleClass();
 
 startWorkerInterfaceFor(exampleClass);

Just it, now, when call ExampleWorkerClient methods it will be called inside worker and return results back:

...

async function test() {
    const exampleWorkerClient = new ExampleWorkerClient();
    
    exampleWorkerClient.myMethodOne(1);

    exampleWorkerClient.myMethodTwo('string...', true);

    console.log(await exampleWorkerClient.myMethodWithSharedData('test', canvas)); // Will print "some result string test"
}

...

NPM: npmjs.com/package/worker-typescript-connector