Add an example of DOM access

alexcrichton · Mar 21, 2018 · dd054fa · dd054fa
1 parent 8e894fc
commit dd054fa
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 0 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -28,6 +28,7 @@ members = [
   "examples/hello_world",
   "examples/smorgasboard",
   "examples/console_log",
+  "examples/dom",
 ]
 
 [profile.release]

diff --git a/examples/README.md b/examples/README.md
@@ -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`
+* `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
   various capabilities of the `#[wasm_bindgen]` macro and what you can do with
   it from JS
diff --git a/examples/dom/.gitignore b/examples/dom/.gitignore
@@ -0,0 +1,4 @@
+package-lock.json
+dom.js
+dom_bg.js
+dom_bg.wasm
diff --git a/examples/dom/Cargo.toml b/examples/dom/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "dom"
+version = "0.1.0"
+authors = ["Alex Crichton <alex@alexcrichton.com>"]
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+wasm-bindgen = { path = "../.." }
diff --git a/examples/dom/README.md b/examples/dom/README.md
@@ -0,0 +1,22 @@
+# DOM access
+
+This directory is an example of using the `#[wasm_bindgen]` macro to interact
+with the DOM, specifically the `document` object. You'll see here a few examples
+of defining access to the global `document` variable as well as appending a new
+HTML node to 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
diff --git a/examples/dom/build.sh b/examples/dom/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/dom.wasm --out-dir .
+npm install
+npm run serve
diff --git a/examples/dom/index.html b/examples/dom/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>A greeting from rust looks like...</p>
+  </body>
+</html>
diff --git a/examples/dom/index.js b/examples/dom/index.js
@@ -0,0 +1,4 @@
+// For more comments about what's going on here, check out the `hello_world`
+// example
+const rust = import("./dom");
+rust.then(m => m.run());
diff --git a/examples/dom/package.json b/examples/dom/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/dom/src/lib.rs b/examples/dom/src/lib.rs
@@ -0,0 +1,39 @@
+#![feature(proc_macro)]
+
+extern crate wasm_bindgen;
+
+use wasm_bindgen::prelude::*;
+
+// Definitions of the functionality available in JS, which wasm-bindgen will
+// generate shims for today (and eventually these should be near-0 cost!)
+//
+// These definitions need to be hand-written today but the current vision is
+// that we'll use WebIDL to generate this `extern` block into a crate which you
+// can link and import. There's a tracking issue for this at
+// https://github.com/alexcrichton/wasm-bindgen/issues/42
+//
+// In the meantime these are written out by hand and correspond to the names and
+// signatures documented on MDN, for example
+#[wasm_bindgen]
+extern {
+    type HTMLDocument;
+    static document: HTMLDocument;
+    #[wasm_bindgen(method)]
+    fn createElement(this: &HTMLDocument, tagName: &str) -> Element;
+    #[wasm_bindgen(method, getter)]
+    fn body(this: &HTMLDocument) -> Element;
+
+    type Element;
+    #[wasm_bindgen(method, setter)]
+    fn set_innerHTML(this: &Element, html: &str);
+    #[wasm_bindgen(method)]
+    fn appendChild(this: &Element, other: Element);
+}
+
+// Called by our JS entry point to run the example
+#[wasm_bindgen]
+pub fn run() {
+    let val = document.createElement("p");
+    val.set_innerHTML("Hello from Rust!");
+    document.body().appendChild(val);
+}
diff --git a/examples/dom/webpack.config.js b/examples/dom/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"
+};