fix(attributes-to-props): handle attr named after Object properties

Since the property config is a POJO (Plain Old JavaScript Object),
this means the Object properties/methods are accessible.

Thus, use `hasOwnProperty` to check if the attribute name is on the
config map rather than on the Object prototype chain.

Handle attributes that share the same name as custom attributes.

Author: remarkablemark

lib/attributes-to-props.js

@@ -3,10 +3,13 @@ var styleToObject = require('style-to-object');
 var utilities = require('./utilities');
 
 var camelCase = utilities.camelCase;
+
 var HTMLDOMPropertyConfig = reactProperty.HTMLDOMPropertyConfig;
 var SVGDOMPropertyConfig = reactProperty.SVGDOMPropertyConfig;
 var isCustomAttribute = reactProperty.isCustomAttribute;
 
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
 /**
  * Converts HTML/SVG DOM attributes to React props.
  *
@@ -17,6 +20,7 @@ function attributesToProps(attributes) {
   attributes = attributes || {};
 
   var attributeName;
+  var attributeNameLowerCased;
   var attributeValue;
   var property;
   var props = {};
@@ -31,8 +35,9 @@ function attributesToProps(attributes) {
     }
 
     // convert HTML attribute to React prop
-    property = HTMLDOMPropertyConfig[attributeName.toLowerCase()];
-    if (property) {
+    attributeNameLowerCased = attributeName.toLowerCase();
+    if (hasOwnProperty.call(HTMLDOMPropertyConfig, attributeNameLowerCased)) {
+      property = HTMLDOMPropertyConfig[attributeNameLowerCased];
       props[property.propertyName] =
         property.hasBooleanValue ||
         (property.hasOverloadedBooleanValue && !attributeValue)
@@ -42,8 +47,8 @@ function attributesToProps(attributes) {
     }
 
     // convert SVG attribute to React prop
-    property = SVGDOMPropertyConfig[attributeName];
-    if (property) {
+    if (hasOwnProperty.call(SVGDOMPropertyConfig, attributeName)) {
+      property = SVGDOMPropertyConfig[attributeName];
       props[property.propertyName] = attributeValue;
       continue;
     }

test/attributes-to-props.js

@@ -2,7 +2,7 @@ const assert = require('assert');
 const attributesToProps = require('../lib/attributes-to-props');
 const utilities = require('../lib/utilities');
 
-describe('attributesToProps', () => {
+describe('attributes-to-props', () => {
   describe('HTML', () => {
     it('converts attributes to React props', () => {
       assert.deepEqual(
@@ -60,7 +60,7 @@ describe('attributesToProps', () => {
       );
     });
 
-    it('keeps `data-` and `aria-` attributes as is', () => {
+    it('keeps `data-*` and `aria-*` attributes as is', () => {
       assert.deepEqual(
         attributesToProps({
           'data-foo': 'bar',
@@ -248,35 +248,56 @@ describe('attributesToProps', () => {
     });
   });
 
-  describe('when utilties.PRESERVE_CUSTOM_ATTRIBUTES=false', () => {
-    const { PRESERVE_CUSTOM_ATTRIBUTES } = utilities;
-
-    before(() => {
-      utilities.PRESERVE_CUSTOM_ATTRIBUTES = false;
+  describe('custom', () => {
+    it('converts attributes named after Object properties', () => {
+      // handled as custom attributes
+      const attributes = {
+        __defineGetter__: '',
+        __defineSetter__: '',
+        __lookupGetter__: '',
+        __lookupSetter__: '',
+        __proto__: '',
+        constructor: '',
+        hasOwnProperty: '',
+        isPrototypeOf: '',
+        propertyIsEnumerable: '',
+        toLocaleString: '',
+        toString: '',
+        valueOf: ''
+      };
+      assert.deepEqual(attributesToProps(attributes), attributes);
     });
 
-    after(() => {
-      utilities.PRESERVE_CUSTOM_ATTRIBUTES = PRESERVE_CUSTOM_ATTRIBUTES;
-    });
+    describe('when utilties.PRESERVE_CUSTOM_ATTRIBUTES=false', () => {
+      const { PRESERVE_CUSTOM_ATTRIBUTES } = utilities;
 
-    it('omits unknown attributes', () => {
-      assert.deepEqual(
-        attributesToProps({
-          unknownAttribute: 'someValue'
-        }),
-        {}
-      );
-    });
+      before(() => {
+        utilities.PRESERVE_CUSTOM_ATTRIBUTES = false;
+      });
 
-    it('omits incorrectly capitalized attributes', () => {
-      assert.deepEqual(
-        attributesToProps({
-          'XLINK:HREF': '#',
-          YChannelSelector: 'G',
-          ZoomAndPan: 'disable'
-        }),
-        {}
-      );
+      after(() => {
+        utilities.PRESERVE_CUSTOM_ATTRIBUTES = PRESERVE_CUSTOM_ATTRIBUTES;
+      });
+
+      it('omits unknown attributes', () => {
+        assert.deepEqual(
+          attributesToProps({
+            unknownAttribute: 'someValue'
+          }),
+          {}
+        );
+      });
+
+      it('omits incorrectly capitalized attributes', () => {
+        assert.deepEqual(
+          attributesToProps({
+            'XLINK:HREF': '#',
+            YChannelSelector: 'G',
+            ZoomAndPan: 'disable'
+          }),
+          {}
+        );
+      });
     });
   });
 });