react-docgen icon indicating copy to clipboard operation
react-docgen copied to clipboard

Support extracting of type information from tagged templates

Open okonet opened this issue 6 years ago • 2 comments

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?

okonet avatar Jun 22 '19 09:06 okonet

@pvasek could you help since I think you did this already once.

okonet avatar Jun 22 '19 09:06 okonet

Another problem is that type definitions are only extracted from class or functional components https://github.com/reactjs/react-docgen/blob/master/src/utils/getFlowTypeFromReactComponent.js#L28-L50

smashercosmo avatar Jun 25 '19 11:06 smashercosmo