Merge branch 'hello-wasm2es6js' of https://github.com/sophiebits/wasm-bindgen

README.md

@@ -221,13 +221,15 @@ $ npm run serve
 ```
 
 If you open https://localhost:8080 in a browser you should see a `Hello, world!`
-dialog pop up!
+dialog pop up! This works in Firefox out of the box but not in Chrome due to a
+webpack issue. See [the hello_world README][hello-readme] for a workaround.
 
 If that was all a bit much, no worries! You can [follow along
 online][hello-tree] to see all the files necessary as well as a script to set it
 all up.
 
 [hello-tree]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world
+[hello-readme]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world/README.md
 
 ## What just happened?
 

examples/hello_world/.gitignore

@@ -1,3 +1,4 @@
 package-lock.json
 hello_world.js
+hello_world_wasm.js
 hello_world_wasm.wasm

examples/hello_world/README.md

@@ -12,3 +12,7 @@ $ ./build.sh
 (or running the two commands on Windows manually)
 
 and then opening up `index.html` in a web browser should show a dialog!
+
+In Chrome, you'll need to delete hello_world_wasm.wasm after building (or
+change hello_world.js to import hello_world_wasm.js instead) and uncomment the
+relevant line in index.js to work around a webpack bug.

examples/hello_world/build.sh

@@ -15,6 +15,16 @@ cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
   ../../target/wasm32-unknown-unknown/release/hello_world.wasm --out-dir .
 # wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
 
+# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
+# convert the .wasm module to a .js module that embeds the wasm bytecode. To
+# enable this, delete hello_world_wasm.wasm after building or change
+# hello_world.js to import from hello_world_wasm.js explicitly and uncomment
+# the relevant line in index.js.
+cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
+  --bin wasm2es6js -- \
+  --base64 -o hello_world_wasm.js hello_world_wasm.wasm
+# wasm2es6js --base64 -o hello_world_wasm.js hello_world_wasm.wasm
+
 # Finally, package everything up using Webpack and start a server so we can
 # browse the result
 npm install

examples/hello_world/index.js

@@ -3,6 +3,15 @@
 // will work here one day as well!
 const js = import("./hello_world");
 
-js.then(js => {
+Promise.all([
+  js,
+
+  // Due to https://github.com/webpack/webpack/issues/6475, Webpack does not
+  // support sync wasm imports larger than 4kB in Chrome. We use wasm2es6js to
+  // hack around this and need to defer our call until the converted wasm
+  // module is asynchronously loaded. Uncomment this line to enable.
+  // This hack is not necessary in Firefox.
+  // import("./hello_world_wasm.js").then(wasm => wasm.booted),
+]).then(([js]) => {
   js.greet("World!");
 });