Remove React Native deep imports from Fantom (#58605)

Summary:
Pull Request resolved: https://github.com/react/react-native/pull/58605

Use global DOM APIs, supported React Native entry points, and package-relative implementation imports throughout Fantom. Use the renderer-only private interface for the existing public-instance conversion helpers instead of importing Node internals.

Changelog: [Internal]

Reviewed By: cipolleschi

Differential Revision: D120717572

fbshipit-source-id: 1aae11b7b9434c783d42ca289e2c6edd17aa887c

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableOpacity-itest.js

@@ -189,7 +189,7 @@ describe('<TouchableOpacity>', () => {
         });
 
         const element = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
         expect(element.childNodes.length).toBe(1);
 

packages/react-native/Libraries/Components/Touchable/__tests__/TouchableWithoutFeedback-itest.js

@@ -141,7 +141,9 @@ describe('<TouchableWithoutFeedback>', () => {
         });
 
         expect(
-          nullthrows(root.document.documentElement.firstElementChild).tagName,
+          nullthrows(
+            nullthrows(root.document.documentElement).firstElementChild,
+          ).tagName,
         ).toBe('RN:Paragraph');
 
         Fantom.runTask(() => {
@@ -155,7 +157,9 @@ describe('<TouchableWithoutFeedback>', () => {
         });
 
         expect(
-          nullthrows(root.document.documentElement.firstElementChild).tagName,
+          nullthrows(
+            nullthrows(root.document.documentElement).firstElementChild,
+          ).tagName,
         ).toBe('RN:View');
       });
     });

packages/react-native/Libraries/Components/__tests__/Button-itest.js

@@ -77,7 +77,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -123,7 +123,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -152,7 +152,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -193,7 +193,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});
@@ -235,7 +235,7 @@ describe('<Button>', () => {
         // This is necessary because `<Button>` doesn't provide a `<View>` ref
         // but an instance of `Touchable` that isn't a ReactNativeElement.
         const buttonViewNode = nullthrows(
-          root.document.documentElement.firstElementChild,
+          nullthrows(root.document.documentElement).firstElementChild,
         );
 
         Fantom.dispatchNativeEvent(buttonViewNode, 'click', {});

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

@@ -8,9 +8,6 @@
  * @format
  */
 
-import type ReactNativeDocument from '../../../src/private/webapis/dom/nodes/ReactNativeDocument';
-import type ReadOnlyElement from '../../../src/private/webapis/dom/nodes/ReadOnlyElement';
-
 import AppContainer from '../../ReactNative/AppContainer';
 import LogBoxInspectorContainer from '../LogBoxInspectorContainer';
 import * as Fantom from '@react-native/fantom';
@@ -35,7 +32,7 @@ interface NotificationUI {
 }
 
 function findTextByIds(
-  node: ReadOnlyElement,
+  node: Element,
   id: string,
   text: Array<string> = [],
 ): Array<string> {
@@ -52,7 +49,7 @@ function findTextByIds(
 }
 
 // Finds the LogBox notification UI by searching for the text IDs.
-function findLogBoxNotificationUI(doc: ReactNativeDocument): NotificationUI {
+function findLogBoxNotificationUI(doc: Document): NotificationUI {
   return {
     count: doc.getElementById('logbox_notification_count_text')?.textContent,
     message: doc.getElementById('logbox_notification_message_text')
@@ -61,17 +58,18 @@ function findLogBoxNotificationUI(doc: ReactNativeDocument): NotificationUI {
 }
 
 // Finds the LogBox inspector UI by searching for the text IDs.
-function findLogBoxInspectorUI(doc: ReactNativeDocument): InspectorUI {
+function findLogBoxInspectorUI(doc: Document): InspectorUI {
+  const documentElement = nullthrows(doc.documentElement);
   return {
     header: doc.getElementById('logbox_header_title_text')?.textContent,
     title: doc.getElementById('logbox_message_title_text')?.textContent,
     message: doc.getElementById('logbox_message_contents_text')?.textContent,
     // codeFrames: undefined,
     componentStackFrames: findTextByIds(
-      doc.documentElement,
+      documentElement,
       'logbox_component_stack_frame_text',
     ),
-    stackFrames: getStackFrames(doc.documentElement),
+    stackFrames: getStackFrames(documentElement),
     isDismissable:
       doc.getElementById('logbox_dismissable_text')?.textContent == null,
   };
@@ -96,7 +94,7 @@ function findLogBoxInspectorUI(doc: ReactNativeDocument): InspectorUI {
 //   ManualConsoleError
 //
 // If there are no matches, we return all frames, to prevent false negatives.
-function getStackFrames(node: ReadOnlyElement): ?Array<string> {
+function getStackFrames(node: Element): ?Array<string> {
   const text = findTextByIds(node, 'logbox_stack_frame_text');
   const mockConsoleIndex = text.includes('MockConsoleErrorForTesting')
     ? text.indexOf('MockConsoleErrorForTesting') + 1

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

@@ -45,7 +45,9 @@ describe('Event Timing API', () => {
       root.render(<View />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -95,7 +97,9 @@ describe('Event Timing API', () => {
       );
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -154,7 +158,9 @@ describe('Event Timing API', () => {
       root.render(<MyComponent />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -206,7 +212,9 @@ describe('Event Timing API', () => {
       );
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(callback).not.toHaveBeenCalled();
 
@@ -233,7 +241,9 @@ describe('Event Timing API', () => {
       root.render(<View />);
     });
 
-    const element = nullthrows(root.document.documentElement.firstElementChild);
+    const element = nullthrows(
+      nullthrows(root.document.documentElement).firstElementChild,
+    );
 
     expect(performance.eventCounts).not.toBeInstanceOf(Map);
 
@@ -328,7 +338,7 @@ describe('Event Timing API', () => {
       });
 
       const element = nullthrows(
-        root.document.documentElement.firstElementChild,
+        nullthrows(root.document.documentElement).firstElementChild,
       );
 
       expect(callback).not.toHaveBeenCalled();
@@ -374,7 +384,7 @@ describe('Event Timing API', () => {
       });
 
       const element = nullthrows(
-        root.document.documentElement.firstElementChild,
+        nullthrows(root.document.documentElement).firstElementChild,
       );
 
       expect(callback).not.toHaveBeenCalled();

private/react-native-fantom/__docs__/README.md

@@ -197,14 +197,13 @@ hi
 - Benchmark tests use the `-benchmark-itest.js` suffix.
 - Use `Fantom.runTask()` to render and run synchronous operations; it ensures
   the React work is flushed before assertions.
-- Access elements through refs and use the
-  [`ensureInstance`](../../../packages/react-native/src/private/__tests__/utilities/ensureInstance.js)
-  helper for type-safe access to the underlying instance:
+- Access elements through refs and use `nullthrows` for type-safe access to the
+  underlying instance:
 
   ```javascript
-  import ensureInstance from 'react-native/src/private/__tests__/utilities/ensureInstance';
+  import nullthrows from 'nullthrows';
 
-  const element = ensureInstance(elementRef.current, ReactNativeElement);
+  const element = nullthrows(elementRef.current);
   ```
 
 - Prefer component-specific instance types (`TextInputInstance`,
@@ -622,7 +621,7 @@ the test in the suite depending on the flag value for that run. E.g.:
  * @fantom_flags commonTestFlag:*
  */
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+import {ReactNativeFeatureFlags} from 'react-native/react-private-interface';
 
 // The entire suite will be run with commonTestFlag set to true and false.
 describe('MyTest', () => {

private/react-native-fantom/runtime/repl-setup.js

@@ -364,7 +364,7 @@ function reportJSON(message: interface {}): void {
   }
   // Force the import of the native module to be lazy.
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
   NativeFantom.reportTestSuiteResultsJSON(json);
 }
 

private/react-native-fantom/runtime/setup.js

@@ -400,7 +400,7 @@ function runSuite(suite: Suite): TestCaseResult[] {
 function reportTestSuiteResult(testSuiteResult: TestSuiteResult): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   NativeFantom.reportTestSuiteResultsJSON(
     JSON.stringify({
@@ -413,14 +413,14 @@ function reportTestSuiteResult(testSuiteResult: TestSuiteResult): void {
 export function reportBenchmarkResult(result: BenchmarkResult): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
   NativeFantom.reportTestSuiteResultsJSON(JSON.stringify(result));
 }
 
 function validateEmptyMessageQueue(): void {
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   NativeFantom.validateEmptyMessageQueue();
 }
@@ -444,7 +444,7 @@ function runTest(): Array<TestCaseResult> {
 
   // Force the import of the native module to be lazy
   const NativeFantom =
-    require('react-native/src/private/testing/fantom/specs/NativeFantom').default;
+    require('../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom').default;
 
   try {
     NativeFantom.startJSSamplingProfiler();

private/react-native-fantom/src/Benchmark.js

@@ -8,10 +8,10 @@
  * @format
  */
 
+import NativeCPUTime from '../../../packages/react-native/src/private/testing/fantom/specs/NativeCPUTime';
 import {reportBenchmarkResult} from '../runtime/setup';
 import {getConstants} from './index';
 import nullthrows from 'nullthrows';
-import NativeCPUTime from 'react-native/src/private/testing/fantom/specs/NativeCPUTime';
 import {
   Bench,
   type BenchOptions,

private/react-native-fantom/src/HighResTimeStampMock.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
+import NativeFantom from '../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 
 /**
  * Represents a mocked clock for `HighResTimeStamp` values.

private/react-native-fantom/src/TimerMock.js

@@ -8,8 +8,8 @@
  * @format
  */
 
+import NativeFantom from '../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 import {runWorkLoop} from './index';
-import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
 
 /**
  * Controls the deterministic timer mock for `setTimeout`/`setInterval`.

private/react-native-fantom/src/__tests__/Fantom-itest.js

@@ -15,6 +15,7 @@ import type {HostInstance} from 'react-native';
 
 import NativeFantom from '../../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 import * as Fantom from '@react-native/fantom';
+import nullthrows from 'nullthrows';
 import * as React from 'react';
 import {createRef} from 'react';
 import {LogBox, Modal, ScrollView, Text, TextInput, View} from 'react-native';
@@ -37,7 +38,9 @@ function getActualViewportDimensions(root: Root): {
     root.render(<View />);
   });
 
-  const rect = root.document.documentElement.getBoundingClientRect();
+  const rect = nullthrows(
+    root.document.documentElement,
+  ).getBoundingClientRect();
   return {
     viewportWidth: rect.width,
     viewportHeight: rect.height,

private/react-native-fantom/src/getFantomRenderedOutput.js

@@ -10,8 +10,8 @@
 
 import type {RootTag} from 'react-native';
 
+import NativeFantom from '../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 import * as React from 'react';
-import NativeFantom from 'react-native/src/private/testing/fantom/specs/NativeFantom';
 
 export type RenderOutputConfig = {
   ...FantomRenderedOutputConfig,

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

@@ -14,28 +14,30 @@ import type {
   RenderOutputConfig,
 } from './getFantomRenderedOutput';
 import type {MixedElement} from 'react';
-import type {RootTag} from 'react-native';
-import type ReactNativeDocument from 'react-native/src/private/webapis/dom/nodes/ReactNativeDocument';
+import type {HostInstance, RootTag} from 'react-native';
 
+import NativeFantom, {
+  NativeEventCategory,
+} from '../../../packages/react-native/src/private/testing/fantom/specs/NativeFantom';
 import * as Benchmark from './Benchmark';
 import {getConstants} from './Constants';
 import getFantomRenderedOutput from './getFantomRenderedOutput';
 import {LogBox} from 'react-native';
-import ErrorUtils from 'react-native/Libraries/vendor/core/ErrorUtils';
-import NativeFantom, {
-  NativeEventCategory,
-} from 'react-native/src/private/testing/fantom/specs/NativeFantom';
 import {
-  getInstanceHandle,
-  getNativeNodeReference,
-} from 'react-native/src/private/webapis/dom/nodes/internals/NodeInternals';
-import ReadOnlyNode from 'react-native/src/private/webapis/dom/nodes/ReadOnlyNode';
+  getInternalInstanceHandleFromPublicInstance,
+  getNodeFromPublicInstance,
+} from 'react-native/react-private-interface';
 
 const nativeRuntimeScheduler = global.nativeRuntimeScheduler;
 const {unstable_scheduleCallback, unstable_ImmediatePriority} =
   nativeRuntimeScheduler;
+const ErrorUtils = global.ErrorUtils;
 
-type NodeOrRef = ReadOnlyNode | Readonly<{current: ?ReadOnlyNode}>;
+interface NodeLike {
+  readonly nodeType: number;
+}
+
+type NodeOrRef = NodeLike | Readonly<{current: ?NodeLike}>;
 
 export type RootConfig = {
   viewportWidth?: number,
@@ -69,7 +71,7 @@ class Root {
   #viewportOffsetX: number;
   #viewportOffsetY: number;
   #devicePixelRatio: number;
-  #document: ?ReactNativeDocument;
+  #document: ?Document;
 
   constructor(config?: RootConfig) {
     this.#viewportWidth = config?.viewportWidth ?? DEFAULT_VIEWPORT_WIDTH;
@@ -89,7 +91,7 @@ class Root {
   }
 
   // $FlowExpectedError[unsafe-getters-setters]
-  get document(): ReactNativeDocument {
+  get document(): Document {
     if (this.#document == null) {
       throw new Error(
         'Cannot get `document` from root because it has not been rendered.',
@@ -106,19 +108,16 @@ class Root {
       );
     }
 
-    // Require Fabric lazily to prevent it from running InitializeCore before the test
+    // Require the renderer lazily to prevent it from running InitializeCore before the test
     // has a change to do its environment setup.
-    const ReactFabric =
-      require('react-native/Libraries/Renderer/shims/ReactFabric').default;
+    const {Renderer} = require('react-native/unstable-internals-do-not-use');
 
-    // $FlowExpectedError[incompatible-type]
-    const surfaceIdIsNumber = this.#surfaceId as number;
-    ReactFabric.render(element, surfaceIdIsNumber, null, true);
+    Renderer.renderElement({element, rootTag: this.#surfaceId});
 
     if (this.#document == null) {
       this.#document =
         // $FlowExpectedError[incompatible-type] We know that `getPublicInstanceFromRootTag` returns `ReactNativeDocument | null` in Fantom.
-        ReactFabric.getPublicInstanceFromRootTag(surfaceIdIsNumber);
+        Renderer.getPublicInstanceFromRootTag(this.#surfaceId);
     }
   }
 
@@ -146,7 +145,7 @@ class Root {
 
 export type {Root};
 
-export {NativeEventCategory} from 'react-native/src/private/testing/fantom/specs/NativeFantom';
+export {NativeEventCategory};
 
 const DEFAULT_TASK_PRIORITY = unstable_ImmediatePriority;
 
@@ -258,7 +257,7 @@ export function unstable_getDirectManipulationProps(
   [string]: unknown,
 }> {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   return NativeFantom.getDirectManipulationProps(shadowNode);
 }
 
@@ -266,7 +265,7 @@ export function unstable_getFabricUpdateProps(nodeOrRef: NodeOrRef): Readonly<{
   [string]: unknown,
 }> {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   return NativeFantom.getFabricUpdateProps(shadowNode);
 }
 
@@ -280,7 +279,7 @@ export function getDefinedEventHandlers(
   nodeOrRef: NodeOrRef,
 ): ReadonlyArray<string> {
   const node = getNode(nodeOrRef);
-  const instanceHandle = getInstanceHandle(node);
+  const instanceHandle = getInternalInstanceHandleFromPublicInstance(node);
   if (typeof instanceHandle !== 'object' || instanceHandle == null) {
     return [];
   }
@@ -479,7 +478,7 @@ export function enqueueNativeEvent(
   options?: Readonly<{category?: NativeEventCategory, isUnique?: boolean}>,
 ) {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   NativeFantom.enqueueNativeEvent(
     shadowNode,
     type,
@@ -573,7 +572,7 @@ export function enqueueScrollEvent(
   options: ScrollEventOptions,
 ) {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   NativeFantom.enqueueScrollEvent(shadowNode, options);
 }
 
@@ -647,7 +646,7 @@ export function enqueueModalSizeUpdate(
   size: Readonly<{width: number, height: number}>,
 ) {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   NativeFantom.enqueueModalSizeUpdate(shadowNode, size.width, size.height);
 }
 
@@ -669,7 +668,7 @@ export function createShadowNodeReferenceCounter(
   nodeOrRef: NodeOrRef,
 ): () => number {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   return NativeFantom.createShadowNodeReferenceCounter(shadowNode);
 }
 
@@ -683,7 +682,7 @@ export function createShadowNodeRevisionGetter(
   nodeOrRef: NodeOrRef,
 ): () => ?number {
   const node = getNode(nodeOrRef);
-  const shadowNode = getNativeNodeReference(node);
+  const shadowNode = getNodeFromPublicInstance(node);
   return NativeFantom.createShadowNodeRevisionGetter(shadowNode);
 }
 
@@ -748,14 +747,21 @@ function runLogBoxCheck() {
   }
 }
 
-function getNode(nodeOrRef: NodeOrRef): ReadOnlyNode {
-  if (nodeOrRef instanceof ReadOnlyNode) {
-    return nodeOrRef;
-  } else if (nodeOrRef.current != null) {
-    return nodeOrRef.current;
+function getNode(nodeOrRef: NodeOrRef): HostInstance {
+  let node: ?NodeLike;
+  if ('nodeType' in nodeOrRef) {
+    node = nodeOrRef;
   } else {
+    node = nodeOrRef.current;
+  }
+
+  if (node == null) {
     throw new TypeError('Could not get node from ref');
   }
+
+  // $FlowFixMe[incompatible-type] React Native's global nodes are backed by HostInstance.
+  const hostInstance: HostInstance = node;
+  return hostInstance;
 }
 
 global.__FANTOM_PACKAGE_LOADED__ = true;

private/react-native-fantom/src/setUpDefaultReactNativeEnvironment.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import setUpDefaultReactNativeEnvironment from 'react-native/src/private/setup/setUpDefaultReactNativeEnvironment';
+import setUpDefaultReactNativeEnvironment from '../../../packages/react-native/src/private/setup/setUpDefaultReactNativeEnvironment';
 
 // Do NOT enable developer tools for Fantom.
 setUpDefaultReactNativeEnvironment(false);