reactjs / reactjs/react-docgen

Support for compound components

Offen
#775 2 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

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've been playing around with the latest beta, and while it works well for many cases, I could not get it to work with compound components.

A compound component generally looks like this:

<Compound foo>
  <Compound.Child />
</Compound>

I'm defining it as follows:

import React from 'react';
import type { PolymorphicComponent } from '~/utils';

const ParentComponent = React.forwardRef((props, ref) => {
  return (/* ... */)
}) as PolymorphicComponent<'div', ParentOwnProps>;
type ParentOwnProps = {
  /** foo prop */
  foo?: boolean;
};

const ChildComponent = React.forwardRef((props, ref) => {
  return (/* ... */)
}) as PolymorphicComponent<'div', ChildOwnProps>;
type ChildOwnProps = {
  /** bar prop */
  bar?: string;
};

/** description for main component */
export const Compound = Object.assign(ParentComponent, {
  /** description for subcomponent */
  Child: ChildComponent,
});
export default Compound;

I would guess that react-docgen would need to support a few different things here:

  • using the types that are inferred by props (in this case through PolymorphicComponent utility). related: #590
  • detecting that these multiple components are exported through a single Object.assign declaration and reading jsdoc from there

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

Beginne mit der Überprüfung, wie von TypeScript inferierte Props und Object.assign-Deklarationen behandelt werden, und verwende das Beispiel PolymorphicComponent und das zugehörige Issue #590 als Einstiegspunkte. Als erledigt gilt die Aufgabe, wenn zusammengesetzte Exporte erkannt und die JSDoc-Beschreibungen des Eltern- und des Kindelements korrekt gelesen werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
documentation, tooling
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

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