diff --git a/.travis.yml b/.travis.yml index e91d42bb..af01b278 100644 --- a/.travis.yml +++ b/.travis.yml @@ -39,6 +39,8 @@ matrix: (cd examples/hello_world && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh) - | (cd examples/hello_world/chrome && ./build.sh) + - | + (cd examples/hello_world/chrome && ./build_fetch.sh) - | (cd examples/smorgasboard && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh) - | diff --git a/crates/cli-support/src/wasm2es6js.rs b/crates/cli-support/src/wasm2es6js.rs index 998e8d6c..906c8a21 100644 --- a/crates/cli-support/src/wasm2es6js.rs +++ b/crates/cli-support/src/wasm2es6js.rs @@ -8,17 +8,20 @@ use super::Error; pub struct Config { base64: bool, + fetch_path: Option, } pub struct Output { module: Module, base64: bool, + fetch_path: Option, } impl Config { pub fn new() -> Config { Config { base64: false, + fetch_path: None, } } @@ -26,15 +29,23 @@ impl Config { self.base64 = base64; self } + + pub fn fetch(&mut self, path: Option) -> &mut Self { + self.fetch_path = path; + self + } pub fn generate(&mut self, wasm: &[u8]) -> Result { - assert!(self.base64); + if !self.base64 && !self.fetch_path.is_some() { + panic!("the option --base64 or --fetch is required"); + } let module = deserialize_buffer(wasm).map_err(|e| { ::Error(format!("{:?}", e)) })?; Ok(Output { module, base64: self.base64, + fetch_path: self.fetch_path.clone(), }) } } @@ -180,35 +191,51 @@ impl Output { )); } } - - let wasm = serialize(self.module) - .expect("failed to serialize"); - - format!(" - {js_imports} - let wasm; - let bytes; - const base64 = \"{base64}\"; - if (typeof Buffer === 'undefined') {{ - bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0)); - }} else {{ - bytes = Buffer.from(base64, 'base64'); - }} - {mem_export} - export const booted = WebAssembly.instantiate(bytes, {{ {imports} }}) + let inst = format!("WebAssembly.instantiate(bytes,{{ {imports} }}) .then(obj => {{ wasm = obj.instance; {memory} - }}); - + }})", + imports = imports, + memory = if export_mem { "memory = wasm.exports.memory;" } else { "" }, + ); + let (bytes, booted) = if self.base64 { + let wasm = serialize(self.module) + .expect("failed to serialize"); + ( + format!(" + let bytes; + const base64 = \"{base64}\"; + if (typeof Buffer === 'undefined') {{ + bytes = Uint8Array.from(atob(base64), c => c.charCodeAt(0)); + }} else {{ + bytes = Buffer.from(base64, 'base64'); + }}", base64 = base64::encode(&wasm)), + inst + ) + } else if self.fetch_path.is_some() { + ( + String::new(), + format!("fetch('{path}') + .then(res => res.arrayBuffer()) + .then(bytes => {inst})", path = self.fetch_path.unwrap(), inst = inst) + ) + } else { + panic!("the option --base64 or --fetch is required"); + }; + format!(" + {js_imports} + let wasm; + {bytes} + {mem_export} + export const booted = {booted}; {exports} ", - base64 = base64::encode(&wasm), + bytes = bytes, + booted = booted, js_imports = js_imports, - imports = imports, exports = exports, mem_export = if export_mem { "export let memory;" } else { "" }, - memory = if export_mem { "memory = wasm.exports.memory;" } else { "" }, ) } } diff --git a/crates/cli/src/bin/wasm2es6js.rs b/crates/cli/src/bin/wasm2es6js.rs index f884ee58..f473cab4 100644 --- a/crates/cli/src/bin/wasm2es6js.rs +++ b/crates/cli/src/bin/wasm2es6js.rs @@ -22,6 +22,7 @@ Options: -o --output FILE File to place output in --typescript Output a `*.d.ts` file next to the JS output --base64 Inline the wasm module using base64 encoding + --fetch PATH Load module by passing the PATH argument to `fetch()` Note that this is not intended to produce a production-ready output module but rather is intended purely as a temporary \"hack\" until it's standard in @@ -33,6 +34,7 @@ struct Args { flag_output: Option, flag_typescript: bool, flag_base64: bool, + flag_fetch: Option, arg_input: PathBuf, } @@ -41,8 +43,8 @@ fn main() { .and_then(|d| d.deserialize()) .unwrap_or_else(|e| e.exit()); - if !args.flag_base64 { - panic!("unfortunately only works right now with base64"); + if !args.flag_base64 && !args.flag_fetch.is_some() { + panic!("unfortunately only works right now with base64 or fetch"); } let mut wasm = Vec::new(); @@ -51,6 +53,7 @@ fn main() { let object = wasm_bindgen_cli_support::wasm2es6js::Config::new() .base64(args.flag_base64) + .fetch(args.flag_fetch) .generate(&wasm) .expect("failed to parse wasm"); diff --git a/examples/hello_world/chrome/build_fetch.sh b/examples/hello_world/chrome/build_fetch.sh new file mode 100755 index 00000000..d670af00 --- /dev/null +++ b/examples/hello_world/chrome/build_fetch.sh @@ -0,0 +1,23 @@ +#!/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