Implement HostSingleton Fiber type (#25426)

Author: gnoff

packages/react-art/src/ReactARTHostConfig.js

@@ -244,6 +244,7 @@ export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoResources';
+export * from 'react-reconciler/src/ReactFiberHostConfigWithNoSingletons';
 
 export function appendInitialChild(parentInstance, child) {
   if (typeof child === 'string') {

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

@@ -73,6 +73,7 @@ import {
   enableTrustedTypesIntegration,
   enableCustomElementPropertySupport,
   enableClientRenderFallbackOnTextMismatch,
+  enableHostSingletons,
 } from 'shared/ReactFeatureFlags';
 import {
   mediaEventTypes,
@@ -312,12 +313,17 @@ function setInitialDOMProperties(
         // textContent on a <textarea> will cause the placeholder to not
         // show within the <textarea> until it has been focused and blurred again.
         // https://github.com/facebook/react/issues/6731#issuecomment-254874553
-        const canSetTextContent = tag !== 'textarea' || nextProp !== '';
+        const canSetTextContent =
+          (!enableHostSingletons || tag !== 'body') &&
+          (tag !== 'textarea' || nextProp !== '');
         if (canSetTextContent) {
           setTextContent(domElement, nextProp);
         }
       } else if (typeof nextProp === 'number') {
-        setTextContent(domElement, '' + nextProp);
+        const canSetTextContent = !enableHostSingletons || tag !== 'body';
+        if (canSetTextContent) {
+          setTextContent(domElement, '' + nextProp);
+        }
       }
     } else if (
       propKey === SUPPRESS_CONTENT_EDITABLE_WARNING ||

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

@@ -25,14 +25,19 @@ import type {
 import {
   HostComponent,
   HostResource,
+  HostSingleton,
   HostText,
   HostRoot,
   SuspenseComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 
 import {getParentSuspenseInstance} from './ReactDOMHostConfig';
 
-import {enableScopeAPI, enableFloat} from 'shared/ReactFeatureFlags';
+import {
+  enableScopeAPI,
+  enableFloat,
+  enableHostSingletons,
+} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
   .toString(36)
@@ -169,12 +174,14 @@ export function getInstanceFromNode(node: Node): Fiber | null {
     (node: any)[internalInstanceKey] ||
     (node: any)[internalContainerInstanceKey];
   if (inst) {
+    const tag = inst.tag;
     if (
-      inst.tag === HostComponent ||
-      inst.tag === HostText ||
-      inst.tag === SuspenseComponent ||
-      inst.tag === HostRoot ||
-      (enableFloat ? inst.tag === HostResource : false)
+      tag === HostComponent ||
+      tag === HostText ||
+      tag === SuspenseComponent ||
+      (enableFloat ? tag === HostResource : false) ||
+      (enableHostSingletons ? tag === HostSingleton : false) ||
+      tag === HostRoot
     ) {
       return inst;
     } else {
@@ -189,10 +196,12 @@ export function getInstanceFromNode(node: Node): Fiber | null {
  * DOM node.
  */
 export function getNodeFromInstance(inst: Fiber): Instance | TextInstance {
+  const tag = inst.tag;
   if (
-    inst.tag === HostComponent ||
-    inst.tag === HostText ||
-    (enableFloat ? inst.tag === HostResource : false)
+    tag === HostComponent ||
+    (enableFloat ? tag === HostResource : false) ||
+    (enableHostSingletons ? tag === HostSingleton : false) ||
+    tag === HostText
   ) {
     // In Fiber this, is just the state node right now. We assume it will be
     // a host component or host text.