fluencelabs/wasm-bindgen
1
0
Fork 0
mirror of https://github.com/fluencelabs/wasm-bindgen synced 2025-04-25 06:02:13 +00:00
Code Issues Projects Releases Wiki Activity

Add an example of console.log

Browse Source 
Also clean up some other exampels
This commit is contained in:
Alex Crichton 2018-03-09 10:25:19 -08:00
parent 8b74c6c6ec
commit d8e5930799
17 changed files with 111 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

@ -38,6 +38,8 @@ script:
(cd examples/hello_world/chrome && ./build.sh)
- |
(cd examples/smorgasboard && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
- |
(cd examples/console_log && sed -i 's/: "webpack-dev-server"/: "webpack"/' package.json && ./build.sh)
notifications:
email:

1
Cargo.toml
View File

@ -27,4 +27,5 @@ members = [
"crates/wasm-bindgen-cli",
"examples/hello_world",
"examples/smorgasboard",
"examples/console_log",
]

2
examples/README.md
View File

@ -9,6 +9,8 @@ The examples here are:
* `hello_world` - the "hello world" of `#[wasm_bindgen]`, aka throwing up a
dialog greeting you
* `console_log` - a showcase of `#[wasm_bindgen]` importing classes and how to
bind `console.log`
* `smorgasboard` - a bunch of features all thrown into one, showing off the
various capabilities of the `#[wasm_bindgen]` macro and what you can do with
it from JS

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

@ -0,0 +1,4 @@
package-lock.json
console_log.js
console_log_bg.js
console_log_bg.wasm

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

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

19
examples/console_log/README.md Normal file
View File

@ -0,0 +1,19 @@
# `console.log`
This directory is an example of using the `#[wasm_bindgen]` macro to import the
`console.log` function and call it
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 should show a dialog!
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/console_log/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/wasm-bindgen-cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/debug/console_log.wasm --out-dir .
npm install
npm run serve

9
examples/console_log/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/console_log/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("./console_log");
rust.then(m => m.run());

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

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

18
examples/console_log/src/lib.rs Normal file
View File

@ -0,0 +1,18 @@
#![feature(proc_macro)]
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
type console;
#[wasm_bindgen(static = console)]
fn log(s: &str);
}
#[wasm_bindgen]
pub fn run() {
console::log("Hello from Rust!");
}

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

4
examples/hello_world/build.sh
View File

@ -3,7 +3,7 @@
set -ex
# Build the `hello_world.wasm` file using Cargo/rustc
cargo +nightly build --target wasm32-unknown-unknown --release
cargo +nightly build --target wasm32-unknown-unknown
# Run the `wasm-bindgen` CLI tool to postprocess the wasm file emitted by the
# Rust compiler to emit the JS support glue that's necessary
@ -12,7 +12,7 @@ cargo +nightly build --target wasm32-unknown-unknown --release
# usage you'd use the commented out version below
cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/release/hello_world.wasm --out-dir .
../../target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir .
# wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
# Finally, package everything up using Webpack and start a server so we can

4
examples/hello_world/chrome/build.sh
View File

@ -3,9 +3,9 @@
set -ex
# This is the same as the directory above this.
cargo +nightly build --target wasm32-unknown-unknown --release
cargo +nightly build --target wasm32-unknown-unknown
cargo +nightly run -p wasm-bindgen-cli --bin wasm-bindgen -- \
../../../target/wasm32-unknown-unknown/release/hello_world.wasm --out-dir .
../../../target/wasm32-unknown-unknown/debug/hello_world.wasm --out-dir .
# To avoid a bug occurring when webpack, wasm, and Chrome are used together, we
# convert the .wasm module to a .js module that embeds the wasm bytecode. To

15
examples/hello_world/index.js
View File

@ -1,17 +1,6 @@
// Note that a dynamic `import` statement here is required due to
// webpack/webpack#6615, but in theory `import { greet } from './hello_world';`
// will work here one day as well!
const js = import("./hello_world");
const rust = import("./hello_world");
Promise.all([
js,
// Due to https://github.com/webpack/webpack/issues/6475, Webpack does not
// support sync wasm imports larger than 4kB in Chrome. We use wasm2es6js to
// hack around this and need to defer our call until the converted wasm
// module is asynchronously loaded. Uncomment this line to enable.
// This hack is not necessary in Firefox.
// import("./hello_world_bg.js").then(wasm => wasm.booted),
]).then(([js]) => {
js.greet("World!");
});
rust.then(m => m.greet("World!"));

3
examples/hello_world/src/lib.rs
View File

@ -10,7 +10,6 @@ extern {
}
#[wasm_bindgen]
#[no_mangle]
pub extern fn greet(name: &str) {
pub fn greet(name: &str) {
alert(&format!("Hello, {}!", name));
}

4
examples/smorgasboard/build.sh
View File

@ -2,13 +2,13 @@
set -ex
cargo +nightly build --target wasm32-unknown-unknown --release
cargo +nightly build --target wasm32-unknown-unknown
# Here we're using the version of the CLI in this repository, but for external
# usage you'd use the commented out version below
cargo +nightly run --manifest-path ../../crates/wasm-bindgen-cli/Cargo.toml \
--bin wasm-bindgen -- \
../../target/wasm32-unknown-unknown/release/smorgasboard.wasm --out-dir .
../../target/wasm32-unknown-unknown/debug/smorgasboard.wasm --out-dir .
# wasm-bindgen ../../target/wasm32-unknown-unknown/hello_world.wasm --out-dir .
npm install