diff --git a/Cargo.toml b/Cargo.toml index 059f471e..6f93abd4 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -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", diff --git a/examples/duck-typed-interfaces/.gitignore b/examples/duck-typed-interfaces/.gitignore new file mode 100644 index 00000000..2a3ddc15 --- /dev/null +++ b/examples/duck-typed-interfaces/.gitignore @@ -0,0 +1,4 @@ +package-lock.json +rust_duck_typed_interfaces.js +rust_duck_typed_interfaces_bg.js +rust_duck_typed_interfaces_bg.wasm diff --git a/examples/duck-typed-interfaces/Cargo.toml b/examples/duck-typed-interfaces/Cargo.toml new file mode 100644 index 00000000..6fce01f5 --- /dev/null +++ b/examples/duck-typed-interfaces/Cargo.toml @@ -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 = "../.." } diff --git a/examples/duck-typed-interfaces/README.md b/examples/duck-typed-interfaces/README.md new file mode 100644 index 00000000..a5cf3773 --- /dev/null +++ b/examples/duck-typed-interfaces/README.md @@ -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. diff --git a/examples/duck-typed-interfaces/build.sh b/examples/duck-typed-interfaces/build.sh new file mode 100755 index 00000000..3476b4c1 --- /dev/null +++ b/examples/duck-typed-interfaces/build.sh @@ -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 diff --git a/examples/duck-typed-interfaces/duck-typed-interfaces.js b/examples/duck-typed-interfaces/duck-typed-interfaces.js new file mode 100644 index 00000000..df7c5ef5 --- /dev/null +++ b/examples/duck-typed-interfaces/duck-typed-interfaces.js @@ -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: () => "" +}; + +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); diff --git a/examples/duck-typed-interfaces/index.html b/examples/duck-typed-interfaces/index.html new file mode 100644 index 00000000..c13b999e --- /dev/null +++ b/examples/duck-typed-interfaces/index.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/examples/duck-typed-interfaces/index.js b/examples/duck-typed-interfaces/index.js new file mode 100644 index 00000000..fe8a21ef --- /dev/null +++ b/examples/duck-typed-interfaces/index.js @@ -0,0 +1,3 @@ +// For more comments about what's going on here, check out the `hello_world` +// example. +import('./duck-typed-interfaces'); diff --git a/examples/duck-typed-interfaces/package.json b/examples/duck-typed-interfaces/package.json new file mode 100644 index 00000000..41eba8c8 --- /dev/null +++ b/examples/duck-typed-interfaces/package.json @@ -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" + } +} diff --git a/examples/duck-typed-interfaces/src/lib.rs b/examples/duck-typed-interfaces/src/lib.rs new file mode 100755 index 00000000..dfb6adb8 --- /dev/null +++ b/examples/duck-typed-interfaces/src/lib.rs @@ -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(); + // ... +} diff --git a/examples/duck-typed-interfaces/webpack.config.js b/examples/duck-typed-interfaces/webpack.config.js new file mode 100644 index 00000000..dce27149 --- /dev/null +++ b/examples/duck-typed-interfaces/webpack.config.js @@ -0,0 +1,10 @@ +const path = require('path'); + +module.exports = { + entry: './index.js', + output: { + path: path.resolve(__dirname, 'dist'), + filename: 'index.js', + }, + mode: 'development' +};