Skip to content
write web assembly that uses that dom easily
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src slightly delay web component creation Mar 19, 2019
tools slightly delay web component creation Mar 19, 2019
webidl adding set timeout Mar 17, 2019
.gitignore rewriting in rust Feb 23, 2019
.npmignore
LICENSE
Makefile adding set timeout Mar 17, 2019
README.md
package-lock.json
package.json
wasm-module.js
wasm-module.min.js
webcomponents.html
webidl.md adding set timeout Mar 17, 2019

README.md

wasm-module

A custom HTML element <wasm-module> that loads your web assembly module and exposes every function for interacting with the DOM to it, giving you the option to import functions as needed. This creates a simple functional interface you can use in your web assembly module with no special setup or code generation.

  • let people simply write front end in web assembly without javascript knowledge
  • exposes standards based Web IDL ( functions to manipulate browser DOM, write to console, etc. ) to web assembly as close to host bindings spec
  • gives DOM functionality in technology independent way for Rust, C, or any other language that compiles to WASM
  • this project is very alpha and I plan is to expose progressively more and more functionality using a generator tool inside this project, right now there's enough to do some fun stuff.

Functionality

Hello World

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

helloworld.html:

<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>
<!-- load your web assembly module, expose web IDL to it, and call 'main' by default -->
<wasm-module src="helloworld.wasm"></wasm-module>

Here's a web assembly example to log to console using a Web IDL generated function

helloworld.rs:

extern "C" {
    fn console_log(start: i32);
}

fn cstr(s:&str) -> i32{
    std::ffi::CString::new(s).unwrap().into_raw() as i32
}

#[no_mangle]
pub fn main() -> () {
    unsafe {
        console_log(cstr("hello world!"));
    }
}

Draw Something

drawing.html:

<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>

Here's a web assembly example to log to console using a Web IDL generated function

drawing.rs:

extern "C" {
    fn global_getWindow() -> i32;
    fn Window_get_document(window:i32) -> i32;
    fn Document_querySelector(document:i32,query:i32) -> i32;
    fn HTMLCanvasElement_getContext(element:i32,context:i32) -> i32;
    fn CanvasRenderingContext2D_fillText(canvas:i32,msg:i32,x:i32,y:i32);
}

fn cstr(s:&str) -> i32{
    std::ffi::CString::new(s).unwrap().into_raw() as i32
}

#[no_mangle]
pub fn main() -> () {
    unsafe {
        let w = global_getWindow();
        let d = Window_get_document(w);
        let canvas = Document_querySelector(d,cstr("#screen"));
        let ctx = HTMLCanvasElement_getContext(canvas,cstr("2d"));
        CanvasRenderingContext2D_fillText(ctx,cstr("hello world!"),50,50);
    }
}

Documentation

All documented web IDL functions can be found in api docs

You can configure your web assembly module by using different attributes on your HTML tag. For instance if instead of main you have a function named start you want called on module load.

<wasm-module src="helloworld.wasm" execute="start"></wasm-module>

<wasm-module ... > Attributes

  • src - url of the web assembly module to load (required)
  • execute - the first function to be called on loading (default: main)
  • callback - the function used for handling callbacks from browser (default: callback)
  • malloc - the name of the function to be called for allocating memory that must go from browser to wasm module (default: malloc)
  • memory - the name of the memory exposed by wasm module (default: memory)

Host Bindings

This project hopes to emulate how host bindings work in real web assembly as closely as possible. I'll have to make some assumptions, but if anyone knows better details I'd love to talk. Where I make assumptions, I'll try to be consistent.

For those who don't know what host bindings are, basically the future plan is to expose Web IDL in some way to web assembly in a standard way. But it's not been implemented yet. Maybe this can turn into a prototype.

https://webassembly.org/docs/future-features/

Creating Specialized Builds

This project was meant to expose all of web IDL as possible, but if you need a specialized build with only the pieces you need to reduce load time, you can make your own by only specifying the web IDL you want to generate or even hacking down some webIDL of the unnecessary

Here's an example with the minimal needed to draw canvas for instance:

node tools/generate_webidl.js Console.webidl Window.webidl Document.webidl HTMLCanvasElement.webidl CanvasRenderingContext2D.webidl
You can’t perform that action at this time.