Land enableCustomElementPropertySupport for React 19 (#27450)

We've rolled out this flag internally on WWW. This PR removed flag `enableCustomElementPropertySupport` Test plan: -- `yarn test` Co-authored-by: Ricky Hanlon <rickhanlonii@gmail.com>
facebook · Mar 29, 2024 · eb510a3 · eb510a3
1 parent a73c345
commit eb510a3
Show file tree

Hide file tree

Showing 18 changed files with 63 additions and 163 deletions.
diff --git a/packages/react-dom-bindings/src/client/DOMPropertyOperations.js b/packages/react-dom-bindings/src/client/DOMPropertyOperations.js
@@ -8,10 +8,7 @@
  */
 
 import isAttributeNameSafe from '../shared/isAttributeNameSafe';
-import {
-  enableTrustedTypesIntegration,
-  enableCustomElementPropertySupport,
-} from 'shared/ReactFeatureFlags';
+import {enableTrustedTypesIntegration} from 'shared/ReactFeatureFlags';
 import {checkAttributeStringCoercion} from 'shared/CheckStringCoercion';
 import {getFiberCurrentPropsFromNode} from './ReactDOMComponentTree';
 
@@ -73,25 +70,18 @@ export function getValueForAttributeOnCustomComponent(
           // it would be expected that they end up not having an attribute.
           return expected;
         case 'function':
-          if (enableCustomElementPropertySupport) {
-            return expected;
-          }
-          break;
+          return expected;
         case 'boolean':
-          if (enableCustomElementPropertySupport) {
-            if (expected === false) {
-              return expected;
-            }
+          if (expected === false) {
+            return expected;
           }
       }
       return expected === undefined ? undefined : null;
     }
     const value = node.getAttribute(name);
 
-    if (enableCustomElementPropertySupport) {
-      if (value === '' && expected === true) {
-        return true;
-      }
+    if (value === '' && expected === true) {
+      return true;
     }
 
     if (__DEV__) {

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -67,7 +67,6 @@ import sanitizeURL from '../shared/sanitizeURL';
 
 import {
   enableBigIntSupport,
-  enableCustomElementPropertySupport,
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
@@ -870,9 +869,7 @@ function setProp(
     }
     case 'innerText':
     case 'textContent':
-      if (enableCustomElementPropertySupport) {
-        break;
-      }
+      break;
     // Fall through
     default: {
       if (
@@ -983,25 +980,15 @@ function setPropOnCustomElement(
     }
     case 'innerText': // Properties
     case 'textContent':
-      if (enableCustomElementPropertySupport) {
-        break;
-      }
+      break;
     // Fall through
     default: {
       if (registrationNameDependencies.hasOwnProperty(key)) {
         if (__DEV__ && value != null && typeof value !== 'function') {
           warnForInvalidEventListener(key, value);
         }
       } else {
-        if (enableCustomElementPropertySupport) {
-          setValueForPropertyOnCustomComponent(domElement, key, value);
-        } else {
-          if (typeof value === 'boolean') {
-            // Special case before the new flag is on
-            value = '' + (value: any);
-          }
-          setValueForAttribute(domElement, key, value);
-        }
+        setValueForPropertyOnCustomComponent(domElement, key, value);
       }
     }
   }
@@ -2293,35 +2280,30 @@ function diffHydratedCustomComponent(
       case 'isContentEditable':
       case 'outerText':
       case 'outerHTML':
-        if (enableCustomElementPropertySupport) {
-          extraAttributes.delete(propKey.toLowerCase());
-          if (__DEV__) {
-            console.error(
-              'Assignment to read-only property will result in a no-op: `%s`',
-              propKey,
-            );
-          }
-          continue;
-        }
-      // Fall through
-      case 'className':
-        if (enableCustomElementPropertySupport) {
-          // className is a special cased property on the server to render as an attribute.
-          extraAttributes.delete('class');
-          const serverValue = getValueForAttributeOnCustomComponent(
-            domElement,
-            'class',
-            value,
-          );
-          warnForPropDifference(
-            'className',
-            serverValue,
-            value,
-            serverDifferences,
+        extraAttributes.delete(propKey.toLowerCase());
+        if (__DEV__) {
+          console.error(
+            'Assignment to read-only property will result in a no-op: `%s`',
+            propKey,
           );
-          continue;
         }
+        continue;
       // Fall through
+      case 'className':
+        // className is a special cased property on the server to render as an attribute.
+        extraAttributes.delete('class');
+        const serverValue = getValueForAttributeOnCustomComponent(
+          domElement,
+          'class',
+          value,
+        );
+        warnForPropDifference(
+          'className',
+          serverValue,
+          value,
+          serverDifferences,
+        );
+        continue;
       default: {
         // This is a DEV-only path
         const hostContextDev: HostContextDev = (hostContext: any);
@@ -2335,12 +2317,17 @@ function diffHydratedCustomComponent(
         } else {
           extraAttributes.delete(propKey);
         }
-        const serverValue = getValueForAttributeOnCustomComponent(
+        const valueOnCustomComponent = getValueForAttributeOnCustomComponent(
           domElement,
           propKey,
           value,
         );
-        warnForPropDifference(propKey, serverValue, value, serverDifferences);
+        warnForPropDifference(
+          propKey,
+          valueOnCustomComponent,
+          value,
+          serverDifferences,
+        );
       }
     }
   }

diff --git a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js
@@ -26,10 +26,7 @@ import {updateValueIfChanged} from '../../client/inputValueTracking';
 import {setDefaultValue} from '../../client/ReactDOMInput';
 import {enqueueStateRestore} from '../ReactDOMControlledComponent';
 
-import {
-  disableInputAttributeSyncing,
-  enableCustomElementPropertySupport,
-} from 'shared/ReactFeatureFlags';
+import {disableInputAttributeSyncing} from 'shared/ReactFeatureFlags';
 import {batchedUpdates} from '../ReactDOMUpdateBatching';
 import {
   processDispatchQueue,
@@ -311,7 +308,6 @@ function extractEvents(
   } else if (shouldUseClickEvent(targetNode)) {
     getTargetInstFunc = getTargetInstForClickEvent;
   } else if (
-    enableCustomElementPropertySupport &&
     targetInst &&
     isCustomElement(targetInst.elementType, targetInst.memoizedProps)
   ) {

diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -30,7 +30,6 @@ import {Children} from 'react';
 import {
   enableBigIntSupport,
   enableFilterEmptyStringAttributesDOM,
-  enableCustomElementPropertySupport,
   enableFizzExternalRuntime,
   enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
@@ -3342,26 +3341,22 @@ function pushStartCustomElement(
           // Ignored. These are built-in to React on the client.
           break;
         case 'className':
-          if (enableCustomElementPropertySupport) {
-            // className gets rendered as class on the client, so it should be
-            // rendered as class on the server.
-            attributeName = 'class';
-          }
+          // className gets rendered as class on the client, so it should be
+          // rendered as class on the server.
+          attributeName = 'class';
         // intentional fallthrough
         default:
           if (
             isAttributeNameSafe(propKey) &&
             typeof propValue !== 'function' &&
             typeof propValue !== 'symbol'
           ) {
-            if (enableCustomElementPropertySupport) {
-              if (propValue === false) {
-                continue;
-              } else if (propValue === true) {
-                propValue = '';
-              } else if (typeof propValue === 'object') {
-                continue;
-              }
+            if (propValue === false) {
+              continue;
+            } else if (propValue === true) {
+              propValue = '';
+            } else if (typeof propValue === 'object') {
+              continue;
             }
             target.push(
               attributeSeparator,

diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -9,10 +9,7 @@ import {ATTRIBUTE_NAME_CHAR} from './isAttributeNameSafe';
 import isCustomElement from './isCustomElement';
 import possibleStandardNames from './possibleStandardNames';
 import hasOwnProperty from 'shared/hasOwnProperty';
-import {
-  enableCustomElementPropertySupport,
-  enableNewBooleanProps,
-} from 'shared/ReactFeatureFlags';
+import {enableNewBooleanProps} from 'shared/ReactFeatureFlags';
 
 const warnedProperties = {};
 const EVENT_NAME_REGEX = /^on./;
@@ -189,9 +186,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
       }
       case 'innerText': // Properties
       case 'textContent':
-        if (enableCustomElementPropertySupport) {
-          return true;
-        }
+        return true;
     }
 
     switch (typeof value) {