Using WASM Fiddle, we show how to write a simple number logger function that calls a consoleLog function defined in JavaScript. We then download and run the same function in a local project.
WASM Fiddle: https://wasdk.github.io/WasmFiddle/?cvrmt
Demo Repo: https://github.com/guybedford/wasm-intro
Basiclly WASM is hard to debug, we still need Javascript to help, the way to do debugging is we pass Javascript Console.log function into WASM though "imports".
Defined a C code:
#include <math.h> void consoleLog (float num); float getSqrt (float num) { consoleLog(num); return sqrt(num); }
Defined a function called "consoleLog".
After build to wasm:
(module (type $FUNCSIG$vf (func (param f32))) (type $FUNCSIG$ff (func (param f32) (result f32))) (import "env" "consoleLog" (func $consoleLog (param f32))) (table 0 anyfunc) (memory $0 1) (export "memory" (memory $0)) (export "getSqrt" (func $getSqrt)) (func $getSqrt (param $0 f32) (result f32) (call $consoleLog (get_local $0) ) (f32.sqrt (get_local $0) ) ) )
It‘s importing consoleLog from a module called environment.
This is just a default module namespace name for the externals of a C code compilation process.
Now on JS side, we need to pass the console.log function from "imports" param:
function fetchAndInstantiateWasm(url, imports) { return fetch(url) .then((res) => { if (res.ok) { return res.arrayBuffer(); } throw new Error(‘Unable to fetch WASM‘) }) .then((bytes) => { return WebAssembly.compile(bytes); }) .then(module => { return WebAssembly.instantiate(module, imports || {}); }) .then(instance => instance.exports); } fetchAndInstantiateWasm(‘./program.wasm‘, { env: { consoleLog: (num) => console.log(num) } }) .then(m => { window.getSqrt = m.getSqrt; });