build web worker example with target web

examples/wasm-in-web-worker/Cargo.toml

@@ -21,6 +21,8 @@ features = [
   'MessageEvent',
   'Window',
   'Worker',
+  'WorkerOptions',
+  'WorkerType',
 ]
 path = "../../crates/web-sys"
 

examples/wasm-in-web-worker/build.sh

@@ -2,6 +2,4 @@
 
 set -ex
 
-# This example requires to *not* create ES modules, therefore we pass the flag
-# `--target no-modules`
-wasm-pack build --target no-modules
+wasm-pack build --target web

examples/wasm-in-web-worker/index.html

@@ -14,11 +14,10 @@ <h1>Main Thread/Wasm Web Worker Interaction</h1>
         <div id="resultField"></div>
     </div>
 
-    <!-- Make `wasm_bindgen` available for `index.js` -->
-    <script src='./pkg/wasm_in_web_worker.js'></script>
-    <!-- Note that there is no `type="module"` in the script tag -->
-    <script src="./index.js"></script>
+    <script type="module" src="./index.js"></script>
+</body>
 
+</html>
 </body>
 
 </html>

examples/wasm-in-web-worker/index.js

@@ -1,12 +1,9 @@
-// We only need `startup` here which is the main entry point
-// In theory, we could also use all other functions/struct types from Rust which we have bound with
-// `#[wasm_bindgen]`
-const {startup} = wasm_bindgen;
+// Use ES module import syntax to import functionality from the module
+// that we have compiled.
+import init, { startup } from './pkg/wasm_in_web_worker.js';
 
 async function run_wasm() {
-    // Load the Wasm file by awaiting the Promise returned by `wasm_bindgen`
-    // `wasm_bindgen` was imported in `index.html`
-    await wasm_bindgen();
+    await init();
 
     console.log('index.js loaded');
 

examples/wasm-in-web-worker/src/lib.rs

@@ -1,7 +1,9 @@
 use std::cell::RefCell;
 use std::rc::Rc;
 use wasm_bindgen::prelude::*;
-use web_sys::{console, HtmlElement, HtmlInputElement, MessageEvent, Worker};
+use web_sys::{
+    console, HtmlElement, HtmlInputElement, MessageEvent, Worker, WorkerOptions, WorkerType,
+};
 
 /// A number evaluation struct
 ///
@@ -45,7 +47,11 @@ pub fn startup() {
     // able to interact with the code in the worker. Therefore, we wrap it in
     // `Rc<RefCell>` following the interior mutability pattern. Here, it would
     // not be needed but we include the wrapping anyway as example.
-    let worker_handle = Rc::new(RefCell::new(Worker::new("./worker.js").unwrap()));
+    let worker_options = WorkerOptions::new();
+    worker_options.set_type(WorkerType::Module);
+    let worker_handle = Rc::new(RefCell::new(
+        Worker::new_with_options("./worker.js", &worker_options).unwrap(),
+    ));
     console::log_1(&"Created a new worker from within Wasm".into());
 
     // Pass the worker to the function which sets up the `oninput` callback.

examples/wasm-in-web-worker/worker.js

@@ -1,17 +1,17 @@
+// Use ES module import syntax to import functionality from the module
+// that we have compiled.
+//
 // The worker has its own scope and no direct access to functions/objects of the
-// global scope. We import the generated JS file to make `wasm_bindgen`
-// available which we need to initialize our Wasm code.
-importScripts('./pkg/wasm_in_web_worker.js');
+// global scope. 
+import init, { NumberEval } from './pkg/wasm_in_web_worker.js';
+
 
 console.log('Initializing worker')
 
-// In the worker, we have a different struct that we want to use as in
-// `index.js`.
-const {NumberEval} = wasm_bindgen;
 
 async function init_wasm_in_worker() {
-    // Load the Wasm file by awaiting the Promise returned by `wasm_bindgen`.
-    await wasm_bindgen('./pkg/wasm_in_web_worker_bg.wasm');
+    // Load the Wasm file.
+    await init();
 
     // Create a new object of the `NumberEval` struct.
     var num_eval = NumberEval.new();

guide/src/examples/wasm-in-web-worker.md

@@ -8,13 +8,6 @@ A simple example of parallel execution by spawning a web worker with `web_sys`,
 loading Wasm code in the web worker and interacting between the main thread and
 the worker.
 
-## Building & compatibility
-
-At the time of this writing, only Chrome supports modules in web workers, e.g.
-Firefox does not. To have compatibility across browsers, the whole example is
-set up without relying on ES modules as target. Therefore we have to build
-with `--target no-modules`. The full command can be found in `build.sh`.
-
 ## `Cargo.toml`
 
 The `Cargo.toml` enables features necessary to work with the DOM, log output to