From 7d30cad38ebb971039d10aa6bfff804f98dd6657 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 15 Jun 2022 17:48:45 +0200
Subject: [PATCH 01/11] Support boolean values for `inert` prop

---
 .../attribute-behavior/AttributeTableSnapshot.md   | 14 +++++++-------
 .../src/client/ReactDOMComponent.js                |  1 +
 .../src/shared/ReactDOMUnknownPropertyHook.js      |  1 +
 .../src/shared/possibleStandardNames.js            |  1 +
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index f3a8ebfde9923..d95bc47855574 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -5427,20 +5427,20 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `inert=(string)`| (changed)| `<boolean: true>` |
-| `inert=(empty string)`| (changed)| `<boolean: true>` |
+| `inert=(empty string)`| (initial)| `<boolean: false>` |
 | `inert=(array with string)`| (changed)| `<boolean: true>` |
 | `inert=(empty array)`| (changed)| `<boolean: true>` |
 | `inert=(object)`| (changed)| `<boolean: true>` |
 | `inert=(numeric string)`| (changed)| `<boolean: true>` |
 | `inert=(-1)`| (changed)| `<boolean: true>` |
-| `inert=(0)`| (changed)| `<boolean: true>` |
+| `inert=(0)`| (initial)| `<boolean: false>` |
 | `inert=(integer)`| (changed)| `<boolean: true>` |
-| `inert=(NaN)`| (changed, warning)| `<boolean: true>` |
+| `inert=(NaN)`| (initial, warning)| `<boolean: false>` |
 | `inert=(float)`| (changed)| `<boolean: true>` |
-| `inert=(true)`| (initial, warning)| `<boolean: false>` |
-| `inert=(false)`| (initial, warning)| `<boolean: false>` |
-| `inert=(string 'true')`| (changed)| `<boolean: true>` |
-| `inert=(string 'false')`| (changed)| `<boolean: true>` |
+| `inert=(true)`| (changed)| `<boolean: true>` |
+| `inert=(false)`| (initial)| `<boolean: false>` |
+| `inert=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `inert=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `inert=(string 'on')`| (changed)| `<boolean: true>` |
 | `inert=(string 'off')`| (changed)| `<boolean: true>` |
 | `inert=(symbol)`| (initial, warning)| `<boolean: false>` |
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index d54573bdffbb1..a31a3d1cf1793 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -723,6 +723,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
+    case 'inert':
     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 0648059695ecb..555329435c909 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -224,6 +224,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
+          case 'inert':
           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 bd093192a3d32..6c06b47c64ac7 100644
--- a/packages/react-dom-bindings/src/shared/possibleStandardNames.js
+++ b/packages/react-dom-bindings/src/shared/possibleStandardNames.js
@@ -82,6 +82,7 @@ const possibleStandardNames = {
   id: 'id',
   imagesizes: 'imageSizes',
   imagesrcset: 'imageSrcSet',
+  inert: 'inert',
   innerhtml: 'innerHTML',
   inputmode: 'inputMode',
   integrity: 'integrity',

From d0a7864b30f4b16ee059e5e4466d7cbba36201e4 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Thu, 16 Jun 2022 19:24:20 +0200
Subject: [PATCH 02/11] 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 a31a3d1cf1793..b3ad6c8163305 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -73,6 +73,7 @@ import {
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -723,7 +724,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case 'inert':
+    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -2509,6 +2510,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 5902ece4d718e..00fd29fa100be 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -34,6 +34,7 @@ import {
   enableFloat,
   enableFormActions,
   enableFizzExternalRuntime,
+  enableNewBooleanProps,
 } from 'shared/ReactFeatureFlags';
 
 import type {
@@ -1289,6 +1290,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 555329435c909..731e86084318d 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 = {};
@@ -224,7 +225,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':
@@ -302,6 +303,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 3326b3bdc74a0..bba9c827654d0 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -237,6 +237,13 @@ export const disableInputAttributeSyncing = false;
 // Disables children for <textarea> elements
 export const disableTextareaChildren = false;
 
+// 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__;
+
 // -----------------------------------------------------------------------------
 // Debugging and DevTools
 // -----------------------------------------------------------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index f56ad6f00eb83..1d2df292b39d0 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -80,6 +80,7 @@ export const enableLegacyHidden = false;
 export const forceConcurrentByDefaultForTesting = false;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = false;
 
 export const enableTransitionTracing = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index b8da8afffbe28..a231451fbcaca 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 0905df2955a05..9a712867cc02b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -62,6 +62,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;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f7673e51cfd0a..f60e737b4cb98 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -63,6 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = true;
+export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index d8b43417dd09d..f6b6be8054609 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -63,6 +63,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;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index 7343b8c1c4732..da51f103dea91 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -22,6 +22,7 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const forceConcurrentByDefaultForTesting = __VARIANT__;
 export const enableUnifiedSyncLane = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
+export const enableNewBooleanProps = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
 export const alwaysThrottleRetries = __VARIANT__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index b51aa5b7ec188..e5dd6cac1ba38 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -102,6 +102,8 @@ export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
+export const enableNewBooleanProps = __EXPERIMENTAL__;
+
 export const enableFizzExternalRuntime = true;
 
 export const forceConcurrentByDefaultForTesting = false;

From e4acfb40a1ecdf95738b7da12d7f73c51cd8290d Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Sat, 6 Jan 2024 19:55:29 +0100
Subject: [PATCH 03/11] Less hacky, more verbose, more runtime impact

---
 .../src/client/ReactDOMComponent.js           | 40 +++++++++++--------
 .../src/server/ReactFizzConfigDOM.js          | 22 +++++-----
 .../src/shared/ReactDOMUnknownPropertyHook.js | 11 ++++-
 3 files changed, 46 insertions(+), 27 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index b3ad6c8163305..22830062e7629 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -724,7 +724,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+    case 'inert':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -736,14 +736,18 @@ function setProp(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        domElement.setAttribute(key, '');
-      } else {
-        domElement.removeAttribute(key);
+      const isNewBooleanProp = key === 'inert';
+      if (enableNewBooleanProps || !isNewBooleanProp) {
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          domElement.setAttribute(key, '');
+        } else {
+          domElement.removeAttribute(key);
+        }
+        break;
       }
-      break;
     }
     // Overloaded Boolean
+    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -2510,7 +2514,7 @@ function diffHydratedGenericElement(
       case 'disableRemotePlayback':
       case 'formNoValidate':
       case 'hidden':
-      case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+      case 'inert':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2522,16 +2526,20 @@ function diffHydratedGenericElement(
       case 'scoped':
       case 'seamless':
       case 'itemScope': {
-        // Some of these need to be lower case to remove them from the extraAttributes list.
-        hydrateBooleanAttribute(
-          domElement,
-          propKey,
-          propKey.toLowerCase(),
-          value,
-          extraAttributes,
-        );
-        continue;
+        const isNewBooleanProp = propKey === 'inert';
+        if (enableNewBooleanProps || !isNewBooleanProp) {
+          // Some of these need to be lower case to remove them from the extraAttributes list.
+          hydrateBooleanAttribute(
+            domElement,
+            propKey,
+            propKey.toLowerCase(),
+            value,
+            extraAttributes,
+          );
+          continue;
+        }
       }
+      // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
       case 'capture':
       case 'download': {
         hydrateOverloadedBooleanAttribute(
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 00fd29fa100be..1fcb29c6fba23 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1290,7 +1290,7 @@ function pushAttribute(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+    case 'inert':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1302,16 +1302,20 @@ function pushAttribute(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      // Boolean
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        target.push(
-          attributeSeparator,
-          stringToChunk(name),
-          attributeEmptyString,
-        );
+      const isNewBooleanProp = name === 'inert';
+      if (enableNewBooleanProps || !isNewBooleanProp) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+        return;
       }
-      return;
     }
+    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // Overloaded Boolean
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index 731e86084318d..e5808958c05bd 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -225,7 +225,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
-          case enableNewBooleanProps ? 'inert' : 'formNoValidate':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -243,6 +242,10 @@ function validateProperty(tagName, name, value, eventRegistry) {
             return true;
           }
           default: {
+            // TODO: Move into above cases once enableNewBooleanProps is removed.
+            if (enableNewBooleanProps && name === 'inert') {
+              return true;
+            }
             const prefix = name.toLowerCase().slice(0, 5);
             if (prefix === 'data-' || prefix === 'aria-') {
               return true;
@@ -303,7 +306,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disableRemotePlayback':
             case 'formNoValidate':
             case 'hidden':
-            case enableNewBooleanProps ? 'inert' : 'formNoValidate':
             case 'loop':
             case 'noModule':
             case 'noValidate':
@@ -317,6 +319,11 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
+            case 'inert':
+              if (enableNewBooleanProps) {
+                break;
+              }
+            // eslint-disable-next-line no-fallthrough -- not flagged after DCE
             default: {
               return true;
             }

From 5ecdc59c502aa940c57e0a9e8b7ab57c441e24a6 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Wed, 17 Jan 2024 16:36:38 +0100
Subject: [PATCH 04/11] Revert "Less hacky, more verbose, more runtime impact"

This reverts commit 133867bd0f1eb9c77b43ba6e3a14276362c3cb39.
---
 .../src/client/ReactDOMComponent.js           | 40 ++++++++-----------
 .../src/server/ReactFizzConfigDOM.js          | 22 +++++-----
 .../src/shared/ReactDOMUnknownPropertyHook.js | 11 +----
 3 files changed, 27 insertions(+), 46 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 22830062e7629..b3ad6c8163305 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -724,7 +724,7 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case 'inert':
+    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -736,18 +736,14 @@ function setProp(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      const isNewBooleanProp = key === 'inert';
-      if (enableNewBooleanProps || !isNewBooleanProp) {
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          domElement.setAttribute(key, '');
-        } else {
-          domElement.removeAttribute(key);
-        }
-        break;
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        domElement.setAttribute(key, '');
+      } else {
+        domElement.removeAttribute(key);
       }
+      break;
     }
     // Overloaded Boolean
-    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -2514,7 +2510,7 @@ function diffHydratedGenericElement(
       case 'disableRemotePlayback':
       case 'formNoValidate':
       case 'hidden':
-      case 'inert':
+      case enableNewBooleanProps ? 'inert' : 'formNoValidate':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2526,20 +2522,16 @@ function diffHydratedGenericElement(
       case 'scoped':
       case 'seamless':
       case 'itemScope': {
-        const isNewBooleanProp = propKey === 'inert';
-        if (enableNewBooleanProps || !isNewBooleanProp) {
-          // Some of these need to be lower case to remove them from the extraAttributes list.
-          hydrateBooleanAttribute(
-            domElement,
-            propKey,
-            propKey.toLowerCase(),
-            value,
-            extraAttributes,
-          );
-          continue;
-        }
+        // Some of these need to be lower case to remove them from the extraAttributes list.
+        hydrateBooleanAttribute(
+          domElement,
+          propKey,
+          propKey.toLowerCase(),
+          value,
+          extraAttributes,
+        );
+        continue;
       }
-      // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
       case 'capture':
       case 'download': {
         hydrateOverloadedBooleanAttribute(
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 1fcb29c6fba23..00fd29fa100be 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1290,7 +1290,7 @@ function pushAttribute(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case 'inert':
+    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1302,20 +1302,16 @@ function pushAttribute(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      const isNewBooleanProp = name === 'inert';
-      if (enableNewBooleanProps || !isNewBooleanProp) {
-        // Boolean
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          target.push(
-            attributeSeparator,
-            stringToChunk(name),
-            attributeEmptyString,
-          );
-        }
-        return;
+      // Boolean
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeEmptyString,
+        );
       }
+      return;
     }
-    // eslint-disable-next-line no-fallthrough -- Re-enable once enableNewBooleanProps is removed.
     case 'capture':
     case 'download': {
       // Overloaded Boolean
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index e5808958c05bd..731e86084318d 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -225,6 +225,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
+          case enableNewBooleanProps ? 'inert' : 'formNoValidate':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -242,10 +243,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             return true;
           }
           default: {
-            // TODO: Move into above cases once enableNewBooleanProps is removed.
-            if (enableNewBooleanProps && name === 'inert') {
-              return true;
-            }
             const prefix = name.toLowerCase().slice(0, 5);
             if (prefix === 'data-' || prefix === 'aria-') {
               return true;
@@ -306,6 +303,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disableRemotePlayback':
             case 'formNoValidate':
             case 'hidden':
+            case enableNewBooleanProps ? 'inert' : 'formNoValidate':
             case 'loop':
             case 'noModule':
             case 'noValidate':
@@ -319,11 +317,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
-            case 'inert':
-              if (enableNewBooleanProps) {
-                break;
-              }
-            // eslint-disable-next-line no-fallthrough -- not flagged after DCE
             default: {
               return true;
             }

From d38c92b7857acfdf467bc09032815f345320428a Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Mon, 29 Jan 2024 17:51:09 +0100
Subject: [PATCH 05/11] Less hacky, leveraging fallthroughs, minor runtime
 impact

---
 .../src/client/ReactDOMComponent.js           | 132 ++++++++++--------
 .../src/server/ReactFizzConfigDOM.js          | 101 ++++++++------
 .../src/shared/ReactDOMUnknownPropertyHook.js |  77 +++++-----
 3 files changed, 173 insertions(+), 137 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index b3ad6c8163305..0c6b0abd6ff9d 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -413,29 +413,29 @@ function setProp(
           setTextContent(domElement, '' + value);
         }
       }
-      break;
+      return;
     }
     // These are very common props and therefore are in the beginning of the switch.
     // TODO: aria-label is a very common prop but allows booleans so is not like the others
     // but should ideally go in this list too.
     case 'className':
       setValueForKnownAttribute(domElement, 'class', value);
-      break;
+      return;
     case 'tabIndex':
       // This has to be case sensitive in SVG.
       setValueForKnownAttribute(domElement, 'tabindex', value);
-      break;
+      return;
     case 'dir':
     case 'role':
     case 'viewBox':
     case 'width':
     case 'height': {
       setValueForKnownAttribute(domElement, key, value);
-      break;
+      return;
     }
     case 'style': {
       setValueForStyles(domElement, value, prevValue);
-      break;
+      return;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
     case 'src':
@@ -467,7 +467,7 @@ function setProp(
             }
           }
           domElement.removeAttribute(key);
-          break;
+          return;
         }
       }
       if (
@@ -477,7 +477,7 @@ function setProp(
         typeof value === 'boolean'
       ) {
         domElement.removeAttribute(key);
-        break;
+        return;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -488,7 +488,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttribute(key, sanitizedValue);
-      break;
+      return;
     }
     case 'action':
     case 'formAction': {
@@ -513,7 +513,7 @@ function setProp(
               'event.preventDefault().' +
               "')",
           );
-          break;
+          return;
         } else if (typeof prevValue === 'function') {
           // When we're switching off a Server Action that was originally hydrated.
           // The server control these fields during SSR that are now trailing.
@@ -565,7 +565,7 @@ function setProp(
         typeof value === 'boolean'
       ) {
         domElement.removeAttribute(key);
-        break;
+        return;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -576,7 +576,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttribute(key, sanitizedValue);
-      break;
+      return;
     }
     case 'onClick': {
       // TODO: This cast may not be sound for SVG, MathML or custom elements.
@@ -586,7 +586,7 @@ function setProp(
         }
         trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
       }
-      break;
+      return;
     }
     case 'onScroll': {
       if (value != null) {
@@ -595,7 +595,7 @@ function setProp(
         }
         listenToNonDelegatedEvent('scroll', domElement);
       }
-      break;
+      return;
     }
     case 'onScrollEnd': {
       if (value != null) {
@@ -604,7 +604,7 @@ function setProp(
         }
         listenToNonDelegatedEvent('scrollend', domElement);
       }
-      break;
+      return;
     }
     case 'dangerouslySetInnerHTML': {
       if (value != null) {
@@ -629,19 +629,19 @@ function setProp(
           }
         }
       }
-      break;
+      return;
     }
     // Note: `option.selected` is not updated if `select.multiple` is
     // disabled with `removeAttribute`. We have special logic for handling this.
     case 'multiple': {
       (domElement: any).multiple =
         value && typeof value !== 'function' && typeof value !== 'symbol';
-      break;
+      return;
     }
     case 'muted': {
       (domElement: any).muted =
         value && typeof value !== 'function' && typeof value !== 'symbol';
-      break;
+      return;
     }
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
@@ -651,14 +651,14 @@ function setProp(
     case 'ref': {
       // TODO: `ref` is pretty common, should we move it up?
       // Noop
-      break;
+      return;
     }
     case 'autoFocus': {
       // We polyfill it separately on the client during commit.
       // We could have excluded it in the property list instead of
       // adding a special case here, but then it wouldn't be emitted
       // on server rendering (but we *do* want to emit it in SSR).
-      break;
+      return;
     }
     case 'xlinkHref': {
       if (
@@ -668,7 +668,7 @@ function setProp(
         typeof value === 'symbol'
       ) {
         domElement.removeAttribute('xlink:href');
-        break;
+        return;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -679,7 +679,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttributeNS(xlinkNamespace, 'xlink:href', sanitizedValue);
-      break;
+      return;
     }
     case 'contentEditable':
     case 'spellCheck':
@@ -710,7 +710,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      break;
+      return;
     }
     // Boolean
     case 'allowFullScreen':
@@ -724,7 +724,6 @@ function setProp(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -736,14 +735,30 @@ function setProp(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        domElement.setAttribute(key, '');
+      if (!enableNewBooleanProps) {
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          domElement.setAttribute(key, '');
+        } else {
+          domElement.removeAttribute(key);
+        }
+        return;
+      }
+    }
+    // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
+    case 'inert': {
+      if (enableNewBooleanProps) {
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          domElement.setAttribute(key, '');
+        } else {
+          domElement.removeAttribute(key);
+        }
+        return;
       } else {
-        domElement.removeAttribute(key);
+        break;
       }
-      break;
     }
     // Overloaded Boolean
+    // fallthrough impossible here because previous cases are exhaustive
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -765,7 +780,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      break;
+      return;
     }
     case 'cols':
     case 'rows':
@@ -786,7 +801,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      break;
+      return;
     }
     case 'rowSpan':
     case 'start': {
@@ -804,7 +819,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      break;
+      return;
     }
     case 'xlinkActuate':
       setValueForNamespacedAttribute(
@@ -813,7 +828,7 @@ function setProp(
         'xlink:actuate',
         value,
       );
-      break;
+      return;
     case 'xlinkArcrole':
       setValueForNamespacedAttribute(
         domElement,
@@ -821,7 +836,7 @@ function setProp(
         'xlink:arcrole',
         value,
       );
-      break;
+      return;
     case 'xlinkRole':
       setValueForNamespacedAttribute(
         domElement,
@@ -829,7 +844,7 @@ function setProp(
         'xlink:role',
         value,
       );
-      break;
+      return;
     case 'xlinkShow':
       setValueForNamespacedAttribute(
         domElement,
@@ -837,7 +852,7 @@ function setProp(
         'xlink:show',
         value,
       );
-      break;
+      return;
     case 'xlinkTitle':
       setValueForNamespacedAttribute(
         domElement,
@@ -845,7 +860,7 @@ function setProp(
         'xlink:title',
         value,
       );
-      break;
+      return;
     case 'xlinkType':
       setValueForNamespacedAttribute(
         domElement,
@@ -853,7 +868,7 @@ function setProp(
         'xlink:type',
         value,
       );
-      break;
+      return;
     case 'xmlBase':
       setValueForNamespacedAttribute(
         domElement,
@@ -861,7 +876,7 @@ function setProp(
         'xml:base',
         value,
       );
-      break;
+      return;
     case 'xmlLang':
       setValueForNamespacedAttribute(
         domElement,
@@ -869,7 +884,7 @@ function setProp(
         'xml:lang',
         value,
       );
-      break;
+      return;
     case 'xmlSpace':
       setValueForNamespacedAttribute(
         domElement,
@@ -877,7 +892,7 @@ function setProp(
         'xml:space',
         value,
       );
-      break;
+      return;
     // Properties that should not be allowed on custom elements.
     case 'is': {
       if (__DEV__) {
@@ -892,33 +907,30 @@ function setProp(
       // However, our tests currently query for it so it's plausible someone
       // else does too so it's break.
       setValueForAttribute(domElement, 'is', value);
-      break;
+      return;
     }
     case 'innerText':
     case 'textContent':
       if (enableCustomElementPropertySupport) {
-        break;
-      }
-    // Fall through
-    default: {
-      if (
-        key.length > 2 &&
-        (key[0] === 'o' || key[0] === 'O') &&
-        (key[1] === 'n' || key[1] === 'N')
-      ) {
-        if (
-          __DEV__ &&
-          registrationNameDependencies.hasOwnProperty(key) &&
-          value != null &&
-          typeof value !== 'function'
-        ) {
-          warnForInvalidEventListener(key, value);
-        }
-      } else {
-        const attributeName = getAttributeAlias(key);
-        setValueForAttribute(domElement, attributeName, value);
+        return;
       }
+  }
+  if (
+    key.length > 2 &&
+    (key[0] === 'o' || key[0] === 'O') &&
+    (key[1] === 'n' || key[1] === 'N')
+  ) {
+    if (
+      __DEV__ &&
+      registrationNameDependencies.hasOwnProperty(key) &&
+      value != null &&
+      typeof value !== 'function'
+    ) {
+      warnForInvalidEventListener(key, value);
     }
+  } else {
+    const attributeName = getAttributeAlias(key);
+    setValueForAttribute(domElement, attributeName, value);
   }
 }
 
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 00fd29fa100be..405b6c7866a89 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1150,11 +1150,11 @@ function pushAttribute(
     // but should ideally go in this list too.
     case 'className': {
       pushStringAttribute(target, 'class', value);
-      break;
+      return;
     }
     case 'tabIndex': {
       pushStringAttribute(target, 'tabindex', value);
-      break;
+      return;
     }
     case 'dir':
     case 'role':
@@ -1162,7 +1162,7 @@ function pushAttribute(
     case 'width':
     case 'height': {
       pushStringAttribute(target, name, value);
-      break;
+      return;
     }
     case 'style': {
       pushStyleAttribute(target, value);
@@ -1290,7 +1290,6 @@ function pushAttribute(
     case 'disableRemotePlayback':
     case 'formNoValidate':
     case 'hidden':
-    case enableNewBooleanProps ? 'inert' : 'formNoValidate':
     case 'loop':
     case 'noModule':
     case 'noValidate':
@@ -1302,16 +1301,34 @@ function pushAttribute(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      // Boolean
-      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-        target.push(
-          attributeSeparator,
-          stringToChunk(name),
-          attributeEmptyString,
-        );
+      if (!enableNewBooleanProps) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+        return;
       }
-      return;
     }
+    // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
+    case 'inert':
+      if (enableNewBooleanProps) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
+        }
+        return;
+      } else {
+        break;
+      }
+    // fallthrough impossible here because previous cases are exhaustive
     case 'capture':
     case 'download': {
       // Overloaded Boolean
@@ -1400,39 +1417,39 @@ function pushAttribute(
     case 'xmlSpace':
       pushStringAttribute(target, 'xml:space', value);
       return;
-    default:
-      if (
-        // shouldIgnoreAttribute
-        // We have already filtered out null/undefined and reserved words.
-        name.length > 2 &&
-        (name[0] === 'o' || name[0] === 'O') &&
-        (name[1] === 'n' || name[1] === 'N')
-      ) {
-        return;
-      }
+  }
 
-      const attributeName = getAttributeAlias(name);
-      if (isAttributeNameSafe(attributeName)) {
-        // shouldRemoveAttribute
-        switch (typeof value) {
-          case 'function':
-          case 'symbol': // eslint-disable-line
-            return;
-          case 'boolean': {
-            const prefix = attributeName.toLowerCase().slice(0, 5);
-            if (prefix !== 'data-' && prefix !== 'aria-') {
-              return;
-            }
-          }
+  if (
+    // shouldIgnoreAttribute
+    // We have already filtered out null/undefined and reserved words.
+    name.length > 2 &&
+    (name[0] === 'o' || name[0] === 'O') &&
+    (name[1] === 'n' || name[1] === 'N')
+  ) {
+    return;
+  }
+
+  const attributeName = getAttributeAlias(name);
+  if (isAttributeNameSafe(attributeName)) {
+    // shouldRemoveAttribute
+    switch (typeof value) {
+      case 'function':
+      case 'symbol': // eslint-disable-line
+        return;
+      case 'boolean': {
+        const prefix = attributeName.toLowerCase().slice(0, 5);
+        if (prefix !== 'data-' && prefix !== 'aria-') {
+          return;
         }
-        target.push(
-          attributeSeparator,
-          stringToChunk(attributeName),
-          attributeAssign,
-          stringToChunk(escapeTextForBrowser(value)),
-          attributeEnd,
-        );
       }
+    }
+    target.push(
+      attributeSeparator,
+      stringToChunk(attributeName),
+      attributeAssign,
+      stringToChunk(escapeTextForBrowser(value)),
+      attributeEnd,
+    );
   }
 }
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index 731e86084318d..da260b8d660b1 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -225,7 +225,7 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
-          case enableNewBooleanProps ? 'inert' : 'formNoValidate':
+          case 'insert':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -239,45 +239,52 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'itemScope':
           case 'capture':
           case 'download': {
-            // Boolean properties can accept boolean values
-            return true;
-          }
-          default: {
-            const prefix = name.toLowerCase().slice(0, 5);
-            if (prefix === 'data-' || prefix === 'aria-') {
+            if (!enableNewBooleanProps) {
+              // Boolean properties can accept boolean values
               return true;
             }
-            if (value) {
-              console.error(
-                'Received `%s` for a non-boolean attribute `%s`.\n\n' +
-                  'If you want to write it to the DOM, pass a string instead: ' +
-                  '%s="%s" or %s={value.toString()}.',
-                value,
-                name,
-                name,
-                value,
-                name,
-              );
+          }
+          // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
+          case 'inert':
+            if (enableNewBooleanProps) {
+              return true;
             } else {
-              console.error(
-                'Received `%s` for a non-boolean attribute `%s`.\n\n' +
-                  'If you want to write it to the DOM, pass a string instead: ' +
-                  '%s="%s" or %s={value.toString()}.\n\n' +
-                  'If you used to conditionally omit it with %s={condition && value}, ' +
-                  'pass %s={condition ? value : undefined} instead.',
-                value,
-                name,
-                name,
-                value,
-                name,
-                name,
-                name,
-              );
+              break;
             }
-            warnedProperties[name] = true;
-            return true;
-          }
         }
+        const prefix = name.toLowerCase().slice(0, 5);
+        if (prefix === 'data-' || prefix === 'aria-') {
+          return true;
+        }
+        if (value) {
+          console.error(
+            'Received `%s` for a non-boolean attribute `%s`.\n\n' +
+              'If you want to write it to the DOM, pass a string instead: ' +
+              '%s="%s" or %s={value.toString()}.',
+            value,
+            name,
+            name,
+            value,
+            name,
+          );
+        } else {
+          console.error(
+            'Received `%s` for a non-boolean attribute `%s`.\n\n' +
+              'If you want to write it to the DOM, pass a string instead: ' +
+              '%s="%s" or %s={value.toString()}.\n\n' +
+              'If you used to conditionally omit it with %s={condition && value}, ' +
+              'pass %s={condition ? value : undefined} instead.',
+            value,
+            name,
+            name,
+            value,
+            name,
+            name,
+            name,
+          );
+        }
+        warnedProperties[name] = true;
+        return true;
       }
       case 'function':
       case 'symbol': // eslint-disable-line

From d68805140eb499e6bb06b380bf37fcb2b4873cc5 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Mon, 29 Jan 2024 18:26:11 +0100
Subject: [PATCH 06/11] Add tests for inert

---
 .../src/__tests__/ReactDOMAttribute-test.js   | 21 +++++++++++++++++++
 ...eactDOMServerIntegrationAttributes-test.js | 20 ++++++++++++++++++
 2 files changed, 41 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
index f6e82f25a5e8a..4fc0c95d76409 100644
--- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -12,12 +12,14 @@
 describe('ReactDOM unknown attribute', () => {
   let React;
   let ReactDOMClient;
+  let ReactFeatureFlags;
   let act;
 
   beforeEach(() => {
     jest.resetModules();
     React = require('react');
     ReactDOMClient = require('react-dom/client');
+    ReactFeatureFlags = require('shared/ReactFeatureFlags');
     act = require('internal-test-utils').act;
   });
 
@@ -88,6 +90,25 @@ describe('ReactDOM unknown attribute', () => {
       expect(el.firstChild.hasAttribute('unknown')).toBe(false);
     });
 
+    it('removes new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<div inert={true} />);
+        });
+      }).toErrorDev(
+        ReactFeatureFlags.enableNewBooleanProps
+          ? []
+          : ['Warning: Received `true` for a non-boolean attribute `inert`.'],
+      );
+
+      expect(el.firstChild.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? '' : null,
+      );
+    });
+
     it('passes through strings', async () => {
       await testUnknownAttributeAssignment('a string', 'a string');
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index 0880f2c6b0557..bf036e0c33aeb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -754,6 +754,26 @@ describe('ReactDOMServerIntegration', () => {
       }
     });
 
+    itRenders('new boolean `true` attributes as strings', async render => {
+      const element = await render(
+        <div inert={true} />,
+        ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,
+      );
+
+      expect(element.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? '' : null,
+      );
+    });
+
+    itRenders('new boolean `false` attributes as strings', async render => {
+      const element = await render(
+        <div inert={false} />,
+        ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,
+      );
+
+      expect(element.getAttribute('inert')).toBe(null);
+    });
+
     itRenders(
       'no unknown attributes for custom elements with null value',
       async render => {

From 4a9daf37fe714f029a3511edb75ecaf63a797529 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Wed, 7 Feb 2024 21:25:26 +0100
Subject: [PATCH 07/11] And another one

---
 .../src/client/ReactDOMComponent.js           | 150 +++++++++---------
 .../src/server/ReactFizzConfigDOM.js          | 114 +++++++------
 .../src/shared/ReactDOMUnknownPropertyHook.js |  85 +++++-----
 3 files changed, 177 insertions(+), 172 deletions(-)

diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 0c6b0abd6ff9d..270935d26025f 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -413,29 +413,29 @@ function setProp(
           setTextContent(domElement, '' + value);
         }
       }
-      return;
+      break;
     }
     // These are very common props and therefore are in the beginning of the switch.
     // TODO: aria-label is a very common prop but allows booleans so is not like the others
     // but should ideally go in this list too.
     case 'className':
       setValueForKnownAttribute(domElement, 'class', value);
-      return;
+      break;
     case 'tabIndex':
       // This has to be case sensitive in SVG.
       setValueForKnownAttribute(domElement, 'tabindex', value);
-      return;
+      break;
     case 'dir':
     case 'role':
     case 'viewBox':
     case 'width':
     case 'height': {
       setValueForKnownAttribute(domElement, key, value);
-      return;
+      break;
     }
     case 'style': {
       setValueForStyles(domElement, value, prevValue);
-      return;
+      break;
     }
     // These attributes accept URLs. These must not allow javascript: URLS.
     case 'src':
@@ -467,7 +467,7 @@ function setProp(
             }
           }
           domElement.removeAttribute(key);
-          return;
+          break;
         }
       }
       if (
@@ -477,7 +477,7 @@ function setProp(
         typeof value === 'boolean'
       ) {
         domElement.removeAttribute(key);
-        return;
+        break;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -488,7 +488,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttribute(key, sanitizedValue);
-      return;
+      break;
     }
     case 'action':
     case 'formAction': {
@@ -513,7 +513,7 @@ function setProp(
               'event.preventDefault().' +
               "')",
           );
-          return;
+          break;
         } else if (typeof prevValue === 'function') {
           // When we're switching off a Server Action that was originally hydrated.
           // The server control these fields during SSR that are now trailing.
@@ -565,7 +565,7 @@ function setProp(
         typeof value === 'boolean'
       ) {
         domElement.removeAttribute(key);
-        return;
+        break;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -576,7 +576,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttribute(key, sanitizedValue);
-      return;
+      break;
     }
     case 'onClick': {
       // TODO: This cast may not be sound for SVG, MathML or custom elements.
@@ -586,7 +586,7 @@ function setProp(
         }
         trapClickOnNonInteractiveElement(((domElement: any): HTMLElement));
       }
-      return;
+      break;
     }
     case 'onScroll': {
       if (value != null) {
@@ -595,7 +595,7 @@ function setProp(
         }
         listenToNonDelegatedEvent('scroll', domElement);
       }
-      return;
+      break;
     }
     case 'onScrollEnd': {
       if (value != null) {
@@ -604,7 +604,7 @@ function setProp(
         }
         listenToNonDelegatedEvent('scrollend', domElement);
       }
-      return;
+      break;
     }
     case 'dangerouslySetInnerHTML': {
       if (value != null) {
@@ -629,19 +629,19 @@ function setProp(
           }
         }
       }
-      return;
+      break;
     }
     // Note: `option.selected` is not updated if `select.multiple` is
     // disabled with `removeAttribute`. We have special logic for handling this.
     case 'multiple': {
       (domElement: any).multiple =
         value && typeof value !== 'function' && typeof value !== 'symbol';
-      return;
+      break;
     }
     case 'muted': {
       (domElement: any).muted =
         value && typeof value !== 'function' && typeof value !== 'symbol';
-      return;
+      break;
     }
     case 'suppressContentEditableWarning':
     case 'suppressHydrationWarning':
@@ -651,14 +651,14 @@ function setProp(
     case 'ref': {
       // TODO: `ref` is pretty common, should we move it up?
       // Noop
-      return;
+      break;
     }
     case 'autoFocus': {
       // We polyfill it separately on the client during commit.
       // We could have excluded it in the property list instead of
       // adding a special case here, but then it wouldn't be emitted
       // on server rendering (but we *do* want to emit it in SSR).
-      return;
+      break;
     }
     case 'xlinkHref': {
       if (
@@ -668,7 +668,7 @@ function setProp(
         typeof value === 'symbol'
       ) {
         domElement.removeAttribute('xlink:href');
-        return;
+        break;
       }
       // `setAttribute` with objects becomes only `[object]` in IE8/9,
       // ('' + value) makes it output the correct toString()-value.
@@ -679,7 +679,7 @@ function setProp(
         enableTrustedTypesIntegration ? value : '' + (value: any),
       ): any);
       domElement.setAttributeNS(xlinkNamespace, 'xlink:href', sanitizedValue);
-      return;
+      break;
     }
     case 'contentEditable':
     case 'spellCheck':
@@ -710,9 +710,15 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      return;
+      break;
     }
     // Boolean
+    case 'inert':
+      if (!enableNewBooleanProps) {
+        setValueForAttribute(domElement, key, value);
+        break;
+      }
+    // fallthrough for new boolean props without the flag on
     case 'allowFullScreen':
     case 'async':
     case 'autoPlay':
@@ -735,30 +741,14 @@ function setProp(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      if (!enableNewBooleanProps) {
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          domElement.setAttribute(key, '');
-        } else {
-          domElement.removeAttribute(key);
-        }
-        return;
-      }
-    }
-    // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
-    case 'inert': {
-      if (enableNewBooleanProps) {
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          domElement.setAttribute(key, '');
-        } else {
-          domElement.removeAttribute(key);
-        }
-        return;
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        domElement.setAttribute(key, '');
       } else {
-        break;
+        domElement.removeAttribute(key);
       }
+      break;
     }
     // Overloaded Boolean
-    // fallthrough impossible here because previous cases are exhaustive
     case 'capture':
     case 'download': {
       // An attribute that can be used as a flag as well as with a value.
@@ -780,7 +770,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      return;
+      break;
     }
     case 'cols':
     case 'rows':
@@ -801,7 +791,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      return;
+      break;
     }
     case 'rowSpan':
     case 'start': {
@@ -819,7 +809,7 @@ function setProp(
       } else {
         domElement.removeAttribute(key);
       }
-      return;
+      break;
     }
     case 'xlinkActuate':
       setValueForNamespacedAttribute(
@@ -828,7 +818,7 @@ function setProp(
         'xlink:actuate',
         value,
       );
-      return;
+      break;
     case 'xlinkArcrole':
       setValueForNamespacedAttribute(
         domElement,
@@ -836,7 +826,7 @@ function setProp(
         'xlink:arcrole',
         value,
       );
-      return;
+      break;
     case 'xlinkRole':
       setValueForNamespacedAttribute(
         domElement,
@@ -844,7 +834,7 @@ function setProp(
         'xlink:role',
         value,
       );
-      return;
+      break;
     case 'xlinkShow':
       setValueForNamespacedAttribute(
         domElement,
@@ -852,7 +842,7 @@ function setProp(
         'xlink:show',
         value,
       );
-      return;
+      break;
     case 'xlinkTitle':
       setValueForNamespacedAttribute(
         domElement,
@@ -860,7 +850,7 @@ function setProp(
         'xlink:title',
         value,
       );
-      return;
+      break;
     case 'xlinkType':
       setValueForNamespacedAttribute(
         domElement,
@@ -868,7 +858,7 @@ function setProp(
         'xlink:type',
         value,
       );
-      return;
+      break;
     case 'xmlBase':
       setValueForNamespacedAttribute(
         domElement,
@@ -876,7 +866,7 @@ function setProp(
         'xml:base',
         value,
       );
-      return;
+      break;
     case 'xmlLang':
       setValueForNamespacedAttribute(
         domElement,
@@ -884,7 +874,7 @@ function setProp(
         'xml:lang',
         value,
       );
-      return;
+      break;
     case 'xmlSpace':
       setValueForNamespacedAttribute(
         domElement,
@@ -892,7 +882,7 @@ function setProp(
         'xml:space',
         value,
       );
-      return;
+      break;
     // Properties that should not be allowed on custom elements.
     case 'is': {
       if (__DEV__) {
@@ -907,30 +897,33 @@ function setProp(
       // However, our tests currently query for it so it's plausible someone
       // else does too so it's break.
       setValueForAttribute(domElement, 'is', value);
-      return;
+      break;
     }
     case 'innerText':
     case 'textContent':
       if (enableCustomElementPropertySupport) {
-        return;
+        break;
+      }
+    // Fall through
+    default: {
+      if (
+        key.length > 2 &&
+        (key[0] === 'o' || key[0] === 'O') &&
+        (key[1] === 'n' || key[1] === 'N')
+      ) {
+        if (
+          __DEV__ &&
+          registrationNameDependencies.hasOwnProperty(key) &&
+          value != null &&
+          typeof value !== 'function'
+        ) {
+          warnForInvalidEventListener(key, value);
+        }
+      } else {
+        const attributeName = getAttributeAlias(key);
+        setValueForAttribute(domElement, attributeName, value);
       }
-  }
-  if (
-    key.length > 2 &&
-    (key[0] === 'o' || key[0] === 'O') &&
-    (key[1] === 'n' || key[1] === 'N')
-  ) {
-    if (
-      __DEV__ &&
-      registrationNameDependencies.hasOwnProperty(key) &&
-      value != null &&
-      typeof value !== 'function'
-    ) {
-      warnForInvalidEventListener(key, value);
     }
-  } else {
-    const attributeName = getAttributeAlias(key);
-    setValueForAttribute(domElement, attributeName, value);
   }
 }
 
@@ -2522,7 +2515,6 @@ function diffHydratedGenericElement(
       case 'disableRemotePlayback':
       case 'formNoValidate':
       case 'hidden':
-      case enableNewBooleanProps ? 'inert' : 'formNoValidate':
       case 'loop':
       case 'noModule':
       case 'noValidate':
@@ -2678,6 +2670,18 @@ function diffHydratedGenericElement(
           extraAttributes,
         );
         continue;
+      case 'inert':
+        if (enableNewBooleanProps) {
+          hydrateBooleanAttribute(
+            domElement,
+            propKey,
+            propKey,
+            value,
+            extraAttributes,
+          );
+          continue;
+        }
+      // fallthrough for new boolean props without the flag on
       default: {
         if (
           // shouldIgnoreAttribute
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 405b6c7866a89..43dde1d9d713a 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -1150,11 +1150,11 @@ function pushAttribute(
     // but should ideally go in this list too.
     case 'className': {
       pushStringAttribute(target, 'class', value);
-      return;
+      break;
     }
     case 'tabIndex': {
       pushStringAttribute(target, 'tabindex', value);
-      return;
+      break;
     }
     case 'dir':
     case 'role':
@@ -1162,7 +1162,7 @@ function pushAttribute(
     case 'width':
     case 'height': {
       pushStringAttribute(target, name, value);
-      return;
+      break;
     }
     case 'style': {
       pushStyleAttribute(target, value);
@@ -1301,34 +1301,16 @@ function pushAttribute(
     case 'scoped':
     case 'seamless':
     case 'itemScope': {
-      if (!enableNewBooleanProps) {
-        // Boolean
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          target.push(
-            attributeSeparator,
-            stringToChunk(name),
-            attributeEmptyString,
-          );
-        }
-        return;
+      // Boolean
+      if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+        target.push(
+          attributeSeparator,
+          stringToChunk(name),
+          attributeEmptyString,
+        );
       }
+      return;
     }
-    // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
-    case 'inert':
-      if (enableNewBooleanProps) {
-        // Boolean
-        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
-          target.push(
-            attributeSeparator,
-            stringToChunk(name),
-            attributeEmptyString,
-          );
-        }
-        return;
-      } else {
-        break;
-      }
-    // fallthrough impossible here because previous cases are exhaustive
     case 'capture':
     case 'download': {
       // Overloaded Boolean
@@ -1417,39 +1399,53 @@ function pushAttribute(
     case 'xmlSpace':
       pushStringAttribute(target, 'xml:space', value);
       return;
-  }
-
-  if (
-    // shouldIgnoreAttribute
-    // We have already filtered out null/undefined and reserved words.
-    name.length > 2 &&
-    (name[0] === 'o' || name[0] === 'O') &&
-    (name[1] === 'n' || name[1] === 'N')
-  ) {
-    return;
-  }
-
-  const attributeName = getAttributeAlias(name);
-  if (isAttributeNameSafe(attributeName)) {
-    // shouldRemoveAttribute
-    switch (typeof value) {
-      case 'function':
-      case 'symbol': // eslint-disable-line
-        return;
-      case 'boolean': {
-        const prefix = attributeName.toLowerCase().slice(0, 5);
-        if (prefix !== 'data-' && prefix !== 'aria-') {
-          return;
+    case 'inert': {
+      if (enableNewBooleanProps) {
+        // Boolean
+        if (value && typeof value !== 'function' && typeof value !== 'symbol') {
+          target.push(
+            attributeSeparator,
+            stringToChunk(name),
+            attributeEmptyString,
+          );
         }
+        return;
       }
     }
-    target.push(
-      attributeSeparator,
-      stringToChunk(attributeName),
-      attributeAssign,
-      stringToChunk(escapeTextForBrowser(value)),
-      attributeEnd,
-    );
+    // fallthrough for new boolean props without the flag on
+    default:
+      if (
+        // shouldIgnoreAttribute
+        // We have already filtered out null/undefined and reserved words.
+        name.length > 2 &&
+        (name[0] === 'o' || name[0] === 'O') &&
+        (name[1] === 'n' || name[1] === 'N')
+      ) {
+        return;
+      }
+
+      const attributeName = getAttributeAlias(name);
+      if (isAttributeNameSafe(attributeName)) {
+        // shouldRemoveAttribute
+        switch (typeof value) {
+          case 'function':
+          case 'symbol': // eslint-disable-line
+            return;
+          case 'boolean': {
+            const prefix = attributeName.toLowerCase().slice(0, 5);
+            if (prefix !== 'data-' && prefix !== 'aria-') {
+              return;
+            }
+          }
+        }
+        target.push(
+          attributeSeparator,
+          stringToChunk(attributeName),
+          attributeAssign,
+          stringToChunk(escapeTextForBrowser(value)),
+          attributeEnd,
+        );
+      }
   }
 }
 
diff --git a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
index da260b8d660b1..29767d8a65ffb 100644
--- a/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom-bindings/src/shared/ReactDOMUnknownPropertyHook.js
@@ -225,7 +225,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'disableRemotePlayback':
           case 'formNoValidate':
           case 'hidden':
-          case 'insert':
           case 'loop':
           case 'noModule':
           case 'noValidate':
@@ -239,52 +238,53 @@ function validateProperty(tagName, name, value, eventRegistry) {
           case 'itemScope':
           case 'capture':
           case 'download': {
-            if (!enableNewBooleanProps) {
+            // Boolean properties can accept boolean values
+            return true;
+          }
+          // fallthrough
+          case 'inert': {
+            if (enableNewBooleanProps) {
               // Boolean properties can accept boolean values
               return true;
             }
           }
-          // fallthrough to have a single implementation for boolean props for all states of `enableNewBooleanProps`
-          case 'inert':
-            if (enableNewBooleanProps) {
+          // fallthrough for new boolean props without the flag on
+          default: {
+            const prefix = name.toLowerCase().slice(0, 5);
+            if (prefix === 'data-' || prefix === 'aria-') {
               return true;
+            }
+            if (value) {
+              console.error(
+                'Received `%s` for a non-boolean attribute `%s`.\n\n' +
+                  'If you want to write it to the DOM, pass a string instead: ' +
+                  '%s="%s" or %s={value.toString()}.',
+                value,
+                name,
+                name,
+                value,
+                name,
+              );
             } else {
-              break;
+              console.error(
+                'Received `%s` for a non-boolean attribute `%s`.\n\n' +
+                  'If you want to write it to the DOM, pass a string instead: ' +
+                  '%s="%s" or %s={value.toString()}.\n\n' +
+                  'If you used to conditionally omit it with %s={condition && value}, ' +
+                  'pass %s={condition ? value : undefined} instead.',
+                value,
+                name,
+                name,
+                value,
+                name,
+                name,
+                name,
+              );
             }
+            warnedProperties[name] = true;
+            return true;
+          }
         }
-        const prefix = name.toLowerCase().slice(0, 5);
-        if (prefix === 'data-' || prefix === 'aria-') {
-          return true;
-        }
-        if (value) {
-          console.error(
-            'Received `%s` for a non-boolean attribute `%s`.\n\n' +
-              'If you want to write it to the DOM, pass a string instead: ' +
-              '%s="%s" or %s={value.toString()}.',
-            value,
-            name,
-            name,
-            value,
-            name,
-          );
-        } else {
-          console.error(
-            'Received `%s` for a non-boolean attribute `%s`.\n\n' +
-              'If you want to write it to the DOM, pass a string instead: ' +
-              '%s="%s" or %s={value.toString()}.\n\n' +
-              'If you used to conditionally omit it with %s={condition && value}, ' +
-              'pass %s={condition ? value : undefined} instead.',
-            value,
-            name,
-            name,
-            value,
-            name,
-            name,
-            name,
-          );
-        }
-        warnedProperties[name] = true;
-        return true;
       }
       case 'function':
       case 'symbol': // eslint-disable-line
@@ -310,7 +310,6 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'disableRemotePlayback':
             case 'formNoValidate':
             case 'hidden':
-            case enableNewBooleanProps ? 'inert' : 'formNoValidate':
             case 'loop':
             case 'noModule':
             case 'noValidate':
@@ -324,6 +323,12 @@ function validateProperty(tagName, name, value, eventRegistry) {
             case 'itemScope': {
               break;
             }
+            case 'inert': {
+              if (enableNewBooleanProps) {
+                break;
+              }
+            }
+            // fallthrough for new boolean props without the flag on
             default: {
               return true;
             }

From b021a070b8e7a931c8f23056e367d9ff184e2b27 Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <sebastian.silbermann@klarna.com>
Date: Tue, 13 Feb 2024 16:47:30 +0100
Subject: [PATCH 08/11] Add warning if you use `inert=""`

---
 .../AttributeTableSnapshot.md                 |  2 +-
 .../src/client/ReactDOMComponent.js           | 30 +++++++++++++++++++
 .../src/server/ReactFizzConfigDOM.js          | 17 +++++++++++
 .../src/__tests__/ReactDOMAttribute-test.js   | 29 ++++++++++++++++++
 ...eactDOMServerIntegrationAttributes-test.js | 19 ++++++++++--
 5 files changed, 94 insertions(+), 3 deletions(-)

diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
index d95bc47855574..8db00f818fbb3 100644
--- a/fixtures/attribute-behavior/AttributeTableSnapshot.md
+++ b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -5427,7 +5427,7 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `inert=(string)`| (changed)| `<boolean: true>` |
-| `inert=(empty string)`| (initial)| `<boolean: false>` |
+| `inert=(empty string)`| (initial, warning)| `<boolean: false>` |
 | `inert=(array with string)`| (changed)| `<boolean: true>` |
 | `inert=(empty array)`| (changed)| `<boolean: true>` |
 | `inert=(object)`| (changed)| `<boolean: true>` |
diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
index 270935d26025f..bd071b4fd17bc 100644
--- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js
+++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js
@@ -87,8 +87,10 @@ let didWarnFormActionType = false;
 let didWarnFormActionName = false;
 let didWarnFormActionTarget = false;
 let didWarnFormActionMethod = false;
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
 let canDiffStyleForHydrationWarning;
 if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
   // IE 11 parses & normalizes the style attribute as opposed to other
   // browsers. It adds spaces and sorts the properties in some
   // non-alphabetical order. Handling that would require sorting CSS
@@ -717,6 +719,19 @@ function setProp(
       if (!enableNewBooleanProps) {
         setValueForAttribute(domElement, key, value);
         break;
+      } else {
+        if (__DEV__) {
+          if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[key]) {
+            didWarnForNewBooleanPropsWithEmptyValue[key] = true;
+            console.error(
+              'Received an empty string for a boolean attribute `%s`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+              key,
+            );
+          }
+        }
       }
     // fallthrough for new boolean props without the flag on
     case 'allowFullScreen':
@@ -2672,6 +2687,21 @@ function diffHydratedGenericElement(
         continue;
       case 'inert':
         if (enableNewBooleanProps) {
+          if (__DEV__) {
+            if (
+              value === '' &&
+              !didWarnForNewBooleanPropsWithEmptyValue[propKey]
+            ) {
+              didWarnForNewBooleanPropsWithEmptyValue[propKey] = true;
+              console.error(
+                'Received an empty string for a boolean attribute `%s`. ' +
+                  'This will treat the attribute as if it were false. ' +
+                  'Either pass `false` to silence this warning, or ' +
+                  'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+                propKey,
+              );
+            }
+          }
           hydrateBooleanAttribute(
             domElement,
             propKey,
diff --git a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
index 43dde1d9d713a..8b45146beabdf 100644
--- a/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
+++ b/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js
@@ -346,6 +346,11 @@ const importMapScriptEnd = stringToPrecomputedChunk('</script>');
 // allow one more header to be captured which means in practice if the limit is approached it will be exceeded
 const DEFAULT_HEADERS_CAPACITY_IN_UTF16_CODE_UNITS = 2000;
 
+let didWarnForNewBooleanPropsWithEmptyValue: {[string]: boolean};
+if (__DEV__) {
+  didWarnForNewBooleanPropsWithEmptyValue = {};
+}
+
 // Allows us to keep track of what we've already written so we can refer back to it.
 // if passed externalRuntimeConfig and the enableFizzExternalRuntime feature flag
 // is set, the server will send instructions via data attributes (instead of inline scripts)
@@ -1401,6 +1406,18 @@ function pushAttribute(
       return;
     case 'inert': {
       if (enableNewBooleanProps) {
+        if (__DEV__) {
+          if (value === '' && !didWarnForNewBooleanPropsWithEmptyValue[name]) {
+            didWarnForNewBooleanPropsWithEmptyValue[name] = true;
+            console.error(
+              'Received an empty string for a boolean attribute `%s`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+              name,
+            );
+          }
+        }
         // Boolean
         if (value && typeof value !== 'function' && typeof value !== 'symbol') {
           target.push(
diff --git a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
index 4fc0c95d76409..402693c407d5c 100644
--- a/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
@@ -109,6 +109,35 @@ describe('ReactDOM unknown attribute', () => {
       );
     });
 
+    it('warns once for empty strings in new boolean props', async () => {
+      const el = document.createElement('div');
+      const root = ReactDOMClient.createRoot(el);
+
+      await expect(async () => {
+        await act(() => {
+          root.render(<div inert="" />);
+        });
+      }).toErrorDev(
+        ReactFeatureFlags.enableNewBooleanProps
+          ? [
+              'Warning: Received an empty string for a boolean attribute `inert`. ' +
+                'This will treat the attribute as if it were false. ' +
+                'Either pass `false` to silence this warning, or ' +
+                'pass `true` if you used an empty string in earlier versions of React to indicate this attribute is true.',
+            ]
+          : [],
+      );
+
+      expect(el.firstChild.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? null : '',
+      );
+
+      // The warning is only printed once.
+      await act(() => {
+        root.render(<div inert="" />);
+      });
+    });
+
     it('passes through strings', async () => {
       await testUnknownAttributeAssignment('a string', 'a string');
     });
diff --git a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
index bf036e0c33aeb..1613ef66994ef 100644
--- a/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMServerIntegrationAttributes-test.js
@@ -754,7 +754,7 @@ describe('ReactDOMServerIntegration', () => {
       }
     });
 
-    itRenders('new boolean `true` attributes as strings', async render => {
+    itRenders('new boolean `true` attributes', async render => {
       const element = await render(
         <div inert={true} />,
         ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,
@@ -765,7 +765,22 @@ describe('ReactDOMServerIntegration', () => {
       );
     });
 
-    itRenders('new boolean `false` attributes as strings', async render => {
+    itRenders('new boolean `""` attributes', async render => {
+      const element = await render(
+        <div inert="" />,
+        ReactFeatureFlags.enableNewBooleanProps
+          ? // Warns since this used to render `inert=""` like `inert={true}`
+            // but now renders it like `inert={false}`.
+            1
+          : 0,
+      );
+
+      expect(element.getAttribute('inert')).toBe(
+        ReactFeatureFlags.enableNewBooleanProps ? null : '',
+      );
+    });
+
+    itRenders('new boolean `false` attributes', async render => {
       const element = await render(
         <div inert={false} />,
         ReactFeatureFlags.enableNewBooleanProps ? 0 : 1,

From d727c7a3e7b21e7639bbce993342b6c8b75b4a04 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 13 Mar 2024 22:14:22 +0100
Subject: [PATCH 09/11] Schedule for next major

---
 packages/shared/ReactFeatureFlags.js               | 14 +++++++-------
 .../forks/ReactFeatureFlags.test-renderer.js       |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index bba9c827654d0..ff03d8849afe2 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -198,6 +198,13 @@ export const enableReactTestRendererWarning = false;
 // before removing them in stable in the next Major
 export const disableLegacyMode = __NEXT_MAJOR__;
 
+// 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 = __NEXT_MAJOR__;
+
 // -----------------------------------------------------------------------------
 // Chopping Block
 //
@@ -237,13 +244,6 @@ export const disableInputAttributeSyncing = false;
 // Disables children for <textarea> elements
 export const disableTextareaChildren = false;
 
-// 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__;
-
 // -----------------------------------------------------------------------------
 // Debugging and DevTools
 // -----------------------------------------------------------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 9a712867cc02b..366e475a4f57a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -62,7 +62,6 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = __EXPERIMENTAL__;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = false;
-export const enableNewBooleanProps = false;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
@@ -100,6 +99,7 @@ export const enableReactTestRendererWarning = false;
 export const enableBigIntSupport = __NEXT_MAJOR__;
 export const disableLegacyMode = __NEXT_MAJOR__;
 export const disableLegacyContext = __NEXT_MAJOR__;
+export const enableNewBooleanProps = __NEXT_MAJOR__;
 
 // Flow magic to verify the exports of this file match the original version.
 ((((null: any): ExportsType): FeatureFlagsType): ExportsType);

From 5f3e32b26809abb8dfc1a87391a21eecc8716d00 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 13 Mar 2024 22:14:53 +0100
Subject: [PATCH 10/11] Turn on for native since RN is not affected

---
 packages/shared/forks/ReactFeatureFlags.native-fb.js            | 2 +-
 packages/shared/forks/ReactFeatureFlags.native-oss.js           | 2 +-
 packages/shared/forks/ReactFeatureFlags.test-renderer.native.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index 1d2df292b39d0..93a8d66ce7da3 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -80,7 +80,7 @@ export const enableLegacyHidden = false;
 export const forceConcurrentByDefaultForTesting = false;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
-export const enableNewBooleanProps = false;
+export const enableNewBooleanProps = true;
 
 export const enableTransitionTracing = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a231451fbcaca..acc051edcc661 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -63,7 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = false;
 export const enableCustomElementPropertySupport = true;
-export const enableNewBooleanProps = false;
+export const enableNewBooleanProps = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
index f60e737b4cb98..fd9531385971b 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
@@ -63,7 +63,7 @@ export const forceConcurrentByDefaultForTesting = false;
 export const enableUnifiedSyncLane = true;
 export const allowConcurrentByDefault = true;
 export const enableCustomElementPropertySupport = true;
-export const enableNewBooleanProps = false;
+export const enableNewBooleanProps = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = false;
 

From cf2173e46ce4a9d63694046d9eef1c8ee6cbc8e1 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Wed, 13 Mar 2024 22:58:06 +0100
Subject: [PATCH 11/11] Use same www strategy as for bigint support

---
 packages/shared/forks/ReactFeatureFlags.www-dynamic.js | 1 -
 packages/shared/forks/ReactFeatureFlags.www.js         | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
index da51f103dea91..7343b8c1c4732 100644
--- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js
@@ -22,7 +22,6 @@ export const enableLazyContextPropagation = __VARIANT__;
 export const forceConcurrentByDefaultForTesting = __VARIANT__;
 export const enableUnifiedSyncLane = __VARIANT__;
 export const enableTransitionTracing = __VARIANT__;
-export const enableNewBooleanProps = __VARIANT__;
 export const enableDeferRootSchedulingToMicrotask = __VARIANT__;
 export const alwaysThrottleRetries = __VARIANT__;
 export const enableDO_NOT_USE_disableStrictPassiveEffect = __VARIANT__;
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index e5dd6cac1ba38..d2364057ecadf 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -102,7 +102,7 @@ export const allowConcurrentByDefault = true;
 
 export const consoleManagedByDevToolsDuringStrictMode = true;
 
-export const enableNewBooleanProps = __EXPERIMENTAL__;
+export const enableNewBooleanProps = false;
 
 export const enableFizzExternalRuntime = true;