Load web workers in a way that Webpack 5 can bundle them

src/BlurhashEncoder.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 // @ts-ignore - `.ts` is needed here to make TS happy
-import BlurhashWorker, { Request, Response } from "./workers/blurhash.worker.ts";
+import { Request, Response } from "./workers/blurhash.worker.ts";
 import { WorkerManager } from "./WorkerManager";
 
 export class BlurhashEncoder {
@@ -25,7 +25,9 @@ export class BlurhashEncoder {
         return BlurhashEncoder.internalInstance;
     }
 
-    private readonly worker = new WorkerManager<Request, Response>(BlurhashWorker);
+    private readonly worker = new WorkerManager<Request, Response>(
+        new Worker(new URL("./workers/blurhash.worker.ts", import.meta.url)),
+    );
 
     public getBlurhash(imageData: ImageData): Promise<string> {
         return this.worker.call({ imageData }).then((resp) => resp.blurhash);

src/WorkerManager.ts

@@ -23,8 +23,8 @@ export class WorkerManager<Request extends {}, Response> {
     private seq = 0;
     private pendingDeferredMap = new Map<number, IDeferred<Response>>();
 
-    public constructor(WorkerConstructor: { new (): Worker }) {
+    public constructor(worker: Worker) {
-        this.worker = new WorkerConstructor();
+        this.worker = worker;
         this.worker.onmessage = this.onMessage;
     }
 

src/audio/Playback.ts

@@ -20,7 +20,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { defer } from "matrix-js-sdk/src/utils";
 
 // @ts-ignore - `.ts` is needed here to make TS happy
-import PlaybackWorker, { Request, Response } from "../workers/playback.worker.ts";
+import { Request, Response } from "../workers/playback.worker.ts";
 import { UPDATE_EVENT } from "../stores/AsyncStore";
 import { arrayFastResample } from "../utils/arrays";
 import { IDestroyable } from "../utils/IDestroyable";
@@ -63,7 +63,9 @@ export class Playback extends EventEmitter implements IDestroyable, PlaybackInte
     private waveformObservable = new SimpleObservable<number[]>();
     private readonly clock: PlaybackClock;
     private readonly fileSize: number;
-    private readonly worker = new WorkerManager<Request, Response>(PlaybackWorker);
+    private readonly worker = new WorkerManager<Request, Response>(
+        new Worker(new URL("../workers/playback.worker.ts", import.meta.url)),
+    );
 
     /**
      * Creates a new playback instance from a buffer.

src/utils/createMatrixClient.ts

@@ -24,9 +24,6 @@ import {
     LocalStorageCryptoStore,
 } from "matrix-js-sdk/src/matrix";
 
-// @ts-ignore - `.ts` is needed here to make TS happy
-import IndexedDBWorker from "../workers/indexeddb.worker.ts";
-
 const localStorage = window.localStorage;
 
 // just *accessing* indexedDB throws an exception in firefox with
@@ -55,7 +52,7 @@ export default function createMatrixClient(opts: ICreateClientOpts): MatrixClien
             indexedDB: indexedDB,
             dbName: "riot-web-sync",
             localStorage,
-            workerFactory: () => new IndexedDBWorker(),
+            workerFactory: () => new Worker(new URL("../workers/indexeddb.worker.ts", import.meta.url)),
         });
     } else if (localStorage) {
         storeOpts.store = new MemoryStore({ localStorage });

test/WorkerManager-test.ts

@@ -19,7 +19,7 @@ import { WorkerManager } from "../src/WorkerManager";
 describe("WorkerManager", () => {
     it("should generate consecutive sequence numbers for each call", () => {
         const postMessage = jest.fn();
-        const manager = new WorkerManager(jest.fn(() => ({ postMessage } as unknown as Worker)));
+        const manager = new WorkerManager({ postMessage } as unknown as Worker);
 
         manager.call({ data: "One" });
         manager.call({ data: "Two" });
@@ -37,7 +37,7 @@ describe("WorkerManager", () => {
     it("should support resolving out of order", async () => {
         const postMessage = jest.fn();
         const worker = { postMessage } as unknown as Worker;
-        const manager = new WorkerManager(jest.fn(() => worker));
+        const manager = new WorkerManager(worker);
 
         const oneProm = manager.call({ data: "One" });
         const twoProm = manager.call({ data: "Two" });