From 0f967dc324359a6ff8d1641abf7a592bfd8432d6 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Thu, 16 Jun 2022 19:24:20 +0200 Subject: [PATCH] Add support behind `enableNewBooleanProps` flag --- packages/react-dom/src/shared/DOMProperty.js | 12 +++++++++--- .../react-dom/src/shared/possibleStandardNames.js | 6 +++++- packages/shared/ReactFeatureFlags.js | 7 +++++++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 1 + .../shared/forks/ReactFeatureFlags.native-oss.js | 1 + .../shared/forks/ReactFeatureFlags.test-renderer.js | 1 + .../forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.testing.js | 1 + .../shared/forks/ReactFeatureFlags.testing.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 2 ++ 10 files changed, 29 insertions(+), 4 deletions(-) diff --git a/packages/react-dom/src/shared/DOMProperty.js b/packages/react-dom/src/shared/DOMProperty.js index e7b3bb622bb64..d5c8cfa05d9cc 100644 --- a/packages/react-dom/src/shared/DOMProperty.js +++ b/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, diff --git a/packages/react-dom/src/shared/possibleStandardNames.js b/packages/react-dom/src/shared/possibleStandardNames.js index a3a61684a1a8a..3c2d0bbad44e8 100644 --- a/packages/react-dom/src/shared/possibleStandardNames.js +++ b/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; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 6b666217f41ba..fa682e9f07fb2 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -179,6 +179,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 `
`. +// 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