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
:
use js_ffi::*; pub fn main() -> () { let console = globals::get::().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 javascriptglobals = "0.1.3" # optional: for easily getting global singletons that implement Default trait
# cli commands for building web assembly @RUSTFLAGS='-C link-arg=-s' cargo build --target wasm32-unknown-unknown --release @cp target/wasm32-unknown-unknown/release/helloworld.wasm . @cargo fmt python3 -m http.server 8080
Drawing
use js_ffi::*; fn main() { let api = globals::get::().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 functionsextern int register(char*);extern void call_1(JSValue,int,int,JSValue);// look at https://github.com/richardanaya/ typedef double JSValue; // Common constantsJSValue 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