What's A WIT (Wasm Interface Type): Quickstart

Wasm is comprised of:

1. Browser-based workloads
2. Server-side workloads

When you're compiling your application to work on either of these (it's all Wasm regardless), you need to specify a Component. A Component is a wrapper around imports, exports, and interfaces in your application stack. Essentially, it's all of the pieces that call out to libraries, packages (you've created or third-party), and any custom Types.

To create that Component, you'll create a WIT.

In many cases (like with Go), WITs can be automatically generated or it's within the WASI compiler. In the case of TypeScript, it's not.

Before getting to that point, however, you will be wondering "How can I convert my app stack to Wasm, or rather, compile it to Wasm?".

There are a few options:

1. jco: Compile JS dependencies/libraries (components) to Wasm. jco is faster than Javy. It’s used for apps that need better runtime performance and low latency.
2. Javy: Compile JS file(s) to Wasm. Javy is slower than jco in the long run.
3. Rollup (npm package): newest compiler (it’s like jco and javy)

If you decide to go with jco because it has better runtime performance, you'll need a WIT.

💡

I’m not sure if Javy or Rollup require a WIT file or if it preconfigure ones for you as I haven’t tried those yet.

Because you need a WIT prior to using jco, you'll have to configure one. If you don't want to do that manually, the best option right now for TypeScript/JavaScript is using wasi-http.

You'll clone the wasi-http repo, put the directory for wasi-http into your source code location, and point it to when using jco.

For example:

jco componentize src/index.ts -w wasi-http-0.2.2/wit/types.wit  --out index.wasm