Merge pull request #117 from remarkablemark/feat/react-property

feat: replace `react-dom-core` with `react-property`

Author: remarkablemark

lib/attributes-to-props.js

@@ -1,67 +1,69 @@
-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 camelCase = utilities.camelCase;
 
-var config = propertyConfig.config;
-var isCustomAttribute = propertyConfig.HTMLDOMPropertyConfig.isCustomAttribute;
-DOMProperty.injection.injectDOMPropertyConfig(
-  propertyConfig.HTMLDOMPropertyConfig
-);
+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;
     }
   }
 
   // convert inline style to object
   if (attributes.style != null) {
     props.style = cssToJs(attributes.style);
   }
+
   return props;
 }
 
@@ -75,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[camelCase(propName)] = propValue;
+  styleToObject(style, function(property, value) {
+    // skip if it's a comment node
+    if (property && value) {
+      styleObj[camelCase(property)] = value;
     }
   });
+
   return styleObj;
 }
 

lib/property-config.js

@@ -37,7 +37,7 @@
   "dependencies": {
     "@types/domhandler": "2.4.1",
     "html-dom-parser": "0.2.2",
-    "react-dom-core": "0.1.1",
+    "react-property": "1.0.1",
     "style-to-object": "0.2.3"
   },
   "devDependencies": {