html-react-parser 1.3.0 → 1.4.3

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>
@@ -188,8 +187,7 @@ parse('<p id="replace">text</p>', {
 For TypeScript projects, you may need to check that `domNode` is an instance of domhandler's `Element`:
 
 ```tsx
-import { HTMLReactParserOptions } from 'html-react-parser';
-import { Element } from 'domhandler/lib/node';
+import { HTMLReactParserOptions, Element } from 'html-react-parser';
 
 const options: HTMLReactParserOptions = {
   replace: domNode => {
@@ -200,11 +198,11 @@ const options: HTMLReactParserOptions = {
 };
 ```
 
-If you're having issues with `domNode instanceof Element`, try this [alternative solution](https://github.com/remarkablemark/html-react-parser/issues/221#issuecomment-771600574).
+If you're having issues take a look at our [Create React App example](./examples/create-react-app-typescript/src/App.tsx).
 
 #### 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';
@@ -285,7 +283,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>', {
@@ -417,7 +415,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
 
@@ -452,7 +450,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

@@ -2,7 +2,7 @@
 	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 (require$$0) { 'use strict';
+})(this, (function (require$$0) { 'use strict';
 
 	function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -1181,7 +1181,7 @@
 	exports["default"] = StyleToJS;
 	}(cjs));
 
-	var React$1 = require$$0__default['default'];
+	var React$1 = require$$0__default["default"];
 	var styleToJS = cjs.default;
 
 	/**
@@ -1316,11 +1316,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,7 +1354,17 @@
 	  return props;
 	};
 
-	var React = require$$0__default['default'];
+	/**
+	 * 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;
 
@@ -1645,6 +1663,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 +1676,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 +1690,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 +1704,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 +1745,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 +1812,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 +1821,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 +1831,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 +1882,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 +1989,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 +2025,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;
@@ -2366,6 +2420,7 @@
 	HTMLReactParser.domToReact = domToReact;
 	HTMLReactParser.htmlToDOM = htmlToDOM;
 	HTMLReactParser.attributesToProps = attributesToProps;
+	HTMLReactParser.Element = node.Element;
 
 	// support CommonJS and ES Modules
 	htmlReactParser$1.exports = HTMLReactParser;
@@ -2375,5 +2430,5 @@
 
 	return htmlReactParser;
 
-})));
+}));
 //# sourceMappingURL=html-react-parser.js.map