@bem-react/classname: Unclear typing for element-bound class name formatters
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 68/100
- issue の種類
- リファクタリング
- 明瞭さ
- おおむね明確
- 活発さ
- 静か
- 技術スタック
- typescript
- 領域
- frontend
調査の方向性
まず、@bem-react/classname にある cn() ヘルパーと ClassNameFormatter 型の宣言を見つけます。1 引数形式と 2 つの文字列による作成形式を比較し、issue に記載された要素に紐づく個別の型付けを導入します。さらに、2 番目の要素名を渡すと拒否される一方で、modifier の呼び出しは引き続き有効になるように、TypeScript のチェックを追加または更新します。
索引モデルが issue の本文から書いたものです。
説明
Current behaviour:
The cn() helper can create a formatter in two different ways:
const cnBlock = cn('Block');
const cnBlockElement = cn('Block', 'Element');
Both values are currently typed as ClassNameFormatter, but the second form behaves differently and makes part of the callable API misleading.
/* block formatter*/
const cnBlock = cn('Block');
cnBlock('Element'); // => Block-Element
cnBlock('Element', { mod: true }); // => Block-Element Block-Element_mod
cnBlock({ mod: true }); // => Block Block_mod
/* element formatter*/
const cnBlockElement = cn('Block', 'Element');
cnBlockElement('Element2', { mod: true }); // => Block-Element Block-Element_mod
cnBlockElement({ mod: true }); // => Block-Element Block-Element_mod
Problem: the first argument 'Element2' in this call is accepted by types, but has no effect. This makes the type contract unclear. For an element-bound formatter, passing another element name is meaningless: the element is already fixed when the formatter is created and Block-Element-Element can't exist as well.
Suggestion: the two formatter creation patterns should have different return types:
ClassNameFormatter]= for block formatters created by the one-argument form
ClassNameElementFormatter- for element-bound formatters created by the two strings
cnBlockElement('Element2', { mod: true });
// should be a TypeScript error
Notes:
- Not a runtime bug
- Bump will be safe since first argument was doing nothing
- I am ready to fix that
- 主要言語
- TypeScript
- スター
- 450
- フォーク
- 69
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
bem/bem-react のほかの issue
-
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
@bem-react/classname: Can't add modifier with value === 0対応中かも @frontstall が 934 日前に担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 55/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 52/100
-
@bem-react/pack: support relative imports再び着手できるかも @yarastqt が 2102 日前に担当しましたが、オープン中のプルリクエストはありません。 オープンbug scope: pack
-
@bem-react/pack: Impl plugin for prepare package.json再び着手できるかも @yarastqt が 2120 日前に担当しましたが、オープン中のプルリクエストはありません。 オープンimprovement scope: pack
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 77/100
apache/rocketmq-dashboard#6610 ·
メンテナーはふだん 3 日以内に返信
-
nextjs-tracking
難易度 2/5 1〜3時間 初心者へのやさしさ 69/100
cloudflare/vinext#3920 ·
メンテナーはふだん 1 日以内に返信
-
Team:Dashboards
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
elastic/kibana#297299 · コメント 1 件 ·
メンテナーはふだん 1 日以内に返信
-
analytics beginner friendly community contributions-welcome good first issue hacktoberfest help wanted up-for-grabs
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
メンテナーはふだん 1 日以内に返信
-
affected/v17 affected/v18 area/frontend type/bug
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
umbraco/Umbraco-CMS#24186 ·
メンテナーはふだん 2 日以内に返信