reactjs / reactjs/react-docgen
Support extracting of type information from tagged templates
Personne n'a encore pris cette issue.
- Langage dominant
- TypeScript
- Étoiles
- 3.8k
- Forks
- 316
- Merge moyen
- 5 h 7 min
- PR mergées (30 j)
- 4
Description
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?
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez dans src/utils/getTypeAnnotation.js, au niveau de la recherche d’annotation de type référencée dans l’issue, puis comparez l’AST TaggedTemplateExpression montré avec les nœuds actuellement pris en charge. Suivez la manière dont react-docgen-annotation-resolver consomme le résultat. Le travail est terminé lorsque des définitions de type telles que FlexProps sont extraites de l’exemple styled-components.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react, typescript
- Domaine
- documentation
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 35/100