react-element-to-jsx-string - npm Package Compare versions

Comparing version 14.3.2 to 14.3.3

CHANGELOG.md

@@ -0,1 +1,17 @@
+## [14.3.3](https://github.com/algolia/react-element-to-jsx-string/compare/v14.3.2...v14.3.3) (2021-10-19)
+
+
+### Bug Fixes
+
+* **deps:** pin dependency react-is to 17.0.2 ([a62c5fd](https://github.com/algolia/react-element-to-jsx-string/commit/a62c5fdaa33d4e891631ba48661f8466c96d809d))
+* fixed crashing on circular React elements ([#619](https://github.com/algolia/react-element-to-jsx-string/issues/619)) ([ea73118](https://github.com/algolia/react-element-to-jsx-string/commit/ea73118d80e668510d7de1ec23215248ef72b0a1))
+* handle invalid Date objects ([#605](https://github.com/algolia/react-element-to-jsx-string/issues/605)) ([#606](https://github.com/algolia/react-element-to-jsx-string/issues/606)) ([dbbd9e5](https://github.com/algolia/react-element-to-jsx-string/commit/dbbd9e5e0bb1e766910809da77e5a6126897202a))
+
+
+### Features
+
+* support more element types ([#617](https://github.com/algolia/react-element-to-jsx-string/issues/617)) ([bf7f4cf](https://github.com/algolia/react-element-to-jsx-string/commit/bf7f4cf8d31494997b9d5f36f238286d67cd6ae1))
+
+
+
 ## [14.3.2](https://github.com/algolia/react-element-to-jsx-string/compare/v14.3.1...v14.3.2) (2020-10-28)
@@ -2,0 +18,0 @@

dist/cjs/index.js

@@ -5,7 +5,30 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
+var isPlainObject = require('is-plain-object');
 var React = require('react');
-var React__default = _interopDefault(React);
+var prettyPrintObject = require('@base2/pretty-print-object');
+var reactIs = require('react-is');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 var spacer = (function (times, tabStop) {
@@ -44,3 +67,3 @@ if (times === 0) {
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -69,222 +92,2 @@
 
-/*!
- * isobject <https://github.com/jonschlinkert/isobject>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-function isObject(val) {
-  return val != null && typeof val === 'object' && Array.isArray(val) === false;
-}
-
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-function isObjectObject(o) {
-  return isObject(o) === true
-    && Object.prototype.toString.call(o) === '[object Object]';
-}
-
-function isPlainObject(o) {
-  var ctor,prot;
-
-  if (isObjectObject(o) === false) return false;
-
-  // If has modified constructor
-  ctor = o.constructor;
-  if (typeof ctor !== 'function') return false;
-
-  // If has modified prototype
-  prot = ctor.prototype;
-  if (isObjectObject(prot) === false) return false;
-
-  // If constructor does not have an Object-specific method
-  if (prot.hasOwnProperty('isPrototypeOf') === false) {
-    return false;
-  }
-
-  // Most likely a plain Object
-  return true;
-}
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var dist = createCommonjsModule(function (module, exports) {
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArrays = (commonjsGlobal && commonjsGlobal.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var seen = [];
-/**
- * Check if a value is an object or a function. Keep in mind that array, function, regexp, etc, are objects in JavaScript.
- *
- * @param value the value to check
- * @return true if the value is an object or a function
- */
-function isObj(value) {
-    var type = typeof value;
-    return value !== null && (type === 'object' || type === 'function');
-}
-/**
- * Check if a value is a regular expression.
- *
- * @param value the value to check
- * @return true if the value is a regular expression
- */
-function isRegexp(value) {
-    return Object.prototype.toString.call(value) === '[object RegExp]';
-}
-/**
- * Get an array of all of the enumerable symbols for an object.
- *
- * @param object the object to get the enumerable symbols for
- */
-function getOwnEnumPropSymbols(object) {
-    return Object.getOwnPropertySymbols(object).filter(function (keySymbol) { return Object.prototype.propertyIsEnumerable.call(object, keySymbol); });
-}
-/**
- * pretty print an object
- *
- * @param input the object to pretty print
- * @param options the formatting options, transforms, and filters
- * @param pad the padding string
- */
-function prettyPrint(input, options, pad) {
-    if (pad === void 0) { pad = ''; }
-    // sensible option defaults
-    var defaultOptions = {
-        indent: '\t',
-        singleQuotes: true
-    };
-    var combinedOptions = __assign(__assign({}, defaultOptions), options);
-    var tokens;
-    if (combinedOptions.inlineCharacterLimit === undefined) {
-        tokens = {
-            newLine: '\n',
-            newLineOrSpace: '\n',
-            pad: pad,
-            indent: pad + combinedOptions.indent
-        };
-    }
-    else {
-        tokens = {
-            newLine: '@@__PRETTY_PRINT_NEW_LINE__@@',
-            newLineOrSpace: '@@__PRETTY_PRINT_NEW_LINE_OR_SPACE__@@',
-            pad: '@@__PRETTY_PRINT_PAD__@@',
-            indent: '@@__PRETTY_PRINT_INDENT__@@'
-        };
-    }
-    var expandWhiteSpace = function (string) {
-        if (combinedOptions.inlineCharacterLimit === undefined) {
-            return string;
-        }
-        var oneLined = string
-            .replace(new RegExp(tokens.newLine, 'g'), '')
-            .replace(new RegExp(tokens.newLineOrSpace, 'g'), ' ')
-            .replace(new RegExp(tokens.pad + '|' + tokens.indent, 'g'), '');
-        if (oneLined.length <= combinedOptions.inlineCharacterLimit) {
-            return oneLined;
-        }
-        return string
-            .replace(new RegExp(tokens.newLine + '|' + tokens.newLineOrSpace, 'g'), '\n')
-            .replace(new RegExp(tokens.pad, 'g'), pad)
-            .replace(new RegExp(tokens.indent, 'g'), pad + combinedOptions.indent);
-    };
-    if (seen.indexOf(input) !== -1) {
-        return '"[Circular]"';
-    }
-    if (input === null ||
-        input === undefined ||
-        typeof input === 'number' ||
-        typeof input === 'boolean' ||
-        typeof input === 'function' ||
-        typeof input === 'symbol' ||
-        isRegexp(input)) {
-        return String(input);
-    }
-    if (input instanceof Date) {
-        return "new Date('" + input.toISOString() + "')";
-    }
-    if (Array.isArray(input)) {
-        if (input.length === 0) {
-            return '[]';
-        }
-        seen.push(input);
-        var ret = '[' + tokens.newLine + input.map(function (el, i) {
-            var eol = input.length - 1 === i ? tokens.newLine : ',' + tokens.newLineOrSpace;
-            var value = prettyPrint(el, combinedOptions, pad + combinedOptions.indent);
-            if (combinedOptions.transform) {
-                value = combinedOptions.transform(input, i, value);
-            }
-            return tokens.indent + value + eol;
-        }).join('') + tokens.pad + ']';
-        seen.pop();
-        return expandWhiteSpace(ret);
-    }
-    if (isObj(input)) {
-        var objKeys_1 = __spreadArrays(Object.keys(input), (getOwnEnumPropSymbols(input)));
-        if (combinedOptions.filter) {
-            objKeys_1 = objKeys_1.filter(function (el) { return combinedOptions.filter && combinedOptions.filter(input, el); });
-        }
-        if (objKeys_1.length === 0) {
-            return '{}';
-        }
-        seen.push(input);
-        var ret = '{' + tokens.newLine + objKeys_1.map(function (el, i) {
-            var eol = objKeys_1.length - 1 === i ? tokens.newLine : ',' + tokens.newLineOrSpace;
-            var isSymbol = typeof el === 'symbol';
-            var isClassic = !isSymbol && /^[a-z$_][a-z$_0-9]*$/i.test(el.toString());
-            var key = isSymbol || isClassic ? el : prettyPrint(el, combinedOptions);
-            var value = prettyPrint(input[el], combinedOptions, pad + combinedOptions.indent);
-            if (combinedOptions.transform) {
-                value = combinedOptions.transform(input, el, value);
-            }
-            return tokens.indent + String(key) + ': ' + value + eol;
-        }).join('') + tokens.pad + '}';
-        seen.pop();
-        return expandWhiteSpace(ret);
-    }
-    input = String(input).replace(/[\r\n]/g, function (x) { return x === '\n' ? '\\n' : '\\r'; });
-    if (!combinedOptions.singleQuotes) {
-        input = input.replace(/"/g, '\\"');
-        return "\"" + input + "\"";
-    }
-    input = input.replace(/\\?'/g, '\\\'');
-    return "'" + input + "'";
-}
-exports.prettyPrint = prettyPrint;
-
-});
-
-unwrapExports(dist);
-var dist_1 = dist.prettyPrint;
-
 function sortObject(value) {
@@ -294,6 +97,6 @@ // return non-object value as is
     return value;
-  } // return date and regexp values as is
+  } // return date, regexp and react element values as is
 
 
-  if (value instanceof Date || value instanceof RegExp) {
+  if (value instanceof Date || value instanceof RegExp || /*#__PURE__*/React__namespace.isValidElement(value)) {
     return value;
@@ -357,6 +160,65 @@ } // make a copy of array with each item passed through sortObject()
 
+var getFunctionTypeName = function getFunctionTypeName(functionType) {
+  if (!functionType.name || functionType.name === '_default') {
+    return 'No Display Name';
+  }
+
+  return functionType.name;
+};
+
+var getWrappedComponentDisplayName = function getWrappedComponentDisplayName(Component) {
+  switch (true) {
+    case Boolean(Component.displayName):
+      return Component.displayName;
+
+    case Component.$$typeof === reactIs.Memo:
+      return getWrappedComponentDisplayName(Component.type);
+
+    case Component.$$typeof === reactIs.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
+
+
 var getReactElementDisplayName = function getReactElementDisplayName(element) {
-  return 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);
+  switch (true) {
+    case typeof element.type === 'string':
+      return element.type;
+
+    case typeof element.type === 'function':
+      if (element.type.displayName) {
+        return element.type.displayName;
+      }
+
+      return getFunctionTypeName(element.type);
+
+    case reactIs.isForwardRef(element):
+    case reactIs.isMemo(element):
+      return getWrappedComponentDisplayName(element.type);
+
+    case reactIs.isContextConsumer(element):
+      return "".concat(element.type._context.displayName || 'Context', ".Consumer");
+
+    case reactIs.isContextProvider(element):
+      return "".concat(element.type._context.displayName || 'Context', ".Provider");
+
+    case reactIs.isLazy(element):
+      return 'Lazy';
+
+    case reactIs.isProfiler(element):
+      return 'Profiler';
+
+    case reactIs.isStrictMode(element):
+      return 'StrictMode';
+
+    case reactIs.isSuspense(element):
+      return 'Suspense';
+
+    default:
+      return 'UnknownElementType';
+  }
 };
@@ -390,3 +252,3 @@
     return createNumberTreeNode(element);
-  } else if (! /*#__PURE__*/React__default.isValidElement(element)) {
+  } else if (! /*#__PURE__*/React__default["default"].isValidElement(element)) {
     throw new Error("react-element-to-jsx-string: Expected a React.Element, got `".concat(_typeof(element), "`"));
@@ -410,3 +272,3 @@ }
   var defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
-  var childrens = React__default.Children.toArray(element.props.children).filter(onlyMeaningfulChildren).map(function (child) {
+  var childrens = React__default["default"].Children.toArray(element.props.children).filter(onlyMeaningfulChildren).map(function (child) {
     return parseReactElement(child, options);
@@ -447,3 +309,3 @@ });
   var normalizedValue = sortObject(value);
-  var stringifiedValue = dist_1(normalizedValue, {
+  var stringifiedValue = prettyPrintObject.prettyPrint(normalizedValue, {
     transform: function transform(currentObj, prop, originalResult) {
@@ -472,3 +334,3 @@ var currentValue = currentObj[prop];
 
-var escape = function escape(s) {
+var escape$1 = function escape(s) {
   return s.replace(/"/g, '&quot;');
@@ -483,3 +345,3 @@ };
   if (typeof propValue === 'string') {
-    return "\"".concat(escape(propValue), "\"");
+    return "\"".concat(escape$1(propValue), "\"");
   } // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
@@ -509,6 +371,10 @@ // @see: https://flow.org/en/docs/types/primitives/
   if (propValue instanceof Date) {
+    if (isNaN(propValue.valueOf())) {
+      return "{new Date(NaN)}";
+    }
+
     return "{new Date(\"".concat(propValue.toISOString(), "\")}");
   }
 
-  if (isPlainObject(propValue) || Array.isArray(propValue)) {
+  if (isPlainObject.isPlainObject(propValue) || Array.isArray(propValue)) {
     return "{".concat(formatComplexDataStructure(propValue, inline, lvl, options), "}");
@@ -797,3 +663,3 @@ }
 
-var escape$1 = function escape(s) {
+var escape = function escape(s) {
   if (!shouldBeEscaped(s)) {
@@ -826,3 +692,3 @@ return s;
   if (node.type === 'string') {
-    return node.value ? "".concat(preserveTrailingSpace(escape$1(String(node.value)))) : '';
+    return node.value ? "".concat(preserveTrailingSpace(escape(String(node.value)))) : '';
   }
@@ -884,5 +750,5 @@
 
-exports.default = reactElementToJsxString;
+exports["default"] = reactElementToJsxString;
 exports.inlineFunction = inlineFunction;
 exports.preserveFunctionLineBreak = preserveFunctionLineBreak;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,2 +0,6 @@
-import React, { Fragment, isValidElement } from 'react';
+import { isPlainObject } from 'is-plain-object';
+import * as React from 'react';
+import React__default, { Fragment, isValidElement } from 'react';
+import { prettyPrint } from '@base2/pretty-print-object';
+import { isSuspense, isStrictMode, isProfiler, isLazy, isContextProvider, isContextConsumer, isMemo, isForwardRef, ForwardRef, Memo } from 'react-is';
 
@@ -36,3 +40,3 @@ var spacer = (function (times, tabStop) {
 function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -61,222 +65,2 @@
 
-/*!
- * isobject <https://github.com/jonschlinkert/isobject>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-function isObject(val) {
-  return val != null && typeof val === 'object' && Array.isArray(val) === false;
-}
-
-/*!
- * is-plain-object <https://github.com/jonschlinkert/is-plain-object>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-function isObjectObject(o) {
-  return isObject(o) === true
-    && Object.prototype.toString.call(o) === '[object Object]';
-}
-
-function isPlainObject(o) {
-  var ctor,prot;
-
-  if (isObjectObject(o) === false) return false;
-
-  // If has modified constructor
-  ctor = o.constructor;
-  if (typeof ctor !== 'function') return false;
-
-  // If has modified prototype
-  prot = ctor.prototype;
-  if (isObjectObject(prot) === false) return false;
-
-  // If constructor does not have an Object-specific method
-  if (prot.hasOwnProperty('isPrototypeOf') === false) {
-    return false;
-  }
-
-  // Most likely a plain Object
-  return true;
-}
-
-var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
-
-function unwrapExports (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
-
-var dist = createCommonjsModule(function (module, exports) {
-var __assign = (commonjsGlobal && commonjsGlobal.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArrays = (commonjsGlobal && commonjsGlobal.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var seen = [];
-/**
- * Check if a value is an object or a function. Keep in mind that array, function, regexp, etc, are objects in JavaScript.
- *
- * @param value the value to check
- * @return true if the value is an object or a function
- */
-function isObj(value) {
-    var type = typeof value;
-    return value !== null && (type === 'object' || type === 'function');
-}
-/**
- * Check if a value is a regular expression.
- *
- * @param value the value to check
- * @return true if the value is a regular expression
- */
-function isRegexp(value) {
-    return Object.prototype.toString.call(value) === '[object RegExp]';
-}
-/**
- * Get an array of all of the enumerable symbols for an object.
- *
- * @param object the object to get the enumerable symbols for
- */
-function getOwnEnumPropSymbols(object) {
-    return Object.getOwnPropertySymbols(object).filter(function (keySymbol) { return Object.prototype.propertyIsEnumerable.call(object, keySymbol); });
-}
-/**
- * pretty print an object
- *
- * @param input the object to pretty print
- * @param options the formatting options, transforms, and filters
- * @param pad the padding string
- */
-function prettyPrint(input, options, pad) {
-    if (pad === void 0) { pad = ''; }
-    // sensible option defaults
-    var defaultOptions = {
-        indent: '\t',
-        singleQuotes: true
-    };
-    var combinedOptions = __assign(__assign({}, defaultOptions), options);
-    var tokens;
-    if (combinedOptions.inlineCharacterLimit === undefined) {
-        tokens = {
-            newLine: '\n',
-            newLineOrSpace: '\n',
-            pad: pad,
-            indent: pad + combinedOptions.indent
-        };
-    }
-    else {
-        tokens = {
-            newLine: '@@__PRETTY_PRINT_NEW_LINE__@@',
-            newLineOrSpace: '@@__PRETTY_PRINT_NEW_LINE_OR_SPACE__@@',
-            pad: '@@__PRETTY_PRINT_PAD__@@',
-            indent: '@@__PRETTY_PRINT_INDENT__@@'
-        };
-    }
-    var expandWhiteSpace = function (string) {
-        if (combinedOptions.inlineCharacterLimit === undefined) {
-            return string;
-        }
-        var oneLined = string
-            .replace(new RegExp(tokens.newLine, 'g'), '')
-            .replace(new RegExp(tokens.newLineOrSpace, 'g'), ' ')
-            .replace(new RegExp(tokens.pad + '|' + tokens.indent, 'g'), '');
-        if (oneLined.length <= combinedOptions.inlineCharacterLimit) {
-            return oneLined;
-        }
-        return string
-            .replace(new RegExp(tokens.newLine + '|' + tokens.newLineOrSpace, 'g'), '\n')
-            .replace(new RegExp(tokens.pad, 'g'), pad)
-            .replace(new RegExp(tokens.indent, 'g'), pad + combinedOptions.indent);
-    };
-    if (seen.indexOf(input) !== -1) {
-        return '"[Circular]"';
-    }
-    if (input === null ||
-        input === undefined ||
-        typeof input === 'number' ||
-        typeof input === 'boolean' ||
-        typeof input === 'function' ||
-        typeof input === 'symbol' ||
-        isRegexp(input)) {
-        return String(input);
-    }
-    if (input instanceof Date) {
-        return "new Date('" + input.toISOString() + "')";
-    }
-    if (Array.isArray(input)) {
-        if (input.length === 0) {
-            return '[]';
-        }
-        seen.push(input);
-        var ret = '[' + tokens.newLine + input.map(function (el, i) {
-            var eol = input.length - 1 === i ? tokens.newLine : ',' + tokens.newLineOrSpace;
-            var value = prettyPrint(el, combinedOptions, pad + combinedOptions.indent);
-            if (combinedOptions.transform) {
-                value = combinedOptions.transform(input, i, value);
-            }
-            return tokens.indent + value + eol;
-        }).join('') + tokens.pad + ']';
-        seen.pop();
-        return expandWhiteSpace(ret);
-    }
-    if (isObj(input)) {
-        var objKeys_1 = __spreadArrays(Object.keys(input), (getOwnEnumPropSymbols(input)));
-        if (combinedOptions.filter) {
-            objKeys_1 = objKeys_1.filter(function (el) { return combinedOptions.filter && combinedOptions.filter(input, el); });
-        }
-        if (objKeys_1.length === 0) {
-            return '{}';
-        }
-        seen.push(input);
-        var ret = '{' + tokens.newLine + objKeys_1.map(function (el, i) {
-            var eol = objKeys_1.length - 1 === i ? tokens.newLine : ',' + tokens.newLineOrSpace;
-            var isSymbol = typeof el === 'symbol';
-            var isClassic = !isSymbol && /^[a-z$_][a-z$_0-9]*$/i.test(el.toString());
-            var key = isSymbol || isClassic ? el : prettyPrint(el, combinedOptions);
-            var value = prettyPrint(input[el], combinedOptions, pad + combinedOptions.indent);
-            if (combinedOptions.transform) {
-                value = combinedOptions.transform(input, el, value);
-            }
-            return tokens.indent + String(key) + ': ' + value + eol;
-        }).join('') + tokens.pad + '}';
-        seen.pop();
-        return expandWhiteSpace(ret);
-    }
-    input = String(input).replace(/[\r\n]/g, function (x) { return x === '\n' ? '\\n' : '\\r'; });
-    if (!combinedOptions.singleQuotes) {
-        input = input.replace(/"/g, '\\"');
-        return "\"" + input + "\"";
-    }
-    input = input.replace(/\\?'/g, '\\\'');
-    return "'" + input + "'";
-}
-exports.prettyPrint = prettyPrint;
-
-});
-
-unwrapExports(dist);
-var dist_1 = dist.prettyPrint;
-
 function sortObject(value) {
@@ -286,6 +70,6 @@ // return non-object value as is
     return value;
-  } // return date and regexp values as is
+  } // return date, regexp and react element values as is
 
 
-  if (value instanceof Date || value instanceof RegExp) {
+  if (value instanceof Date || value instanceof RegExp || /*#__PURE__*/React.isValidElement(value)) {
     return value;
@@ -349,6 +133,65 @@ } // make a copy of array with each item passed through sortObject()
 
+var getFunctionTypeName = function getFunctionTypeName(functionType) {
+  if (!functionType.name || functionType.name === '_default') {
+    return 'No Display Name';
+  }
+
+  return functionType.name;
+};
+
+var getWrappedComponentDisplayName = function getWrappedComponentDisplayName(Component) {
+  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
+
+
 var getReactElementDisplayName = function getReactElementDisplayName(element) {
-  return 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);
+  switch (true) {
+    case typeof element.type === 'string':
+      return element.type;
+
+    case typeof element.type === 'function':
+      if (element.type.displayName) {
+        return element.type.displayName;
+      }
+
+      return getFunctionTypeName(element.type);
+
+    case isForwardRef(element):
+    case isMemo(element):
+      return getWrappedComponentDisplayName(element.type);
+
+    case isContextConsumer(element):
+      return "".concat(element.type._context.displayName || 'Context', ".Consumer");
+
+    case isContextProvider(element):
+      return "".concat(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 'UnknownElementType';
+  }
 };
@@ -382,3 +225,3 @@
     return createNumberTreeNode(element);
-  } else if (! /*#__PURE__*/React.isValidElement(element)) {
+  } else if (! /*#__PURE__*/React__default.isValidElement(element)) {
     throw new Error("react-element-to-jsx-string: Expected a React.Element, got `".concat(_typeof(element), "`"));
@@ -402,3 +245,3 @@ }
   var defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
-  var childrens = React.Children.toArray(element.props.children).filter(onlyMeaningfulChildren).map(function (child) {
+  var childrens = React__default.Children.toArray(element.props.children).filter(onlyMeaningfulChildren).map(function (child) {
     return parseReactElement(child, options);
@@ -439,3 +282,3 @@ });
   var normalizedValue = sortObject(value);
-  var stringifiedValue = dist_1(normalizedValue, {
+  var stringifiedValue = prettyPrint(normalizedValue, {
     transform: function transform(currentObj, prop, originalResult) {
@@ -464,3 +307,3 @@ var currentValue = currentObj[prop];
 
-var escape = function escape(s) {
+var escape$1 = function escape(s) {
   return s.replace(/"/g, '&quot;');
@@ -475,3 +318,3 @@ };
   if (typeof propValue === 'string') {
-    return "\"".concat(escape(propValue), "\"");
+    return "\"".concat(escape$1(propValue), "\"");
   } // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
@@ -501,2 +344,6 @@ // @see: https://flow.org/en/docs/types/primitives/
   if (propValue instanceof Date) {
+    if (isNaN(propValue.valueOf())) {
+      return "{new Date(NaN)}";
+    }
+
     return "{new Date(\"".concat(propValue.toISOString(), "\")}");
@@ -789,3 +636,3 @@ }
 
-var escape$1 = function escape(s) {
+var escape = function escape(s) {
   if (!shouldBeEscaped(s)) {
@@ -818,3 +665,3 @@ return s;
   if (node.type === 'string') {
-    return node.value ? "".concat(preserveTrailingSpace(escape$1(String(node.value)))) : '';
+    return node.value ? "".concat(preserveTrailingSpace(escape(String(node.value)))) : '';
   }
@@ -876,4 +723,3 @@
 
-export default reactElementToJsxString;
-export { inlineFunction, preserveFunctionLineBreak };
+export { reactElementToJsxString as default, inlineFunction, preserveFunctionLineBreak };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-element-to-jsx-string",
-  "version": "14.3.2",
+  "version": "14.3.3",
   "description": "Turn a ReactElement into the corresponding JSX string.",
@@ -27,6 +27,3 @@ "main": "dist/cjs/index.js",
   "lint-staged": {
-    "*.js": [
-      "prettier --write \"**/*.{js,json}\"",
-      "git add"
-    ]
+    "*.js": ["prettier --write \"**/*.{js,json}\"", "git add"]
   },
@@ -40,7 +37,7 @@ "author": {
   "devDependencies": {
-    "@babel/cli": "7.10.4",
-    "@babel/core": "7.10.4",
-    "@babel/preset-env": "7.10.4",
-    "@babel/preset-flow": "7.10.4",
-    "@babel/preset-react": "7.10.4",
+    "@babel/cli": "7.15.7",
+    "@babel/core": "7.15.8",
+    "@babel/preset-env": "7.15.8",
+    "@babel/preset-flow": "7.14.5",
+    "@babel/preset-react": "7.14.5",
     "@commitlint/cli": "8.3.5",
@@ -51,33 +48,32 @@ "@commitlint/config-angular": "8.3.4",
     "babel-register": "6.26.0",
-    "conventional-changelog-cli": "2.0.34",
+    "conventional-changelog-cli": "2.1.1",
     "doctoc": "1.4.0",
     "enzyme": "3.11.0",
-    "enzyme-adapter-react-16": "1.15.2",
+    "enzyme-adapter-react-16": "1.15.6",
     "eslint": "6.8.0",
     "eslint-config-algolia": "14.0.1",
-    "eslint-config-prettier": "6.11.0",
-    "eslint-plugin-import": "2.22.0",
+    "eslint-config-prettier": "6.15.0",
+    "eslint-plugin-import": "2.25.2",
     "eslint-plugin-jest": "22.21.0",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.20.3",
+    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-react": "7.26.1",
     "esm": "3.2.25",
-    "expect": "24.9.0",
+    "expect": "27.2.5",
     "flow-bin": "0.119.1",
     "flow-copy-source": "2.0.9",
     "husky": "3.1.0",
-    "jest": "24.9.0",
-    "json": "9.0.6",
-    "lint-staged": "10.2.11",
-    "mversion": "1.13.0",
+    "jest": "27.2.5",
+    "json": "10.0.0",
+    "lint-staged": "10.5.4",
+    "mversion": "2.0.1",
     "prettier": "1.19.1",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-test-renderer": "16.13.1",
-    "rollup": "1.32.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
+    "react-test-renderer": "16.14.0",
+    "rollup": "2.58.0",
     "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",
-    "rollup-plugin-sourcemaps": "0.6.2"
+    "rollup-plugin-sourcemaps": "0.6.3"
   },
@@ -89,10 +85,9 @@ "peerDependencies": {
   "dependencies": {
-    "@base2/pretty-print-object": "1.0.0",
-    "is-plain-object": "3.0.1"
+    "@base2/pretty-print-object": "1.0.1",
+    "is-plain-object": "5.0.0",
+    "react-is": "17.0.2"
   },
   "jest": {
-    "setupFilesAfterEnv": [
-      "<rootDir>tests/setupTests.js"
-    ]
+    "setupFilesAfterEnv": ["<rootDir>tests/setupTests.js"]
   }
 }

No alert changes

Improved metrics

Dev dependency count

40

-2.44%

Number of package files

30

7.14%

Worsened metrics

Total package byte prevSize

200718

-12.93%

Dependency count

5

25%

Lines of code

1199

-18.66%

Dependency changes

• + Added

  react-is@17.0.2

• + Added

  @base2/pretty-print-object@1.0.1
  (transitive)

• + Added

  is-plain-object@5.0.0
  (transitive)

• + Added

  react-is@17.0.2
  (transitive)

• - Removed

  @base2/pretty-print-object@1.0.0
  (transitive)

• - Removed

  is-plain-object@3.0.1
  (transitive)

• Updated

  @base2/pretty-print-object@1.0.1

• Updated

  is-plain-object@5.0.0