[cleanup] remove enableHostSingletons feature flag (facebook#27583)

The flag is enabled everywhere, I think we can remove it now.

Author: kassens

packages/react-dom-bindings/src/client/ReactDOMComponent.js

@@ -69,7 +69,6 @@ import {
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
   enableFormActions,
-  enableHostSingletons,
   disableIEWorkarounds,
   enableTrustedTypesIntegration,
   enableFilterEmptyStringAttributesDOM,
@@ -394,16 +393,15 @@ function setProp(
         // show within the <textarea> until it has been focused and blurred again.
         // https://github.com/facebook/react/issues/6731#issuecomment-254874553
         const canSetTextContent =
-          (!enableHostSingletons || tag !== 'body') &&
-          (tag !== 'textarea' || value !== '');
+          tag !== 'body' && (tag !== 'textarea' || value !== '');
         if (canSetTextContent) {
           setTextContent(domElement, value);
         }
       } else if (typeof value === 'number') {
         if (__DEV__) {
           validateTextNesting('' + value, tag);
         }
-        const canSetTextContent = !enableHostSingletons || tag !== 'body';
+        const canSetTextContent = tag !== 'body';
         if (canSetTextContent) {
           setTextContent(domElement, '' + value);
         }
@@ -2822,7 +2820,7 @@ export function diffHydratedProperties(
         // we can get away with it.
         // Host singletons get their children appended and don't use the text
         // content mechanism.
-        if (!enableHostSingletons || tag !== 'body') {
+        if (tag !== 'body') {
           domElement.textContent = (children: any);
         }
       }

packages/react-dom-bindings/src/client/ReactDOMComponentTree.js

@@ -34,11 +34,7 @@ import {
 
 import {getParentSuspenseInstance} from './ReactFiberConfigDOM';
 
-import {
-  enableScopeAPI,
-  enableFloat,
-  enableHostSingletons,
-} from 'shared/ReactFeatureFlags';
+import {enableScopeAPI, enableFloat} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random().toString(36).slice(2);
 const internalInstanceKey = '__reactFiber$' + randomKey;
@@ -180,7 +176,7 @@ export function getInstanceFromNode(node: Node): Fiber | null {
       tag === HostText ||
       tag === SuspenseComponent ||
       (enableFloat ? tag === HostHoistable : false) ||
-      (enableHostSingletons ? tag === HostSingleton : false) ||
+      tag === HostSingleton ||
       tag === HostRoot
     ) {
       return inst;
@@ -200,7 +196,7 @@ export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
   if (
     tag === HostComponent ||
     (enableFloat ? tag === HostHoistable : false) ||
-    (enableHostSingletons ? tag === HostSingleton : false) ||
+    tag === HostSingleton ||
     tag === HostText
   ) {
     // In Fiber this, is just the state node right now. We assume it will be

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

@@ -92,7 +92,6 @@ import {
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableFloat,
-  enableHostSingletons,
   enableTrustedTypesIntegration,
   enableFormActions,
   enableAsyncActions,
@@ -939,32 +938,18 @@ export function unhideTextInstance(
 }
 
 export function clearContainer(container: Container): void {
-  if (enableHostSingletons) {
-    const nodeType = container.nodeType;
-    if (nodeType === DOCUMENT_NODE) {
-      clearContainerSparingly(container);
-    } else if (nodeType === ELEMENT_NODE) {
-      switch (container.nodeName) {
-        case 'HEAD':
-        case 'HTML':
-        case 'BODY':
-          clearContainerSparingly(container);
-          return;
-        default: {
-          container.textContent = '';
-        }
-      }
-    }
-  } else {
-    if (container.nodeType === ELEMENT_NODE) {
-      // We have refined the container to Element type
-      const element: Element = (container: any);
-      element.textContent = '';
-    } else if (container.nodeType === DOCUMENT_NODE) {
-      // We have refined the container to Document type
-      const doc: Document = (container: any);
-      if (doc.documentElement) {
-        doc.removeChild(doc.documentElement);
+  const nodeType = container.nodeType;
+  if (nodeType === DOCUMENT_NODE) {
+    clearContainerSparingly(container);
+  } else if (nodeType === ELEMENT_NODE) {
+    switch (container.nodeName) {
+      case 'HEAD':
+      case 'HTML':
+      case 'BODY':
+        clearContainerSparingly(container);
+        return;
+      default: {
+        container.textContent = '';
       }
     }
   }
@@ -1053,7 +1038,7 @@ export function canHydrateInstance(
     const element: Element = (instance: any);
     const anyProps = (props: any);
     if (element.nodeName.toLowerCase() !== type.toLowerCase()) {
-      if (!inRootOrSingleton || !enableHostSingletons) {
+      if (!inRootOrSingleton) {
         // Usually we error for mismatched tags.
         if (
           enableFormActions &&
@@ -1067,7 +1052,7 @@ export function canHydrateInstance(
         }
       }
       // In root or singleton parents we skip past mismatched instances.
-    } else if (!inRootOrSingleton || !enableHostSingletons) {
+    } else if (!inRootOrSingleton) {
       // Match
       if (
         enableFormActions &&
@@ -1212,7 +1197,7 @@ export function canHydrateTextInstance(
     ) {
       // If we have extra hidden inputs, we don't mismatch. This allows us to
       // embed extra form data in the original form.
-    } else if (!inRootOrSingleton || !enableHostSingletons) {
+    } else if (!inRootOrSingleton) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);
@@ -1230,7 +1215,7 @@ export function canHydrateSuspenseInstance(
   inRootOrSingleton: boolean,
 ): null | SuspenseInstance {
   while (instance.nodeType !== COMMENT_NODE) {
-    if (!inRootOrSingleton || !enableHostSingletons) {
+    if (!inRootOrSingleton) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);
@@ -1292,7 +1277,7 @@ export function canHydrateFormStateMarker(
   inRootOrSingleton: boolean,
 ): null | FormStateMarkerInstance {
   while (instance.nodeType !== COMMENT_NODE) {
-    if (!inRootOrSingleton || !enableHostSingletons) {
+    if (!inRootOrSingleton) {
       return null;
     }
     const nextInstance = getNextHydratableSibling(instance);
@@ -1501,9 +1486,7 @@ export function shouldDeleteUnhydratedTailInstances(
   parentType: string,
 ): boolean {
   return (
-    (enableHostSingletons ||
-      (parentType !== 'head' && parentType !== 'body')) &&
-    (!enableFormActions || (parentType !== 'form' && parentType !== 'button'))
+    !enableFormActions || (parentType !== 'form' && parentType !== 'button')
   );
 }
 

packages/react-dom-bindings/src/events/DOMPluginEventSystem.js

@@ -53,7 +53,6 @@ import {
   enableCreateEventHandleAPI,
   enableScopeAPI,
   enableFloat,
-  enableHostSingletons,
   enableFormActions,
 } from 'shared/ReactFeatureFlags';
 import {
@@ -637,7 +636,7 @@ export function dispatchEventForPluginEventSystem(
               parentTag === HostComponent ||
               parentTag === HostText ||
               (enableFloat ? parentTag === HostHoistable : false) ||
-              (enableHostSingletons ? parentTag === HostSingleton : false)
+              parentTag === HostSingleton
             ) {
               node = ancestorInst = parentNode;
               continue mainLoop;
@@ -695,7 +694,7 @@ export function accumulateSinglePhaseListeners(
     if (
       (tag === HostComponent ||
         (enableFloat ? tag === HostHoistable : false) ||
-        (enableHostSingletons ? tag === HostSingleton : false)) &&
+        tag === HostSingleton) &&
       stateNode !== null
     ) {
       lastHostComponent = stateNode;
@@ -809,7 +808,7 @@ export function accumulateTwoPhaseListeners(
     if (
       (tag === HostComponent ||
         (enableFloat ? tag === HostHoistable : false) ||
-        (enableHostSingletons ? tag === HostSingleton : false)) &&
+        tag === HostSingleton) &&
       stateNode !== null
     ) {
       const currentTarget = stateNode;
@@ -843,11 +842,7 @@ function getParent(inst: Fiber | null): Fiber | null {
     // events to their parent. We could also go through parentNode on the
     // host node but that wouldn't work for React Native and doesn't let us
     // do the portal feature.
-  } while (
-    inst &&
-    inst.tag !== HostComponent &&
-    (!enableHostSingletons ? true : inst.tag !== HostSingleton)
-  );
+  } while (inst && inst.tag !== HostComponent && inst.tag !== HostSingleton);
   if (inst) {
     return inst;
   }
@@ -916,7 +911,7 @@ function accumulateEnterLeaveListenersForEvent(
     if (
       (tag === HostComponent ||
         (enableFloat ? tag === HostHoistable : false) ||
-        (enableHostSingletons ? tag === HostSingleton : false)) &&
+        tag === HostSingleton) &&
       stateNode !== null
     ) {
       const currentTarget = stateNode;

packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js

@@ -24,7 +24,6 @@ import {
 } from '../../client/ReactDOMComponentTree';
 import {accumulateEnterLeaveTwoPhaseListeners} from '../DOMPluginEventSystem';
 
-import {enableHostSingletons} from 'shared/ReactFeatureFlags';
 import {
   HostComponent,
   HostSingleton,
@@ -110,9 +109,7 @@ function extractEvents(
       const tag = to.tag;
       if (
         to !== nearestMounted ||
-        (tag !== HostComponent &&
-          (!enableHostSingletons ? true : tag !== HostSingleton) &&
-          tag !== HostText)
+        (tag !== HostComponent && tag !== HostSingleton && tag !== HostText)
       ) {
         to = null;
       }

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -6202,7 +6202,7 @@ body {
       );
     });
 
-    // @gate enableFloat && enableHostSingletons && enableClientRenderFallbackOnTextMismatch
+    // @gate enableFloat && enableClientRenderFallbackOnTextMismatch
     it('retains styles even when a new html, head, and/body mount', async () => {
       await act(() => {
         const {pipe} = renderToPipeableStream(
@@ -6254,58 +6254,7 @@ body {
       );
     });
 
-    // @gate enableFloat && !enableHostSingletons
-    it('retains styles even when a new html, head, and/body mount - without HostSingleton', async () => {
-      await act(() => {
-        const {pipe} = renderToPipeableStream(
-          <html>
-            <head />
-            <body>
-              <link rel="stylesheet" href="foo" precedence="foo" />
-              <link rel="stylesheet" href="bar" precedence="bar" />
-              server
-            </body>
-          </html>,
-        );
-        pipe(writable);
-      });
-      const errors = [];
-      ReactDOMClient.hydrateRoot(
-        document,
-        <html>
-          <head>
-            <link rel="stylesheet" href="qux" precedence="qux" />
-            <link rel="stylesheet" href="foo" precedence="foo" />
-          </head>
-          <body>client</body>
-        </html>,
-        {
-          onRecoverableError(error) {
-            errors.push(error.message);
-          },
-        },
-      );
-      await expect(async () => {
-        await waitForAll([]);
-      }).toErrorDev(
-        [
-          'Warning: Text content did not match. Server: "server" Client: "client"',
-          'Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.',
-        ],
-        {withoutStack: 1},
-      );
-      expect(getMeaningfulChildren(document)).toEqual(
-        <html>
-          <head>
-            <link rel="stylesheet" href="qux" data-precedence="qux" />
-            <link rel="stylesheet" href="foo" data-precedence="foo" />
-          </head>
-          <body>client</body>
-        </html>,
-      );
-    });
-
-    // @gate enableFloat && enableHostSingletons
+    // @gate enableFloat
     it('retains styles in head through head remounts', async () => {
       const root = ReactDOMClient.createRoot(document);
       root.render(
@@ -8114,7 +8063,7 @@ background-color: green;
       ]);
     });
 
-    // @gate enableFloat && enableHostSingletons && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
+    // @gate enableFloat && (enableClientRenderFallbackOnTextMismatch || !__DEV__)
     it('can render a title before a singleton even if that singleton clears its contents', async () => {
       await act(() => {
         const {pipe} = renderToPipeableStream(

packages/react-dom/src/__tests__/ReactDOMRoot-test.js

@@ -375,7 +375,7 @@ describe('ReactDOMRoot', () => {
     await waitForAll([]);
     container.innerHTML = '';
 
-    if (gate(flags => flags.enableFloat || flags.enableHostSingletons)) {
+    if (gate(flags => flags.enableFloat)) {
       // When either of these flags are on this validation is turned off so we
       // expect there to be no warnings
       root.render(<div>Hi</div>);