Refactor DOM Bindings Completely Off of DOMProperty Meta Programming

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -16,6 +16,7 @@ import {
 
 import {canUseDOM} from 'shared/ExecutionEnvironment';
 import {checkHtmlStringCoercion} from 'shared/CheckStringCoercion';
+import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 
 import {
   getValueForAttribute,
@@ -363,6 +364,41 @@ function setProp(
       // on server rendering (but we *do* want to emit it in SSR).
       break;
     }
+    case 'contentEditable':
+    case 'spellCheck': {
+      // Lower-case Booleanish String
+      // These are "enumerated" HTML attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      key = key.toLowerCase();
+      // Fall-through to the case-sensitive cases
+    }
+    // eslint-disable-next-line no-fallthrough
+    case 'draggable':
+    case 'value':
+    case 'autoReverse':
+    case 'externalResourcesRequired':
+    case 'focusable':
+    case 'preserveAlpha': {
+      // Case-sensitive Booleanish String
+      // These are "enumerated" SVG attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      // Since these are SVG attributes, their attribute names are case-sensitive.
+      if (
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol'
+      ) {
+        if (__DEV__) {
+          checkAttributeStringCoercion(value, key);
+        }
+        domElement.setAttribute(key, (value: any));
+      } else {
+        domElement.removeAttribute(key);
+      }
+      break;
+    }
     case 'innerText': // Properties
     case 'textContent':
       if (enableCustomElementPropertySupport) {
@@ -1215,8 +1251,9 @@ function diffHydratedGenericElement(
       // Don't bother comparing. We're ignoring all these warnings.
       continue;
     }
+    let key = propKey;
     // Validate that the properties correspond to their expected values.
-    switch (propKey) {
+    switch (key) {
       case 'children': // Checked above already
       case 'suppressContentEditableWarning':
       case 'suppressHydrationWarning':
@@ -1239,34 +1276,82 @@ function diffHydratedGenericElement(
         }
         continue;
       case 'style':
-        extraAttributeNames.delete(propKey);
+        extraAttributeNames.delete(key);
         diffHydratedStyles(domElement, nextProp);
         continue;
       case 'multiple': {
-        extraAttributeNames.delete(propKey);
+        extraAttributeNames.delete(key);
         const serverValue = (domElement: any).multiple;
         if (nextProp !== serverValue) {
-          warnForPropDifference('multiple', serverValue, nextProp);
+          warnForPropDifference(propKey, serverValue, nextProp);
         }
         continue;
       }
       case 'muted': {
-        extraAttributeNames.delete(propKey);
+        extraAttributeNames.delete(key);
         const serverValue = (domElement: any).muted;
         if (nextProp !== serverValue) {
-          warnForPropDifference('muted', serverValue, nextProp);
+          warnForPropDifference(propKey, serverValue, nextProp);
         }
         continue;
       }
       case 'autoFocus': {
         extraAttributeNames.delete('autofocus');
         const serverValue = (domElement: any).autofocus;
         if (nextProp !== serverValue) {
-          warnForPropDifference('autoFocus', serverValue, nextProp);
+          warnForPropDifference(propKey, serverValue, nextProp);
         }
         continue;
       }
-      default:
+      case 'contentEditable':
+      case 'spellCheck': {
+        // Lower-case Booleanish String
+        key = key.toLowerCase();
+        // Fall-through to the case-sensitive cases
+      }
+      // eslint-disable-next-line no-fallthrough
+      case 'draggable':
+      case 'autoReverse':
+      case 'externalResourcesRequired':
+      case 'focusable':
+      case 'preserveAlpha': {
+        // Case-sensitive Booleanish String
+        extraAttributeNames.delete(key);
+        let serverValue = domElement.getAttribute(key);
+        if (serverValue === null) {
+          // shouldRemoveAttribute
+          switch (typeof nextProp) {
+            case 'function':
+            case 'symbol': // eslint-disable-line
+              serverValue = nextProp;
+          }
+          serverValue = nextProp === undefined ? undefined : null;
+        } else {
+          if (nextProp == null) {
+            // We had an attribute but shouldn't have had one, so read it
+            // for the error message.
+          } else {
+            switch (typeof nextProp) {
+              case 'function':
+              case 'symbol': // eslint-disable-line
+                break;
+              default: {
+                if (__DEV__) {
+                  checkAttributeStringCoercion(nextProp, key);
+                }
+                if (serverValue === '' + (nextProp: any)) {
+                  serverValue = nextProp;
+                }
+              }
+            }
+          }
+        }
+        if (serverValue !== nextProp) {
+          warnForPropDifference(propKey, serverValue, nextProp);
+        }
+        continue;
+      }
+      default: {
         if (
           // shouldIgnoreAttribute
           // We have already filtered out null/undefined and reserved words.
@@ -1293,7 +1378,7 @@ function diffHydratedGenericElement(
             ownNamespaceDev = getIntrinsicNamespace(tag);
           }
           if (ownNamespaceDev === HTML_NAMESPACE) {
-            extraAttributeNames.delete(propKey.toLowerCase());
+            extraAttributeNames.delete(key.toLowerCase());
           } else {
             const standardName = getPossibleStandardName(propKey);
             if (standardName !== null && standardName !== propKey) {
@@ -1305,14 +1390,15 @@ function diffHydratedGenericElement(
               isMismatchDueToBadCasing = true;
               extraAttributeNames.delete(standardName);
             }
-            extraAttributeNames.delete(propKey);
+            extraAttributeNames.delete(key);
           }
           serverValue = getValueForAttribute(domElement, propKey, nextProp);
         }
 
         if (nextProp !== serverValue && !isMismatchDueToBadCasing) {
           warnForPropDifference(propKey, serverValue, nextProp);
         }
+      }
     }
   }
 }

packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js

@@ -640,9 +640,46 @@ function pushAttribute(
       return;
     case 'autoFocus':
     case 'multiple':
-    case 'muted':
+    case 'muted': {
       pushBooleanAttribute(target, name.toLowerCase(), value);
       return;
+    }
+    case 'contentEditable':
+    case 'spellCheck': {
+      // Lower-case Booleanish String
+      // These are "enumerated" HTML attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      name = name.toLowerCase();
+      // Fall-through to the case-sensitive cases
+    }
+    // eslint-disable-next-line no-fallthrough
+    case 'draggable':
+    case 'value':
+    case 'autoReverse':
+    case 'externalResourcesRequired':
+    case 'focusable':
+    case 'preserveAlpha': {
+      // Case-sensitive Booleanish String
+      // These are "enumerated" SVG attributes that accept "true" and "false".
+      // In React, we let users pass `true` and `false` even though technically
+      // these aren't boolean attributes (they are coerced to strings).
+      // Since these are SVG attributes, their attribute names are case-sensitive.
+      if (
+        value != null &&
+        typeof value !== 'function' &&
+        typeof value !== 'symbol'
+      ) {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
+      return;
+    }
   }
   if (
     // shouldIgnoreAttribute

packages/react-dom-bindings/src/shared/DOMProperty.js

@@ -13,12 +13,6 @@ type PropertyType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 // Attributes that aren't in the filter are presumed to have this type.
 export const STRING = 1;
 
-// A string attribute that accepts booleans in React. In HTML, these are called
-// "enumerated" attributes with "true" and "false" as possible values.
-// When true, it should be set to a "true" string.
-// When false, it should be set to a "false" string.
-export const BOOLEANISH_STRING = 2;
-
 // A real boolean attribute.
 // When true, it should be present (set either to an empty string or its name).
 // When false, it should be omitted.
@@ -59,10 +53,7 @@ function PropertyInfoRecord(
   sanitizeURL: boolean,
   removeEmptyString: boolean,
 ) {
-  this.acceptsBooleans =
-    type === BOOLEANISH_STRING ||
-    type === BOOLEAN ||
-    type === OVERLOADED_BOOLEAN;
+  this.acceptsBooleans = type === BOOLEAN || type === OVERLOADED_BOOLEAN;
   this.attributeName = attributeName;
   this.attributeNamespace = attributeNamespace;
   this.type = type;
@@ -93,40 +84,6 @@ const properties: {[string]: $FlowFixMe} = {};
   );
 });
 
-// These are "enumerated" HTML attributes that accept "true" and "false".
-// In React, we let users pass `true` and `false` even though technically
-// these aren't boolean attributes (they are coerced to strings).
-['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(name => {
-  // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
-  properties[name] = new PropertyInfoRecord(
-    BOOLEANISH_STRING,
-    name.toLowerCase(), // attributeName
-    null, // attributeNamespace
-    false, // sanitizeURL
-    false, // removeEmptyString
-  );
-});
-
-// These are "enumerated" SVG attributes that accept "true" and "false".
-// In React, we let users pass `true` and `false` even though technically
-// these aren't boolean attributes (they are coerced to strings).
-// Since these are SVG attributes, their attribute names are case-sensitive.
-[
-  'autoReverse',
-  'externalResourcesRequired',
-  'focusable',
-  'preserveAlpha',
-].forEach(name => {
-  // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
-  properties[name] = new PropertyInfoRecord(
-    BOOLEANISH_STRING,
-    name, // attributeName
-    null, // attributeNamespace
-    false, // sanitizeURL
-    false, // removeEmptyString
-  );
-});
-
 // These are HTML boolean attributes.
 [
   'allowFullScreen',

packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js

@@ -188,7 +188,15 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'checked':
           case 'multiple':
           case 'muted':
-          case 'selected': {
+          case 'selected':
+          case 'contentEditable':
+          case 'spellCheck':
+          case 'draggable':
+          case 'value':
+          case 'autoReverse':
+          case 'externalResourcesRequired':
+          case 'focusable':
+          case 'preserveAlpha': {
             // Boolean properties can accept boolean values
             return true;
           }