From d642956bf122f9ea93e160ea7dded0049405308f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 26 Sep 2021 14:34:11 +0200
Subject: [PATCH 1/6] Add a failing test for printing `forwardRef` element

---
 src/index.spec.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/index.spec.js b/src/index.spec.js
index c2b4c288c..4fd619597 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -1160,4 +1160,13 @@ describe('reactElementToJSXString(ReactElement)', () => {
     }
     mount(<App />);
   });
+
+  it('should use inferred function name as display name for `forwardRef` element', () => {
+    const Tag = React.forwardRef(function Tag({ text }, ref) {
+      return <span ref={ref}>{text}</span>;
+    });
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<Tag text="some label" />`
+    );
+  });
 });

From 6053e34970dff68c33d134518cef814168379689 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 26 Sep 2021 14:36:08 +0200
Subject: [PATCH 2/6] Unwind `getReactElementDisplayName` to a cascade of if
 statements

---
 src/parser/parseReactElement.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index 773b1a98d..e3388b73b 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -12,12 +12,18 @@ import type { TreeNode } from './../tree';
 
 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 = ({ type }: ReactElement<*>): string => {
+  if (type.displayName) {
+    return type.displayName;
+  }
+  if (type.name && type.name !== '_default') {
+    return type.name;
+  }
+  if (typeof type === 'function') {
+    return 'No Display Name';
+  }
+  return type;
+};
 
 const noChildren = (propsValue, propName) => propName !== 'children';
 

From 3d098716cd906617bc1f66e71a5dfcdc2bad53b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Sun, 26 Sep 2021 15:16:34 +0200
Subject: [PATCH 3/6] Refactor `getReactElementDisplayName` to switch statement

---
 src/parser/parseReactElement.js | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index e3388b73b..d98b58b45 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -13,16 +13,17 @@ import type { TreeNode } from './../tree';
 const supportFragment = Boolean(Fragment);
 
 const getReactElementDisplayName = ({ type }: ReactElement<*>): string => {
-  if (type.displayName) {
-    return type.displayName;
+  switch (true) {
+    case Boolean(type.displayName):
+      return type.displayName;
+    case typeof type === 'function':
+      if (!type.name || type.name === '_default') {
+        return 'No Display Name';
+      }
+      return type.name;
+    default:
+      return type;
   }
-  if (type.name && type.name !== '_default') {
-    return type.name;
-  }
-  if (typeof type === 'function') {
-    return 'No Display Name';
-  }
-  return type;
 };
 
 const noChildren = (propsValue, propName) => propName !== 'children';

From 507e2486e0f839ab271bdbb1f827e5693d3bd2cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Mon, 27 Sep 2021 09:32:46 +0200
Subject: [PATCH 4/6] Support stringifying more element types

---
 package.json                    |  13 +--
 rollup.config.js                |  15 +--
 src/index.spec.js               | 161 ++++++++++++++++++++++++++++++++
 src/parser/parseReactElement.js |  65 +++++++++++--
 yarn.lock                       |  39 +-------
 5 files changed, 232 insertions(+), 61 deletions(-)

diff --git a/package.json b/package.json
index 7811865fb..3dd3550f1 100644
--- a/package.json
+++ b/package.json
@@ -24,10 +24,7 @@
     "smoke": "node tests/smoke/run"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write \"**/*.{js,json}\"",
-      "git add"
-    ]
+    "*.js": ["prettier --write \"**/*.{js,json}\"", "git add"]
   },
   "author": {
     "name": "Algolia, Inc.",
@@ -72,7 +69,6 @@
     "react-test-renderer": "16.14.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-commonjs": "10.1.0",
     "rollup-plugin-node-builtins": "2.1.2",
     "rollup-plugin-node-globals": "1.4.0",
     "rollup-plugin-node-resolve": "5.2.0",
@@ -84,11 +80,10 @@
   },
   "dependencies": {
     "@base2/pretty-print-object": "1.0.0",
-    "is-plain-object": "3.0.1"
+    "is-plain-object": "3.0.1",
+    "react-is": "^17.0.2"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.js"]
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index d582d022c..aa07cb4a6 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,12 +1,13 @@
 import babel from 'rollup-plugin-babel';
-import commonjs from 'rollup-plugin-commonjs';
 import resolve from 'rollup-plugin-node-resolve';
 import builtins from 'rollup-plugin-node-builtins';
 import globals from 'rollup-plugin-node-globals';
 import pkg from './package.json';
 
-const extractPackagePeerDependencies = () =>
-  Object.keys(pkg.peerDependencies) || [];
+const extractExternals = () => [
+  ...Object.keys(pkg.dependencies || {}),
+  ...Object.keys(pkg.peerDependencies || {}),
+];
 
 export default {
   input: 'src/index.js',
@@ -22,7 +23,7 @@ export default {
       sourcemap: true,
     },
   ],
-  external: extractPackagePeerDependencies(),
+  external: extractExternals(),
   plugins: [
     babel({
       babelrc: false,
@@ -36,12 +37,6 @@ export default {
     resolve({
       mainFields: ['module', 'main', 'jsnext', 'browser'],
     }),
-    commonjs({
-      sourceMap: true,
-      namedExports: {
-        react: ['isValidElement'],
-      },
-    }),
     globals(),
     builtins(),
   ],
diff --git a/src/index.spec.js b/src/index.spec.js
index 4fd619597..790d3177d 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -1169,4 +1169,165 @@ describe('reactElementToJSXString(ReactElement)', () => {
       `<Tag text="some label" />`
     );
   });
+
+  it('should use `displayName` instead of inferred function name as display name for `forwardRef` element', () => {
+    const Tag = React.forwardRef(function Tag({ text }, ref) {
+      return <span ref={ref}>{text}</span>;
+    });
+    Tag.displayName = 'MyTag';
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<MyTag text="some label" />`
+    );
+  });
+
+  it('should use inferred function name as display name for `memo` element', () => {
+    const Tag = React.memo(function Tag({ text }) {
+      return <span>{text}</span>;
+    });
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<Tag text="some label" />`
+    );
+  });
+
+  it('should use `displayName` instead of inferred function name as display name for `memo` element', () => {
+    const Tag = React.memo(function Tag({ text }) {
+      return <span>{text}</span>;
+    });
+    Tag.displayName = 'MyTag';
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<MyTag text="some label" />`
+    );
+  });
+
+  it('should use inferred function name as display name for a `forwardRef` wrapped in `memo`', () => {
+    const Tag = React.memo(
+      React.forwardRef(function Tag({ text }, ref) {
+        return <span ref={ref}>{text}</span>;
+      })
+    );
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<Tag text="some label" />`
+    );
+  });
+
+  it('should use inferred function name as display name for a component wrapped in `memo` multiple times', () => {
+    const Tag = React.memo(
+      React.memo(
+        React.memo(function Tag({ text }) {
+          return <span>{text}</span>;
+        })
+      )
+    );
+    expect(reactElementToJSXString(<Tag text="some label" />)).toEqual(
+      `<Tag text="some label" />`
+    );
+  });
+
+  it('should stringify `StrictMode` correctly', () => {
+    const App = () => null;
+
+    expect(
+      reactElementToJSXString(
+        <React.StrictMode>
+          <App />
+        </React.StrictMode>
+      )
+    ).toEqual(`<StrictMode>
+  <App />
+</StrictMode>`);
+  });
+
+  it('should stringify `Suspense` correctly', () => {
+    const Spinner = () => null;
+    const ProfilePage = () => null;
+
+    expect(
+      reactElementToJSXString(
+        <React.Suspense fallback={<Spinner />}>
+          <ProfilePage />
+        </React.Suspense>
+      )
+    ).toEqual(`<Suspense fallback={<Spinner />}>
+  <ProfilePage />
+</Suspense>`);
+  });
+
+  it('should stringify `Profiler` correctly', () => {
+    const Navigation = () => null;
+
+    expect(
+      reactElementToJSXString(
+        <React.Profiler id="Navigation" onRender={() => {}}>
+          <Navigation />
+        </React.Profiler>
+      )
+    ).toEqual(`<Profiler
+  id="Navigation"
+  onRender={function noRefCheck() {}}
+>
+  <Navigation />
+</Profiler>`);
+  });
+
+  it('should stringify `Contex.Provider` correctly', () => {
+    const Ctx = React.createContext();
+    const App = () => {};
+
+    expect(
+      reactElementToJSXString(
+        <Ctx.Provider value={null}>
+          <App />
+        </Ctx.Provider>
+      )
+    ).toEqual(`<Context.Provider value={null}>
+  <App />
+</Context.Provider>`);
+  });
+
+  it('should stringify `Contex.Provider` with `displayName` correctly', () => {
+    const Ctx = React.createContext();
+    Ctx.displayName = 'MyCtx';
+
+    const App = () => {};
+
+    expect(
+      reactElementToJSXString(
+        <Ctx.Provider value={null}>
+          <App />
+        </Ctx.Provider>
+      )
+    ).toEqual(`<MyCtx.Provider value={null}>
+  <App />
+</MyCtx.Provider>`);
+  });
+
+  it('should stringify `Contex.Consumer` correctly', () => {
+    const Ctx = React.createContext();
+    const Button = () => null;
+
+    expect(
+      reactElementToJSXString(
+        <Ctx.Consumer>{theme => <Button theme={theme} />}</Ctx.Consumer>
+      )
+    ).toEqual(`<Context.Consumer />`);
+  });
+
+  it('should stringify `Contex.Consumer` with `displayName` correctly', () => {
+    const Ctx = React.createContext();
+    Ctx.displayName = 'MyCtx';
+
+    const Button = () => null;
+
+    expect(
+      reactElementToJSXString(
+        <Ctx.Consumer>{theme => <Button theme={theme} />}</Ctx.Consumer>
+      )
+    ).toEqual(`<MyCtx.Consumer />`);
+  });
+
+  it('should stringify `lazy` component correctly', () => {
+    const Lazy = React.lazy(() => Promise.resolve(() => {}));
+
+    expect(reactElementToJSXString(<Lazy />)).toEqual(`<Lazy />`);
+  });
 });
diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index d98b58b45..273e3be95 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -1,6 +1,18 @@
 /* @flow */
 
 import React, { type Element as ReactElement, Fragment } from 'react';
+import {
+  ForwardRef,
+  isContextConsumer,
+  isContextProvider,
+  isForwardRef,
+  isLazy,
+  isMemo,
+  isProfiler,
+  isStrictMode,
+  isSuspense,
+  Memo,
+} from 'react-is';
 import type { Options } from './../options';
 import {
   createStringTreeNode,
@@ -12,17 +24,54 @@ import type { TreeNode } from './../tree';
 
 const supportFragment = Boolean(Fragment);
 
-const getReactElementDisplayName = ({ type }: ReactElement<*>): string => {
+const getFunctionTypeName = (functionType): string => {
+  if (!functionType.name || functionType.name === '_default') {
+    return 'No Display Name';
+  }
+  return functionType.name;
+};
+
+const getWrappedComponentDisplayName = (Component: *): string => {
+  switch (true) {
+    case Boolean(Component.displayName):
+      return Component.displayName;
+    case Component.$$typeof === Memo:
+      return getWrappedComponentDisplayName(Component.type);
+    case Component.$$typeof === ForwardRef:
+      return getWrappedComponentDisplayName(Component.render);
+    default:
+      return getFunctionTypeName(Component);
+  }
+};
+
+// heavily inspired by:
+// https://github.com/facebook/react/blob/3746eaf985dd92f8aa5f5658941d07b6b855e9d9/packages/react-devtools-shared/src/backend/renderer.js#L399-L496
+const getReactElementDisplayName = (element: ReactElement<*>): string => {
   switch (true) {
-    case Boolean(type.displayName):
-      return type.displayName;
-    case typeof type === 'function':
-      if (!type.name || type.name === '_default') {
-        return 'No Display Name';
+    case typeof element.type === 'string':
+      return element.type;
+    case typeof element.type === 'function':
+      if (element.type.displayName) {
+        return element.type.displayName;
       }
-      return type.name;
+      return getFunctionTypeName(element.type);
+    case isForwardRef(element):
+    case isMemo(element):
+      return getWrappedComponentDisplayName(element.type);
+    case isContextConsumer(element):
+      return `${element.type._context.displayName || 'Context'}.Consumer`;
+    case isContextProvider(element):
+      return `${element.type._context.displayName || 'Context'}.Provider`;
+    case isLazy(element):
+      return 'Lazy';
+    case isProfiler(element):
+      return 'Profiler';
+    case isStrictMode(element):
+      return 'StrictMode';
+    case isSuspense(element):
+      return 'Suspense';
     default:
-      return type;
+      return element;
   }
 };
 
diff --git a/yarn.lock b/yarn.lock
index e46174b99..2a1060dfd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5605,13 +5605,6 @@ is-redirect@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
 
-is-reference@^1.1.2:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-reference/-/is-reference-1.1.3.tgz#e99059204b66fdbe09305cfca715a29caa5c8a51"
-  integrity sha512-W1iHHv/oyBb2pPxkBxtaewxa1BC58Pn5J0hogyCdefwUIvb6R+TGbAcIa4qPNYLqLhb3EnOgUf2MQkkF76BcKw==
-  dependencies:
-    "@types/estree" "0.0.39"
-
 is-regex@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.4.tgz#5517489b547091b0930e095654ced25ee97e9491"
@@ -6683,12 +6676,6 @@ magic-string@^0.22.5:
   dependencies:
     vlq "^0.2.2"
 
-magic-string@^0.25.2:
-  version "0.25.2"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.2.tgz#139c3a729515ec55e96e69e82a11fe890a293ad9"
-  dependencies:
-    sourcemap-codec "^1.4.4"
-
 make-dir@^1.0.0, make-dir@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -8020,6 +8007,11 @@ react-is@^16.8.6:
   version "16.8.6"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
 
+react-is@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
 react-test-renderer@16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.14.0.tgz#e98360087348e260c56d4fe2315e970480c228ae"
@@ -8527,12 +8519,6 @@ resolve@^1.10.0, resolve@^1.3.2:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@^1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.11.0.tgz#4014870ba296176b86343d50b60f3b50609ce232"
-  dependencies:
-    path-parse "^1.0.6"
-
 resolve@^1.11.1, resolve@^1.12.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.0.tgz#3fc644a35c84a48554609ff26ec52b66fa577df6"
@@ -8586,17 +8572,6 @@ rollup-plugin-babel@4.4.0:
     "@babel/helper-module-imports" "^7.0.0"
     rollup-pluginutils "^2.8.1"
 
-rollup-plugin-commonjs@10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-10.1.0.tgz#417af3b54503878e084d127adf4d1caf8beb86fb"
-  integrity sha512-jlXbjZSQg8EIeAAvepNwhJj++qJWNJw1Cl0YnOqKtP5Djx+fFGkp3WRh+W0ASCaFG5w1jhmzDxgu3SJuVxPF4Q==
-  dependencies:
-    estree-walker "^0.6.1"
-    is-reference "^1.1.2"
-    magic-string "^0.25.2"
-    resolve "^1.11.0"
-    rollup-pluginutils "^2.8.1"
-
 rollup-plugin-node-builtins@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/rollup-plugin-node-builtins/-/rollup-plugin-node-builtins-2.1.2.tgz#24a1fed4a43257b6b64371d8abc6ce1ab14597e9"
@@ -9002,10 +8977,6 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-sourcemap-codec@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz#c63ea927c029dd6bd9a2b7fa03b3fec02ad56e9f"
-
 spdx-correct@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40"

From 665200735f1abd51fa4fe624390bb7070ded332d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 28 Sep 2021 10:28:09 +0200
Subject: [PATCH 5/6] fix: flow types

---
 src/parser/parseReactElement.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index 273e3be95..8b042cdfb 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -71,7 +71,9 @@ const getReactElementDisplayName = (element: ReactElement<*>): string => {
     case isSuspense(element):
       return 'Suspense';
     default:
-      return element;
+      // this is "unknown" case and will most likely result in `[object Object]`
+      // it's fine though as we can't display anything meaningful anyway here
+      return String(element);
   }
 };
 

From 7bb97dab12cea1153c57eb6d210834d7c90b83c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= <mateuszburzynski@gmail.com>
Date: Tue, 28 Sep 2021 12:04:46 +0200
Subject: [PATCH 6/6] chore: adjust fallback case in the
 `getReactElementDisplayName`

---
 src/parser/parseReactElement.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/parser/parseReactElement.js b/src/parser/parseReactElement.js
index 8b042cdfb..589a59169 100644
--- a/src/parser/parseReactElement.js
+++ b/src/parser/parseReactElement.js
@@ -71,9 +71,7 @@ const getReactElementDisplayName = (element: ReactElement<*>): string => {
     case isSuspense(element):
       return 'Suspense';
     default:
-      // this is "unknown" case and will most likely result in `[object Object]`
-      // it's fine though as we can't display anything meaningful anyway here
-      return String(element);
+      return 'UnknownElementType';
   }
 };