wasm-module

0.1.1 • Public • Published

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 or code generation.

Features

  • easily interact with browser using standard Rust and no code generation
  • extensible with libraries that expose new functionality so you don't having to know javascript
  • exposes javascript in technology independent way for Rust, C, or any other language that compiles to WASM
  • run your wasm module in a worker easily

Hello World

Let's load a web assembly module called helloworld.wasm and call main:

<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>
use js_ffi::*;
 
#[no_mangle]
pub fn main() -> () {
    let console = globals::get::<Console>().lock();
    console.log("Hello world!")
}
 
struct Console {
    fn_log:JSValue
}
 
impl Default for Console {
    fn default() -> Self {
        Console {
            fn_log:register("console.log")
        }
    }
}
 
impl Console {
    fn log(&self,msg:&str){
        call_1(UNDEFINED,self.fn_log,TYPE_STRING,to_js_string(msg));
    }
}
[dependencies]
js_ffi = "0.0.13" # for talking to javascript
globals = "0.1.3" # optional: for easily getting global singletons that implement Default trait
# 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

Drawing

<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 api = globals::get::<API>().lock();
 
    let s = api.query_selector("#screen");
    let ctx = api.get_context(s,"2d");
 
    api.fill_style(ctx, "red");
    api.fill_rect(ctx,0.0,0.0,50.0,50.0);
 
    api.fill_style(ctx, "green");
    api.fill_rect(ctx,15.0,15.0,50.0,50.0);
 
    api.fill_style(ctx, "blue");
    api.fill_rect(ctx,30.0,30.0,50.0,50.0);
}
 
struct API {
    query_selector_handle: FunctionHandle,
    get_context_handle: FunctionHandle,
    fill_style_handle: FunctionHandle,
    fill_rect_handle: FunctionHandle,
}
 
impl Default for API {
    fn default() -> Self {
        API {
            query_selector_handle: register("document.querySelector"),
            get_context_handle: register("HTMLCanvasElement.prototype.getContext"),
            fill_style_handle: register("(function(s){this.fillStyle = s;})"),
            fill_rect_handle: register("CanvasRenderingContext2D.prototype.fillRect"),
        }
    }
}
 
impl API {
    fn query_selector(&self, s: &str) -> JSValue {
        call_1(DOCUMENT, self.query_selector_handle,TYPE_STRING,to_js_string(s))
    }
 
    fn get_context(&self, o: JSValue, s: &str) -> JSValue {
        call_1(o,self.get_context_handle,TYPE_STRING,to_js_string(s))
    }
 
    fn fill_style(&self, o: JSValue, s: &str{
        call_1(o,self.fill_style_handle,TYPE_STRING,to_js_string(s));
    }
 
    fn fill_rect(&self, o: JSValue, x: f32, y: f32, w: f32, h: f32{
        call_4(o,self.fill_rect_handle,TYPE_NUM,x,TYPE_NUM,y,TYPE_NUM,w,TYPE_NUM,h);
    }
}

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 library. Here's an example of using C and js_ffi's interface:

// define js_ffi functions
extern int register(char*);
extern void call_1(JSValue,int,int,JSValue);
// look at https://github.com/richardanaya/
 
typedef double JSValue;
 
// Common constants
JSValue const UNDEFINED: JSValue = 0.0;
JSValue const FALSE: JSValue = 0.0;
JSValue const TRUE: JSValue = 1.0;
 
int const TYPE_NOTHING = 0;
int const TYPE_NUM = 1;
int const TYPE_STRING = 2;
int const TYPE_BOOL = 3;
int const TYPE_FUNCTION = 4;
int const TYPE_OBJ = 5;
int const TYPE_UINT8_ARRAY = 6;
 
int main() {
    int log = register("console.log");
    call_1(UNDEFINED,log,TYPE_STRING,"Hello World");
    return 0;
}

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
  • compile in release with flag to strip symbols: RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.10latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.10
0.1.00
0.0.110
0.0.100
0.0.90
0.0.80
0.0.70
0.0.60
0.0.50
0.0.40
0.0.30
0.0.20
0.0.10

Package Sidebar

Install

npm i wasm-module

Weekly Downloads

0

Version

0.1.1

License

MIT OR Apache2.0

Unpacked Size

34 kB

Total Files

6

Last publish

Collaborators

  • richardanaya