fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-06-22 17:21:35 +00:00
Code Issues Projects Releases Wiki Activity

Add an example of importing non-browser functions

Browse Source 
Closes #208
This commit is contained in:
Alex Crichton
2018-05-23 12:06:49 -07:00
parent 4ddd93d75d
commit 151acf8eb3
12 changed files with 142 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Cargo.toml
View File

@ -45,6 +45,7 @@ members = [
"examples/add", "examples/add",
"examples/asm.js", "examples/asm.js",
"examples/char", "examples/char",
"examples/import_js",
] ]
[profile.release] [profile.release]

1
examples/README.md
View File

@ -34,5 +34,6 @@ The examples here are:
* `asm.js` - an example of using the `wasm2asm` tool from [binaryen] to convert * `asm.js` - an example of using the `wasm2asm` tool from [binaryen] to convert
the generated WebAssembly to normal JS the generated WebAssembly to normal JS
* `char` - an example of passing the rust `char` type to and from the js `string` type * `char` - an example of passing the rust `char` type to and from the js `string` type
* `import_js` - an example of importing local JS functionality into a crate
[binaryen]: https://github.com/WebAssembly/binaryen [binaryen]: https://github.com/WebAssembly/binaryen

4
examples/import_js/.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
package-lock.json
import_js.js
import_js_bg.js
import_js_bg.wasm

10
examples/import_js/Cargo.toml Normal file
View File

@ -0,0 +1,10 @@
[package]
name = "import_js"
version = "0.1.0"
authors = ["Alex Crichton <alex@alexcrichton.com>"]
[lib]
crate-type = ["cdylib"]
[dependencies]
wasm-bindgen = { path = "../.." }

20
examples/import_js/README.md Normal file
View File

@ -0,0 +1,20 @@
# Importing non-browser JS
This directory is an example of using the `#[wasm_bindgen]` macro to import the
JS defined by you rather than the browser.
You can build the example with:
```
$ ./build.sh
```
(or running the commands on Windows manually)
and then opening up `index.html` in a web browser and see some messages in the
console.
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/alexcrichton/wasm-bindgen/tree/master/examples/hello_world

12
examples/import_js/build.sh Executable file
View File

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

21
examples/import_js/defined-in-js.js Normal file
View File

@ -0,0 +1,21 @@
export function name() {
return 'World';
}
export class MyClass {
constructor() {
this._number = 42;
}
get number() {
return this._number;
}
set number(n) {
return this._number = n;
}
render() {
return `My number is: ${this.number}`;
}
}

9
examples/import_js/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>
<script src='./index.js'></script>
<p>Open up the developer console and you should see "Hello from Rust!"</p>
</body>
</html>

5
examples/import_js/index.js Normal file
View File

@ -0,0 +1,5 @@
// For more comments about what's going on here, check out the `hello_world`
// example
const rust = import("./import_js");
rust.then(m => m.run());

10
examples/import_js/package.json Normal file
View File

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

39
examples/import_js/src/lib.rs Normal file
View File

@ -0,0 +1,39 @@
#![feature(proc_macro, wasm_custom_section, wasm_import_module)]
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen(module = "./defined-in-js")]
extern {
fn name() -> String;
type MyClass;
#[wasm_bindgen(constructor)]
fn new() -> MyClass;
#[wasm_bindgen(method, getter)]
fn number(this: &MyClass) -> u32;
#[wasm_bindgen(method, setter)]
fn set_number(this: &MyClass, number: u32) -> MyClass;
#[wasm_bindgen(method)]
fn render(this: &MyClass) -> String;
}
// Import `console.log` so we can log something to the console
#[wasm_bindgen]
extern {
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
}
#[wasm_bindgen]
pub fn run() {
log(&format!("Hello, {}!", name()));
let x = MyClass::new();
assert_eq!(x.number(), 42);
x.set_number(10);
log(&x.render());
}

10
examples/import_js/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"
};