fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-03-28 07:51:07 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1098 from fitzgen/raf-loop-example

Browse Source 
examples: Add a requestAnimationFrame loop example
This commit is contained in:
Alex Crichton 2018-12-10 14:54:08 -08:00 committed by GitHub
commit 3d2f548ce2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 187 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -77,6 +77,7 @@ members = [
"examples/paint", "examples/paint",
"examples/performance", "examples/performance",
"examples/raytrace-parallel", "examples/raytrace-parallel",
"examples/request-animation-frame",
"examples/todomvc", "examples/todomvc",
"examples/wasm-in-wasm", "examples/wasm-in-wasm",
"examples/wasm2js", "examples/wasm2js",

4
examples/request-animation-frame/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
request_animation_frame.js
request_animation_frame_bg.js
request_animation_frame_bg.wasm

21
examples/request-animation-frame/Cargo.toml Normal file
View File

@ -0,0 +1,21 @@
[package]
name = "request-animation-frame"
version = "0.1.0"
authors = ["The wasm-bindgen Developers"]
edition = "2018"
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = "0.2.29"
[dependencies.web-sys]
version = "0.3.4"
features = [
'Document',
'Element',
'HtmlElement',
'Node',
'Window',
]

17
examples/request-animation-frame/README.md Normal file
View File

@ -0,0 +1,17 @@
# web-sys: `requestAnimationFrame` loop
[View documentation for this example online][dox] or [View compiled example
online][compiled]
[compiled]: https://rustwasm.github.io/wasm-bindgen/exbuild/request-animation-frame/
[dox]: https://rustwasm.github.io/wasm-bindgen/examples/request-animation-frame.html
You can build the example locally with:
```
$ ./build.sh
```
(or running the commands on Windows manually)
and then visiting http://localhost:8080 in a browser should run the example!

12
examples/request-animation-frame/build.sh Executable file
View File

@ -0,0 +1,12 @@
#!/bin/sh
# For more comments about what's going on here, see the `hello_world` example
set -ex
cargo build --target wasm32-unknown-unknown
cargo run --manifest-path ../../crates/cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/debug/request_animation_frame.wasm --out-dir .
npm install
npm run serve

8
examples/request-animation-frame/index.html Normal file
View File

@ -0,0 +1,8 @@
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
</head>
<body>
<p>A greeting from rust looks like...</p>
</body>
</html>

4
examples/request-animation-frame/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
import('./request_animation_frame')
.catch(console.error);

13
examples/request-animation-frame/package.json Normal file
View File

@ -0,0 +1,13 @@
{
"scripts": {
"build": "webpack",
"serve": "webpack-dev-server"
},
"devDependencies": {
"text-encoding": "^0.7.0",
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.11.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.0"
}
}

57
examples/request-animation-frame/src/lib.rs Normal file
View File

@ -0,0 +1,57 @@
use std::cell::RefCell;
use std::rc::Rc;
use wasm_bindgen::prelude::*;
use wasm_bindgen::JsCast;
fn window() -> web_sys::Window {
web_sys::window().expect("no global `window` exists")
}
fn request_animation_frame(f: &Closure<FnMut()>) {
window()
.request_animation_frame(f.as_ref().unchecked_ref())
.expect("should register `requestAnimationFrame` OK");
}
fn document() -> web_sys::Document {
window()
.document()
.expect("should have a document on window")
}
fn body() -> web_sys::HtmlElement {
document().body().expect("document should have a body")
}
// This function is automatically invoked after the wasm module is instantiated.
#[wasm_bindgen(start)]
pub fn run() -> Result<(), JsValue> {
let f = Rc::new(RefCell::new(None));
let g = f.clone();
{
let mut i = 0;
*g.borrow_mut() = Some(Closure::wrap(Box::new(move || {
if i > 300 {
body().set_text_content(Some("All done!"));
// Drop our handle to this closure so that it will get cleaned
// up once we return.
let _ = f.borrow_mut().take();
return;
}
// Set the body's text content to how many times this
// requestAnimationFrame callback has fired.
i += 1;
let text = format!("requestAnimationFrame has been called {} times.", i);
body().set_text_content(Some(&text));
// Schedule ourself for another requestAnimationFrame callback.
request_animation_frame(f.borrow().as_ref().unwrap());
}) as Box<FnMut()>));
}
request_animation_frame(g.borrow().as_ref().unwrap());
Ok(())
}

23
examples/request-animation-frame/webpack.config.js Normal file
View File

@ -0,0 +1,23 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html"
}),
// Have this example work in Edge which doesn't ship `TextEncoder` or
// `TextDecoder` at this time.
new webpack.ProvidePlugin({
TextDecoder: ['text-encoding', 'TextDecoder'],
TextEncoder: ['text-encoding', 'TextEncoder']
})
],
mode: 'development'
};

1
guide/src/SUMMARY.md
View File

@ -25,6 +25,7 @@
- [web-sys: `canvas` Julia set](./examples/julia.md) - [web-sys: `canvas` Julia set](./examples/julia.md)
- [web-sys: WebAudio](./examples/web-audio.md) - [web-sys: WebAudio](./examples/web-audio.md)
- [web-sys: WebGL](./examples/webgl.md) - [web-sys: WebGL](./examples/webgl.md)
- [web-sys: `requestAnimationFrame`](./examples/request-animation-frame.md)
- [web-sys: A Simple Paint Program](./examples/paint.md) - [web-sys: A Simple Paint Program](./examples/paint.md)
- [Parallel Raytracing](./examples/raytrace.md) - [Parallel Raytracing](./examples/raytrace.md)
- [web-sys: A TODO MVC App](./examples/todomvc.md) - [web-sys: A TODO MVC App](./examples/todomvc.md)

26
guide/src/examples/request-animation-frame.md Normal file
View File

@ -0,0 +1,26 @@
# `web-sys`: A `requestAnimationFrame` Loop
[View full source code][code] or [view the compiled example online][online]
[online]: https://rustwasm.github.io/wasm-bindgen/exbuild/request-animation-frame/
[code]: https://github.com/rustwasm/wasm-bindgen/tree/master/examples/request-animation-frame
This is an example of a `requestAnimationFrame` loop using the `web-sys` crate!
It renders a count of how many times a `requestAnimationFrame` callback has been
invoked and then it breaks out of the `requestAnimationFrame` loop after 300
iterations.
## `Cargo.toml`
You can see here how we depend on `web-sys` and activate associated features to
enable all the various APIs:
```toml
{{#include ../../../examples/request-animation-frame/Cargo.toml}}
```
## `src/lib.rs`
```rust
{{#include ../../../examples/request-animation-frame/src/lib.rs}}
```