eslint-plugin-atomic-design v0.2.1

この記事は なんか書く太郎｜GWアドベントカレンダー 2日目の記事です。

v0.1 -> v0.2

先日、拙作の eslint-plugin-atomic-design を約5ヶ月ぶりにアップデートしました。 直接 Atomic Design に関連する機能追加ではないです。

作ったときの記事はこれ

機能追加内容

/organisms/Hoge.js

こういう component があったとき、 Hoge.js をリファクタして HogeChild.js という子に分割したとき

/organisms/Hoge.js
/molecules/HogeChild.js

こういう構成を強制されます。Atomic Design としては、汎用 component である atoms から組み立てていく ボトムアップ志向前提なので、 本来これは問題にならない話なのですが、
すべてのパーツをはじめから汎用化して準備するのはなかなか難しいことです。

この分割のモチベーションが 切り出した子の汎用化を目的したものではなく、
親である Hoge 下に限定される再利用・責務の分割であるとき、
デザイン上の Atomic Design と実装都合上の Atomic Design に乖離が生じます。

上記例の /organisms/Hoge.js にしか利用されない、汎用性を欠いた子は molecule において良いのでしょうか…？
/molecules/HogeChild.js が 非常に良く作られた汎用フォーム /molecules/DateInput.js のようなものと並ぶのは気持ちの良いことではないですよね。

なので、 Atomic Design の流儀からは若干逸脱するかもしれませんが、
同名 Component ファイルを含むフォルダ、その配下にフォルダ名を prefix にした複数 Component を許可するオプションを追加しました。

/organisms/Hoge/Hoge.js
/organisms/Hoge/HogeChild.js
/organisms/Hoge/HogeAnotherChild.js

フォルダが class、同名ファイルを constructor、 他のファイルが private メンバのような構成で このとき constructor に当たる /organisms/Hoge/Hoge.js 以外は、 他 component から import することを許可していません。

loose と strict

上記動作をデフォルトにして module: 'loose' という設定にしています。
'strict' にすると 子同士の import が禁じられます。めちゃ厳しい。
フォルダ内で独自の生態系を作らせない抑止力になるとは思って用意してます。

そんなの Atomic Design じゃないよ、っていう人は module: 'off' にしてください。
すみません。(デフォルトを 'off'するかは正直かなり結構悩みました)