From 158b95c29b99d33e8604dd11b7be5960ee416c50 Mon Sep 17 00:00:00 2001 From: Alex Crichton Date: Tue, 17 Apr 2018 13:51:01 -0700 Subject: [PATCH] Add WebAssembly Studio links to examples/README Should hopefully make it much easier to get off the ground running and exploring! --- README.md | 16 +++++++++++----- examples/README.md | 9 ++++++--- examples/closures/README.md | 2 ++ examples/console_log/README.md | 2 ++ examples/dom/README.md | 2 ++ examples/hello_world/README.md | 4 +++- examples/math/README.md | 2 ++ examples/performance/README.md | 2 ++ examples/smorgasboard/README.md | 2 ++ 9 files changed, 32 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 869ed458..335d9fc8 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ what this crate can do, check out the [design doc]. [perf-ex]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/performance [smorg-ex]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/smorgasboard +[hello-online]: https://webassembly.studio/?f=gzubao6tg3 + ## Basic usage Let's implement the equivalent of "Hello, world!" for this crate. @@ -46,7 +48,9 @@ Let's implement the equivalent of "Hello, world!" for this crate. [rustup]: https://rustup.rs -First up, let's install the tools we need +If you'd like you dive [straight into an online example][hello-online], but +if you'd prefer to follow along in your own console let's install the tools we +need: ``` $ rustup target add wasm32-unknown-unknown @@ -208,9 +212,10 @@ If you open https://localhost:8080 in a browser you should see a `Hello, world!` dialog pop up! This works in Firefox out of the box but not in Chrome due to a webpack issue. See [the hello_world README][hello-readme] for a workaround. -If that was all a bit much, no worries! You can [follow along -online][hello-tree] to see all the files necessary as well as a script to set it -all up. +If that was all a bit much, no worries! You can [execute this code +online][hello-online] thanks to [WebAssembly Studio](https://webassembly.studio) +or you can [follow along on GitHUb][hello-tree] to see all the files necessary +as well as a script to set it all up. [hello-tree]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/hello_world [hello-readme]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/hello_world/README.md @@ -251,7 +256,8 @@ classes/functions within. ## What else can we do? -Much more! Here's a taste of various features you can use in this project: +Much more! Here's a taste of various features you can use in this project. You +can also [explore this code online](https://webassembly.studio/?f=t61j18noqz): ```rust // src/lib.rs diff --git a/examples/README.md b/examples/README.md index da64b936..38067e8f 100644 --- a/examples/README.md +++ b/examples/README.md @@ -1,9 +1,12 @@ # Examples This directory contains a number of examples of the `#[wasm_bindgen]` macro and -how to display them in the browser. Each directory should contain a `build.sh` -which assembles all the relevant files, and then if you open up `index.html` in -a web browser you should be able to see everything in action! +how to display them in the browser. Each directory contains a README with a link +to https://webassembly.studio so you can also explore the example online +(apologies if they're out of sync!), and each directory also contains a +`build.sh` which assembles all the relevant files locally. If you open up +`index.html` in a web browser you should be able to see everything in action +when using `build.sh`! The examples here are: diff --git a/examples/closures/README.md b/examples/closures/README.md index b3ee9728..25d1613b 100644 --- a/examples/closures/README.md +++ b/examples/closures/README.md @@ -1,5 +1,7 @@ # Closure examples +[View this example online](https://webassembly.studio/?f=g3hc1qs6tka) + This directory is an example of using the `#[wasm_bindgen]` macro with closures to interact with the DOM. diff --git a/examples/console_log/README.md b/examples/console_log/README.md index e9db35ae..24999015 100644 --- a/examples/console_log/README.md +++ b/examples/console_log/README.md @@ -1,5 +1,7 @@ # `console.log` +[View this example online](https://webassembly.studio/?f=ppd7u8k9i9) + This directory is an example of using the `#[wasm_bindgen]` macro to import the `console.log` function and call it diff --git a/examples/dom/README.md b/examples/dom/README.md index dbf412cb..a4f0f0fb 100644 --- a/examples/dom/README.md +++ b/examples/dom/README.md @@ -1,5 +1,7 @@ # DOM access +[View this example online](https://webassembly.studio/?f=54xnz04tcke) + 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 diff --git a/examples/hello_world/README.md b/examples/hello_world/README.md index dad56ade..07350bc6 100644 --- a/examples/hello_world/README.md +++ b/examples/hello_world/README.md @@ -1,9 +1,11 @@ # Hello, World! +[View this example online](https://webassembly.studio/?f=gzubao6tg3) + This directory is an example of using the `#[wasm_bindgen]` macro to create an entry point that's called from the browser and then displays a dialog. -You can build the example with: +You can build the example locally with: ``` $ ./build.sh diff --git a/examples/math/README.md b/examples/math/README.md index 7191365c..a3740215 100644 --- a/examples/math/README.md +++ b/examples/math/README.md @@ -1,5 +1,7 @@ # `Math` +[View this example online](https://webassembly.studio/?f=ffnm4kpzmib) + This directory is an example of using the `#[wasm_bindgen]` macro to import the `Math` object and invoke various functions on it. diff --git a/examples/performance/README.md b/examples/performance/README.md index 13370a47..565d84f5 100644 --- a/examples/performance/README.md +++ b/examples/performance/README.md @@ -1,5 +1,7 @@ # `performance` +[View this example online](https://webassembly.studio/?f=6gxcp4f4953) + This directory is an example of using the `#[wasm_bindgen]` macro to interact with global APIs like `performance.now()` to learn about the current time in Rust. diff --git a/examples/smorgasboard/README.md b/examples/smorgasboard/README.md index f80f4983..4dd7a62d 100644 --- a/examples/smorgasboard/README.md +++ b/examples/smorgasboard/README.md @@ -1,5 +1,7 @@ # Smorgasboard of examples +[View this example online](https://webassembly.studio/?f=t61j18noqz) + This directory is an smattering of examples using the `#[wasm_bindgen]` macro. Here we see passing strings back and for, exporting classes from Rust to JS, importing classes from JS to Rust, etc.