diff --git a/.travis.yml b/.travis.yml index f2222c71..306deeef 100644 --- a/.travis.yml +++ b/.travis.yml @@ -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: diff --git a/Cargo.toml b/Cargo.toml index ea24816e..f09b8c48 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -27,4 +27,5 @@ members = [ "crates/wasm-bindgen-cli", "examples/hello_world", "examples/smorgasboard", + "examples/console_log", ] diff --git a/examples/README.md b/examples/README.md index 36162a4a..eebc6889 100644 --- a/examples/README.md +++ b/examples/README.md @@ -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 diff --git a/examples/console_log/.gitignore b/examples/console_log/.gitignore new file mode 100644 index 00000000..4fd1390e --- /dev/null +++ b/examples/console_log/.gitignore @@ -0,0 +1,4 @@ +package-lock.json +console_log.js +console_log_bg.js +console_log_bg.wasm diff --git a/examples/console_log/Cargo.toml b/examples/console_log/Cargo.toml new file mode 100644 index 00000000..25761c2d --- /dev/null +++ b/examples/console_log/Cargo.toml @@ -0,0 +1,10 @@ +[package] +name = "console_log" +version = "0.1.0" +authors = ["Alex Crichton "] + +[lib] +crate-type = ["cdylib"] + +[dependencies] +wasm-bindgen = { path = "../.." } diff --git a/examples/console_log/README.md b/examples/console_log/README.md new file mode 100644 index 00000000..e9db35ae --- /dev/null +++ b/examples/console_log/README.md @@ -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 diff --git a/examples/console_log/build.sh b/examples/console_log/build.sh new file mode 100755 index 00000000..be5fe2ff --- /dev/null +++ b/examples/console_log/build.sh @@ -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 diff --git a/examples/console_log/index.html b/examples/console_log/index.html new file mode 100644 index 00000000..14e4ff72 --- /dev/null +++ b/examples/console_log/index.html @@ -0,0 +1,9 @@ + + + + + + +

Open up the developer console and you should see "Hello from Rust!"

+ + diff --git a/examples/console_log/index.js b/examples/console_log/index.js new file mode 100644 index 00000000..73304d82 --- /dev/null +++ b/examples/console_log/index.js @@ -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()); diff --git a/examples/console_log/package.json b/examples/console_log/package.json new file mode 100644 index 00000000..408b462e --- /dev/null +++ b/examples/console_log/package.json @@ -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" + } +} diff --git a/examples/console_log/src/lib.rs b/examples/console_log/src/lib.rs new file mode 100644 index 00000000..9ce4cabe --- /dev/null +++ b/examples/console_log/src/lib.rs @@ -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!"); +} diff --git a/examples/console_log/webpack.config.js b/examples/console_log/webpack.config.js new file mode 100644 index 00000000..5910e2ae --- /dev/null +++ b/examples/console_log/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" +}; diff --git a/examples/hello_world/build.sh b/examples/hello_world/build.sh index 770873c5..aa1d24b0 100755 --- a/examples/hello_world/build.sh +++ b/examples/hello_world/build.sh @@ -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 diff --git a/examples/hello_world/chrome/build.sh b/examples/hello_world/chrome/build.sh index 11625085..c4f2f1b9 100755 --- a/examples/hello_world/chrome/build.sh +++ b/examples/hello_world/chrome/build.sh @@ -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 diff --git a/examples/hello_world/index.js b/examples/hello_world/index.js index c83e118e..4312dbdc 100644 --- a/examples/hello_world/index.js +++ b/examples/hello_world/index.js @@ -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!")); diff --git a/examples/hello_world/src/lib.rs b/examples/hello_world/src/lib.rs index 0533cdc8..d4fb8e90 100644 --- a/examples/hello_world/src/lib.rs +++ b/examples/hello_world/src/lib.rs @@ -10,7 +10,6 @@ extern { } #[wasm_bindgen] -#[no_mangle] -pub extern fn greet(name: &str) { +pub fn greet(name: &str) { alert(&format!("Hello, {}!", name)); } diff --git a/examples/smorgasboard/build.sh b/examples/smorgasboard/build.sh index a28ec2e1..ccd66b21 100755 --- a/examples/smorgasboard/build.sh +++ b/examples/smorgasboard/build.sh @@ -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