These are all the files from the Tabler react repos, made to work with laravel and webpack.

2025-10-03 19:16:51 +00:00 · 2019-01-04 17:03:16 +01:00
parent 961e7e92b3
commit 40028c8be7
94 changed files with 51417 additions and 3 deletions
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js
@@ -0,0 +1,18 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(props) {
+  var children = props.children; // eslint-disable-line react/prop-types
+
+  return _react2.default.createElement("div", null, children);
+};
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+//# sourceMappingURL=AnonymousStatelessComponent.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.flow
@@ -0,0 +1,7 @@
+import React from 'react';
+
+// eslint-disable-next-line react/display-name
+export default function(props) {
+  const { children } = props; // eslint-disable-line react/prop-types
+  return <div>{children}</div>;
+}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/AnonymousStatelessComponent.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AnonymousStatelessComponent.js"],"names":["props","children"],"mappings":";;;;;;kBAGe,UAASA,KAAT,EAAgB;AAAA,MACrBC,QADqB,GACRD,KADQ,CACrBC,QADqB,EACD;;AAC5B,SAAO;AAAA;AAAA;AAAMA;AAAN,GAAP;AACD,C;;AAND","file":"AnonymousStatelessComponent.js","sourcesContent":["import React from 'react';\n\n// eslint-disable-next-line react/display-name\nexport default function(props) {\n  const { children } = props; // eslint-disable-line react/prop-types\n  return <div>{children}</div>;\n}\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js
@@ -0,0 +1,74 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _react = require("react");
+
+var _stringifyObject = require("../stringifyObject");
+
+var _stringifyObject2 = _interopRequireDefault(_stringifyObject);
+
+var _sortObject = require("./sortObject");
+
+var _sortObject2 = _interopRequireDefault(_sortObject);
+
+var _parseReactElement = require("./../parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+function noRefCheck() {}
+
+exports.default = function(value, inline, lvl, options) {
+  var normalizedValue = (0, _sortObject2.default)(value);
+
+  var stringifiedValue = (0, _stringifyObject2.default)(normalizedValue, {
+    transform: function transform(currentObj, prop, originalResult) {
+      var currentValue = currentObj[prop];
+
+      if (currentValue && (0, _react.isValidElement)(currentValue)) {
+        return (0, _formatTreeNode2.default)(
+          (0, _parseReactElement2.default)(currentValue, options),
+          true,
+          lvl,
+          options
+        );
+      }
+
+      if (typeof currentValue === "function") {
+        return noRefCheck;
+      }
+
+      return originalResult;
+    },
+  });
+
+  if (inline) {
+    return stringifiedValue
+      .replace(/\s+/g, " ")
+      .replace(/{ /g, "{")
+      .replace(/ }/g, "}")
+      .replace(/\[ /g, "[")
+      .replace(/ ]/g, "]");
+  }
+
+  // Replace tabs with spaces, and add necessary indentation in front of each new line
+  return stringifiedValue
+    .replace(/\t/g, (0, _spacer2.default)(1, options.tabStop))
+    .replace(
+      /\n([^$])/g,
+      "\n" + (0, _spacer2.default)(lvl + 1, options.tabStop) + "$1"
+    );
+};
+//# sourceMappingURL=formatComplexDataStructure.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.flow
@@ -0,0 +1,55 @@
+/* @flow */
+
+import { isValidElement } from 'react';
+import stringify from 'stringify-object';
+import sortObject from './sortObject';
+import parseReactElement from './../parser/parseReactElement';
+import formatTreeNode from './formatTreeNode';
+import spacer from './spacer';
+import type { Options } from './../options';
+
+function noRefCheck() {}
+
+export default (
+  value: Object | Array<any>,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const normalizedValue = sortObject(value);
+
+  const stringifiedValue = stringify(normalizedValue, {
+    transform: (currentObj, prop, originalResult) => {
+      const currentValue = currentObj[prop];
+
+      if (currentValue && isValidElement(currentValue)) {
+        return formatTreeNode(
+          parseReactElement(currentValue, options),
+          true,
+          lvl,
+          options
+        );
+      }
+
+      if (typeof currentValue === 'function') {
+        return noRefCheck;
+      }
+
+      return originalResult;
+    },
+  });
+
+  if (inline) {
+    return stringifiedValue
+      .replace(/\s+/g, ' ')
+      .replace(/{ /g, '{')
+      .replace(/ }/g, '}')
+      .replace(/\[ /g, '[')
+      .replace(/ ]/g, ']');
+  }
+
+  // Replace tabs with spaces, and add necessary indentation in front of each new line
+  return stringifiedValue
+    .replace(/\t/g, spacer(1, options.tabStop))
+    .replace(/\n([^$])/g, `\n${spacer(lvl + 1, options.tabStop)}$1`);
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatComplexDataStructure.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatComplexDataStructure.js"],"names":["noRefCheck","value","inline","lvl","options","normalizedValue","stringifiedValue","transform","currentObj","prop","originalResult","currentValue","replace","tabStop"],"mappings":";;;;;;AAEA;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAGA,SAASA,UAAT,GAAsB,CAAE;;kBAET,UACbC,KADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AACX,MAAMC,kBAAkB,0BAAWJ,KAAX,CAAxB;;AAEA,MAAMK,mBAAmB,+BAAUD,eAAV,EAA2B;AAClDE,eAAW,mBAACC,UAAD,EAAaC,IAAb,EAAmBC,cAAnB,EAAsC;AAC/C,UAAMC,eAAeH,WAAWC,IAAX,CAArB;;AAEA,UAAIE,gBAAgB,2BAAeA,YAAf,CAApB,EAAkD;AAChD,eAAO,8BACL,iCAAkBA,YAAlB,EAAgCP,OAAhC,CADK,EAEL,IAFK,EAGLD,GAHK,EAILC,OAJK,CAAP;AAMD;;AAED,UAAI,OAAOO,YAAP,KAAwB,UAA5B,EAAwC;AACtC,eAAOX,UAAP;AACD;;AAED,aAAOU,cAAP;AACD;AAlBiD,GAA3B,CAAzB;;AAqBA,MAAIR,MAAJ,EAAY;AACV,WAAOI,iBACJM,OADI,CACI,MADJ,EACY,GADZ,EAEJA,OAFI,CAEI,KAFJ,EAEW,GAFX,EAGJA,OAHI,CAGI,KAHJ,EAGW,GAHX,EAIJA,OAJI,CAII,MAJJ,EAIY,GAJZ,EAKJA,OALI,CAKI,KALJ,EAKW,GALX,CAAP;AAMD;;AAED;AACA,SAAON,iBACJM,OADI,CACI,KADJ,EACW,sBAAO,CAAP,EAAUR,QAAQS,OAAlB,CADX,EAEJD,OAFI,CAEI,WAFJ,SAEsB,sBAAOT,MAAM,CAAb,EAAgBC,QAAQS,OAAxB,CAFtB,QAAP;AAGD,C","file":"formatComplexDataStructure.js","sourcesContent":["/* @flow */\n\nimport { isValidElement } from 'react';\nimport stringify from '../stringifyObject';\nimport sortObject from './sortObject';\nimport parseReactElement from './../parser/parseReactElement';\nimport formatTreeNode from './formatTreeNode';\nimport spacer from './spacer';\nimport type { Options } from './../options';\n\nfunction noRefCheck() {}\n\nexport default (\n  value: Object | Array<any>,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  const normalizedValue = sortObject(value);\n\n  const stringifiedValue = stringify(normalizedValue, {\n    transform: (currentObj, prop, originalResult) => {\n      const currentValue = currentObj[prop];\n\n      if (currentValue && isValidElement(currentValue)) {\n        return formatTreeNode(\n          parseReactElement(currentValue, options),\n          true,\n          lvl,\n          options\n        );\n      }\n\n      if (typeof currentValue === 'function') {\n        return noRefCheck;\n      }\n\n      return originalResult;\n    },\n  });\n\n  if (inline) {\n    return stringifiedValue\n      .replace(/\\s+/g, ' ')\n      .replace(/{ /g, '{')\n      .replace(/ }/g, '}')\n      .replace(/\\[ /g, '[')\n      .replace(/ ]/g, ']');\n  }\n\n  // Replace tabs with spaces, and add necessary indentation in front of each new line\n  return stringifiedValue\n    .replace(/\\t/g, spacer(1, options.tabStop))\n    .replace(/\\n([^$])/g, `\\n${spacer(lvl + 1, options.tabStop)}$1`);\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js
@@ -0,0 +1,74 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+var _formatPropValue = require("./formatPropValue");
+
+var _formatPropValue2 = _interopRequireDefault(_formatPropValue);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+exports.default = function(
+  name,
+  hasValue,
+  value,
+  hasDefaultValue,
+  defaultValue,
+  inline,
+  lvl,
+  options
+) {
+  if (!hasValue && !hasDefaultValue) {
+    throw new Error(
+      'The prop "' +
+        name +
+        '" has no value and no default: could not be formatted'
+    );
+  }
+
+  var usedValue = hasValue ? value : defaultValue;
+
+  var useBooleanShorthandSyntax = options.useBooleanShorthandSyntax,
+    tabStop = options.tabStop;
+
+  var formattedPropValue = (0, _formatPropValue2.default)(
+    usedValue,
+    inline,
+    lvl,
+    options
+  );
+
+  var attributeFormattedInline = " ";
+  var attributeFormattedMultiline =
+    "\n" + (0, _spacer2.default)(lvl + 1, tabStop);
+  var isMultilineAttribute = formattedPropValue.includes("\n");
+
+  if (
+    useBooleanShorthandSyntax &&
+    formattedPropValue === "{false}" &&
+    !hasDefaultValue
+  ) {
+    // If a boolean is false and not different from it's default, we do not render the attribute
+    attributeFormattedInline = "";
+    attributeFormattedMultiline = "";
+  } else if (useBooleanShorthandSyntax && formattedPropValue === "{true}") {
+    attributeFormattedInline += "" + name;
+    attributeFormattedMultiline += "" + name;
+  } else {
+    attributeFormattedInline += name + "=" + formattedPropValue;
+    attributeFormattedMultiline += name + "=" + formattedPropValue;
+  }
+
+  return {
+    attributeFormattedInline: attributeFormattedInline,
+    attributeFormattedMultiline: attributeFormattedMultiline,
+    isMultilineAttribute: isMultilineAttribute,
+  };
+};
+//# sourceMappingURL=formatProp.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.flow
@@ -0,0 +1,58 @@
+/* @flow */
+
+import spacer from './spacer';
+import formatPropValue from './formatPropValue';
+import type { Options } from './../options';
+
+export default (
+  name: string,
+  hasValue: boolean,
+  value: any,
+  hasDefaultValue: boolean,
+  defaultValue: any,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): {
+  attributeFormattedInline: string,
+  attributeFormattedMultiline: string,
+  isMultilineAttribute: boolean,
+} => {
+  if (!hasValue && !hasDefaultValue) {
+    throw new Error(
+      `The prop "${name}" has no value and no default: could not be formatted`
+    );
+  }
+
+  const usedValue = hasValue ? value : defaultValue;
+
+  const { useBooleanShorthandSyntax, tabStop } = options;
+
+  const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);
+
+  let attributeFormattedInline = ' ';
+  let attributeFormattedMultiline = `\n${spacer(lvl + 1, tabStop)}`;
+  const isMultilineAttribute = formattedPropValue.includes('\n');
+
+  if (
+    useBooleanShorthandSyntax &&
+    formattedPropValue === '{false}' &&
+    !hasDefaultValue
+  ) {
+    // If a boolean is false and not different from it's default, we do not render the attribute
+    attributeFormattedInline = '';
+    attributeFormattedMultiline = '';
+  } else if (useBooleanShorthandSyntax && formattedPropValue === '{true}') {
+    attributeFormattedInline += `${name}`;
+    attributeFormattedMultiline += `${name}`;
+  } else {
+    attributeFormattedInline += `${name}=${formattedPropValue}`;
+    attributeFormattedMultiline += `${name}=${formattedPropValue}`;
+  }
+
+  return {
+    attributeFormattedInline,
+    attributeFormattedMultiline,
+    isMultilineAttribute,
+  };
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatProp.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatProp.js"],"names":["name","hasValue","value","hasDefaultValue","defaultValue","inline","lvl","options","Error","usedValue","useBooleanShorthandSyntax","tabStop","formattedPropValue","attributeFormattedInline","attributeFormattedMultiline","isMultilineAttribute","includes"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;kBAGe,UACbA,IADa,EAEbC,QAFa,EAGbC,KAHa,EAIbC,eAJa,EAKbC,YALa,EAMbC,MANa,EAObC,GAPa,EAQbC,OARa,EAaV;AACH,MAAI,CAACN,QAAD,IAAa,CAACE,eAAlB,EAAmC;AACjC,UAAM,IAAIK,KAAJ,gBACSR,IADT,2DAAN;AAGD;;AAED,MAAMS,YAAYR,WAAWC,KAAX,GAAmBE,YAArC;;AAPG,MASKM,yBATL,GAS4CH,OAT5C,CASKG,yBATL;AAAA,MASgCC,OAThC,GAS4CJ,OAT5C,CASgCI,OAThC;;;AAWH,MAAMC,qBAAqB,+BAAgBH,SAAhB,EAA2BJ,MAA3B,EAAmCC,GAAnC,EAAwCC,OAAxC,CAA3B;;AAEA,MAAIM,2BAA2B,GAA/B;AACA,MAAIC,qCAAmC,sBAAOR,MAAM,CAAb,EAAgBK,OAAhB,CAAvC;AACA,MAAMI,uBAAuBH,mBAAmBI,QAAnB,CAA4B,IAA5B,CAA7B;;AAEA,MACEN,6BACAE,uBAAuB,SADvB,IAEA,CAACT,eAHH,EAIE;AACA;AACAU,+BAA2B,EAA3B;AACAC,kCAA8B,EAA9B;AACD,GARD,MAQO,IAAIJ,6BAA6BE,uBAAuB,QAAxD,EAAkE;AACvEC,qCAA+Bb,IAA/B;AACAc,wCAAkCd,IAAlC;AACD,GAHM,MAGA;AACLa,gCAA+Bb,IAA/B,SAAuCY,kBAAvC;AACAE,mCAAkCd,IAAlC,SAA0CY,kBAA1C;AACD;;AAED,SAAO;AACLC,sDADK;AAELC,4DAFK;AAGLC;AAHK,GAAP;AAKD,C","file":"formatProp.js","sourcesContent":["/* @flow */\n\nimport spacer from './spacer';\nimport formatPropValue from './formatPropValue';\nimport type { Options } from './../options';\n\nexport default (\n  name: string,\n  hasValue: boolean,\n  value: any,\n  hasDefaultValue: boolean,\n  defaultValue: any,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): {\n  attributeFormattedInline: string,\n  attributeFormattedMultiline: string,\n  isMultilineAttribute: boolean,\n} => {\n  if (!hasValue && !hasDefaultValue) {\n    throw new Error(\n      `The prop \"${name}\" has no value and no default: could not be formatted`\n    );\n  }\n\n  const usedValue = hasValue ? value : defaultValue;\n\n  const { useBooleanShorthandSyntax, tabStop } = options;\n\n  const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);\n\n  let attributeFormattedInline = ' ';\n  let attributeFormattedMultiline = `\\n${spacer(lvl + 1, tabStop)}`;\n  const isMultilineAttribute = formattedPropValue.includes('\\n');\n\n  if (\n    useBooleanShorthandSyntax &&\n    formattedPropValue === '{false}' &&\n    !hasDefaultValue\n  ) {\n    // If a boolean is false and not different from it's default, we do not render the attribute\n    attributeFormattedInline = '';\n    attributeFormattedMultiline = '';\n  } else if (useBooleanShorthandSyntax && formattedPropValue === '{true}') {\n    attributeFormattedInline += `${name}`;\n    attributeFormattedMultiline += `${name}`;\n  } else {\n    attributeFormattedInline += `${name}=${formattedPropValue}`;\n    attributeFormattedMultiline += `${name}=${formattedPropValue}`;\n  }\n\n  return {\n    attributeFormattedInline,\n    attributeFormattedMultiline,\n    isMultilineAttribute,\n  };\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js
@@ -0,0 +1,134 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+var _isPlainObject = require("is-plain-object");
+
+var _isPlainObject2 = _interopRequireDefault(_isPlainObject);
+
+var _react = require("react");
+
+var _formatComplexDataStructure = require("./formatComplexDataStructure");
+
+var _formatComplexDataStructure2 = _interopRequireDefault(
+  _formatComplexDataStructure
+);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _parseReactElement = require("./../parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var noRefCheck = function noRefCheck() {};
+var escape = function escape(s) {
+  return s.replace(/"/g, "&quot;");
+};
+
+var defaultFunctionValue = function defaultFunctionValue(fn) {
+  return fn;
+};
+
+var formatPropValue = function formatPropValue(
+  propValue,
+  inline,
+  lvl,
+  options
+) {
+  if (typeof propValue === "number") {
+    return "{" + String(propValue) + "}";
+  }
+
+  if (typeof propValue === "string") {
+    return '"' + escape(propValue) + '"';
+  }
+
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
+  if (
+    (typeof propValue === "undefined" ? "undefined" : _typeof(propValue)) ===
+    "symbol"
+  ) {
+    var symbolDescription = propValue
+      .valueOf()
+      .toString()
+      .replace(/Symbol\((.*)\)/, "$1");
+
+    if (!symbolDescription) {
+      return "{Symbol()}";
+    }
+
+    return "{Symbol('" + symbolDescription + "')}";
+  }
+
+  if (typeof propValue === "function") {
+    var _options$functionValu = options.functionValue,
+      functionValue =
+        _options$functionValu === undefined
+          ? defaultFunctionValue
+          : _options$functionValu,
+      showFunctions = options.showFunctions;
+
+    if (!showFunctions && functionValue === defaultFunctionValue) {
+      return "{" + functionValue(noRefCheck) + "}";
+    }
+
+    return "{" + functionValue(propValue) + "}";
+  }
+
+  if ((0, _react.isValidElement)(propValue)) {
+    return (
+      "{" +
+      (0, _formatTreeNode2.default)(
+        (0, _parseReactElement2.default)(propValue, options),
+        true,
+        lvl,
+        options
+      ) +
+      "}"
+    );
+  }
+
+  if (propValue instanceof Date) {
+    return '{new Date("' + propValue.toISOString() + '")}';
+  }
+
+  if ((0, _isPlainObject2.default)(propValue) || Array.isArray(propValue)) {
+    return (
+      "{" +
+      (0, _formatComplexDataStructure2.default)(
+        propValue,
+        inline,
+        lvl,
+        options
+      ) +
+      "}"
+    );
+  }
+
+  return "{" + String(propValue) + "}";
+};
+
+exports.default = formatPropValue;
+//# sourceMappingURL=formatPropValue.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.flow
@@ -0,0 +1,74 @@
+/* @flow */
+
+import isPlainObject from 'is-plain-object';
+import { isValidElement } from 'react';
+import formatComplexDataStructure from './formatComplexDataStructure';
+import formatTreeNode from './formatTreeNode';
+import type { Options } from './../options';
+import parseReactElement from './../parser/parseReactElement';
+
+const noRefCheck = () => {};
+const escape = (s: string): string => s.replace(/"/g, '&quot;');
+
+const defaultFunctionValue = (fn: any): any => fn;
+
+const formatPropValue = (
+  propValue: any,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  if (typeof propValue === 'number') {
+    return `{${String(propValue)}}`;
+  }
+
+  if (typeof propValue === 'string') {
+    return `"${escape(propValue)}"`;
+  }
+
+  // > "Symbols (new in ECMAScript 2015, not yet supported in Flow)"
+  // @see: https://flow.org/en/docs/types/primitives/
+  // $FlowFixMe: Flow does not support Symbol
+  if (typeof propValue === 'symbol') {
+    const symbolDescription = propValue
+      .valueOf()
+      .toString()
+      .replace(/Symbol\((.*)\)/, '$1');
+
+    if (!symbolDescription) {
+      return `{Symbol()}`;
+    }
+
+    return `{Symbol('${symbolDescription}')}`;
+  }
+
+  if (typeof propValue === 'function') {
+    const { functionValue = defaultFunctionValue, showFunctions } = options;
+    if (!showFunctions && functionValue === defaultFunctionValue) {
+      return `{${functionValue(noRefCheck)}}`;
+    }
+
+    return `{${functionValue(propValue)}}`;
+  }
+
+  if (isValidElement(propValue)) {
+    return `{${formatTreeNode(
+      parseReactElement(propValue, options),
+      true,
+      lvl,
+      options
+    )}}`;
+  }
+
+  if (propValue instanceof Date) {
+    return `{new Date("${propValue.toISOString()}")}`;
+  }
+
+  if (isPlainObject(propValue) || Array.isArray(propValue)) {
+    return `{${formatComplexDataStructure(propValue, inline, lvl, options)}}`;
+  }
+
+  return `{${String(propValue)}}`;
+};
+
+export default formatPropValue;
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatPropValue.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatPropValue.js"],"names":["noRefCheck","escape","s","replace","defaultFunctionValue","fn","formatPropValue","propValue","inline","lvl","options","String","symbolDescription","valueOf","toString","functionValue","showFunctions","Date","toISOString","Array","isArray"],"mappings":";;;;;;;;AAEA;;;;AACA;;AACA;;;;AACA;;;;AAEA;;;;;;AAEA,IAAMA,aAAa,SAAbA,UAAa,GAAM,CAAE,CAA3B;AACA,IAAMC,SAAS,SAATA,MAAS,CAACC,CAAD;AAAA,SAAuBA,EAAEC,OAAF,CAAU,IAAV,EAAgB,QAAhB,CAAvB;AAAA,CAAf;;AAEA,IAAMC,uBAAuB,SAAvBA,oBAAuB,CAACC,EAAD;AAAA,SAAkBA,EAAlB;AAAA,CAA7B;;AAEA,IAAMC,kBAAkB,SAAlBA,eAAkB,CACtBC,SADsB,EAEtBC,MAFsB,EAGtBC,GAHsB,EAItBC,OAJsB,EAKX;AACX,MAAI,OAAOH,SAAP,KAAqB,QAAzB,EAAmC;AACjC,iBAAWI,OAAOJ,SAAP,CAAX;AACD;;AAED,MAAI,OAAOA,SAAP,KAAqB,QAAzB,EAAmC;AACjC,iBAAWN,OAAOM,SAAP,CAAX;AACD;;AAED;AACA;AACA;AACA,MAAI,QAAOA,SAAP,yCAAOA,SAAP,OAAqB,QAAzB,EAAmC;AACjC,QAAMK,oBAAoBL,UACvBM,OADuB,GAEvBC,QAFuB,GAGvBX,OAHuB,CAGf,gBAHe,EAGG,IAHH,CAA1B;;AAKA,QAAI,CAACS,iBAAL,EAAwB;AACtB;AACD;;AAED,0BAAmBA,iBAAnB;AACD;;AAED,MAAI,OAAOL,SAAP,KAAqB,UAAzB,EAAqC;AAAA,gCAC6BG,OAD7B,CAC3BK,aAD2B;AAAA,QAC3BA,aAD2B,yCACXX,oBADW;AAAA,QACWY,aADX,GAC6BN,OAD7B,CACWM,aADX;;AAEnC,QAAI,CAACA,aAAD,IAAkBD,kBAAkBX,oBAAxC,EAA8D;AAC5D,mBAAWW,cAAcf,UAAd,CAAX;AACD;;AAED,iBAAWe,cAAcR,SAAd,CAAX;AACD;;AAED,MAAI,2BAAeA,SAAf,CAAJ,EAA+B;AAC7B,iBAAW,8BACT,iCAAkBA,SAAlB,EAA6BG,OAA7B,CADS,EAET,IAFS,EAGTD,GAHS,EAITC,OAJS,CAAX;AAMD;;AAED,MAAIH,qBAAqBU,IAAzB,EAA+B;AAC7B,2BAAqBV,UAAUW,WAAV,EAArB;AACD;;AAED,MAAI,6BAAcX,SAAd,KAA4BY,MAAMC,OAAN,CAAcb,SAAd,CAAhC,EAA0D;AACxD,iBAAW,0CAA2BA,SAA3B,EAAsCC,MAAtC,EAA8CC,GAA9C,EAAmDC,OAAnD,CAAX;AACD;;AAED,eAAWC,OAAOJ,SAAP,CAAX;AACD,CAzDD;;kBA2DeD,e","file":"formatPropValue.js","sourcesContent":["/* @flow */\n\nimport isPlainObject from 'is-plain-object';\nimport { isValidElement } from 'react';\nimport formatComplexDataStructure from './formatComplexDataStructure';\nimport formatTreeNode from './formatTreeNode';\nimport type { Options } from './../options';\nimport parseReactElement from './../parser/parseReactElement';\n\nconst noRefCheck = () => {};\nconst escape = (s: string): string => s.replace(/\"/g, '&quot;');\n\nconst defaultFunctionValue = (fn: any): any => fn;\n\nconst formatPropValue = (\n  propValue: any,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  if (typeof propValue === 'number') {\n    return `{${String(propValue)}}`;\n  }\n\n  if (typeof propValue === 'string') {\n    return `\"${escape(propValue)}\"`;\n  }\n\n  // > \"Symbols (new in ECMAScript 2015, not yet supported in Flow)\"\n  // @see: https://flow.org/en/docs/types/primitives/\n  // $FlowFixMe: Flow does not support Symbol\n  if (typeof propValue === 'symbol') {\n    const symbolDescription = propValue\n      .valueOf()\n      .toString()\n      .replace(/Symbol\\((.*)\\)/, '$1');\n\n    if (!symbolDescription) {\n      return `{Symbol()}`;\n    }\n\n    return `{Symbol('${symbolDescription}')}`;\n  }\n\n  if (typeof propValue === 'function') {\n    const { functionValue = defaultFunctionValue, showFunctions } = options;\n    if (!showFunctions && functionValue === defaultFunctionValue) {\n      return `{${functionValue(noRefCheck)}}`;\n    }\n\n    return `{${functionValue(propValue)}}`;\n  }\n\n  if (isValidElement(propValue)) {\n    return `{${formatTreeNode(\n      parseReactElement(propValue, options),\n      true,\n      lvl,\n      options\n    )}}`;\n  }\n\n  if (propValue instanceof Date) {\n    return `{new Date(\"${propValue.toISOString()}\")}`;\n  }\n\n  if (isPlainObject(propValue) || Array.isArray(propValue)) {\n    return `{${formatComplexDataStructure(propValue, inline, lvl, options)}}`;\n  }\n\n  return `{${String(propValue)}}`;\n};\n\nexport default formatPropValue;\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js
@@ -0,0 +1,257 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _spacer = require("./spacer");
+
+var _spacer2 = _interopRequireDefault(_spacer);
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+var _formatProp2 = require("./formatProp");
+
+var _formatProp3 = _interopRequireDefault(_formatProp2);
+
+var _mergeSiblingPlainStringChildrenReducer = require("./mergeSiblingPlainStringChildrenReducer");
+
+var _mergeSiblingPlainStringChildrenReducer2 = _interopRequireDefault(
+  _mergeSiblingPlainStringChildrenReducer
+);
+
+var _propNameSorter = require("./propNameSorter");
+
+var _propNameSorter2 = _interopRequireDefault(_propNameSorter);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var compensateMultilineStringElementIndentation = function compensateMultilineStringElementIndentation(
+  element,
+  formattedElement,
+  inline,
+  lvl,
+  options
+) {
+  var tabStop = options.tabStop;
+
+  if (element.type === "string") {
+    return formattedElement
+      .split("\n")
+      .map(function(line, offset) {
+        if (offset === 0) {
+          return line;
+        }
+
+        return "" + (0, _spacer2.default)(lvl, tabStop) + line;
+      })
+      .join("\n");
+  }
+
+  return formattedElement;
+};
+
+var formatOneChildren = function formatOneChildren(inline, lvl, options) {
+  return function(element) {
+    return compensateMultilineStringElementIndentation(
+      element,
+      (0, _formatTreeNode2.default)(element, inline, lvl, options),
+      inline,
+      lvl,
+      options
+    );
+  };
+};
+
+var onlyPropsWithOriginalValue = function onlyPropsWithOriginalValue(
+  defaultProps,
+  props
+) {
+  return function(propName) {
+    var haveDefaultValue = Object.keys(defaultProps).includes(propName);
+    return (
+      !haveDefaultValue ||
+      (haveDefaultValue && defaultProps[propName] !== props[propName])
+    );
+  };
+};
+
+var isInlineAttributeTooLong = function isInlineAttributeTooLong(
+  attributes,
+  inlineAttributeString,
+  lvl,
+  tabStop,
+  maxInlineAttributesLineLength
+) {
+  if (!maxInlineAttributesLineLength) {
+    return attributes.length > 1;
+  }
+
+  return (
+    (0, _spacer2.default)(lvl, tabStop).length + inlineAttributeString.length >
+    maxInlineAttributesLineLength
+  );
+};
+
+var shouldRenderMultilineAttr = function shouldRenderMultilineAttr(
+  attributes,
+  inlineAttributeString,
+  containsMultilineAttr,
+  inline,
+  lvl,
+  tabStop,
+  maxInlineAttributesLineLength
+) {
+  return (
+    (isInlineAttributeTooLong(
+      attributes,
+      inlineAttributeString,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    ) ||
+      containsMultilineAttr) &&
+    !inline
+  );
+};
+
+exports.default = function(node, inline, lvl, options) {
+  var type = node.type,
+    _node$displayName = node.displayName,
+    displayName = _node$displayName === undefined ? "" : _node$displayName,
+    childrens = node.childrens,
+    _node$props = node.props,
+    props = _node$props === undefined ? {} : _node$props,
+    _node$defaultProps = node.defaultProps,
+    defaultProps = _node$defaultProps === undefined ? {} : _node$defaultProps;
+
+  if (type !== "ReactElement") {
+    throw new Error(
+      'The "formatReactElementNode" function could only format node of type "ReactElement". Given:  ' +
+        type
+    );
+  }
+
+  var filterProps = options.filterProps,
+    maxInlineAttributesLineLength = options.maxInlineAttributesLineLength,
+    showDefaultProps = options.showDefaultProps,
+    sortProps = options.sortProps,
+    tabStop = options.tabStop;
+
+  var out = "<" + displayName;
+
+  var outInlineAttr = out;
+  var outMultilineAttr = out;
+  var containsMultilineAttr = false;
+
+  var visibleAttributeNames = [];
+
+  Object.keys(props)
+    .filter(function(propName) {
+      return filterProps.indexOf(propName) === -1;
+    })
+    .filter(onlyPropsWithOriginalValue(defaultProps, props))
+    .forEach(function(propName) {
+      return visibleAttributeNames.push(propName);
+    });
+
+  Object.keys(defaultProps)
+    .filter(function(defaultPropName) {
+      return filterProps.indexOf(defaultPropName) === -1;
+    })
+    .filter(function() {
+      return showDefaultProps;
+    })
+    .filter(function(defaultPropName) {
+      return !visibleAttributeNames.includes(defaultPropName);
+    })
+    .forEach(function(defaultPropName) {
+      return visibleAttributeNames.push(defaultPropName);
+    });
+
+  var attributes = visibleAttributeNames.sort(
+    (0, _propNameSorter2.default)(sortProps)
+  );
+
+  attributes.forEach(function(attributeName) {
+    var _formatProp = (0, _formatProp3.default)(
+        attributeName,
+        Object.keys(props).includes(attributeName),
+        props[attributeName],
+        Object.keys(defaultProps).includes(attributeName),
+        defaultProps[attributeName],
+        inline,
+        lvl,
+        options
+      ),
+      attributeFormattedInline = _formatProp.attributeFormattedInline,
+      attributeFormattedMultiline = _formatProp.attributeFormattedMultiline,
+      isMultilineAttribute = _formatProp.isMultilineAttribute;
+
+    if (isMultilineAttribute) {
+      containsMultilineAttr = true;
+    }
+
+    outInlineAttr += attributeFormattedInline;
+    outMultilineAttr += attributeFormattedMultiline;
+  });
+
+  outMultilineAttr += "\n" + (0, _spacer2.default)(lvl, tabStop);
+
+  if (
+    shouldRenderMultilineAttr(
+      attributes,
+      outInlineAttr,
+      containsMultilineAttr,
+      inline,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    )
+  ) {
+    out = outMultilineAttr;
+  } else {
+    out = outInlineAttr;
+  }
+
+  if (childrens && childrens.length > 0) {
+    var newLvl = lvl + 1;
+
+    out += ">";
+
+    if (!inline) {
+      out += "\n";
+      out += (0, _spacer2.default)(newLvl, tabStop);
+    }
+
+    out += childrens
+      .reduce(_mergeSiblingPlainStringChildrenReducer2.default, [])
+      .map(formatOneChildren(inline, newLvl, options))
+      .join(!inline ? "\n" + (0, _spacer2.default)(newLvl, tabStop) : "");
+
+    if (!inline) {
+      out += "\n";
+      out += (0, _spacer2.default)(newLvl - 1, tabStop);
+    }
+    out += "</" + displayName + ">";
+  } else {
+    if (
+      !isInlineAttributeTooLong(
+        attributes,
+        outInlineAttr,
+        lvl,
+        tabStop,
+        maxInlineAttributesLineLength
+      )
+    ) {
+      out += " ";
+    }
+
+    out += "/>";
+  }
+
+  return out;
+};
+//# sourceMappingURL=formatReactElementNode.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js.flow
@@ -0,0 +1,223 @@
+/* @flow */
+
+import spacer from './spacer';
+import formatTreeNode from './formatTreeNode';
+import formatProp from './formatProp';
+import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
+import propNameSorter from './propNameSorter';
+import type { Options } from './../options';
+import type { ReactElementTreeNode } from './../tree';
+
+const compensateMultilineStringElementIndentation = (
+  element,
+  formattedElement: string,
+  inline: boolean,
+  lvl: number,
+  options: Options
+) => {
+  const { tabStop } = options;
+
+  if (element.type === 'string') {
+    return formattedElement
+      .split('\n')
+      .map((line, offset) => {
+        if (offset === 0) {
+          return line;
+        }
+
+        return `${spacer(lvl, tabStop)}${line}`;
+      })
+      .join('\n');
+  }
+
+  return formattedElement;
+};
+
+const formatOneChildren = (
+  inline: boolean,
+  lvl: number,
+  options: Options
+) => element =>
+  compensateMultilineStringElementIndentation(
+    element,
+    formatTreeNode(element, inline, lvl, options),
+    inline,
+    lvl,
+    options
+  );
+
+const onlyPropsWithOriginalValue = (defaultProps, props) => propName => {
+  const haveDefaultValue = Object.keys(defaultProps).includes(propName);
+  return (
+    !haveDefaultValue ||
+    (haveDefaultValue && defaultProps[propName] !== props[propName])
+  );
+};
+
+const isInlineAttributeTooLong = (
+  attributes: string[],
+  inlineAttributeString: string,
+  lvl: number,
+  tabStop: number,
+  maxInlineAttributesLineLength: ?number
+): boolean => {
+  if (!maxInlineAttributesLineLength) {
+    return attributes.length > 1;
+  }
+
+  return (
+    spacer(lvl, tabStop).length + inlineAttributeString.length >
+    maxInlineAttributesLineLength
+  );
+};
+
+const shouldRenderMultilineAttr = (
+  attributes: string[],
+  inlineAttributeString: string,
+  containsMultilineAttr: boolean,
+  inline: boolean,
+  lvl: number,
+  tabStop: number,
+  maxInlineAttributesLineLength: ?number
+): boolean =>
+  (isInlineAttributeTooLong(
+    attributes,
+    inlineAttributeString,
+    lvl,
+    tabStop,
+    maxInlineAttributesLineLength
+  ) ||
+    containsMultilineAttr) &&
+  !inline;
+
+export default (
+  node: ReactElementTreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const {
+    type,
+    displayName = '',
+    childrens,
+    props = {},
+    defaultProps = {},
+  } = node;
+
+  if (type !== 'ReactElement') {
+    throw new Error(
+      `The "formatReactElementNode" function could only format node of type "ReactElement". Given:  ${
+        type
+      }`
+    );
+  }
+
+  const {
+    filterProps,
+    maxInlineAttributesLineLength,
+    showDefaultProps,
+    sortProps,
+    tabStop,
+  } = options;
+
+  let out = `<${displayName}`;
+
+  let outInlineAttr = out;
+  let outMultilineAttr = out;
+  let containsMultilineAttr = false;
+
+  const visibleAttributeNames = [];
+
+  Object.keys(props)
+    .filter(propName => filterProps.indexOf(propName) === -1)
+    .filter(onlyPropsWithOriginalValue(defaultProps, props))
+    .forEach(propName => visibleAttributeNames.push(propName));
+
+  Object.keys(defaultProps)
+    .filter(defaultPropName => filterProps.indexOf(defaultPropName) === -1)
+    .filter(() => showDefaultProps)
+    .filter(defaultPropName => !visibleAttributeNames.includes(defaultPropName))
+    .forEach(defaultPropName => visibleAttributeNames.push(defaultPropName));
+
+  const attributes = visibleAttributeNames.sort(propNameSorter(sortProps));
+
+  attributes.forEach(attributeName => {
+    const {
+      attributeFormattedInline,
+      attributeFormattedMultiline,
+      isMultilineAttribute,
+    } = formatProp(
+      attributeName,
+      Object.keys(props).includes(attributeName),
+      props[attributeName],
+      Object.keys(defaultProps).includes(attributeName),
+      defaultProps[attributeName],
+      inline,
+      lvl,
+      options
+    );
+
+    if (isMultilineAttribute) {
+      containsMultilineAttr = true;
+    }
+
+    outInlineAttr += attributeFormattedInline;
+    outMultilineAttr += attributeFormattedMultiline;
+  });
+
+  outMultilineAttr += `\n${spacer(lvl, tabStop)}`;
+
+  if (
+    shouldRenderMultilineAttr(
+      attributes,
+      outInlineAttr,
+      containsMultilineAttr,
+      inline,
+      lvl,
+      tabStop,
+      maxInlineAttributesLineLength
+    )
+  ) {
+    out = outMultilineAttr;
+  } else {
+    out = outInlineAttr;
+  }
+
+  if (childrens && childrens.length > 0) {
+    const newLvl = lvl + 1;
+
+    out += '>';
+
+    if (!inline) {
+      out += '\n';
+      out += spacer(newLvl, tabStop);
+    }
+
+    out += childrens
+      .reduce(mergeSiblingPlainStringChildrenReducer, [])
+      .map(formatOneChildren(inline, newLvl, options))
+      .join(!inline ? `\n${spacer(newLvl, tabStop)}` : '');
+
+    if (!inline) {
+      out += '\n';
+      out += spacer(newLvl - 1, tabStop);
+    }
+    out += `</${displayName}>`;
+  } else {
+    if (
+      !isInlineAttributeTooLong(
+        attributes,
+        outInlineAttr,
+        lvl,
+        tabStop,
+        maxInlineAttributesLineLength
+      )
+    ) {
+      out += ' ';
+    }
+
+    out += '/>';
+  }
+
+  return out;
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactElementNode.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js
@@ -0,0 +1,76 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatReactElementNode = require("./formatReactElementNode");
+
+var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = "";
+var REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = "React.Fragment";
+
+var toReactElementTreeNode = function toReactElementTreeNode(
+  displayName,
+  key,
+  childrens
+) {
+  var props = {};
+  if (key) {
+    props = { key: key };
+  }
+
+  return {
+    type: "ReactElement",
+    displayName: displayName,
+    props: props,
+    defaultProps: {},
+    childrens: childrens,
+  };
+};
+
+var isKeyedFragment = function isKeyedFragment(_ref) {
+  var key = _ref.key;
+  return Boolean(key);
+};
+var hasNoChildren = function hasNoChildren(_ref2) {
+  var childrens = _ref2.childrens;
+  return childrens.length === 0;
+};
+
+exports.default = function(node, inline, lvl, options) {
+  var type = node.type,
+    key = node.key,
+    childrens = node.childrens;
+
+  if (type !== "ReactFragment") {
+    throw new Error(
+      'The "formatReactFragmentNode" function could only format node of type "ReactFragment". Given: ' +
+        type
+    );
+  }
+
+  var useFragmentShortSyntax = options.useFragmentShortSyntax;
+
+  var displayName = void 0;
+  if (useFragmentShortSyntax) {
+    if (hasNoChildren(node) || isKeyedFragment(node)) {
+      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+    } else {
+      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;
+    }
+  } else {
+    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+  }
+
+  return (0, _formatReactElementNode2.default)(
+    toReactElementTreeNode(displayName, key, childrens),
+    inline,
+    lvl,
+    options
+  );
+};
+//# sourceMappingURL=formatReactFragmentNode.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.flow
@@ -0,0 +1,73 @@
+/* @flow */
+
+import type { Key } from 'react';
+import formatReactElementNode from './formatReactElementNode';
+import type { Options } from './../options';
+import type {
+  ReactElementTreeNode,
+  ReactFragmentTreeNode,
+  TreeNode,
+} from './../tree';
+
+const REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = '';
+const REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = 'React.Fragment';
+
+const toReactElementTreeNode = (
+  displayName: string,
+  key: ?Key,
+  childrens: TreeNode[]
+): ReactElementTreeNode => {
+  let props = {};
+  if (key) {
+    props = { key };
+  }
+
+  return {
+    type: 'ReactElement',
+    displayName,
+    props,
+    defaultProps: {},
+    childrens,
+  };
+};
+
+const isKeyedFragment = ({ key }: ReactFragmentTreeNode) => Boolean(key);
+const hasNoChildren = ({ childrens }: ReactFragmentTreeNode) =>
+  childrens.length === 0;
+
+export default (
+  node: ReactFragmentTreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const { type, key, childrens } = node;
+
+  if (type !== 'ReactFragment') {
+    throw new Error(
+      `The "formatReactFragmentNode" function could only format node of type "ReactFragment". Given: ${
+        type
+      }`
+    );
+  }
+
+  const { useFragmentShortSyntax } = options;
+
+  let displayName;
+  if (useFragmentShortSyntax) {
+    if (hasNoChildren(node) || isKeyedFragment(node)) {
+      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+    } else {
+      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;
+    }
+  } else {
+    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;
+  }
+
+  return formatReactElementNode(
+    toReactElementTreeNode(displayName, key, childrens),
+    inline,
+    lvl,
+    options
+  );
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatReactFragmentNode.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatReactFragmentNode.js"],"names":["REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX","REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX","toReactElementTreeNode","displayName","key","childrens","props","type","defaultProps","isKeyedFragment","Boolean","hasNoChildren","length","node","inline","lvl","options","Error","useFragmentShortSyntax"],"mappings":";;;;;;AAGA;;;;;;AAQA,IAAMA,uCAAuC,EAA7C;AACA,IAAMC,0CAA0C,gBAAhD;;AAEA,IAAMC,yBAAyB,SAAzBA,sBAAyB,CAC7BC,WAD6B,EAE7BC,GAF6B,EAG7BC,SAH6B,EAIJ;AACzB,MAAIC,QAAQ,EAAZ;AACA,MAAIF,GAAJ,EAAS;AACPE,YAAQ,EAAEF,QAAF,EAAR;AACD;;AAED,SAAO;AACLG,UAAM,cADD;AAELJ,4BAFK;AAGLG,gBAHK;AAILE,kBAAc,EAJT;AAKLH;AALK,GAAP;AAOD,CAjBD;;AAmBA,IAAMI,kBAAkB,SAAlBA,eAAkB;AAAA,MAAGL,GAAH,QAAGA,GAAH;AAAA,SAAoCM,QAAQN,GAAR,CAApC;AAAA,CAAxB;AACA,IAAMO,gBAAgB,SAAhBA,aAAgB;AAAA,MAAGN,SAAH,SAAGA,SAAH;AAAA,SACpBA,UAAUO,MAAV,KAAqB,CADD;AAAA,CAAtB;;kBAGe,UACbC,IADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AAAA,MACHT,IADG,GACsBM,IADtB,CACHN,IADG;AAAA,MACGH,GADH,GACsBS,IADtB,CACGT,GADH;AAAA,MACQC,SADR,GACsBQ,IADtB,CACQR,SADR;;;AAGX,MAAIE,SAAS,eAAb,EAA8B;AAC5B,UAAM,IAAIU,KAAJ,oGAEFV,IAFE,CAAN;AAKD;;AATU,MAWHW,sBAXG,GAWwBF,OAXxB,CAWHE,sBAXG;;;AAaX,MAAIf,oBAAJ;AACA,MAAIe,sBAAJ,EAA4B;AAC1B,QAAIP,cAAcE,IAAd,KAAuBJ,gBAAgBI,IAAhB,CAA3B,EAAkD;AAChDV,oBAAcF,uCAAd;AACD,KAFD,MAEO;AACLE,oBAAcH,oCAAd;AACD;AACF,GAND,MAMO;AACLG,kBAAcF,uCAAd;AACD;;AAED,SAAO,sCACLC,uBAAuBC,WAAvB,EAAoCC,GAApC,EAAyCC,SAAzC,CADK,EAELS,MAFK,EAGLC,GAHK,EAILC,OAJK,CAAP;AAMD,C","file":"formatReactFragmentNode.js","sourcesContent":["/* @flow */\n\nimport type { Key } from 'react';\nimport formatReactElementNode from './formatReactElementNode';\nimport type { Options } from './../options';\nimport type {\n  ReactElementTreeNode,\n  ReactFragmentTreeNode,\n  TreeNode,\n} from './../tree';\n\nconst REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = '';\nconst REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = 'React.Fragment';\n\nconst toReactElementTreeNode = (\n  displayName: string,\n  key: ?Key,\n  childrens: TreeNode[]\n): ReactElementTreeNode => {\n  let props = {};\n  if (key) {\n    props = { key };\n  }\n\n  return {\n    type: 'ReactElement',\n    displayName,\n    props,\n    defaultProps: {},\n    childrens,\n  };\n};\n\nconst isKeyedFragment = ({ key }: ReactFragmentTreeNode) => Boolean(key);\nconst hasNoChildren = ({ childrens }: ReactFragmentTreeNode) =>\n  childrens.length === 0;\n\nexport default (\n  node: ReactFragmentTreeNode,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  const { type, key, childrens } = node;\n\n  if (type !== 'ReactFragment') {\n    throw new Error(\n      `The \"formatReactFragmentNode\" function could only format node of type \"ReactFragment\". Given: ${\n        type\n      }`\n    );\n  }\n\n  const { useFragmentShortSyntax } = options;\n\n  let displayName;\n  if (useFragmentShortSyntax) {\n    if (hasNoChildren(node) || isKeyedFragment(node)) {\n      displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;\n    } else {\n      displayName = REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX;\n    }\n  } else {\n    displayName = REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX;\n  }\n\n  return formatReactElementNode(\n    toReactElementTreeNode(displayName, key, childrens),\n    inline,\n    lvl,\n    options\n  );\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js
@@ -0,0 +1,16 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatTreeNode = require("./formatTreeNode");
+
+var _formatTreeNode2 = _interopRequireDefault(_formatTreeNode);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+exports.default = function(node, options) {
+  return (0, _formatTreeNode2.default)(node, false, 0, options);
+};
+//# sourceMappingURL=formatTree.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.flow
@@ -0,0 +1,8 @@
+/* @flow */
+
+import formatTreeNode from './formatTreeNode';
+import type { Options } from './../options';
+import type { TreeNode } from './../tree';
+
+export default (node: TreeNode, options: Options): string =>
+  formatTreeNode(node, false, 0, options);
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTree.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatTree.js"],"names":["node","options"],"mappings":";;;;;;AAEA;;;;;;kBAIe,UAACA,IAAD,EAAiBC,OAAjB;AAAA,SACb,8BAAeD,IAAf,EAAqB,KAArB,EAA4B,CAA5B,EAA+BC,OAA/B,CADa;AAAA,C","file":"formatTree.js","sourcesContent":["/* @flow */\n\nimport formatTreeNode from './formatTreeNode';\nimport type { Options } from './../options';\nimport type { TreeNode } from './../tree';\n\nexport default (node: TreeNode, options: Options): string =>\n  formatTreeNode(node, false, 0, options);\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js
@@ -0,0 +1,68 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatReactElementNode = require("./formatReactElementNode");
+
+var _formatReactElementNode2 = _interopRequireDefault(_formatReactElementNode);
+
+var _formatReactFragmentNode = require("./formatReactFragmentNode");
+
+var _formatReactFragmentNode2 = _interopRequireDefault(
+  _formatReactFragmentNode
+);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var jsxStopChars = ["<", ">", "{", "}"];
+var shouldBeEscaped = function shouldBeEscaped(s) {
+  return jsxStopChars.some(function(jsxStopChar) {
+    return s.includes(jsxStopChar);
+  });
+};
+
+var escape = function escape(s) {
+  if (!shouldBeEscaped(s)) {
+    return s;
+  }
+
+  return "{`" + s + "`}";
+};
+
+var preserveTrailingSpace = function preserveTrailingSpace(s) {
+  var result = s;
+  if (result.endsWith(" ")) {
+    result = result.replace(/^(\S*)(\s*)$/, "$1{'$2'}");
+  }
+
+  if (result.startsWith(" ")) {
+    result = result.replace(/^(\s*)(\S*)$/, "{'$1'}$2");
+  }
+
+  return result;
+};
+
+exports.default = function(node, inline, lvl, options) {
+  if (node.type === "number") {
+    return String(node.value);
+  }
+
+  if (node.type === "string") {
+    return node.value
+      ? "" + preserveTrailingSpace(escape(String(node.value)))
+      : "";
+  }
+
+  if (node.type === "ReactElement") {
+    return (0, _formatReactElementNode2.default)(node, inline, lvl, options);
+  }
+
+  if (node.type === "ReactFragment") {
+    return (0, _formatReactFragmentNode2.default)(node, inline, lvl, options);
+  }
+
+  throw new TypeError('Unknow format type "' + node.type + '"');
+};
+//# sourceMappingURL=formatTreeNode.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.flow
@@ -0,0 +1,58 @@
+/* @flow */
+
+import formatReactElementNode from './formatReactElementNode';
+import formatReactFragmentNode from './formatReactFragmentNode';
+import type { Options } from './../options';
+import type { TreeNode } from './../tree';
+
+const jsxStopChars = ['<', '>', '{', '}'];
+const shouldBeEscaped = (s: string) =>
+  jsxStopChars.some(jsxStopChar => s.includes(jsxStopChar));
+
+const escape = (s: string) => {
+  if (!shouldBeEscaped(s)) {
+    return s;
+  }
+
+  return `{\`${s}\`}`;
+};
+
+const preserveTrailingSpace = (s: string) => {
+  let result = s;
+  if (result.endsWith(' ')) {
+    result = result.replace(/^(\S*)(\s*)$/, "$1{'$2'}");
+  }
+
+  if (result.startsWith(' ')) {
+    result = result.replace(/^(\s*)(\S*)$/, "{'$1'}$2");
+  }
+
+  return result;
+};
+
+export default (
+  node: TreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  if (node.type === 'number') {
+    return String(node.value);
+  }
+
+  if (node.type === 'string') {
+    return node.value
+      ? `${preserveTrailingSpace(escape(String(node.value)))}`
+      : '';
+  }
+
+  if (node.type === 'ReactElement') {
+    return formatReactElementNode(node, inline, lvl, options);
+  }
+
+  if (node.type === 'ReactFragment') {
+    return formatReactFragmentNode(node, inline, lvl, options);
+  }
+
+  throw new TypeError(`Unknow format type "${node.type}"`);
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/formatTreeNode.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/formatTreeNode.js"],"names":["jsxStopChars","shouldBeEscaped","s","some","includes","jsxStopChar","escape","preserveTrailingSpace","result","endsWith","replace","startsWith","node","inline","lvl","options","type","String","value","TypeError"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;AAIA,IAAMA,eAAe,CAAC,GAAD,EAAM,GAAN,EAAW,GAAX,EAAgB,GAAhB,CAArB;AACA,IAAMC,kBAAkB,SAAlBA,eAAkB,CAACC,CAAD;AAAA,SACtBF,aAAaG,IAAb,CAAkB;AAAA,WAAeD,EAAEE,QAAF,CAAWC,WAAX,CAAf;AAAA,GAAlB,CADsB;AAAA,CAAxB;;AAGA,IAAMC,SAAS,SAATA,MAAS,CAACJ,CAAD,EAAe;AAC5B,MAAI,CAACD,gBAAgBC,CAAhB,CAAL,EAAyB;AACvB,WAAOA,CAAP;AACD;;AAED,gBAAaA,CAAb;AACD,CAND;;AAQA,IAAMK,wBAAwB,SAAxBA,qBAAwB,CAACL,CAAD,EAAe;AAC3C,MAAIM,SAASN,CAAb;AACA,MAAIM,OAAOC,QAAP,CAAgB,GAAhB,CAAJ,EAA0B;AACxBD,aAASA,OAAOE,OAAP,CAAe,cAAf,EAA+B,UAA/B,CAAT;AACD;;AAED,MAAIF,OAAOG,UAAP,CAAkB,GAAlB,CAAJ,EAA4B;AAC1BH,aAASA,OAAOE,OAAP,CAAe,cAAf,EAA+B,UAA/B,CAAT;AACD;;AAED,SAAOF,MAAP;AACD,CAXD;;kBAae,UACbI,IADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AACX,MAAIH,KAAKI,IAAL,KAAc,QAAlB,EAA4B;AAC1B,WAAOC,OAAOL,KAAKM,KAAZ,CAAP;AACD;;AAED,MAAIN,KAAKI,IAAL,KAAc,QAAlB,EAA4B;AAC1B,WAAOJ,KAAKM,KAAL,QACAX,sBAAsBD,OAAOW,OAAOL,KAAKM,KAAZ,CAAP,CAAtB,CADA,GAEH,EAFJ;AAGD;;AAED,MAAIN,KAAKI,IAAL,KAAc,cAAlB,EAAkC;AAChC,WAAO,sCAAuBJ,IAAvB,EAA6BC,MAA7B,EAAqCC,GAArC,EAA0CC,OAA1C,CAAP;AACD;;AAED,MAAIH,KAAKI,IAAL,KAAc,eAAlB,EAAmC;AACjC,WAAO,uCAAwBJ,IAAxB,EAA8BC,MAA9B,EAAsCC,GAAtC,EAA2CC,OAA3C,CAAP;AACD;;AAED,QAAM,IAAII,SAAJ,0BAAqCP,KAAKI,IAA1C,OAAN;AACD,C","file":"formatTreeNode.js","sourcesContent":["/* @flow */\n\nimport formatReactElementNode from './formatReactElementNode';\nimport formatReactFragmentNode from './formatReactFragmentNode';\nimport type { Options } from './../options';\nimport type { TreeNode } from './../tree';\n\nconst jsxStopChars = ['<', '>', '{', '}'];\nconst shouldBeEscaped = (s: string) =>\n  jsxStopChars.some(jsxStopChar => s.includes(jsxStopChar));\n\nconst escape = (s: string) => {\n  if (!shouldBeEscaped(s)) {\n    return s;\n  }\n\n  return `{\\`${s}\\`}`;\n};\n\nconst preserveTrailingSpace = (s: string) => {\n  let result = s;\n  if (result.endsWith(' ')) {\n    result = result.replace(/^(\\S*)(\\s*)$/, \"$1{'$2'}\");\n  }\n\n  if (result.startsWith(' ')) {\n    result = result.replace(/^(\\s*)(\\S*)$/, \"{'$1'}$2\");\n  }\n\n  return result;\n};\n\nexport default (\n  node: TreeNode,\n  inline: boolean,\n  lvl: number,\n  options: Options\n): string => {\n  if (node.type === 'number') {\n    return String(node.value);\n  }\n\n  if (node.type === 'string') {\n    return node.value\n      ? `${preserveTrailingSpace(escape(String(node.value)))}`\n      : '';\n  }\n\n  if (node.type === 'ReactElement') {\n    return formatReactElementNode(node, inline, lvl, options);\n  }\n\n  if (node.type === 'ReactFragment') {\n    return formatReactFragmentNode(node, inline, lvl, options);\n  }\n\n  throw new TypeError(`Unknow format type \"${node.type}\"`);\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js
@@ -0,0 +1,34 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _tree = require("./../tree");
+
+exports.default = function(previousNodes, currentNode) {
+  var nodes = previousNodes.slice(
+    0,
+    previousNodes.length > 0 ? previousNodes.length - 1 : 0
+  );
+  var previousNode = previousNodes[previousNodes.length - 1];
+
+  if (
+    previousNode &&
+    (currentNode.type === "string" || currentNode.type === "number") &&
+    (previousNode.type === "string" || previousNode.type === "number")
+  ) {
+    nodes.push(
+      (0, _tree.createStringTreeNode)(
+        String(previousNode.value) + String(currentNode.value)
+      )
+    );
+  } else {
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
+
+    nodes.push(currentNode);
+  }
+
+  return nodes;
+};
+//# sourceMappingURL=mergeSiblingPlainStringChildrenReducer.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.flow
@@ -0,0 +1,35 @@
+/* @flow */
+
+import { createStringTreeNode } from './../tree';
+import type { TreeNode } from './../tree';
+
+export default (
+  previousNodes: TreeNode[],
+  currentNode: TreeNode
+): TreeNode[] => {
+  const nodes = previousNodes.slice(
+    0,
+    previousNodes.length > 0 ? previousNodes.length - 1 : 0
+  );
+  const previousNode = previousNodes[previousNodes.length - 1];
+
+  if (
+    previousNode &&
+    (currentNode.type === 'string' || currentNode.type === 'number') &&
+    (previousNode.type === 'string' || previousNode.type === 'number')
+  ) {
+    nodes.push(
+      createStringTreeNode(
+        String(previousNode.value) + String(currentNode.value)
+      )
+    );
+  } else {
+    if (previousNode) {
+      nodes.push(previousNode);
+    }
+
+    nodes.push(currentNode);
+  }
+
+  return nodes;
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/mergeSiblingPlainStringChildrenReducer.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/mergeSiblingPlainStringChildrenReducer.js"],"names":["previousNodes","currentNode","nodes","slice","length","previousNode","type","push","String","value"],"mappings":";;;;;;AAEA;;kBAGe,UACbA,aADa,EAEbC,WAFa,EAGE;AACf,MAAMC,QAAQF,cAAcG,KAAd,CACZ,CADY,EAEZH,cAAcI,MAAd,GAAuB,CAAvB,GAA2BJ,cAAcI,MAAd,GAAuB,CAAlD,GAAsD,CAF1C,CAAd;AAIA,MAAMC,eAAeL,cAAcA,cAAcI,MAAd,GAAuB,CAArC,CAArB;;AAEA,MACEC,iBACCJ,YAAYK,IAAZ,KAAqB,QAArB,IAAiCL,YAAYK,IAAZ,KAAqB,QADvD,MAECD,aAAaC,IAAb,KAAsB,QAAtB,IAAkCD,aAAaC,IAAb,KAAsB,QAFzD,CADF,EAIE;AACAJ,UAAMK,IAAN,CACE,gCACEC,OAAOH,aAAaI,KAApB,IAA6BD,OAAOP,YAAYQ,KAAnB,CAD/B,CADF;AAKD,GAVD,MAUO;AACL,QAAIJ,YAAJ,EAAkB;AAChBH,YAAMK,IAAN,CAAWF,YAAX;AACD;;AAEDH,UAAMK,IAAN,CAAWN,WAAX;AACD;;AAED,SAAOC,KAAP;AACD,C","file":"mergeSiblingPlainStringChildrenReducer.js","sourcesContent":["/* @flow */\n\nimport { createStringTreeNode } from './../tree';\nimport type { TreeNode } from './../tree';\n\nexport default (\n  previousNodes: TreeNode[],\n  currentNode: TreeNode\n): TreeNode[] => {\n  const nodes = previousNodes.slice(\n    0,\n    previousNodes.length > 0 ? previousNodes.length - 1 : 0\n  );\n  const previousNode = previousNodes[previousNodes.length - 1];\n\n  if (\n    previousNode &&\n    (currentNode.type === 'string' || currentNode.type === 'number') &&\n    (previousNode.type === 'string' || previousNode.type === 'number')\n  ) {\n    nodes.push(\n      createStringTreeNode(\n        String(previousNode.value) + String(currentNode.value)\n      )\n    );\n  } else {\n    if (previousNode) {\n      nodes.push(previousNode);\n    }\n\n    nodes.push(currentNode);\n  }\n\n  return nodes;\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js
@@ -0,0 +1,24 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(sortProps) {
+  return function(a, b) {
+    if (a === b) {
+      return 0;
+    }
+
+    if (["key", "ref"].includes(a)) {
+      return -1;
+    } else if (["key", "ref"].includes(b)) {
+      return 1;
+    }
+
+    if (!sortProps) {
+      return 0;
+    }
+
+    return a < b ? -1 : 1;
+  };
+};
+//# sourceMappingURL=propNameSorter.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.flow
@@ -0,0 +1,19 @@
+/* @flow */
+
+export default (sortProps: boolean) => (a: string, b: string): -1 | 0 | 1 => {
+  if (a === b) {
+    return 0;
+  }
+
+  if (['key', 'ref'].includes(a)) {
+    return -1;
+  } else if (['key', 'ref'].includes(b)) {
+    return 1;
+  }
+
+  if (!sortProps) {
+    return 0;
+  }
+
+  return a < b ? -1 : 1;
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/propNameSorter.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/propNameSorter.js"],"names":["sortProps","a","b","includes"],"mappings":";;;;;;kBAEe,UAACA,SAAD;AAAA,SAAwB,UAACC,CAAD,EAAYC,CAAZ,EAAsC;AAC3E,QAAID,MAAMC,CAAV,EAAa;AACX,aAAO,CAAP;AACD;;AAED,QAAI,CAAC,KAAD,EAAQ,KAAR,EAAeC,QAAf,CAAwBF,CAAxB,CAAJ,EAAgC;AAC9B,aAAO,CAAC,CAAR;AACD,KAFD,MAEO,IAAI,CAAC,KAAD,EAAQ,KAAR,EAAeE,QAAf,CAAwBD,CAAxB,CAAJ,EAAgC;AACrC,aAAO,CAAP;AACD;;AAED,QAAI,CAACF,SAAL,EAAgB;AACd,aAAO,CAAP;AACD;;AAED,WAAOC,IAAIC,CAAJ,GAAQ,CAAC,CAAT,GAAa,CAApB;AACD,GAhBc;AAAA,C","file":"propNameSorter.js","sourcesContent":["/* @flow */\n\nexport default (sortProps: boolean) => (a: string, b: string): -1 | 0 | 1 => {\n  if (a === b) {\n    return 0;\n  }\n\n  if (['key', 'ref'].includes(a)) {\n    return -1;\n  } else if (['key', 'ref'].includes(b)) {\n    return 1;\n  }\n\n  if (!sortProps) {\n    return 0;\n  }\n\n  return a < b ? -1 : 1;\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js
@@ -0,0 +1,48 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+exports.default = sortObject;
+function sortObject(value) {
+  // return non-object value as is
+  if (
+    value === null ||
+    (typeof value === "undefined" ? "undefined" : _typeof(value)) !== "object"
+  ) {
+    return value;
+  }
+
+  // return date and regexp values as is
+  if (value instanceof Date || value instanceof RegExp) {
+    return value;
+  }
+
+  // make a copy of array with each item passed through sortObject()
+  if (Array.isArray(value)) {
+    return value.map(sortObject);
+  }
+
+  // make a copy of object with key sorted
+  return Object.keys(value)
+    .sort()
+    .reduce(function(result, key) {
+      // eslint-disable-next-line no-param-reassign
+      result[key] = sortObject(value[key]);
+      return result;
+    }, {});
+}
+//# sourceMappingURL=sortObject.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.flow
@@ -0,0 +1,27 @@
+/* @flow */
+
+export default function sortObject(value: any): any {
+  // return non-object value as is
+  if (value === null || typeof value !== 'object') {
+    return value;
+  }
+
+  // return date and regexp values as is
+  if (value instanceof Date || value instanceof RegExp) {
+    return value;
+  }
+
+  // make a copy of array with each item passed through sortObject()
+  if (Array.isArray(value)) {
+    return value.map(sortObject);
+  }
+
+  // make a copy of object with key sorted
+  return Object.keys(value)
+    .sort()
+    .reduce((result, key) => {
+      // eslint-disable-next-line no-param-reassign
+      result[key] = sortObject(value[key]);
+      return result;
+    }, {});
+}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/sortObject.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/sortObject.js"],"names":["sortObject","value","Date","RegExp","Array","isArray","map","Object","keys","sort","reduce","result","key"],"mappings":";;;;;;;;kBAEwBA,U;AAAT,SAASA,UAAT,CAAoBC,KAApB,EAAqC;AAClD;AACA,MAAIA,UAAU,IAAV,IAAkB,QAAOA,KAAP,yCAAOA,KAAP,OAAiB,QAAvC,EAAiD;AAC/C,WAAOA,KAAP;AACD;;AAED;AACA,MAAIA,iBAAiBC,IAAjB,IAAyBD,iBAAiBE,MAA9C,EAAsD;AACpD,WAAOF,KAAP;AACD;;AAED;AACA,MAAIG,MAAMC,OAAN,CAAcJ,KAAd,CAAJ,EAA0B;AACxB,WAAOA,MAAMK,GAAN,CAAUN,UAAV,CAAP;AACD;;AAED;AACA,SAAOO,OAAOC,IAAP,CAAYP,KAAZ,EACJQ,IADI,GAEJC,MAFI,CAEG,UAACC,MAAD,EAASC,GAAT,EAAiB;AACvB;AACAD,WAAOC,GAAP,IAAcZ,WAAWC,MAAMW,GAAN,CAAX,CAAd;AACA,WAAOD,MAAP;AACD,GANI,EAMF,EANE,CAAP;AAOD","file":"sortObject.js","sourcesContent":["/* @flow */\n\nexport default function sortObject(value: any): any {\n  // return non-object value as is\n  if (value === null || typeof value !== 'object') {\n    return value;\n  }\n\n  // return date and regexp values as is\n  if (value instanceof Date || value instanceof RegExp) {\n    return value;\n  }\n\n  // make a copy of array with each item passed through sortObject()\n  if (Array.isArray(value)) {\n    return value.map(sortObject);\n  }\n\n  // make a copy of object with key sorted\n  return Object.keys(value)\n    .sort()\n    .reduce((result, key) => {\n      // eslint-disable-next-line no-param-reassign\n      result[key] = sortObject(value[key]);\n      return result;\n    }, {});\n}\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js
@@ -0,0 +1,12 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+exports.default = function(times, tabStop) {
+  if (times === 0) {
+    return "";
+  }
+
+  return new Array(times * tabStop).fill(" ").join("");
+};
+//# sourceMappingURL=spacer.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.flow
@@ -0,0 +1,9 @@
+/* @flow */
+
+export default (times: number, tabStop: number): string => {
+  if (times === 0) {
+    return '';
+  }
+
+  return new Array(times * tabStop).fill(' ').join('');
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/formatter/spacer.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/formatter/spacer.js"],"names":["times","tabStop","Array","fill","join"],"mappings":";;;;;;kBAEe,UAACA,KAAD,EAAgBC,OAAhB,EAA4C;AACzD,MAAID,UAAU,CAAd,EAAiB;AACf,WAAO,EAAP;AACD;;AAED,SAAO,IAAIE,KAAJ,CAAUF,QAAQC,OAAlB,EAA2BE,IAA3B,CAAgC,GAAhC,EAAqCC,IAArC,CAA0C,EAA1C,CAAP;AACD,C","file":"spacer.js","sourcesContent":["/* @flow */\n\nexport default (times: number, tabStop: number): string => {\n  if (times === 0) {\n    return '';\n  }\n\n  return new Array(times * tabStop).fill(' ').join('');\n};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/index.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/index.js
@@ -0,0 +1,66 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _formatTree = require("./formatter/formatTree");
+
+var _formatTree2 = _interopRequireDefault(_formatTree);
+
+var _parseReactElement = require("./parser/parseReactElement");
+
+var _parseReactElement2 = _interopRequireDefault(_parseReactElement);
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var reactElementToJsxString = function reactElementToJsxString(element) {
+  var _ref =
+      arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$filterProps = _ref.filterProps,
+    filterProps = _ref$filterProps === undefined ? [] : _ref$filterProps,
+    _ref$showDefaultProps = _ref.showDefaultProps,
+    showDefaultProps =
+      _ref$showDefaultProps === undefined ? true : _ref$showDefaultProps,
+    _ref$showFunctions = _ref.showFunctions,
+    showFunctions =
+      _ref$showFunctions === undefined ? false : _ref$showFunctions,
+    functionValue = _ref.functionValue,
+    _ref$tabStop = _ref.tabStop,
+    tabStop = _ref$tabStop === undefined ? 2 : _ref$tabStop,
+    _ref$useBooleanShorth = _ref.useBooleanShorthandSyntax,
+    useBooleanShorthandSyntax =
+      _ref$useBooleanShorth === undefined ? true : _ref$useBooleanShorth,
+    _ref$useFragmentShort = _ref.useFragmentShortSyntax,
+    useFragmentShortSyntax =
+      _ref$useFragmentShort === undefined ? true : _ref$useFragmentShort,
+    _ref$sortProps = _ref.sortProps,
+    sortProps = _ref$sortProps === undefined ? true : _ref$sortProps,
+    maxInlineAttributesLineLength = _ref.maxInlineAttributesLineLength,
+    displayName = _ref.displayName;
+
+  if (!element) {
+    throw new Error("react-element-to-jsx-string: Expected a ReactElement");
+  }
+
+  var options = {
+    filterProps: filterProps,
+    showDefaultProps: showDefaultProps,
+    showFunctions: showFunctions,
+    functionValue: functionValue,
+    tabStop: tabStop,
+    useBooleanShorthandSyntax: useBooleanShorthandSyntax,
+    useFragmentShortSyntax: useFragmentShortSyntax,
+    sortProps: sortProps,
+    maxInlineAttributesLineLength: maxInlineAttributesLineLength,
+    displayName: displayName,
+  };
+
+  return (0, _formatTree2.default)(
+    (0, _parseReactElement2.default)(element, options),
+    options
+  );
+};
+
+exports.default = reactElementToJsxString;
+//# sourceMappingURL=index.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/index.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/index.js.flow
@@ -0,0 +1,43 @@
+/* @flow */
+
+import formatTree from './formatter/formatTree';
+import parseReactElement from './parser/parseReactElement';
+import type { Element as ReactElement } from 'react';
+import type { Options } from './options';
+
+const reactElementToJsxString = (
+  element: ReactElement<any>,
+  {
+    filterProps = [],
+    showDefaultProps = true,
+    showFunctions = false,
+    functionValue,
+    tabStop = 2,
+    useBooleanShorthandSyntax = true,
+    useFragmentShortSyntax = true,
+    sortProps = true,
+    maxInlineAttributesLineLength,
+    displayName,
+  }: Options = {}
+) => {
+  if (!element) {
+    throw new Error('react-element-to-jsx-string: Expected a ReactElement');
+  }
+
+  const options = {
+    filterProps,
+    showDefaultProps,
+    showFunctions,
+    functionValue,
+    tabStop,
+    useBooleanShorthandSyntax,
+    useFragmentShortSyntax,
+    sortProps,
+    maxInlineAttributesLineLength,
+    displayName,
+  };
+
+  return formatTree(parseReactElement(element, options), options);
+};
+
+export default reactElementToJsxString;
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/index.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/index.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.js"],"names":["reactElementToJsxString","element","filterProps","showDefaultProps","showFunctions","functionValue","tabStop","useBooleanShorthandSyntax","useFragmentShortSyntax","sortProps","maxInlineAttributesLineLength","displayName","Error","options"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;AAIA,IAAMA,0BAA0B,SAA1BA,uBAA0B,CAC9BC,OAD8B,EAc3B;AAAA,iFADU,EACV;AAAA,8BAXDC,WAWC;AAAA,MAXDA,WAWC,oCAXa,EAWb;AAAA,mCAVDC,gBAUC;AAAA,MAVDA,gBAUC,yCAVkB,IAUlB;AAAA,gCATDC,aASC;AAAA,MATDA,aASC,sCATe,KASf;AAAA,MARDC,aAQC,QARDA,aAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,gCAPS,CAOT;AAAA,mCANDC,yBAMC;AAAA,MANDA,yBAMC,yCAN2B,IAM3B;AAAA,mCALDC,sBAKC;AAAA,MALDA,sBAKC,yCALwB,IAKxB;AAAA,4BAJDC,SAIC;AAAA,MAJDA,SAIC,kCAJW,IAIX;AAAA,MAHDC,6BAGC,QAHDA,6BAGC;AAAA,MAFDC,WAEC,QAFDA,WAEC;;AACH,MAAI,CAACV,OAAL,EAAc;AACZ,UAAM,IAAIW,KAAJ,CAAU,sDAAV,CAAN;AACD;;AAED,MAAMC,UAAU;AACdX,4BADc;AAEdC,sCAFc;AAGdC,gCAHc;AAIdC,gCAJc;AAKdC,oBALc;AAMdC,wDANc;AAOdC,kDAPc;AAQdC,wBARc;AASdC,gEATc;AAUdC;AAVc,GAAhB;;AAaA,SAAO,0BAAW,iCAAkBV,OAAlB,EAA2BY,OAA3B,CAAX,EAAgDA,OAAhD,CAAP;AACD,CAjCD;;kBAmCeb,uB","file":"index.js","sourcesContent":["/* @flow */\n\nimport formatTree from './formatter/formatTree';\nimport parseReactElement from './parser/parseReactElement';\nimport type { Element as ReactElement } from 'react';\nimport type { Options } from './options';\n\nconst reactElementToJsxString = (\n  element: ReactElement<any>,\n  {\n    filterProps = [],\n    showDefaultProps = true,\n    showFunctions = false,\n    functionValue,\n    tabStop = 2,\n    useBooleanShorthandSyntax = true,\n    useFragmentShortSyntax = true,\n    sortProps = true,\n    maxInlineAttributesLineLength,\n    displayName,\n  }: Options = {}\n) => {\n  if (!element) {\n    throw new Error('react-element-to-jsx-string: Expected a ReactElement');\n  }\n\n  const options = {\n    filterProps,\n    showDefaultProps,\n    showFunctions,\n    functionValue,\n    tabStop,\n    useBooleanShorthandSyntax,\n    useFragmentShortSyntax,\n    sortProps,\n    maxInlineAttributesLineLength,\n    displayName,\n  };\n\n  return formatTree(parseReactElement(element, options), options);\n};\n\nexport default reactElementToJsxString;\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/options.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/options.js
@@ -0,0 +1,20 @@
+var _react = require("react");
+
+var React = _interopRequireWildcard(_react);
+
+function _interopRequireWildcard(obj) {
+  if (obj && obj.__esModule) {
+    return obj;
+  } else {
+    var newObj = {};
+    if (obj != null) {
+      for (var key in obj) {
+        if (Object.prototype.hasOwnProperty.call(obj, key))
+          newObj[key] = obj[key];
+      }
+    }
+    newObj.default = obj;
+    return newObj;
+  }
+}
+//# sourceMappingURL=options.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/options.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/options.js.flow
@@ -0,0 +1,17 @@
+/* @flow */
+
+import * as React from 'react';
+
+export type Options = {|
+  filterProps: string[],
+  showDefaultProps: boolean,
+  showFunctions: boolean,
+  functionValue: Function,
+  tabStop: number,
+  useBooleanShorthandSyntax: boolean,
+  useFragmentShortSyntax: boolean,
+  sortProps: boolean,
+
+  maxInlineAttributesLineLength?: number,
+  displayName?: (element: React.Element<*>) => string,
+|};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/options.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/options.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/options.js"],"names":["React"],"mappings":";;AAEA;;IAAYA,K","file":"options.js","sourcesContent":["/* @flow */\n\nimport * as React from 'react';\n\nexport type Options = {|\n  filterProps: string[],\n  showDefaultProps: boolean,\n  showFunctions: boolean,\n  functionValue: Function,\n  tabStop: number,\n  useBooleanShorthandSyntax: boolean,\n  useFragmentShortSyntax: boolean,\n  sortProps: boolean,\n\n  maxInlineAttributesLineLength?: number,\n  displayName?: (element: React.Element<*>) => string,\n|};\n"]}
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js
@@ -0,0 +1,120 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var _typeof =
+  typeof Symbol === "function" && typeof Symbol.iterator === "symbol"
+    ? function(obj) {
+        return typeof obj;
+      }
+    : function(obj) {
+        return obj &&
+          typeof Symbol === "function" &&
+          obj.constructor === Symbol &&
+          obj !== Symbol.prototype
+          ? "symbol"
+          : typeof obj;
+      };
+
+var _react = require("react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _tree = require("./../tree");
+
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : { default: obj };
+}
+
+var supportFragment = Boolean(_react.Fragment);
+
+var getReactElementDisplayName = function getReactElementDisplayName(element) {
+  return (
+    element.type.displayName ||
+    element.type.name || // function name
+    (typeof element.type === "function" // function without a name, you should provide one
+      ? "No Display Name"
+      : element.type)
+  );
+};
+
+var noChildren = function noChildren(propsValue, propName) {
+  return propName !== "children";
+};
+
+var onlyMeaningfulChildren = function onlyMeaningfulChildren(children) {
+  return (
+    children !== true &&
+    children !== false &&
+    children !== null &&
+    children !== ""
+  );
+};
+
+var filterProps = function filterProps(originalProps, cb) {
+  var filteredProps = {};
+
+  Object.keys(originalProps)
+    .filter(function(key) {
+      return cb(originalProps[key], key);
+    })
+    .forEach(function(key) {
+      return (filteredProps[key] = originalProps[key]);
+    });
+
+  return filteredProps;
+};
+
+var parseReactElement = function parseReactElement(element, options) {
+  var _options$displayName = options.displayName,
+    displayNameFn =
+      _options$displayName === undefined
+        ? getReactElementDisplayName
+        : _options$displayName;
+
+  if (typeof element === "string") {
+    return (0, _tree.createStringTreeNode)(element);
+  } else if (typeof element === "number") {
+    return (0, _tree.createNumberTreeNode)(element);
+  } else if (!_react2.default.isValidElement(element)) {
+    throw new Error(
+      "react-element-to-jsx-string: Expected a React.Element, got `" +
+        (typeof element === "undefined" ? "undefined" : _typeof(element)) +
+        "`"
+    );
+  }
+
+  var displayName = displayNameFn(element);
+
+  var props = filterProps(element.props, noChildren);
+  if (element.ref !== null) {
+    props.ref = element.ref;
+  }
+
+  var key = element.key;
+  if (typeof key === "string" && key.search(/^\./)) {
+    // React automatically add key=".X" when there are some children
+    props.key = key;
+  }
+
+  var defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
+  var childrens = _react2.default.Children.toArray(element.props.children)
+    .filter(onlyMeaningfulChildren)
+    .map(function(child) {
+      return parseReactElement(child, options);
+    });
+
+  if (supportFragment && element.type === _react.Fragment) {
+    return (0, _tree.createReactFragmentTreeNode)(key, childrens);
+  }
+
+  return (0, _tree.createReactElementTreeNode)(
+    displayName,
+    props,
+    defaultProps,
+    childrens
+  );
+};
+
+exports.default = parseReactElement;
+//# sourceMappingURL=parseReactElement.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js.flow
@@ -0,0 +1,86 @@
+/* @flow */
+
+import React, { type Element as ReactElement, Fragment } from 'react';
+import type { Options } from './../options';
+import {
+  createStringTreeNode,
+  createNumberTreeNode,
+  createReactElementTreeNode,
+  createReactFragmentTreeNode,
+} from './../tree';
+import type { TreeNode } from './../tree';
+
+const supportFragment = Boolean(Fragment);
+
+const getReactElementDisplayName = (element: ReactElement<*>): string =>
+  element.type.displayName ||
+  element.type.name || // function name
+  (typeof element.type === 'function' // function without a name, you should provide one
+    ? 'No Display Name'
+    : element.type);
+
+const noChildren = (propsValue, propName) => propName !== 'children';
+
+const onlyMeaningfulChildren = (children): boolean =>
+  children !== true &&
+  children !== false &&
+  children !== null &&
+  children !== '';
+
+const filterProps = (originalProps: {}, cb: (any, string) => boolean) => {
+  const filteredProps = {};
+
+  Object.keys(originalProps)
+    .filter(key => cb(originalProps[key], key))
+    .forEach(key => (filteredProps[key] = originalProps[key]));
+
+  return filteredProps;
+};
+
+const parseReactElement = (
+  element: ReactElement<*> | string | number,
+  options: Options
+): TreeNode => {
+  const { displayName: displayNameFn = getReactElementDisplayName } = options;
+
+  if (typeof element === 'string') {
+    return createStringTreeNode(element);
+  } else if (typeof element === 'number') {
+    return createNumberTreeNode(element);
+  } else if (!React.isValidElement(element)) {
+    throw new Error(
+      `react-element-to-jsx-string: Expected a React.Element, got \`${typeof element}\``
+    );
+  }
+
+  const displayName = displayNameFn(element);
+
+  const props = filterProps(element.props, noChildren);
+  if (element.ref !== null) {
+    props.ref = element.ref;
+  }
+
+  const key = element.key;
+  if (typeof key === 'string' && key.search(/^\./)) {
+    // React automatically add key=".X" when there are some children
+    props.key = key;
+  }
+
+  const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
+  const childrens = React.Children.toArray(element.props.children)
+    .filter(onlyMeaningfulChildren)
+    .map(child => parseReactElement(child, options));
+
+  if (supportFragment && element.type === Fragment) {
+    return createReactFragmentTreeNode(key, childrens);
+  }
+
+  return createReactElementTreeNode(
+    displayName,
+    props,
+    defaultProps,
+    childrens
+  );
+};
+
+export default parseReactElement;
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/parser/parseReactElement.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/stringifyObject.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/stringifyObject.js
@@ -0,0 +1,167 @@
+// https://github.com/mightyiam/get-own-enumerable-property-symbols/blob/master/src/index.ts
+const getOwnEnumPropSymbols = (object: Object): symbol[] =>
+  Object.getOwnPropertySymbols(object).filter(
+    (keySymbol): boolean => object.propertyIsEnumerable(keySymbol)
+  );
+
+// https://github.com/sindresorhus/is-regexp/blob/master/index.js
+const isRegexp = input =>
+  Object.prototype.toString.call(input) === "[object RegExp]";
+
+// https://github.com/sindresorhus/is-obj/blob/master/index.js
+const isObj = function(x) {
+  var type = typeof x;
+  return x !== null && (type === "object" || type === "function");
+};
+
+module.exports = (val, opts, pad) => {
+  const seen = [];
+
+  return (function stringify(val, opts, pad) {
+    opts = opts || {};
+    opts.indent = opts.indent || "\t";
+    pad = pad || "";
+
+    let tokens;
+
+    if (opts.inlineCharacterLimit === undefined) {
+      tokens = {
+        newLine: "\n",
+        newLineOrSpace: "\n",
+        pad,
+        indent: pad + opts.indent,
+      };
+    } else {
+      tokens = {
+        newLine: "@@__STRINGIFY_OBJECT_NEW_LINE__@@",
+        newLineOrSpace: "@@__STRINGIFY_OBJECT_NEW_LINE_OR_SPACE__@@",
+        pad: "@@__STRINGIFY_OBJECT_PAD__@@",
+        indent: "@@__STRINGIFY_OBJECT_INDENT__@@",
+      };
+    }
+
+    const expandWhiteSpace = string => {
+      if (opts.inlineCharacterLimit === undefined) {
+        return string;
+      }
+
+      const 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 <= opts.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 + opts.indent);
+    };
+
+    if (seen.indexOf(val) !== -1) {
+      return '"[Circular]"';
+    }
+
+    if (
+      val === null ||
+      val === undefined ||
+      typeof val === "number" ||
+      typeof val === "boolean" ||
+      typeof val === "function" ||
+      typeof val === "symbol" ||
+      isRegexp(val)
+    ) {
+      return String(val);
+    }
+
+    if (val instanceof Date) {
+      return `new Date('${val.toISOString()}')`;
+    }
+
+    if (Array.isArray(val)) {
+      if (val.length === 0) {
+        return "[]";
+      }
+
+      seen.push(val);
+
+      const ret =
+        "[" +
+        tokens.newLine +
+        val
+          .map((el, i) => {
+            const eol =
+              val.length - 1 === i
+                ? tokens.newLine
+                : "," + tokens.newLineOrSpace;
+            let value = stringify(el, opts, pad + opts.indent);
+            if (opts.transform) {
+              value = opts.transform(val, i, value);
+            }
+            return tokens.indent + value + eol;
+          })
+          .join("") +
+        tokens.pad +
+        "]";
+
+      seen.pop(val);
+
+      return expandWhiteSpace(ret);
+    }
+
+    if (isObj(val)) {
+      const objKeys = Object.keys(val).concat(getOwnEnumPropSymbols(val));
+
+      if (objKeys.length === 0) {
+        return "{}";
+      }
+
+      seen.push(val);
+
+      const ret =
+        "{" +
+        tokens.newLine +
+        objKeys
+          .map((el, i) => {
+            if (opts.filter && !opts.filter(val, el)) {
+              return "";
+            }
+
+            const eol =
+              objKeys.length - 1 === i
+                ? tokens.newLine
+                : "," + tokens.newLineOrSpace;
+            const isSymbol = typeof el === "symbol";
+            const isClassic = !isSymbol && /^[a-z$_][a-z$_0-9]*$/i.test(el);
+            const key = isSymbol || isClassic ? el : stringify(el, opts);
+            let value = stringify(val[el], opts, pad + opts.indent);
+            if (opts.transform) {
+              value = opts.transform(val, el, value);
+            }
+            return tokens.indent + String(key) + ": " + value + eol;
+          })
+          .join("") +
+        tokens.pad +
+        "}";
+
+      seen.pop(val);
+
+      return expandWhiteSpace(ret);
+    }
+
+    val = String(val).replace(/[\r\n]/g, x => (x === "\n" ? "\\n" : "\\r"));
+
+    if (opts.singleQuotes === false) {
+      val = val.replace(/"/g, '\\"');
+      return `"${val}"`;
+    }
+
+    val = val.replace(/\\?'/g, "\\'");
+    return `'${val}'`;
+  })(val, opts, pad);
+};
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js
@@ -0,0 +1,50 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+/* eslint-disable no-use-before-define */
+
+var createStringTreeNode = (exports.createStringTreeNode = function createStringTreeNode( // eslint-disable-line no-unused-vars
+  value
+) {
+  return {
+    type: "string",
+    value: value,
+  };
+});
+
+var createNumberTreeNode = (exports.createNumberTreeNode = function createNumberTreeNode( // eslint-disable-line no-unused-vars
+  value
+) {
+  return {
+    type: "number",
+    value: value,
+  };
+});
+
+var createReactElementTreeNode = (exports.createReactElementTreeNode = function createReactElementTreeNode( // eslint-disable-line no-unused-vars
+  displayName,
+  props,
+  defaultProps,
+  childrens
+) {
+  return {
+    type: "ReactElement",
+    displayName: displayName,
+    props: props,
+    defaultProps: defaultProps,
+    childrens: childrens,
+  };
+});
+
+var createReactFragmentTreeNode = (exports.createReactFragmentTreeNode = function createReactFragmentTreeNode( // eslint-disable-line no-unused-vars
+  key,
+  childrens
+) {
+  return {
+    type: "ReactFragment",
+    key: key,
+    childrens: childrens,
+  };
+});
+//# sourceMappingURL=tree.js.map
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.flow
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.flow
@@ -0,0 +1,69 @@
+/* @flow */
+/* eslint-disable no-use-before-define */
+
+import type { Key } from 'react';
+
+type PropsType = { [key: string]: any };
+type DefaultPropsType = { [key: string]: any };
+
+export type StringTreeNode = {|
+  type: 'string',
+  value: string,
+|};
+
+export type NumberTreeNode = {|
+  type: 'number',
+  value: number,
+|};
+
+export type ReactElementTreeNode = {|
+  type: 'ReactElement',
+  displayName: string,
+  props: PropsType,
+  defaultProps: DefaultPropsType,
+  childrens: TreeNode[],
+|};
+
+export type ReactFragmentTreeNode = {|
+  type: 'ReactFragment',
+  key: ?Key,
+  childrens: TreeNode[],
+|};
+
+export type TreeNode =
+  | StringTreeNode
+  | NumberTreeNode
+  | ReactElementTreeNode
+  | ReactFragmentTreeNode;
+
+export const createStringTreeNode = (value: string): StringTreeNode => ({
+  type: 'string',
+  value,
+});
+
+export const createNumberTreeNode = (value: number): NumberTreeNode => ({
+  type: 'number',
+  value,
+});
+
+export const createReactElementTreeNode = (
+  displayName: string,
+  props: PropsType,
+  defaultProps: DefaultPropsType,
+  childrens: TreeNode[]
+): ReactElementTreeNode => ({
+  type: 'ReactElement',
+  displayName,
+  props,
+  defaultProps,
+  childrens,
+});
+
+export const createReactFragmentTreeNode = (
+  key: ?Key,
+  childrens: TreeNode[]
+): ReactFragmentTreeNode => ({
+  type: 'ReactFragment',
+  key,
+  childrens,
+});
--- a/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.map
+++ b/resources/js/ComponentDemo/react-element-to-jsx-string/tree.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tree.js"],"names":["createStringTreeNode","value","type","createNumberTreeNode","createReactElementTreeNode","displayName","props","defaultProps","childrens","createReactFragmentTreeNode","key"],"mappings":";;;;;;AACA;;AAqCO,IAAMA,sDAAuB,SAAvBA,oBAAuB,CAACC,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAME,sDAAuB,SAAvBA,oBAAuB,CAACF,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAMG,kEAA6B,SAA7BA,0BAA6B,CACxCC,WADwC,EAExCC,KAFwC,EAGxCC,YAHwC,EAIxCC,SAJwC;AAAA,SAKd;AAC1BN,UAAM,cADoB;AAE1BG,4BAF0B;AAG1BC,gBAH0B;AAI1BC,8BAJ0B;AAK1BC;AAL0B,GALc;AAAA,CAAnC;;AAaA,IAAMC,oEAA8B,SAA9BA,2BAA8B,CACzCC,GADyC,EAEzCF,SAFyC;AAAA,SAGd;AAC3BN,UAAM,eADqB;AAE3BQ,YAF2B;AAG3BF;AAH2B,GAHc;AAAA,CAApC","file":"tree.js","sourcesContent":["/* @flow */\n/* eslint-disable no-use-before-define */\n\nimport type { Key } from 'react';\n\ntype PropsType = { [key: string]: any };\ntype DefaultPropsType = { [key: string]: any };\n\nexport type StringTreeNode = {|\n  type: 'string',\n  value: string,\n|};\n\nexport type NumberTreeNode = {|\n  type: 'number',\n  value: number,\n|};\n\nexport type ReactElementTreeNode = {|\n  type: 'ReactElement',\n  displayName: string,\n  props: PropsType,\n  defaultProps: DefaultPropsType,\n  childrens: TreeNode[],\n|};\n\nexport type ReactFragmentTreeNode = {|\n  type: 'ReactFragment',\n  key: ?Key,\n  childrens: TreeNode[],\n|};\n\nexport type TreeNode =\n  | StringTreeNode\n  | NumberTreeNode\n  | ReactElementTreeNode\n  | ReactFragmentTreeNode;\n\nexport const createStringTreeNode = (value: string): StringTreeNode => ({\n  type: 'string',\n  value,\n});\n\nexport const createNumberTreeNode = (value: number): NumberTreeNode => ({\n  type: 'number',\n  value,\n});\n\nexport const createReactElementTreeNode = (\n  displayName: string,\n  props: PropsType,\n  defaultProps: DefaultPropsType,\n  childrens: TreeNode[]\n): ReactElementTreeNode => ({\n  type: 'ReactElement',\n  displayName,\n  props,\n  defaultProps,\n  childrens,\n});\n\nexport const createReactFragmentTreeNode = (\n  key: ?Key,\n  childrens: TreeNode[]\n): ReactFragmentTreeNode => ({\n  type: 'ReactFragment',\n  key,\n  childrens,\n});\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["../src/AnonymousStatelessComponent.js"],"names":["props","children"],"mappings":";;;;;;kBAGe,UAASA,KAAT,EAAgB;AAAA,MACrBC,QADqB,GACRD,KADQ,CACrBC,QADqB,EACD;;AAC5B,SAAO;AAAA;AAAA;AAAMA;AAAN,GAAP;AACD,C;;AAND","file":"AnonymousStatelessComponent.js","sourcesContent":["import React from 'react';\n\n// eslint-disable-next-line react/display-name\nexport default function(props) {\n const { children } = props; // eslint-disable-line react/prop-types\n return <div>{children}</div>;\n}\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["../../src/formatter/formatComplexDataStructure.js"],"names":["noRefCheck","value","inline","lvl","options","normalizedValue","stringifiedValue","transform","currentObj","prop","originalResult","currentValue","replace","tabStop"],"mappings":";;;;;;AAEA;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;AACA;;;;;;AAGA,SAASA,UAAT,GAAsB,CAAE;;kBAET,UACbC,KADa,EAEbC,MAFa,EAGbC,GAHa,EAIbC,OAJa,EAKF;AACX,MAAMC,kBAAkB,0BAAWJ,KAAX,CAAxB;;AAEA,MAAMK,mBAAmB,+BAAUD,eAAV,EAA2B;AAClDE,eAAW,mBAACC,UAAD,EAAaC,IAAb,EAAmBC,cAAnB,EAAsC;AAC/C,UAAMC,eAAeH,WAAWC,IAAX,CAArB;;AAEA,UAAIE,gBAAgB,2BAAeA,YAAf,CAApB,EAAkD;AAChD,eAAO,8BACL,iCAAkBA,YAAlB,EAAgCP,OAAhC,CADK,EAEL,IAFK,EAGLD,GAHK,EAILC,OAJK,CAAP;AAMD;;AAED,UAAI,OAAOO,YAAP,KAAwB,UAA5B,EAAwC;AACtC,eAAOX,UAAP;AACD;;AAED,aAAOU,cAAP;AACD;AAlBiD,GAA3B,CAAzB;;AAqBA,MAAIR,MAAJ,EAAY;AACV,WAAOI,iBACJM,OADI,CACI,MADJ,EACY,GADZ,EAEJA,OAFI,CAEI,KAFJ,EAEW,GAFX,EAGJA,OAHI,CAGI,KAHJ,EAGW,GAHX,EAIJA,OAJI,CAII,MAJJ,EAIY,GAJZ,EAKJA,OALI,CAKI,KALJ,EAKW,GALX,CAAP;AAMD;;AAED;AACA,SAAON,iBACJM,OADI,CACI,KADJ,EACW,sBAAO,CAAP,EAAUR,QAAQS,OAAlB,CADX,EAEJD,OAFI,CAEI,WAFJ,SAEsB,sBAAOT,MAAM,CAAb,EAAgBC,QAAQS,OAAxB,CAFtB,QAAP;AAGD,C","file":"formatComplexDataStructure.js","sourcesContent":["/* @flow */\n\nimport { isValidElement } from 'react';\nimport stringify from '../stringifyObject';\nimport sortObject from './sortObject';\nimport parseReactElement from './../parser/parseReactElement';\nimport formatTreeNode from './formatTreeNode';\nimport spacer from './spacer';\nimport type { Options } from './../options';\n\nfunction noRefCheck() {}\n\nexport default (\n value: Object \| Array<any>,\n inline: boolean,\n lvl: number,\n options: Options\n): string => {\n const normalizedValue = sortObject(value);\n\n const stringifiedValue = stringify(normalizedValue, {\n transform: (currentObj, prop, originalResult) => {\n const currentValue = currentObj[prop];\n\n if (currentValue && isValidElement(currentValue)) {\n return formatTreeNode(\n parseReactElement(currentValue, options),\n true,\n lvl,\n options\n );\n }\n\n if (typeof currentValue === 'function') {\n return noRefCheck;\n }\n\n return originalResult;\n },\n });\n\n if (inline) {\n return stringifiedValue\n .replace(/\\s+/g, ' ')\n .replace(/{ /g, '{')\n .replace(/ }/g, '}')\n .replace(/\\[ /g, '[')\n .replace(/ ]/g, ']');\n }\n\n // Replace tabs with spaces, and add necessary indentation in front of each new line\n return stringifiedValue\n .replace(/\\t/g, spacer(1, options.tabStop))\n .replace(/\\n([^$])/g, `\\n${spacer(lvl + 1, options.tabStop)}$1`);\n};\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["../src/index.js"],"names":["reactElementToJsxString","element","filterProps","showDefaultProps","showFunctions","functionValue","tabStop","useBooleanShorthandSyntax","useFragmentShortSyntax","sortProps","maxInlineAttributesLineLength","displayName","Error","options"],"mappings":";;;;;;AAEA;;;;AACA;;;;;;AAIA,IAAMA,0BAA0B,SAA1BA,uBAA0B,CAC9BC,OAD8B,EAc3B;AAAA,iFADU,EACV;AAAA,8BAXDC,WAWC;AAAA,MAXDA,WAWC,oCAXa,EAWb;AAAA,mCAVDC,gBAUC;AAAA,MAVDA,gBAUC,yCAVkB,IAUlB;AAAA,gCATDC,aASC;AAAA,MATDA,aASC,sCATe,KASf;AAAA,MARDC,aAQC,QARDA,aAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,gCAPS,CAOT;AAAA,mCANDC,yBAMC;AAAA,MANDA,yBAMC,yCAN2B,IAM3B;AAAA,mCALDC,sBAKC;AAAA,MALDA,sBAKC,yCALwB,IAKxB;AAAA,4BAJDC,SAIC;AAAA,MAJDA,SAIC,kCAJW,IAIX;AAAA,MAHDC,6BAGC,QAHDA,6BAGC;AAAA,MAFDC,WAEC,QAFDA,WAEC;;AACH,MAAI,CAACV,OAAL,EAAc;AACZ,UAAM,IAAIW,KAAJ,CAAU,sDAAV,CAAN;AACD;;AAED,MAAMC,UAAU;AACdX,4BADc;AAEdC,sCAFc;AAGdC,gCAHc;AAIdC,gCAJc;AAKdC,oBALc;AAMdC,wDANc;AAOdC,kDAPc;AAQdC,wBARc;AASdC,gEATc;AAUdC;AAVc,GAAhB;;AAaA,SAAO,0BAAW,iCAAkBV,OAAlB,EAA2BY,OAA3B,CAAX,EAAgDA,OAAhD,CAAP;AACD,CAjCD;;kBAmCeb,uB","file":"index.js","sourcesContent":["/* @flow */\n\nimport formatTree from './formatter/formatTree';\nimport parseReactElement from './parser/parseReactElement';\nimport type { Element as ReactElement } from 'react';\nimport type { Options } from './options';\n\nconst reactElementToJsxString = (\n element: ReactElement<any>,\n {\n filterProps = [],\n showDefaultProps = true,\n showFunctions = false,\n functionValue,\n tabStop = 2,\n useBooleanShorthandSyntax = true,\n useFragmentShortSyntax = true,\n sortProps = true,\n maxInlineAttributesLineLength,\n displayName,\n }: Options = {}\n) => {\n if (!element) {\n throw new Error('react-element-to-jsx-string: Expected a ReactElement');\n }\n\n const options = {\n filterProps,\n showDefaultProps,\n showFunctions,\n functionValue,\n tabStop,\n useBooleanShorthandSyntax,\n useFragmentShortSyntax,\n sortProps,\n maxInlineAttributesLineLength,\n displayName,\n };\n\n return formatTree(parseReactElement(element, options), options);\n};\n\nexport default reactElementToJsxString;\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["../src/options.js"],"names":["React"],"mappings":";;AAEA;;IAAYA,K","file":"options.js","sourcesContent":["/* @flow /\n\nimport as React from 'react';\n\nexport type Options = {\|\n filterProps: string[],\n showDefaultProps: boolean,\n showFunctions: boolean,\n functionValue: Function,\n tabStop: number,\n useBooleanShorthandSyntax: boolean,\n useFragmentShortSyntax: boolean,\n sortProps: boolean,\n\n maxInlineAttributesLineLength?: number,\n displayName?: (element: React.Element<*>) => string,\n\|};\n"]}
				`@@ -0,0 +1 @@`
				{"version":3,"sources":["../src/tree.js"],"names":["createStringTreeNode","value","type","createNumberTreeNode","createReactElementTreeNode","displayName","props","defaultProps","childrens","createReactFragmentTreeNode","key"],"mappings":";;;;;;AACA;;AAqCO,IAAMA,sDAAuB,SAAvBA,oBAAuB,CAACC,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAME,sDAAuB,SAAvBA,oBAAuB,CAACF,KAAD;AAAA,SAAoC;AACtEC,UAAM,QADgE;AAEtED;AAFsE,GAApC;AAAA,CAA7B;;AAKA,IAAMG,kEAA6B,SAA7BA,0BAA6B,CACxCC,WADwC,EAExCC,KAFwC,EAGxCC,YAHwC,EAIxCC,SAJwC;AAAA,SAKd;AAC1BN,UAAM,cADoB;AAE1BG,4BAF0B;AAG1BC,gBAH0B;AAI1BC,8BAJ0B;AAK1BC;AAL0B,GALc;AAAA,CAAnC;;AAaA,IAAMC,oEAA8B,SAA9BA,2BAA8B,CACzCC,GADyC,EAEzCF,SAFyC;AAAA,SAGd;AAC3BN,UAAM,eADqB;AAE3BQ,YAF2B;AAG3BF;AAH2B,GAHc;AAAA,CAApC","file":"tree.js","sourcesContent":["/* @flow /\n/ eslint-disable no-use-before-define */\n\nimport type { Key } from 'react';\n\ntype PropsType = { [key: string]: any };\ntype DefaultPropsType = { [key: string]: any };\n\nexport type StringTreeNode = {\|\n type: 'string',\n value: string,\n\|};\n\nexport type NumberTreeNode = {\|\n type: 'number',\n value: number,\n\|};\n\nexport type ReactElementTreeNode = {\|\n type: 'ReactElement',\n displayName: string,\n props: PropsType,\n defaultProps: DefaultPropsType,\n childrens: TreeNode[],\n\|};\n\nexport type ReactFragmentTreeNode = {\|\n type: 'ReactFragment',\n key: ?Key,\n childrens: TreeNode[],\n\|};\n\nexport type TreeNode =\n \| StringTreeNode\n \| NumberTreeNode\n \| ReactElementTreeNode\n \| ReactFragmentTreeNode;\n\nexport const createStringTreeNode = (value: string): StringTreeNode => ({\n type: 'string',\n value,\n});\n\nexport const createNumberTreeNode = (value: number): NumberTreeNode => ({\n type: 'number',\n value,\n});\n\nexport const createReactElementTreeNode = (\n displayName: string,\n props: PropsType,\n defaultProps: DefaultPropsType,\n childrens: TreeNode[]\n): ReactElementTreeNode => ({\n type: 'ReactElement',\n displayName,\n props,\n defaultProps,\n childrens,\n});\n\nexport const createReactFragmentTreeNode = (\n key: ?Key,\n childrens: TreeNode[]\n): ReactFragmentTreeNode => ({\n type: 'ReactFragment',\n key,\n childrens,\n});\n"]}