html-react-parser 0.13.0 → 0.14.3

package/CHANGELOG.md

@@ -2,16 +2,38 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-<a name="0.13.0"></a>
-# [0.13.0](https://github.com/remarkablemark/html-react-parser/compare/v0.12.0...v0.13.0) (2020-06-07)
+## [0.14.3](https://github.com/remarkablemark/html-react-parser/compare/v0.14.2...v0.14.3) (2020-12-12)
 
 
+### Bug Fixes
+
+* **dom-to-react:** transform style to object for Web Components ([83efbce](https://github.com/remarkablemark/html-react-parser/commit/83efbce1123d3fb6d28b066cf60559a769e9a138)), closes [#188](https://github.com/remarkablemark/html-react-parser/issues/188)
+
+
+
+<a name="0.14.2"></a>
+## [0.14.2](https://github.com/remarkablemark/html-react-parser/compare/v0.14.1...v0.14.2) (2020-11-23)
+
+
+
+<a name="0.14.1"></a>
+## [0.14.1](https://github.com/remarkablemark/html-react-parser/compare/v0.14.0...v0.14.1) (2020-11-03)
+
+
+
+## [0.14.0](https://github.com/remarkablemark/html-react-parser/compare/v0.13.0...v0.14.0) (2020-09-11)
+
 ### Features
 
-* **dom-to-react:** add option `trim` that skips whitespace nodes ([413eaa0](https://github.com/remarkablemark/html-react-parser/commit/413eaa0))
-* **index:** type `trim` in HTMLReactParserOptions ([be71b13](https://github.com/remarkablemark/html-react-parser/commit/be71b13))
+- export attributesToProps ([00fbef2](https://github.com/remarkablemark/html-react-parser/commit/00fbef2))
+- update readme ([76f8b0c](https://github.com/remarkablemark/html-react-parser/commit/76f8b0c))
+
+## [0.13.0](https://github.com/remarkablemark/html-react-parser/compare/v0.12.0...v0.13.0) (2020-06-07)
 
+### Features
 
+- **dom-to-react:** add option `trim` that skips whitespace nodes ([413eaa0](https://github.com/remarkablemark/html-react-parser/commit/413eaa0))
+- **index:** type `trim` in HTMLReactParserOptions ([be71b13](https://github.com/remarkablemark/html-react-parser/commit/be71b13))
 
 ## [0.12.0](https://github.com/remarkablemark/html-react-parser/compare/v0.11.1...v0.12.0) (2020-06-04)
 

package/README.md

@@ -3,7 +3,7 @@
 [![NPM](https://nodei.co/npm/html-react-parser.png)](https://nodei.co/npm/html-react-parser/)
 
 [![NPM version](https://img.shields.io/npm/v/html-react-parser.svg)](https://www.npmjs.com/package/html-react-parser)
-[![Build Status](https://travis-ci.org/remarkablemark/html-react-parser.svg?branch=master)](https://travis-ci.org/remarkablemark/html-react-parser)
+[![Build Status](https://github.com/remarkablemark/html-react-parser/workflows/build/badge.svg?branch=master)](https://github.com/remarkablemark/html-react-parser/actions?query=workflow%3Abuild)
 [![Coverage Status](https://coveralls.io/repos/github/remarkablemark/html-react-parser/badge.svg?branch=master)](https://coveralls.io/github/remarkablemark/html-react-parser?branch=master)
 [![Dependency status](https://david-dm.org/remarkablemark/html-react-parser.svg)](https://david-dm.org/remarkablemark/html-react-parser)
 [![NPM downloads](https://img.shields.io/npm/dm/html-react-parser.svg?style=flat-square)](https://www.npmjs.com/package/html-react-parser)
@@ -17,16 +17,47 @@ HTMLReactParser(string[, options])
 
 It converts an HTML string to one or more [React elements](https://reactjs.org/docs/react-api.html#creating-react-elements). There's also an option to [replace an element](#replacedomnode) with your own.
 
-#### Example:
+Example:
 
 ```js
-var parse = require('html-react-parser');
+const parse = require('html-react-parser');
 parse('<div>text</div>'); // equivalent to `React.createElement('div', {}, 'text')`
 ```
 
-[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
-
-## Installation
+[CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
+
+<details>
+<summary>Table of Contents</summary>
+
+- [Install](#install)
+- [Usage](#usage)
+  - [Options](#options)
+    - [replace(domNode)](#replacedomnode)
+  - [library](#library)
+  - [htmlparser2](#htmlparser2)
+  - [trim](#trim)
+- [FAQ](#faq)
+  - [Is this XSS safe?](#is-this-xss-safe)
+  - [Does invalid HTML get sanitized?](#does-invalid-html-get-sanitized)
+  - [Are `<script>` tags parsed?](#are-script-tags-parsed)
+  - [Attributes aren't getting called](#attributes-arent-getting-called)
+  - [Parser throws an error](#parser-throws-an-error)
+  - [Is SSR supported?](#is-ssr-supported)
+  - [Elements aren't nested correctly](#elements-arent-nested-correctly)
+  - [Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table](#warning-validatedomnesting-whitespace-text-nodes-cannot-appear-as-a-child-of-table)
+  - [Don't change case of tags](#dont-change-case-of-tags)
+- [Benchmarks](#benchmarks)
+- [Contributors](#contributors)
+  - [Code Contributors](#code-contributors)
+  - [Financial Contributors](#financial-contributors)
+    - [Individuals](#individuals)
+    - [Organizations](#organizations)
+- [Support](#support)
+- [License](#license)
+
+</details>
+
+## Install
 
 [NPM](https://www.npmjs.com/package/html-react-parser):
 
@@ -53,7 +84,7 @@ $ yarn add html-react-parser
 
 ## Usage
 
-Import the module:
+Import or require the module:
 
 ```js
 // ES Modules
@@ -176,13 +207,31 @@ const options = {
 console.log(renderToStaticMarkup(parse(html, options)));
 ```
 
+Use the exported attributesToProps method to convert DOM attributes to React Props:
+
+```jsx
+import React from 'react';
+import parse, { attributesToProps } from 'html-react-parser';
+
+const html = `
+  <hr class="prettify" style="background:#fff;text-align:center" />
+`;
+
+const options = {
+  replace: node => {
+    if (node.attribs && node.name === 'hr') {
+      const props = attributesToProps(node.attribs);
+      return <hr {...props} />;
+    }
+  }
+};
+```
+
 Output:
 
 ```html
 <h1 style="font-size:42px">
-  <span style="color:hotpink">
-    keep me and make me pretty!
-  </span>
+  <span style="color:hotpink"> keep me and make me pretty! </span>
 </h1>
 ```
 
@@ -226,7 +275,7 @@ parse('<br>', {
 
 ### htmlparser2
 
-This library passes the following options to [htmlparser2](https://github.com/fb55/htmlparser2/tree/v3.10.1) on the server-side:
+The default options passed to [htmlparser2](https://github.com/fb55/htmlparser2/tree/v3.10.1) are:
 
 ```js
 {
@@ -235,9 +284,9 @@ This library passes the following options to [htmlparser2](https://github.com/fb
 }
 ```
 
-By passing your own options, the default library options will be **replaced** (not merged).
+Since [v0.12.0](https://github.com/remarkablemark/html-react-parser/tree/v0.12.0), you can override the default options by passing [htmlparser2 options](https://github.com/fb55/htmlparser2/wiki/Parser-options).
 
-As a result, to enable `decodeEntities` and `xmlMode`, you need to do the following:
+Here's an example in which [`decodeEntities`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-decodeentities) and [`xmlMode`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-xmlmode) are enabled:
 
 ```js
 parse('<p /><p />', {
@@ -248,9 +297,7 @@ parse('<p /><p />', {
 });
 ```
 
-See [htmlparser2 options](https://github.com/fb55/htmlparser2/wiki/Parser-options).
-
-> **Warning**: By overriding htmlparser2 options, there's a chance of breaking universal rendering. Do this at your own risk.
+> **Warning**: `htmlparser2` is only applicable on the _server-side_ (Node.js) and not applicable on the _client-side_ (browser). By overriding `htmlparser2` options, there's a chance that universal rendering breaks. Do this at your own _risk_.
 
 ### trim
 
@@ -280,33 +327,33 @@ parse('<p> </p>', { trim: true }); // React.createElement('p')
 
 ## FAQ
 
-#### Is this library XSS safe?
+#### Is this XSS safe?
 
 No, this library is _**not**_ [XSS (cross-site scripting)](https://wikipedia.org/wiki/Cross-site_scripting) safe. See [#94](https://github.com/remarkablemark/html-react-parser/issues/94).
 
-#### Does this library sanitize invalid HTML?
+#### Does invalid HTML get sanitized?
 
-No, this library does _**not**_ perform HTML sanitization. See [#124](https://github.com/remarkablemark/html-react-parser/issues/124), [#125](https://github.com/remarkablemark/html-react-parser/issues/125), and [#141](https://github.com/remarkablemark/html-react-parser/issues/141).
+No, this library does _**not**_ sanitize HTML. See [#124](https://github.com/remarkablemark/html-react-parser/issues/124), [#125](https://github.com/remarkablemark/html-react-parser/issues/125), and [#141](https://github.com/remarkablemark/html-react-parser/issues/141).
 
 #### Are `<script>` tags parsed?
 
 Although `<script>` tags and their contents are rendered on the server-side, they're not evaluated on the client-side. See [#98](https://github.com/remarkablemark/html-react-parser/issues/98).
 
-#### Why aren't my HTML attributes getting called?
+#### Attributes aren't getting called
 
-This is because [inline event handlers](https://developer.mozilla.org/docs/Web/Guide/Events/Event_handlers) like `onclick` are parsed as a _string_ instead of a _function_. See [#73](https://github.com/remarkablemark/html-react-parser/issues/73).
+The reason why your HTML attributes aren't getting called is because [inline event handlers](https://developer.mozilla.org/docs/Web/Guide/Events/Event_handlers) (e.g., `onclick`) are parsed as a _string_ rather than a _function_. See [#73](https://github.com/remarkablemark/html-react-parser/issues/73).
 
-#### The parser throws an error.
+#### Parser throws an error
 
-Check if your arguments are valid. Also, see ["Does this library sanitize invalid HTML?"](https://github.com/remarkablemark/html-react-parser#does-this-library-sanitize-invalid-html).
+If the parser throws an erorr, check if your arguments are valid. See ["Does invalid HTML get sanitized?"](#does-invalid-html-get-sanitized).
 
-#### Does this library support SSR?
+#### Is SSR supported?
 
-Yes, this library supports server-side rendering on Node.js. See [demo](https://repl.it/@remarkablemark/html-react-parser-SSR).
+Yes, server-side rendering on Node.js is supported by this library. See [demo](https://repl.it/@remarkablemark/html-react-parser-SSR).
 
-#### Why are my elements nested incorrectly?
+#### Elements aren't nested correctly
 
-Make sure your [HTML markup is valid](https://validator.w3.org/). The HTML to DOM parsing will be affected if you're using self-closing syntax (`/>`) on non-void elements:
+If your elements are nested incorrectly, check to make sure your [HTML markup is valid](https://validator.w3.org/). The HTML to DOM parsing will be affected if you're using self-closing syntax (`/>`) on non-void elements:
 
 ```js
 parse('<div /><div />'); // returns single element instead of array of elements
@@ -314,13 +361,13 @@ parse('<div /><div />'); // returns single element instead of array of elements
 
 See [#158](https://github.com/remarkablemark/html-react-parser/issues/158).
 
-#### I get "Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table."
+#### Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table
 
-Enable the [trim](https://github.com/remarkablemark/html-react-parser#trim) option. See [#155](https://github.com/remarkablemark/html-react-parser/issues/155).
+Enable the [trim](#trim) option. See [#155](https://github.com/remarkablemark/html-react-parser/issues/155).
 
-#### Don't change case of tags.
+#### Don't change case of tags
 
-Tags are lowercased by default. To prevent that from happening, pass the [htmlparser2 option](https://github.com/remarkablemark/html-react-parser#htmlparser2):
+Tags are lowercased by default. To prevent that from happening, pass the [htmlparser2 option](#htmlparser2):
 
 ```js
 const options = {
@@ -387,10 +434,10 @@ Support this project with your organization. Your logo will show up here with a
 ## Support
 
 - [GitHub Sponsors](https://b.remarkabl.org/github-sponsors)
-- [Patreon](https://b.remarkabl.org/patreon)
 - [Open Collective](https://b.remarkabl.org/open-collective-html-react-parser)
-- [Ko-fi](https://b.remarkabl.org/ko-fi)
 - [Tidelift](https://b.remarkabl.org/tidelift-html-react-parser)
+- [Patreon](https://b.remarkabl.org/patreon)
+- [Ko-fi](https://b.remarkabl.org/ko-fi)
 - [Liberapay](https://b.remarkabl.org/liberapay)
 - [Teepsring](https://b.remarkabl.org/teespring)
 

package/dist/html-react-parser.js

@@ -1,10 +1,12 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
-  (global = global || self, global.HTMLReactParser = factory(global.React));
-}(this, (function (react) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HTMLReactParser = factory(global.React));
+}(this, (function (React) { 'use strict';
 
-  react = react && Object.prototype.hasOwnProperty.call(react, 'default') ? react['default'] : react;
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
   var HTMLDOMPropertyConfig = {
     Properties: {
@@ -604,6 +606,13 @@
     )
   };
 
+  var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+  function createCommonjsModule(fn) {
+    var module = { exports: {} };
+  	return fn(module, module.exports), module.exports;
+  }
+
   // http://www.w3.org/TR/CSS21/grammar.html
   // https://github.com/visionmedia/css-parse/pull/49#issuecomment-30088027
   var COMMENT_REGEX = /\/\*[^*]*\*+([^/*][^*]*\*+)*\//g;
@@ -903,32 +912,59 @@
 
   var styleToObject = StyleToObject;
 
-  var hyphenPatternRegex = /-([a-z])/g;
-  var CUSTOM_PROPERTY_OR_NO_HYPHEN_REGEX = /^--[a-zA-Z0-9-]+$|^[^-]+$/;
-
-  /**
-   * Converts a string to camelCase.
-   *
-   * @param  {String} string - The string.
-   * @return {String}
-   */
-  function camelCase(string) {
-    if (typeof string !== 'string') {
-      throw new TypeError('First argument must be a string');
-    }
+  var utilities = createCommonjsModule(function (module, exports) {
+  exports.__esModule = true;
+  exports.camelCase = void 0;
+  var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
+  var HYPHEN_REGEX = /-([a-z])/g;
+  var NO_HYPHEN_REGEX = /^[^-]+$/;
+  var VENDOR_PREFIX_REGEX = /^-(webkit|moz|ms|o|khtml)-/;
+  var skipCamelCase = function (property) {
+      return !property ||
+          NO_HYPHEN_REGEX.test(property) ||
+          CUSTOM_PROPERTY_REGEX.test(property);
+  };
+  var capitalize = function (match, character) {
+      return character.toUpperCase();
+  };
+  var trimHyphen = function (match, prefix) { return prefix + "-"; };
+  var camelCase = function (property, options) {
+      if (options === void 0) { options = {}; }
+      if (skipCamelCase(property)) {
+          return property;
+      }
+      property = property.toLowerCase();
+      if (!options.reactCompat) {
+          property = property.replace(VENDOR_PREFIX_REGEX, trimHyphen);
+      }
+      return property.replace(HYPHEN_REGEX, capitalize);
+  };
+  exports.camelCase = camelCase;
+  });
 
-    // custom property or no hyphen found
-    if (CUSTOM_PROPERTY_OR_NO_HYPHEN_REGEX.test(string)) {
-      return string;
-    }
+  var cjs = createCommonjsModule(function (module, exports) {
+  var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+      return (mod && mod.__esModule) ? mod : { "default": mod };
+  };
+  exports.__esModule = true;
+  var style_to_object_1 = __importDefault(styleToObject);
 
-    // convert to camelCase
-    return string
-      .toLowerCase()
-      .replace(hyphenPatternRegex, function (_, character) {
-        return character.toUpperCase();
+  function StyleToJS(style, options) {
+      var output = {};
+      if (!style || typeof style !== 'string') {
+          return output;
+      }
+      style_to_object_1["default"](style, function (property, value) {
+          if (property && value) {
+              output[utilities.camelCase(property, options)] = value;
+          }
       });
+      return output;
   }
+  exports["default"] = StyleToJS;
+  });
+
+  var styleToJS = cjs.default;
 
   /**
    * Swap key with value in an object.
@@ -1000,20 +1036,35 @@
     }
   }
 
+  var styleToJSOptions = { reactCompat: true };
+
   /**
-   * @constant {Boolean}
+   * Sets style prop.
+   *
+   * @param {null|undefined|string} style
+   * @param {object} props
+   */
+  function setStyleProp(style, props) {
+    if (style === null || style === undefined) {
+      return;
+    }
+    props.style = styleToJS(style, styleToJSOptions);
+  }
+
+  /**
+   * @constant {boolean}
    * @see {@link https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html}
    */
-  var PRESERVE_CUSTOM_ATTRIBUTES = react.version.split('.')[0] >= 16;
+  var PRESERVE_CUSTOM_ATTRIBUTES = React__default['default'].version.split('.')[0] >= 16;
 
-  var utilities = {
+  var utilities$1 = {
     PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
-    camelCase: camelCase,
     invertObject: invertObject,
-    isCustomComponent: isCustomComponent
+    isCustomComponent: isCustomComponent,
+    setStyleProp: setStyleProp
   };
 
-  var camelCase$1 = utilities.camelCase;
+  var setStyleProp$1 = utilities$1.setStyleProp;
 
   var htmlProperties = reactProperty.html;
   var svgProperties = reactProperty.svg;
@@ -1024,8 +1075,8 @@
   /**
    * Converts HTML/SVG DOM attributes to React props.
    *
-   * @param  {Object} [attributes={}] - The HTML/SVG DOM attributes.
-   * @return {Object}                 - The React props.
+   * @param  {object} [attributes={}] - HTML/SVG DOM attributes.
+   * @return {object}                 - React props.
    */
   function attributesToProps(attributes) {
     attributes = attributes || {};
@@ -1065,58 +1116,37 @@
       }
 
       // preserve custom attribute if React >=16
-      if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
+      if (utilities$1.PRESERVE_CUSTOM_ATTRIBUTES) {
         props[attributeName] = attributeValue;
       }
     }
 
-    // convert inline style to object
-    if (attributes.style != null) {
-      props.style = cssToJs(attributes.style);
-    }
+    // transform inline style to object
+    setStyleProp$1(attributes.style, props);
 
     return props;
   }
 
-  /**
-   * Converts inline CSS style to POJO (Plain Old JavaScript Object).
-   *
-   * @param  {String} style - The inline CSS style.
-   * @return {Object}       - The style object.
-   */
-  function cssToJs(style) {
-    var styleObject = {};
-
-    if (style) {
-      styleToObject(style, function (property, value) {
-        // skip CSS comment
-        if (property && value) {
-          styleObject[camelCase$1(property)] = value;
-        }
-      });
-    }
-
-    return styleObject;
-  }
-
   var attributesToProps_1 = attributesToProps;
 
+  var setStyleProp$2 = utilities$1.setStyleProp;
+
   /**
    * Converts DOM nodes to React elements.
    *
-   * @param {DomElement[]} nodes - The DOM nodes.
-   * @param {Object} [options={}] - The additional options.
-   * @param {Function} [options.replace] - The replacer.
-   * @param {Object} [options.library] - The library (React, Preact, etc.).
-   * @return {String|ReactElement|ReactElement[]}
+   * @param  {DomElement[]} nodes             - DOM nodes.
+   * @param  {object}       [options={}]      - Options.
+   * @param  {Function}     [options.replace] - Replacer.
+   * @param  {object}       [options.library] - Library (React/Preact/etc.).
+   * @return {string|ReactElement|ReactElement[]}
    */
   function domToReact(nodes, options) {
     options = options || {};
 
-    var React = options.library || react;
-    var cloneElement = React.cloneElement;
-    var createElement = React.createElement;
-    var isValidElement = React.isValidElement;
+    var library = options.library || React__default['default'];
+    var cloneElement = library.cloneElement;
+    var createElement = library.createElement;
+    var isValidElement = library.isValidElement;
 
     var result = [];
     var node;
@@ -1161,8 +1191,10 @@
       }
 
       props = node.attribs;
-      if (!shouldPassAttributesUnaltered(node)) {
-        props = attributesToProps_1(node.attribs);
+      if (skipAttributesToProps(node)) {
+        setStyleProp$2(props.style, props);
+      } else if (props) {
+        props = attributesToProps_1(props);
       }
 
       children = null;
@@ -1208,16 +1240,17 @@
   }
 
   /**
-   * Determines whether attributes should be altered or not.
+   * Determines whether DOM element attributes should be transformed to props.
+   * Web Components should not have their attributes transformed except for `style`.
    *
-   * @param {React.ReactElement} node
-   * @return {Boolean}
+   * @param  {DomElement} node
+   * @return {boolean}
    */
-  function shouldPassAttributesUnaltered(node) {
+  function skipAttributesToProps(node) {
     return (
-      utilities.PRESERVE_CUSTOM_ATTRIBUTES &&
+      utilities$1.PRESERVE_CUSTOM_ATTRIBUTES &&
       node.type === 'tag' &&
-      utilities.isCustomComponent(node.name, node.attribs)
+      utilities$1.isCustomComponent(node.name, node.attribs)
     );
   }
 
@@ -1421,7 +1454,7 @@
     return /(MSIE |Trident\/|Edge\/)/.test(navigator.userAgent);
   }
 
-  var utilities$1 = {
+  var utilities$2 = {
     formatAttributes: formatAttributes,
     formatDOM: formatDOM,
     isIE: isIE
@@ -1438,8 +1471,8 @@
   var VOID_ELEMENTS_REGEX = /<(area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)(.*?)\/?>/gi;
 
   // detect IE browser
-  var isIE9 = utilities$1.isIE(9);
-  var isIE$1 = isIE9 || utilities$1.isIE();
+  var isIE9 = utilities$2.isIE(9);
+  var isIE$1 = isIE9 || utilities$2.isIE();
 
   // falls back to `parseFromString` if `createHTMLDocument` cannot be used
   var parseFromDocument = function () {
@@ -1610,8 +1643,8 @@
 
   var domparser_1 = domparser;
 
-  var formatDOM$1 = utilities$1.formatDOM;
-  var isIE9$1 = utilities$1.isIE(9);
+  var formatDOM$1 = utilities$2.formatDOM;
+  var isIE9$1 = utilities$2.isIE(9);
 
   var DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/; // e.g., <!doctype html>
 
@@ -1678,6 +1711,7 @@
 
   HTMLReactParser.domToReact = domToReact_1;
   HTMLReactParser.htmlToDOM = htmlToDomClient;
+  HTMLReactParser.attributesToProps = attributesToProps_1;
 
   // support CommonJS and ES Modules
   var htmlReactParser = HTMLReactParser;