新卒時代から開発し続けてる自作 Markdown パーサーを大幅ブラッシュアップした話
はじめに
今日は新卒時代から育ててる自作 Markdown パーサー Richmd について、色々共有しようと思います。
↓「そもそも、Richmd ってなんだよ!」って思った人は、まずは、こちらを読んでいただけると幸いです 🙏
今までの Richmd について
Richmd は、自作の Markdown パーサーでオリジナルの書式も持っていましたが、実際使ってみると様々な問題点を抱えてる状態でした。
問題: CSS インポートでグローバルに適用されて汚染される
例えば、TailwindCSS を使っている場合、richmdのスタイルを適用した結果、グローバルに適用されて、TailwindCSS が使えないという致命的な問題を抱えていました。
CSS-in-JS では、そこまで影響がない感じでしたが、その CSS-in-JS も styled-components 終了 & 事実上終焉宣言が出たのもあり、改めて問題をクリアする必要がありました。
問題: ビルドが古典的すぎる問題
今までは tsc でビルドしている状態でした。だいぶ古典的であったため、成果物の性能が良くなかったことや、今後の管理とユースケースを考えると、そろそろビルド周りも見直す必要がありました。
問題: 拡張パッケージ出したときの管理が難しい
実は React, Vue 用のコンポーネントパッケージを作成したことがありますが、パッケージがバラバラであるため、管理が難しい問題がありました。
この問題を解消するには、パッケージを@richmd/XXXXのように Organization で管理する必要がありました。
忙しさを理由に、この上記の問題をだいぶ放置してしまってたのですが、たまたま時間に余裕ができたので、大幅アップデートしました。
大幅アップデート 🎉
パッケージ管理を npm Organization 管理に変更
まず、Richmd v3 から、以下リポジトリに変更しました。
今回から npm Organization 管理にしたので、パッケージ名も richmd から @richmd/core になりました。
また上記のコンポーネントパッケージを継承し、
@richmd/react, @richmd/vue を作成し、メジャーリリースしました。
これで、かなり管理がしやすくなりました 🙌
ビルドを vite に変更
このアップデートで vite でパッケージビルドするように変更しました。
tsc のビルドは、型ファイル出力で使用していますが、以前とは違い、かなり安定してビルドできてるかと思います。
グローバル定義してる CSS を削除
今回 HTML変換時に richmd というクラス名をもった div タグを作成し、それをルートにとして描画するようにしました。
これにより、CSS に .richmd を親として定義することで、グローバル定義してるスタイルを削除することに成功しました。
(余談ですが、単純作業であったため、Cline という AI に変換作業をお願いしました 🙏)
今後について
今後ですが、以下を計画しています。
Markdown 拡張
そろそろ、新しい機能追加したいと思っています。
現在計画してるのは、スライドモードという Markdown で書いたものをスライド形式で見れるようにする機能です。
流石に、これは現状のようなHTML変換方法では厳しい気がしており、以下のように Markdown パーサーとHTML変換を分割する可能性がありそうです。
(実装後の管理が大変そうですが。。。)
@richmd/core → パーサー機能のみの提供
@richmd/js(仮) → js,ts で使うHTML変換機能
@richmd/react → react で使うHTML変換機能
@richmd/vue → vue で使うHTML変換機能
最後に
気がついたら、新卒デビューから5年立ちますが、ここまで来たらとことん極めて行こうと思います 💪
やっていき 💪
Discussion