Improve fend-web worker/wasm integration

Author: printfn

telegram-bot/build.sh

@@ -5,7 +5,7 @@ cd "$(dirname "$0")"
 rm -rfv ../wasm/pkg
 (cd ../wasm && wasm-pack build)
 
-npm install
+npm ci
 npm exec tsc
 node --experimental-strip-types esbuild.ts
 

web/build.sh

@@ -8,8 +8,8 @@ if ! type magick &>/dev/null; then
 	alias magick=convert
 fi
 
-rm -rf ../wasm/pkg-fend-web
-(cd ../wasm && wasm-pack build --target web --out-dir pkg-fend-web)
+rm -rf ../wasm/pkg
+(cd ../wasm && wasm-pack build)
 
 npm ci
 npm run lint

web/package-lock.json

@@ -12,7 +12,7 @@
 		"lint": "eslint ."
 	},
 	"dependencies": {
-		"fend-wasm": "file:../wasm/pkg-fend-web",
+		"fend-wasm": "file:../wasm/pkg",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-svg-spinners": "^0.3.1"
@@ -32,12 +32,16 @@
 		"prettier": "^3.4.2",
 		"typescript": "^5.7.2",
 		"typescript-eslint": "^8.17.0",
-		"vite": "^6.0.3"
+		"vite": "^6.0.3",
+		"vite-plugin-wasm": "^3.3.0"
 	},
 	"overrides": {
 		"react-svg-spinners": {
 			"react": "$react",
 			"react-dom": "$react-dom"
+		},
+		"vite-plugin-wasm": {
+			"vite": "$vite"
 		}
 	},
 	"repository": {

web/package.json

@@ -3,39 +3,76 @@ import type { FendArgs, FendResult } from './worker';
 import MyWorker from './worker?worker';
 
 let exchangeRateCache: Map<string, number> | null = null;
-type WorkerCache = { worker: Worker; active: boolean; resolve: (fr: FendResult) => void };
-let workerCache: WorkerCache | null = null;
+type State = 'new' | 'ready' | 'busy';
+class WorkerCache {
+	worker!: Worker;
+	state!: State;
+	initialisedPromise!: Promise<void>;
+	resolveDone?: (r: FendResult) => void;
+	rejectError?: (e: Error) => void;
+
+	init() {
+		this.state = 'new';
+		this.worker = new MyWorker({
+			name: 'fend worker',
+		});
+		let resolveInitialised: () => void;
+		this.initialisedPromise = new Promise<void>(resolve => {
+			resolveInitialised = resolve;
+		});
+		this.worker.onmessage = (e: MessageEvent<FendResult | 'ready'>) => {
+			this.state = 'ready';
+			if (e.data === 'ready') {
+				resolveInitialised();
+			} else {
+				this.resolveDone?.(e.data);
+			}
+		};
+		this.worker.onerror = e => {
+			this.state = 'ready';
+			this.rejectError?.(new Error(e.message, { cause: e }));
+		};
+		this.worker.onmessageerror = e => {
+			this.state = 'ready';
+			this.rejectError?.(new Error('received messageerror event', { cause: e }));
+		};
+	}
+
+	constructor() {
+		this.init();
+	}
+
+	async query(args: FendArgs) {
+		if (this.state === 'new') {
+			await this.initialisedPromise;
+		}
+		if (this.state === 'busy') {
+			console.log('terminating existing worker');
+			this.worker.terminate();
+			this.resolveDone?.({ ok: false, message: 'cancelled' });
+			this.init();
+			await this.initialisedPromise;
+		}
+		if (this.state !== 'ready') {
+			throw new Error('unexpected worker state: ' + this.state);
+		}
+		const p = new Promise<FendResult>((resolve, reject) => {
+			this.resolveDone = resolve;
+			this.rejectError = reject;
+		});
+		this.state = 'busy';
+		this.worker.postMessage(args);
+		return await p;
+	}
+}
+const workerCache = new WorkerCache();
 
 export async function fend(input: string, timeout: number, variables: string): Promise<FendResult> {
 	try {
 		const currencyData = exchangeRateCache || (await getExchangeRates());
 		exchangeRateCache = currencyData;
-		return await new Promise<FendResult>((resolve, reject) => {
-			const args: FendArgs = { input, timeout, variables, currencyData };
-			const w = workerCache || { worker: new MyWorker(), active: false, resolve };
-			if (w.active) {
-				w.worker.terminate();
-				w.resolve({ ok: false, message: 'cancelled' });
-				w.worker = new MyWorker();
-				w.active = false;
-			}
-			w.resolve = resolve;
-			w.worker.onmessage = (e: MessageEvent<FendResult>) => {
-				if (workerCache) {
-					workerCache.active = false;
-				}
-				resolve(e.data);
-			};
-			w.worker.onerror = e => {
-				if (workerCache) {
-					workerCache.active = false;
-				}
-				reject(new Error(e.message));
-			};
-			workerCache = w;
-			w.active = true;
-			w.worker.postMessage(args);
-		});
+		const args: FendArgs = { input, timeout, variables, currencyData };
+		return await workerCache.query(args);
 	} catch (e) {
 		console.error(e);
 		alert('Failed to initialise WebAssembly');

web/src/lib/fend.ts

@@ -1,4 +1,4 @@
-import { evaluateFendWithVariablesJson, default as initWasm, initialiseWithHandlers } from 'fend-wasm';
+import { evaluateFendWithVariablesJson, initialiseWithHandlers } from 'fend-wasm';
 
 export type FendArgs = {
 	input: string;
@@ -9,10 +9,17 @@ export type FendArgs = {
 
 export type FendResult = { ok: true; result: string; variables: string } | { ok: false; message: string };
 
-const eventListener = async ({ data }: MessageEvent<FendArgs>) => {
-	await initWasm();
-	initialiseWithHandlers(data.currencyData);
-	const result = JSON.parse(evaluateFendWithVariablesJson(data.input, data.timeout, data.variables)) as FendResult;
-	postMessage(result);
-};
-self.addEventListener('message', (ev: MessageEvent<FendArgs>) => void eventListener(ev));
+function eventListener({ data }: MessageEvent<FendArgs>) {
+	try {
+		initialiseWithHandlers(data.currencyData);
+		const result = JSON.parse(evaluateFendWithVariablesJson(data.input, data.timeout, data.variables)) as FendResult;
+		postMessage(result);
+	} catch (e: unknown) {
+		console.error(e);
+		throw e;
+	}
+}
+self.addEventListener('message', (ev: MessageEvent<FendArgs>) => {
+	eventListener(ev);
+});
+postMessage('ready');

web/src/lib/worker.ts

@@ -1,5 +1,6 @@
 import { resolve } from 'node:path';
 import react from '@vitejs/plugin-react';
+import wasm from 'vite-plugin-wasm';
 import { defineConfig, searchForWorkspaceRoot } from 'vite';
 
 const ReactCompilerConfig = {};
@@ -17,7 +18,13 @@ export default defineConfig({
 		sourcemap: true,
 		target: 'esnext',
 	},
+	worker: {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+		plugins: () => [wasm()],
+		format: 'es',
+	},
 	plugins: [
+		wasm(),
 		react({
 			babel: {
 				plugins: [['babel-plugin-react-compiler', ReactCompilerConfig]],