Implement HostSingleton Fiber type

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

@@ -483,6 +483,18 @@ export function createTextNode(
   );
 }
 
+export function resetProperties(
+  domElement: Element,
+  tag: string,
+  rawProps: Object,
+): void {
+  const attributes = domElement.attributes;
+  while (attributes.length) {
+    domElement.removeAttribute(attributes[0].name);
+  }
+  setInitialProperties(domElement, tag, rawProps);
+}
+
 export function setInitialProperties(
   domElement: Element,
   tag: string,
@@ -1294,3 +1306,7 @@ export function restoreControlledState(
       return;
   }
 }
+
+export function isHostSingletonType(type: string): boolean {
+  return type === 'html' || type === 'head' || type === 'body';
+}

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

@@ -24,14 +24,22 @@ import type {
 import {
   HostComponent,
   HostResource,
+  HostSingleton,
   HostText,
   HostRoot,
   SuspenseComponent,
 } from 'react-reconciler/src/ReactWorkTags';
 
-import {getParentSuspenseInstance} from './ReactDOMHostConfig';
+import {
+  getParentSuspenseInstance,
+  supportsSingletons,
+} from './ReactDOMHostConfig';
 
-import {enableScopeAPI, enableFloat} from 'shared/ReactFeatureFlags';
+import {
+  enableScopeAPI,
+  enableFloat,
+  enableHostSingletons,
+} from 'shared/ReactFeatureFlags';
 
 const randomKey = Math.random()
   .toString(36)
@@ -167,12 +175,16 @@ 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 ||
+      tag === HostRoot ||
+      (enableFloat ? tag === HostResource : false) ||
+      (enableHostSingletons && supportsSingletons
+        ? tag === HostSingleton
+        : false)
     ) {
       return inst;
     } else {
@@ -187,10 +199,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 ||
+    tag === HostText ||
+    (enableFloat ? tag === HostResource : false) ||
+    (enableHostSingletons && supportsSingletons ? tag === HostSingleton : false)
   ) {
     // In Fiber this, is just the state node right now. We assume it will be
     // a host component or host text.