Handle cycle in PropTypes shapeish validators

Author: danez

.changeset/seven-camels-flash.md

@@ -0,0 +1,5 @@
+---
+'react-docgen': patch
+---
+
+Handle cyclic references in PropTypes `shape()` and `exact()` methods.

packages/react-docgen/src/utils/__tests__/__snapshots__/getPropType-test.ts.snap

@@ -369,3 +369,30 @@ exports[`getPropType > resolve identifier to their values > resolves variables t
   },
 }
 `;
+
+exports[`getPropType > works with cyclic references in shape 1`] = `
+{
+  "name": "shape",
+  "value": "Component.propTypes",
+}
+`;
+
+exports[`getPropType > works with cyclic references in shape and required 1`] = `
+{
+  "name": "shape",
+  "value": "Component.propTypes",
+}
+`;
+
+exports[`getPropType > works with missing argument 1`] = `
+{
+  "name": "shape",
+  "value": {
+    "foo": {
+      "name": "custom",
+      "raw": "shape()",
+      "required": false,
+    },
+  },
+}
+`;

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

@@ -2,6 +2,7 @@ import type { ExpressionStatement } from '@babel/types';
 import { parse, makeMockImporter } from '../../../tests/utils';
 import getPropType from '../getPropType.js';
 import { describe, expect, test } from 'vitest';
+import type { NodePath } from '@babel/traverse';
 
 describe('getPropType', () => {
   test('detects simple prop types', () => {
@@ -483,6 +484,52 @@ describe('getPropType', () => {
     ).toMatchSnapshot();
   });
 
+  test('works with cyclic references in shape', () => {
+    expect(
+      getPropType(
+        parse
+          .statementLast<ExpressionStatement>(
+            `const Component = () => {}
+             Component.propTypes = {
+               foo: shape(Component.propTypes)
+             }`,
+          )
+          .get('expression.right.properties.0.value') as NodePath,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  test('works with cyclic references in shape and required', () => {
+    expect(
+      getPropType(
+        parse
+          .statementLast<ExpressionStatement>(
+            `const Component = () => {}
+             Component.propTypes = {
+               foo: shape(Component.propTypes).isRequired
+             }`,
+          )
+          .get('expression.right.properties.0.value') as NodePath,
+      ),
+    ).toMatchSnapshot();
+  });
+
+  test('works with missing argument', () => {
+    expect(
+      getPropType(
+        parse
+          .statementLast<ExpressionStatement>(
+            `const Component = () => {}
+             const MyShape = { foo: shape() }
+             Component.propTypes = {
+               foo: shape(MyShape)
+             }`,
+          )
+          .get('expression.right.properties.0.value') as NodePath,
+      ),
+    ).toMatchSnapshot();
+  });
+
   test('detects descriptions on nested types in exacts', () => {
     expect(
       getPropType(

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

@@ -1,4 +1,3 @@
-/*eslint no-use-before-define: 0*/
 import type { NodePath } from '@babel/traverse';
 import { getDocblock } from '../utils/docblock.js';
 import getMembers from './getMembers.js';
@@ -8,13 +7,8 @@ import printValue from './printValue.js';
 import resolveToValue from './resolveToValue.js';
 import resolveObjectKeysToArray from './resolveObjectKeysToArray.js';
 import resolveObjectValuesToArray from './resolveObjectValuesToArray.js';
-import type { PropTypeDescriptor, PropDescriptor } from '../Documentation.js';
-import type {
-  ArrayExpression,
-  Expression,
-  ObjectProperty,
-  SpreadElement,
-} from '@babel/types';
+import type { PropTypeDescriptor } from '../Documentation.js';
+import type { ArrayExpression, Expression, SpreadElement } from '@babel/types';
 
 function getEnumValuesFromArrayExpression(
   path: NodePath<ArrayExpression>,
@@ -145,6 +139,29 @@ function getPropTypeObjectOf(argumentPath: NodePath) {
   return type;
 }
 
+function getFirstArgument(path: NodePath): NodePath | undefined {
+  let argument: NodePath | undefined;
+
+  if (path.isCallExpression()) {
+    argument = path.get('arguments')[0];
+  } else {
+    const members = getMembers(path, true);
+
+    if (members[0] && members[0].argumentPaths[0]) {
+      argument = members[0].argumentPaths[0];
+    }
+  }
+
+  return argument;
+}
+
+function isCyclicReference(
+  argument: NodePath,
+  argumentPath: NodePath,
+): boolean {
+  return Boolean(argument && resolveToValue(argument) === argumentPath);
+}
+
 /**
  * Handles shape and exact prop types
  */
@@ -156,29 +173,36 @@ function getPropTypeShapish(name: 'exact' | 'shape', argumentPath: NodePath) {
   }
 
   if (argumentPath.isObjectExpression()) {
-    const value = {};
+    let value: Record<string, PropTypeDescriptor> | string = {};
 
     argumentPath.get('properties').forEach((propertyPath) => {
-      if (propertyPath.isSpreadElement() || propertyPath.isObjectMethod()) {
-        // It is impossible to resolve a name for a spread element
-        return;
-      }
+      // We only handle ObjectProperty as there is nothing to handle for
+      // SpreadElements and ObjectMethods
+      if (propertyPath.isObjectProperty()) {
+        const propertyName = getPropertyName(propertyPath);
 
-      const propertyName = getPropertyName(propertyPath);
+        if (!propertyName) return;
 
-      if (!propertyName) return;
+        const valuePath = propertyPath.get('value');
+        const argument = getFirstArgument(valuePath);
 
-      const valuePath = (propertyPath as NodePath<ObjectProperty>).get('value');
+        // This indicates we have a cyclic reference in the shape
+        // In this case we simply print the argument to shape and bail
+        if (argument && isCyclicReference(argument, argumentPath)) {
+          value = printValue(argument);
 
-      const descriptor: PropDescriptor | PropTypeDescriptor =
-        getPropType(valuePath);
-      const docs = getDocblock(propertyPath);
+          return;
+        }
 
-      if (docs) {
-        descriptor.description = docs;
+        const descriptor = getPropType(valuePath);
+        const docs = getDocblock(propertyPath);
+
+        if (docs) {
+          descriptor.description = docs;
+        }
+        descriptor.required = isRequiredPropType(valuePath);
+        value[propertyName] = descriptor;
       }
-      descriptor.required = isRequiredPropType(valuePath);
-      value[propertyName] = descriptor;
     });
     type.value = value;
   }
@@ -279,9 +303,10 @@ export default function getPropType(path: NodePath): PropTypeDescriptor {
 
     if (callee.isIdentifier()) {
       const propTypeHandler = propTypes.get(callee.node.name);
+      const argument = path.get('arguments')[0];
 
-      if (propTypeHandler) {
-        return propTypeHandler(path.get('arguments')[0]);
+      if (propTypeHandler && argument) {
+        return propTypeHandler(argument);
       }
     }
   }