WebAssembly by Rust - moriken's project

WebAssembly by Rust

参考サイト

Rust and WebAssembly

ワーキンググループ。これを追ってたら間違いない。

Awesome Rust and Webassembly

WebAssembly に関連するクレートがまとめてある。

Comlink + Rust で言語とスレッドの垣根を越えた WebAssembly 開発

wasm-bindgen を使った開発ではこちらの記事を参考にすると良い。

Fukuoka.rs vol.2 で WebAssembly について話しました

Fukuoka.rs vol.2 で自分が発表した資料と wasm-bindgen, wasm-pack (wasm-pack-plugin) の簡単な例が見れる。

情報が古いが、参考になるかもしれない。

プロジェクト環境

cargo

code:cargo.toml

name = "wasm-test"

version = "0.1.0"

authors = "petamoriken <moriken@kimamass.com>"

edition = "2018"

publish = false

crate-type = "cdylib"

code:.cargo/config (toml)

target = "wasm32-unknown-unknown"

もし nightly を使いたい場合は rls や clippy が不安定なため、rustup-components-history を見て使えそうな toolchain に固定する必要がある（実験的な実装を使う必要がなければ stable でよい）。

code:.cargo/rust-toolchain

nightly-2019-01-19

rls (rls-vscode)

code:.vscode/settings.json

{

"rust.target": "wasm32-unknown-unknown",

"rust.all_targets": false

}

clippy を使う場合はあらかじめ rustup component add clippy しておく。

関連するクレート（モジュール）

core::arch::wasm32

WebAssembly の固有の組み込み機能を呼ぶときに使う。memory.grow はもちろんのこと Nightly 環境では Threads や SIMD も試すことが出来る。

WebAssembly で使えるアロケータ。global_allocator として使える。これを入れなかった場合は dlmalloc がデフォルトとして使われてそう。

Rust (WebAssembly) と JavaScript 間のラッパー。Emscripten と同様に生成する WebAssembly と JavaScript 間に層を作ってしまう（グルーコード）ため柔軟性にかけてしまう（個人的にもあまり好みではない）。wasm-bindgen-cli で TypeScript の型も吐き出してくれる。

JavaScript の型を定義するとインポートしてくれるがおそらくグローバルに生えているもののみ。Rust の String 型をそのまま JavaScript の string として自動で変換してくれるが、多くの JavaScript に関する型が Rust 上では JsValue という型にされてしまうので Optional unwrap 祭りになってしまう。

Rust で ECMAScript の函数を呼びたいときにラップしてくれるやつ。楽になる一方で読み込む JavaScript のコードを Rust 内で書かないといけなくなる。もちろん JsValue に侵される。

js-sys の DOM API 版。

wasm-binding によって作られた WebAssembly と JavaScript のラッパーコードから package.json を生成して、そのまま npm publish することが出来るようにするライブラリ。Node.js で使えるのはもちろんのこと、wasm-pack-plugin を使うと webpack であたかも普通のモジュールかのように扱えるように出来る。プロダクト用途に便利。

Example

一番シンプルなやつ（allocate）

code: (rs)

#!warn(clippy::all)

use std::{mem, alloc as std_alloc};

pub unsafe extern fn alloc(size: usize) -> *mut u8 {

let layout = std_alloc::Layout::from_size_align(size, mem::align_of::<usize>()).unwrap();

std_alloc::alloc(layout)

}

pub unsafe extern fn dealloc(ptr: *mut u8, size: usize) {

if size == 0 { return }

let layout = std_alloc::Layout::from_size_align_unchecked(size, mem::align_of::<usize>());

std_alloc::dealloc(ptr, layout)

}

JavaScript の函数を呼ぶ

ビルトインシンボルと被るとコンパイルが通らないので注意する。

code: (rust)

#!warn(clippy::all)

extern {

fn console_log(num: f64);

}

code: (js)

const imports = { env: { console_log: console.log } };

WebAssembly.instantiate(buffer, imports);

no_std + wee_alloc (nightly)

no_std 環境では core クレートを使うことになるが core クレートには alloc が入っておらず、alloc クレートを使う。

core クレートには Cursor がないのでだいぶ厳しい。一応 core_io クレートに逃げることはできる。WebAssembly 向けでは std が使えるためあまり気にしなくて良さそう。

https://github.com/rustwasm/wee_alloc/blob/master/example/src/lib.rs

code: (rs)

#!warn(clippy::all)

#!feature(core_intrinsics, lang_items, alloc_error_handler)

extern crate alloc;

pub fn panic(_info: &::core::panic::PanicInfo) -> ! {

unsafe {

::core::intrinsics::abort();

}

}

#alloc_error_handler

pub extern fn oom(_: ::core::alloc::Layout) -> ! {

unsafe {

::core::intrinsics::abort();

}

}

// Needed for non-wasm targets.

#lang = "eh_personality"

pub extern fn eh_personality() {}

#global_allocator

static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;

use core::mem;

use alloc::alloc as sys_alloc;

pub unsafe extern fn alloc(size: usize) -> *mut u8 {

let layout = sys_alloc::Layout::from_size_align(size, mem::align_of::<usize>()).unwrap();

sys_alloc::alloc(layout)

}

pub unsafe extern fn dealloc(ptr: *mut u8, size: usize) {

if size == 0 { return }

let layout = sys_alloc::Layout::from_size_align_unchecked(size, mem::align_of::<usize>());

sys_alloc::dealloc(ptr, layout)

}

その他設定

WebAssembly.Memory を JavaScript から受け取りたいとき

code: .cargo/config (toml)

target = "wasm32-unknown-unknown"

rustflags = [

"-C", "link-arg=--import-memory",

]

もしくは nightly 環境だと link_args attribute を使って以下のように指定することも出来る。

https://stackoverflow.com/questions/47778074/how-to-resolve-function-pointers-in-rust-webassembly#answer-47779600

code:lib.rs

#!feature(link_args)

#!allow(unused_attributes) // link_args actually is used

#!link_args = "--import-memory"

#Rust #WebAssembly