reactjs / reactjs/react-docgen

Cannot parse Flow $Shape

Aperta
#306 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

flow help wanted improvement
Lingua principale
TypeScript
Stelle
3.8k
Fork
316
Merge medio
5h 7m
PR unite (30g)
4

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Riproduci il malfunzionamento con l'esempio fornito components/Label.js e ispeziona i punti di ingresso del parsing di Flow di react-docgen; nell'issue non sono indicati né un file sorgente né un test. Il lavoro è completato quando le props racchiuse in $Shape vengono analizzate e vengono restituiti i metadati delle props mostrati per il tipo non racchiuso, con una copertura per questo esempio.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
javascript
Ambito
documentation, tooling
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.