How To Build Webassembly Components With The Moonbit Language

MoonBit is simply a modern connection positive workflow designed to create businesslike WebAssembly projects; it tin besides target JavaScript. I past looked astatine MoonBit successful June 2024, truthful I wanted to spot if it had progressed successful regards to utilizing Wasm. (Aside: if you still don’t rather get nan constituent of Wasm, you are not entirely alone.)

Now, MoonBit tin besides tally wrong nan Web Component model, which we’ll look astatine shortly. We’ll instrumentality this and past cheque that it works. We’re only going to instrumentality a elemental summation method.

A Brief Refresher connected nan MoonBit Language

But we’d amended conscionable revisit nan MoonBit connection briefly, arsenic a refresher.

Starting of people pinch Hello World:

The only point somewhat unexpected is that word Unit, but it’s conscionable MoonBit’s first people entity balanced of void.

Here’s 1 much example:

This is simply a “top level” function; and statement that we person to beryllium definitive pinch nan types. But to spell deeper into nan connection itself, conscionable take nan tour.

WebAssembly Integration Via nan Component Model

We’re present for nan WebAssembly integration, though. MoonBit useful pinch nan WebAssembly Component Model, which takes distant immoderate of nan symptom of implementing basal functionality. Component models are ever nan adjacent shape successful improvement for connection projects, since they fastener down interfaces, contracts and types.

Logically, a constituent is simply a building that whitethorn incorporate halfway modules and/or different components. The constituent expresses nan interfaces of these contained modules and sub-components utilizing WebAssembly Interface Types (WIT). If this sounds for illustration a classical overly world definition, don’t interest excessively much. It will activity conscionable good successful a accumulation toolchain. This station follows on from nan MoonBit documentation connected WebAssembly components.

Installing nan Required Tools and Toolchains

Before we do thing else, we request nan wit-bindgen CLI instrumentality successful bid to make bindings compatible pinch WIT; which happens to beryllium Rust-based, truthful you will request Cargo. That comes for free if we conscionable instal Rust:

(If you person brewed a Rust, you whitethorn request to determine whether you want rustup to support Rust refreshed aliases not. I didn’t update decently and sewage into problem later on, truthful I would urge removing immoderate brewed version.)

Before you do that, conscionable type “cargo” first successful lawsuit you already person it. I did:

That is simply a spot old, but works. So we instal nan binding CLI tool:

You whitethorn get nan informing to adhd nan bin directory to your path. I’m installing connected my MacBook, truthful I conscionable added it to PATH.

Then we instal Wasm devices for moving pinch components:

But we’d amended get connected pinch installing MoonBit itself:

After moving aliases starting a caller ammunition pinch (in my case):

You tin now tally nan Rust-based task organiser Moon:

So now we person nan satellite connected a stick.

Defining nan Program pinch a WIT File

Before we tin constitute immoderate MoonBit, we request to create a WIT. This is truthful we tin state our activity to beryllium valid successful nan world of WebAssembly components:

We create wit/world.wit.

This declares a package docs:adder at version 0.1.0, and nan adhd interface pinch a azygous usability of unsigned 32-bit numbers (these representation to UInts successful MoonBit). A WIT world is simply a instrumentality successful which you put each nan bits you request for this to work. In this case, it is conscionable nan adhd interface.

OK, let’s make this explanation for our WIT and pinch MoonBit structure:

So you should person this:

You’ll person guessed that nan suffix .mbt is simply a MoonBit file. But of people we haven’t really written immoderate MoonBit yet. If we effort checking this arsenic a Wasm target, we get a full load of warnings:

And if we look astatine nan stub, we spot nan problem that matches our observation:

In short, location is nary existent codification successful nan stub, it’s conscionable interface definition. Even utilizing our minimal MoonBit tutorial from above, we tin still easy complete this:

The main configuration file, gen/moon.pkg.json, should clasp nan applicable way information.

How to Build nan WebAssembly Module and Component

So we yet build nan main WebAssembly module:

And we get a full caller target directory, including nan Wasm file:

Just to confirm, let’s cheque that gen.wasm file:

OK, truthful it’s valid WebAsssembly. Now we request to wrap it correctly successful nan constituent model:

…followed by:

By which clip it is simply a small different to nan consecutive Wasm module:

We tin usage Wasmtime to corroborate this each worked:

If Wasmtime is unhappy, get a caller type straight from here:

You tin besides get a much heavyweight illustration host to beryllium that our .wasm record is working.

Conclusion

I came to cheque up connected MoonBit, and discovered WebAssembly components. Such is nan travel of nan developer — location is ever 1 much hill.

At immoderate point, MoonBit will person to do a spot much activity connected nonstop support for nan constituent model; otherwise, nan world complexity will proceed to support Wasm a small distant from wide support (or nearer to Rust). However, this feels for illustration different stubbing-style models — though nan Web Services Description Language isn’t nan kindest comparison — these work good successful a coagulated toolchain, moreover 1 directed by an LLM.

Group Created pinch Sketch.