This repository contain tools for develop modern frontend with WebAssembly (React, Vue, Babel and etecetera).

Please don't use it in production. It's not stable yet.

Create a project with WASM in less than 5 minutes (optional)

curl -o- -L https://raw.githubusercontent.com/raphamorim/xwasm/master/scripts/create-project.sh | bash

Supported Languages

Language	Status	Notes
C++	Under development	Still very experimental
Rust	Under development	Test phase
Go	On Roadmap	-
Kotlin	On Roadmap	-
Lua	On Roadmap	-

Summary

• xwasm Packager to WebAssembly
• emscripten Node API for Emscripten SDK
• babel-plugin-wasm Convert C++/Rust code to WASM in the babel parse
• useWasm React Hook for load WASM files
• Examples
  • React + C++
  • Babel + React + C++
  • Babel + React + Rust
• FAQ
• TODO
• References

xwasm

WebAssembly Packager (understand or should Rust/C/C++/Go/Lua).

It will install modules/environment on demand. However you can run separate commands to install enviroment:

• $ xwasm install cpp (install C/C++ required dependencies [emcc])

• $ xwasm check cpp (check C/C++ dependencies status)

• $ xwasm install rust (install Rust required dependencies [cargo])

• $ xwasm check rust (check C/C++ dependencies status)

Building with

1. Create a file: xwasm.config.js

const filesToProcess = [
  {
    input: 'doubler.c',
    output: 'doubler.wasm',
    functions: ['doubler'] // functions that you want to export
  },
  {
    // by default output will follow input filename, in this case: "counter.wasm"
    input: 'counter.rs,
    functions: ['counter']  // functions that you want to export
  }
]

module.exports = filesToProcess;

2. Now if you run xwasm, it's going to load the configuration above. If you want to, you can add it before any build task. For example:

"scripts": {
  "build": "xwasm && webpack",

emscripten (under development)

Node module for Emscripten SDK API. It will try to install SDK if you don't have Emscripten installed.

Note: Only OS X and Linux support. Windows support in development.

Installation

It's going to install Emscripten SDK on postinstall hook.

npm install emscripten

Not available yet, still under development.

is_north.rs

#[derive(Debug)]
enum Direction { North, South, East, West }

fn is_north(dir: Direction) -> bool {
    match dir {
        Direction::North => true,
        _ => false,
    }
}

fn main() {
    let points = Direction::South;
    println!("{:?}", points);
    let compass = is_north(points);
    println!("{}", compass);
}

index.js

import path from 'path';
import Emscripten from 'emscripten';

const emcc = new Emscripten();
const isNorthPath = './is_north.rs';
const emmc.buildFile({
  input: path.resolve(__dirname, isNorthPath),
  output: path.resolve(__dirname, 'is_north.wasm'),
  wasm: true
});

useWasm

Installing

$ npm install use-wasm

Usage

C++ code

int _doubler(int x) {
  return 2 * x;
}

JSX code with React

import React, { Fragment, Component } from 'react';
import { render } from 'react-dom';
import useWasm from 'use-wasm';

function App() {
  // method will initialize null til load the "./doubler.wasm"
  const { isWasmEnabled, instance } = useWasm('doubler');

  return (
    <Fragment>
      <p>isWasmEnabled: {String(isWasmEnabled())}</p>
      <p>_doubler: {String(instance && instance._doubler(2))}</p>
    </Fragment>
  );
}

render(<App/>, document.querySelector('#root'));

Instance loading (null as initial value)

Instance loaded (wasm export object as value)

babel-plugin-wasm

!! Still under development !!

Installation

$ npm install babel-plugin-wasm

Examples

React + C++

Read the code

React + Babel + C++

On going...

React + Babel + Rust

On going...

TODO

• useWasm: Cache logic for fetching WASM files
• xwasm/emscripten: Cache for build
• xwasm/emscripten: Add support for Windows
• xwasm/emscripten: Add support for load different files into one export
• Write examples using Rust

References

• https://webassembly.org/getting-started/developers-guide
• https://emscripten.org/docs/compiling/WebAssembly.html
• https://developer.mozilla.org/en-US/docs/WebAssembly
• https://developer.mozilla.org/en-US/docs/WebAssembly/C_to_wasm
• https://developer.mozilla.org/en-US/docs/WebAssembly/Using_the_JavaScript_API
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory
• emscripten-core/emscripten#8126