How to import a WASM module in WASM ( Rust ) and pass a String parameter

When writing WebAssembly (WASM) in Rust, you might want to import functionality from one WASM module into another. This can be achieved by defining an external module and binding it to your Rust code. This also applies to passing String parameters. Here is a basic guide on how to write WebAssembly code in Rust, demonstrating how to import external modules and pass String parameters.

Step 1: Create a Rust Library

First, create a new Rust library to compile to WebAssembly.

sh
cargo new --lib wasm_module
cd wasm_module

Step 2: Add wasm-bindgen Dependency

In your Cargo.toml file, add the wasm-bindgen dependency, which is a library that enables interaction with JavaScript.

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

[dependencies]
wasm-bindgen = "0.2"

[features]
default = ["console_error_panic_hook"]

Step 3: Write Rust Code

In your lib.rs file, use wasm-bindgen to export functions and import external functions.

rust
use wasm_bindgen::prelude::*;

// Import an external module; here, "external_module" is the module name, and "greet" is the function name
#[wasm_bindgen(module = "/path/to/external_module.js")]
extern "C" {
    fn greet(name: &str);
}

// Export a function for WebAssembly that accepts a String parameter
#[wasm_bindgen]
pub fn say_hello(name: String) {
    // Call the external module's function
    greet(&name);
}

Step 4: Compile to WebAssembly

Use wasm-pack to compile your Rust library to WebAssembly.

sh
wasm-pack build --target web

Step 5: JavaScript

In JavaScript, you need to load the compiled WASM module and declare the imported functions.

javascript
import init, { say_hello } from './pkg/wasm_module.js';

async function loadWasm() {
    // Initialize the WASM module
    await init();

    // Call the WASM function
    say_hello("World");
}

// Define the external module's function
function greet(name) {
    console.log(`Hello, ${name}!`);
}

loadWasm();

In this example, /path/to/external_module.js should be replaced with the actual path to your external module JS file. Ensure that the string parameters used in the greet function match the type in the Rust function.

Ensure that you have installed the wasm-pack tool and the wasm-bindgen library, and that your Rust project structure is correct. Once you compile and run your WASM code, the say_hello function will be called by JavaScript and pass the string parameter to the internal Rust function. Then, the Rust function will pass this string parameter to the imported greet function.

Note that these code snippets are simplified examples and may need to be adjusted based on your project requirements, especially when dealing with different environments (such as Node.js or different web browsers) for loading and running your WebAssembly code.