Add an example of namespaced APIs

By creating wasm modules from Rust!
2024-11-24 06:33:33 +03:00 · 2018-03-22 17:39:48 -07:00 · 2018-03-22 17:39:48 -07:00 · 4716752991
commit 4716752991
parent 8830f540a9
12 changed files with 137 additions and 0 deletions
--- a/Cargo.toml
+++ b/Cargo.toml
@ -31,6 +31,7 @@ members = [
  "examples/dom",
  "examples/math",
  "examples/performance",
+  "examples/wasm-in-wasm",
 ]

 [profile.release]
--- a/examples/README.md
+++ b/examples/README.md
@ -20,3 +20,5 @@ The examples here are:
  it from JS
 * `performance` - how to import APIs like `performance.now()` and time various
  operations in Rust
+* `wasm-in-wasm` - how to interact with namespaced APIs like
+  `WebAssembly.Module` and shows off creation of a WebAssembly module from Rust
--- a/examples/wasm-in-wasm/.gitignore
+++ b/examples/wasm-in-wasm/.gitignore
@ -0,0 +1,4 @@
+package-lock.json
+wasm_in_wasm.js
+wasm_in_wasm_bg.js
+wasm_in_wasm_bg.wasm
--- a/examples/wasm-in-wasm/Cargo.toml
+++ b/examples/wasm-in-wasm/Cargo.toml
@ -0,0 +1,10 @@
+[package]
+name = "wasm-in-wasm"
+version = "0.1.0"
+authors = ["Alex Crichton <alex@alexcrichton.com>"]
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = { path = "../.." }
--- a/examples/wasm-in-wasm/README.md
+++ b/examples/wasm-in-wasm/README.md
@ -0,0 +1,21 @@
+# WASM in WASM!
+
+This directory is an example of using the `#[wasm_bindgen]` macro to interact
+with namespaced APIs like `WebAssembly.Module` and friends. This example
+instantiates a wasm module (from Rust!) and then interacts with 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 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/wasm-in-wasm/build.sh
+++ b/examples/wasm-in-wasm/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/wasm_in_wasm.wasm --out-dir .
+#npm install
+npm run serve
--- a/examples/wasm-in-wasm/index.html
+++ b/examples/wasm-in-wasm/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 messages in it</p>
+  </body>
+</html>
--- a/examples/wasm-in-wasm/index.js
+++ b/examples/wasm-in-wasm/index.js
@ -0,0 +1,4 @@
+// For more comments about what's going on here, check out the `hello_world`
+// example
+const rust = import("./wasm_in_wasm");
+rust.then(m => m.run());
--- a/examples/wasm-in-wasm/package.json
+++ b/examples/wasm-in-wasm/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/wasm-in-wasm/src/add.wasm
+++ b/examples/wasm-in-wasm/src/add.wasm
--- a/examples/wasm-in-wasm/src/lib.rs
+++ b/examples/wasm-in-wasm/src/lib.rs
@ -0,0 +1,54 @@
+#![feature(proc_macro)]
+
+extern crate wasm_bindgen;
+
+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 Module;
+    #[wasm_bindgen(constructor, js_namespace = WebAssembly)]
+    fn new(data: &[u8]) -> Module;
+
+    type Instance;
+    #[wasm_bindgen(constructor, js_namespace = WebAssembly)]
+    fn new(module: Module) -> Instance;
+    #[wasm_bindgen(method, getter, js_namespace = WebAssembly)]
+    fn exports(this: &Instance) -> Exports;
+
+    type Exports;
+    #[wasm_bindgen(method, structural)]
+    fn add(this: &Exports, a: u32, b: u32) -> u32;
+    #[wasm_bindgen(method, getter, structural)]
+    fn memory(this: &Exports) -> Memory;
+
+    type Memory;
+    #[wasm_bindgen(method, js_namespace = WebAssembly)]
+    fn grow(this: &Memory, amt: u32) -> u32;
+
+    #[wasm_bindgen(js_namespace = console)]
+    fn log(a: &str);
+}
+
+macro_rules! println {
+    ($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
+}
+
+const WASM: &[u8] = include_bytes!("add.wasm");
+
+#[wasm_bindgen]
+pub fn run() {
+    println!("instantiating a new wasm module directly");
+    let a = Module::new(WASM);
+    let b = Instance::new(a);
+    let c = b.exports();
+
+    println!("1 + 2 = {}", c.add(1, 2));
+    let mem = c.memory();
+    println!("created module has {} pages of memory", mem.grow(0));
+    println!("giving the module 4 more pages of memory");
+    mem.grow(4);
+    println!("now the module has {} pages of memory", mem.grow(0));
+}
--- a/examples/wasm-in-wasm/webpack.config.js
+++ b/examples/wasm-in-wasm/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"
+};