Difference between revisions of "WebAssembly/JS"
m (→See Also) |
|||
Line 78: | Line 78: | ||
==See Also== | ==See Also== | ||
− | *[[ | + | *[[WebAssembly]] |
*[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly WebAssembly JS] at MDN | *[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly WebAssembly JS] at MDN | ||
[[Category:WebAssembly]] | [[Category:WebAssembly]] |
Revision as of 19:02, 5 September 2019
The primary target for WebAssembly is the browser.
WebAssembly is not a Javascript, it's only an addition to Javascript.
WebAssembly is not asm.js.
API
The primary API for dealing with WebAssembly (.wasm) files is WebAssembly JS standard
Dependencies
As of 2019 there's no "out-of-the-box" way to resolve WebAssembly file import dependencies.
WebAssembly expects an import to be resolved by providing the import module name. The import module name doesn't have to be a WebAssembly module, it can be a plain JavaScript function as well. And the name of the object (i.e. function of memory) WebAssembly is trying to access.
Example
Here's an example of dependencies loading.
WARNING: you should NOT use this code in production. It's only used for educational purposes! Javascript and it's APIs are designed to do all the tasks asynchronously. Most of the code is based on the callbacks (closures), that are triggered when the particular task is done. I.e. loading a resources from the web, would trigger an event once the loading is completed (or failed).
Javascript language has been updated with additional syntax to support it. i.e.
fetch('../out/main.wasm').then(response =>
response.arrayBuffer()
).then(bytes => WebAssembly.instantiate(bytes)).then(results => {
instance = results.instance;
document.getElementById("container").textContent = instance.exports.add(1,1);
}).catch(console.error);
The example below is intentionally performs each step synchronously (by using "await" syntax is used to explicitly wait for a completion of synchronous actions). Such intentional synchronization would impose slowness in a real-life application and should not be used.
async function runWasm()
{
var r = await fetch('../out/main.wasm'); // Promise() object handling getting of the file
var bytes = await r.arrayBuffer();
var mainmod = await WebAssembly.compile(bytes);
// console.log(mainmod); // print the main module
var impobj = {};
var imports = WebAssembly.Module.imports(mainmod);
// console.log(imports); // print dependencies list
var loadedInst = [];
// loading dependencies should be recursive!
for (var i = 0; i < imports.length; i++)
{
var dep = imports[i];
var subinst = loadedInst[dep.module];
if (!subinst)
{
var rr = await fetch('../out/'+dep.module+'.wasm');
var buf = await rr.arrayBuffer();
var submod = await WebAssembly.instantiate(buf);
subinst = submod.instance;
loadedInst[dep.module] = subinst;
}
//console.log(subinst); // print the sub module instance
var impmod = impobj[dep.module];
if (!impmod) {
impmod = {};
impobj[dep.module] = impmod;
}
impmod[dep.name] = await subinst.exports[dep.name];
impobj[dep.module] = impmod;
}
// console.log(impobj); // print of imported object object
var maininst = await WebAssembly.instantiate(mainmod, impobj);
// console.log(maininst); // print of the main instance object
// calling the main() function of the main unit
document.getElementById("container").textContent = maininst.exports.$main();
}
runWasm();
See Also
- WebAssembly
- WebAssembly JS at MDN