rustwasm/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/rustwasm/wasm-bindgen.git synced 2024-12-26 11:34:22 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add an example of a minimal wasm module

Browse Source
This commit is contained in:
Alex Crichton 2018-04-20 22:38:22 -07:00
parent 4100dc9c53
commit 947386ee57
11 changed files with 131 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -38,6 +38,7 @@ members = [
"examples/wasm-in-wasm",
"examples/closures",
"examples/no_modules",
"examples/add",
]
[profile.release]

2
examples/README.md
View File

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

3
examples/add/.gitignore vendored Normal file
View File

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

10
examples/add/Cargo.toml Normal file
View File

@ -0,0 +1,10 @@
[package]
name = "add"
version = "0.1.0"
authors = ["Alex Crichton <alex@alexcrichton.com>"]
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = { path = "../.." }

61
examples/add/README.md Normal file
View File

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

12
examples/add/build.sh Executable file
View File

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

8
examples/add/index.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script src='./index.js'></script>
</body>
</html>

4
examples/add/index.js Normal file
View File

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

10
examples/add/package.json Normal file
View File

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

10
examples/add/src/lib.rs Normal file
View File

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

10
examples/add/webpack.config.js Normal file
View File

@ -0,0 +1,10 @@
const path = require('path');
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
mode: "development"
};