Implement compatibility methods in ReactNativeElement and use it behind a flag

Summary:
This implements all compatibility methods from `ReactFabricHostComponent` into `ReactNativeElement` and uses the feature flag `enableAccessToHostTreeInFabric` to choose between them at runtime.

This flag is disabled everywhere so this won't have an effect for now.

Both these classes implement the NativeMethods interface, so they're interchangeable as refs in existing product code.

Changelog: [internal]

bypass-github-export-checks

Reviewed By: yungsters

Differential Revision: D44304435

fbshipit-source-id: 43b5525b943e385287d7b00107147884b859c1fd

Author: rubennorte

packages/react-native/Libraries/DOM/Nodes/ReactNativeElement.js

@@ -5,22 +5,55 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict
+ * @flow strict-local
  */
 
 // flowlint unsafe-getters-setters:off
 
 import type {
   HostComponent,
+  INativeMethods,
+  InternalInstanceHandle,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
+  ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
 import type {ElementRef} from 'react';
 
+import TextInputState from '../../Components/TextInput/TextInputState';
+import {getFabricUIManager} from '../../ReactNative/FabricUIManager';
+import {create as createAttributePayload} from '../../ReactNative/ReactFabricPublicInstance/ReactNativeAttributePayload';
+import warnForStyleProps from '../../ReactNative/ReactFabricPublicInstance/warnForStyleProps';
 import ReadOnlyElement from './ReadOnlyElement';
+import ReadOnlyNode from './ReadOnlyNode';
+import {getShadowNode} from './ReadOnlyNode';
+import nullthrows from 'nullthrows';
+
+const noop = () => {};
+
+export default class ReactNativeElement
+  extends ReadOnlyElement
+  implements INativeMethods
+{
+  // These need to be accessible from `ReactFabricPublicInstanceUtils`.
+  __nativeTag: number;
+  __internalInstanceHandle: InternalInstanceHandle;
+
+  _viewConfig: ViewConfig;
+
+  constructor(
+    tag: number,
+    viewConfig: ViewConfig,
+    internalInstanceHandle: InternalInstanceHandle,
+  ) {
+    super(internalInstanceHandle);
+
+    this.__nativeTag = tag;
+    this.__internalInstanceHandle = internalInstanceHandle;
+    this._viewConfig = viewConfig;
+  }
 
-export default class ReactNativeElement extends ReadOnlyElement {
   get offsetHeight(): number {
     throw new TypeError('Unimplemented');
   }
@@ -46,30 +79,71 @@ export default class ReactNativeElement extends ReadOnlyElement {
    */
 
   blur(): void {
-    throw new TypeError('Unimplemented');
+    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
+    TextInputState.blurTextInput(this);
   }
 
-  focus(): void {
-    throw new TypeError('Unimplemented');
+  focus() {
+    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
+    TextInputState.focusTextInput(this);
   }
 
-  measure(callback: MeasureOnSuccessCallback): void {
-    throw new TypeError('Unimplemented');
+  measure(callback: MeasureOnSuccessCallback) {
+    const node = getShadowNode(this);
+    if (node != null) {
+      nullthrows(getFabricUIManager()).measure(node, callback);
+    }
   }
 
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback): void {
-    throw new TypeError('Unimplemented');
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
+    const node = getShadowNode(this);
+    if (node != null) {
+      nullthrows(getFabricUIManager()).measureInWindow(node, callback);
+    }
   }
 
   measureLayout(
     relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
     onSuccess: MeasureLayoutOnSuccessCallback,
     onFail?: () => void /* currently unused */,
-  ): void {
-    throw new TypeError('Unimplemented');
+  ) {
+    if (!(relativeToNativeNode instanceof ReadOnlyNode)) {
+      if (__DEV__) {
+        console.error(
+          'Warning: ref.measureLayout must be called with a ref to a native component.',
+        );
+      }
+
+      return;
+    }
+
+    const toStateNode = getShadowNode(this);
+    const fromStateNode = getShadowNode(relativeToNativeNode);
+
+    if (toStateNode != null && fromStateNode != null) {
+      nullthrows(getFabricUIManager()).measureLayout(
+        toStateNode,
+        fromStateNode,
+        onFail != null ? onFail : noop,
+        onSuccess != null ? onSuccess : noop,
+      );
+    }
   }
 
   setNativeProps(nativeProps: {...}): void {
-    throw new TypeError('Unimplemented');
+    if (__DEV__) {
+      warnForStyleProps(nativeProps, this._viewConfig.validAttributes);
+    }
+
+    const updatePayload = createAttributePayload(
+      nativeProps,
+      this._viewConfig.validAttributes,
+    );
+
+    const node = getShadowNode(this);
+
+    if (node != null && updatePayload != null) {
+      nullthrows(getFabricUIManager()).setNativeProps(node, updatePayload);
+    }
   }
 }

packages/react-native/Libraries/DOM/Nodes/ReadOnlyElement.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict
+ * @flow strict-local
  */
 
 // flowlint unsafe-getters-setters:off

packages/react-native/Libraries/DOM/Nodes/ReadOnlyNode.js

@@ -5,15 +5,25 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict
+ * @flow strict-local
  */
 
 // flowlint unsafe-getters-setters:off
 
+import type {
+  InternalInstanceHandle,
+  Node as ShadowNode,
+} from '../../Renderer/shims/ReactNativeTypes';
 import type NodeList from '../OldStyleCollections/NodeList';
 import type ReadOnlyElement from './ReadOnlyElement';
 
+import ReactFabric from '../../Renderer/shims/ReactFabric';
+
 export default class ReadOnlyNode {
+  constructor(internalInstanceHandle: InternalInstanceHandle) {
+    setInstanceHandle(this, internalInstanceHandle);
+  }
+
   get childNodes(): NodeList<ReadOnlyNode> {
     throw new TypeError('Unimplemented');
   }
@@ -165,3 +175,22 @@ export default class ReadOnlyNode {
    */
   static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number = 32;
 }
+
+const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle');
+
+function getInstanceHandle(node: ReadOnlyNode): InternalInstanceHandle {
+  // $FlowExpectedError[prop-missing]
+  return node[INSTANCE_HANDLE_KEY];
+}
+
+function setInstanceHandle(
+  node: ReadOnlyNode,
+  instanceHandle: InternalInstanceHandle,
+): void {
+  // $FlowExpectedError[prop-missing]
+  node[INSTANCE_HANDLE_KEY] = instanceHandle;
+}
+
+export function getShadowNode(node: ReadOnlyNode): ?ShadowNode {
+  return ReactFabric.getNodeFromInternalInstanceHandle(getInstanceHandle(node));
+}

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

@@ -9,7 +9,6 @@
  */
 
 import type {
-  AttributeConfiguration,
   HostComponent,
   INativeMethods,
   InternalInstanceHandle,
@@ -24,6 +23,7 @@ import TextInputState from '../../Components/TextInput/TextInputState';
 import {getNodeFromInternalInstanceHandle} from '../../Renderer/shims/ReactFabric';
 import {getFabricUIManager} from '../FabricUIManager';
 import {create} from './ReactNativeAttributePayload';
+import warnForStyleProps from './warnForStyleProps';
 import nullthrows from 'nullthrows';
 
 const {
@@ -149,24 +149,3 @@ export default class ReactFabricHostComponent implements INativeMethods {
     }
   }
 }
-
-function warnForStyleProps(
-  props: {...},
-  validAttributes: AttributeConfiguration,
-): void {
-  if (__DEV__) {
-    for (const key in validAttributes.style) {
-      if (!(validAttributes[key] || props[key] === undefined)) {
-        console.error(
-          'You are setting the style `{ %s' +
-            ': ... }` as a prop. You ' +
-            'should nest it in a style object. ' +
-            'E.g. `{ style: { %s' +
-            ': ... } }`',
-          key,
-          key,
-        );
-      }
-    }
-  }
-}

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

@@ -8,27 +8,42 @@
  * @flow strict-local
  */
 
+import type ReactNativeElement from '../../DOM/Nodes/ReactNativeElement';
 import typeof ReactFabricType from '../../Renderer/shims/ReactFabric';
 import type {
   InternalInstanceHandle,
+  Node,
   ViewConfig,
 } from '../../Renderer/shims/ReactNativeTypes';
-import type ReactFabricHostComponentType from './ReactFabricHostComponent';
+import type ReactFabricHostComponent from './ReactFabricHostComponent';
+
+import ReactNativeFeatureFlags from '../ReactNativeFeatureFlags';
 
 // Lazy loaded to avoid evaluating the module when using the legacy renderer.
-let ReactFabricHostComponent: Class<ReactFabricHostComponentType>;
+let PublicInstanceClass:
+  | Class<ReactFabricHostComponent>
+  | Class<ReactNativeElement>;
+
 // Lazy loaded to avoid evaluating the module when using the legacy renderer.
 let ReactFabric: ReactFabricType;
 
 export function createPublicInstance(
   tag: number,
   viewConfig: ViewConfig,
   internalInstanceHandle: InternalInstanceHandle,
-): ReactFabricHostComponentType {
-  if (ReactFabricHostComponent == null) {
-    ReactFabricHostComponent = require('./ReactFabricHostComponent').default;
+): ReactFabricHostComponent | ReactNativeElement {
+  if (PublicInstanceClass == null) {
+    // We don't use inline requires in react-native, so this forces lazy loading
+    // the right module to avoid eagerly loading both.
+    if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
+      PublicInstanceClass =
+        require('../../DOM/Nodes/ReactNativeElement').default;
+    } else {
+      PublicInstanceClass = require('./ReactFabricHostComponent').default;
+    }
   }
-  return new ReactFabricHostComponent(tag, viewConfig, internalInstanceHandle);
+
+  return new PublicInstanceClass(tag, viewConfig, internalInstanceHandle);
 }
 
 export function createPublicTextInstance(internalInstanceHandle: mixed): {} {
@@ -39,14 +54,14 @@ export function createPublicTextInstance(internalInstanceHandle: mixed): {} {
 }
 
 export function getNativeTagFromPublicInstance(
-  publicInstance: ReactFabricHostComponentType,
+  publicInstance: ReactFabricHostComponent | ReactNativeElement,
 ): number {
   return publicInstance.__nativeTag;
 }
 
 export function getNodeFromPublicInstance(
-  publicInstance: ReactFabricHostComponentType,
-): mixed {
+  publicInstance: ReactFabricHostComponent | ReactNativeElement,
+): ?Node {
   // Avoid loading ReactFabric if using an instance from the legacy renderer.
   if (publicInstance.__internalInstanceHandle == null) {
     return null;
@@ -55,7 +70,6 @@ export function getNodeFromPublicInstance(
   if (ReactFabric == null) {
     ReactFabric = require('../../Renderer/shims/ReactFabric');
   }
-
   return ReactFabric.getNodeFromInternalInstanceHandle(
     publicInstance.__internalInstanceHandle,
   );