Enable Fragment Refs for intersection observers on Fabric (#52474)

Summary:
Pull Request resolved: #52474

1. Enables the feature flags for fragment refs on fbsource
2. Adds a test with Fantom for usage of `FragmentInstance#observeUsing` and `FragmentInstance#unobserveUsing`.
3. Exposes the `ReactFragmentInstance` type with the common methods that are used on native. We can override the DOM only methods in www libdefs.

Changelog: [Internal]

Reviewed By: rubennorte

Differential Revision: D74326262

fbshipit-source-id: e35ee45b23179ad3ba5527763567c9b04c127eff

Author: Jack Pope

packages/react-native/Libraries/LogBox/__tests__/LogBox-itest.js

@@ -802,7 +802,7 @@ describe('LogBox', () => {
       expect(logBox.getNotificationUI()).toEqual({
         count: '!',
         message:
-          'Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.',
+          'Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key`, `ref`, and `children` props.',
       });
 
       // Open LogBox.
@@ -817,7 +817,7 @@ describe('LogBox', () => {
         // This seems like a bug, should be "Render Error".
         title: 'Console Error',
         message:
-          'Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.',
+          'Invalid prop `invalid` supplied to `React.Fragment`. React.Fragment can only have `key`, `ref`, and `children` props.',
         componentStackFrames: ['<TestComponent />'],
         isDismissable: true,
       });

packages/react-native/src/private/webapis/__tests__/FragmentRefs-itest.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {View} from 'react-native';
+import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver';
+
+setUpIntersectionObserver();
+
+describe('Fragment Refs', () => {
+  describe('observers', () => {
+    it('attaches intersection observers to children', () => {
+      let logs: Array<string> = [];
+      const root = Fantom.createRoot({
+        viewportHeight: 1000,
+        viewportWidth: 1000,
+      });
+      // $FlowFixMe[cannot-resolve-name] oss doesn't have this
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            logs.push(`show:${entry.target.id}`);
+          } else {
+            logs.push(`hide:${entry.target.id}`);
+          }
+        });
+      });
+      function Test({showB}: {showB: boolean}) {
+        // $FlowFixMe[cannot-resolve-name] oss doesn't have this
+        const fragmentRef = React.useRef<null | ReactFragmentInstance>(null);
+        React.useEffect(() => {
+          fragmentRef.current?.observeUsing(observer);
+          const lastRefValue = fragmentRef.current;
+          return () => {
+            lastRefValue?.unobserveUsing(observer);
+          };
+        }, []);
+        return (
+          <View nativeID="parent">
+            {/* $FlowFixMe oss doesn't have this */}
+            <React.Fragment ref={fragmentRef}>
+              <View style={{width: 100, height: 100}} nativeID="childA" />
+              {showB && (
+                <View style={{width: 100, height: 100}} nativeID="childB" />
+              )}
+            </React.Fragment>
+          </View>
+        );
+      }
+
+      Fantom.runTask(() => {
+        root.render(<Test showB={false} />);
+      });
+      expect(logs).toEqual(['show:childA']);
+
+      // Reveal child and expect it to be observed and intersecting
+      logs = [];
+      Fantom.runTask(() => {
+        root.render(<Test showB={true} />);
+      });
+      expect(logs).toEqual(['show:childB']);
+
+      // Hide child and expect it to still be observed, no longer intersecting
+      logs = [];
+      Fantom.runTask(() => {
+        root.render(<Test showB={false} />);
+      });
+      expect(logs).toEqual(['hide:childB']);
+    });
+  });
+});

private/react-native-fantom/runtime/mocks/ReactNativeInternalFeatureFlags.js

@@ -15,4 +15,5 @@ module.exports = {
   // and have predictable memory model.
   // See https://github.com/facebook/react/pull/33161 for details.
   enableEagerAlternateStateNodeCleanup: true,
+  enableFragmentRefs: true,
 };