Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mo support for typescript intersection and parenthesized types #914

Open
rvetere opened this issue Apr 25, 2024 · 0 comments · May be fixed by #915
Open

Mo support for typescript intersection and parenthesized types #914

rvetere opened this issue Apr 25, 2024 · 0 comments · May be fixed by #915

Comments

@rvetere
Copy link
Contributor

rvetere commented Apr 25, 2024 •
edited
Loading

I wish this project would just use typescript to parse typescript as the old project react-docgen-typescript did. Why? Because we try to upgrade our design-system to use this new package "react-docgen" but we're already missing some core features.

A union type definition like the following is not parsed correctly:

type ButtonVariant = "standard" | "primary";

type ButtonWithChildren = {
  children: ReactNode;
  icon?: ReactNode;
};

type ButtonWithIconOnly = {
  children?: never;
  icon: ReactNode;
};

export type ButtonProps = {
  className?: string;
  variant?: ButtonVariant;
} & (ButtonWithChildren | ButtonWithIconOnly);

export const RegularFunctionComponent: FunctionComponent<ButtonProps> = (
  props,
) => <div>Just a regular component</div>;

Result

{
  "RegularFunctionComponent": {
    "description": "",
    "displayName": "RegularFunctionComponent",
    "methods": [],
    "props": {
      "className": {
        "required": false,
        "tsType": {
          "name": "string"
        },
        "description": ""
      },
      "variant": {
        "required": false,
        "tsType": {
          "name": "union",
          "raw": "\"standard\" | \"primary\"",
          "elements": [
            {
              "name": "literal",
              "value": "\"standard\""
            },
            {
              "name": "literal",
              "value": "\"primary\""
            }
          ]
        },
        "description": ""
      }
    },
    "path": "blocks/styled-resolver/test/testComponents.tsx"
  }
}

The two props "children" and "icon" are missing in the result. Parsing the same thing with react-docgen-typescript would indeed find the two props, so i would expect the following output:

Expected

{
  "RegularFunctionComponent": {
    "description": "",
    "displayName": "RegularFunctionComponent",
    "methods": [],
    "props": {
      "children": {
        "required": false,
        "tsType": {
          "name": "ReactNode"
        },
        "description": ""
      },
      "icon": {
        "required": false,
        "tsType": {
          "name": "ReactNode"
        },
        "description": ""
      },
      "className": {
        "required": false,
        "tsType": {
          "name": "string"
        },
        "description": ""
      },
      "variant": {
        "required": false,
        "tsType": {
          "name": "union",
          "raw": "\"standard\" | \"primary\"",
          "elements": [
            {
              "name": "literal",
              "value": "\"standard\""
            },
            {
              "name": "literal",
              "value": "\"primary\""
            }
          ]
        },
        "description": ""
      }
    },
    "path": "blocks/styled-resolver/test/testComponents.tsx"
  }
}

But i'm also wondering why the official babel parser typescript plugin can't handle that case?

Update: A short test with babel parser itselfs shows me that babel indeed is parsing this case correctly and all information would be available to produce the expected result. It is just not implemented in this package.

Update 2: I'm working on a PR and it seems to be quite promising - the complex intersection case with multiple interfaces is working now, i had to modify the "handleTSIntersectionType" function and add the missing "handleTSParenthesizedType". Now only the types are getting in my way and i destroyed some existing cases with intersection.... still working on it, hopefully next week i can present a fix :)
@rvetere rvetere linked a pull request Apr 26, 2024 that will close this issue
Open
8 tasks
@rvetere rvetere changed the title babel parser plugin "typescript" does not behave like typescript compiler Mo support for typescript intersection and parenthesized types May 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add support for intersection types/interfaces rvetere/react-docgen
1 participant
@rvetere