Re-add old Fabric Offscreen impl behind flag

There's a chance that facebook#21960 will affect layout in a way that we don't
expect, so I'm adding back the old implementation so we can toggle the
feature with a flag.

The flag should read from the ReactNativeFeatureFlags shim so that we
can change it at runtime. I'll do that separately.

Author: acdlite

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -457,6 +457,32 @@ export function getOffscreenContainerProps(
   }
 }
 
+export function cloneHiddenInstance(
+  instance: Instance,
+  type: string,
+  props: Props,
+  internalInstanceHandle: Object,
+): Instance {
+  const viewConfig = instance.canonical.viewConfig;
+  const node = instance.node;
+  const updatePayload = create(
+    {style: {display: 'none'}},
+    viewConfig.validAttributes,
+  );
+  return {
+    node: cloneNodeWithNewProps(node, updatePayload),
+    canonical: instance.canonical,
+  };
+}
+
+export function cloneHiddenTextInstance(
+  instance: Instance,
+  text: string,
+  internalInstanceHandle: Object,
+): TextInstance {
+  throw new Error('Not yet implemented.');
+}
+
 export function createContainerChildSet(container: Container): ChildSet {
   return createChildNodeSet(container);
 }

packages/react-noop-renderer/src/createReactNoop.js

@@ -582,6 +582,54 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
             children,
           };
         },
+
+        cloneHiddenInstance(
+          instance: Instance,
+          type: string,
+          props: Props,
+          internalInstanceHandle: Object,
+        ): Instance {
+          const clone = cloneInstance(
+            instance,
+            null,
+            type,
+            props,
+            props,
+            internalInstanceHandle,
+            true,
+            null,
+          );
+          clone.hidden = true;
+          return clone;
+        },
+
+        cloneHiddenTextInstance(
+          instance: TextInstance,
+          text: string,
+          internalInstanceHandle: Object,
+        ): TextInstance {
+          const clone = {
+            text: instance.text,
+            id: instance.id,
+            parent: instance.parent,
+            hidden: true,
+            context: instance.context,
+          };
+          // Hide from unit tests
+          Object.defineProperty(clone, 'id', {
+            value: clone.id,
+            enumerable: false,
+          });
+          Object.defineProperty(clone, 'parent', {
+            value: clone.parent,
+            enumerable: false,
+          });
+          Object.defineProperty(clone, 'context', {
+            value: clone.context,
+            enumerable: false,
+          });
+          return clone;
+        },
       };
 
   const NoopRenderer = reconciler(hostConfig);

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -85,6 +85,7 @@ import {
   enableCache,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -734,7 +735,7 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  if (supportsPersistence) {
+  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
     // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
@@ -750,12 +751,10 @@ function updateOffscreenComponent(
       renderLanes,
     );
     return offscreenContainer;
-  }
-  if (supportsMutation) {
+  } else {
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
-  return null;
 }
 
 function reconcileOffscreenHostContainer(
@@ -2354,7 +2353,7 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
@@ -2382,7 +2381,7 @@ function updateSuspenseFallbackChildren(
       primaryChildProps,
     );
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -85,6 +85,7 @@ import {
   enableCache,
   enableLazyContextPropagation,
   enableSuspenseLayoutEffectSemantics,
+  enablePersistentOffscreenHostContainer,
 } from 'shared/ReactFeatureFlags';
 import invariant from 'shared/invariant';
 import isArray from 'shared/isArray';
@@ -734,7 +735,7 @@ function updateOffscreenComponent(
     workInProgress.updateQueue = spawnedCachePool;
   }
 
-  if (supportsPersistence) {
+  if (enablePersistentOffscreenHostContainer && supportsPersistence) {
     // In persistent mode, the offscreen children are wrapped in a host node.
     // TODO: Optimize this to use the OffscreenComponent fiber instead of
     // an extra HostComponent fiber. Need to make sure this doesn't break Fabric
@@ -750,12 +751,10 @@ function updateOffscreenComponent(
       renderLanes,
     );
     return offscreenContainer;
-  }
-  if (supportsMutation) {
+  } else {
     reconcileChildren(current, workInProgress, nextChildren, renderLanes);
     return workInProgress.child;
   }
-  return null;
 }
 
 function reconcileOffscreenHostContainer(
@@ -2354,7 +2353,7 @@ function updateSuspenseFallbackChildren(
         currentPrimaryChildFragment.treeBaseDuration;
     }
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.
@@ -2382,7 +2381,7 @@ function updateSuspenseFallbackChildren(
       primaryChildProps,
     );
 
-    if (supportsPersistence) {
+    if (enablePersistentOffscreenHostContainer && supportsPersistence) {
       // In persistent mode, the offscreen children are wrapped in a host node.
       // We need to complete it now, because we're going to skip over its normal
       // complete phase and go straight to rendering the fallback.