C++ to TS

主に過去に作ったC/C++の資産をWASM化したいときを想定する．
新規でWASMを作るならRustでするのがいいと思う．

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_Wasm

適当なmain関数だけを定義したhello.cppをsrcディレクトリに配置．以下コマンドでjsファイルを作成&実行．

docker run --rm -v ./src:/src -u $(id -u):$(id -g) emscripten/emsdk emcc hello.cpp -o hello.js -sWASM=0
node hello.js

emccのオプション:

• sWASM: WASMを作るかどうか．0でjsのみ．1でWASMとそれを読み込むjsファイル．2は０と1で作られるファイルすべて（0のファイルは.wasm.jsという名前）．デフォルトで1．
• sMODULARIZE: モジュールから関数を取り出す方法をPromiseによるものにするかどうか．0の時はグローバルにインポートされる．1でPromiseによるものに変わる．
• sEXPORT_ES6: ES6のexport形式でモジュール化する．自動的にsMODULARIZE=1となる．

https://emscripten.org/docs/tools_reference/settings_reference.html

ES6モジュールにしたいので，やるならこっちのコマンドのほうが良さそう．

docker run --rm -v ./src:/src -u $(id -u):$(id -g) emscripten/emsdk emcc hello.cpp -o hello.mjs -sEXPORT_ES6=1

JS側の呼び出し例．hello.cppにhello関数を定義し公開する．js側では作成した"src/hello.mjs"をインポートして，awaitでモジュールのインスタンスを取得し，hello関数を実行する．

import createModule from "./src/hello.mjs";

(async () => {
    const module = await createModule()
    module.hello();
})();

そのほか関係ありそうなオプション:

• sWASM_WORKERS: C++のコードでマルチスレッドを使用するときに，Web上ではWeb Workersを使用する (WASM Workers) ときのオプション．
• sSHARED_MEMORY: Web Workersを使用するときに共有メモリ (SharedArrayBuffer)を使うオプション．
  • 通常はWeb Workersでメモリは共有できないが，SharedArrayBufferとAtomics APIにより利用可能となる．
• sAUDIO_WORKLET: C++のコードで音声処理の別スレッド実行をする際に，WASMではWeb Audio APIのAudioWorkletインターフェースを用いて行う (Wasm Audio Worklets API)ときのオプション．

embindを使うとクラスなども公開できる．

バインドするものをEMSCRIPTEN_BINDINGSブロック内で登録していく．
関数はemscripten::functionに登録する．

#include <iostream>

#ifdef __EMSCRIPTEN__
#include <emscripten/bind.h>
#endif

void my_func()
{
    std::cout << "function called" << std::endl;
}

#ifdef __EMSCRIPTEN__
EMSCRIPTEN_BINDINGS(my_module)
{
    emscripten::function("my_func", &my_func);
}
#endif

コンパイルはemccに-lembindオプションをつける．

クラスを公開するときはコンストラクタ関数やプロパティ，メソッドを指定できる．

使用するときはモジュールに登録されているコンストラクタ関数を呼び出す形になる．使用後にdeleteメソッドを呼び出さないとメモリリークするので注意．

#ifdef __EMSCRIPTEN__
#include <emscripten/bind.h>
#endif

class MyClass
{
private:
    int hoge_;

public:
    MyClass(int value) noexcept : hoge_(value) {}
    void hogeHoge() noexcept { ++hoge_; }
    int getHoge() const noexcept { return hoge_; }
};

#ifdef __EMSCRIPTEN__
EMSCRIPTEN_BINDINGS(my_module)
{
    emscripten::class_<MyClass>("MyClass")
        .constructor<int>()
        .function("hogeHoge", &MyClass::hogeHoge)
        .property("hoge", &MyClass::getHoge);
}
#endif

import createModule from "./src/hello.mjs";

(async () => {
    const module = await createModule()
    module.my_func();

    let myClass1 = new module.MyClass(1);
    console.log(myClass1.hoge);
    myClass1.hogeHoge();
    console.log(myClass1.hoge);
    myClass1.delete();  // 注意！
})();

わざわざTSをインストールしたdockerイメージを作るまでもないので，コマンドでどうにかする．

npm i -g typescriptするときに，WSLだとDNSで名前解決できないとエラーが出た．大した設定も必要のなさそうな以下の記事を参考にする．

https://qiita.com/georgeOsdDev@github/items/83a5f8381db3276f031b

最終コマンド:

docker run --rm -it -v ./src:/src -u $(id -u):$(id -g) --network=host \
  emscripten/emsdk bash -c "npm i -g typescript && \
  emcc hello.cpp -o hello.mjs -lembind -sEXPORT_ES6=1 --emit-tsd hello.d.ts"

jsファイルとwasmファイルと同じディレクトリにd.tsファイルが作成される．

今日は--network=hostが無くてもコンパイルできた．なぜ...?

上の公式ドキュメントにはcmakeの場合は「"./configure"を"cmake ."に置き換えてね」と書いているが，その通りにするとエラーがでる．

error: use `emcmake` rather then `emconfigure` for cmake projects

emcmakeを使ってcmakeすると動いた．

emcmake cmake .
emmake make

--no-entryオプションは通常のコンパイル時でも発生することがあるので注意．以下のエラーが表示される．

error: entry symbol not defined (pass --no-entry to suppress): main