Add support behind enableNewBooleanProps flag

Author: eps1lon

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

@@ -10,6 +10,7 @@
 import {
   enableFilterEmptyStringAttributesDOM,
   enableCustomElementPropertySupport,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 import hasOwnProperty from 'shared/hasOwnProperty';
 
@@ -331,7 +332,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
@@ -346,7 +347,6 @@ reservedProps.forEach(name => {
   'disableRemotePlayback',
   'formNoValidate',
   'hidden',
-  'inert',
   'loop',
   'noModule',
   'noValidate',
@@ -359,7 +359,13 @@ reservedProps.forEach(name => {
   'seamless',
   // Microdata
   'itemScope',
-].forEach(name => {
+];
+
+if (enableNewBooleanProps) {
+  htmlBooleanAttributes.push('inert');
+}
+
+htmlBooleanAttributes.forEach(name => {
   // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions
   properties[name] = new PropertyInfoRecord(
     name,

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

@@ -183,6 +183,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

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

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

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

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

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

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

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

packages/shared/forks/ReactFeatureFlags.testing.js

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

packages/shared/forks/ReactFeatureFlags.testing.www.js

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

packages/shared/forks/ReactFeatureFlags.www.js

@@ -101,9 +101,11 @@ export const enableServerContext = true;
 export const enableUseMutableSource = true;
 
 export const enableCustomElementPropertySupport = __EXPERIMENTAL__;
+export const enableNewBooleanProps = __EXPERIMENTAL__;
 
 export const useModernStrictMode = false;
 export const enableFizzExternalRuntime = true;
 
+
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);