From b00f8c5a281e335df21e7785a7a862b35394bd55 Mon Sep 17 00:00:00 2001 From: Alex Crichton Date: Wed, 21 Mar 2018 10:21:21 -0700 Subject: [PATCH] Add an example of the `performance` API --- Cargo.toml | 1 + examples/README.md | 2 + examples/performance/.gitignore | 4 ++ examples/performance/Cargo.toml | 11 ++++++ examples/performance/README.md | 21 +++++++++++ examples/performance/build.sh | 12 ++++++ examples/performance/index.html | 9 +++++ examples/performance/index.js | 4 ++ examples/performance/package.json | 10 +++++ examples/performance/src/lib.rs | 51 ++++++++++++++++++++++++++ examples/performance/webpack.config.js | 10 +++++ 11 files changed, 135 insertions(+) create mode 100644 examples/performance/.gitignore create mode 100644 examples/performance/Cargo.toml create mode 100644 examples/performance/README.md create mode 100755 examples/performance/build.sh create mode 100644 examples/performance/index.html create mode 100644 examples/performance/index.js create mode 100644 examples/performance/package.json create mode 100644 examples/performance/src/lib.rs create mode 100644 examples/performance/webpack.config.js diff --git a/Cargo.toml b/Cargo.toml index 981b1ba2..af807a49 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -30,6 +30,7 @@ members = [ "examples/console_log", "examples/dom", "examples/math", + "examples/performance", ] [profile.release] diff --git a/examples/README.md b/examples/README.md index 1f855848..355048f1 100644 --- a/examples/README.md +++ b/examples/README.md @@ -18,3 +18,5 @@ The examples here are: * `smorgasboard` - a bunch of features all thrown into one, showing off the various capabilities of the `#[wasm_bindgen]` macro and what you can do with it from JS +* `performance` - how to import APIs like `performance.now()` and time various + operations in Rust diff --git a/examples/performance/.gitignore b/examples/performance/.gitignore new file mode 100644 index 00000000..72304881 --- /dev/null +++ b/examples/performance/.gitignore @@ -0,0 +1,4 @@ +package-lock.json +performance.js +performance_bg.js +performance_bg.wasm diff --git a/examples/performance/Cargo.toml b/examples/performance/Cargo.toml new file mode 100644 index 00000000..f7a0b1a9 --- /dev/null +++ b/examples/performance/Cargo.toml @@ -0,0 +1,11 @@ +[package] +name = "performance" +version = "0.1.0" +authors = ["Alex Crichton "] + +[lib] +crate-type = ["cdylib"] + +[dependencies] +wasm-bindgen = { path = "../.." } +humantime = "1" diff --git a/examples/performance/README.md b/examples/performance/README.md new file mode 100644 index 00000000..13370a47 --- /dev/null +++ b/examples/performance/README.md @@ -0,0 +1,21 @@ +# `performance` + +This directory is an example of using the `#[wasm_bindgen]` macro to interact +with global APIs like `performance.now()` to learn about the current time in +Rust. + +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 hello message on +the web page generated by the wasm. + +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 diff --git a/examples/performance/build.sh b/examples/performance/build.sh new file mode 100755 index 00000000..313f37af --- /dev/null +++ b/examples/performance/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 +cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \ + --bin wasm-bindgen -- \ + ../../target/wasm32-unknown-unknown/debug/performance.wasm --out-dir . +npm install +npm run serve diff --git a/examples/performance/index.html b/examples/performance/index.html new file mode 100644 index 00000000..775feea9 --- /dev/null +++ b/examples/performance/index.html @@ -0,0 +1,9 @@ + + + + + + +

The developer console should have timing log messages in it

+ + diff --git a/examples/performance/index.js b/examples/performance/index.js new file mode 100644 index 00000000..4f8b5eff --- /dev/null +++ b/examples/performance/index.js @@ -0,0 +1,4 @@ +// For more comments about what's going on here, check out the `hello_world` +// example +const rust = import("./performance"); +rust.then(m => m.run()); diff --git a/examples/performance/package.json b/examples/performance/package.json new file mode 100644 index 00000000..408b462e --- /dev/null +++ b/examples/performance/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/performance/src/lib.rs b/examples/performance/src/lib.rs new file mode 100644 index 00000000..8502e26c --- /dev/null +++ b/examples/performance/src/lib.rs @@ -0,0 +1,51 @@ +#![feature(proc_macro)] + +extern crate wasm_bindgen; +extern crate humantime; + +use std::time::{Duration, SystemTime, UNIX_EPOCH}; + +use wasm_bindgen::prelude::*; + +// Like with the `dom` example this block will eventually be auto-generated, but +// for now we can write it by hand to get by! +#[wasm_bindgen] +extern { + type Performance; + static performance: Performance; + #[wasm_bindgen(method)] + fn now(this: &Performance) -> f64; + #[wasm_bindgen(method, getter)] + fn timing(this: &Performance) -> PerformanceTiming; + + type PerformanceTiming; + #[wasm_bindgen(method, getter)] + fn requestStart(this: &PerformanceTiming) -> f64; + #[wasm_bindgen(method, getter)] + fn responseEnd(this: &PerformanceTiming) -> f64; + + #[wasm_bindgen(namespace = console)] + fn log(a: &str); +} + +macro_rules! println { + ($($t:tt)*) => (console::log(&format_args!($($t)*).to_string())) +} + +// Called by our JS entry point to run the example +#[wasm_bindgen] +pub fn run() { + println!("the current time is {}", performance.now()); + + let start = perf_to_system(performance.timing().requestStart()); + let end = perf_to_system(performance.timing().responseEnd()); + + println!("request started at {}", humantime::format_rfc3339(start)); + println!("request ended at {}", humantime::format_rfc3339(end)); +} + +fn perf_to_system(amt: f64) -> SystemTime { + let secs = (amt as u64) / 1_000; + let nanos = ((amt as u32) % 1_000) * 1_000_000; + UNIX_EPOCH + Duration::new(secs, nanos) +} diff --git a/examples/performance/webpack.config.js b/examples/performance/webpack.config.js new file mode 100644 index 00000000..5910e2ae --- /dev/null +++ b/examples/performance/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" +};