地味に間欠的に開発を続けている個人用勤怠記録 Web アプリWorking time around、開発の停止した Material Component for React(MDC React)をいつまでも使い続けるのもなあ、ということでMDC Web on other frameworksで紹介されているRMWC: React Material Web Componentsに置き換えました。RMWC の日本語の情報はほとんど見かけないのでちょっとメモ。
- グリッド関連のコンポーネント、一行のときは行(
GridRowコンポーネント)を省略して列(GridCellコンポーネント)を直接書けるようになっているのですが、そのせいで複数行のときGridコンポーネントの最初の子要素がGridRowコンポーネントでないと子要素全部がGridRowコンポーネントでラップされてレイアウトが崩れます。この「最初の子要素」というのは厳密な条件で、子要素コンポーネントのルートの要素がGridRowコンポーネントでも駄目。ちょっとやな感じの制約です。 - TextField コンポーネントで
textareaプロパティとtrailingIconプロパティを同時に指定するとアイコンがテキストエリアの右下ではなく右中央に表示されます。MDC React ではそんなことなかったので、これは RMWC 独自のバグっぽい。 - React Testing Libraryでテストコードを書くとき、一部のイベントは普通に書くと発火しません。これはアニメーションとの関係で、ソースコードの
*.spec.tsxを見てやっと解決したのですが、actでラップした上でさらにWindow.requestAnimationFrame()でラップする必要があります。で、そうするとactの使いかたがよくないと警告されるという……。これはちょっと回避方法はなさそう。window.scrollToのモック化が必要なイベントもあります。
なお置き換え自体は上記の点を除けばスムーズに進みました。もちろんコンポーネントやプロパティの名前が違っていたりしましたが、おおむねは機械的に作業できるレベル。機能上の都合で一部コンポーネント構成を変えましたが、その点を除けば置き換え前と置き換え後で見分けはつかないと思います。狙いは達成できてまずは一安心。まあベースとなる CSS フレームワークは同じなのでそうなってもらわないとこまったわけですが。
これでやろうと思っていたことはほぼ達成したので(あとError Boundary対応があるのですがこれは React の Hooks 対応待ち)、Working time around はバージョンを 1.0.0 として一区切りとします。