Add an example using Math

This commit is contained in:
Alex Crichton
2018-03-21 10:03:40 -07:00
parent 8b3ca9b85c
commit 758bb3c2c3
12 changed files with 118 additions and 0 deletions

View File

@ -40,6 +40,10 @@ script:
(cd examples/smorgasboard && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
- |
(cd examples/console_log && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
- |
(cd examples/math && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
- |
(cd examples/dom && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
notifications:
email:

View File

@ -29,6 +29,7 @@ members = [
"examples/smorgasboard",
"examples/console_log",
"examples/dom",
"examples/math",
]
[profile.release]

View File

@ -11,6 +11,8 @@ The examples here are:
dialog greeting you
* `console_log` - a showcase of `#[wasm_bindgen]` importing classes and how to
bind `console.log`
* `math` - like `console_log` except showing how to import Math-related
functions instead
* `dom` - an example of accessing the global `document` object and appending
HTML to it
* `smorgasboard` - a bunch of features all thrown into one, showing off the

4
examples/math/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
math.js
math_bg.js
math_bg.wasm

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

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

19
examples/math/README.md Normal file
View File

@ -0,0 +1,19 @@
# `Math`
This directory is an example of using the `#[wasm_bindgen]` macro to import the
`Math` object and invoke various functions on it.
You can build the example with:
```
$ ./build.sh
```
(or running the commands on Windows manually)
and then opening up `index.html` in a web browser should show a dialog!
For more information about this example be sure to check out
[`hello_world`][hello] which also has more comments about caveats and such.
[hello]: https://github.com/alexcrichton/wasm-bindgen/tree/master/examples/hello_world

12
examples/math/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
cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/debug/math.wasm --out-dir .
npm install
npm run serve

10
examples/math/index.html Normal file
View File

@ -0,0 +1,10 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script src='./index.js'></script>
<p>Open the developer console and you should see wasm invoking `Math`
functions</p>
</body>
</html>

10
examples/math/index.js Normal file
View File

@ -0,0 +1,10 @@
// For more comments about what's going on here, check out the `hello_world`
// example
const rust = import("./math");
rust.then(m => {
m.run();
console.log('and in JS the answers look like:');
console.log(`Math.log2(10.0) = ${Math.log2(10.0)}`);
console.log(`Math.sin(1.2) = ${Math.sin(1.2)}`);
});

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

26
examples/math/src/lib.rs Normal file
View File

@ -0,0 +1,26 @@
#![feature(proc_macro)]
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
#[wasm_bindgen(namespace = Math)]
fn log2(a: f64) -> f64;
#[wasm_bindgen(namespace = Math)]
fn sin(a: f64) -> f64;
#[wasm_bindgen(namespace = console)]
fn log(a: &str);
}
macro_rules! println {
($($t:tt)*) => (console::log(&format_args!($($t)*).to_string()))
}
#[wasm_bindgen]
pub fn run() {
println!("Math.log2(10.0) = {}", Math::log2(10.0));
println!("Math.sin(1.2) = {}", Math::sin(1.2));
}

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