はじめに
Neovimと出会って約半年、今年こそ何かプラグインを作るぞ！ということで、Swaggerをリアルタイムでプレビューするプラグインを作成しました。
モチベーションは、単純にVimでSwaggerを書きたかった..ということです。
リポジトリ
インストール方法、使い方はこちらに記載しております。
shuntaka9576/preview-swagger.nvim
機能紹介
gif画像の通りで、:SwaggerPreviewコマンドを実行すると、ブラウザが開きます。
あとは、Neovim上でファイル編集を行うと、リアルタイムで内容が表示されます。
仕組み/技術
リモートプラグイン
Neovimには、プラグインをNeovim本体とは別のプロセスで起動し、msgpack-RPCを利用して機能拡張するリモートプラグインという仕組みがあります。
通常VimのプラグインはVimScriptを書く必要がありますが、リモートプラグインの仕組みを使うとコア部分はPython/Node.js/Go/Luaといった言語で書くことが出来ます。
msgpack-RPCに関しては、ラップされたライブラリが提供されているため意識せず書けました。
TypeScript
前述のリモートプラグインの仕組みを利用して、プラグインのコア部分はTypeScript(Node.js)で書いています。
Socket.IO
リアルタイムのWebアプリケーションを実現する方法は幾つかあり、Socket.IOはそれらをラップし全てのブラウザ・モバイルデバイスでリアルタイム通信を可能にするライブラリです。真新しいものではないです。
今回Neovimのバッファにあるのデータをフロントエンドに渡す部分で、Socket.IOを利用しています。
動作の流れは以下の通りです。
- (Neovim)カーソルが動く度にイベント発火、リモートプラグインをコール
- (リモートプラグイン)Socket.IOでデシリアライズしたバッファの内容を乗せてイベント発火
- (フロントエンド)イベントを受け取り、バッファ内容をSwaggerUIで表示
参考にしたOSS
iamcco/markdown-preview.nvim
マークダウンのリアルタイムプレビューだけでなく、カーソルの操作を元に自動でブラウザのスクロールをしてくれます。
Socket.IOの仕組み諸々とても参考にさせて頂きました。
フロントエンドはNext.jsを使われており、フロント経験のない私には分からなかったです..
最後に
初めてのプラグイン開発で感じたことは、当然ですがVimの基礎知識がないと辛いということです。
開発する前にVim scriptテクニックバイブルを見て軽く手を動かして良かったです。
Vimmerが一つ踏み込んでプラグインを開発する際に、丁度良い本でした。
フロント側は知識がなくやっつけなので、なんとかしたいと思っています！
勿論issue報告やプルリクエストがあれば大歓迎です。
以上、preview-swagger.nvimの紹介でした。