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

This commit is contained in:
Johannes Marbach 2023-11-11 16:03:08 +01:00
parent cfd5165cd8
commit 84d7d43a0d
5 changed files with 13 additions and 12 deletions

View file

@ -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);

View file

@ -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;
}

View file

@ -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.

View file

@ -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 });

View file

@ -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" });