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',