wasm-bindgen-rayon is an adapter for enabling Rayon-based concurrency on the Web with WebAssembly (via wasm-bindgen, Web Workers and SharedArrayBuffer support).
WebAssembly thread support is not yet a first-class citizen in Rust - it's still only available in nightly - so there are a few things to keep in mind when using this crate. Bear with me :)
For a quick demo, check out this Mandelbrot fractal generator:
|
|
|
In order to use SharedArrayBuffer on the Web, you need to enable cross-origin isolation policies. Check out the linked article for details.
Then, add wasm-bindgen, rayon, and this crate as dependencies to your Cargo.toml:
[dependencies]
wasm-bindgen = "0.2"
rayon = "1.8"
wasm-bindgen-rayon = "1.2"Then, reexport the init_thread_pool function:
pub use wasm_bindgen_rayon::init_thread_pool;
// ...This will expose an async initThreadPool function in the final generated JavaScript for your library.
You'll need to invoke it right after instantiating your module on the main thread in order to prepare the threadpool before calling into actual library functions:
import init, { initThreadPool /* ... */ } from './pkg/index.js';
// Regular wasm-bindgen initialization.
await init();
// Thread pool initialization with the given number of threads
// (pass `navigator.hardwareConcurrency` if you want to use all cores).
await initThreadPool(navigator.hardwareConcurrency);
// ...now you can invoke any exported functions as you normally wouldUse Rayon iterators as you normally would, e.g.
#[wasm_bindgen]
pub fn sum(numbers: &[i32]) -> i32 {
numbers.par_iter().sum()
}will accept an Int32Array from JavaScript side and calculate the sum of its values using all available threads.
First limitation to note is that you'll have to use wasm-bindgen/wasm-pack's web target (--target web).
Why?
This is because the Wasm code needs to take its own object (the WebAssembly.Module) and share it with other threads when spawning them. This object is only accessible from the --target web and --target no-modules outputs, but we further restrict it to only --target web as we also use JS snippets feature.
The other issue is that the Rust standard library for the WebAssembly target is built without threads support to ensure maximum portability.
Since we want standard library to be thread-safe and std::sync APIs to work, you'll need to use the nightly compiler toolchain and pass some flags to rebuild the standard library in addition to your own code.
In order to reduce risk of breakages, it's strongly recommended to use a fixed nightly version. This crate was tested with nightly-2024-08-02.
The easiest way to configure those flags is:
- Put the following in a
rust-toolchain.tomlfile in your project directory:
[toolchain]
channel = "nightly-2024-08-02"
components = ["rust-src"]
targets = ["wasm32-unknown-unknown"]This tells rustup to use a fixed nightly toolchain with the wasm-target for your project, and to install rust-src, which is required for build-std.
2. Put the following in a .cargo/config.toml file in your project directory:
[target.wasm32-unknown-unknown]
rustflags = ["-C", "target-feature=+atomics,+bulk-memory,+mutable-globals"]
[unstable]
build-std = ["panic_abort", "std"]This tells Cargo to rebuild the standard library with support for Wasm atomics.
Then, run wasm-pack as you normally would with --target web:
wasm-pack build --target web [...normal wasm-pack params...]If you prefer not to configure those parameters by default, you can pass them as part of the build command itself.
In that case, the whole command looks like this:
RUSTFLAGS='-C target-feature=+atomics,+bulk-memory,+mutable-globals' \
rustup run nightly-2024-08-02 \
wasm-pack build --target web [...] \
-- -Z build-std=panic_abort,stdIt looks a bit scary, but it takes care of everything - choosing the nightly toolchain, enabling the required features as well as telling Cargo to rebuild the standard library. You only need to copy it once and hopefully forget about it :)
WebAssembly threads use Web Workers under the hood for instantiating other threads with the same WebAssembly module & memory.
wasm-bindgen-rayon provides the required JS code for those Workers internally, and uses a syntax that is recognised across various bundlers.
If you're using Webpack v5 (version >= 5.25.1), you don't need to do anything special, as it already supports bundling Workers out of the box.
Parcel v2 also recognises the used syntax and works out of the box.
For Rollup, you'll need @surma/rollup-plugin-off-main-thread plugin (version >= 2.1.0) which brings the same functionality and was tested with this crate.
Alternatively, you can use Vite which has necessary plugins built-in.
The default JS glue was designed in a way that works great with bundlers and code-splitting, but, sadly, not in browsers due to different treatment of import paths (see WICG/import-maps#244).
If you want to build this library for usage without bundlers, enable the no-bundler feature for wasm-bindgen-rayon in your Cargo.toml:
wasm-bindgen-rayon = { version = "1.2", features = ["no-bundler"] }If you're targeting older browser versions that didn't support WebAssembly threads yet, you'll likely want to make two builds - one with threads support and one without - and use feature detection to choose the right one on the JavaScript side.
You can use wasm-feature-detect library for this purpose. The code will look roughly like this:
import { threads } from 'wasm-feature-detect';
let wasmPkg;
if (await threads()) {
wasmPkg = await import('./pkg-with-threads/index.js');
await wasmPkg.default();
await wasmPkg.initThreadPool(navigator.hardwareConcurrency);
} else {
wasmPkg = await import('./pkg-without-threads/index.js');
await wasmPkg.default();
}
wasmPkg.nowCallAnyExportedFuncs();This crate is licensed under the Apache-2.0 license.