Merge pull request #92 from soren121/component-expression-name

fix: use correct component identifier throughout docblock

Author: hipstersmoothie

src/__tests__/__snapshots__/generateDocgenCodeBlock.test.ts.snap

@@ -28,6 +28,30 @@ try {
 catch (__react_docgen_typescript_loader_error) { }"
 `;
 
+exports[`adds component with display name to docgen collection 1`] = `
+"import * as React from "react";
+
+interface ButtonComponentProps {
+  text: string;
+}
+
+export const Button = (props: ButtonComponentProps) => (
+  <button>{props.text}</button>
+);
+
+Button.displayName = "MyButtonDisplayName";
+
+try {
+    // @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: Button.__docgenInfo, name: "MyButtonDisplayName", path: "DisplayName.tsx#MyButtonDisplayName" };
+}
+catch (__react_docgen_typescript_loader_error) { }"
+`;
+
 exports[`component fixture DefaultPropValue.tsx has code block generated 1`] = `
 "import * as React from "react";
 
@@ -93,8 +117,6 @@ export const Button = (props: ButtonComponentProps) => (
 Button.displayName = "MyButtonDisplayName";
 
 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" } } } };
 }

src/__tests__/generateDocgenCodeBlock.test.ts

@@ -30,9 +30,8 @@ function loadFixtureTests(): GeneratorOptions[] {
 }
 
 const fixtureTests: GeneratorOptions[] = loadFixtureTests();
-const simpleFixture = fixtureTests.find(
-  (f) => f.filename === "Simple.tsx"
-) as GeneratorOptions;
+const simpleFixture = fixtureTests.find((f) => f.filename === "Simple.tsx")!
+const displayNameFixture = fixtureTests.find((f) => f.filename === "DisplayName.tsx")!
 
 describe("component fixture", () => {
   fixtureTests.forEach((generatorOptions) => {
@@ -51,6 +50,15 @@ it("adds component to docgen collection", () => {
   ).toMatchSnapshot();
 });
 
+it("adds component with display name to docgen collection", () => {
+  expect(
+    generateDocgenCodeBlock({
+      ...displayNameFixture,
+      docgenCollectionName: "STORYBOOK_REACT_CLASSES",
+    })
+  ).toMatchSnapshot();
+});
+
 it("generates value info for enums", () => {
   expect(
     generateDocgenCodeBlock(

src/generateDocgenCodeBlock.ts

@@ -11,6 +11,16 @@ export interface GeneratorOptions {
   typePropName: string;
 }
 
+/**
+ * Gets the identifier name for the component.
+ * 
+ * If the component has a displayName that differs from its
+ * identifier, this will return the identifier.
+ */
+function getComponentIdentifier(d: ComponentDoc): string {
+  return d.expression?.getName() || d.displayName
+}
+
 /**
  * Inserts a ts-ignore comment above the supplied statement.
  *
@@ -42,12 +52,18 @@ function insertTsIgnoreBeforeStatement(statement: ts.Statement): ts.Statement {
  * SimpleComponent.displayName = "SimpleComponent";
  * ```
  */
-function setDisplayName(d: ComponentDoc): ts.Statement {
+function setDisplayName(d: ComponentDoc): ts.Statement | null {
+  // If the expression name doesn't match the display name,
+  // then we know the component has already set a displayName
+  if (d.expression && d.expression.getName() !== d.displayName) {
+    return null
+  }
+
   return insertTsIgnoreBeforeStatement(
     ts.factory.createExpressionStatement(
       ts.factory.createBinaryExpression(
         ts.factory.createPropertyAccessExpression(
-          ts.factory.createIdentifier(d.displayName),
+          ts.factory.createIdentifier(getComponentIdentifier(d)),
           ts.factory.createIdentifier("displayName")
         ),
         ts.SyntaxKind.EqualsToken,
@@ -270,7 +286,7 @@ function insertDocgenIntoGlobalCollection(
               ts.factory.createPropertyAssignment(
                 ts.factory.createIdentifier("docgenInfo"),
                 ts.factory.createPropertyAccessExpression(
-                  ts.factory.createIdentifier(d.displayName),
+                  ts.factory.createIdentifier(getComponentIdentifier(d)),
                   ts.factory.createIdentifier("__docgenInfo")
                 )
               ),
@@ -316,7 +332,7 @@ function setComponentDocGen(
       ts.factory.createBinaryExpression(
         // SimpleComponent.__docgenInfo
         ts.factory.createPropertyAccessExpression(
-          ts.factory.createIdentifier(d.expression?.getName() || d.displayName),
+          ts.factory.createIdentifier(getComponentIdentifier(d)),
           ts.factory.createIdentifier("__docgenInfo")
         ),
         ts.SyntaxKind.EqualsToken,