Svelte用のUIライブラリを自作・公開したメモ

以前自分用にSvelteの汎用コンポーネントを作成したものを公開することにしました。自分の利便性のためだけにnpmにひっそり公開しようかとも思ったのですが、自分の参考用にサンプルが見れるサイトを作りたかったので、どうせサイトを作るなら公開するかという軽い気持ちで公開しました。公開するにあたりサイトの準備など色々キチンとしたのでその間に思ったことや、やり残したことを備忘メモとして残しておきます。万人に使い勝手が良いかはわかりませんが、珍しいコンポーネントだけ使えたりするので使ってみてもいいかという方は使ってみてくださいと宣伝しておきます🙃

公開したUIライブラリ

https://svseeds.dev/

ライブラリについて

自作した背景

表向きの背景はConceptsに記載した通り。一番大きいのは最近HTML標準で色々できるようになっており、最小労力での運用持続性の観点からどうしてもそれらを活用したかったため。私が探した限りではHTML標準にできるだけ沿うようなライブラリが見つからなかった。それにプラスして自分が好きなように変更できる(ちょっと違うと思った時に気軽に少し変更して使える)ライブラリが欲しかったため。個別にコンポーネントファイルをコピーして変更できるようになっているのはその考え方によるところが大きい。

反省点

• 引数名等は適当に付けずに最初から自然な名称にしておけばよかった
  • 何回か全体的にリネーム等の作業が発生した
• Sortableコンポーネントは最初からアクセシビリティやtouch操作対応すべきだった
  • もう一度それらの対応をするのが面倒すぎる

サイトについて

反省点

• 気軽にMDsveXで作れるハズと思い込みすぎた
  • remark-directiveプラグインが使えなかった
  • そのためマークダウンカスタマイズ対応に相当手間がかかった

対応したいこと

MDsveXをやめたい

• 代わりにmdastからsvast, svastからsvelteファイルに変換するunifiedプラグインを作りたい
  • 上述の通りMDsveXはremark-directiveプラグインが使えないため
    • remark-directiveを使用してカスタマイズ部分をシンプルにしたい
  • unifiedネイティブに近いただのプラグインとして使うような使い方がしたい
    • どっちにしろunifiedを使うのであればネイティブな方法の方がシンプルになる
    • メンテコストが下がりそう
  • context="module" is deprecated, use the module attribute instead の警告がうざすぎるのもある

コンポーネントの例を増やしたい

• 今は1コンポーネントにつき例を2つしか載せていないので増やしたい
  • 自分で色々使っていく間に増やしていきたい
  • あともうちょっとデモっぽい内容にしたい

検索機能を付けたい

• 後回しにした機能のため追加したい
  • そんな使う&見る人いない気がするので追加する必要ない気もする
    • 自分は大体把握してるし

雑記

サイトの参考に色々なライブラリサイトを確認している時にshadcn/uiがちょっと似ているなぁと思いました。私の方は大して進化させてないので気のせいかもしれませんが、収斂進化みたいなものなのでしょうか。そうだとすると見つけてないだけで似たようなのがたくさんありそう。
あとCloudflare Workersの静的Assetとしてサイトを公開しているのですが、スマホからアクセスするとたまに500エラーになるのが謎です。