Add an example of the performance API

2025-06-13 21:11:22 +00:00 · 2018-03-21 10:21:21 -07:00
parent 758bb3c2c3
commit b00f8c5a28
11 changed files with 135 additions and 0 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -30,6 +30,7 @@ members = [
  "examples/console_log",
  "examples/dom",
  "examples/math",
+  "examples/performance",
 ]

 [profile.release]
--- 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
--- a/examples/performance/.gitignore
+++ b/examples/performance/.gitignore
@ -0,0 +1,4 @@
+package-lock.json
+performance.js
+performance_bg.js
+performance_bg.wasm
--- a/examples/performance/Cargo.toml
+++ b/examples/performance/Cargo.toml
@ -0,0 +1,11 @@
+[package]
+name = "performance"
+version = "0.1.0"
+authors = ["Alex Crichton <alex@alexcrichton.com>"]
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = { path = "../.." }
+humantime = "1"
--- a/examples/performance/README.md
+++ 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
--- a/examples/performance/build.sh
+++ 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
--- a/examples/performance/index.html
+++ b/examples/performance/index.html
@ -0,0 +1,9 @@
+<html>
+  <head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
+  </head>
+  <body>
+    <script src='./index.js'></script>
+    <p>The developer console should have timing log messages in it</p>
+  </body>
+</html>
--- a/examples/performance/index.js
+++ 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());
--- a/examples/performance/package.json
+++ 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"
+  }
+}
--- a/examples/performance/src/lib.rs
+++ 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)
+}
--- a/examples/performance/webpack.config.js
+++ 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"
+};