From 67411f519c995ec041096955dc188cc17963bd1c Mon Sep 17 00:00:00 2001 From: Sophie Alpert 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!"); });