WIP: Custom Attribute and Preferring Attribute Names over Properties Spike

scripts/rollup/results.json

@@ -25,28 +25,28 @@
       "gzip": 6703
     },
     "react-dom.development.js (UMD_DEV)": {
-      "size": 639824,
-      "gzip": 145999
+      "size": 636451,
+      "gzip": 145314
     },
     "react-dom.production.min.js (UMD_PROD)": {
-      "size": 121920,
-      "gzip": 38871
+      "size": 116716,
+      "gzip": 36738
     },
     "react-dom.development.js (NODE_DEV)": {
-      "size": 599220,
-      "gzip": 136402
+      "size": 595851,
+      "gzip": 135746
     },
     "react-dom.production.min.js (NODE_PROD)": {
-      "size": 118838,
-      "gzip": 37788
+      "size": 113634,
+      "gzip": 35651
     },
     "ReactDOMFiber-dev.js (FB_DEV)": {
-      "size": 595749,
-      "gzip": 135868
+      "size": 592370,
+      "gzip": 135208
     },
     "ReactDOMFiber-prod.js (FB_PROD)": {
-      "size": 431003,
-      "gzip": 96867
+      "size": 417600,
+      "gzip": 93242
     },
     "react-dom-test-utils.development.js (NODE_DEV)": {
       "size": 56074,
@@ -65,20 +65,20 @@
       "gzip": 81957
     },
     "react-dom-server.development.js (UMD_DEV)": {
-      "size": 122993,
-      "gzip": 31032
+      "size": 115926,
+      "gzip": 29829
     },
     "react-dom-server.production.min.js (UMD_PROD)": {
-      "size": 22819,
-      "gzip": 8627
+      "size": 16596,
+      "gzip": 6353
     },
     "react-dom-server.development.js (NODE_DEV)": {
-      "size": 92141,
-      "gzip": 23593
+      "size": 85077,
+      "gzip": 22347
     },
     "react-dom-server.production.min.js (NODE_PROD)": {
-      "size": 21214,
-      "gzip": 8026
+      "size": 15004,
+      "gzip": 5739
     },
     "ReactDOMServerStream-dev.js (FB_DEV)": {
       "size": 264750,
@@ -89,24 +89,24 @@
       "gzip": 51047
     },
     "react-art.development.js (UMD_DEV)": {
-      "size": 373050,
-      "gzip": 82463
+      "size": 373057,
+      "gzip": 82465
     },
     "react-art.production.min.js (UMD_PROD)": {
       "size": 94183,
       "gzip": 29145
     },
     "react-art.development.js (NODE_DEV)": {
-      "size": 294419,
-      "gzip": 62436
+      "size": 294426,
+      "gzip": 62440
     },
     "react-art.production.min.js (NODE_PROD)": {
       "size": 55748,
       "gzip": 17250
     },
     "ReactARTFiber-dev.js (FB_DEV)": {
-      "size": 293279,
-      "gzip": 62507
+      "size": 293286,
+      "gzip": 62510
     },
     "ReactARTFiber-prod.js (FB_PROD)": {
       "size": 220571,
@@ -181,20 +181,20 @@
       "gzip": 50920
     },
     "ReactDOMServer-dev.js (FB_DEV)": {
-      "size": 91224,
-      "gzip": 23517
+      "size": 84233,
+      "gzip": 22246
     },
     "ReactDOMServer-prod.js (FB_PROD)": {
-      "size": 55353,
-      "gzip": 15240
+      "size": 36752,
+      "gzip": 10403
     },
     "react-dom-node-stream.development.js (NODE_DEV)": {
-      "size": 93872,
-      "gzip": 24085
+      "size": 86808,
+      "gzip": 22835
     },
     "react-dom-node-stream.production.min.js (NODE_PROD)": {
-      "size": 22057,
-      "gzip": 8338
+      "size": 15835,
+      "gzip": 6056
     },
     "ReactDOMNodeStream-dev.js (FB_DEV)": {
       "size": 264918,

src/renderers/dom/ReactDOMNodeStreamEntry.js

@@ -14,8 +14,6 @@
 var ReactDOMNodeStreamRenderer = require('ReactDOMNodeStreamRenderer');
 var ReactVersion = require('ReactVersion');
 
-require('ReactDOMInjection');
-
 module.exports = {
   renderToStream: ReactDOMNodeStreamRenderer.renderToStream,
   renderToStaticStream: ReactDOMNodeStreamRenderer.renderToStaticStream,

src/renderers/dom/ReactDOMServerEntry.js

@@ -14,8 +14,6 @@
 var ReactDOMStringRenderer = require('ReactDOMStringRenderer');
 var ReactVersion = require('ReactVersion');
 
-require('ReactDOMInjection');
-
 module.exports = {
   renderToString: ReactDOMStringRenderer.renderToString,
   renderToStaticMarkup: ReactDOMStringRenderer.renderToStaticMarkup,

src/renderers/dom/ReactDOMServerStackEntry.js

@@ -14,7 +14,6 @@
 var ReactServerRendering = require('ReactServerRendering');
 var ReactVersion = require('ReactVersion');
 
-require('ReactDOMInjection');
 require('ReactDOMStackInjection');
 
 var ReactDOMServerStack = {

src/renderers/dom/ReactDOMStackEntry.js

@@ -27,7 +27,6 @@ if (__DEV__) {
   var warning = require('fbjs/lib/warning');
 }
 
-require('ReactDOMInjection');
 require('ReactDOMClientInjection');
 require('ReactDOMStackInjection');
 

src/renderers/dom/fiber/ReactDOMFiberComponent.js

@@ -231,10 +231,7 @@ function setInitialDOMProperties(
       }
     } else if (isCustomComponentTag) {
       DOMPropertyOperations.setValueForAttribute(domElement, propKey, nextProp);
-    } else if (
-      DOMProperty.properties[propKey] ||
-      DOMProperty.isCustomAttribute(propKey)
-    ) {
+    } else if (!DOMProperty.isReservedProp(propKey)) {
       // If we're updating to null or undefined, we should remove the property
       // from the DOM node instead of inadvertently setting to a string. This
       // brings us in line with the same behavior we have on initial render.
@@ -275,10 +272,7 @@ function updateDOMProperties(
       } else {
         DOMPropertyOperations.deleteValueForAttribute(domElement, propKey);
       }
-    } else if (
-      DOMProperty.properties[propKey] ||
-      DOMProperty.isCustomAttribute(propKey)
-    ) {
+    } else if (!DOMProperty.isReservedProp(propKey)) {
       // If we're updating to null or undefined, we should remove the property
       // from the DOM node instead of inadvertently setting to a string. This
       // brings us in line with the same behavior we have on initial render.
@@ -992,7 +986,6 @@ var ReactDOMFiberComponent = {
       } else if (__DEV__) {
         // Validate that the properties correspond to their expected values.
         var serverValue;
-        var propertyInfo;
         if (
           propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||
           // Controlled attributes are not validated
@@ -1019,28 +1012,25 @@ var ReactDOMFiberComponent = {
           if (expectedStyle !== serverValue) {
             warnForPropDifference(propKey, serverValue, expectedStyle);
           }
-        } else if (
-          isCustomComponentTag ||
-          DOMProperty.isCustomAttribute(propKey)
-        ) {
-          // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propKey);
-          serverValue = DOMPropertyOperations.getValueForAttribute(
-            domElement,
-            propKey,
-            nextProp,
-          );
-          if (nextProp !== serverValue) {
-            warnForPropDifference(propKey, serverValue, nextProp);
+        } else if (!DOMProperty.isReservedProp(propKey)) {
+          if (!isCustomComponentTag) {
+            // $FlowFixMe - Should be inferred as not undefined.
+            extraAttributeNames.delete(DOMProperty.getAttributeName(propKey));
+            serverValue = DOMPropertyOperations.getValueForProperty(
+              domElement,
+              propKey,
+              nextProp,
+            );
+          } else {
+            // $FlowFixMe - Should be inferred as not undefined.
+            extraAttributeNames.delete(propKey);
+            serverValue = DOMPropertyOperations.getValueForAttribute(
+              domElement,
+              propKey,
+              nextProp,
+            );
           }
-        } else if ((propertyInfo = DOMProperty.properties[propKey])) {
-          // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propertyInfo.attributeName);
-          serverValue = DOMPropertyOperations.getValueForProperty(
-            domElement,
-            propKey,
-            nextProp,
-          );
+
           if (nextProp !== serverValue) {
             warnForPropDifference(propKey, serverValue, nextProp);
           }

src/renderers/dom/fiber/ReactDOMFiberEntry.js

@@ -65,7 +65,6 @@ if (__DEV__) {
 }
 
 require('ReactDOMClientInjection');
-require('ReactDOMInjection');
 ReactControlledComponent.injection.injectFiberControlledHostComponent(
   ReactDOMFiberComponent,
 );

src/renderers/dom/shared/DOMMarkupOperations.js

@@ -50,13 +50,13 @@ function isAttributeNameSafe(attributeName) {
 
 // shouldIgnoreValue() is currently duplicated in DOMPropertyOperations.
 // TODO: Find a better place for this.
-function shouldIgnoreValue(propertyInfo, value) {
+function shouldIgnoreValue(name, value) {
   return (
     value == null ||
-    (propertyInfo.hasBooleanValue && !value) ||
-    (propertyInfo.hasNumericValue && isNaN(value)) ||
-    (propertyInfo.hasPositiveNumericValue && value < 1) ||
-    (propertyInfo.hasOverloadedBooleanValue && value === false)
+    (DOMProperty.isBooleanValue(name) && !value) ||
+    (DOMProperty.isNumericValue(name) && isNaN(value)) ||
+    (DOMProperty.isPositiveNumericValue(name) && value < 1) ||
+    (DOMProperty.isOverloadedBooleanValue(name) && value === false)
   );
 }
 
@@ -88,28 +88,20 @@ var DOMMarkupOperations = {
    * @return {?string} Markup string, or null if the property was invalid.
    */
   createMarkupForProperty: function(name, value) {
-    var propertyInfo = DOMProperty.properties.hasOwnProperty(name)
-      ? DOMProperty.properties[name]
-      : null;
-    if (propertyInfo) {
-      if (shouldIgnoreValue(propertyInfo, value)) {
-        return '';
-      }
-      var attributeName = propertyInfo.attributeName;
-      if (
-        propertyInfo.hasBooleanValue ||
-        (propertyInfo.hasOverloadedBooleanValue && value === true)
-      ) {
-        return attributeName + '=""';
-      }
-      return attributeName + '=' + quoteAttributeValueForBrowser(value);
-    } else if (DOMProperty.isCustomAttribute(name)) {
-      if (value == null) {
-        return '';
-      }
-      return name + '=' + quoteAttributeValueForBrowser(value);
+    if (!DOMProperty.isWriteable(name, value)) {
+      return null;
     }
-    return null;
+
+    if (shouldIgnoreValue(name, value)) {
+      return '';
+    }
+
+    var attributeName = DOMProperty.getAttributeName(name);
+    if (DOMProperty.needsEmptyStringValue(name, value)) {
+      return attributeName + '=""';
+    }
+
+    return attributeName + '=' + quoteAttributeValueForBrowser(value);
   },
 
   /**