Allow custom attributes by default

docs/warnings/unknown-prop.md

@@ -3,7 +3,7 @@ title: Unknown Prop Warning
 layout: single
 permalink: warnings/unknown-prop.html
 ---
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is either unrecognized by React as a legal DOM attribute/property, or is not a string, number, or boolean value. You should ensure that your DOM elements do not have spurious props floating around.
 
 There are a couple of likely reasons this warning could be appearing:
 

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.shouldSetAttribute(propKey, nextProp)) {
       // 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.shouldSetAttribute(propKey, propValue)) {
       // 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.
@@ -928,8 +922,7 @@ var ReactDOMFiberComponent = {
       var extraAttributeNames: Set<string> = new Set();
       var attributes = domElement.attributes;
       for (var i = 0; i < attributes.length; i++) {
-        // TODO: Do we need to lower case this to get case insensitive matches?
-        var name = attributes[i].name;
+        var name = attributes[i].name.toLowerCase();
         switch (name) {
           // Built-in attributes are whitelisted
           // TODO: Once these are gone from the server renderer, we don't need
@@ -1019,28 +1012,37 @@ var ReactDOMFiberComponent = {
           if (expectedStyle !== serverValue) {
             warnForPropDifference(propKey, serverValue, expectedStyle);
           }
-        } else if (
-          isCustomComponentTag ||
-          DOMProperty.isCustomAttribute(propKey)
-        ) {
+        } else if (isCustomComponentTag) {
           // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propKey);
+          extraAttributeNames.delete(propKey.toLowerCase());
           serverValue = DOMPropertyOperations.getValueForAttribute(
             domElement,
             propKey,
             nextProp,
           );
+
           if (nextProp !== serverValue) {
             warnForPropDifference(propKey, serverValue, nextProp);
           }
-        } else if ((propertyInfo = DOMProperty.properties[propKey])) {
-          // $FlowFixMe - Should be inferred as not undefined.
-          extraAttributeNames.delete(propertyInfo.attributeName);
-          serverValue = DOMPropertyOperations.getValueForProperty(
-            domElement,
-            propKey,
-            nextProp,
-          );
+        } else if (DOMProperty.shouldSetAttribute(propKey, nextProp)) {
+          if ((propertyInfo = DOMProperty.properties[propKey])) {
+            // $FlowFixMe - Should be inferred as not undefined.
+            extraAttributeNames.delete(propertyInfo.attributeName);
+            serverValue = DOMPropertyOperations.getValueForProperty(
+              domElement,
+              propKey,
+              nextProp,
+            );
+          } else {
+            // $FlowFixMe - Should be inferred as not undefined.
+            extraAttributeNames.delete(propKey.toLowerCase());
+            serverValue = DOMPropertyOperations.getValueForAttribute(
+              domElement,
+              propKey,
+              nextProp,
+            );
+          }
+
           if (nextProp !== serverValue) {
             warnForPropDifference(propKey, serverValue, nextProp);
           }

src/renderers/dom/shared/DOMMarkupOperations.js

@@ -103,7 +103,7 @@ var DOMMarkupOperations = {
         return attributeName + '=""';
       }
       return attributeName + '=' + quoteAttributeValueForBrowser(value);
-    } else if (DOMProperty.isCustomAttribute(name)) {
+    } else if (DOMProperty.shouldSetAttribute(name, value)) {
       if (value == null) {
         return '';
       }

src/renderers/dom/shared/DOMProperty.js

@@ -13,6 +13,18 @@
 
 var invariant = require('fbjs/lib/invariant');
 
+var RESERVED_PROPS = {
+  children: true,
+  dangerouslySetInnerHTML: true,
+  autoFocus: true,
+  defaultValue: true,
+  defaultChecked: true,
+  innerHTML: true,
+  suppressContentEditableWarning: true,
+  onFocusIn: true,
+  onFocusOut: true,
+};
+
 function checkMask(value, bitmask) {
   return (value & bitmask) === bitmask;
 }
@@ -32,11 +44,6 @@ var DOMPropertyInjection = {
    * Inject some specialized knowledge about the DOM. This takes a config object
    * with the following properties:
    *
-   * isCustomAttribute: function that given an attribute name will return true
-   * if it can be inserted into the DOM verbatim. Useful for data-* or aria-*
-   * attributes where it's impossible to enumerate all of the possible
-   * attribute names,
-   *
    * Properties: object mapping DOM property name to one of the
    * DOMPropertyInjection constants or null. If your attribute isn't in here,
    * it won't get written to the DOM.
@@ -64,12 +71,6 @@ var DOMPropertyInjection = {
     var DOMPropertyNames = domPropertyConfig.DOMPropertyNames || {};
     var DOMMutationMethods = domPropertyConfig.DOMMutationMethods || {};
 
-    if (domPropertyConfig.isCustomAttribute) {
-      DOMProperty._isCustomAttributeFunctions.push(
-        domPropertyConfig.isCustomAttribute,
-      );
-    }
-
     for (var propName in Properties) {
       invariant(
         !DOMProperty.properties.hasOwnProperty(propName),
@@ -117,6 +118,13 @@ var DOMPropertyInjection = {
 
       if (DOMAttributeNames.hasOwnProperty(propName)) {
         var attributeName = DOMAttributeNames[propName];
+
+        DOMProperty.aliases[attributeName.toLowerCase()] = true;
+
+        if (lowerCased !== attributeName) {
+          DOMProperty.aliases[lowerCased] = true;
+        }
+
         propertyInfo.attributeName = attributeName;
         if (__DEV__) {
           DOMProperty.getPossibleStandardName[attributeName] = propName;
@@ -196,6 +204,13 @@ var DOMProperty = {
    */
   properties: {},
 
+  /**
+   * Some attributes are aliased for easier use within React. We don't
+   * allow direct use of these attributes. See DOMAttributeNames in
+   * HTMLPropertyConfig and SVGPropertyConfig.
+   */
+  aliases: {},
+
   /**
    * Mapping from lowercase property names to the properly cased version, used
    * to warn in the case of missing properties. Available only in __DEV__.
@@ -208,22 +223,47 @@ var DOMProperty = {
   getPossibleStandardName: __DEV__ ? {autofocus: 'autoFocus'} : null,
 
   /**
-   * All of the isCustomAttribute() functions that have been injected.
-   */
-  _isCustomAttributeFunctions: [],
-
-  /**
-   * Checks whether a property name is a custom attribute.
+   * Checks whether a property name is a writeable attribute.
    * @method
    */
-  isCustomAttribute: function(attributeName) {
-    for (var i = 0; i < DOMProperty._isCustomAttributeFunctions.length; i++) {
-      var isCustomAttributeFn = DOMProperty._isCustomAttributeFunctions[i];
-      if (isCustomAttributeFn(attributeName)) {
+  shouldSetAttribute: function(name, value) {
+    if (
+      DOMProperty.isReservedProp(name) ||
+      DOMProperty.aliases.hasOwnProperty(name)
+    ) {
+      return false;
+    }
+
+    if (DOMProperty.properties.hasOwnProperty(name)) {
+      return true;
+    }
+
+    if (value === null) {
+      return true;
+    }
+
+    switch (typeof value) {
+      case 'undefined':
+      case 'boolean':
+      case 'number':
+      case 'string':
         return true;
-      }
+      default:
+        return false;
     }
-    return false;
+  },
+
+  /**
+   * Checks to see if a property name is within the list of properties
+   * reserved for internal React operations. These properties should
+   * not be set on an HTML element.
+   *
+   * @private
+   * @param {string} name
+   * @return {boolean} If the name is within reserved props
+   */
+  isReservedProp(name) {
+    return RESERVED_PROPS.hasOwnProperty(name);
   },
 
   injection: DOMPropertyInjection,

src/renderers/dom/shared/DOMPropertyOperations.js

@@ -194,7 +194,7 @@ var DOMPropertyOperations = {
           node.setAttribute(attributeName, '' + value);
         }
       }
-    } else if (DOMProperty.isCustomAttribute(name)) {
+    } else if (DOMProperty.shouldSetAttribute(name, value)) {
       DOMPropertyOperations.setValueForAttribute(node, name, value);
       return;
     }
@@ -272,7 +272,7 @@ var DOMPropertyOperations = {
       } else {
         node.removeAttribute(propertyInfo.attributeName);
       }
-    } else if (DOMProperty.isCustomAttribute(name)) {
+    } else {
       node.removeAttribute(name);
     }
 

src/renderers/dom/shared/HTMLDOMPropertyConfig.js

@@ -22,9 +22,6 @@ var HAS_OVERLOADED_BOOLEAN_VALUE =
   DOMProperty.injection.HAS_OVERLOADED_BOOLEAN_VALUE;
 
 var HTMLDOMPropertyConfig = {
-  isCustomAttribute: RegExp.prototype.test.bind(
-    new RegExp('^(data|aria)-[' + DOMProperty.ATTRIBUTE_NAME_CHAR + ']*$'),
-  ),
   Properties: {
     /**
      * Standard Properties
@@ -205,6 +202,9 @@ var HTMLDOMPropertyConfig = {
     security: 0,
     // IE-only attribute that controls focus behavior
     unselectable: 0,
+    // Facebook internal attribute. This is an object attribute that
+    // impliments a custom toString() method
+    ajaxify: 0,
   },
   DOMAttributeNames: {
     acceptCharset: 'accept-charset',