hipstersmoothie / react-docgen-typescript-plugin

A webpack plugin to inject react typescript docgen information
MIT License
68 stars 28 forks source link

Docgen codeblock uses incorrect identifiers when component has a different display name #91

Closed soren121 closed 4 months ago

soren121 commented 5 months ago

Given this example component:

import * as React from "react";

interface ButtonComponentProps {
  text: string;
}

export const Button = (props: ButtonComponentProps) => (
  <button>{props.text}</button>
);

Button.displayName = "MyButtonDisplayName";

generateDocgenCodeBlock({ docgenCollectionName: "STORYBOOK_REACT_CLASSES" }) outputs:

try {
    // @ts-ignore
    MyButtonDisplayName.displayName = "MyButtonDisplayName";
    // @ts-ignore
    Button.__docgenInfo = { "description": "", "displayName": "MyButtonDisplayName", "props": { "text": { "defaultValue": null, "description": "", "name": "text", "required": true, "type": { "name": "string" } } } };
    // @ts-ignore
    if (typeof STORYBOOK_REACT_CLASSES !== "undefined")
        // @ts-ignore
        STORYBOOK_REACT_CLASSES["DisplayName.tsx#MyButtonDisplayName"] = { docgenInfo: MyButtonDisplayName.__docgenInfo, name: "MyButtonDisplayName", path: "DisplayName.tsx#MyButtonDisplayName" };
}
catch (__react_docgen_typescript_loader_error) { }"

The component's identifier name is Button, but the codeblock assigns displayName to MyButtonDisplayName, which does not exist. In the global collection object, it uses MyButtonDisplayName.__docgenInfo, which likewise doesn't exist.

hipstersmoothie commented 4 months ago

:rocket: Issue was released in v1.0.8 :rocket: