Open
24

[妄想] plantUmlのエディターを作りたい

openApiのドキュメント作成ツール stoplight を触ってから、plantUMLもこんなエディターほしいなと思い、作ってみたくなった。自分のレベル的に可能かどうかはわからなけどやってみる。

plantUMLがGPLでコピーレフトなライセンスだった気がする。もし作成するとしたら作ったやつもOSS化するのかな??

ここらへん、とりあえず後回しで考える。別にOSSでもいいや。

とりあえず、構成として
Reactとelectronでデスクトップアプリケーションとして作成する。

機能としては
stoplightのようにGUIによる入力と繰り返しの補助。リアルタイムのプレビュー
github連携とpushなどが可能。

これだけでもかなり便利になりそう。

上記プラグインは読んだところ
vscodeはmarkdownのプレビューにmarkdown-itを使っており、plantUML自体もそのmarkdown記法をおそらく拡張してるっぽい?

rendererは plantUMLサーバー
リモートもしくはローカル

ここらへんは利用できそう。

previewのリアルタイム部分はどう実現してるのかな?

plantUMLおもしろいな
テキストをbase64ならぬdeflate変換して、それをGETのpathに渡すことで実質POSTを実現してる。

http://www.plantuml.com/plantuml/uml/ZP4zRy8m48Pt_ueJdHawLMMe53iWLK9LLLHrFk8hM04xd9rI-kiR0u8a1CAG8SdpVja-DxP0nZNCCSiNx4ghbLivXeVnU2nJ9Vo9MABLMpOXa8N09OdQFq-Racn62RFR7WnIecAMx-Ig8Zl0B3YMZZNnFVZKV5UFfRfYteEs1oNFgKed7Oftv60oKw0DzpUgYrf9gTCBudxTnDdmXck2rtM1MUY7P-QFuF6f7-nRV3ZzLctSb7YDFPlUSQstgvwG_VG42_eL0kD7-FJ4eZXFWS74i0-WLkZz0D13RMVI96UKEQkxKTb4ftZDKmaHEy3mfP4qggxqot4UQveV3DJi8UflBQqSWMAAae-utuTE3zdma2qFTJDVrQKAXXVvKPawIq9NyUnshS7Du8lbnzh75ReowH-Gx7tYISRc--JEa_i7
http://www.plantuml.com/plantuml/png/ZP4zRy8m48Pt_ueJdHawLMMe53iWLK9LLLHrFk8hM04xd9rI-kiR0u8a1CAG8SdpVja-DxP0nZNCCSiNx4ghbLivXeVnU2nJ9Vo9MABLMpOXa8N09OdQFq-Racn62RFR7WnIecAMx-Ig8Zl0B3YMZZNnFVZKV5UFfRfYteEs1oNFgKed7Oftv60oKw0DzpUgYrf9gTCBudxTnDdmXck2rtM1MUY7P-QFuF6f7-nRV3ZzLctSb7YDFPlUSQstgvwG_VG42_eL0kD7-FJ4eZXFWS74i0-WLkZz0D13RMVI96UKEQkxKTb4ftZDKmaHEy3mfP4qggxqot4UQveV3DJi8UflBQqSWMAAae-utuTE3zdma2qFTJDVrQKAXXVvKPawIq9NyUnshS7Du8lbnzh75ReowH-Gx7tYISRc--JEa_i7

uiはとりあえずstoplight的に
サイドとメイン
メインは左がエディターで右がプレビュー

エディターとプレビュー
エディター部分は 生のテキスト or gui的なやつ
-> とりあえず figma でデザインを作ってみる。

どのように documentをもつのかが問題になってきた
例えば以前あげたvscodeのプラグイン作成者はDiagramというクラスを作り、そこのメンバ変数として

document: vscode.TextDocument

を保持している。

githubとの連携を考えたときに、該当のファイルをどう保持するのか。
eslintみたいにAST的に取得できたら楽かも。できるのかな?

ざっと調べたところ plantUMLにAST的なやつはなさそう

stoplightがopenAPIに対して成功しているのもopenAPIが最初からyaml形式で形が予め決まっているからかもしれない。github上でもyamlとしてimportすればすでにトークン解析とかできてるし。

これを達成するにはplantUMLのast作る必要ある? どうやってやるの?

とりあえず内部的にはドキュメントとしてではなくパースしたオブジェクトをモデル内に保持する形で。

plantUMLのレポジトリ。先程のplantuml-parser はSequence図とか対応していないので、本体を解析してどんどん追記していきたいところ

https://github.com/plantuml

plantUMLのパースの方はどうにかなりそうとして、githubのレポジトリってどうやってreact上で保持するの?

stoplightでは別にフロント側でrepositoryを保持しているわけではないみたい。

ただきになるリクエストがあって、

https://stoplight.io/api/git-proxy?https://github.com/hogeUser/hogeRepository.git/info/refs?service=git-upload-pack

でどうやらrefsを取得してるっぽい?

そしてPOSTでなにかしてる。

上記2つめから参照。gitサーバーへのgit cloneっぽい?

例えば、git cloneを実行した時には、サーバへは以下の2回のHTTPリクエストがとびます。
GET /hoge.git/info/refs?service=git-upload-pack
POST /hoge.git/git-upload-pack
最初の info/refs はブランチの一覧を返します。
昔のgitクライアントからはservice=git-upload-packのパラメータが付いてきません。これはdumbクライアントと呼ばれています。現在のgitクライアントはsmartクライアントと呼ばれていて、dumbクライアントがリポジトリ下のinfo/refsファイルの内容をそのまま送信するのに対し、多少のヘッダ情報がついたりします。

なんか以下のエラーが出てる。
TypeError: Cannot read property 'dirname' of undefined

ようやくわかった
どうやら fast-glob をブラウザ上でつかうとエラーがでるみたい。
ここらへんうまく回避できないか

とりあえず、 plant-parser の作者に今後ブラウザ上で機能させる予定はないかissueだしてきいてみた。

今後の方針として基本パースはバックエンドで行い、フロントエンドはASTっぽいなにかをやりくりしていくほうがよさげ。

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