Extracted definition and access to public instances to a separate module in Fabric

Author: rubennorte

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

@@ -45,26 +45,6 @@ export function mountSafeCallback_NOT_REALLY_SAFE(
   };
 }
 
-export function throwOnStylesProp(component: any, props: any) {
-  if (props.styles !== undefined) {
-    const owner = component._owner || null;
-    const name = component.constructor.displayName;
-    let msg =
-      '`styles` is not a supported property of `' +
-      name +
-      '`, did ' +
-      'you mean `style` (singular)?';
-    if (owner && owner.constructor && owner.constructor.displayName) {
-      msg +=
-        '\n\nCheck the `' +
-        owner.constructor.displayName +
-        '` parent ' +
-        ' component.';
-    }
-    throw new Error(msg);
-  }
-}
-
 export function warnForStyleProps(props: any, validAttributes: any) {
   if (__DEV__) {
     for (const key in validAttributes.style) {

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

@@ -122,6 +122,7 @@ export {
 };
 
 injectIntoDevTools({
+  // $FlowExpectedError[incompatible-call] The type of `Instance` in `getClosestInstanceFromNode` does not match in Fabric and the legacy renderer, so it fails to typecheck here.
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: __DEV__ ? 1 : 0,
   version: ReactVersion,

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

@@ -3,28 +3,53 @@
  *
  * 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
  */
 
-function getInstanceFromInstance(instanceHandle) {
-  return instanceHandle;
+import type {
+  PublicInstance,
+  Instance,
+  Props,
+  TextInstance,
+} from './ReactFabricHostConfig';
+import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
+import {getPublicInstance} from './ReactFabricHostConfig';
+
+// `node` is typed incorrectly here. The proper type should be `PublicInstance`.
+// This is ok in DOM because they types are interchangeable, but in React Native
+// they aren't.
+function getInstanceFromNode(node: Instance | TextInstance): Fiber | null {
+  const instance: Instance = (node: $FlowFixMe); // In React Native, node is never a text instance
+
+  if (
+    instance.internals != null &&
+    instance.internals.internalInstanceHandle != null
+  ) {
+    return instance.internals.internalInstanceHandle;
+  }
+
+  // $FlowFixMe[incompatible-return] DevTools incorrectly passes a fiber in React Native.
+  return node;
 }
 
-function getTagFromInstance(inst) {
-  const nativeInstance = inst.stateNode.canonical;
+function getNodeFromInstance(fiber: Fiber): PublicInstance {
+  const publicInstance = getPublicInstance(fiber.stateNode);
 
-  if (!nativeInstance._nativeTag) {
-    throw new Error('All native instances should have a tag.');
+  if (publicInstance == null) {
+    throw new Error('Could not find host instance from fiber');
   }
 
-  return nativeInstance;
+  return publicInstance;
+}
+
+function getFiberCurrentPropsFromNode(instance: Instance): Props {
+  return instance && instance.internals && instance.internals.currentProps;
 }
 
 export {
-  getInstanceFromInstance as getClosestInstanceFromNode,
-  getInstanceFromInstance as getInstanceFromNode,
-  getTagFromInstance as getNodeFromInstance,
+  getInstanceFromNode,
+  getInstanceFromNode as getClosestInstanceFromNode,
+  getNodeFromInstance,
+  getFiberCurrentPropsFromNode,
 };
-
-export function getFiberCurrentPropsFromNode(inst) {
-  return inst.canonical.currentProps;
-}

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

@@ -25,6 +25,7 @@ import {
 import {batchedUpdates} from './legacy-events/ReactGenericBatching';
 import accumulateInto from './legacy-events/accumulateInto';
 
+import {getPublicInstance} from './ReactFabricHostConfig';
 import getListener from './ReactNativeGetListener';
 import {runEventsInBatch} from './legacy-events/EventBatching';
 
@@ -92,7 +93,8 @@ export function dispatchEvent(
     const stateNode = targetFiber.stateNode;
     // Guard against Fiber being unmounted
     if (stateNode != null) {
-      eventTarget = stateNode.canonical;
+      // $FlowExpectedError[incompatible-cast] public instances in Fabric do not implement `EventTarget` yet.
+      eventTarget = (getPublicInstance(stateNode): EventTarget);
     }
   }
 

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

@@ -7,25 +7,13 @@
  * @flow
  */
 
-import type {ElementRef} from 'react';
-import type {
-  HostComponent,
-  MeasureInWindowOnSuccessCallback,
-  MeasureLayoutOnSuccessCallback,
-  MeasureOnSuccessCallback,
-  NativeMethods,
-  ViewConfig,
-  TouchedViewDataAtPoint,
-} from './ReactNativeTypes';
-
+import type {TouchedViewDataAtPoint, ViewConfig} from './ReactNativeTypes';
 import {
-  mountSafeCallback_NOT_REALLY_SAFE,
-  warnForStyleProps,
-} from './NativeMethodsMixinUtils';
+  createPublicInstance,
+  type ReactFabricHostComponent,
+} from './ReactFabricPublicInstance';
 import {create, diff} from './ReactNativeAttributePayload';
-
 import {dispatchEvent} from './ReactFabricEventEmitter';
-
 import {
   DefaultEventPriority,
   DiscreteEventPriority,
@@ -34,7 +22,6 @@ import {
 // Modules provided by RN:
 import {
   ReactNativeViewConfigRegistry,
-  TextInputState,
   deepFreezeAndThrowOnMutationInDev,
 } from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
 
@@ -49,14 +36,9 @@ const {
   appendChildToSet: appendChildNodeToSet,
   completeRoot,
   registerEventHandler,
-  measure: fabricMeasure,
-  measureInWindow: fabricMeasureInWindow,
-  measureLayout: fabricMeasureLayout,
   unstable_DefaultEventPriority: FabricDefaultPriority,
   unstable_DiscreteEventPriority: FabricDiscretePriority,
   unstable_getCurrentEventPriority: fabricGetCurrentEventPriority,
-  setNativeProps,
-  getBoundingClientRect: fabricGetBoundingClientRect,
 } = nativeFabricUIManager;
 
 const {get: getViewConfigForType} = ReactNativeViewConfigRegistry;
@@ -71,9 +53,18 @@ type Node = Object;
 export type Type = string;
 export type Props = Object;
 export type Instance = {
+  // Reference to the shadow node.
   node: Node,
-  canonical: ReactFabricHostComponent,
-  ...
+  // Exposed through refs.
+  publicInstance: ReactFabricHostComponent,
+  // We define this as an object instead of as separate fields to simplify
+  // making copies of instance where `internals` don't change.
+  internals: {
+    nativeTag: number,
+    viewConfig: ViewConfig,
+    currentProps: Props,
+    internalInstanceHandle: Object,
+  },
 };
 export type TextInstance = {node: Node, ...};
 export type HydratableInstance = Instance | TextInstance;
@@ -107,114 +98,6 @@ if (registerEventHandler) {
   registerEventHandler(dispatchEvent);
 }
 
-/**
- * This is used for refs on host components.
- */
-class ReactFabricHostComponent implements NativeMethods {
-  _nativeTag: number;
-  viewConfig: ViewConfig;
-  currentProps: Props;
-  _internalInstanceHandle: Object;
-
-  constructor(
-    tag: number,
-    viewConfig: ViewConfig,
-    props: Props,
-    internalInstanceHandle: Object,
-  ) {
-    this._nativeTag = tag;
-    this.viewConfig = viewConfig;
-    this.currentProps = props;
-    this._internalInstanceHandle = internalInstanceHandle;
-  }
-
-  blur() {
-    TextInputState.blurTextInput(this);
-  }
-
-  focus() {
-    TextInputState.focusTextInput(this);
-  }
-
-  measure(callback: MeasureOnSuccessCallback) {
-    const {stateNode} = this._internalInstanceHandle;
-    if (stateNode != null) {
-      fabricMeasure(
-        stateNode.node,
-        mountSafeCallback_NOT_REALLY_SAFE(this, callback),
-      );
-    }
-  }
-
-  measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
-    const {stateNode} = this._internalInstanceHandle;
-    if (stateNode != null) {
-      fabricMeasureInWindow(
-        stateNode.node,
-        mountSafeCallback_NOT_REALLY_SAFE(this, callback),
-      );
-    }
-  }
-
-  measureLayout(
-    relativeToNativeNode: number | ElementRef<HostComponent<mixed>>,
-    onSuccess: MeasureLayoutOnSuccessCallback,
-    onFail?: () => void /* currently unused */,
-  ) {
-    if (
-      typeof relativeToNativeNode === 'number' ||
-      !(relativeToNativeNode instanceof ReactFabricHostComponent)
-    ) {
-      if (__DEV__) {
-        console.error(
-          'Warning: ref.measureLayout must be called with a ref to a native component.',
-        );
-      }
-
-      return;
-    }
-
-    const toStateNode = this._internalInstanceHandle.stateNode;
-    const fromStateNode =
-      relativeToNativeNode._internalInstanceHandle.stateNode;
-
-    if (toStateNode != null && fromStateNode != null) {
-      fabricMeasureLayout(
-        toStateNode.node,
-        fromStateNode.node,
-        mountSafeCallback_NOT_REALLY_SAFE(this, onFail),
-        mountSafeCallback_NOT_REALLY_SAFE(this, onSuccess),
-      );
-    }
-  }
-
-  unstable_getBoundingClientRect(): DOMRect {
-    const {stateNode} = this._internalInstanceHandle;
-    if (stateNode != null) {
-      const rect = fabricGetBoundingClientRect(stateNode.node);
-
-      if (rect) {
-        return new DOMRect(rect[0], rect[1], rect[2], rect[3]);
-      }
-    }
-
-    // Empty rect if any of the above failed
-    return new DOMRect(0, 0, 0, 0);
-  }
-
-  setNativeProps(nativeProps: Object) {
-    if (__DEV__) {
-      warnForStyleProps(nativeProps, this.viewConfig.validAttributes);
-    }
-    const updatePayload = create(nativeProps, this.viewConfig.validAttributes);
-
-    const {stateNode} = this._internalInstanceHandle;
-    if (stateNode != null && updatePayload != null) {
-      setNativeProps(stateNode.node, updatePayload);
-    }
-  }
-}
-
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoHydration';
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoScopes';
@@ -260,16 +143,21 @@ export function createInstance(
     internalInstanceHandle, // internalInstanceHandle
   );
 
-  const component = new ReactFabricHostComponent(
+  const component = createPublicInstance(
     tag,
     viewConfig,
-    props,
     internalInstanceHandle,
   );
 
   return {
     node: node,
-    canonical: component,
+    publicInstance: component,
+    internals: {
+      nativeTag: tag,
+      viewConfig,
+      currentProps: props,
+      internalInstanceHandle,
+    },
   };
 }
 
@@ -339,12 +227,15 @@ export function getChildHostContext(
 }
 
 export function getPublicInstance(instance: Instance): null | PublicInstance {
-  if (instance.canonical) {
-    return instance.canonical;
+  if (instance.publicInstance != null) {
+    return instance.publicInstance;
   }
 
-  // For compatibility with Paper
+  // For compatibility with the legacy renderer, in case it's used with Fabric
+  // in the same app.
+  // $FlowExpectedError[prop-missing]
   if (instance._nativeTag != null) {
+    // $FlowExpectedError[incompatible-return]
     return instance;
   }
 
@@ -363,12 +254,12 @@ export function prepareUpdate(
   newProps: Props,
   hostContext: HostContext,
 ): null | Object {
-  const viewConfig = instance.canonical.viewConfig;
+  const viewConfig = instance.internals.viewConfig;
   const updatePayload = diff(oldProps, newProps, viewConfig.validAttributes);
   // TODO: If the event handlers have changed, we need to update the current props
   // in the commit phase but there is no host config hook to do it yet.
   // So instead we hack it by updating it in the render phase.
-  instance.canonical.currentProps = newProps;
+  instance.internals.currentProps = newProps;
   return updatePayload;
 }
 
@@ -447,7 +338,8 @@ export function cloneInstance(
   }
   return {
     node: clone,
-    canonical: instance.canonical,
+    publicInstance: instance.publicInstance,
+    internals: instance.internals,
   };
 }
 
@@ -457,15 +349,16 @@ export function cloneHiddenInstance(
   props: Props,
   internalInstanceHandle: Object,
 ): Instance {
-  const viewConfig = instance.canonical.viewConfig;
+  const viewConfig = instance.internals.viewConfig;
   const node = instance.node;
   const updatePayload = create(
     {style: {display: 'none'}},
     viewConfig.validAttributes,
   );
   return {
     node: cloneNodeWithNewProps(node, updatePayload),
-    canonical: instance.canonical,
+    publicInstance: instance.publicInstance,
+    internals: instance.internals,
   };
 }