Add support behind enableNewBooleanProps flag

Author: eps1lon

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

@@ -10,6 +10,7 @@
 import {
   enableFilterEmptyStringAttributesDOM,
   enableCustomElementPropertySupport,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
@@ -327,7 +328,7 @@ reservedProps.forEach(name => {
 });
 
 // These are HTML boolean attributes.
-[
+const htmlBooleanAttributes = [
   'allowFullScreen',
   'async',
   // Note: there is a special case that prevents it from being written to the DOM
@@ -342,7 +343,6 @@ reservedProps.forEach(name => {
   'disableRemotePlayback',
   'formNoValidate',
   'hidden',
-  'inert',
   'loop',
   'noModule',
   'noValidate',
@@ -355,7 +355,13 @@ reservedProps.forEach(name => {
   'seamless',
   // Microdata
   'itemScope',
-].forEach(name => {
+];
+
+if (enableNewBooleanProps) {
+  htmlBooleanAttributes.push('inert');
+}
+
+htmlBooleanAttributes.forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     BOOLEAN,

packages/react-dom/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
@@ -81,7 +82,6 @@ const possibleStandardNames = {
   id: 'id',
   imagesizes: 'imageSizes',
   imagesrcset: 'imageSrcSet',
-  inert: 'inert',
   innerhtml: 'innerHTML',
   inputmode: 'inputMode',
   integrity: 'integrity',
@@ -500,4 +500,8 @@ const possibleStandardNames = {
   zoomandpan: 'zoomAndPan',
 };
 
+if (enableNewBooleanProps) {
+  possibleStandardNames.inert = 'inert';
+}
+
 export default possibleStandardNames;

packages/shared/ReactFeatureFlags.js

@@ -182,6 +182,13 @@ export const enableFilterEmptyStringAttributesDOM = false;
 // 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

@@ -72,6 +72,7 @@ export const enableLegacyHidden = true;
 export const enableSyncDefaultUpdates = true;
 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

@@ -62,6 +62,7 @@ export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = 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

@@ -62,6 +62,7 @@ export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = 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.www.js

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

packages/shared/forks/ReactFeatureFlags.testing.js

@@ -62,6 +62,7 @@ export const enableLegacyHidden = false;
 export const enableSyncDefaultUpdates = 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.testing.www.js

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

packages/shared/forks/ReactFeatureFlags.www.js

@@ -107,6 +107,8 @@ export const enableUseMutableSource = true;
 
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
 
+export const enableNewBooleanProps = __EXPERIMENTAL__;
+
 export const enableSymbolFallbackForWWW = true;
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars