reactjs / react-docgen

A CLI and library to extract information from React component files for documentation generation purposes.
https://react-docgen.dev
MIT License
3.66k stars 296 forks source link

Cannot parse Flow $Shape #306

Open neutraali opened 5 years ago

neutraali commented 5 years ago

I don't know whether this applies to all Flow utility types in general, but React makes extensive use of $Shape (and so do we!) - react-docgen (3.0.0-rc.1) seems to fail at parsing this.

Example component props:

// components/Label.js
type Props = $Shape<{
    /** Content to place inside .ui.label element */
    children?: React.Node,
    /** Classes for .ui.label element */
    classes?: string,
    /** Type of the label (icon, favicon, image, notification, state) */
    type?: 'icon' | 'favicon' | 'image' | 'notification' | 'state',
    /** Tooltip (data-content, data-position, data-delay) */
    tooltip?: Tooltip
}>;

With $Shape:

{
    "displayName": "Label",
    "methods": []
}

Without $Shape:

{
    "displayName": "Label",
    "methods": [],
    "props": {
        "children": {
            "required": false,
            "flowType": {
                "name": "ReactNode",
                "raw": "React.Node"
            },
            "description": "Content to place inside .ui.label element"
        },
        "classes": {
            "required": false,
            "flowType": {
                "name": "string"
            },
            "description": "Classes for .ui.label element"
        },
        "type": {
            "required": false,
            "flowType": {
                "name": "union",
                "raw": "'icon' | 'favicon' | 'image' | 'notification' | 'state'",
                "elements": [
                    {
                        "name": "literal",
                        "value": "'icon'"
                    },
                    {
                        "name": "literal",
                        "value": "'favicon'"
                    },
                    {
                        "name": "literal",
                        "value": "'image'"
                    },
                    {
                        "name": "literal",
                        "value": "'notification'"
                    },
                    {
                        "name": "literal",
                        "value": "'state'"
                    }
                ]
            },
            "description": "Type of the label (icon, favicon, image, notification, state)"
        },
        "tooltip": {
            "required": false,
            "flowType": {
                "name": "Tooltip"
            },
            "description": "Tooltip (data-content, data-position, data-delay)"
        }
    }
}
danez commented 5 years ago

It seems we do not support this yet. PRs welcome.