reactjs / reactjs/react-docgen
Allow flow inference of cast variable definitions.
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 3.8k
- Fork
- 316
- Merge medio
- 5h 7m
- PR unite (30g)
- 4
Descrizione
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;
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
La issue non fornisce alcun file del repository, test o punto di ingresso. Inizia tracciando come react-docgen rileva le definizioni dei componenti e le annotazioni dei tipi Flow, usando i due esempi Elevation come input; il lavoro è completato quando l’assegnazione con cast viene rilevata come componente e il suo tipo props viene estratto senza il wrapper.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript, react, typescript
- Ambito
- documentation, frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100