reactjs / reactjs/react-docgen

Cannot parse Flow $Shape

Offen
#306 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

flow help wanted improvement
Vorherrschende Sprache
TypeScript
Sterne
3.8k
Forks
316
Ø Merge
5 Std. 7 Min.
Gemergte PRs (30 T.)
4

Beschreibung

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)"
		}
	}
}

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere den Fehler mit dem bereitgestellten Beispiel components/Label.js und untersuche die Flow-Parsing-Einstiegspunkte von react-docgen; im Issue wird keine Quelldatei und kein Test genannt. Als erledigt gilt, wenn die mit $Shape umschlossenen Props geparst werden und die für den nicht umschlossenen Typ angezeigten Props-Metadaten zurückgegeben werden, mit Abdeckung für dieses Beispiel.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript
Bereich
documentation, tooling
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
45/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.