From 09191f6c124c3282f62f10b9ccbe3e6852b7bcd4 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 --- .../react-dom-bindings/src/client/ReactDOMComponent.js | 4 +++- .../react-dom-bindings/src/server/ReactFizzConfigDOM.js | 2 ++ .../src/shared/ReactDOMUnknownPropertyHook.js | 4 +++- .../react-dom-bindings/src/shared/possibleStandardNames.js | 6 +++++- packages/shared/ReactFeatureFlags.js | 7 +++++++ packages/shared/forks/ReactFeatureFlags.native-fb.js | 1 + packages/shared/forks/ReactFeatureFlags.native-oss.js | 1 + packages/shared/forks/ReactFeatureFlags.test-renderer.js | 1 + .../shared/forks/ReactFeatureFlags.test-renderer.native.js | 1 + .../shared/forks/ReactFeatureFlags.test-renderer.www.js | 1 + packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 + packages/shared/forks/ReactFeatureFlags.www.js | 2 ++ 12 files changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 45695ac035739..24083f509981c 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/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': diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js index 0788f216e5f30..0739ee2d8e571 100644 --- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js +++ b/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': diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js index 7226d3403cda2..8f8f9ae9f2580 100644 --- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js +++ b/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': diff --git a/packages/react-dom-bindings/src/shared/possibleStandardNames.js b/packages/react-dom-bindings/src/shared/possibleStandardNames.js index 6c06b47c64ac7..d2d90877b53d7 100644 --- a/packages/react-dom-bindings/src/shared/possibleStandardNames.js +++ b/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; diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 8841a7bc6a4b5..69a9800caea6c 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/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 `
`. +// 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