diff --git a/Cargo.toml b/Cargo.toml index 84b8b141..7aba0185 100644 --- 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 index eebc6889..5d0d6045 100644 --- 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 new file mode 100644 index 00000000..1fbaedd8 --- /dev/null +++ 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 new file mode 100644 index 00000000..f0a0cd96 --- /dev/null +++ b/examples/dom/Cargo.toml @@ -0,0 +1,10 @@ +[package] +name = "dom" +version = "0.1.0" +authors = ["Alex Crichton "] + +[lib] +crate-type = ["cdylib"] + +[dependencies] +wasm-bindgen = { path = "../.." } diff --git a/examples/dom/README.md b/examples/dom/README.md new file mode 100644 index 00000000..dbf412cb --- /dev/null +++ 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 new file mode 100755 index 00000000..91f186da --- /dev/null +++ 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 new file mode 100644 index 00000000..4c18b0c2 --- /dev/null +++ b/examples/dom/index.html @@ -0,0 +1,9 @@ + + + + + + +

A greeting from rust looks like...

+ + diff --git a/examples/dom/index.js b/examples/dom/index.js new file mode 100644 index 00000000..d47e9abd --- /dev/null +++ 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 new file mode 100644 index 00000000..408b462e --- /dev/null +++ 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 new file mode 100644 index 00000000..c34bc0ca --- /dev/null +++ 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 new file mode 100644 index 00000000..5910e2ae --- /dev/null +++ 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" +};