html-react-parser 0.14.2 → 0.14.3

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 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.
 
+## [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)
 

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
@@ -296,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
@@ -330,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 = {
@@ -403,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

@@ -2,11 +2,11 @@
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
   typeof define === 'function' && define.amd ? define(['react'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HTMLReactParser = factory(global.React));
-}(this, (function (react) { 'use strict';
+}(this, (function (React) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  var react__default = /*#__PURE__*/_interopDefaultLegacy(react);
+  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
   var HTMLDOMPropertyConfig = {
     Properties: {
@@ -608,22 +608,9 @@
 
   var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-  function unwrapExports (x) {
-  	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-  }
-
-  function createCommonjsModule(fn, basedir, module) {
-  	return module = {
-  	  path: basedir,
-  	  exports: {},
-  	  require: function (path, base) {
-        return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
-      }
-  	}, fn(module, module.exports), module.exports;
-  }
-
-  function commonjsRequire () {
-  	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+  function createCommonjsModule(fn) {
+    var module = { exports: {} };
+  	return fn(module, module.exports), module.exports;
   }
 
   // http://www.w3.org/TR/CSS21/grammar.html
@@ -955,9 +942,6 @@
   exports.camelCase = camelCase;
   });
 
-  unwrapExports(utilities);
-  var utilities_1 = utilities.camelCase;
-
   var cjs = createCommonjsModule(function (module, exports) {
   var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
       return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -980,7 +964,7 @@
   exports["default"] = StyleToJS;
   });
 
-  unwrapExports(cjs);
+  var styleToJS = cjs.default;
 
   /**
    * Swap key with value in an object.
@@ -1052,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__default['default'].version.split('.')[0] >= 16;
+  var PRESERVE_CUSTOM_ATTRIBUTES = React__default['default'].version.split('.')[0] >= 16;
 
   var utilities$1 = {
     PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
     invertObject: invertObject,
-    isCustomComponent: isCustomComponent
+    isCustomComponent: isCustomComponent,
+    setStyleProp: setStyleProp
   };
 
-  var styleToJS = cjs.default;
-
+  var setStyleProp$1 = utilities$1.setStyleProp;
 
   var htmlProperties = reactProperty.html;
   var svgProperties = reactProperty.svg;
@@ -1073,13 +1072,11 @@
 
   var hasOwnProperty = Object.prototype.hasOwnProperty;
 
-  var styleToJSOptions = { reactCompat: true };
-
   /**
    * 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 || {};
@@ -1124,32 +1121,32 @@
       }
     }
 
-    // convert inline style to object
-    if (attributes.style != null) {
-      props.style = styleToJS(attributes.style, styleToJSOptions);
-    }
+    // transform inline style to object
+    setStyleProp$1(attributes.style, props);
 
     return props;
   }
 
   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__default['default'];
-    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;
@@ -1194,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;
@@ -1241,12 +1240,13 @@
   }
 
   /**
-   * 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$1.PRESERVE_CUSTOM_ATTRIBUTES &&
       node.type === 'tag' &&