diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js index cef4609497..64ac53d33c 100644 --- a/packages/react-dom/src/shared/DOMProperty.js +++ b/packages/react-dom/src/shared/DOMProperty.js @@ -320,35 +320,55 @@ const properties = {}; 'multiple', 'muted', 'selected', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. ].forEach(name => { properties[name] = new PropertyInfoRecord( name, BOOLEAN, true, // mustUseProperty - name.toLowerCase(), // attributeName + name, // attributeName null, // attributeNamespace ); }); // These are HTML attributes that are "overloaded booleans": they behave like // booleans, but can also accept a string value. -['capture', 'download'].forEach(name => { +[ + 'capture', + 'download', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. +].forEach(name => { properties[name] = new PropertyInfoRecord( name, OVERLOADED_BOOLEAN, false, // mustUseProperty - name.toLowerCase(), // attributeName + name, // attributeName null, // attributeNamespace ); }); // These are HTML attributes that must be positive numbers. -['cols', 'rows', 'size', 'span'].forEach(name => { +[ + 'cols', + 'rows', + 'size', + 'span', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. +].forEach(name => { properties[name] = new PropertyInfoRecord( name, POSITIVE_NUMERIC, false, // mustUseProperty - name.toLowerCase(), // attributeName + name, // attributeName null, // attributeNamespace ); }); @@ -446,6 +466,10 @@ const capitalize = token => token[1].toUpperCase(); 'writing-mode', 'xmlns:xlink', 'x-height', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. ].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); properties[name] = new PropertyInfoRecord( @@ -466,6 +490,10 @@ const capitalize = token => token[1].toUpperCase(); 'xlink:show', 'xlink:title', 'xlink:type', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. ].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); properties[name] = new PropertyInfoRecord( @@ -478,7 +506,15 @@ const capitalize = token => token[1].toUpperCase(); }); // String SVG attributes with the xml namespace. -['xml:base', 'xml:lang', 'xml:space'].forEach(attributeName => { +[ + 'xml:base', + 'xml:lang', + 'xml:space', + + // NOTE: if you add a camelCased prop to this list, + // you'll need to set attributeName to name.toLowerCase() + // instead in the assignment below. +].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); properties[name] = new PropertyInfoRecord( name,