Building Golem Components in TypeScript

Building Golem components written in TypeScript requires a series of steps.

If the project was created with golem-cli new, it already has a package.json that incorporates all the necessary steps as npm scripts to build the component, so it is enough to run:

$ npm run componentize

In details, building the component requires the following steps:

Generate the TypeScript bindings

For generating the binding we use the Golem fork of jco and componentize-js. When using the golem-cli examples, these dependencies are included in package.json, and an npm script called stub is also defined:

$ npm run stub

The generated binding will placed in the src/generated directory.

The above run command will execute the following commands:

$ jco stubgen wit -o src/generated

And requires the following dev dependencies:

{
  "devDependencies": {
    "@golemcloud/componentize-js": "0.10.2-golem.1",
    "@golemcloud/jco": "1.4.0-golem.1"
  }
}

Compile the TypeScript code to JavaScript

The examples use rollup through an npm script to compile TypeScript to JavaScript:

$ npm run build

This will compile all the TypeScript sources into a single JavaScript file at out/main.js.

Componentizing the JavaScript code

The final step is componentizing, which involves:

embedding our JavaScript code into the StarlingMonkey JS engine
running Wizer pre-initialization, which pre-loads and parses our Javascript source in the JS engine
creating the wasm output file for our component with it's interface exposed as a WebAssembly component usable by Golem.

The example projects includes an npm script called componentize, which also includes the previous stub and build steps.

$ npm run componentize

The output wasm file with be created with the built component name, eg.: out/example.wasm.

The above npm script will execute the following commands:

$ npm run stub && npm run build && jco componentize -w wit -o out/example.wasm out/main.js

Defining Components Next Steps