html-react-parser 1.4.0 → 1.4.4

package/README.md

@@ -5,7 +5,6 @@
 [![NPM version](https://img.shields.io/npm/v/html-react-parser.svg)](https://www.npmjs.com/package/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)
 [![codecov](https://codecov.io/gh/remarkablemark/html-react-parser/branch/master/graph/badge.svg?token=wosFd1DBIR)](https://codecov.io/gh/remarkablemark/html-react-parser)
-[![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)
 [![Discord](https://img.shields.io/discord/422421589582282752.svg?label=&logo=discord&logoColor=ffffff&color=7389D8&labelColor=6A7EC2)](https://discord.gg/njExwXdrRJ)
 
@@ -26,7 +25,7 @@ const parse = require('html-react-parser');
 parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
 ```
 
-[Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [TypeScript](https://codesandbox.io/s/html-react-parser-z0kp6) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
+[Replit](https://replit.com/@remarkablemark/html-react-parser) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [TypeScript](https://codesandbox.io/s/html-react-parser-z0kp6) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
 
 <details>
 <summary>Table of Contents</summary>
@@ -51,7 +50,6 @@ parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
   - [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)
   - [TS Error: Property 'attribs' does not exist on type 'DOMNode'](#ts-error-property-attribs-does-not-exist-on-type-domnode)
   - [Can I enable `trim` for certain elements?](#can-i-enable-trim-for-certain-elements)
@@ -203,7 +201,7 @@ If you're having issues take a look at our [Create React App example](./examples
 
 #### replace element and children
 
-Replace the element and its children (see [demo](https://repl.it/@remarkablemark/html-react-parser-replace-example)):
+Replace the element and its children (see [demo](https://replit.com/@remarkablemark/html-react-parser-replace-example)):
 
 ```jsx
 import parse, { domToReact } from 'html-react-parser';
@@ -284,7 +282,7 @@ HTML output:
 
 #### replace and remove element
 
-[Exclude](https://repl.it/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
+[Exclude](https://replit.com/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
 
 ```jsx
 parse('<p><br id="remove"></p>', {
@@ -352,16 +350,16 @@ By default, whitespace is preserved:
 parse('<br>\n'); // [React.createElement('br'), '\n']
 ```
 
-To remove whitespace, enable the `trim` option:
+But certain elements like `<table>` will strip out invalid whitespace:
 
 ```js
-parse('<br>\n', { trim: true }); // React.createElement('br')
+parse('<table>\n</table>'); // React.createElement('table')
 ```
 
-This fixes the warning:
+To remove whitespace, enable the `trim` option:
 
-```
-Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.
+```js
+parse('<br>\n', { trim: true }); // React.createElement('br')
 ```
 
 However, intentional whitespace may be stripped out:
@@ -416,7 +414,7 @@ If the parser throws an erorr, check if your arguments are valid. See ["Does inv
 
 ### Is SSR supported?
 
-Yes, server-side rendering on Node.js is supported by this library. 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://replit.com/@remarkablemark/html-react-parser-SSR).
 
 ### Elements aren't nested correctly
 
@@ -428,10 +426,6 @@ parse('<div /><div />'); // returns single element instead of array of elements
 
 See [#158](https://github.com/remarkablemark/html-react-parser/issues/158).
 
-### Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table
-
-Enable the [trim](#trim) option. See [#155](https://github.com/remarkablemark/html-react-parser/issues/155).
-
 ### Don't change case of tags
 
 Tags are lowercased by default. To prevent that from happening, pass the [htmlparser2 option](#htmlparser2):
@@ -451,7 +445,7 @@ parse('<CustomElement>', options); // React.createElement('CustomElement')
 > Warning: <CustomElement> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
 > ```
 
-See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://repl.it/@remarkablemark/html-react-parser-62).
+See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://replit.com/@remarkablemark/html-react-parser-62).
 
 ### TS Error: Property 'attribs' does not exist on type 'DOMNode'
 

package/dist/html-react-parser.js

@@ -1279,11 +1279,37 @@
 	 */
 	var PRESERVE_CUSTOM_ATTRIBUTES = React$1.version.split('.')[0] >= 16;
 
+	// Taken from
+	// https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
+	var elementsWithNoTextChildren = new Set([
+	  'tr',
+	  'tbody',
+	  'thead',
+	  'tfoot',
+	  'colgroup',
+	  'table',
+	  'head',
+	  'html',
+	  'frameset'
+	]);
+
+	/**
+	 * Checks if the given node can contain text nodes
+	 *
+	 * @param {DomElement} node
+	 * @returns {boolean}
+	 */
+	function canTextBeChildOfNode$1(node) {
+	  return !elementsWithNoTextChildren.has(node.name);
+	}
+
 	var utilities$3 = {
 	  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
 	  invertObject: invertObject,
 	  isCustomComponent: isCustomComponent,
-	  setStyleProp: setStyleProp$1
+	  setStyleProp: setStyleProp$1,
+	  canTextBeChildOfNode: canTextBeChildOfNode$1,
+	  elementsWithNoTextChildren: elementsWithNoTextChildren
 	};
 
 	var reactProperty = lib$1;
@@ -1316,11 +1342,19 @@
 
 	    // convert HTML/SVG attribute to React prop
 	    attributeNameLowerCased = attributeName.toLowerCase();
-	    propName = reactProperty.possibleStandardNames[attributeNameLowerCased];
+	    propName = getPropName(attributeNameLowerCased);
 
 	    if (propName) {
-	      props[propName] = attributeValue;
 	      propertyInfo = reactProperty.getPropertyInfo(propName);
+
+	      // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
+	      // https://reactjs.org/docs/uncontrolled-components.html
+	      if (propName === 'checked' || propName === 'value') {
+	        propName = getPropName('default' + attributeNameLowerCased);
+	      }
+
+	      props[propName] = attributeValue;
+
 	      switch (propertyInfo && propertyInfo.type) {
 	        case reactProperty.BOOLEAN:
 	          props[propName] = true;
@@ -1346,11 +1380,22 @@
 	  return props;
 	};
 
+	/**
+	 * Gets prop name from lowercased attribute name.
+	 *
+	 * @param {string} attributeName - Lowercased attribute name.
+	 * @return {string}
+	 */
+	function getPropName(attributeName) {
+	  return reactProperty.possibleStandardNames[attributeName];
+	}
+
 	var React = require$$0__default["default"];
 	var attributesToProps$1 = attributesToProps$2;
 	var utilities$1 = utilities$3;
 
 	var setStyleProp = utilities$1.setStyleProp;
+	var canTextBeChildOfNode = utilities$1.canTextBeChildOfNode;
 
 	/**
 	 * Converts DOM nodes to JSX element(s).
@@ -1371,11 +1416,11 @@
 
 	  var result = [];
 	  var node;
+	  var isWhitespace;
 	  var hasReplace = typeof options.replace === 'function';
 	  var replaceElement;
 	  var props;
 	  var children;
-	  var data;
 	  var trim = options.trim;
 
 	  for (var i = 0, len = nodes.length; i < len; i++) {
@@ -1399,15 +1444,23 @@
 	    }
 
 	    if (node.type === 'text') {
-	      // if trim option is enabled, skip whitespace text nodes
-	      if (trim) {
-	        data = node.data.trim();
-	        if (data) {
-	          result.push(node.data);
-	        }
-	      } else {
-	        result.push(node.data);
+	      isWhitespace = !node.data.trim().length;
+
+	      if (isWhitespace && node.parent && !canTextBeChildOfNode(node.parent)) {
+	        // We have a whitespace node that can't be nested in its parent
+	        // so skip it
+	        continue;
 	      }
+
+	      if (trim && isWhitespace) {
+	        // Trim is enabled and we have a whitespace node
+	        // so skip it
+	        continue;
+	      }
+
+	      // We have a text node that's not whitespace and it can be nested
+	      // in its parent so add it to the results
+	      result.push(node.data);
 	      continue;
 	    }
 
@@ -1645,6 +1698,10 @@
 	    }
 	    Object.defineProperty(Node.prototype, "nodeType", {
 	        // Read-only aliases
+	        /**
+	         * [DOM spec](https://dom.spec.whatwg.org/#dom-node-nodetype)-compatible
+	         * node {@link type}.
+	         */
 	        get: function () {
 	            var _a;
 	            return (_a = nodeTypes.get(this.type)) !== null && _a !== void 0 ? _a : 1;
@@ -1654,6 +1711,10 @@
 	    });
 	    Object.defineProperty(Node.prototype, "parentNode", {
 	        // Read-write aliases for properties
+	        /**
+	         * Same as {@link parent}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.parent;
 	        },
@@ -1664,6 +1725,10 @@
 	        configurable: true
 	    });
 	    Object.defineProperty(Node.prototype, "previousSibling", {
+	        /**
+	         * Same as {@link prev}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.prev;
 	        },
@@ -1674,6 +1739,10 @@
 	        configurable: true
 	    });
 	    Object.defineProperty(Node.prototype, "nextSibling", {
+	        /**
+	         * Same as {@link next}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.next;
 	        },
@@ -1711,6 +1780,10 @@
 	        return _this;
 	    }
 	    Object.defineProperty(DataNode.prototype, "nodeValue", {
+	        /**
+	         * Same as {@link data}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.data;
 	        },
@@ -1774,6 +1847,7 @@
 	    }
 	    Object.defineProperty(NodeWithChildren.prototype, "firstChild", {
 	        // Aliases
+	        /** First child of the node. */
 	        get: function () {
 	            var _a;
 	            return (_a = this.children[0]) !== null && _a !== void 0 ? _a : null;
@@ -1782,6 +1856,7 @@
 	        configurable: true
 	    });
 	    Object.defineProperty(NodeWithChildren.prototype, "lastChild", {
+	        /** Last child of the node. */
 	        get: function () {
 	            return this.children.length > 0
 	                ? this.children[this.children.length - 1]
@@ -1791,6 +1866,10 @@
 	        configurable: true
 	    });
 	    Object.defineProperty(NodeWithChildren.prototype, "childNodes", {
+	        /**
+	         * Same as {@link children}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.children;
 	        },
@@ -1838,6 +1917,10 @@
 	    }
 	    Object.defineProperty(Element.prototype, "tagName", {
 	        // DOM Level 1 aliases
+	        /**
+	         * Same as {@link name}.
+	         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+	         */
 	        get: function () {
 	            return this.name;
 	        },
@@ -1941,6 +2024,9 @@
 	        var children = recursive ? cloneChildren(node.children) : [];
 	        var clone_1 = new Element$1(node.name, __assign({}, node.attribs), children);
 	        children.forEach(function (child) { return (child.parent = clone_1); });
+	        if (node.namespace != null) {
+	            clone_1.namespace = node.namespace;
+	        }
 	        if (node["x-attribsNamespace"]) {
 	            clone_1["x-attribsNamespace"] = __assign({}, node["x-attribsNamespace"]);
 	        }
@@ -1974,10 +2060,13 @@
 	        result = instruction;
 	    }
 	    else {
-	        throw new Error("Not implemented yet: " + node.type);
+	        throw new Error("Not implemented yet: ".concat(node.type));
 	    }
 	    result.startIndex = node.startIndex;
 	    result.endIndex = node.endIndex;
+	    if (node.sourceCodeLocation != null) {
+	        result.sourceCodeLocation = node.sourceCodeLocation;
+	    }
 	    return result;
 	}
 	node.cloneNode = cloneNode;