😎

yamlfmt を WebAssembly にしてブラウザで動かす

2022/08/28に公開

GoogleのエンジニアであるBraydon Kains 氏が開発した yamlfmt という YAML のコードフォーマッターが最近話題。

yamlfmt は Go で書かれています。ということは WebAssembly にコンパイルできるので、ブラウザで動かすことができる。

作ったもの

GitHub Pages にデプロイしてます。

次の３つのパッケージを作りった。monorepo の構成には moon を使ってる。

Node.js からもブラウザからも使える yamlfmt の JS バインディング。@rollup/plugin-wasm が生成するコードを参考にして Node.js とブラウザの両方に対応した WebAssembly ライブラリにした。

yamlfmt の API を呼び出す Go プログラムを WebAssembly にコンパイルして、それを JS から呼び出す。

Node.js から @js-yamlfmt/wasm を叩いてフォーマットする CLI ツール。Tinypool 使って worker_threads でファイルごとに並列に実行する。

せっかく WebAssembly にコンパイルしたので作ってみたけど、CLI なら普通に Go のやつを実行すればいいので特に意味のないパッケージである。

CLI ツールなので名前ミスったと思ってる。

ブラウザから @js-yamlfmt/wasm を叩く playground のウェブサイト。Vite と React で作られた SPA。エディタ部分は monaco editor を使っている。

意外と動いた。

一番時間をつかったのは moon での monorepo 管理かもしれない。初めてだったので大変だったけど moon は便利だとは思う