Add support behind enableNewBooleanProps flag

Author: eps1lon

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

@@ -72,6 +72,7 @@ import {
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -711,7 +712,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case 'inert':
+    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -2486,6 +2487,7 @@ function diffHydratedGenericElement(
       case 'disableRemotePlayback':
       case 'formNoValidate':
       case 'hidden':
+      case enableNewBooleanProps ? 'inert' : 'formNoValidate':
       case 'loop':
       case 'noModule':
       case 'noValidate':

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

@@ -33,6 +33,7 @@ import {
   enableFloat,
   enableFormActions,
   enableFizzExternalRuntime,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -1294,6 +1295,7 @@ function pushAttribute(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
+    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':

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

@@ -12,6 +12,7 @@ import hasOwnProperty from 'shared/hasOwnProperty';
 import {
   enableCustomElementPropertySupport,
   enableFormActions,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 
 const warnedProperties = {};
@@ -223,7 +224,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
-          case 'inert':
+          case enableNewBooleanProps ? 'inert' : 'formNoValidate':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -301,6 +302,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disableRemotePlayback':
             case 'formNoValidate':
             case 'hidden':
+            case enableNewBooleanProps ? 'inert' : 'formNoValidate':
             case 'loop':
             case 'noModule':
             case 'noValidate':

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

@@ -4,6 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+import {enableNewBooleanProps} from 'shared/ReactFeatureFlags';
 
 // When adding attributes to the HTML or SVG allowed attribute list, be sure to
 // also add them to this module to ensure casing and incorrect name
@@ -82,7 +83,6 @@ const possibleStandardNames = {
   id: 'id',
   imagesizes: 'imageSizes',
   imagesrcset: 'imageSrcSet',
-  inert: 'inert',
   innerhtml: 'innerHTML',
   inputmode: 'inputMode',
   integrity: 'integrity',
@@ -503,4 +503,8 @@ const possibleStandardNames = {
   zoomandpan: 'zoomAndPan',
 };
 
+if (enableNewBooleanProps) {
+  possibleStandardNames.inert = 'inert';
+}
+
 export default possibleStandardNames;

packages/shared/ReactFeatureFlags.js

@@ -196,6 +196,13 @@ export const enableFilterEmptyStringAttributesDOM = __EXPERIMENTAL__;
 // https://github.com/facebook/react/issues/11347
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
+// HTML boolean attributes need a special PropertyInfoRecord.
+// Between support of these attributes in browsers and React supporting them as
+// boolean props library users can use them as `<div someBooleanAttribute="" />`.
+// However, once React considers them as boolean props an empty string will
+// result in false property i.e. break existing usage.
+export const enableNewBooleanProps = __EXPERIMENTAL__;
+
 // Disables children for <textarea> elements
 export const disableTextareaChildren = false;
 

packages/shared/forks/ReactFeatureFlags.native-fb.js

@@ -81,6 +81,7 @@ export const enableLegacyHidden = true;
 export const forceConcurrentByDefaultForTesting = false;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;

packages/shared/forks/ReactFeatureFlags.native-oss.js

@@ -66,6 +66,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = false;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.js

@@ -66,6 +66,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = __EXPERIMENTAL__;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = false;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.native.js

@@ -64,6 +64,7 @@ export const enableLegacyHidden = false;
 export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;

packages/shared/forks/ReactFeatureFlags.test-renderer.www.js

@@ -66,6 +66,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = false;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 export const enableServerContext = false;