raphamorim / Xwasm

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

Summary

• xwasm Packager to WebAssembly
• useWasm React Hook for load WASM files
• FAQ
• TODO
• References

xwasm

WebAssembly Packager (understand Rust/C/C++).

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

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)

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
• https://github.com/emscripten-core/emscripten/issues/8126