From 84d7d43a0d2486cdde461cdaf469a9910e3e6144 Mon Sep 17 00:00:00 2001
From: Johannes Marbach <johannesm@element.io>
Date: Sat, 11 Nov 2023 16:03:08 +0100
Subject: [PATCH] Load web workers in a way that Webpack 5 can bundle them

---
 src/BlurhashEncoder.ts          | 6 ++++--
 src/WorkerManager.ts            | 4 ++--
 src/audio/Playback.ts           | 6 ++++--
 src/utils/createMatrixClient.ts | 5 +----
 test/WorkerManager-test.ts      | 4 ++--
 5 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/BlurhashEncoder.ts b/src/BlurhashEncoder.ts
index 89ed2b56e5..30c1bc80d1 100644
--- a/src/BlurhashEncoder.ts
+++ b/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);
diff --git a/src/WorkerManager.ts b/src/WorkerManager.ts
index 5dcb56c610..2ad5191b24 100644
--- a/src/WorkerManager.ts
+++ b/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 }) {
-        this.worker = new WorkerConstructor();
+    public constructor(worker: Worker) {
+        this.worker = worker;
         this.worker.onmessage = this.onMessage;
     }
 
diff --git a/src/audio/Playback.ts b/src/audio/Playback.ts
index 43cbf904c0..bd45703d2e 100644
--- a/src/audio/Playback.ts
+++ b/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.
diff --git a/src/utils/createMatrixClient.ts b/src/utils/createMatrixClient.ts
index 1bcfcba19e..77dc7ef25c 100644
--- a/src/utils/createMatrixClient.ts
+++ b/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 });
diff --git a/test/WorkerManager-test.ts b/test/WorkerManager-test.ts
index 39057ee04d..8d02c0619a 100644
--- a/test/WorkerManager-test.ts
+++ b/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" });