Простой пример Rust + WASM

Установить ржавчину

$ brew install rustup
$ rustup-init

Установите набор инструментов по умолчанию как nightly

$ rustup default nightly

Жопа wasm цель

$ rustup target add wasm32-unknown-unknown

Установить wasm-gc инструмент для удаления всего ненужного экспорта, импорта, функций и т. д. из сгенерированного модуля WebAssembly.

$ cargo install wasm-gc

Установить https для запуска веб-сервера, обслуживающего статические файлы из текущего каталога

$ cargo install https

Создайте приложение на ржавчине и откройте его файлы с помощью вашей IDE (я использую идею)

$ cargo new --lib utils
$ cd utils
$ idea .

7. Определите тип CDI-библиотеки Rust в cargo.toml:

[package]
name = "utils"
version = "0.1.0"
authors = ["Hasan Yousef <hasan.ajsf@gmail.com>"]
edition = "2018"

[dependencies]

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

Определите extern функция:

pub extern fn add_one(x: u32) -> u32 { x + 1
}

extern ключевое слово необходимо для создания интерфейса, чтобы эту функцию можно было вызывать из других языков. no-mangle аннотация, указывающая компилятору Rust не изменять имя этой функции.
2. Соберите wasm-файл:

$ cargo build --target wasm32-unknown-unknown --release

Запустите wasm-gc для оптимизации файла wasm:

$ wasm-gc target/wasm32-unknown-unknown/release/utils.wasm -o utils.gc.wasm

Создайте index.html файл и вызовите wasm модуль через javascript:

<html>
<head>
<script> WebAssembly.instantiateStreaming(fetch("utils.gc.wasm")) .then(wasmModule => { const result = wasmModeult.instance.exports.add_one(3); const text = document.createTextNode(result); document.body.appendChild(text); });
</script>
<head>
<body></body>
<html>

Вместо этого, используя instanceiateStreaming, мы можем передавать, компилировать и создавать экземпляр модуля WebAssembly за один раз.
5. Запустите статический файловый сервер:

$ http

Откройте браузер по адресу: localhost:8000

ПРОДВИГАТЬ

Если вы хотите взаимодействовать с JavaScript функции, вам необходимо:

Определите сигнатуру этих функций в файле ржавчины
Определите мост/оболочку в файле javascript между этими функциями.

Итак, если вы хотите вызвать javascript alert и еще одна функция, скажем, addOne, то указанная выше main.rs а также index.html файлы будут такими, как показано ниже:

main.rs:

extern { fn addOne(x: u32); fn alert(x: u32);
} pub extern fn add_one(x: u32) { unsafe { addOne(x); alert(x); }
}

index.html

<html> <head> <script> const addOne = (number) => { const text = document.createTextNode(number + 1); document.body.appendChild(text); } const importObject = { env: { addOne: addOne, alert: alert, } }; WebAssembly.instantiateStreaming(fetch("utils.gc.wasm"), importObject) .then(wasmModule => { const result = wasmModule.instance.exports.add_one(5); }) </script> <head> <body></body>
<html>

Для использования bindgenпожалуйста, посмотрите мой другой почта