Merge pull request #449 from kylemh/master

Resolve issue with first displayName always being used

Author: pvasek

.github/workflows/main.yml

@@ -1,6 +1,9 @@
 name: Node.js Package
 
 on:
+  push:
+    branches:
+      - '**'
   release:
     types: [created]
 

src/__tests__/data/MultipleAllWithDisplayName.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="button" />
+);
+
+Button.displayName = 'First';
+
+export const SubmitButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="submit" />
+);
+
+SubmitButton.displayName = 'Second';
+
+export const ResetButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="reset" />
+);
+
+ResetButton.displayName = 'Third';

src/__tests__/data/MultipleSomeWithDisplayName.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {}
+
+export const Button1 = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => <button {...props} ref={ref} type="button" />
+);
+Button1.displayName = 'First';
+
+export const NoExplicitDisplayName1 = (props: any) => <div>Some text</div>;
+
+export const Button2 = (props: ButtonProps) => (
+  <button {...props} type="button" />
+);
+Button2.displayName = 'Second';
+
+export const NoExplicitDisplayName2 = (props: any) => <div>Some more text</div>;

src/__tests__/data/MultipleWithNoExplicitDisplayName.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+interface ButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {}
+
+export const Button = (props: ButtonProps) => (
+  <button {...props} type="button" />
+);
+export const SubmitButton = (props: ButtonProps) => (
+  <button {...props} type="submit" />
+);
+export const ResetButton = (props: ButtonProps) => (
+  <button {...props} type="reset" />
+);

src/__tests__/parser.ts

@@ -1002,6 +1002,48 @@ describe('parser', () => {
       const [parsed] = parse(fixturePath('StatefulDisplayNameFolder/index'));
       assert.equal(parsed.displayName, 'StatefulDisplayNameFolder');
     });
+
+    describe('multiple components in one', () => {
+      it('should parse all `displayName` properties correctly when all are explicitly defined.', () => {
+        const result = parse(fixturePath('MultipleAllWithDisplayName'));
+
+        // Ensure we're not missing any exports.
+        assert.equal(result.length, 3);
+
+        const [parsed1, parsed2, parsed3] = result;
+
+        assert.equal(parsed1.displayName, 'First');
+        assert.equal(parsed2.displayName, 'Second');
+        assert.equal(parsed3.displayName, 'Third');
+      });
+
+      it('should parse all `displayName` properties correctly when some are explicitly defined.', () => {
+        const result = parse(fixturePath('MultipleSomeWithDisplayName'));
+
+        // Ensure we're not missing any exports.
+        assert.equal(result.length, 4);
+
+        const [parsed1, parsed2, parsed3, parsed4] = result;
+
+        assert.equal(parsed1.displayName, 'First');
+        assert.equal(parsed2.displayName, 'NoExplicitDisplayName1');
+        assert.equal(parsed3.displayName, 'Second');
+        assert.equal(parsed4.displayName, 'NoExplicitDisplayName2');
+      });
+
+      it('should parse all `displayName` properties correctly when none are explicitly defined.', () => {
+        const result = parse(fixturePath('MultipleWithNoExplicitDisplayName'));
+
+        // Ensure we're not missing any exports.
+        assert.equal(result.length, 3);
+
+        const [parsed1, parsed2, parsed3] = result;
+
+        assert.equal(parsed1.displayName, 'Button');
+        assert.equal(parsed2.displayName, 'SubmitButton');
+        assert.equal(parsed3.displayName, 'ResetButton');
+      });
+    });
   });
 
   describe('Parser options', () => {

src/parser.ts

@@ -1211,11 +1211,42 @@ function getTextValueOfFunctionProperty(
     .filter(statement => {
       const expr = (statement as ts.ExpressionStatement)
         .expression as ts.BinaryExpression;
+
+      const locals = Array.from(
+        (source as any).locals as [string, ts.Symbol][]
+      );
+      const hasOneLocalExport =
+        locals.filter(local => !!local[1].exports).length === 1;
+
+      if (hasOneLocalExport) {
+        return (
+          expr.left &&
+          (expr.left as ts.PropertyAccessExpression).name &&
+          (expr.left as ts.PropertyAccessExpression).name.escapedText ===
+            propertyName
+        );
+      }
+
+      /**
+       * Ensure the .displayName is for the currently processing function.
+       *
+       * This avoids the following situations:
+       *
+       *  - A file has multiple functions, one has `.displayName`, and all
+       *    functions ends up with that same `.displayName` value.
+       *
+       *  - A file has multiple functions, each with a different
+       *    `.displayName`, but the first is applied to all of them.
+       */
+      const flowNodeNameEscapedText = (statement as any)?.flowNode?.node?.name
+        ?.escapedText as false | ts.__String | undefined;
+
       return (
         expr.left &&
         (expr.left as ts.PropertyAccessExpression).name &&
         (expr.left as ts.PropertyAccessExpression).name.escapedText ===
-          propertyName
+          propertyName &&
+        flowNodeNameEscapedText === exp.escapedName
       );
     })
     .filter(statement => {