reactjs / reactjs/react-docgen

Support extracting of type information from tagged templates

Offen
#375 2 Kommentare 0 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

It looks like even if I have a resolver that resolves to components that use tagged templates like styled-components, the type annotations aren't extracted.

Consider the following example:

import styled from "styled-components";

interface FlexProps {
    bool: boolean
}

const Flex = styled('div')<FlexProps>`
	display: flex;
`;

/** @component */
export default Flex;

When used with an react-docgen-annotation-resolver, the type definitions won't be extracted.

I scoped it to this place in code that's responsible for finding type annotations: https://github.com/okonet/react-docgen/blob/8fb401089e3fe2b38d41638bc5690436e23aceb3/src/utils/getTypeAnnotation.js#L22

and it looks like it's searching for specific key typeAnnotation in the AST. For styled-component example, though, it won't present. But what's going to present is

Node {
     type: 'TaggedTemplateExpression',
     start: 95,
     end: 138,
     loc: SourceLocation { start: [Position], end: [Position] },
     tag:
      Node {
        type: 'CallExpression',
        start: 95,
        end: 108,
        loc: [SourceLocation],
        callee: [Node],
        arguments: [Array] },
     quasi:
      Node {
        type: 'TemplateLiteral',
        start: 119,
        end: 138,
        loc: [SourceLocation],
        expressions: [],
        quasis: [Array] },
     typeParameters:
      Node {
        type: 'TSTypeParameterInstantiation',
        start: 108,
        end: 119,
        loc: [SourceLocation],
        params: [Array] } },

So, it looks like there is something related to types in there but its not being properly handled.

Does anyone has any pointers on how to fix it?

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 in src/utils/getTypeAnnotation.js bei der im Issue verknüpften Suche nach der Typannotation und vergleiche dann den gezeigten TaggedTemplateExpression-AST mit den derzeit unterstützten Nodes. Verfolge, wie der react-docgen-annotation-resolver das Ergebnis verarbeitet. Fertig ist die Aufgabe, wenn Typdefinitionen wie FlexProps aus dem styled-components-Beispiel extrahiert werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react, typescript
Bereich
documentation
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

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