Skip to content

Instantly share code, notes, and snippets.

@yurydelendik
Last active September 12, 2020 18:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yurydelendik/37bf1589939ea8a514a9233f31f0f48e to your computer and use it in GitHub Desktop.
Save yurydelendik/37bf1589939ea8a514a9233f31f0f48e to your computer and use it in GitHub Desktop.
Build wasm maps from C++ file

Binaryen and patches

Build binaryen with https://github.com/WebAssembly/binaryen/commit/0b67e96f598c817061e243aa922783b49f0cecab

Compile a program using emscripten

emcc -s SIDE_MODULE=1 fib.c -O1 --separate-asm -g -o fib.js
cat fib.asm.js | grep " //@line "

Create a wasm file with text map

asm2wasm -g fib.asm.js -o fib.wasm -bm fib.wasm.txtmap -bu http://example.org/fib.wasm.map
cat fib.wasm.txtmap

Convert to JSON map

(If the txt2map4wasm not install, you can install it via npm install txt2map4wasm)

txt2map4wasm fib.wasm.txtmap -o fib.wasm.map
int fib(int n) {
int i, t, a = 0, b = 1;
for (i = 0; i < n; i++) {
t = a + b;
a = b;
b = t;
}
return b;
}
<script>
var emGlue = {
env: {
DYNAMICTOP_PTR: 0,
tempDoublePtr: 0,
ABORT: 0,
STACKTOP: 0,
STACK_MAX: 10,
gb: 0,
fb: 0,
memory: new WebAssembly.Memory({initial: 256, maximum: 256}),
table: new WebAssembly.Table({element: "anyfunc", initial: 0, maximum: 0}),
memoryBase: 0,
tableBase: 0,
},
global: {
NaN: window.NaN,
Infinity: window.Infinity,
}
};
fetch('fib.wasm').then(req => req.arrayBuffer())
.then(res => WebAssembly.instantiate(res, emGlue))
.then(({instance}) => run(instance));
function run(instance) {
console.log(instance.exports._fib(4));
}
</script>
AGFzbQEAAAABloCAgAAFYAJ/fwBgAX8Bf2AAAX9gAX8AYAAAAtKBgIAADQNlbnYORFlOQU1JQ1RPUF9QVFIDfwADZW52DXRlbXBEb3VibGVQdHIDfwADZW52BUFCT1JUA38AA2VudghTVEFDS1RPUAN/AANlbnYJU1RBQ0tfTUFYA38AA2VudgJnYgN/AANlbnYCZmIDfwAGZ2xvYmFsA05hTgN8AAZnbG9iYWwISW5maW5pdHkDfAADZW52Bm1lbW9yeQIBgAKAAgNlbnYFdGFibGUBcAEAAANlbnYKbWVtb3J5QmFzZQN/AANlbnYJdGFibGVCYXNlA38AA4iAgIAABwECAwAAAQQGjoGAgAAYfwEjAAt/ASMBC38BIwILfwEjAwt/ASMEC38BIwULfwEjBgt/AUEAC38BQQALfwFBAAt/AUEAC3wBIwcLfAEjCAt/AUEAC38BQQALfwFBAAt/AUEAC3wBRAAAAAAAAAAAC38BQQALfwFBAAt/AUEAC3wBRAAAAAAAAAAAC38BQQALfAFEAAAAAAAAAAALB9+AgIAABwhzZXRUaHJldwAEC3J1blBvc3RTZXRzAAYTZXN0YWJsaXNoU3RhY2tTcGFjZQADCXN0YWNrU2F2ZQABDHN0YWNrUmVzdG9yZQACBF9maWIABQpzdGFja0FsbG9jAAAJgYCAgAAACt6BgIAAB6GAgIAAAQF/AkAjDiEBIw4gAGokDiMOQQ9qQXBxJA4gAQ8ACwALhYCAgAAAIw4PC4aAgIAAACAAJA4LjYCAgAAAAkAgACQOIAEkDwsLkoCAgAAAIxJBAEYEQCAAJBIgASQTCwvqgICAAAELfwJAIw4hCyAAQQBKIQYgBgRAQQAhAUEBIQVBACEIBUEBIQQgBA8LA0ACQCAFIAFqIQMgCEEBaiEJIAkgAEYhByAHBEAgAyEEDAEFIAUhAiADIQUgCSEIIAIhAQsMAQsLIAQPAAALAAuFgICAAAEBfwELAOOAgIAABG5hbWUB2ICAgAAHAApzdGFja0FsbG9jAQlzdGFja1NhdmUCDHN0YWNrUmVzdG9yZQMTZXN0YWJsaXNoU3RhY2tTcGFjZQQIc2V0VGhyZXcFBF9maWIGC3J1blBvc3RTZXRzALSAgIAAEHNvdXJjZU1hcHBpbmdVUkwiaHR0cDovL2xvY2FsaG9zdDo4MDAwL2ZpYi53YXNtLm1hcA==
{"version":3,"sources":["fib.c"],"names":[],"mappings":"moBAEA,4BAKA,QAJA,OADA,OAAA,uCAKA"}
@appcypher
Copy link

appcypher commented Jan 12, 2019

Update:
You can generate a source map straight from emcripten with the -g4 flag

 emcc -s SIDE_MODULE=1 fib.c -g4 -o fib.js

@softwareCobbler
Copy link

does Node (any version, presumably just the bleeding edge ones though) know how to handle these? I have been trying to step from JS into CPP all morning to no avail.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment