Alternatively obtain componentDisplayName from props object (#229)

* Obtain componentDisplayName also from props object

* docs(changeset): Permalink generation should also work now when `extract-react-types` is used.

Co-authored-by: Klaus Paiva <[email protected]>

Author: klauspaiva

.changeset/tall-yaks-matter.md

@@ -0,0 +1,5 @@
+---
+'pretty-proptypes': patch
+---
+
+Permalink generation should also work now when `extract-react-types` is used.

packages/pretty-proptypes/src/LayoutRenderer/index.js

@@ -10,6 +10,7 @@ import type { Components } from '../components';
 import getPropTypes from '../getPropTypes';
 import renderPropType from '../renderPropType';
 import PrettyPropType from '../PrettyConvert';
+import { getComponentDisplayName } from '../utils';
 
 type Obj = {
   kind: 'object',
@@ -91,12 +92,11 @@ const LayoutRenderer: FC<LayoutRendererProps> = ({
   }
 
   let renderProps = rest;
-  // ensure displayName passes through, assuming it has been captured
-  // $FlowFixMe as mentioned above, the typing for `component` is a bit off here...
-  if (component && component.___displayName) {
+  const componentDisplayName = getComponentDisplayName(component || (props || {}).component);
+  if (typeof componentDisplayName === 'string') {
     renderProps = {
       ...rest,
-      componentDisplayName: String(component.___displayName)
+      componentDisplayName
     };
   }
 

packages/pretty-proptypes/src/Props/index.js

@@ -9,6 +9,7 @@ import type { CommonProps } from '../types';
 import PropsWrapper from './Wrapper';
 import getPropTypes from '../getPropTypes';
 import renderPropType from '../renderPropType';
+import { getComponentDisplayName } from '../utils';
 
 import Prop from '../Prop';
 
@@ -69,12 +70,12 @@ export default class Props extends Component<DynamicPropsProps> {
     if (!propTypes) return null;
 
     let renderProps = rest;
-    // ensure displayName passes through, assuming it has been captured
-    // $FlowFixMe as mentioned above, the typing for `component` is a bit off here...
-    if (component && component.___displayName) {
+    // $FlowFixMe types are not exactly correct here ... sadly :/
+    const componentDisplayName = getComponentDisplayName(component || (props || {}).component);
+    if (typeof componentDisplayName === 'string') {
       renderProps = {
         ...rest,
-        componentDisplayName: String(component.___displayName)
+        componentDisplayName
       };
     }
 

packages/pretty-proptypes/src/PropsTable/index.js

@@ -11,6 +11,7 @@ import type { CommonProps } from '../types';
 import PropsWrapper from '../Props/Wrapper';
 import getPropTypes from '../getPropTypes';
 import renderPropType from '../renderPropType';
+import { getComponentDisplayName } from '../utils';
 import PropRow from './PropRow';
 
 type Obj = {
@@ -70,12 +71,12 @@ export default class PropsTable extends Component<DynamicPropsProps> {
     if (!propTypes) return null;
 
     let renderProps = rest;
-    // ensure displayName passes through, assuming it has been captured
-    // $FlowFixMe as mentioned above, the typing for `component` is a bit off here...
-    if (component && component.___displayName) {
+    // $FlowFixMe types are not exactly correct here ... sadly :/
+    const componentDisplayName = getComponentDisplayName(component || (props || {}).component);
+    if (typeof componentDisplayName === 'string') {
       renderProps = {
         ...rest,
-        componentDisplayName: String(component.___displayName)
+        componentDisplayName
       };
     }
 

packages/pretty-proptypes/src/utils.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-underscore-dangle */
+// @flow strict-local
+
+// eslint-disable-next-line import/prefer-default-export
+export const getComponentDisplayName = (
+  data:
+    | {
+        ___displayName?: string
+      }
+    | {
+        name?: {
+          name?: string
+        }
+      }
+    | void
+): string | void => {
+  // ensure displayName passes through, assuming it has been captured by Babel
+  if (data && data.___displayName) {
+    return String(data.___displayName);
+    // or it might be obtainable from the converter logic in `packages/extract-react-types/src/converter`
+  } else if (data && data.name && data.name.name) {
+    return String(data.name.name);
+  }
+
+  return undefined;
+};