wasm-module

A custom HTML element <wasm-module> that loads your web assembly module and dynamically exposes access to javascript to your web assembly module with no special setup.

Features

interact with browser imperatively and with no code generation using js_ffi
standard libraries that expose new functionality so you don't having to know javascript
usable for Rust, C, or any other language that compiles to WASM
run your wasm module on a separate thread in a web worker

Hello World

See demo here

use js_ffi::*;

#[no_mangle]
pub fn main() -> () {
    js!(console.log).invoke_1("Hello World");
}

[dependencies]
js_ffi = "0.6" # for talking to javascript

# cli commands for building web assembly
build:
	@RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release
	@cp target/wasm32-unknown-unknown/release/helloworld.wasm .
lint:
	@cargo fmt
serve:
	python3 -m http.server 8080

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script src="https://unpkg.com/wasm-module@latest/wasm-module.min.js"></script>
<wasm-module src="helloworld.wasm"></wasm-module>

Drawing

See demo here

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
<script src="https://unpkg.com/wasm-module@latest/wasm-module.min.js"></script>
<canvas id="screen" width="500" height="200"></canvas>
<wasm-module src="drawing.wasm"></wasm-module>

use js_ffi::*;

#[no_mangle]
fn main() {
    let screen = js!(document.querySelector).call_1(DOCUMENT, "#screen");
    let ctx = js!(document.querySelector).call_1(screen, "#screen");

    let fill_style = js!(function(color){
        this.fillStyle = color;
    });
    let fill_rect = js!(CanvasRenderingContext2D.prototype.fillRect);

    fill_style.call_1(ctx, "red");
    fill_rect.call_4(ctx, 0.0, 0.0, 50.0, 50.0);

    fill_style.call_1(ctx, "green");
    fill_rect.call_4(ctx, 15.0, 15.0, 50.0, 50.0);

    fill_style.call_1(ctx, "blue");
    fill_rect.call_4(ctx, 30.0, 30.0, 50.0, 50.0);
}

Standard Web Libraries

A collection of libraries exist that expose javascript functionality so you don't have to implement it yourself. Just add them to your project and go!

Don't like Rust?

There's nothing Rust specific about this web component. js_ffi has a technology agnostic interface that can't be used by many web assembly languages.

Want small web assembly modules?

You can drastically reduce the size of your web assembly modules by:

be sure to make your library#![no_std]
utilize the alloc crate for standard data structues
ONLY use dependent libraries that are #![no_std]
use a custom allocator like wee_alloc instead of the bulky standard jemalloc
compile in release with flag to strip symbols: RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release

License

This project is licensed under either of

Apache License, Version 2.0, (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT)

at your option.

Contribution

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in wasm-module by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.

richardanaya/wasm-module