fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-06-09 19:11:21 +00:00
Code Issues Projects Releases Wiki Activity

Add an example of DOM access

Browse Source
This commit is contained in:
Alex Crichton 2018-03-21 08:26:00 -07:00
parent 8e894fcfc5
commit dd054fa357
11 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -28,6 +28,7 @@ members = [
"examples/hello_world", "examples/hello_world",
"examples/smorgasboard", "examples/smorgasboard",
"examples/console_log", "examples/console_log",
"examples/dom",
] ]
[profile.release] [profile.release]

2
examples/README.md
View File

@ -11,6 +11,8 @@ The examples here are:
dialog greeting you dialog greeting you
* `console_log` - a showcase of `#[wasm_bindgen]` importing classes and how to * `console_log` - a showcase of `#[wasm_bindgen]` importing classes and how to
bind `console.log` 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 * `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 various capabilities of the `#[wasm_bindgen]` macro and what you can do with
it from JS it from JS

4
examples/dom/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
dom.js
dom_bg.js
dom_bg.wasm

10
examples/dom/Cargo.toml Normal file
View File

@ -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 = "../.." }

22
examples/dom/README.md Normal file
View File

@ -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

12
examples/dom/build.sh Executable file
View File

@ -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

9
examples/dom/index.html Normal file
View File

@ -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>

4
examples/dom/index.js Normal file
View File

@ -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());

10
examples/dom/package.json Normal file
View File

@ -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"
}
}

39
examples/dom/src/lib.rs Normal file
View File

@ -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);
}

10
examples/dom/webpack.config.js Normal file
View File

@ -0,0 +1,10 @@
const path = require('path');
module.exports = {
entry: "./index.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "index.js",
},
mode: "development"
};