鈴木颯介のブログ

技術的なメモとかポエムとか。

AST エクスプローラを作った

Prettier へ貢献する中で使いやすい AST エクスプローラがあったら便利だと思ったので、自分で作ってみました。

https://github.com/sosukesuzuki/AST-Explorer

ほしいもの

  • 左にテキストエディタがあって右にその内容をパースしたASTがある
  • テキストエディタにはコードを書くのでそれなりにリッチ
  • JSON のツリービュー もそれなりにリッチなのがあると嬉しい
  • ブラウザのみで動きサーバー等との通信はしない
  • 複数のパーサーの切り替えができる

できたもの

初期ローディングがすごく遅い上にデスクトップPWAとしての挙動がとても不安定なのでそこは直さないといけませんね、、、

使った技術

  • 特に強い理由はありませんが、使い慣れているため React と TypeScript を使いました。
    • このくらいの規模のものなら、Redux や MobXを導入せずにContextとuseStateだけで状態を管理した方が楽かもなぁと最近は思います。
  • @primer/components に型定義ができたのを最近知ったのでテンションあがって導入しましたが、よく考えたら UI らしい UI もないのではがすかもしれません。
  • エディタ部分はAce Editorを使っていますが、もしかしたら変えるかもしれません。
  • JSON のツリービューにはreact-json-treeというReduxの開発者ツールで使われているビューワーコンポーネントを使っていますが、こちらももしかしたら変えるかもしれません。
  • 当初 webpack の設定を書くのが面倒だったので Parcel を使っていましたが、パーサーごとバンドルするとバンドルサイズがかなりとんでもないことになるのでチャンクするために Webpack でバンドルするように変えました。(あと理由はわからないけど prettier/parser-typescript が Parcel だと動かなかった、なんでだろう)
  • パーサーは @babel/parser@typescript-eslint/typescript-estree ですがそれぞれ Prettier を経由しています。
    • あまり知られていない気がしますが、(よくない方法ですが)prettier.__debug.parse からパーサーをそのまま使うことができます。今回の場合は Prettier への貢献のためなのでこれで良いでしょう。
  • パースは重いので Web Worker 内で行います。初めて Web Worker を本格的に使ってみましたが、 Comlink や Worker Plugin 、worker-loader などのおかげで Worker を意識せずにできるので良かったです。
  • デスクトップ PWA のために WorkBox Plugin を使っていますが、インストールがなぜか激重なので直します。

今後

  • ローディングにかかる時間をなんとかしたい
  • シンタックスエラーをもっとよしなに表示したい