😎

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

2022/08/28に公開約1,000字

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

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

作ったもの

https://sosukesuzuki.github.io/js-yamlfmt/

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

設計

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

リポジトリは https://github.com/sosukesuzuki/js-yamlfmt

@js-yamlfmt/wasm

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

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

@js-yamlfmt/node

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

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

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

@js-yamlfmt/playground

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

感想

意外と動いた。

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

Discussion

ログインするとコメントできます