昨日のことだけど bouzuya/rust-sandbox に mmdv を追加した。
mmdv は Mermaid Viewer 。ローカルの mermaid ファイルを描画してブラウザで表示する。ファイルの更新を監視してブラウザの側も自動更新する。
きっかけは Helix だと Mermaid の preview がしづらいこと。 VS Code では拡張を使っていたのだけど、 Helix だとどうすればいいか分からなかったのでつくった。調べればあるかもしれないけど調べてない。 https://mermaid.live/ を使う手もあるが、ローカルのファイルとの同期が面倒だ。
軽い気持ちで雑につくった。
つくる過程でいろいろ課題があった。
まず Mermaid の描画ができないといけなかった。
mermaid は JavaScript なら問題なく動くはず……くらいの認識だった。
https://mermaid.js.org/config/usage.html
雑に CDN から取得して…… でなんとかなった。だいたい↓な感じ。
<script type="module"> import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs'; mermaid.initialize({ startOnLoad: false }); // Example of using the render function const drawDiagram = async function () { element = document.querySelector('#graphDiv'); const graphDefinition = 'graph TB\na-->b'; const { svg } = await mermaid.render('graphDiv', graphDefinition); element.innerHTML = svg; }; await drawDiagram(); </script>
既定値だと .mermaid な要素を勝手に処理して勝手に描画する。迷惑な挙動なので startOnLoad: false しておく。
次にファイルの監視ができないといけないかった。
ファイルを監視するツール……で思いついたのが cargo-watch 。 watchexec/cargo-watch を見ると、 notify crate に言及していた。
crates:notify 。いかにもな感じ。 notify-rs/notify 。
適当にドキュメントを見ながら実装。 debounce してないので、過剰に来てしまうけどひとまず許容する。
最後に WebSocket を使えないといけなかった。
ファイルを監視して変更に合わせてリロードしたい。そこで WebSocket を使うことにした。
crates:axum の features に ws がある。 examples もあり、分かりやすい。
JavaScript 側のインタフェースは MDN で WebSocket を調べる。
https://developer.mozilla.org/en-US/docs/Web/API/WebSocket
// Create WebSocket connection. const socket = new WebSocket("ws://localhost:8080"); // Connection opened socket.addEventListener("open", (event) => { socket.send("Hello Server!"); }); // Listen for messages socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });
うん。普通に動く。
あとは適当に Rust で CLI を書いておしまい。
とりあえず雰囲気は動くようになったので 0.1.0 にした。
今日のコミット。
