Zenn
Closed3

Onyx lang as usual

onyx
hatahata

https://zenn.dev/hatappo/articles/f1ecb49715ea6c

の続き。

ブラウザ

せっかくなので書いたコードをブラウザで動かしてみたい。

add.onyx というファイル名で足し算の関数を作る [1]。

$ cat add.onyx 
#export "add" (x, y: i32) -> i32 {
    return x + y;
}

main :: () {}

ビルド

$ onyx build add.onyx -o add.wasm

index.html を作って、wasmバイナリを読み込んで add 関数を呼び出すための JS を書く。

<!DOCTYPE html>
<html>
<body>
  <h1>Onyx on browser</h1>
  <script>
    let importObject = {
    };

    let add;
    (async () => {
      let obj = await WebAssembly.instantiateStreaming(fetch('add.wasm'), importObject);
      add = obj.instance.exports.add;
      console.log(add(10, 20))
    })();
  </script>
</body>
</html>

wasm バイナリをブラウザに渡す簡易サーバをたてるためにライブラリをインストール

npm i live-server -D
npx live-server

http://127.0.0.1:8080/ を開くいてDevコンソールを見ると。

Uncaught (in promise) CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 4f 4e 59 58 @+0
await（非同期）
（匿名） @ （インデックス）:14

やはりマジックナンバーが違うと普通に怒られてた。。

強引にマジックナンバーだけ . a s m から O N Y X に書き換えてみる 。

（インデックス）:14 Uncaught (in promise) TypeError: WebAssembly.instantiate(): Import #0 module="onyx_runtime": module is not an object or function
await（非同期）
（匿名） @ （インデックス）:14

onyx_runtime で怒られてる？分からず、、また今度。

脚注

  1. メイン関数がないと build コマンドでおこられたので入れといた。 ↩︎

このスクラップは2023/12/28にクローズされました