No more need for chrome workarounds!

This commit is contained in:
Alex Crichton 2018-05-07 07:36:38 -07:00
parent 94b59e0d6c
commit d04f8c7119
18 changed files with 11 additions and 103 deletions

View File

@ -212,8 +212,7 @@ $ npm run serve
``` ```
If you open https://localhost:8080 in a browser you should see a `Hello, world!` If you open https://localhost:8080 in a browser you should see a `Hello, world!`
dialog pop up! This works in Firefox out of the box but not in Chrome due to a dialog pop up!
webpack issue. See [the hello_world README][hello-readme] for a workaround.
If that was all a bit much, no worries! You can [execute this code If that was all a bit much, no worries! You can [execute this code
online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio) online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio)

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -14,35 +14,3 @@ $ ./build.sh
(or running the two commands on Windows manually) (or running the two commands on Windows manually)
and then opening up `index.html` in a web browser should show a dialog! and then opening up `index.html` in a web browser should show a dialog!
## Caveat for Chrome users
Note that unfortunately this example does not yet work in Chrome. Chrome has
different limits than than Firefox, for example, about instantiating wasm
modules. Currently the Webpack wasm integration uses `new WebAssembly.Instance`
which limits the input module to at most 4K, but frequently (especially in
development mode) wasm modules may be larger than 4K.
The usage of `new WebAssembly.Instance` is currently believed to [be a bug][bug]
in webpack which is likely to get fixed once [`instantiateStreaming`][bug2] is
used instead. Once this is [fixed in upstream Webpack][fix] then this example
will work in Chrome (like it does currently in Firefox).
In the meantime, however, there's a `chrome` directory in this folder which also
has a `build.sh` script that contains a workaround for this issue. If you're
using chrome it's recommended to `cd` into that folder and run that script.
The workaround here is a `wasm2es6js` tool, which is currently a bit of a hack.
The wasm-bindgen project assumes that wasm files are ES6 modules (as does
Webpack's current integration), so the `wasm2es6js` translates a wasm file to a
JS file by explicitly instantiating the wasm module rather than relying on the
bundler to do it. When doing this we can manually use
`WebAssembly.instantiate` which does not have similar limits in Chrome.
If all this seems unfortunate for now, don't worry because it should hopefully
be fixed soon! If you've got any questions about this though feel free to ask on
the issue tracker or in the `#rust-wasm` IRC channel.
[bug]: https://github.com/webpack/webpack/issues/6475
[bug2]: https://github.com/webpack/webpack/issues/6433
[fix]: https://github.com/webpack/webpack/pull/6709

View File

@ -1,22 +0,0 @@
#!/bin/sh
set -ex
# This is the same as the directory above this.
cargo +nightly build --target wasm32-unknown-unknown
cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
../../../target/wasm32-unknown-unknown/debug/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_bg.wasm after building or change
# hello_world.js to import from hello_world_bg.js explicitly and uncomment
# the relevant line in index.js.
cargo +nightly run -p wasm-bindgen-cli --bin wasm2es6js -- \
--base64 -o hello_world_bg.js hello_world_bg.wasm
# wasm2es6js --base64 -o hello_world_bg.js hello_world_bg.wasm
rm hello_world_bg.wasm
# And like the directory above this, from here it's the same.
npm install
npm run serve

View File

@ -1,23 +0,0 @@
#!/bin/sh
set -ex
# This is the same build.sh, later we are going to use the
# fetch flag to avoid including the wasm module as a string
# of base64, instead using the js `fetch` function
#to request the module from the server.
cargo +nightly build --target wasm32-unknown-unknown
cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
../../../target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir .
# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
# create a .js module that will download the .wasm module via fetch.
cargo +nightly run -p wasm-bindgen-cli --bin wasm2es6js -- \
--fetch ./hello_world_bg.wasm -o hello_world_bg.js hello_world_bg.wasm
# Install the npm items as usual.
npm install
# since we kept the same name for the .js module, we need
# to force webpack to ignore any other file extensions
npm run serve -- --resolve-extensions .js

View File

@ -1 +0,0 @@
../index.html

View File

@ -1,11 +0,0 @@
// Note that unlike the directory above this we don't need to use an
// asynchronous `import` statement as we're just working with JS here so we can
// use normal `import { ... }` statements.
//
// Unlike before however we have to *also* import the JS file itself containing
// wasm (generated by wasm2es6js) which has a `booted` promise to let us know
// when it's ready to go.
import { greet } from './hello_world';
import { booted } from './hello_world_bg';
booted.then(() => greet("World!"));

View File

@ -1 +0,0 @@
../package.json

View File

@ -1 +0,0 @@
../webpack.config.js

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }

View File

@ -3,7 +3,7 @@
"serve": "webpack-dev-server" "serve": "webpack-dev-server"
}, },
"devDependencies": { "devDependencies": {
"webpack": "^4.0.1", "webpack": "^4.8.0",
"webpack-cli": "^2.0.10", "webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0" "webpack-dev-server": "^3.1.0"
} }