Convert all examples to using wasm-pack

This commit migrates all our examples to using `wasm-pack build` to
compile their code and run `wasm-bindgen`. This should make it a bit
easier to understand the examples as there's less to follow during the
build step.

Webpack projects are all using `@wasm-tool/wasm-pack-plugin` as well so
the build step is simple `npm run serve`. Other examples which retain
`build.sh` are just using `wasm-pack build` now

.travis.yml

@@ -93,14 +93,15 @@ matrix:
         - *INSTALL_NODE_VIA_NVM
         - *INSTALL_AWS
         - npm install
+        - curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -f
       script:
+        - cargo build -p wasm-bindgen-cli
+        - ln -snf target/debug/wasm-bindgen $HOME/.cargo/wasm-bindgen
         - |
           for dir in `ls examples | grep -v README | grep -v asm.js | grep -v raytrace | grep -v no_modules`; do
             (cd examples/$dir &&
-             sed -i "s|: \"webpack-dev-server\"|: \"webpack --output-path $HOME/$TRAVIS_BUILD_NUMBER/exbuild/$dir\"|" package.json &&
-             sed -i 's/npm install//' build.sh &&
              ln -fs ../../node_modules . &&
-             ./build.sh) || exit 1;
+             npm run build -- --output-path $HOME/$TRAVIS_BUILD_NUMBER/exbuild/$dir) || exit 1;
           done
         - if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then aws s3 sync --quiet ~/$TRAVIS_BUILD_NUMBER s3://wasm-bindgen-ci/$TRAVIS_BUILD_NUMBER; fi
       if: branch = master

examples/.gitignore

@@ -0,0 +1,4 @@
+package-lock.json
+pkg
+dist
+wasm-pack.log

examples/add/.gitignore

@@ -1,3 +0,0 @@
-package-lock.json
-add.js
-add_bg.wasm

examples/add/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/add/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown --release
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/release/add.wasm --out-dir .
-npm install
-npm run serve

examples/add/index.js

@@ -1,6 +1,6 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-const rust = import('./add');
+const rust = import('./pkg/add');
 rust
   .then(m => alert('1 + 2 = ' + m.add(1, 2)))
   .catch(console.error);

examples/add/package.json

@@ -1,9 +1,10 @@
 {
   "scripts": {
-    "build": "webpack",
-    "serve": "webpack-dev-server"
+    "build": "webpack -p",
+    "serve": "webpack-dev-server -p"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/add/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,6 +11,9 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/canvas/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-canvas.js
-canvas_bg.js
-canvas_bg.wasm

examples/canvas/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/canvas/build.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-cd "$(dirname $0)"
-
-cargo build --target wasm32-unknown-unknown
-
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/canvas.wasm --out-dir .
-
-npm install
-npm run serve

examples/canvas/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example.
-import('./canvas')
+import('./pkg/canvas')
   .catch(console.error);

examples/canvas/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/canvas/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/char/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-char.js
-char_bg.js
-char_bg.wasm

examples/char/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/char/build.sh

@@ -1,22 +0,0 @@
-#!/bin/sh
-
-set -ex
-
-# Build the `hello_world.wasm` file using Cargo/rustc
-cargo build --target wasm32-unknown-unknown
-
-# Run the `wasm-bindgen` CLI tool to postprocess the wasm file emitted by the
-# Rust compiler to emit the JS support glue that's necessary
-#
-# Here we're using the version of the CLI in this repository, but for external
-# usage you'd use the commented out version below
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/char.wasm --out-dir .
-# wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
-
-# Finally, package everything up using Webpack and start a server so we can
-# browse the result
-
-npm install
-npm run serve

examples/char/index.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { chars } from './chars-list.js';
-let imp = import('./char.js');
+let imp = import('./pkg/char');
 let mod;
 
 let counters = [];

examples/char/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/char/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -12,6 +13,9 @@ module.exports = {
         new HtmlWebpackPlugin({
             template: "index.html"
         }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/closures/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-closures.js
-closures_bg.js
-closures_bg.wasm

examples/closures/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/closures/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/closures.wasm --out-dir .
-npm install
-npm run serve

examples/closures/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./closures')
+import('./pkg/closures')
   .catch(console.error);

examples/closures/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/closures/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -9,8 +10,9 @@ module.exports = {
         filename: 'index.js',
     },
     plugins: [
-        new HtmlWebpackPlugin({
-            template: "index.html"
+        new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/console_log/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-console_log.js
-console_log_bg.js
-console_log_bg.wasm

examples/console_log/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/console_log/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/console_log.wasm --out-dir .
-npm install
-npm run serve

examples/console_log/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./console_log')
+import('./pkg/console_log')
   .catch(console.error);

examples/console_log/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/console_log/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -9,8 +10,9 @@ module.exports = {
         filename: 'index.js',
     },
     plugins: [
-        new HtmlWebpackPlugin({
-            template: "index.html"
+        new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/dom/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-dom.js
-dom_bg.js
-dom_bg.wasm

examples/dom/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/dom/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/dom.wasm --out-dir .
-npm install
-npm run serve

examples/dom/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./dom')
+import('./pkg/dom')
   .catch(console.error);

examples/dom/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/dom/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/duck-typed-interfaces/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-rust_duck_typed_interfaces.js
-rust_duck_typed_interfaces_bg.js
-rust_duck_typed_interfaces_bg.wasm

examples/duck-typed-interfaces/README.md

@@ -5,10 +5,8 @@ This directory is an example of using duck-typed JS interfaces with `wasm-bindge
 You can build and run the example with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then opening up `http://localhost:8080/` in a web browser should show a
 smiley face drawn on canvas by Rust and WebAssembly.

examples/duck-typed-interfaces/build.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-cd "$(dirname $0)"
-
-cargo build --target wasm32-unknown-unknown
-
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/rust_duck_typed_interfaces.wasm --out-dir .
-
-npm install
-npm run serve

examples/duck-typed-interfaces/index.js

@@ -1,3 +1,3 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example.
-import('./duck-typed-interfaces');
+import('./pkg/rust_duck_typed_interfaces');

examples/duck-typed-interfaces/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/duck-typed-interfaces/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -9,7 +10,12 @@ module.exports = {
         filename: 'index.js',
     },
     plugins: [
-        new HtmlWebpackPlugin(),
+        new HtmlWebpackPlugin({
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/fetch/.gitignore

@@ -1,4 +0,0 @@
-fetch.d.ts
-fetch.js
-fetch_bg.wasm
-package-lock.json

examples/fetch/README.md

@@ -9,10 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!
-

examples/fetch/build.sh

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/fetch.wasm --out-dir .
-
-npm install
-npm run serve

examples/fetch/index.js

@@ -1,8 +1,8 @@
-const rust = import('./fetch');
+const rust = import('./pkg/fetch');
 
 rust
   .then(m => {
-      m.run().then((data) => {
+      return m.run().then((data) => {
           console.log(data);
 
           console.log("The latest commit to the wasm-bindgen %s branch is:", data.name);

examples/fetch/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/fetch/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,6 +11,9 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/guide-supported-types-examples/.gitignore

@@ -1,3 +0,0 @@
-package-lock.json
-guide_supported_types_examples.js
-guide_supported_types_examples_bg.wasm

examples/guide-supported-types-examples/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown --release
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/release/guide_supported_types_examples.wasm --out-dir .
-npm install
-npm run serve

examples/guide-supported-types-examples/index.js

@@ -1,5 +1,5 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./bootstrap').then(() => {
-  console.log("done");
-});
+// import('./pkg/bootstrap').then(() => {
+//   console.log("done");
+// });

examples/guide-supported-types-examples/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/guide-supported-types-examples/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,6 +11,9 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/hello_world/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-hello_world.js
-hello_world_bg.js
-hello_world_bg.wasm

examples/hello_world/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
-and then visiting http://localhost:8080 in a browser should show a dialog!
+and then visiting http://localhost:8080 in a browser should run the example!

examples/hello_world/build.sh

@@ -1,21 +0,0 @@
-#!/bin/sh
-
-set -ex
-
-# Build the `hello_world.wasm` file using Cargo/rustc
-cargo build --target wasm32-unknown-unknown
-
-# Run the `wasm-bindgen` CLI tool to postprocess the wasm file emitted by the
-# Rust compiler to emit the JS support glue that's necessary
-#
-# Here we're using the version of the CLI in this repository, but for external
-# usage you'd use the commented out version below
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir .
-# wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
-
-# Finally, package everything up using Webpack and start a server so we can
-# browse the result
-npm install
-npm run serve

examples/hello_world/index.js

@@ -1,7 +1,7 @@
 // Note that a dynamic `import` statement here is required due to
-// webpack/webpack#6615, but in theory `import { greet } from './hello_world';`
+// webpack/webpack#6615, but in theory `import { greet } from './pkg/hello_world';`
 // will work here one day as well!
-const rust = import('./hello_world');
+const rust = import('./pkg/hello_world');
 
 rust
   .then(m => m.greet('World!'))

examples/hello_world/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/hello_world/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,6 +11,9 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin(),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
+        }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.
         new webpack.ProvidePlugin({

examples/import_js/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-import_js.js
-import_js_bg.js
-import_js_bg.wasm

examples/import_js/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/import_js/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/import_js.wasm --out-dir .
-npm install
-npm run serve

examples/import_js/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./import_js')
+import('./pkg/import_js')
   .catch(console.error);

examples/import_js/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/import_js/src/lib.rs

@@ -1,6 +1,6 @@
 use wasm_bindgen::prelude::*;
 
-#[wasm_bindgen(module = "./defined-in-js")]
+#[wasm_bindgen(module = "../defined-in-js")]
 extern "C" {
     fn name() -> String;
 

examples/import_js/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/julia_set/.gitignore

@@ -1,2 +0,0 @@
-julia_set.js
-julia_set_bg.wasm

examples/julia_set/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/julia_set/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown --release
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/release/julia_set.wasm --out-dir .
-npm install
-npm run serve

examples/julia_set/index.js

@@ -1,4 +1,4 @@
-import('./julia_set')
+import('./pkg/julia_set')
     .then(wasm => {
         const canvas = document.getElementById('drawing');
         const ctx = canvas.getContext('2d');

examples/julia_set/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/julia_set/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/no_modules/.gitignore

@@ -1,2 +0,0 @@
-no_modules.js
-no_modules_bg.wasm

examples/no_modules/README.md

@@ -7,9 +7,7 @@
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ wasm-pack build --target no-modules
 ```
 
-(or running the commands on Windows manually)
-
 and then opening `index.html` in a browser should run the example!

examples/no_modules/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  --no-modules \
-  ../../target/wasm32-unknown-unknown/debug/no_modules.wasm --out-dir .
-
-python -m SimpleHTTPServer

examples/no_modules/index.html

@@ -17,7 +17,7 @@
     </script>
 
     <!-- this is the JS generated by the `wasm-bindgen` CLI tool -->
-    <script src='./no_modules.js'></script>
+    <script src='./pkg/no_modules.js'></script>
 
     <script>
       window.addEventListener('load', async () => {
@@ -26,7 +26,7 @@
           // here we tell bindgen the path to the wasm file so it can run
           // initialization and return to us a promise when it's done
           // also, we can use 'await' on the returned promise
-          await wasm_bindgen('./no_modules_bg.wasm');
+          await wasm_bindgen('./pkg/no_modules_bg.wasm');
       });
     </script>
   </body>

examples/paint/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-wasm_bindgen_paint.js
-wasm_bindgen_paint_bg.js
-wasm_bindgen_paint_bg.wasm

examples/paint/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/paint/build.sh

@@ -1,15 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-cd "$(dirname $0)"
-
-cargo build --target wasm32-unknown-unknown
-
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/wasm_bindgen_paint.wasm --out-dir .
-
-npm install
-npm run serve

examples/paint/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example.
-import('./wasm_bindgen_paint')
+import('./pkg/wasm_bindgen_paint')
   .catch(console.error);

examples/paint/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/paint/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/performance/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-performance.js
-performance_bg.js
-performance_bg.wasm

examples/performance/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/performance/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/performance.wasm --out-dir .
-npm install
-npm run serve

examples/performance/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./performance')
+import('./pkg/performance')
   .catch(console.error);

examples/performance/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/performance/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/raytrace-parallel/.gitignore

@@ -1,3 +0,0 @@
-package-lock.json
-raytrace_parallel.js
-raytrace_parallel_bg.wasm

examples/request-animation-frame/.gitignore

@@ -1,4 +0,0 @@
-package-lock.json
-request_animation_frame.js
-request_animation_frame_bg.js
-request_animation_frame_bg.wasm

examples/request-animation-frame/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/request-animation-frame/build.sh

@@ -1,12 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/request_animation_frame.wasm --out-dir .
-npm install
-npm run serve

examples/request-animation-frame/index.js

@@ -1,4 +1,4 @@
 // For more comments about what's going on here, check out the `hello_world`
 // example
-import('./request_animation_frame')
+import('./pkg/request_animation_frame')
   .catch(console.error);

examples/request-animation-frame/package.json

@@ -4,6 +4,7 @@
     "serve": "webpack-dev-server"
   },
   "devDependencies": {
+    "@wasm-tool/wasm-pack-plugin": "0.2.1",
     "text-encoding": "^0.7.0",
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^4.11.1",

examples/request-animation-frame/webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const webpack = require('webpack');
+const WasmPackPlugin = require("@wasm-tool/wasm-pack-plugin");
 
 module.exports = {
     entry: './index.js',
@@ -10,7 +11,10 @@ module.exports = {
     },
     plugins: [
         new HtmlWebpackPlugin({
-            template: "index.html"
+            template: 'index.html'
+        }),
+        new WasmPackPlugin({
+            crateDirectory: path.resolve(__dirname, ".")
         }),
         // Have this example work in Edge which doesn't ship `TextEncoder` or
         // `TextDecoder` at this time.

examples/todomvc/.gitignore

@@ -1,6 +0,0 @@
-target/
-dist/
-_site/
-
-todomvc*
-*.swp

examples/todomvc/README.md

@@ -9,9 +9,7 @@ online][compiled]
 You can build the example locally with:
 
 ```
-$ ./build.sh
+$ npm run serve
 ```
 
-(or running the commands on Windows manually)
-
 and then visiting http://localhost:8080 in a browser should run the example!

examples/todomvc/build.sh

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-# For more comments about what's going on here, see the `hello_world` example
-
-set -ex
-
-cargo build --target wasm32-unknown-unknown
-cargo run --manifest-path ../../crates/cli/Cargo.toml \
-  --bin wasm-bindgen -- \
-  ../../target/wasm32-unknown-unknown/debug/todomvc.wasm --out-dir .
-
-npm install
-npm run serve