Move a WebAssembly module into its own thread
wasm-worker only supports browser environments, since it uses Web Workers. For use in a NodeJS environment, Web Workers must be polyfilled using a library like node-webworker.
You can install wasm-worker using npm:
npm install --save wasm-workerIf you aren't using npm in your project, you can include wasmWorker using UMD build in the dist folder with <script> tag.
Once you have installed wasm-worker, supposing a CommonJS environment, you can import and use it in this way:
import wasmWorker from 'wasm-worker';
// supposing an "add.wasm" module that exports a single function "add"
wasmWorker('add.wasm')
.then(module => {
return module.exports.add(1, 2);
})
.then(sum => {
console.log('1 + 2 = ' + sum);
})
.catch(ex => {
// ex is a string that represents the exception
console.error(ex);
});
// you can also run js functions inside the worker
// to access importObject for example
wasmWorker('add.wasm')
.then(module => {
return module.run(({
// module,
// importObject,
instance,
params
}) => {
// here is sync
const sum = instance.exports.add(...params);
return '1 + 2 = ' + sum;
}, [1, 2]);
})
.then(result => {
console.log(result);
});type JsCallback = (context: {
module: WebAssembly.Module,
instance: WebAssembly.Instance,
importObject: importObject,
params: any,
}) => any;
type WasmWorkerModule = {
exports: {
[export: string]: (...any: Array<any>) => Promise<any>
},
// run a js function inside the worker and provides it the given params
// ⚠️ Caveat: the function you pass cannot rely on its surrounding scope, since it is executed in an isolated context.
// Please use the "params" parameter to provide some values to the callback
run: (callback: JsCallback, params?: any) => Promise<any>
};
type Options = {
// the first 3 properties are used to create the Web Worker
// https://developer.mozilla.org/en-US/docs/Web/API/Worker/Worker#Parameters
name: string,
type: 'classic' | 'module',
credentials: 'omit' | 'same-origin' | 'include',
// the getImportObject function is used to get the options to instantiate the WebAssembly Module
// ⚠️ Caveat: the function you pass cannot rely on its surrounding scope, since it is executed in an isolated context.
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiate#Primary_overload_%E2%80%94_taking_wasm_binary_code
getImportObject: () => importObject,
};
wasmWorker(url: string, options?: Options): Promise<WasmWorkerModule> // browser only
wasmWorker(bufferSource: TypedArray | ArrayBuffer, options?: Options): Promise<WasmWorkerModule>wasm-worker uses fetch, Worker and obviously WebAssembly APIs, they are broadly supported by major browser engines but you would like to polyfill them to support old versions.
if (!window.fetch || !window.Worker || !window.WebAssembly) {
...
} else {
...
}If your app has a Content-Security-Policy,
wasm-worker require worker-src data: and script-src data: in your config.
This project is inspired by greenlet.
This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.
Matteo Basso
Copyright (c) 2018, Matteo Basso.
wasm-worker source code is licensed under the MIT License.