バンドラを使わずにRustをWASMにする

Rustを書く

まずモジュールを作る。

`cargo new --lib wasm`的な感じでプロジェクトを作って書いてく。

#[no_mangle]
pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

あわせて`Cargo.toml`にこれを書き足す。

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

これをビルドする。
`cargo build --target wasm32-unknown-unknown --release`とかで。

ホストする

適当にサーバーを立てればいい。

`.wasm`は、MIME-TYPEを`application/wasm`として返す必要があるので注意。
Pythonのワンライナーみたいなのだとダメだった。

ブラウザで実行する

こんなJSで読める。

(async () => {
  const path = "./wasm/target/wasm32-unknown-unknown/release/wasm.wasm";
  const {
    instance: {
      exports: { add }
    }
  } = await WebAssembly.instantiateStreaming(fetch(path), {});

  console.log(add(10, 7));
})();

`instantiateStreaming()`はSafariではまだ使えない。
その場合は`fetch()`を`ArrayBuffer`でやって、`instantiate()`に渡すひと手間が必要。

ES Modulesにする

`wasm-bindgen`のドキュメントにやり方は書いてある。

Without a Bundler - The `wasm-bindgen` Guide

`wasm-bindgen target/wasm32-unknown-unknown/release/wasm.wasm --out-dir ./pkg --target web`でビルドできる。

この`--target web`が、ES Modulesにする指定。

そして読み込む。

// in script[type=module]
import init, { add, greet } from './pkg/wasm.js';

(async () => {
  // これがいわゆるWASMのロードになり、これをしないと使えない
  await init();

  // あとは自由に
  console.log(greet());
})();

これでよし。

WebWorkerからも使いたい

ES ModulesがWorker内で使えない2019年現在、どうすればいいか。
ChromeのM80から、WebWorkerでだけはES Modulesが使えるようになるらしいけど、それでもChromeだけ。

メインスレッドでWASMを読み込んで、それをまるごとWorker側に`postMessage()`する方法もあるけど、なんとなく避けたい・・。

そこで使えるのが`no-modules`っていうターゲット！

`wasm-bindgen target/wasm32-unknown-unknown/release/wasm.wasm --out-dir ./pkg --target no-modules`でビルドできる。

`--target no-modules`が重要。
`--target web`のときと、成果物の種類は変わらない。

それをこのように読み込む。

// in WebWorker
importScripts("./pkg/wasm.js");
const { wasm_bindgen } = self;
const { add, greet } = wasm_bindgen;

(async () => {
  // またも先に読み込みが必要
  await wasm_bindgen('./pkg/wasm.wasm');

  // あとは自由に
  greet();
})();

仕組みは`web`ターゲットとほとんど一緒で、いったん初期化のステップを踏まないといけない。

あとは使いやすいようによしなにすればよい。
ちなみにこれは、ES Modulesを使わない場合に、メインスレッド側でWASMを読み込む方法としても使える。