Anúncios

If you are getting started with () and need an easy way to pass arrays between JS and WASM generated using : met As-Bind, an isomorphic library to handle passing high-level data structures between AssemblyScript and JavaScript, created by Aaron Turner (@torch2424).

Let’s start a new project, open an terminal cd into your development folder, create a new folder and cd into it. Then let’s install AssemblyScript compiler, As-Bind lib and an Static server to see our code working:

npm install --save-dev assemblyscript as-bind static-server

After installing our dependencies, let’s use npx to scaffold a new project:

npx asinit .

The asinit command automatically creates the recommended directory structure and configuration files, for more info check The AssemblyScript Book’s Quick start section.

Then we need to edit “package.json” to update “asbuild:untouched” and “asbuild:optimized” blocks to use As-Bind lib:

change:
"asbuild:untouched": "asc assembly/index.ts -b build/untouched.wasm -t build/untouched.wat --validate --sourceMap --debug",
"asbuild:optimized": "asc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --validate --sourceMap --optimize",

to:
"asbuild:untouched": "asc ./node_modules/as-bind/lib/assembly/as-bind.ts assembly/index.ts -b build/untouched.wasm -t build/untouched.wat --validate --sourceMap --debug",
"asbuild:optimized": "asc ./node_modules/as-bind/lib/assembly/as-bind.ts assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --validate --sourceMap --optimize",

And let’s enable our local Static server, on “package.json”, append the following line to “scripts” section:
"static-server": "static-server"

In this basic example, let’s create an array of fruits in JS and modify it in AS and return to JS.

Edit assembly/index.ts to add our function

export function addElementSortArray(sValue: string, sElement: string): string{
//expand our string back to an array
var aValue = sValue.split(",");
//do stuffs with our array
aValue.push(sElement);
aValue.sort();
//convert our array to string to return it to JS
return aValue.join();
}

Edit index.js to load AsBind and talk with out function from WASM:

import { AsBind } from "/node_modules/as-bind/dist/as-bind.esm.js";
const wasm = fetch("/build/optimized.wasm");
const asyncTask = async () => {
const asBindInstance = await AsBind.instantiate(wasm);
var aFruits = ["Banana", "Orange", "", "Mango"];
console.log(aFruits);
const sFruits = asBindInstance.exports.addElementSortArray(aFruits.join(), "Kiwi");
aFruits = sFruits.split(",");
console.log(aFruits);
};
asyncTask();

Now let’s create a HTML file and add index.js to it, so we can test in our browser, you can name it index.html:

<html>
<body>
<script type="module" src="index.js"></script>
</body>
</html>

We are now able to build our AssemblyScript into WebAssembly by running:
npm run asbuild

And run a local server using:
npm run static-server