Merge pull request #32 from cwheel/webpack_4_es6_import

ES6 style imports for bindgen Webpack 4

Author: dflemstr

examples/advanced-wasm-bindgen-webpack4-native-wasm/src/index.js

@@ -1,11 +1,13 @@
+import { wasmBooted, hello_world } from '../../advanced-wasm-bindgen/src/lib.rs';
+
 const firstNameInput = document.getElementById('firstName');
 const lastNameInput = document.getElementById('lastName');
 const outputElement = document.getElementById('output');
 
 const update = () => {
   const firstName = firstNameInput.value;
   const lastName = lastNameInput.value;
-  import('../../advanced-wasm-bindgen/src/lib.rs').then(({hello_world}) => outputElement.textContent = hello_world(firstName, lastName));
+  wasmBooted.then(() => outputElement.textContent = hello_world(firstName, lastName));
 };
 
 firstNameInput.addEventListener('input', update);

examples/advanced-wasm-bindgen-webpack4-native-wasm/webpack.config.js

@@ -30,12 +30,6 @@ module.exports = {
           {
             test: /\.rs$/,
             use: [
-              {
-                loader: 'babel-loader',
-                options: {
-                  compact: true,
-                }
-              },
               {
                 loader: 'rust-native-wasm-loader',
                 options: {

src/index.js

@@ -20,9 +20,11 @@ const DEFAULT_OPTIONS = {
 
 const SUPPORTED_WASM_BINDGEN_VERSION = '^0.2';
 const SUPPORTED_CARGO_WEB_VERSION = '^0.6.9';
+const MIN_WEBPACK_NATIVE_WASM_VERSION = '^4.0.0';
 
 const loadWasmBindgen = async function (self, {release, target, wasmBindgen}, srcDir) {
   const wasmBindgenVersion = await clapVersion('wasm-bindgen', srcDir);
+  const webpackVersion = await clapVersion('npx webpack', srcDir);
 
   if (!semver.satisfies(wasmBindgenVersion, SUPPORTED_WASM_BINDGEN_VERSION)) {
     throw new BuildError(
@@ -85,6 +87,13 @@ export const wasmBooted: Promise<boolean> = wasm.booted
 `;
     }
     return contents;
+  } else if (!wasmBindgen.wasm2es6js && semver.satisfies(webpackVersion, MIN_WEBPACK_NATIVE_WASM_VERSION)) {
+    const jsRequest = loaderUtils.stringifyRequest(self, suffixlessPath + '.js');
+
+    return `module.exports.wasmBooted = import(${jsRequest}).then(wasmModule => {
+      const keys = Object.keys(wasmModule);
+      for (let key of keys) module.exports[key] = wasmModule[key];
+    })`;
   } else {
     const jsRequest = loaderUtils.stringifyRequest(self, suffixlessPath + '.js');
     let contents = '';