Skip to content
Move a WebAssembly module into its own thread
JavaScript WebAssembly
Branch: master
Clone or download
mbasso Merge pull request #4 from mbasso/run_js_function
Run js functions into the worker
Latest commit c22ccf1 Nov 2, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github initial commit Sep 12, 2018
src fix linting Oct 29, 2018
test fix linting Oct 29, 2018
.babelrc fix comments Sep 20, 2018
.editorconfig initial commit Sep 12, 2018
.eslintignore initial commit Sep 12, 2018
.eslintrc fix linting Oct 29, 2018
.gitignore initial commit Sep 12, 2018
.travis.yml initial commit Sep 12, 2018
CHANGELOG.md initial commit Sep 12, 2018
CODE_OF_CONDUCT.md initial commit Sep 12, 2018
CONTRIBUTING.md initial commit Sep 12, 2018
LICENSE.md initial commit Sep 12, 2018
README.md fix types Oct 30, 2018
package.json version 0.4.0 Nov 2, 2018
webpack.config.js initial commit Sep 12, 2018

README.md

wasm-worker

Build Status npm version npm downloads MIT Donate

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.

Installation

You can install wasm-worker using npm:

npm install --save wasm-worker

If you aren't using npm in your project, you can include wasmWorker using UMD build in the dist folder with <script> tag.

Usage

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

API

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>

Browser support

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 {
    ...
}

CSP

If your app has a Content-Security-Policy, wasm-worker require worker-src data: and script-src data: in your config.

Inspiration

This project is inspired by greenlet.

Change Log

This project adheres to Semantic Versioning.
Every release, along with the migration instructions, is documented on the Github Releases page.

Authors

Matteo Basso

Copyright and License

Copyright (c) 2018, Matteo Basso.

wasm-worker source code is licensed under the MIT License.

You can’t perform that action at this time.