feat(attributes-to-props): replace react-dom with react-property

remarkablemark · remarkablemark · commit d6274b94707e · 2019-07-06T21:55:40.000-04:00
Save `react-property@0.1.0` to package.json dependencies and remove `react-dom-core`. Delete `lib/property-config.js` given that the mapping is already created in `react-property`. Fix incorrect test since both `ychannelselector` and `yChannelSelector` are applicable SVG attribute names. Resolves #107
diff --git a/lib/attributes-to-props.js b/lib/attributes-to-props.js
@@ -1,14 +1,11 @@
-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 camelCase = utilities.camelCase;
+var HTMLDOMPropertyConfig = reactProperty.HTMLDOMPropertyConfig;
+var SVGDOMPropertyConfig = reactProperty.SVGDOMPropertyConfig;
+var isCustomAttribute = reactProperty.isCustomAttribute;
 
 /**
  * Converts HTML/SVG DOM attributes to React props.
@@ -34,30 +31,24 @@ function attributesToProps(attributes) {
     }
 
     // convert HTML attribute to React prop
-    property = config.html[attributeName.toLowerCase()];
+    property = HTMLDOMPropertyConfig[attributeName.toLowerCase()];
     if (property) {
-      if (
-        Object.prototype.hasOwnProperty.call(
-          DOMProperty.properties,
-          property
-        ) &&
-        DOMProperty.properties[property].hasBooleanValue
-      ) {
-        props[property] = true;
+      if (property.hasBooleanValue) {
+        props[property.propertyName] = true;
       } else {
-        props[property] = attributeValue;
+        props[property.propertyName] = attributeValue;
       }
       continue;
     }
 
     // convert SVG attribute to React prop
-    property = config.svg[attributeName];
+    property = SVGDOMPropertyConfig[attributeName];
     if (property) {
-      props[property] = attributeValue;
+      props[property.propertyName] = attributeValue;
       continue;
     }
 
-    // custom attribute
+    // preserve custom attribute if React >=16
     if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
       props[attributeName] = attributeValue;
     }
diff --git a/lib/property-config.js b/lib/property-config.js
diff --git a/package.json b/package.json
@@ -37,7 +37,7 @@
   "dependencies": {
     "@types/domhandler": "2.4.1",
     "html-dom-parser": "0.2.2",
-    "react-dom-core": "0.1.1",
+    "react-property": "0.1.0",
     "style-to-object": "0.2.3"
   },
   "devDependencies": {
diff --git a/test/attributes-to-props.js b/test/attributes-to-props.js
@@ -135,16 +135,16 @@ describe('attributesToProps', () => {
       );
     });
 
-    it('includes but does not convert incorrectly capitalized properties', () => {
+    it('keeps incorrectly capitalized attributes', () => {
       assert.deepEqual(
         attributesToProps({
           'XLINK:HREF': '#',
-          ychannelselector: 'G',
+          YChannelSelector: 'G',
           ZoomAndPan: 'disable'
         }),
         {
           'XLINK:HREF': '#',
-          ychannelselector: 'G',
+          YChannelSelector: 'G',
           ZoomAndPan: 'disable'
         }
       );
@@ -253,11 +253,11 @@ describe('attributesToProps', () => {
       );
     });
 
-    it('does not include incorrectly capitalized properties', () => {
+    it('omits incorrectly capitalized attributes', () => {
       assert.deepEqual(
         attributesToProps({
           'XLINK:HREF': '#',
-          ychannelselector: 'G',
+          YChannelSelector: 'G',
           ZoomAndPan: 'disable'
         }),
         {}
