soluid

SolidJSのUIコンポーネントを、プロジェクトに直接ダウンロードして使うCLIツールを作った。

パッケージとして依存するのではなく、コンポーネントのソースを自分のリポジトリにコピーする方式。ランタイム依存は無い。

リポジトリ: https://github.com/misebox/soluid

公式WEB: https://misebox.github.io/soluid/

これもAIが無ければ面倒すぎて作ってないと思う。

作った理由

shadcn/ui は、コンポーネントをサーバーからダウンロードしてプロジェクトに置く方式になっている。いざとなったら自分で直せるし、良いやり方だなと思った。

自分はSolidJSをよく使うんだけど、いつも同じUIコンポーネントを使いたいので、自分用のコンポーネントライブラリを作った。

作りが甘いところもあるが、自分で直していけばいい。

仕組み

GitHub の Release 機能を使うことにした。

圧縮したコンポーネント群を Release に置いておく。こうするとバージョン管理もできる。

CLIがその Release ファイルをダウンロードし、その場で圧縮ファイルから必要なコンポーネントだけを取り出して、設定ファイルに書かれたパスへ配置する。

不要なコンポーネントは設定で除外しておけるし、後から追加したり更新したりもできる。

設定ファイル（soluid.config.json）はこんな感じ。

{
  "componentsVersion": "0.2.5",
  "componentDir": "src/components/soluid",
  "cssPath": "src/soluid.css",
  "components": ["Button", "TextField", "Dialog"]
}

componentsVersion がダウンロードしてくる Release のバージョン。CSSは、入れたコンポーネントのぶんが cssPath の1ファイルに連結される。

テーマは data-theme と data-density のCSS変数ベースで、ダークモードと表示密度の切り替えが最初からついている。

document.documentElement.setAttribute("data-theme", "dark");

使い方

フロントエンドのプロジェクトディレクトリで、bunx soluid init（または npx soluid init）のように使う。

  • init 設定ファイルをインタラクティブに作る
  • install 設定に書かれたコンポーネントとCSSをダウンロードして配置
  • add <component...> / remove <component...> 設定にコンポーネントを足す / 外す
  • list 利用できるコンポーネント一覧

AIに使わせる場合は、init を no-interactive で実行して設定ファイルだけ生成し、それを手動で直してから install を実行すれば良い。

使っている感想

基本的に、SolidJSで作るUIにはできるだけ使っている。

必要なものが無かったら追加して、バグがあれば修正して、新しいバージョンに含める。

他のプロジェクトで使っていて問題が見つかったら、soluidのリポジトリにissueを作っておいて、あとで対応する。

ドキュメント

GitHub Pages にドキュメントを掲載している。仕様の部分は多少自動生成するようにした。

GitHub の機能（Release、Pages）を便利に使えたと思う。

余談: AIに使わせるとき

AIに「soluid を使え」と言っても、solid-ui を使おうとしたり、「そんなパッケージは無い」と言ってきたりする。

npx soluid でヘルプが出るので、その出力を見せると話が早い。