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

examples: Add an example of using duck-typed interfaces

Browse Source
This commit is contained in:
Nick Fitzgerald 2018-09-11 16:29:25 -07:00
parent 27a7008764
commit a311c29f1d
11 changed files with 121 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -64,6 +64,7 @@ members = [
"examples/closures",
"examples/comments",
"examples/console_log",
"examples/duck-typed-interfaces",
"examples/dom",
"examples/fetch",
"examples/guide-supported-types-examples",

4
examples/duck-typed-interfaces/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
rust_duck_typed_interfaces.js
rust_duck_typed_interfaces_bg.js
rust_duck_typed_interfaces_bg.wasm

10
examples/duck-typed-interfaces/Cargo.toml Normal file
View File

@ -0,0 +1,10 @@
[package]
name = "rust-duck-typed-interfaces"
version = "0.1.0"
authors = ["The wasm-bindgen Developers"]
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = { path = "../.." }

15
examples/duck-typed-interfaces/README.md Normal file
View File

@ -0,0 +1,15 @@
# Canvas 2D Example
This directory is an example of using the `web-sys` crate to draw on a 2D
canvas.
You can build and run the example with:
```
$ ./build.sh
```
(or running the commands on Windows manually)
and then opening up `http://localhost:8080/` in a web browser should show a
smiley face drawn on canvas by Rust and WebAssembly.

15
examples/duck-typed-interfaces/build.sh Executable file
View File

@ -0,0 +1,15 @@
#!/bin/sh
# For more coments about what's going on here, see the `hello_world` example
set -ex
cd "$(dirname $0)"
cargo +nightly build --target wasm32-unknown-unknown
cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/debug/rust_duck_typed_interfaces.wasm --out-dir .
npm install
npm run serve

21
examples/duck-typed-interfaces/duck-typed-interfaces.js Normal file
View File

@ -0,0 +1,21 @@
import { make_em_quack_to_this } from "./rust_duck_typed_interfaces";
// All of these objects implement the `Quacks` interface!
const alex = {
quack: () => "you're not wrong..."
};
const ashley = {
quack: () => "<corgi.gif>"
};
const nick = {
quack: () => "rappers I monkey-flip em with the funky rhythm I be kickin"
};
// Get all our ducks in a row and call into wasm!
make_em_quack_to_this(alex);
make_em_quack_to_this(ashley);
make_em_quack_to_this(nick);

9
examples/duck-typed-interfaces/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>
<canvas id="canvas" height="150" width="150" />
<script src='./index.js'></script>
</body>
</html>

3
examples/duck-typed-interfaces/index.js Normal file
View File

@ -0,0 +1,3 @@
// For more comments about what's going on here, check out the `hello_world`
// example.
import('./duck-typed-interfaces');

10
examples/duck-typed-interfaces/package.json Normal file
View File

@ -0,0 +1,10 @@
{
"scripts": {
"serve": "webpack-dev-server"
},
"devDependencies": {
"webpack": "^4.11.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
}
}

23
examples/duck-typed-interfaces/src/lib.rs Executable file
View File

@ -0,0 +1,23 @@
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
/// Here is a duck-typed interface for any JavaScript object that has a `quack`
/// method.
///
/// Note that any attempts to check if an object is a `Quacks` with
/// `JsCast::is_instance_of` (i.e. the `instanceof` operator) will fail because
/// there is no JS class named `Quacks`.
#[wasm_bindgen]
extern {
pub type Quacks;
#[wasm_bindgen(structural, method)]
pub fn quack(this: &Quacks) -> String;
}
/// Next, we can export a function that takes any object that quacks:
#[wasm_bindgen]
pub fn make_em_quack_to_this(duck: &Quacks) {
let s = duck.quack();
// ...
}

10
examples/duck-typed-interfaces/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'
};