Allow using Rayon on the main thread

Starting with rayon 1.8.1 / rayon-core 1.12.1, Rayon has a web_spin_lock feature powered by wasm-sync that allows blocking on the main thread via spinning - same workaround for forbidden `atomics.wait` as used in e.g. Emscripten. rayon-rs/rayon#1110

We can leverage it and simplify instructions, tests and the demo to avoid an extra worker.

Author: RReverser

Cargo.lock

@@ -11,10 +11,14 @@ readme = "README.md"
 exclude = [".github"]
 repository = "https://github.com/RReverser/wasm-bindgen-rayon"
 
-[dependencies]
+[workspace.dependencies]
 wasm-bindgen = "0.2.84"
-rayon-core = "1.12"
-spmc = "0.3.0"
+rayon = "1.8.1"
+
+[dependencies]
+wasm-bindgen = { workspace = true }
+rayon-core = { version = "1.12.1", features = ["web_spin_lock"] }
+crossbeam-channel = "0.5.9"
 js-sys = "0.3.48"
 
 [workspace]

Cargo.toml

@@ -31,13 +31,9 @@ For a quick demo, check out <https://rreverser.com/wasm-bindgen-rayon-demo/>.
 
 Before we get started, check out caveats listed in the [wasm-bindgen threading docs](https://rustwasm.github.io/wasm-bindgen/examples/raytrace.html). While this library specifically targets Rayon and automatically provides the necessary shims for you, some of the caveats still apply.
 
-Most notably, even when you're using multithreading, the main thread still **can't be blocked** while waiting for the Rayon pool to get ready or for all the background operations to finish.
-
-You must instantiate the main JS+Wasm in a dedicated `Worker` to avoid blocking the main thread - that is, don't mix UI and Rayon code together. Instead, use a library like [Comlink](https://github.com/GoogleChromeLabs/comlink) or a custom glue code to expose required wasm-bindgen methods to the main thread, and do the UI work from there.
-
 ## Setting up
 
-First of all, in order to use `SharedArrayBuffer` on the Web, you need to enable [cross-origin isolation policies](https://web.dev/coop-coep/). Check out the linked article for details.
+In order to use `SharedArrayBuffer` on the Web, you need to enable [cross-origin isolation policies](https://web.dev/coop-coep/). Check out the linked article for details.
 
 Then, add this crate as a dependency to your `Cargo.toml` (in addition to `wasm-bindgen` and `rayon` themselves):
 
@@ -194,8 +190,6 @@ If you want to build this library for usage without bundlers, enable the `no-bun
 wasm-bindgen-rayon = { version = "1.0", features = ["no-bundler"] }
 ```
 
-Note that, in addition to the earlier mentioned restrictions, this will work out of the box only in browsers with [support for Module Workers](https://caniuse.com/mdn-api_worker_worker_ecmascript_modules). To ensure that it works in all browsers, either bundle your code for production, or include [module-workers-polyfill](https://unpkg.com/module-workers-polyfill) on the same page.
-
 # License
 
 This crate is licensed under the Apache-2.0 license.

README.md

@@ -10,8 +10,8 @@ crate-type = ["cdylib"]
 
 [dependencies]
 wasm-bindgen-rayon = { path = "..", optional = true }
-wasm-bindgen = "0.2.74"
-rayon = { version = "1.8", optional = true }
+wasm-bindgen = { workspace = true }
+rayon = { workspace = true, optional = true }
 num-complex = "0.4.0"
 once_cell = "1.7.2"
 getrandom = { version = "0.2.2", features = ["js"] }

demo/Cargo.toml

@@ -11,35 +11,27 @@
  * limitations under the License.
  */
 
-import * as Comlink from 'comlink';
+import { threads } from 'wasm-feature-detect';
 
 const maxIterations = 1000;
 
-const canvas = document.getElementById('canvas');
+const canvas = /** @type {HTMLCanvasElement} */ (
+  document.getElementById('canvas')
+);
 const { width, height } = canvas;
 const ctx = canvas.getContext('2d');
-const timeOutput = document.getElementById('time');
+const timeOutput = /** @type {HTMLOutputElement} */ (
+  document.getElementById('time')
+);
 
-// Create a separate thread from wasm-worker.js and get a proxy to its handlers.
-let handlers = await Comlink.wrap(
-  new Worker(new URL('./wasm-worker.js', import.meta.url), {
-    type: 'module'
-  })
-).handlers;
-
-function setupBtn(id) {
-  // Handlers are named in the same way as buttons.
-  let handler = handlers[id];
-  // If handler doesn't exist, it's not supported.
-  if (!handler) return;
+function setupBtn(id, { generate }) {
   // Assign onclick handler + enable the button.
   Object.assign(document.getElementById(id), {
     async onclick() {
-      let { rawImageData, time } = await handler({
-        width,
-        height,
-        maxIterations
-      });
+      const start = performance.now();
+      const rawImageData = generate(width, height, maxIterations);
+      const time = performance.now() - start;
+
       timeOutput.value = `${time.toFixed(2)} ms`;
       const imgData = new ImageData(rawImageData, width, height);
       ctx.putImageData(imgData, 0, 0);
@@ -48,7 +40,16 @@ function setupBtn(id) {
   });
 }
 
-setupBtn('singleThread');
-if (await handlers.supportsThreads) {
-  setupBtn('multiThread');
-}
+(async function initSingleThread() {
+  const singleThread = await import('./pkg/wasm_bindgen_rayon_demo.js');
+  await singleThread.default();
+  setupBtn('singleThread', singleThread);
+})();
+
+(async function initMultiThread() {
+  if (!(await threads())) return;
+  const multiThread = await import('./pkg-parallel/wasm_bindgen_rayon_demo.js');
+  await multiThread.default();
+  await multiThread.initThreadPool(navigator.hardwareConcurrency);
+  setupBtn('multiThread', multiThread);
+})();

demo/index.js

@@ -19,8 +19,8 @@
 #[cfg(all(not(doc), not(target_feature = "atomics")))]
 compile_error!("Did you forget to enable `atomics` and `bulk-memory` features as outlined in wasm-bindgen-rayon README?");
 
+use crossbeam_channel::{bounded, Receiver, Sender};
 use js_sys::Promise;
-use spmc::{channel, Receiver, Sender};
 use wasm_bindgen::prelude::*;
 use wasm_bindgen::JsValue;
 
@@ -60,7 +60,7 @@ fn _ensure_worker_emitted() {
 #[wasm_bindgen]
 impl wbg_rayon_PoolBuilder {
     fn new(num_threads: usize) -> Self {
-        let (sender, receiver) = channel();
+        let (sender, receiver) = bounded(num_threads);
         Self {
             num_threads,
             sender,

demo/wasm-worker.js

@@ -10,5 +10,5 @@ crate-type = ["cdylib"]
 
 [dependencies]
 wasm-bindgen-rayon = { path = ".." }
-wasm-bindgen = "0.2.74"
-rayon = "1.8"
+wasm-bindgen = { workspace = true }
+rayon = { workspace = true }

src/lib.rs

@@ -11,10 +11,18 @@
  * limitations under the License.
  */
 
+import init, { initThreadPool, sum } from './pkg/test.js';
+
+await init();
+await initThreadPool(navigator.hardwareConcurrency);
+// 1...10
+let arr = Int32Array.from({ length: 10 }, (_, i) => i + 1);
+if (sum(arr) !== 55) {
+  throw new Error('Wrong result.');
+}
+
 // Note: this will be overridden by the Playwright test runner.
 // The default implementation is provided only for manual testing.
 globalThis.onDone ??= () => console.log('OK');
 
-new Worker(new URL('./index.worker.js', import.meta.url), {
-  type: 'module'
-}).addEventListener('message', globalThis.onDone);
+onDone();