html-react-parser 1.4.1 → 1.4.5

package/lib/attributes-to-props.js

@@ -10,12 +10,18 @@ var utilities = require('./utilities');
 module.exports = function attributesToProps(attributes) {
   attributes = attributes || {};
 
+  var valueOnlyInputs = {
+    reset: true,
+    submit: true
+  };
+
   var attributeName;
   var attributeNameLowerCased;
   var attributeValue;
   var propName;
   var propertyInfo;
   var props = {};
+  var inputIsValueOnly = attributes.type && valueOnlyInputs[attributes.type];
 
   for (attributeName in attributes) {
     attributeValue = attributes[attributeName];
@@ -28,11 +34,22 @@ module.exports = function attributesToProps(attributes) {
 
     // 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') &&
+        !inputIsValueOnly
+      ) {
+        propName = getPropName('default' + attributeNameLowerCased);
+      }
+
+      props[propName] = attributeValue;
+
       switch (propertyInfo && propertyInfo.type) {
         case reactProperty.BOOLEAN:
           props[propName] = true;
@@ -57,3 +74,13 @@ module.exports = function attributesToProps(attributes) {
 
   return props;
 };
+
+/**
+ * Gets prop name from lowercased attribute name.
+ *
+ * @param {string} attributeName - Lowercased attribute name.
+ * @return {string}
+ */
+function getPropName(attributeName) {
+  return reactProperty.possibleStandardNames[attributeName];
+}

package/lib/dom-to-react.js

@@ -3,6 +3,7 @@ var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
 var setStyleProp = utilities.setStyleProp;
+var canTextBeChildOfNode = utilities.canTextBeChildOfNode;
 
 /**
  * Converts DOM nodes to JSX element(s).
@@ -23,11 +24,11 @@ function domToReact(nodes, options) {
 
   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++) {
@@ -51,15 +52,23 @@ function domToReact(nodes, options) {
     }
 
     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;
     }
 

package/lib/utilities.js

@@ -96,9 +96,35 @@ function setStyleProp(style, props) {
  */
 var PRESERVE_CUSTOM_ATTRIBUTES = React.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(node) {
+  return !elementsWithNoTextChildren.has(node.name);
+}
+
 module.exports = {
   PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
   invertObject: invertObject,
   isCustomComponent: isCustomComponent,
-  setStyleProp: setStyleProp
+  setStyleProp: setStyleProp,
+  canTextBeChildOfNode: canTextBeChildOfNode,
+  elementsWithNoTextChildren: elementsWithNoTextChildren
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-react-parser",
-  "version": "1.4.1",
+  "version": "1.4.5",
   "description": "HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
   "main": "index.js",
@@ -37,36 +37,36 @@
     "dom"
   ],
   "dependencies": {
-    "domhandler": "4.2.2",
-    "html-dom-parser": "1.0.3",
+    "domhandler": "4.3.0",
+    "html-dom-parser": "1.0.4",
     "react-property": "2.0.0",
     "style-to-js": "1.1.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "15.0.0",
-    "@commitlint/config-conventional": "15.0.0",
+    "@commitlint/cli": "16.0.1",
+    "@commitlint/config-conventional": "16.0.0",
     "@rollup/plugin-commonjs": "21.0.1",
-    "@rollup/plugin-node-resolve": "13.0.6",
-    "@size-limit/preset-big-lib": "5.0.3",
-    "@types/react": "17.0.37",
-    "@typescript-eslint/parser": "5.4.0",
+    "@rollup/plugin-node-resolve": "13.1.2",
+    "@size-limit/preset-big-lib": "7.0.4",
+    "@types/react": "17.0.38",
+    "@typescript-eslint/parser": "5.9.0",
     "benchmark": "2.1.4",
     "dtslint": "4.2.1",
-    "eslint": "8.3.0",
+    "eslint": "8.6.0",
     "eslint-plugin-prettier": "4.0.0",
     "husky": "7.0.4",
-    "jest": "27.3.1",
-    "lint-staged": "12.1.2",
+    "jest": "27.4.5",
+    "lint-staged": "12.1.5",
     "pinst": "2.1.6",
-    "preact": "10.6.1",
-    "prettier": "2.5.0",
+    "preact": "10.6.4",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "rimraf": "3.0.2",
-    "rollup": "2.60.1",
+    "rollup": "2.62.0",
     "rollup-plugin-terser": "7.0.2",
-    "size-limit": "5.0.3",
-    "typescript": "4.5.2"
+    "size-limit": "7.0.4",
+    "typescript": "4.5.4"
   },
   "peerDependencies": {
     "react": "0.14 || 15 || 16 || 17"