html-react-parser 4.2.0 → 4.2.2

package/README.md

@@ -155,13 +155,15 @@ The `replace` callback's first argument is [domhandler](https://github.com/fb55/
 
 ```js
 parse('<br>', {
-  replace: domNode => {
+  replace: (domNode) => {
     console.dir(domNode, { depth: null });
   }
 });
 ```
 
-Console output:
+<details>
+<summary>Console output</summary>
+<p>
 
 ```js
 Element {
@@ -177,11 +179,14 @@ Element {
 }
 ```
 
+</p>
+</details>
+
 The element is replaced if a **valid** React element is returned:
 
 ```jsx
 parse('<p id="replace">text</p>', {
-  replace: domNode => {
+  replace: (domNode) => {
     if (domNode.attribs && domNode.attribs.id === 'replace') {
       return <span>replaced</span>;
     }
@@ -197,7 +202,7 @@ For TypeScript projects, you may need to check that `domNode` is an instance of
 import { HTMLReactParserOptions, Element } from 'html-react-parser';
 
 const options: HTMLReactParserOptions = {
-  replace: domNode => {
+  replace: (domNode) => {
     if (domNode instanceof Element && domNode.attribs) {
       // ...
     }
@@ -245,7 +250,9 @@ const options = {
 parse(html, options);
 ```
 
-HTML output:
+<details>
+<summary>HTML output</summary>
+<p>
 
 <!-- prettier-ignore-start -->
 
@@ -259,6 +266,9 @@ HTML output:
 
 <!-- prettier-ignore-end -->
 
+</p>
+</details>
+
 #### replace element attributes
 
 Convert DOM attributes to React props with `attributesToProps`:
@@ -271,7 +281,7 @@ const html = `
 `;
 
 const options = {
-  replace: domNode => {
+  replace: (domNode) => {
     if (domNode.attribs && domNode.name === 'main') {
       const props = attributesToProps(domNode.attribs);
       return <div {...props} />;
@@ -282,12 +292,17 @@ const options = {
 parse(html, options);
 ```
 
-HTML output:
+<details>
+<summary>HTML output</summary>
+<p>
 
 ```html
 <div class="prettify" style="background:#fff;text-align:center"></div>
 ```
 
+</p>
+</details>
+
 #### replace and remove element
 
 [Exclude](https://replit.com/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
@@ -298,12 +313,17 @@ parse('<p><br id="remove"></p>', {
 });
 ```
 
-HTML output:
+<details>
+<summary>HTML output</summary>
+<p>
 
 ```html
 <p></p>
 ```
 
+</p>
+</details>
+
 ### transform
 
 The `transform` option allows you to transform each element individually after it's parsed.
@@ -417,7 +437,7 @@ For the `replace` option, you may need to do the following:
 import { Element } from 'domhandler/lib/node';
 
 parse('<br class="remove">', {
-  replace: domNode => {
+  replace: (domNode) => {
     if (domNode instanceof Element && domNode.attribs.class === 'remove') {
       return <></>;
     }
@@ -522,7 +542,7 @@ If you see the TypeScript error:
 node_modules/htmlparser2/lib/index.d.ts:2:23 - error TS1005: ',' expected.
 
 2 export { Parser, type ParserOptions };
-                         ~~~~~~~~~~~~~
+                        ~~~~~~~~~~~~~
 ```
 
 Then upgrade to the latest version of [typescript](https://www.npmjs.com/package/typescript). See [#748](https://github.com/remarkablemark/html-react-parser/issues/748).

package/dist/html-react-parser.js

@@ -2222,7 +2222,7 @@
 
 	var utilities$3 = {};
 
-	utilities$3.__esModule = true;
+	Object.defineProperty(utilities$3, "__esModule", { value: true });
 	utilities$3.camelCase = void 0;
 	var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
 	var HYPHEN_REGEX = /-([a-z])/g;
@@ -2254,27 +2254,25 @@
 	};
 	utilities$3.camelCase = camelCase;
 
-	(function (exports) {
-		var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-		    return (mod && mod.__esModule) ? mod : { "default": mod };
-		};
-		exports.__esModule = true;
-		var style_to_object_1 = __importDefault(styleToObjectExports);
-		var utilities_1 = utilities$3;
-		function StyleToJS(style, options) {
-		    var output = {};
-		    if (!style || typeof style !== 'string') {
-		        return output;
-		    }
-		    (0, style_to_object_1["default"])(style, function (property, value) {
-		        if (property && value) {
-		            output[(0, utilities_1.camelCase)(property, options)] = value;
-		        }
-		    });
-		    return output;
-		}
-		exports["default"] = StyleToJS; 
-	} (cjs));
+	var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+	    return (mod && mod.__esModule) ? mod : { "default": mod };
+	};
+	Object.defineProperty(cjs, "__esModule", { value: true });
+	var style_to_object_1 = __importDefault(styleToObjectExports);
+	var utilities_1 = utilities$3;
+	function StyleToJS(style, options) {
+	    var output = {};
+	    if (!style || typeof style !== 'string') {
+	        return output;
+	    }
+	    (0, style_to_object_1.default)(style, function (property, value) {
+	        if (property && value) {
+	            output[(0, utilities_1.camelCase)(property, options)] = value;
+	        }
+	    });
+	    return output;
+	}
+	cjs.default = StyleToJS;
 
 	var React$1 = require$$0__default["default"];
 	var styleToJS = cjs.default;
@@ -2291,14 +2289,12 @@
 	    throw new TypeError('First argument must be an object');
 	  }
 
-	  var key;
-	  var value;
 	  var isOverridePresent = typeof override === 'function';
 	  var overrides = {};
 	  var result = {};
 
-	  for (key in obj) {
-	    value = obj[key];
+	  for (var key in obj) {
+	    var value = obj[key];
 
 	    if (isOverridePresent) {
 	      overrides = override(key, value);
@@ -2316,6 +2312,17 @@
 	  return result;
 	}
 
+	var RESERVED_SVG_MATHML_ELEMENTS = new Set([
+	  'annotation-xml',
+	  'color-profile',
+	  'font-face',
+	  'font-face-src',
+	  'font-face-uri',
+	  'font-face-format',
+	  'font-face-name',
+	  'missing-glyph'
+	]);
+
 	/**
 	 * Check if a given tag is a custom component.
 	 *
@@ -2323,33 +2330,24 @@
 	 *
 	 * @param {string} tagName - The name of the html tag.
 	 * @param {object} props - The props being passed to the element.
-	 * @returns - Whether tag is custom component.
+	 * @returns {boolean} - Whether tag is custom component.
 	 */
 	function isCustomComponent(tagName, props) {
 	  if (tagName.indexOf('-') === -1) {
 	    return props && typeof props.is === 'string';
 	  }
-
-	  switch (tagName) {
-	    // These are reserved SVG and MathML elements.
-	    // We don't mind this whitelist too much because we expect it to never grow.
-	    // The alternative is to track the namespace in a few places which is convoluted.
-	    // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
-	    case 'annotation-xml':
-	    case 'color-profile':
-	    case 'font-face':
-	    case 'font-face-src':
-	    case 'font-face-uri':
-	    case 'font-face-format':
-	    case 'font-face-name':
-	    case 'missing-glyph':
-	      return false;
-	    default:
-	      return true;
+	  // These are reserved SVG and MathML elements.
+	  // We don't mind this whitelist too much because we expect it to never grow.
+	  // The alternative is to track the namespace in a few places which is convoluted.
+	  // https://w3c.github.io/webcomponents/spec/custom/#custom-elements-core-concepts
+	  if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
+	    return false;
 	  }
+	  return true;
 	}
 
-	var styleToJSOptions = { reactCompat: true };
+	// styleToJSOptions
+	var STYLE_TO_JS_OPTIONS = { reactCompat: true };
 
 	/**
 	 * Sets style prop.
@@ -2362,7 +2360,7 @@
 	    return;
 	  }
 	  try {
-	    props.style = styleToJS(style, styleToJSOptions);
+	    props.style = styleToJS(style, STYLE_TO_JS_OPTIONS);
 	  } catch (err) {
 	    props.style = {};
 	  }
@@ -2376,7 +2374,7 @@
 
 	// Taken from
 	// https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
-	var elementsWithNoTextChildren = new Set([
+	var ELEMENTS_WITH_NO_TEXT_CHILDREN = new Set([
 	  'tr',
 	  'tbody',
 	  'thead',
@@ -2395,20 +2393,26 @@
 	 * @returns - Whether node can contain text nodes.
 	 */
 	function canTextBeChildOfNode$1(node) {
-	  return !elementsWithNoTextChildren.has(node.name);
+	  return !ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
 	}
 
+	/**
+	 * Returns the first argument as is.
+	 *
+	 * @param {any} arg - The argument to be returned.
+	 * @returns {any} The input argument `arg`.
+	 */
 	function returnFirstArg(arg) {
 	  return arg;
 	}
 
 	var utilities$2 = {
 	  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
+	  ELEMENTS_WITH_NO_TEXT_CHILDREN: ELEMENTS_WITH_NO_TEXT_CHILDREN,
 	  invertObject: invertObject,
 	  isCustomComponent: isCustomComponent,
 	  setStyleProp: setStyleProp$1,
 	  canTextBeChildOfNode: canTextBeChildOfNode$1,
-	  elementsWithNoTextChildren: elementsWithNoTextChildren,
 	  returnFirstArg: returnFirstArg
 	};