refactor(attributes-to-props): rename variables so they're semantic

Author: remarkablemark

lib/attributes-to-props.js

@@ -11,57 +11,63 @@ DOMProperty.injection.injectDOMPropertyConfig(
 );
 
 /**
- * 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 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) {
+    // convert HTML attribute to React prop
+    property = config.html[attributeName.toLowerCase()];
+    if (property) {
       if (
         Object.prototype.hasOwnProperty.call(
           DOMProperty.properties,
-          reactProperty
+          property
         ) &&
-        DOMProperty.properties[reactProperty].hasBooleanValue
+        DOMProperty.properties[property].hasBooleanValue
       ) {
-        props[reactProperty] = true;
+        props[property] = true;
       } else {
-        props[reactProperty] = propertyValue;
+        props[property] = 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
+    property = config.svg[attributeName];
+    if (property) {
+      props[property] = attributeValue;
+      continue;
+    }
+
+    // custom attribute
+    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 +81,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;
 }