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
This commit is contained in:
Alex Crichton 2019-01-08 15:14:15 -08:00
parent d79ca22234
commit 32c611d16d
126 changed files with 180 additions and 481 deletions

View File

@ -93,14 +93,15 @@ matrix:
- *INSTALL_NODE_VIA_NVM - *INSTALL_NODE_VIA_NVM
- *INSTALL_AWS - *INSTALL_AWS
- npm install - npm install
- curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s -- -f
script: 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 for dir in `ls examples | grep -v README | grep -v asm.js | grep -v raytrace | grep -v no_modules`; do
(cd examples/$dir && (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 . && ln -fs ../../node_modules . &&
./build.sh) || exit 1; npm run build -- --output-path $HOME/$TRAVIS_BUILD_NUMBER/exbuild/$dir) || exit 1;
done done
- if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then aws s3 sync --quiet ~/$TRAVIS_BUILD_NUMBER s3://wasm-bindgen-ci/$TRAVIS_BUILD_NUMBER; fi - if [ "$TRAVIS_PULL_REQUEST" = "false" ]; then aws s3 sync --quiet ~/$TRAVIS_BUILD_NUMBER s3://wasm-bindgen-ci/$TRAVIS_BUILD_NUMBER; fi
if: branch = master if: branch = master

4
examples/.gitignore vendored Normal file
View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -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: 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 and then opening up `http://localhost:8080/` in a web browser should show a
smiley face drawn on canvas by Rust and WebAssembly. smiley face drawn on canvas by Rust and WebAssembly.

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,10 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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!
and then visiting http://localhost:8080 in a browser should show a dialog!

View File

@ -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

View File

@ -1,7 +1,7 @@
// Note that a dynamic `import` statement here is required due to // 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! // will work here one day as well!
const rust = import('./hello_world'); const rust = import('./pkg/hello_world');
rust rust
.then(m => m.greet('World!')) .then(m => m.greet('World!'))

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -7,9 +7,7 @@
You can build the example locally with: 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! and then opening `index.html` in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

View File

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

View File

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

View File

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

View File

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

View File

@ -9,9 +9,7 @@ online][compiled]
You can build the example locally with: 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! and then visiting http://localhost:8080 in a browser should run the example!

View File

@ -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

Some files were not shown because too many files have changed in this diff Show More