Binding WebAssembly Module functions to Typescript Class Methods
About this article
Since I think that WebAssembly is a awesome technology I decided to create a Typescript Decorator for binding Methods from a WebAssembly Module to a Typescript Class Method easily
Well actually there are 2 Typescript decorators.
1 class decorator which takes two parameters and 1 method decorator which takes a single parameter.
This Module I created is just to let you know a little Test which I wrote in a short time.
Since i think that this is a smart idea though which could be improved and stuffed with features like lazy loading for example when taking some time for it, I decided to share it using a Github Repo ( https://github.com/xsip/webasm-binder ) and create a Medium Article. So yeah. now you are reading it.
The class Decorator
„getWasmModuleByClassName“
resolves a webasm module using the help of a provided location in its first parameter which could be a link or a disk location and the type of it’s resolve method which could be selected from a enum and will be fetch – for frontend projects – or require for using it in a backend project.
The module it trys to resolve needs to have the same name as the class, so when you are decorating a class declared as „Demo“ the decorator will resolve this name by target and resolves the module – Demo.wasm – from the link or location provided in it‘s first parameter with using the help of fetch or require depending on the second parameter as mentioned before.
The fetched module Instance will be added to a array within a collection to resolve it‘s methods at the method decorator
The method decorator
getFunctionFromAsmModule
Binds a function from the module Instance by getting it from the instance holder.
To actually make it use the right module you need to provide the module name – which needs to be again the class name ( so when the method is within class Demo , you need to provide „Demo“ as its parameter ) – since i wasn‘t able to get the parent class name within this method decorator.
If you got a possibility to get the parent class name using a method decorator feel free to create a pull request and make it able to use the method decorator without a parameter.
The decorator will then when i.e your function deceleration below is named „add“, execute „add“ from the wasm module instance and returns it result when executing the class method
There is actually no error handling or something simular at the point of writing this article.
Executing the demo
To execute the demo on your local machine clone the github project from https://github.com/xsip/webasm-binder and build /start it by executing „npm run demo“.
But make sure to copy the added .wasm module to dist/demo since I didn‘t add any copy process for the demo in it‘s build process.
More soon
So just to let you know i also wrote a source parser which parses typescript classes, takes the original function body when a class method has the method decorator above it and compiles a WebAssembly module using the original method body programmaticly.
After that it will clear the original function body at build time and create a Javascript file for runtime out of it.
So there will be the possibility to write everything int Typescript at build time but execute it from the Javacript class by resolving it from the WebAssembly module at runtime with the help of the AssemblyScript compiler and the Typescript compiler API as build tools soon.
So, Stay tuned..
If you got any questions though feel free to contact me at kerschbaumer@lean-coders.at.
Don‘t forget to Clap ;-)
