html-react-parser 0.8.0 → 0.9.2

package/lib/attributes-to-props.js

@@ -1,59 +1,61 @@
-var DOMProperty = require('react-dom-core/lib/DOMProperty');
-var propertyConfig = require('./property-config');
+var reactProperty = require('react-property');
 var styleToObject = require('style-to-object');
 var utilities = require('./utilities');
 
-var config = propertyConfig.config;
-var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
-DOMProperty.injection.injectDOMPropertyConfig(
-  propertyConfig.HTMLDOMPropertyConfig
-);
+var camelCase = utilities.camelCase;
+
+var htmlProperties = reactProperty.html;
+var svgProperties = reactProperty.svg;
+var isCustomAttribute = reactProperty.isCustomAttribute;
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
 
 /**
- * Makes attributes compatible with React props.
+ * Converts HTML/SVG DOM attributes to React props.
  *
- * @param  {Object} [attributes={}] - The attributes.
- * @return {Object}                 - The props.
+ * @param  {Object} [attributes={}] - The HTML/SVG DOM attributes.
+ * @return {Object}                 - The React props.
  */
 function attributesToProps(attributes) {
   attributes = attributes || {};
+
+  var attributeName;
+  var attributeNameLowerCased;
+  var attributeValue;
+  var property;
   var props = {};
-  var propertyName;
-  var propertyValue;
-  var reactProperty;
 
-  for (propertyName in attributes) {
-    propertyValue = attributes[propertyName];
+  for (attributeName in attributes) {
+    attributeValue = attributes[attributeName];
 
-    // custom attributes (`data-` and `aria-`)
-    if (isCustomAttribute(propertyName)) {
-      props[propertyName] = propertyValue;
+    // ARIA (aria-*) or custom data (data-*) attribute
+    if (isCustomAttribute(attributeName)) {
+      props[attributeName] = attributeValue;
       continue;
     }
 
-    // make HTML DOM attribute/property consistent with React attribute/property
-    reactProperty = config.html[propertyName.toLowerCase()];
-    if (reactProperty) {
-      if (
-        Object.prototype.hasOwnProperty.call(
-          DOMProperty.properties,
-          reactProperty
-        ) &&
-        DOMProperty.properties[reactProperty].hasBooleanValue
-      ) {
-        props[reactProperty] = true;
-      } else {
-        props[reactProperty] = propertyValue;
-      }
+    // convert HTML attribute to React prop
+    attributeNameLowerCased = attributeName.toLowerCase();
+    if (hasOwnProperty.call(htmlProperties, attributeNameLowerCased)) {
+      property = htmlProperties[attributeNameLowerCased];
+      props[property.propertyName] =
+        property.hasBooleanValue ||
+        (property.hasOverloadedBooleanValue && !attributeValue)
+          ? true
+          : attributeValue;
       continue;
     }
 
-    // make SVG DOM attribute/property consistent with React attribute/property
-    reactProperty = config.svg[propertyName];
-    if (reactProperty) {
-      props[reactProperty] = propertyValue;
-    } else if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
-      props[propertyName] = propertyValue;
+    // convert SVG attribute to React prop
+    if (hasOwnProperty.call(svgProperties, attributeName)) {
+      property = svgProperties[attributeName];
+      props[property.propertyName] = attributeValue;
+      continue;
+    }
+
+    // preserve custom attribute if React >=16
+    if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
+      props[attributeName] = attributeValue;
     }
   }
 
@@ -61,6 +63,7 @@ function attributesToProps(attributes) {
   if (attributes.style != null) {
     props.style = cssToJs(attributes.style);
   }
+
   return props;
 }
 
@@ -74,14 +77,16 @@ function cssToJs(style) {
   if (typeof style !== 'string') {
     throw new TypeError('First argument must be a string.');
   }
+
   var styleObj = {};
 
-  styleToObject(style, function(propName, propValue) {
-    // Check if it's not a comment node
-    if (propName && propValue) {
-      styleObj[utilities.camelCase(propName)] = propValue;
+  styleToObject(style, function(property, value) {
+    // skip if it's a comment node
+    if (property && value) {
+      styleObj[camelCase(property)] = value;
     }
   });
+
   return styleObj;
 }
 

package/lib/dom-to-react.js

@@ -56,11 +56,11 @@ function domToReact(nodes, options) {
 
     children = null;
 
+    // node type for <script> is "script"
     // node type for <style> is "style"
-    // skip node type "script" as react-dom does not render the contents
-    if (node.type === 'style') {
-      // prevent text in <style> from being escaped
-      // https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
+    if (node.type === 'script' || node.type === 'style') {
+      // prevent text in <script> or <style> from being escaped
+      // https://facebook.github.io/react/tips/dangerously-set-inner-html.html
       if (node.children[0]) {
         props.dangerouslySetInnerHTML = {
           __html: node.children[0].data

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "html-react-parser",
-  "version": "0.8.0",
-  "description": "An HTML to React parser.",
+  "version": "0.9.2",
+  "description": "HTML to React parser.",
   "author": "Mark <mark@remarkablemark.org>",
   "main": "index.js",
   "scripts": {
     "benchmark": "node benchmark",
     "build": "npm run clean && npm run build:min && npm run build:unmin",
-    "build:min": "cross-env NODE_ENV=production webpack --output-filename html-react-parser.min.js",
-    "build:unmin": "cross-env NODE_ENV=development webpack --output-filename html-react-parser.js",
+    "build:min": "cross-env NODE_ENV=production rollup --config --file dist/html-react-parser.min.js --sourcemap",
+    "build:unmin": "cross-env NODE_ENV=development rollup --config --file dist/html-react-parser.js",
     "clean": "rimraf dist",
     "coveralls": "nyc report --reporter=text-lcov | coveralls",
-    "lint": "eslint --ignore-path .gitignore .",
+    "lint": "eslint --ignore-path .gitignore --ignore-pattern /examples/ .",
     "lint:fix": "npm run lint -- --fix",
     "dtslint": "dtslint .",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run lint && npm run dtslint && npm test && npm run build",
     "release": "standard-version --no-verify",
     "test": "mocha",
     "test:coverage": "nyc npm test",
@@ -36,8 +36,8 @@
   ],
   "dependencies": {
     "@types/domhandler": "2.4.1",
-    "html-dom-parser": "0.2.2",
-    "react-dom-core": "0.1.1",
+    "html-dom-parser": "0.2.3",
+    "react-property": "1.0.1",
     "style-to-object": "0.2.3"
   },
   "devDependencies": {
@@ -58,9 +58,11 @@
     "react": "^16",
     "react-dom": "^16",
     "rimraf": "^2.6.3",
-    "standard-version": "^6.0.1",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.5"
+    "rollup": "^1.16.2",
+    "rollup-plugin-commonjs": "^10.0.0",
+    "rollup-plugin-node-resolve": "^5.0.4",
+    "rollup-plugin-uglify": "^6.0.2",
+    "standard-version": "^6.0.1"
   },
   "peerDependencies": {
     "react": "^0.14 || ^15 || ^16"
@@ -70,5 +72,9 @@
     "/lib",
     "index.d.ts"
   ],
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/html-react-parser"
+  },
   "license": "MIT"
 }

package/lib/property-config.js

@@ -1,50 +0,0 @@
-var HTMLDOMPropertyConfig = require('react-dom-core/lib/HTMLDOMPropertyConfig');
-var SVGDOMPropertyConfig = require('react-dom-core/lib/SVGDOMPropertyConfig');
-var utilities = require('./utilities');
-
-var config = {
-  html: {},
-  svg: {}
-};
-
-var propertyName;
-
-/**
- * HTML DOM property config.
- *
- * https://github.com/facebook/react/blob/15-stable/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
- */
-
-// first map out the HTML attribute names
-// e.g., { className: 'class' } => { 'class': 'className' }
-config.html = utilities.invertObject(HTMLDOMPropertyConfig.DOMAttributeNames);
-
-// then map out the rest of the HTML properties
-// e.g., { readOnly: 0 } => { readonly: 'readOnly' }
-for (propertyName in HTMLDOMPropertyConfig.Properties) {
-  // lowercase to make matching property names easier
-  config.html[propertyName.toLowerCase()] = propertyName;
-}
-
-/**
- * SVG DOM property config.
- *
- * https://github.com/facebook/react/blob/15-stable/src/renderers/dom/shared/SVGDOMPropertyConfig.js
- */
-
-// first map out the SVG attribute names
-// e.g., { fontSize: 'font-size' } => { 'font-size': 'fontSize' }
-config.svg = utilities.invertObject(SVGDOMPropertyConfig.DOMAttributeNames);
-
-// then map out the rest of the SVG properties
-// e.g., { fillRule: 0 } => { fillRule: 'fillRule' }
-for (propertyName in SVGDOMPropertyConfig.Properties) {
-  // do not lowercase as some svg properties are camel cased
-  config.html[propertyName] = propertyName;
-}
-
-module.exports = {
-  config: config,
-  HTMLDOMPropertyConfig: HTMLDOMPropertyConfig,
-  SVGDOMPropertyConfig: SVGDOMPropertyConfig
-};