The maintainer of this website has a Spotify Coding Playlist of their Lo-fi Hip Hop beats!
In our Hello World Example, we called a function exported from WebAssembly, in our Javascript. Let's dive a little deeper into exports and how they are used.
If you haven't done so already, you should set up your project following the steps laid out in the Hello World Example example.
First, let's add the following to our main.go
file:
package main
// Declare a main function, this is the entrypoint into our go module
// That will be run. In our example, we won't need this
func main() {}
// This exports an add function.
// It takes in two 32-bit integer values
// And returns a 32-bit integer value.
// To make this function callable from JavaScript,
// we need to add the: "export myFunctionName" comment above the function
//export callMeFromJavascript
func callMeFromJavascript(x int, y int) int {
return addIntegerWithConstant(x, y);
}
// A NOT exported constant
// Go does not support exporting constants
// for Wasm (that I know of).
var ADD_CONSTANT int = 24;
// A NOT exported function
// It takes in two 32-bit integer values
// And returns a 32-bit integer value.
func addIntegerWithConstant(x int, y int) int {
return x + y + ADD_CONSTANT;
}
Then, let's compile main.go
into a wasm module, using the TinyGo compiler. This will output a main.wasm
:
tinygo build -o main.wasm -target wasm ./main.go
Then, let's create an index.html
, and get our appropriate wasm_exec.js
following the steps laid out in the Hello World Example example.
Lastly, lets create our index.js
JavaScript file. We will be using the same wasmBrowserInstantiate
as mentioned in the Hello World Example example:
const go = new Go(); // Defined in wasm_exec.js. Don't forget to add this in your index.html.
const runWasm = async () => {
// Get the importObject from the go instance.
const importObject = go.importObject;
// Instantiate our wasm module
const wasmModule = await wasmBrowserInstantiate("./main.wasm", importObject);
// Allow the wasm_exec go instance, bootstrap and execute our wasm module
go.run(wasmModule.instance);
// Call the Add function export from wasm, save the result
const result = wasmModule.instance.exports.callMeFromJavascript(24, 24);
console.log(result);
console.log(wasmModule.instance.exports.ADD_CONSTANT); // Should return undefined
console.log(wasmModule.instance.exports.addIntegerWithConstant); // Should return undefined
};
runWasm();
And that should be it! You should have something similar to the demo (Source Code) below:
Next let's take a look at WebAssembly Linear Memory.