feat: support get special component displayName

xyy94813 · xyy94813 · commit 4ebe15f98a72 · 2021-06-02T12:02:10.000+08:00
support format Suspense、Profiler、StrictMode and Context.
diff --git a/src/index.spec.js b/src/index.spec.js
@@ -2,7 +2,14 @@
 
 /* eslint-disable react/no-string-refs */
 
-import React, { Fragment, Component } from 'react';
+import React, {
+  Fragment,
+  Component,
+  Suspense,
+  createContext,
+  Profiler,
+  StrictMode,
+} from 'react';
 import { createRenderer } from 'react-test-renderer/shallow';
 import { mount } from 'enzyme';
 import reactElementToJSXString, { preserveFunctionLineBreak } from './index';
@@ -1113,6 +1120,53 @@ describe('reactElementToJSXString(ReactElement)', () => {
     ).toEqual(`<div render={<><div /><div /></>} />`);
   });
 
+  it('reactElementToJSXString(<Suspense fallback="loading" />)', () => {
+    expect(reactElementToJSXString(<Suspense fallback="loading" />)).toEqual(
+      `<Suspense fallback="loading" />`
+    );
+  });
+
+  it('reactElementToJSXString(<Profiler id="Main" />)', () => {
+    expect(reactElementToJSXString(<Profiler id="Main" />)).toEqual(
+      `<Profiler id="Main" />`
+    );
+  });
+
+  it('reactElementToJSXString(<StrictMode />)', () => {
+    expect(reactElementToJSXString(<StrictMode />)).toEqual(`<StrictMode />`);
+  });
+
+  it('reactElementToJSXString(<Context.Provider><Context.Consumer/></Context.Provider>)', () => {
+    const Context = createContext('Custom Context');
+    expect(
+      reactElementToJSXString(
+        <Context.Provider>
+          <Context.Consumer />
+        </Context.Provider>
+      )
+    ).toEqual(
+      `<Context.Provider>
+  <Context.Consumer />
+</Context.Provider>`
+    );
+  });
+
+  it('reactElementToJSXString: context with displayName', () => {
+    const Context = createContext('Custom Context');
+    Context.displayName = 'CustomContext';
+    expect(
+      reactElementToJSXString(
+        <Context.Provider>
+          <Context.Consumer />
+        </Context.Provider>
+      )
+    ).toEqual(
+      `<CustomContext.Provider>
+  <CustomContext.Consumer />
+</CustomContext.Provider>`
+    );
+  });
+
   it('should not cause recursive loop when prop object contains an element', () => {
     const Test = () => <div>Test</div>;
 
diff --git a/src/libs/ReactSymbols.js b/src/libs/ReactSymbols.js
@@ -0,0 +1,61 @@
+/**
+ * Copy from https://github.com/facebook/react/blob/28625c6f45423e6edc5ca0e2932281769c0d431e/packages/shared/ReactSymbols.js
+ *
+ * @flow
+ */
+export let REACT_ELEMENT_TYPE = 0xeac7;
+export let REACT_PORTAL_TYPE = 0xeaca;
+export let REACT_FRAGMENT_TYPE = 0xeacb;
+export let REACT_STRICT_MODE_TYPE = 0xeacc;
+export let REACT_PROFILER_TYPE = 0xead2;
+export let REACT_PROVIDER_TYPE = 0xeacd;
+export let REACT_CONTEXT_TYPE = 0xeace;
+export let REACT_FORWARD_REF_TYPE = 0xead0;
+export let REACT_SUSPENSE_TYPE = 0xead1;
+export let REACT_SUSPENSE_LIST_TYPE = 0xead8;
+export let REACT_MEMO_TYPE = 0xead3;
+export let REACT_LAZY_TYPE = 0xead4;
+export let REACT_SCOPE_TYPE = 0xead7;
+export let REACT_OPAQUE_ID_TYPE = 0xeae0;
+export let REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
+export let REACT_OFFSCREEN_TYPE = 0xeae2;
+export let REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
+export let REACT_CACHE_TYPE = 0xeae4;
+
+if (typeof Symbol === 'function' && Symbol.for) {
+  const symbolFor = Symbol.for;
+  REACT_ELEMENT_TYPE = symbolFor('react.element');
+  REACT_PORTAL_TYPE = symbolFor('react.portal');
+  REACT_FRAGMENT_TYPE = symbolFor('react.fragment');
+  REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
+  REACT_PROFILER_TYPE = symbolFor('react.profiler');
+  REACT_PROVIDER_TYPE = symbolFor('react.provider');
+  REACT_CONTEXT_TYPE = symbolFor('react.context');
+  REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
+  REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
+  REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
+  REACT_MEMO_TYPE = symbolFor('react.memo');
+  REACT_LAZY_TYPE = symbolFor('react.lazy');
+  REACT_SCOPE_TYPE = symbolFor('react.scope');
+  REACT_OPAQUE_ID_TYPE = symbolFor('react.opaque.id');
+  REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
+  REACT_OFFSCREEN_TYPE = symbolFor('react.offscreen');
+  REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
+  REACT_CACHE_TYPE = symbolFor('react.cache');
+}
+
+const MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
+const FAUX_ITERATOR_SYMBOL = '@@iterator';
+
+export function getIteratorFn(maybeIterable: ?any): ?() => ?Iterator<*> {
+  if (maybeIterable === null || typeof maybeIterable !== 'object') {
+    return null;
+  }
+  const maybeIterator =
+    (MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL]) ||
+    maybeIterable[FAUX_ITERATOR_SYMBOL];
+  if (typeof maybeIterator === 'function') {
+    return maybeIterator;
+  }
+  return null;
+}
diff --git a/src/libs/getComponentNameFromType.js b/src/libs/getComponentNameFromType.js
@@ -0,0 +1,113 @@
+/**
+ * Core logic copy from https://github.com/facebook/react/blob/28625c6f45423e6edc5ca0e2932281769c0d431e/packages/shared/getComponentNameFromType.js
+ *
+ * @flow
+ */
+
+import type { LazyComponent, ReactContext, ReactProviderType } from 'react';
+
+import {
+  REACT_CONTEXT_TYPE,
+  REACT_FORWARD_REF_TYPE,
+  REACT_FRAGMENT_TYPE,
+  REACT_PORTAL_TYPE,
+  REACT_MEMO_TYPE,
+  REACT_PROFILER_TYPE,
+  REACT_PROVIDER_TYPE,
+  REACT_STRICT_MODE_TYPE,
+  REACT_SUSPENSE_TYPE,
+  REACT_SUSPENSE_LIST_TYPE,
+  REACT_LAZY_TYPE,
+  REACT_CACHE_TYPE,
+} from './ReactSymbols';
+
+// Keep in sync with react-reconciler/getComponentNameFromFiber
+function getWrappedName(
+  outerType: mixed,
+  innerType: any,
+  wrapperName: string
+): string {
+  const displayName = (outerType: any).displayName;
+  if (displayName) {
+    return displayName;
+  }
+  const functionName = innerType.displayName || innerType.name || '';
+  return functionName !== '' ? `${wrapperName}(${functionName})` : wrapperName;
+}
+
+// Keep in sync with react-reconciler/getComponentNameFromFiber
+function getContextName(type: ReactContext<any>) {
+  return type.displayName || 'Context';
+}
+
+// Note that the reconciler package should generally prefer to use getComponentNameFromFiber() instead.
+// eslint-disable-next-line complexity
+function getComponentNameFromType(type: mixed): string | null {
+  if (type === null || type === undefined) {
+    // Host root, text node or just invalid type.
+    return null;
+  }
+  if (typeof type === 'function') {
+    return (type: any).displayName || type.name || null;
+  }
+  if (typeof type === 'string') {
+    return type;
+  }
+  // eslint-disable-next-line default-case
+  switch (type) {
+    case REACT_FRAGMENT_TYPE:
+      return 'Fragment';
+    case REACT_PORTAL_TYPE:
+      return 'Portal';
+    case REACT_PROFILER_TYPE:
+      return 'Profiler';
+    case REACT_STRICT_MODE_TYPE:
+      return 'StrictMode';
+    case REACT_SUSPENSE_TYPE:
+      return 'Suspense';
+    case REACT_SUSPENSE_LIST_TYPE:
+      return 'SuspenseList';
+    case REACT_CACHE_TYPE:
+      return 'Cache';
+  }
+  if (typeof type === 'object') {
+    // eslint-disable-next-line default-case
+    switch (type.$$typeof) {
+      case REACT_CONTEXT_TYPE:
+        // eslint-disable-next-line no-case-declarations
+        const context: ReactContext<any> = (type: any);
+        /**
+         * in DEV, should get context from `_context`.
+         * https://github.com/facebook/react/blob/e16d61c3000e2de6217d06b9afad162e883f73c4/packages/react/src/ReactContext.js#L44-L125
+         */
+        return `${getContextName(context._context ?? context)}.Consumer`;
+      case REACT_PROVIDER_TYPE:
+        // eslint-disable-next-line no-case-declarations
+        const provider: ReactProviderType<any> = (type: any);
+        return `${getContextName(provider._context)}.Provider`;
+      case REACT_FORWARD_REF_TYPE:
+        // eslint-disable-next-line no-case-declarations
+        return getWrappedName(type, type.render, 'ForwardRef');
+      case REACT_MEMO_TYPE:
+        // eslint-disable-next-line no-case-declarations
+        const outerName = (type: any).displayName || null;
+        if (outerName !== null) {
+          return outerName;
+        }
+        return getComponentNameFromType(type.type) || 'Memo';
+      case REACT_LAZY_TYPE: {
+        const lazyComponent: LazyComponent<any, any> = (type: any);
+        const payload = lazyComponent._payload;
+        const init = lazyComponent._init;
+        try {
+          return getComponentNameFromType(init(payload));
+        } catch (x) {
+          return null;
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export default getComponentNameFromType;
diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
@@ -9,15 +9,22 @@ import {
   createReactFragmentTreeNode,
 } from './../tree';
 import type { TreeNode } from './../tree';
+import getComponentNameFromType from '../libs/getComponentNameFromType';
 
 const supportFragment = Boolean(Fragment);
 
-const getReactElementDisplayName = (element: ReactElement<*>): string =>
-  element.type.displayName ||
-  (element.type.name !== '_default' ? element.type.name : null) || // function name
-  (typeof element.type === 'function' // function without a name, you should provide one
-    ? 'No Display Name'
-    : element.type);
+const getReactElementDisplayName = (element: ReactElement<*>): string => {
+  const displayName = getComponentNameFromType(element.type);
+  if (
+    displayName === '_default' ||
+    displayName === null ||
+    displayName === undefined
+  ) {
+    return 'No Display Name';
+  }
+
+  return displayName;
+};
 
 const noChildren = (propsValue, propName) => propName !== 'children';
 
