reactjs / reactjs/react-docgen

Allow flow inference of cast variable definitions.

Offen
#297 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

flow
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

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

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

Neue Issues direkt in Ihr Postfach

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