From 67411f519c995ec041096955dc188cc17963bd1c Mon Sep 17 00:00:00 2001
From: Sophie Alpert <git@sophiebits.com>
Date: Sat, 3 Mar 2018 10:46:43 -0800
Subject: [PATCH] Add workaround for hello_world running in Chrome

Fixes #50.
---
 README.md                       |  4 +++-
 examples/hello_world/.gitignore |  1 +
 examples/hello_world/README.md  |  4 ++++
 examples/hello_world/build.sh   | 10 ++++++++++
 examples/hello_world/index.js   | 11 ++++++++++-
 5 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3d6177da..4466bfab 100644
--- a/README.md
+++ b/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?
 
diff --git a/examples/hello_world/.gitignore b/examples/hello_world/.gitignore
index aad775a8..f786218f 100644
--- a/examples/hello_world/.gitignore
+++ b/examples/hello_world/.gitignore
@@ -1,3 +1,4 @@
 package-lock.json
 hello_world.js
+hello_world_wasm.js
 hello_world_wasm.wasm
diff --git a/examples/hello_world/README.md b/examples/hello_world/README.md
index 53edf645..6c154cc3 100644
--- a/examples/hello_world/README.md
+++ b/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.
diff --git a/examples/hello_world/build.sh b/examples/hello_world/build.sh
index 770873c5..60bd980b 100755
--- a/examples/hello_world/build.sh
+++ b/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
diff --git a/examples/hello_world/index.js b/examples/hello_world/index.js
index 9173576c..7f0e3e97 100644
--- a/examples/hello_world/index.js
+++ b/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!");
 });