Creating desktop apps with WebAssembly is as simple as making website! electron is a technology that packages chrome into an desktop app-like minimalistic web view experience. It gives the user access to the local systems resources via the nodejs JavaScript api. Since js-wasm is a technology agnostic library for executing javascript from WebAssembly, we can easily bind to the parts of the electron API we need.

Getting Started

This directory contains an example to get started using quickly.

git clone git@github.com:richardanaya/js-wasm.git
cd js-wasm/electron
make run

Let's take a look at the various files:

File	Description
`index.js`	Electron wants a javascript file to tell it where to start, this is just basic setup you can tweak like starting width/height and does your app have a menubar.
`index.html`	This is the index file that gets loaded by `index.js` to be the first thing you see. Consider this just like any old web page.

All our index.html does is quickly tell WebAssembly to start like any old web application

<html>
    <head>
        <title>My App!</title>
        <link rel="shortcut icon" href="#" />
        <script src="js-wasm.js"></script>
        <script type="application/wasm" src="app.wasm"></script>
    </head>
    <body>
        <canvas id="screen" width=500 height=500></canvas>
    </body>
</html>

Getting what you need

Now you can create JavaScript binding functions to invoke using js-wasm as normal.

pub fn read_file(msg: &str) -> String {
    lazy_static::lazy_static! {
        static ref FN: JSFunction= {
        register_function(
            "function(pathPtr,pathLen){
                const fs = require('fs');
                const data String(fs.readFileSync(this.readUtf8FromMemory(pathPtr,pathLen)));
                return this.writeCStringToMemory(data);
            }",
        )
    };};
    cstr_to_string(FN.invoke_2(msg.as_ptr() as u32, msg.len() as u32) as i32)
}

#[no_mangle]
pub fn main() {
    let fileContent = read_file("foo.txt");
    ...
}