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

Add an example of wasm2asm and wasm-bindgen

Browse Source 
This commit adds an example of executing the `wasm2asm` tool to generate asm.js
output instead of WebAssembly. This is often useful when supporting older
browsers, such as IE 11, that doesn't have native support for WebAssembly.
This commit is contained in:
Alex Crichton
2018-04-30 13:22:46 -07:00
parent 6f95e5c531
commit dadcff15ef
14 changed files with 327 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/asm.js/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
package-lock.json
asmjs*

14
examples/asm.js/Cargo.toml Normal file
View File

@ -0,0 +1,14 @@
[package]
name = "asmjs"
version = "0.1.0"
authors = ["Alex Crichton <alex@alexcrichton.com>"]
[lib]
crate-type = ["cdylib"]
[dependencies]
# Here we're using a path dependency to use what's already in this repository,
# but you'd use the commented out version below if you're copying this into your
# project.
wasm-bindgen = { path = "../.." }
#wasm-bindgen = "0.2"

23
examples/asm.js/README.md Normal file
View File

@ -0,0 +1,23 @@
# WebAssembly to asm.js
This directory is an example of using [binaryen]'s `wasm2asm` tool to convert
the wasm output of `wasm-bindgen` to a normal JS file that can be executed like
asm.js.
You can build the example locally with:
```
$ ./build.sh
```
When opened in a web browser this should print "Hello, World!" to the console.
This example uses the `wasm2es6js` tool to convert the wasm file to an ES module
that's implemented with asm.js instead of WebAssembly. The conversion to asm.js
is done by [binaryen]'s `wasm2asm` tool internally.
Note that the `wasm2asm` tool is still pretty early days so there's likely to be
a number of bugs to run into or work around. If any are encountered though
please feel free to report them upstream!
[binaryen]: https://github.com/WebAssembly/binaryen

25
examples/asm.js/build.sh Executable file
View File

@ -0,0 +1,25 @@
#!/bin/sh
set -ex
# Compile our wasm module
cargo +nightly build --target wasm32-unknown-unknown --release
# Run wasm-bindgen, and note that the `--no-demangle` argument is here is
# important for compatibility with wasm2asm!
cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
--bin wasm-bindgen -- \
--no-demangle \
../../target/wasm32-unknown-unknown/release/asmjs.wasm --out-dir .
# Run the `wasm2es6js` primarily with the `--wasm2asm` flag, which will
# internally execute `wasm2asm` as necessary
cargo +nightly run --manifest-path ../../crates/cli/Cargo.toml \
--bin wasm2es6js -- \
asmjs_bg.wasm --wasm2asm -o asmjs_bg.js
# Move our original wasm out of the way to avoid cofusing Webpack.
mv asmjs_bg.wasm asmjs_bg.bak.wasm
npm install
npm run serve

9
examples/asm.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>
<p>Open up the developer console to see "Hello, World!"</p>
<script src='./index.js'></script>
</body>
</html>

3
examples/asm.js/index.js Normal file
View File

@ -0,0 +1,3 @@
import { run } from './asmjs';
run();

10
examples/asm.js/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"
}
}

16
examples/asm.js/src/lib.rs Normal file
View File

@ -0,0 +1,16 @@
#![feature(proc_macro, wasm_custom_section, wasm_import_module)]
extern crate wasm_bindgen;
use wasm_bindgen::prelude::*;
#[wasm_bindgen]
extern {
#[wasm_bindgen(js_namespace = console)]
fn log(s: &str);
}
#[wasm_bindgen]
pub fn run() {
log("Hello, World!");
}

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