copy comments when converting to class-properties (#806)

Author: danez

.changeset/eleven-camels-sleep.md

@@ -0,0 +1,5 @@
+---
+'react-docgen': patch
+---
+
+Make docblocks for assigned methods be correctly detected.

packages/react-docgen/src/handlers/componentMethodsJsDocHandler.ts

@@ -28,7 +28,7 @@ function merge<
 }
 /**
  * Extract info from the methods jsdoc blocks. Must be run after
- * flowComponentMethodsHandler.
+ * componentMethodsHandler.
  */
 const componentMethodsJsDocHandler: Handler = function (
   documentation: Documentation,

packages/react-docgen/src/utils/__tests__/getMethodDocumentation-test.ts

@@ -1,9 +1,11 @@
 import type { NodePath } from '@babel/traverse';
 import type {
+  AssignmentExpression,
   ClassDeclaration,
   ClassMethod,
   ClassPrivateMethod,
   ClassProperty,
+  ExpressionStatement,
   ObjectExpression,
   ObjectMethod,
 } from '@babel/types';
@@ -129,7 +131,7 @@ describe('getMethodDocumentation', () => {
       });
     });
 
-    test('extracts docblock on function assignment', () => {
+    test('extracts docblock on property assignment', () => {
       const def = parse.statement<ClassDeclaration>(`
         class Foo {
           /**
@@ -148,6 +150,27 @@ describe('getMethodDocumentation', () => {
         params: [],
       });
     });
+
+    test('extracts docblock on function assignment', () => {
+      const method = parse
+        .statementLast<ExpressionStatement>(
+          `const Foo = () => {}
+           /**
+            * Don't use this!
+            */
+           Foo.foo = () => {}
+          `,
+        )
+        .get('expression') as NodePath<AssignmentExpression>;
+
+      expect(getMethodDocumentation(method)).toEqual({
+        name: 'foo',
+        docblock: "Don't use this!",
+        modifiers: ['static'],
+        returns: null,
+        params: [],
+      });
+    });
   });
 
   describe('parameters', () => {

packages/react-docgen/src/utils/__tests__/normalizeClassDefinition-test.ts

@@ -109,4 +109,20 @@ describe('normalizeClassDefinition', () => {
 
     expect(classProperty).not.toBeDefined();
   });
+
+  test('copies comments to class property', () => {
+    const classDefinition = parse.statement<ClassDeclaration>(`
+      class Foo {}
+
+      // my comment
+      Foo.propTypes = 42;
+    `);
+
+    normalizeClassDefinition(classDefinition);
+    const classProperty = classDefinition.node.body.body[0] as ClassProperty;
+
+    expect(classProperty).toBeDefined();
+    expect(classProperty.leadingComments?.length).toBe(1);
+    expect(classProperty.leadingComments?.[0].value).toBe(' my comment');
+  });
 });

packages/react-docgen/src/utils/normalizeClassDefinition.ts

@@ -1,4 +1,4 @@
-import { classProperty } from '@babel/types';
+import { classProperty, inheritsComments } from '@babel/types';
 import getMemberExpressionRoot from '../utils/getMemberExpressionRoot.js';
 import getMembers from '../utils/getMembers.js';
 import type { NodePath } from '@babel/traverse';
@@ -42,6 +42,11 @@ const explodedVisitors = visitors.explode<TraverseState>({
             true,
           );
 
+          inheritsComments(property, path.node);
+          if (path.parentPath.isExpressionStatement()) {
+            inheritsComments(property, path.parentPath.node);
+          }
+
           state.classDefinition.get('body').unshiftContainer('body', property);
           path.skip();
           path.remove();