reactjs / reactjs/react-docgen
Allow flow inference of cast variable definitions.
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.8k
- Forks
- 316
- Ø Merge
- 5 Std. 7 Min.
- Gemergte PRs (30 T.)
- 4
Beschreibung
I love this library, I use it to generate the documentation for https://jamesmfriedman.github.io/rmwc/.
If this library could detect cast expressions from Flow, it seemingly would fix any sort of style related issue for how people wanted to write their components.
I tried implementing this myself, but I just don't know enough about the codebase to make it happen.
For reference, this is what I'm currently doing to hack around this. I have a factory function that can't be detected, so I have to have a separate component that wraps it just to capture the flowtype definition. I get a lot of utility out of this library, but this is something I really wish I could fix.
BAD EXAMPLE
// @flow
// eslint-disable-next-line no-unused-vars
import * as React from 'react';
import { simpleTag } from '@rmwc/base';
import type { SimpleTagPropsT } from '@rmwc/base/simpleTag';
export type ElevationPropsT = {
/** A number from 0 - 24 for different levels of elevation */
z: number | string,
/** Allows for smooth transitions between elevations when the z value changes. */
transition?: boolean
} & SimpleTagPropsT;
const ElevationRoot = simpleTag({
displayName: 'ElevationRoot',
defaultProps: {
z: 0,
transition: false
},
tag: 'div',
classNames: (props: ElevationPropsT) => [
`mdc-elevation--z${props.z}`,
{ 'mdc-elevation-transition': props.transition }
],
consumeProps: ['z', 'transition']
});
// I HAVE TO RE-WRAP THIS JUST TO MAKE IT WORK
/**
* The Elevation Component
*/
export const Elevation: React.ComponentType<ElevationPropsT> = (
props: ElevationPropsT
) => <ElevationRoot {...props} />;
Elevation.displayName = 'Elevation';
export default Elevation;
WHAT WOULD BE AMAZING
// @flow
// eslint-disable-next-line no-unused-vars
import * as React from 'react';
import { simpleTag } from '@rmwc/base';
import type { SimpleTagPropsT } from '@rmwc/base/simpleTag';
export type ElevationPropsT = {
/** A number from 0 - 24 for different levels of elevation */
z: number | string,
/** Allows for smooth transitions between elevations when the z value changes. */
transition?: boolean
} & SimpleTagPropsT;
// MAKE THIS WORK BECAUSE IT IS CASTING TO React.ComponentType<ElevationPropsT>
/**
* The Elevation Component
*/
const Elevation: React.ComponentType<ElevationPropsT> = simpleTag({
displayName: 'Elevation',
defaultProps: {
z: 0,
transition: false
},
tag: 'div',
classNames: (props: ElevationPropsT) => [
`mdc-elevation--z${props.z}`,
{ 'mdc-elevation-transition': props.transition }
],
consumeProps: ['z', 'transition']
});
export default Elevation;
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Das Issue enthält keine Repository-Datei, keinen Test und keinen Einstiegspunkt. Beginne damit nachzuverfolgen, wie react-docgen Komponentendefinitionen und Flow-Typannotationen erkennt, wobei die beiden Elevation-Beispiele als Eingaben verwendet werden; abgeschlossen ist die Aufgabe, wenn die Cast-Zuweisung als Komponente erkannt wird und ihr Props-Typ ohne den Wrapper extrahiert wird.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react, typescript
- Bereich
- documentation, frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100