Open5
UIライブラリを作るためのライブラリを作りたい
UIライブラリを作るためのライブラリを作りたい。
UIライブラリのコンポーネントの実装は大変
Selectのコンポーネントであれば、どのような実装が必要であるか考えてみる(optionsも自前で実装する場合)。
・defaultValueが設定されている場合、valueにdefaultValueを設定
・fullWidthなどのサイズの調整
・defaultValueがある場合のvalueの設定
・classの設定
・disabled時の挙動(pointerEvents, 背景色など)
・hover時のcolor, border, backgroundなどの変更
・focus時のcolor, border, backgroundなどの変更
・autoFocus時の挙動(レンダリング後にfocus()を実行)
・stopPropagation()で親要素のクリックイベント無効
・placeholderの表示
・helperTextの表示(エラーの場合の文字色変更)
・Selectを開いた時のoptionsの表示制御(createPortalを使うなど)
・Selectが画面の端に置かれている時の、optionsの表示位置の調整(react-popperを使うなど)
・本来のselect, optionを隠す(visuallyHidden)
・option選択時にvisuallyHiddenで隠された本来のselectタグのeventの取得
・キーボード操作(Tabでfocus, 十字キーで移動, スペースorエンターで選択など)
・optionsを開いている間はスクロールを無効にする
・aria-expanded, aria-selectedなどのアクセシビリティ
・optionを別コンポーネントで実装する場合は、cloneElementで子要素のpropsに値を渡す
AutoCompleteも実装する場合は、debounceとthrottleなどで実装する必要も出てくるかもしれない。
このように1つのコンポーネントを実装するだけでも考えることが多いが、似たコンポーネントであれば、共通する処理は変わらないだろう。
UIライブラリは、デザインとロジックが一体となっているため、複雑になるにつれて、改善するのが難しくなる。
また、UIライブラリを作るにあたって、外部ライブラリと切り離せない実装になることが多い。
特に、CSS(sass, emotion, ゼロランタイム系など)やモジュールバンドラ(webpack, Vite)など技術のアップデートが早いライブラリに依存した実装になっていると、保守運用が大変になる。
UIライブラリを作るためのライブラリを作りたい
そこで、コンポーネントで使用する共通のロジックを関数化し、コンポーネントの実装に必要な機能の一部をimportして使えるようなライブラリを作りたい。
主なメリット
- 誰もが簡単にUIライブラリを実装できるコアライブラリのようなものができたら、ライブラリ依存の少ない独自のUIライブラリが作りやすくなるだろう。
- 各コンポーネントに必要なprops、event、その他ロジック、カスタマイズ例など、挙動や実装について詳細に記載したドキュメントができる
- ドキュメントを作ることによって、HTML Living Standardに取り入れるべき仕様としての貢献もできると思う。
このようなライブラリのアイデアや、似たライブラリがあるかなど、情報を集めています。
また、一緒に開発をしてくれる方も募集しています。
'package:flutter/material.dart'からReactコンポーネントに変換できる仕組みが作れたらいいかも
React NativeってFlutterほどMaterial Componentが充実してなさそうなので、React Nativeの実装を先にすすめて、Webに変換(通女のReactコンポーネントとしても使えるようにする)のがいいのかな
これに関しては、React Nativeに詳しくないので的外れなこと言っているかも
愚直にMUIを再開発するしかないのかな、Rustとか使って