Hacktoberfest 2026:メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

Cannot parse Flow $Shape

オープン
#306 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
3/5
見積もり時間
1〜2日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript

調査の方向性

提供された components/Label.js の例で失敗を再現し、react-docgen の Flow パースのエントリポイントを調査します。issue ではソースファイルもテストも指定されていません。$Shape でラップされた props をパースし、ラップされていない型について示される props メタデータを返し、この例のカバレッジを追加できれば完了です。

索引モデルが issue の本文から書いたものです。

説明

flow help wanted improvement

I don't know whether this applies to all Flow utility types in general, but React makes extensive use of $Shape (and so do we!) - react-docgen (3.0.0-rc.1) seems to fail at parsing this.

Example component props:

// components/Label.js
type Props = $Shape<{
	/** Content to place inside .ui.label element */
	children?: React.Node,
	/** Classes for .ui.label element */
	classes?: string,
	/** Type of the label (icon, favicon, image, notification, state) */
	type?: 'icon' | 'favicon' | 'image' | 'notification' | 'state',
	/** Tooltip (data-content, data-position, data-delay) */
	tooltip?: Tooltip
}>;

With $Shape:

{
    "displayName": "Label",
    "methods": []
}

Without $Shape:

{
	"displayName": "Label",
	"methods": [],
	"props": {
		"children": {
			"required": false,
			"flowType": {
				"name": "ReactNode",
				"raw": "React.Node"
			},
			"description": "Content to place inside .ui.label element"
		},
		"classes": {
			"required": false,
			"flowType": {
				"name": "string"
			},
			"description": "Classes for .ui.label element"
		},
		"type": {
			"required": false,
			"flowType": {
				"name": "union",
				"raw": "'icon' | 'favicon' | 'image' | 'notification' | 'state'",
				"elements": [
					{
						"name": "literal",
						"value": "'icon'"
					},
					{
						"name": "literal",
						"value": "'favicon'"
					},
					{
						"name": "literal",
						"value": "'image'"
					},
					{
						"name": "literal",
						"value": "'notification'"
					},
					{
						"name": "literal",
						"value": "'state'"
					}
				]
			},
			"description": "Type of the label (icon, favicon, image, notification, state)"
		},
		"tooltip": {
			"required": false,
			"flowType": {
				"name": "Tooltip"
			},
			"description": "Tooltip (data-content, data-position, data-delay)"
		}
	}
}
主要言語
TypeScript
スター
3.8k
フォーク
316
平均マージ
3時間 28分
マージ済み PR(30日)
6

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

reactjs/react-docgen のほかの issue

reactjs/react-docgen の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。