!wasm-answer.md

Using WebAssembly code as JavaScript modules

Simple project structure and dependencies:

# Prepare directory and project
mkdir answer
cd answer
npm init # answer all/most with default values
npm install jspm
# We need system.js for magic
node_modules/.bin/jspm init # answer all/most with default values
# WASM module loader
node_modules/.bin/jspm install wasm=npm:system-wasm

Project files:

1. Create index.html (see below)

2. Create main.js (see below)

3. Create answer.wasm (or data:application/wasm;base64,AGFzbQ0AAAABhYCAgAABYAABfwOCgICAAAEABoGAgIAAAAeNgICAAAEJZ2V0QW5zd2VyAAAKioCAgAABhICAgAAAQSoL):

a. Install wast-to-wasm converter, e.g. `npm install spidermonkey-m-wabt`

b. Save answer.wast (see below)

c. Convert e.g. `node_modules/.bin/sm-wabt wast2wasm answer.wast answer.wasm`      

4. Start a web server and navigate e.g. http://localhost:8000/index.html

(more is possible, e.g. wasm can depend on JS module)

answer.wast

(module
  (func $getAnswer (result i32) (i32.const 42))
  (export "getAnswer" $getAnswer))

index.html

<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
  System.import('main.js');
</script>

main.js

var a = require('answer.wasm!');
console.log('Answer: ' + a.getAnswer());