Merge pull request #153 from FreeMasen/master

include fetch arg for wasm2es6js

.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)
         - |

crates/cli-support/src/wasm2es6js.rs

@@ -8,17 +8,20 @@ use super::Error;
 
 pub struct Config {
     base64: bool,
+    fetch_path: Option<String>,
 }
 
 pub struct Output {
     module: Module,
     base64: bool,
+    fetch_path: Option<String>,
 }
 
 impl Config {
     pub fn new() -> Config {
         Config {
             base64: false,
+            fetch_path: None,
         }
     }
 
@@ -27,14 +30,22 @@ impl Config {
         self
     }
     
+    pub fn fetch(&mut self, path: Option<String>) -> &mut Self {
+        self.fetch_path = path;
+        self
+    }
+
     pub fn generate(&mut self, wasm: &[u8]) -> Result<Output, Error> {
-        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 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!("
-            {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');
-            }}
+                    }}", 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 = WebAssembly.instantiate(bytes, {{ {imports} }})
+            export const booted = {booted};
-                .then(obj => {{
-                    wasm = obj.instance;
-                    {memory}
-                }});
-
             {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 { "" },
         )
     }
 }

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<PathBuf>,
     flag_typescript: bool,
     flag_base64: bool,
+    flag_fetch: Option<String>,
     arg_input: PathBuf,
 }
 
@@ -41,8 +43,8 @@ fn main() {
         .and_then(|d| d.deserialize())
         .unwrap_or_else(|e| e.exit());
 
-    if !args.flag_base64 {
+    if !args.flag_base64 && !args.flag_fetch.is_some() {
-        panic!("unfortunately only works right now with base64");
+        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");
 

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