Skip to content

Instantly share code, notes, and snippets.

@dio
Last active September 10, 2023 07:42
Show Gist options
  • Save dio/ae79cf546e808a9bc46515bf9400ad5d to your computer and use it in GitHub Desktop.
Save dio/ae79cf546e808a9bc46515bf9400ad5d to your computer and use it in GitHub Desktop.
This is a simpe example on embedding wasm inside an offline single html page
// this code is from a simple add function in c:
//
// // hello.c
// int add(int a, int b) {
// return a + b;
// }
//
// compiles it with emcc (http://webassembly.org/getting-started/developers-guide/)
// $ git clone https://github.com/juj/emsdk.git
// $ cd emsdk
// $ ./emsdk install latest
// $ ./emsdk activate latest
// $ source ./emsdk_env.sh --build=Release
//
// once installed:
//
// $ emcc hello.c -s ONLY_MY_CODE=1 -s WASM=1 -s EXPORTED_FUNCTIONS="['_add']" -o hello.js
//
// yes, not sure why we have to add '_' in front of the exported function.
// take the hello.wasm and serialize it to base64, e.g. using node
// const code = fs.readFileSync('./hello.wasm')
// code.toString('base64')
// AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws=
// https://www.npmjs.com/package/base64-arraybuffer
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
// Use a lookup table to find the index.
const lookup = new Uint8Array(256);
for (let i = 0; i < chars.length; i++) {
lookup[chars.charCodeAt(i)] = i;
}
function decode(base64) {
var bufferLength = base64.length * 0.75,
len = base64.length, i, p = 0,
encoded1, encoded2, encoded3, encoded4;
if (base64[base64.length - 1] === "=") {
bufferLength--;
if (base64[base64.length - 2] === "=") {
bufferLength--;
}
}
var arraybuffer = new ArrayBuffer(bufferLength),
bytes = new Uint8Array(arraybuffer);
for (i = 0; i < len; i+=4) {
encoded1 = lookup[base64.charCodeAt(i)];
encoded2 = lookup[base64.charCodeAt(i+1)];
encoded3 = lookup[base64.charCodeAt(i+2)];
encoded4 = lookup[base64.charCodeAt(i+3)];
bytes[p++] = (encoded1 << 2) | (encoded2 >> 4);
bytes[p++] = ((encoded2 & 15) << 4) | (encoded3 >> 2);
bytes[p++] = ((encoded3 & 3) << 6) | (encoded4 & 63);
}
return arraybuffer;
}
// this is the serialized code.
const code = 'AGFzbQEAAAABCwJgAX8AYAJ/fwF/An4HA2VudgZtZW1vcnkCAYACgAIDZW52BXRhYmxlAXABAAADZW52Cm1lbW9yeUJhc2UDfwADZW52CXRhYmxlQmFzZQN/AANlbnYIU1RBQ0tUT1ADfwADZW52CVNUQUNLX01BWAN/AANlbnYSYWJvcnRTdGFja092ZXJmbG93AAADAgEBBhMDfwEjAgt/ASMDC30BQwAAAAALBwgBBF9hZGQAAQkBAAo7ATkBB38jBCEIIwRBEGokBCMEIwVOBEBBEBAACyAAIQIgASEDIAIhBCADIQUgBCAFaiEGIAgkBCAGDws='
const buffer = decode(code)
// bootstrap the env.
const memory = new WebAssembly.Memory({ initial: 256, maximum: 256 })
const importObj = {
env: {
abortStackOverflow: () => { throw new Error('overflow'); },
table: new WebAssembly.Table({ initial: 0, maximum: 0, element: 'anyfunc' }),
tableBase: 0,
memory: memory,
memoryBase: 1024,
STACKTOP: 0,
STACK_MAX: memory.buffer.byteLength,
}
}
// instantiate
WebAssembly.instantiate(buffer, importObj)
// take a look at that _add.
.then(({module, instance}) => { console.log(instance.exports._add(1, 2)) })
.catch((err) => { console.log(err.message) })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment