🦕🦀Writing WebAssembly in Rust and running it in Deno!

Requirements

You need to have to follow tools installed on your machine:

• rustc
• rustup
• cargo
• deno

These are standard things you usually use while developing Rust and working with Deno.
We now need to install wasm specific tools for rust.
First we need to add a compiler target like that:

rustup target add wasm32-unknown-unknown

We also need to the wasm-gc tool

cargo install wasm-gc

I'm usuing Visual Studio Code for development and for this project I also installed the following extensions:

• Better Toml bungcip.better-toml
• Rust rust-lang.rust

Creating a rust lib

For the rust part, we need to create a small cargo lib.
We can do it with the following command:

cargo new --lib wasm_deno_example
cd wasm_deno_example

Next, we can open the project in VSCode
and we need to add the dependencies for wasm to our Cargo.toml.

[lib]
crate-type =["cdylib"]

cdylib makes our project usable with other languages like C or in our case wasm. It also removes all the specific stuff that is needed for rust.

Our small rust function

We now will change the src/lib.rs file to the following code:

#[no_mangle]
pub extern "C" fn square(x: u32) -> u32 {
    x * x
}

This is a simple function that takes a number and returns a number.
Important here is that we add the extern keyword so this function can be imported in our Deno code. When you are reading post liks this you should understand the x * x 😉

Compiling the rust to wasm

Now we can compile our rust code to wasm code.
We first need to compile build it with the following command:

$ cargo build --target wasm32-unknown-unknown

And we also need to strip it down from all the stuff we dont need. This will remove all the unneeded code for wasm and make the file way smaller.

wasm-gc target/wasm32-unknown-unknown/debug/wasm_deno_example.wasm

That's it we now have a wasm binary ready to be loaded into Deno and executed.

Run it with Deno

We now need to create a main.ts. The name of the does not really matter it's just the one I will use here.

When we need to add the following code to the file.

const wasmCode = await Deno.readFile("./target/wasm32-unknown-unknown/debug/wasm_deno_example.wasm");
const wasmModule = new WebAssembly.Module(wasmCode);
const wasmInstance = new WebAssembly.Instance(wasmModule);
const {
    square,
} = wasmInstance.exports;

console.log(square(1));
console.log(square(2));
console.log(square(3));
console.log(square(4));

Let us go through the steps.

• 1. Simple loads the raw file.
• 2. Makes a wasm module out of our file. So that we can work with it.
• 3. Creates an instance of our module so that we can use the functions.
• 4. We are importing our wasm square() function into our Deno code.
• 5. We are console logging the square number of different numbers.

Now let's execute this code with

deno run --allow-read main.ts

The output should be the following:

1
4
9
16

The Repo

You can find the code in the following Repo

Would you like to see more Deno content? Please let me know! I would like to make more posts and content about Deno!

👋Say Hello! Instagram | Twitter | LinkedIn | Medium | Twitch | YouTube