reactjs / reactjs/react-docgen

Support extracting of type information from tagged templates

Aperta
#375 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Lingua principale
TypeScript
Stelle
3.8k
Fork
316
Merge medio
5h 7m
PR unite (30g)
4

Descrizione

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?

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia in src/utils/getTypeAnnotation.js, nella ricerca dell’annotazione di tipo collegata nell’issue, quindi confronta l’AST TaggedTemplateExpression mostrato con i nodi attualmente gestiti. Traccia il modo in cui react-docgen-annotation-resolver consuma il risultato. Il lavoro è completato quando definizioni di tipo come FlexProps vengono estratte dall’esempio styled-components.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react, typescript
Ambito
documentation
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.