Passing High Level Data Types with wasm-bindgen

Overview

Using buffers and pointers, is a great way to get started with WebAssembly, and drill in its concepts while being productive. But once we start wanting to use higher level data structures efficiently and easily, is where things will get a little more complicated. Thankfully, the rust/wasm community built wasm-bindgen, which is part of the wasm-pack workflow we have been using throughout the examples. As mentioned before, wasm-bindgen abstracts away linear memory, and allows using higher-level data structures between Rust and JavaScript.

Let's kick things off! To show off how we can use wasm-bindgen, let's see how we can use strings in WebAssembly and share them with JavaScript:

Implementation

First, let's add the following to our src/lib.rs file:

// The wasm-pack uses wasm-bindgen to build and generate JavaScript binding file.// Import the wasm-bindgen crate.use wasm_bindgen::prelude::*;
// Our function to concatenate the string "Wasm by Example"// to the input string. We are using .into(), to convert// the rust types of str to a String.#[wasm_bindgen]pubfnadd_wasm_by_example_to_string(input_string: String) -> String {
let result = format!("{} {}", input_string, "Wasm by Example");
return result.into();
}

Next, we can compile the module following the Hello World examples compilation process, replacing the appropriate file names.

Next, lets create an index.js file to load and run our wasm output. Now that we are using higher-level stata structures, we will have to leverage the named exports in our ./pkg/strings.js. The named exports generated by wasm-pack in our ./pkg/strings.js, are functions that wrap around our exported wasm functions to handle the data passing to facilitate passing high level data structures between WebAssembly and JavaScript. In our case, we can take a look at the supported wasm-bindgen String type. In the future, you can use this resource to see other supported types and usage as well. Let's dive into our resulting index.js: