Welcome to the new Golem Cloud Docs! 👋
TypeScript Language Guide
Building Components

Building Golem Components in TypeScript

Building Golem components having an application manifest is straightforward, just use the golem command line interface:

golem app build

If the project was created using golem app new as recommended, the golem app build command will always work as expected.

The result of the golem app build command is a WebAssembly component file ready to be uploaded to Golem. It does not have to be specified explicitly, as the golem tool will automatically find the correct file when doing for example:

golem component add

Under the hood

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

If the project was created with golem 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 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 ComponentsNext Steps