Merge pull request #58 from TrevorBurnham/trevorburnham/51-displayname-breaks-docgen

Use component expression name as identifier

Author: hipstersmoothie

src/__tests__/__fixtures__/DisplayName.tsx

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+interface ButtonComponentProps {
+  text: string;
+}
+
+export const Button = (props: ButtonComponentProps) => (
+  <button>{props.text}</button>
+);
+
+Button.displayName = "MyButtonDisplayName";

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

@@ -76,6 +76,28 @@ try {
 catch (__react_docgen_typescript_loader_error) { }"
 `;
 
+exports[`component fixture DisplayName.tsx has code block generated 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
+    MyButtonDisplayName.displayName = \\"MyButtonDisplayName\\";
+    // @ts-ignore
+    Button.__docgenInfo = { \\"description\\": \\"\\", \\"displayName\\": \\"MyButtonDisplayName\\", \\"props\\": { \\"text\\": { \\"defaultValue\\": null, \\"description\\": \\"\\", \\"name\\": \\"text\\", \\"required\\": true, \\"type\\": { \\"name\\": \\"string\\" } } } };
+}
+catch (__react_docgen_typescript_loader_error) { }"
+`;
+
 exports[`component fixture HyphenatedPropName.tsx has code block generated 1`] = `
 "import * as React from \\"react\\";
 

src/__tests__/generateDocgenCodeBlock.test.ts

@@ -6,7 +6,9 @@ import {
   GeneratorOptions,
 } from "../generateDocgenCodeBlock";
 
-function getGeneratorOptions(parserOptions: ParserOptions = {}) {
+const defaultParserOptions = { shouldIncludeExpression: true };
+
+function getGeneratorOptions(parserOptions: ParserOptions) {
   return (filename: string) => {
     const filePath = path.resolve(__dirname, "__fixtures__", filename);
 
@@ -24,7 +26,7 @@ function getGeneratorOptions(parserOptions: ParserOptions = {}) {
 function loadFixtureTests(): GeneratorOptions[] {
   return fs
     .readdirSync(path.resolve(__dirname, "__fixtures__"))
-    .map(getGeneratorOptions());
+    .map(getGeneratorOptions(defaultParserOptions));
 }
 
 const fixtureTests: GeneratorOptions[] = loadFixtureTests();
@@ -52,9 +54,10 @@ it("adds component to docgen collection", () => {
 it("generates value info for enums", () => {
   expect(
     generateDocgenCodeBlock(
-      getGeneratorOptions({ shouldExtractLiteralValuesFromEnum: true })(
-        "DefaultPropValue.tsx"
-      )
+      getGeneratorOptions({
+        ...defaultParserOptions,
+        shouldExtractLiteralValuesFromEnum: true,
+      })("DefaultPropValue.tsx")
     )
   ).toMatchSnapshot();
 });

src/generateDocgenCodeBlock.ts

@@ -305,7 +305,7 @@ function setComponentDocGen(
       ts.factory.createBinaryExpression(
         // SimpleComponent.__docgenInfo
         ts.factory.createPropertyAccessExpression(
-          ts.factory.createIdentifier(d.displayName),
+          ts.factory.createIdentifier(d.expression?.getName() || d.displayName),
           ts.factory.createIdentifier("__docgenInfo")
         ),
         ts.SyntaxKind.EqualsToken,

src/plugin.ts

@@ -405,7 +405,10 @@ export default class DocgenPlugin implements webpack.WebpackPluginInstance {
     }
 
     return {
-      docgenOptions,
+      docgenOptions: {
+        shouldIncludeExpression: true,
+        ...docgenOptions,
+      },
       generateOptions: {
         docgenCollectionName:
           docgenCollectionName === undefined