Skip to main content

AssemblyScript

AssemblyScript compiles a strict variant of TypeScript to WebAssembly, enabling high-performance code execution in the browser. It is designed for developers familiar with TypeScript who want to target WebAssembly.

Usage​

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "template": "assemblyscript"
};
createPlayground('#container', options);

Loading the Wasm Module​

The compiled WebAssembly module is loaded using the livecodes.loadWasm() method, which optionally takes an import object and returns a promise that resolves to an object containing:

  • wasmModule - the instantiated WebAssembly module (with exported functions)
  • text - the WebAssembly Text Format (WAT) representation (can be viewed in compiled code viewer)
  • binary - the raw WebAssembly binary
const { wasmModule } = await livecodes.loadWasm();
const { increment } = wasmModule.exports;

Working with Strings​

AssemblyScript manages strings differently than JavaScript. Any exported function that returns a string must be accessed via the __getString helper provided by the AssemblyScript loader.

Example:

AssemblyScript
export function greet(): string {
  return "Hello, AssemblyScript!"
}
JavaScript
const { wasmModule } = await livecodes.loadWasm();
const { __getString, greet } = wasmModule.exports;
const message = __getString(greet());
document.body.textContent = message;

If __getString is not used, you will get a raw memory pointer instead of the actual string value.

Import Object​

The loadWasm() method accepts an optional import object, allowing the AssemblyScript module to call JavaScript functions. Use @external("env", "functionName") to declare imports.

Example:

AssemblyScript
@external("env", "getMultiplier")
declare function getMultiplier(): i32;

export function applyMultiplier(value: i32): i32 {
  return value * getMultiplier();
}
JavaScript
const { wasmModule } = await livecodes.loadWasm({
  env: {
    getMultiplier: () => 10,
  },
});
const result = wasmModule.exports.applyMultiplier(5);
console.log(result); // 50

Language Info​

Name​

assemblyscript

Aliases​

as

Extensions​

.as

Editor​

script

Compiler​

AssemblyScript compiler

Version​

assemblyscript: v0.28.9

Code Formatting​

Using Prettier.

Custom Settings​

Custom settings added to the property assemblyscript are passed as options to the AssemblyScript compiler. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "assemblyscript": {
    "optimizeLevel": 3
  }
}

Starter Template​

https://livecodes.io/?template=assemblyscript

Sponsors