diff --git a/Cargo.toml b/Cargo.toml index 3d26b57a1..7a211258f 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -38,6 +38,7 @@ members = [ "examples/wasm-in-wasm", "examples/closures", "examples/no_modules", + "examples/add", ] [profile.release] diff --git a/examples/README.md b/examples/README.md index 4b799d62d..b33b370db 100644 --- a/examples/README.md +++ b/examples/README.md @@ -29,3 +29,5 @@ The examples here are: the `onclick` property in conjunction with closures. * `no_modules` - an example of how to use the `--no-modules` flag to the `wasm-bindgen` CLI tool +* `add` - an example of generating a tiny wasm binary, one that only adds two + numbers. diff --git a/examples/add/.gitignore b/examples/add/.gitignore new file mode 100644 index 000000000..bdaab9c57 --- /dev/null +++ b/examples/add/.gitignore @@ -0,0 +1,3 @@ +package-lock.json +add.js +add_bg.wasm diff --git a/examples/add/Cargo.toml b/examples/add/Cargo.toml new file mode 100644 index 000000000..e9969aa0b --- /dev/null +++ b/examples/add/Cargo.toml @@ -0,0 +1,10 @@ +[package] +name = "add" +version = "0.1.0" +authors = ["Alex Crichton "] + +[lib] +crate-type = ["cdylib"] + +[dependencies] +wasm-bindgen = { path = "../.." } diff --git a/examples/add/README.md b/examples/add/README.md new file mode 100644 index 000000000..a1f75d4eb --- /dev/null +++ b/examples/add/README.md @@ -0,0 +1,61 @@ +# Adding Numbers + +[View this example online](https://webassembly.studio/?f=612vwsrmwft) + +This directory is an example of using the `#[wasm_bindgen]` macro to simply add +two numbers. The neat part about this is that it's an example of how to generate +the smallest wasm-bindgen binary. + +You can build the example with: + +``` +$ ./build.sh +``` + +(or running the commands on Windows manually) + +Currently this generates a 651 byte wasm binary: + +``` +$ ls -alh add_bg.wasm +-rw-rw-r-- 1 alex alex 651 Apr 20 22:16 add_bg.wasm +``` + +If you run [wasm-opt], a C++ tool for optimize WebAssembly, you can make it even +smaller too! + +``` +$ wasm-opt -Os add_bg.wasm -o add.wasm +$ ls -alh add.wasm +-rw-rw-r-- 1 alex alex 100 Apr 20 22:19 add.wasm +``` + +And sure enough, using the [wasm2wat] tool it's quite small! + +``` +$ wasm2wat add.wasm +(module + (type (;0;) (func (param i32 i32) (result i32))) + (func (;0;) (type 0) (param i32 i32) (result i32) + get_local 1 + get_local 0 + i32.add) + (memory (;0;) 2) + (export "memory" (memory 0)) + (export "add" (func 0)) +(data (i32.const 1545) "invalid malloc request")) +``` + +Note that it's important to point out that the size reductions here are because +the wasm is compiled in release mode by the build script and this crate's +workspace has the following configuration + +```toml +[profile.release] +lto = true +opt-level = 's' +panic = 'abort' +``` + +[wasm2wat]: https://github.com/webassembly/wabt +[wasm-opt]: https://github.com/webassembly/binaryen diff --git a/examples/add/build.sh b/examples/add/build.sh new file mode 100755 index 000000000..8033cede3 --- /dev/null +++ b/examples/add/build.sh @@ -0,0 +1,12 @@ +#!/bin/sh + +# For more coments about what's going on here, see the `hello_world` example + +set -ex + +cargo +nightly build --target wasm32-unknown-unknown --release +cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \ + --bin wasm-bindgen -- \ + ../../target/wasm32-unknown-unknown/release/add.wasm --out-dir . +npm install +npm run serve diff --git a/examples/add/index.html b/examples/add/index.html new file mode 100644 index 000000000..bad47a7c6 --- /dev/null +++ b/examples/add/index.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/examples/add/index.js b/examples/add/index.js new file mode 100644 index 000000000..276746161 --- /dev/null +++ b/examples/add/index.js @@ -0,0 +1,4 @@ +// For more comments about what's going on here, check out the `hello_world` +// example +const rust = import("./add"); +rust.then(m => alert('1 + 2 = ' + m.add(1, 2))); diff --git a/examples/add/package.json b/examples/add/package.json new file mode 100644 index 000000000..408b462e6 --- /dev/null +++ b/examples/add/package.json @@ -0,0 +1,10 @@ +{ + "scripts": { + "serve": "webpack-dev-server" + }, + "devDependencies": { + "webpack": "^4.0.1", + "webpack-cli": "^2.0.10", + "webpack-dev-server": "^3.1.0" + } +} diff --git a/examples/add/src/lib.rs b/examples/add/src/lib.rs new file mode 100644 index 000000000..8c0b7e5d5 --- /dev/null +++ b/examples/add/src/lib.rs @@ -0,0 +1,10 @@ +#![feature(proc_macro, wasm_custom_section, wasm_import_module)] + +extern crate wasm_bindgen; + +use wasm_bindgen::prelude::*; + +#[wasm_bindgen] +pub fn add(a: u32, b: u32) -> u32 { + a + b +} diff --git a/examples/add/webpack.config.js b/examples/add/webpack.config.js new file mode 100644 index 000000000..5910e2ae1 --- /dev/null +++ b/examples/add/webpack.config.js @@ -0,0 +1,10 @@ +const path = require('path'); + +module.exports = { + entry: "./index.js", + output: { + path: path.resolve(__dirname, "dist"), + filename: "index.js", + }, + mode: "development" +};