reactjs / reactjs/react-docgen
Support extracting of type information from tagged templates
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 3.8k
- Forks
- 316
- Avg merge
- 5h 7m
- Merged PRs (30d)
- 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?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in src/utils/getTypeAnnotation.js at the type-annotation lookup linked in the issue, then compare the shown TaggedTemplateExpression AST with the nodes currently handled. Trace how the react-docgen-annotation-resolver consumes the result. Done means type definitions such as FlexProps are extracted from the styled-components example.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100