Various quality of life improvements.

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 package-lock.json
+yarn.lock

README.md

@@ -40,6 +40,12 @@ module.exports = {
       //   path.resolve(__dirname, "another-crate/src")
       // ],
 
+      // The same as the `--out-dir` option for `wasm-pack`
+      // outDir: "pkg",
+
+      // The same as the `--out-name` option for `wasm-pack`
+      // outName: "index",
+
       // If defined, `forceWatch` will force activate/deactivate watch mode for
       // `.rs` files.
       //

plugin.js

@@ -1,6 +1,7 @@
 const {
   spawn
 } = require('child_process');
+const fs = require('fs');
 const path = require('path');
 const commandExistsSync = require('command-exists').sync;
 const chalk = require('chalk');
@@ -23,17 +24,25 @@ class WasmPackPlugin {
     this.crateDirectory = options.crateDirectory;
     this.forceWatch = options.forceWatch;
     this.forceMode = options.forceMode;
-    this.extraArgs = (options.extraArgs || '').trim().split(' ').filter(x=> x);
+    this.extraArgs = (options.extraArgs || '').trim().split(' ').filter(x => x);
+    this.outDir = options.outDir || "pkg";
+    this.outName = options.outName || "index";
     this.watchDirectories = (options.watchDirectories || [])
       .concat(path.resolve(this.crateDirectory, 'src'));
+    this.watchFiles = [path.resolve(this.crateDirectory, 'Cargo.toml')];
 
     this.wp = new Watchpack();
     this.isDebug = true;
+    this.error = null;
   }
 
   apply(compiler) {
     this.isDebug = this.forceMode ? this.forceMode === "development" : compiler.options.mode === "development";
 
+    // This fixes an error in Webpack where it cannot find
+    // the `pkg/index.js` file if Rust compilation errors.
+    this._makeEmpty();
+
     // force first compilation
     compiler.hooks.beforeCompile.tapPromise('WasmPackPlugin', () => {
       if (this._ranInitialCompilation === true) {
@@ -44,16 +53,50 @@ class WasmPackPlugin {
 
       return this._checkWasmPack()
         .then(() => {
-            if (this.forceWatch || (this.forceWatch === undefined && compiler.watchMode)) {
-              this.wp.watch([], this.watchDirectories, Date.now() - 10000);
-              this.wp.on('change', this._compile.bind(this));
-            }
-            return this._compile();
-        })
-        .catch(this._compilationFailure);
+          const shouldWatch = this.forceWatch || (this.forceWatch === undefined && compiler.watchMode);
+
+          if (shouldWatch) {
+            this.wp.watch(this.watchFiles, this.watchDirectories, Date.now() - 10000);
+
+            this.wp.on('change', () => {
+              this._compile(true);
+            });
+          }
+
+          return this._compile(false);
+        });
+    });
+
+    let first = true;
+
+    compiler.hooks.thisCompilation.tap('WasmPackPlugin', (compilation) => {
+      // Super hacky, needed to workaround a bug in Webpack which causes
+      // thisCompilation to be triggered twice on the first compilation.
+      if (first) {
+        first = false;
+
+      } else {
+        // This is needed in order to gracefully handle errors in Webpack,
+        // since Webpack has its own custom error system.
+        if (this.error != null) {
+          compilation.errors.push(this.error);
+        }
+      }
     });
   }
 
+  _makeEmpty() {
+    try {
+      fs.mkdirSync(this.outDir);
+    } catch (e) {
+      if (e.code !== "EEXIST") {
+        throw e;
+      }
+    }
+
+    fs.writeFileSync(path.join(this.outDir, this.outName + ".js"), "");
+  }
+
   _checkWasmPack() {
     info('🧐  Checking for wasm-pack...\n');
 
@@ -71,32 +114,42 @@ class WasmPackPlugin {
     }
   }
 
-  _compile() {
+  _compile(watching) {
     info(`ℹ️  Compiling your crate in ${this.isDebug ? 'development' : 'release'} mode...\n`);
 
     return spawnWasmPack({
+        outDir: this.outDir,
+        outName: this.outName,
         isDebug: this.isDebug,
         cwd: this.crateDirectory,
         extraArgs: this.extraArgs,
       })
-      .then(this._compilationSuccess)
-      .catch(this._compilationFailure);
-  }
+      .then((detail) => {
+        // This clears out the error when the compilation succeeds.
+        this.error = null;
 
-  _compilationSuccess(detail) {
-    if (detail) {
-      info(detail);
-    }
-
-    info('✅  Your crate has been correctly compiled\n');
-  }
+        if (detail) {
+          info(detail);
+        }
 
-  _compilationFailure(err) {
-    error('wasm-pack error: ' + err);
+        info('✅  Your crate has been correctly compiled\n');
+      })
+      .catch((e) => {
+        // Webpack has a custom error system, so we cannot return an
+        // error directly, instead we need to trigger it later.
+        this.error = e;
+
+        if (watching) {
+          // This is to trigger a recompilation so it displays the error message
+          this._makeEmpty();
+        }
+      });
   }
 }
 
 function spawnWasmPack({
+  outDir,
+  outName,
   isDebug,
   cwd,
   extraArgs
@@ -106,8 +159,10 @@ function spawnWasmPack({
   const args = [
     '--verbose',
     'build',
+    '--out-dir', outDir,
+    '--out-name', outName,
     ...(isDebug ? ['--dev'] : []),
-    ...extraArgs,
+    ...extraArgs
   ];
 
   const options = {
@@ -125,8 +180,9 @@ function runProcess(bin, args, options) {
     p.on('close', code => {
       if (code === 0) {
         resolve();
+
       } else {
-        reject();
+        reject(new Error("Rust compilation."));
       }
     });