Prepare ReactNativePrivateInterface for new React renderer calls to handle root/document nodes

packages/react-native-fantom/runner/getFantomTestConfig.js

@@ -47,7 +47,7 @@ const DEFAULT_MODE: FantomTestConfigMode =
 const FANTOM_FLAG_FORMAT = /^(\w+):(\w+)$/;
 
 const FANTOM_BENCHMARK_FILENAME_RE = /[Bb]enchmark-itest\./g;
-const FANTOM_BENCHMARK_SUITE_RE = /\nFantom.unstable_benchmark(\s*)\.suite\(/g;
+const FANTOM_BENCHMARK_SUITE_RE = /\nFantom\.unstable_benchmark(\s*)\.suite\(/g;
 
 /**
  * Extracts the Fantom configuration from the test file, specified as part of

packages/react-native-fantom/src/index.js

@@ -21,7 +21,7 @@ import ReactFabric from 'react-native/Libraries/Renderer/shims/ReactFabric';
 import NativeFantom, {
   NativeEventCategory,
 } from 'react-native/src/private/specs/modules/NativeFantom';
-import {getShadowNode} from 'react-native/src/private/webapis/dom/nodes/internals/NodeInternals';
+import {getNativeNodeReference} from 'react-native/src/private/webapis/dom/nodes/internals/NodeInternals';
 
 let globalSurfaceIdCounter = 1;
 
@@ -172,7 +172,7 @@ function dispatchNativeEvent(
   payload?: {[key: string]: mixed},
   options?: {category?: NativeEventCategory, isUnique?: boolean},
 ) {
-  const shadowNode = getShadowNode(node);
+  const shadowNode = getNativeNodeReference(node);
   NativeFantom.dispatchNativeEvent(
     shadowNode,
     type,
@@ -186,7 +186,7 @@ function scrollTo(
   node: ReactNativeElement,
   options: {x: number, y: number, zoomScale?: number},
 ) {
-  const shadowNode = getShadowNode(node);
+  const shadowNode = getNativeNodeReference(node);
   NativeFantom.scrollTo(shadowNode, options);
 }
 

packages/react-native/Libraries/Components/View/__tests__/View-benchmark-itest.js

@@ -0,0 +1,83 @@
+/**
+ * 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
+ * @fantom_flags enableAccessToHostTreeInFabric:true
+ */
+
+import '../../../../Libraries/Core/InitializeCore.js';
+
+import View from '../View';
+import Fantom from '@react-native/fantom';
+import * as React from 'react';
+
+let root;
+let thousandViews: React.MixedElement;
+
+Fantom.unstable_benchmark
+  .suite('View')
+  .add(
+    'render 100 uncollapsable views',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        let views: React.Node = null;
+        for (let i = 0; i < 100; i++) {
+          views = (
+            <View
+              collapsable={false}
+              id={String(i)}
+              nativeID={String(i)}
+              style={{width: i + 1, height: i + 1}}>
+              {views}
+            </View>
+          );
+        }
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = views;
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  )
+  .add(
+    'render 1000 uncollapsable views',
+    () => {
+      Fantom.runTask(() => root.render(thousandViews));
+    },
+    {
+      beforeAll: () => {
+        let views: React.Node = null;
+        for (let i = 0; i < 1000; i++) {
+          views = (
+            <View
+              collapsable={false}
+              id={String(i)}
+              nativeID={String(i)}
+              style={{width: i + 1, height: i + 1}}>
+              {views}
+            </View>
+          );
+        }
+        // $FlowExpectedError[incompatible-type]
+        thousandViews = views;
+      },
+      beforeEach: () => {
+        root = Fantom.createRoot();
+      },
+      afterEach: () => {
+        root.destroy();
+      },
+    },
+  );

packages/react-native/Libraries/ReactNative/FabricUIManager.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {NativeElementReference} from '../../src/private/webapis/dom/nodes/specs/NativeDOM';
 import type {
   InternalInstanceHandle,
   LayoutAnimationConfig,
@@ -40,14 +41,17 @@ export interface Spec {
   +appendChild: (parentNode: Node, child: Node) => Node;
   +appendChildToSet: (childSet: NodeSet, child: Node) => void;
   +completeRoot: (rootTag: RootTag, childSet: NodeSet) => void;
-  +measure: (node: Node, callback: MeasureOnSuccessCallback) => void;
+  +measure: (
+    node: Node | NativeElementReference,
+    callback: MeasureOnSuccessCallback,
+  ) => void;
   +measureInWindow: (
-    node: Node,
+    node: Node | NativeElementReference,
     callback: MeasureInWindowOnSuccessCallback,
   ) => void;
   +measureLayout: (
-    node: Node,
-    relativeNode: Node,
+    node: Node | NativeElementReference,
+    relativeNode: Node | NativeElementReference,
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback,
   ) => void;
@@ -58,7 +62,10 @@ export interface Spec {
   ) => void;
   +sendAccessibilityEvent: (node: Node, eventType: string) => void;
   +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node;
-  +setNativeProps: (node: Node, newProps: NodeProps) => void;
+  +setNativeProps: (
+    node: Node | NativeElementReference,
+    newProps: NodeProps,
+  ) => void;
   +dispatchCommand: (
     node: Node,
     commandName: string,
@@ -70,9 +77,12 @@ export interface Spec {
     locationY: number,
     callback: (instanceHandle: ?InternalInstanceHandle) => void,
   ) => void;
-  +compareDocumentPosition: (node: Node, otherNode: Node) => number;
+  +compareDocumentPosition: (
+    node: Node | NativeElementReference,
+    otherNode: Node | NativeElementReference,
+  ) => number;
   +getBoundingClientRect: (
-    node: Node,
+    node: Node | NativeElementReference,
     includeTransform: boolean,
   ) => ?[
     /* x: */ number,

packages/react-native/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -21,6 +21,7 @@ import type {
   Node,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
+import type {RootTag} from '../RootTag';
 import type ReactFabricHostComponent from './ReactFabricHostComponent';
 
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -34,10 +35,19 @@ let ReadOnlyTextClass: Class<ReadOnlyText>;
 // Lazy loaded to avoid evaluating the module when using the legacy renderer.
 let RendererProxy: RendererProxyT;
 
+// This is just a temporary placeholder so ReactFabric doesn't crash when synced.
+type PublicRootInstance = null;
+
+export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
+  // This is just a placeholder so ReactFabric doesn't crash when synced.
+  return null;
+}
+
 export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
   internalInstanceHandle: InternalInstanceHandle,
+  ownerDocument: PublicRootInstance,
 ): ReactFabricHostComponent | ReactNativeElement {
   if (PublicInstanceClass == null) {
     // We don't use inline requires in react-native, so this forces lazy loading
@@ -55,6 +65,7 @@ export function createPublicInstance(
 
 export function createPublicTextInstance(
   internalInstanceHandle: InternalInstanceHandle,
+  ownerDocument: PublicRootInstance,
 ): ReadOnlyText {
   if (ReadOnlyTextClass == null) {
     ReadOnlyTextClass =

packages/react-native/Libraries/ReactPrivate/ReactNativePrivateInterface.js

@@ -18,6 +18,7 @@ import typeof RCTEventEmitter from '../EventEmitter/RCTEventEmitter';
 import typeof CustomEvent from '../Events/CustomEvent';
 import typeof {
   createPublicInstance,
+  createPublicRootInstance,
   createPublicTextInstance,
   getInternalInstanceHandleFromPublicInstance,
   getNativeTagFromPublicInstance,
@@ -94,6 +95,10 @@ module.exports = {
     return require('../ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload')
       .diff;
   },
+  get createPublicRootInstance(): createPublicRootInstance {
+    return require('../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
+      .createPublicRootInstance;
+  },
   get createPublicInstance(): createPublicInstance {
     return require('../ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance')
       .createPublicInstance;

packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

@@ -7462,14 +7462,17 @@ export interface Spec {
   +appendChild: (parentNode: Node, child: Node) => Node;
   +appendChildToSet: (childSet: NodeSet, child: Node) => void;
   +completeRoot: (rootTag: RootTag, childSet: NodeSet) => void;
-  +measure: (node: Node, callback: MeasureOnSuccessCallback) => void;
+  +measure: (
+    node: Node | NativeElementReference,
+    callback: MeasureOnSuccessCallback
+  ) => void;
   +measureInWindow: (
-    node: Node,
+    node: Node | NativeElementReference,
     callback: MeasureInWindowOnSuccessCallback
   ) => void;
   +measureLayout: (
-    node: Node,
-    relativeNode: Node,
+    node: Node | NativeElementReference,
+    relativeNode: Node | NativeElementReference,
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback
   ) => void;
@@ -7480,7 +7483,10 @@ export interface Spec {
   ) => void;
   +sendAccessibilityEvent: (node: Node, eventType: string) => void;
   +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node;
-  +setNativeProps: (node: Node, newProps: NodeProps) => void;
+  +setNativeProps: (
+    node: Node | NativeElementReference,
+    newProps: NodeProps
+  ) => void;
   +dispatchCommand: (
     node: Node,
     commandName: string,
@@ -7492,9 +7498,12 @@ export interface Spec {
     locationY: number,
     callback: (instanceHandle: ?InternalInstanceHandle) => void
   ) => void;
-  +compareDocumentPosition: (node: Node, otherNode: Node) => number;
+  +compareDocumentPosition: (
+    node: Node | NativeElementReference,
+    otherNode: Node | NativeElementReference
+  ) => number;
   +getBoundingClientRect: (
-    node: Node,
+    node: Node | NativeElementReference,
     includeTransform: boolean
   ) => ?[number, number, number, number];
 }
@@ -7571,13 +7580,19 @@ exports[`public API should not change unintentionally Libraries/ReactNative/Reac
 `;
 
 exports[`public API should not change unintentionally Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js 1`] = `
-"declare export function createPublicInstance(
+"type PublicRootInstance = null;
+declare export function createPublicRootInstance(
+  rootTag: RootTag
+): PublicRootInstance;
+declare export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
-  internalInstanceHandle: InternalInstanceHandle
+  internalInstanceHandle: InternalInstanceHandle,
+  ownerDocument: PublicRootInstance
 ): ReactFabricHostComponent | ReactNativeElement;
 declare export function createPublicTextInstance(
-  internalInstanceHandle: InternalInstanceHandle
+  internalInstanceHandle: InternalInstanceHandle,
+  ownerDocument: PublicRootInstance
 ): ReadOnlyText;
 declare export function getNativeTagFromPublicInstance(
   publicInstance: ReactFabricHostComponent | ReactNativeElement
@@ -11375,7 +11390,7 @@ exports[`public API should not change unintentionally src/private/webapis/dom/no
   releasePointerCapture(pointerId: number): void;
 }
 declare export function getBoundingClientRect(
-  node: ReadOnlyElement,
+  element: ReadOnlyElement,
   { includeTransform: boolean }
 ): DOMRect;
 "