fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-06-13 04:51:23 +00:00
Code Issues Projects Releases Wiki Activity

Reorganize and rewrite examples

Browse Source 
This commit is a large-ish scale reorganization of our examples. The
main goal here is to have a dedicated section of the guide for example,
and all examples will be listed there. Each example's `README` is now
just boilerplate pointing at the guide along with a blurb about how to
run it.

Some examples like `math` and `smorgasboard` have been deleted as they
didn't really serve much purpose, and others like `closures` have been
rewritten with `web-sys` instead of hand-bound bindings.

Overall it's hoped that this puts us in a good and consistent state for
our examples, with all of them being described in the guide, excerpts
are in the guide, and they're all relatively idiomatically using
`web-sys`.
This commit is contained in:
Alex Crichton
2018-09-20 16:20:42 -07:00
parent a85e49a2b4
commit 3efe51eb8b
128 changed files with 939 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/console_log/Cargo.toml
View File

@ -8,3 +8,4 @@ crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = { path = "../.." }
web-sys = { path = '../../crates/web-sys' }

16
examples/console_log/README.md
View File

@ -1,13 +1,10 @@
# `console.log`
[View this example online](https://webassembly.studio/?f=ppd7u8k9i9)
[View documentation for this example online][dox]
[dox]: https://rustwasm.github.io/wasm-bindgen/examples/console-log.html
This directory is an example of two ways to get access to the `console.log` function.
The first way uses the `#[wasm_bindgen]` macro to import the function and call it.
The second way uses the binding from the `web-sys` crate.
You can build the example with:
You can build the example locally with:
```
$ ./build.sh
@ -15,9 +12,4 @@ $ ./build.sh
(or running the commands on Windows manually)
and then opening up `index.html` in a web browser should show a dialog!
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/rustwasm/wasm-bindgen/tree/master/examples/hello_world
and then visiting http://localhost:8080 in a browser should run the example!

1
examples/console_log/index.html
View File

@ -3,7 +3,6 @@
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<script src='./index.js'></script>
<p>Open up the developer console and you should see "Hello from Rust!"</p>
</body>
</html>

54
examples/console_log/src/lib.rs
View File

@ -1,21 +1,69 @@
extern crate wasm_bindgen;
extern crate web_sys;
use wasm_bindgen::prelude::*;
// ... or you can manually write the bindings yourself
#[wasm_bindgen]
pub fn run() {
bare_bones();
using_a_macro();
using_web_sys();
}
// First up let's take a look of binding `console.log` manually, without the
// help of `web_sys`. Here we're writing the `#[wasm_bindgen]` annotations
// manually ourselves, and the correctness of our program relies on the
// correctness of these annotations!
#[wasm_bindgen]
extern "C" {
// Use `js_namespace` here to bind `console.log(..)` instead of just
// `log(..)`
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
// The `console.log` is quite polymorphic, so we can bind it with multiple
// signatures. Note that we need to use `js_name` to ensure we always call
// `log` in JS.
#[wasm_bindgen(js_namespace = console, js_name = log)]
fn log_u32(a: u32);
// Multiple arguments too!
#[wasm_bindgen(js_namespace = console, js_name = log)]
fn log_many(a: &str, b: &str);
}
#[wasm_bindgen]
pub fn run() {
fn bare_bones() {
log("Hello from Rust!");
log_u32(42);
log_many("Logging", "many values!");
}
// Next let's define a macro that's like `println!`, only it works for
// `console.log`. Note that `println!` doesn't actually work on the wasm target
// because the standard library currently just eats all output. To get
// `println!`-like behavior in your app you'll likely want a macro like this.
macro_rules! console_log {
// Note that this is using the `log` function imported above during
// `bare_bones`
($($t:tt)*) => (log(&format_args!($($t)*).to_string()))
}
fn using_a_macro() {
console_log!("Hello {}!", "world");
console_log!("Let's print some numbers...");
console_log!("1 + 3 = {}", 1 + 3);
}
// And finally, we don't even have to define the `log` function ourselves! The
// `web_sys` crate already has it defined for us.
fn using_web_sys() {
use web_sys::console;
console::log_1(&"Hello using web-sys".into());
let js: JsValue = 4.into();
console::log_2(&"Logging arbitrary values looks like".into(), &js);
}