reactjs / reactjs/react-docgen

Cannot parse Flow $Shape

Ouverte
#306 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

flow help wanted improvement
Langage dominant
TypeScript
Étoiles
3.8k
Forks
316
Merge moyen
5 h 7 min
PR mergées (30 j)
4

Description

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

Guide de contribution

Ouvrir le guide de contribution

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Piste de recherche

Reproduisez l’échec avec l’exemple fourni components/Label.js et inspectez les points d’entrée de l’analyse de Flow de react-docgen ; aucun fichier source ni test n’est mentionné dans l’issue. C’est terminé lorsque les props enveloppées dans $Shape sont analysées et que les métadonnées des props affichées pour le type non enveloppé sont renvoyées, avec une couverture pour cet exemple.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript
Domaine
documentation, tooling
Type d'issue
Bug
Difficulté
3/5
Temps estimé
1-2 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.