@office-iss/react-native-win32 0.72.8 → 0.73.0-preview.2

package/Libraries/ReactNative/BridgelessUIManager.js

@@ -14,26 +14,47 @@ import type {RootTag} from '../Types/RootTagTypes';
 
 import {unstable_hasComponent} from '../NativeComponent/NativeComponentRegistryUnstable';
 
+let cachedConstants = null;
+
 const errorMessageForMethod = (methodName: string): string =>
   "[ReactNative Architecture][JS] '" +
   methodName +
   "' is not available in the new React Native architecture.";
 
-module.exports = {
+function nativeViewConfigsInBridgelessModeEnabled(): boolean {
+  return global.RN$LegacyInterop_UIManager_getConstants !== undefined;
+}
+
+function getCachedConstants(): Object {
+  if (!cachedConstants) {
+    cachedConstants = global.RN$LegacyInterop_UIManager_getConstants();
+  }
+  return cachedConstants;
+}
+
+const UIManagerJS: {[string]: $FlowFixMe} = {
   getViewManagerConfig: (viewManagerName: string): mixed => {
-    console.error(
-      errorMessageForMethod('getViewManagerConfig') +
-        'Use hasViewManagerConfig instead. viewManagerName: ' +
-        viewManagerName,
-    );
-    return null;
+    if (nativeViewConfigsInBridgelessModeEnabled()) {
+      return getCachedConstants()[viewManagerName];
+    } else {
+      console.error(
+        errorMessageForMethod('getViewManagerConfig') +
+          'Use hasViewManagerConfig instead. viewManagerName: ' +
+          viewManagerName,
+      );
+      return null;
+    }
   },
   hasViewManagerConfig: (viewManagerName: string): boolean => {
     return unstable_hasComponent(viewManagerName);
   },
   getConstants: (): Object => {
-    console.error(errorMessageForMethod('getConstants'));
-    return {};
+    if (nativeViewConfigsInBridgelessModeEnabled()) {
+      return getCachedConstants();
+    } else {
+      console.error(errorMessageForMethod('getConstants'));
+      return null;
+    }
   },
   getConstantsForViewManager: (viewManagerName: string): Object => {
     console.error(errorMessageForMethod('getConstantsForViewManager'));
@@ -160,3 +181,11 @@ module.exports = {
   dismissPopupMenu: (): void =>
     console.error(errorMessageForMethod('dismissPopupMenu')),
 };
+
+if (nativeViewConfigsInBridgelessModeEnabled()) {
+  Object.keys(getCachedConstants()).forEach(viewConfigName => {
+    UIManagerJS[viewConfigName] = getCachedConstants()[viewConfigName];
+  });
+}
+
+module.exports = UIManagerJS;

package/Libraries/ReactNative/FabricUIManager.js

@@ -11,71 +11,180 @@
 'use strict';
 
 import type {
+  InternalInstanceHandle,
   LayoutAnimationConfig,
   MeasureInWindowOnSuccessCallback,
   MeasureLayoutOnSuccessCallback,
   MeasureOnSuccessCallback,
+  Node,
 } from '../Renderer/shims/ReactNativeTypes';
 import type {RootTag} from '../Types/RootTagTypes';
 
-// TODO: type these properly.
-export opaque type Node = {...};
-type NodeSet = Array<Node>;
-type NodeProps = {...};
-type InstanceHandle = {...};
-export type Spec = {|
+import defineLazyObjectProperty from '../Utilities/defineLazyObjectProperty';
+
+export type NodeSet = Array<Node>;
+export type NodeProps = {...};
+export interface Spec {
   +createNode: (
     reactTag: number,
     viewName: string,
     rootTag: RootTag,
     props: NodeProps,
-    instanceHandle: InstanceHandle,
-  ) => Node,
-  +cloneNode: (node: Node) => Node,
-  +cloneNodeWithNewChildren: (node: Node) => Node,
-  +cloneNodeWithNewProps: (node: Node, newProps: NodeProps) => Node,
-  +cloneNodeWithNewChildrenAndProps: (node: Node, newProps: NodeProps) => Node,
-  +createChildSet: (rootTag: RootTag) => NodeSet,
-  +appendChild: (parentNode: Node, child: Node) => Node,
-  +appendChildToSet: (childSet: NodeSet, child: Node) => void,
-  +completeRoot: (rootTag: RootTag, childSet: NodeSet) => void,
-  +measure: (node: Node, callback: MeasureOnSuccessCallback) => void,
+    instanceHandle: InternalInstanceHandle,
+  ) => Node;
+  +cloneNode: (node: Node) => Node;
+  +cloneNodeWithNewChildren: (node: Node) => Node;
+  +cloneNodeWithNewProps: (node: Node, newProps: NodeProps) => Node;
+  +cloneNodeWithNewChildrenAndProps: (node: Node, newProps: NodeProps) => Node;
+  +createChildSet: (rootTag: RootTag) => NodeSet;
+  +appendChild: (parentNode: Node, child: Node) => Node;
+  +appendChildToSet: (childSet: NodeSet, child: Node) => void;
+  +completeRoot: (rootTag: RootTag, childSet: NodeSet) => void;
+  +measure: (node: Node, callback: MeasureOnSuccessCallback) => void;
   +measureInWindow: (
     node: Node,
     callback: MeasureInWindowOnSuccessCallback,
-  ) => void,
+  ) => void;
   +measureLayout: (
     node: Node,
     relativeNode: Node,
     onFail: () => void,
     onSuccess: MeasureLayoutOnSuccessCallback,
-  ) => void,
+  ) => void;
   +configureNextLayoutAnimation: (
     config: LayoutAnimationConfig,
     callback: () => void, // check what is returned here
     errorCallback: () => void,
-  ) => void,
-  +sendAccessibilityEvent: (node: Node, eventType: string) => void,
-  +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node,
-  +getBoundingClientRect: (
-    node: Node,
-  ) => [
-    /* x:*/ number,
-    /* y:*/ number,
-    /* width:*/ number,
-    /* height:*/ number,
-  ],
-  +setNativeProps: (node: Node, newProps: NodeProps) => void,
+  ) => void;
+  +sendAccessibilityEvent: (node: Node, eventType: string) => void;
+  +findShadowNodeByTag_DEPRECATED: (reactTag: number) => ?Node;
+  +setNativeProps: (node: Node, newProps: NodeProps) => void;
   +dispatchCommand: (
     node: Node,
     commandName: string,
     args: Array<mixed>,
-  ) => void,
-|};
+  ) => void;
+
+  /**
+   * Support methods for the DOM-compatible APIs.
+   */
+  +getParentNode: (node: Node) => ?InternalInstanceHandle;
+  +getChildNodes: (node: Node) => $ReadOnlyArray<InternalInstanceHandle>;
+  +isConnected: (node: Node) => boolean;
+  +compareDocumentPosition: (node: Node, otherNode: Node) => number;
+  +getTextContent: (node: Node) => string;
+  +getBoundingClientRect: (
+    node: Node,
+    includeTransform: boolean,
+  ) => ?[
+    /* x: */ number,
+    /* y: */ number,
+    /* width: */ number,
+    /* height: */ number,
+  ];
+  +getOffset: (
+    node: Node,
+  ) => ?[
+    /* offsetParent: */ InternalInstanceHandle,
+    /* offsetTop: */ number,
+    /* offsetLeft: */ number,
+  ];
+  +getScrollPosition: (
+    node: Node,
+  ) => ?[/* scrollLeft: */ number, /* scrollTop: */ number];
+  +getScrollSize: (
+    node: Node,
+  ) => ?[/* scrollWidth: */ number, /* scrollHeight: */ number];
+  +getInnerSize: (node: Node) => ?[/* width: */ number, /* height: */ number];
+  +getBorderSize: (
+    node: Node,
+  ) => ?[
+    /* topWidth: */ number,
+    /* rightWidth: */ number,
+    /* bottomWidth: */ number,
+    /* leftWidth: */ number,
+  ];
+  +getTagName: (node: Node) => string;
+
+  /**
+   * Support methods for the Pointer Capture APIs.
+   */
+  +hasPointerCapture: (node: Node, pointerId: number) => boolean;
+  +setPointerCapture: (node: Node, pointerId: number) => void;
+  +releasePointerCapture: (node: Node, pointerId: number) => void;
+}
+
+let nativeFabricUIManagerProxy: ?Spec;
+
+// This is a list of all the methods in global.nativeFabricUIManager that we'll
+// cache in JavaScript, as the current implementation of the binding
+// creates a new host function every time methods are accessed.
+const CACHED_PROPERTIES = [
+  'createNode',
+  'cloneNode',
+  'cloneNodeWithNewChildren',
+  'cloneNodeWithNewProps',
+  'cloneNodeWithNewChildrenAndProps',
+  'createChildSet',
+  'appendChild',
+  'appendChildToSet',
+  'completeRoot',
+  'measure',
+  'measureInWindow',
+  'measureLayout',
+  'configureNextLayoutAnimation',
+  'sendAccessibilityEvent',
+  'findShadowNodeByTag_DEPRECATED',
+  'setNativeProps',
+  'dispatchCommand',
+  'getParentNode',
+  'getChildNodes',
+  'isConnected',
+  'compareDocumentPosition',
+  'getTextContent',
+  'getBoundingClientRect',
+  'getOffset',
+  'getScrollPosition',
+  'getScrollSize',
+  'getInnerSize',
+  'getBorderSize',
+  'getTagName',
+  'hasPointerCapture',
+  'setPointerCapture',
+  'releasePointerCapture',
+];
 
 // This is exposed as a getter because apps using the legacy renderer AND
 // Fabric can define the binding lazily. If we evaluated the global and cached
 // it in the module we might be caching an `undefined` value before it is set.
 export function getFabricUIManager(): ?Spec {
-  return global.nativeFabricUIManager;
+  if (
+    nativeFabricUIManagerProxy == null &&
+    global.nativeFabricUIManager != null
+  ) {
+    nativeFabricUIManagerProxy = createProxyWithCachedProperties(
+      global.nativeFabricUIManager,
+      CACHED_PROPERTIES,
+    );
+  }
+  return nativeFabricUIManagerProxy;
+}
+
+/**
+ *
+ * Returns an object that caches the specified properties the first time they
+ * are accessed, and falls back to the original object for other properties.
+ */
+function createProxyWithCachedProperties(
+  implementation: Spec,
+  propertiesToCache: $ReadOnlyArray<string>,
+): Spec {
+  const proxy = Object.create(implementation);
+  for (const propertyName of propertiesToCache) {
+    defineLazyObjectProperty(proxy, propertyName, {
+      // $FlowExpectedError[prop-missing]
+      get: () => implementation[propertyName],
+    });
+  }
+  return proxy;
 }

package/Libraries/ReactNative/I18nManager.js

@@ -8,15 +8,13 @@
  * @format
  */
 
+import type {I18nManagerConstants} from './NativeI18nManager';
+
 import NativeI18nManager from './NativeI18nManager';
 
-const i18nConstants: {|
-  doLeftAndRightSwapInRTL: boolean,
-  isRTL: boolean,
-  localeIdentifier?: ?string,
-|} = getI18nManagerConstants();
+const i18nConstants: I18nManagerConstants = getI18nManagerConstants();
 
-function getI18nManagerConstants() {
+function getI18nManagerConstants(): I18nManagerConstants {
   if (NativeI18nManager) {
     const {isRTL, doLeftAndRightSwapInRTL, localeIdentifier} =
       NativeI18nManager.getConstants();
@@ -30,11 +28,7 @@ function getI18nManagerConstants() {
 }
 
 module.exports = {
-  getConstants: (): {|
-    doLeftAndRightSwapInRTL: boolean,
-    isRTL: boolean,
-    localeIdentifier: ?string,
-  |} => {
+  getConstants: (): I18nManagerConstants => {
     return i18nConstants;
   },
 

package/Libraries/ReactNative/NativeI18nManager.js

@@ -12,12 +12,14 @@ import type {TurboModule} from '../TurboModule/RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 
+export type I18nManagerConstants = {|
+  doLeftAndRightSwapInRTL: boolean,
+  isRTL: boolean,
+  localeIdentifier?: ?string,
+|};
+
 export interface Spec extends TurboModule {
-  +getConstants: () => {|
-    isRTL: boolean,
-    doLeftAndRightSwapInRTL: boolean,
-    localeIdentifier: ?string,
-  |};
+  +getConstants: () => I18nManagerConstants;
   allowRTL: (allowRTL: boolean) => void;
   forceRTL: (forceRTL: boolean) => void;
   swapLeftAndRightInRTL: (flipStyles: boolean) => void;

package/Libraries/ReactNative/PaperUIManager.win32.js

@@ -107,8 +107,8 @@ UIManagerJS.hasViewManagerConfig = (viewManagerName: string) =>
 // instead of `UIManager.getViewManagerConfig()` off UIManager.js.
 // This is a workaround for now.
 // [Windows - This is incompatible with running UIManager as a JSI object.
-//            getViewManagerConfig is implemented on the JSI object, so we dont
-//            need to hook this unless we are runnign in webdebugger
+//            getViewManagerConfig is implemented on the JSI object, so we don't
+//            need to hook this unless we are running in webdebugger
 if (!global.nativeCallSyncHook)
   // $FlowFixMe
   NativeUIManager.getViewManagerConfig = UIManagerJS.getViewManagerConfig;

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricHostComponent.js

@@ -0,0 +1,151 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+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 {getNodeFromInternalInstanceHandle} from '../../Renderer/shims/ReactFabric';
+import {getFabricUIManager} from '../FabricUIManager';
+import {create} from './ReactNativeAttributePayload';
+import warnForStyleProps from './warnForStyleProps';
+import nullthrows from 'nullthrows';
+
+const {
+  measure: fabricMeasure,
+  measureInWindow: fabricMeasureInWindow,
+  measureLayout: fabricMeasureLayout,
+  getBoundingClientRect: fabricGetBoundingClientRect,
+  setNativeProps,
+} = nullthrows(getFabricUIManager());
+
+const noop = () => {};
+
+/**
+ * This is used for refs on host components.
+ */
+export default class ReactFabricHostComponent implements INativeMethods {
+  // These need to be accessible from `ReactFabricPublicInstanceUtils`.
+  __nativeTag: number;
+  __internalInstanceHandle: InternalInstanceHandle;
+
+  _viewConfig: ViewConfig;
+
+  constructor(
+    tag: number,
+    viewConfig: ViewConfig,
+    internalInstanceHandle: InternalInstanceHandle,
+  ) {
+    this.__nativeTag = tag;
+    this._viewConfig = viewConfig;
+    this.__internalInstanceHandle = internalInstanceHandle;
+  }
+
+  blur() {
+    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
+    TextInputState.blurTextInput(this);
+  }
+
+  focus() {
+    // $FlowFixMe[incompatible-exact] Migrate all usages of `NativeMethods` to an interface to fix this.
+    TextInputState.focusTextInput(this);
+  }
+
+  measure(callback: MeasureOnSuccessCallback) {
+    const node = getNodeFromInternalInstanceHandle(
+      this.__internalInstanceHandle,
+    );
+    if (node != null) {
+      fabricMeasure(node, callback);
+    }
+  }
+
+  measureInWindow(callback: MeasureInWindowOnSuccessCallback) {
+    const node = getNodeFromInternalInstanceHandle(
+      this.__internalInstanceHandle,
+    );
+    if (node != null) {
+      fabricMeasureInWindow(node, 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 = getNodeFromInternalInstanceHandle(
+      this.__internalInstanceHandle,
+    );
+    const fromStateNode = getNodeFromInternalInstanceHandle(
+      relativeToNativeNode.__internalInstanceHandle,
+    );
+
+    if (toStateNode != null && fromStateNode != null) {
+      fabricMeasureLayout(
+        toStateNode,
+        fromStateNode,
+        onFail != null ? onFail : noop,
+        onSuccess != null ? onSuccess : noop,
+      );
+    }
+  }
+
+  unstable_getBoundingClientRect(): DOMRect {
+    const node = getNodeFromInternalInstanceHandle(
+      this.__internalInstanceHandle,
+    );
+    if (node != null) {
+      const rect = fabricGetBoundingClientRect(node, true);
+
+      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: {...}): void {
+    if (__DEV__) {
+      warnForStyleProps(nativeProps, this._viewConfig.validAttributes);
+    }
+    const updatePayload = create(nativeProps, this._viewConfig.validAttributes);
+
+    const node = getNodeFromInternalInstanceHandle(
+      this.__internalInstanceHandle,
+    );
+    if (node != null && updatePayload != null) {
+      setNativeProps(node, updatePayload);
+    }
+  }
+}

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+import type ReactNativeElement from '../../DOM/Nodes/ReactNativeElement';
+import type ReadOnlyText from '../../DOM/Nodes/ReadOnlyText';
+import typeof ReactFabricType from '../../Renderer/shims/ReactFabric';
+import type {
+  InternalInstanceHandle,
+  Node,
+  ViewConfig,
+} from '../../Renderer/shims/ReactNativeTypes';
+import type ReactFabricHostComponent from './ReactFabricHostComponent';
+
+import ReactNativeFeatureFlags from '../ReactNativeFeatureFlags';
+
+// Lazy loaded to avoid evaluating the module when using the legacy renderer.
+let PublicInstanceClass:
+  | Class<ReactFabricHostComponent>
+  | Class<ReactNativeElement>;
+let ReadOnlyTextClass: Class<ReadOnlyText>;
+
+// Lazy loaded to avoid evaluating the module when using the legacy renderer.
+let ReactFabric: ReactFabricType;
+
+export function createPublicInstance(
+  tag: number,
+  viewConfig: ViewConfig,
+  internalInstanceHandle: InternalInstanceHandle,
+): 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 PublicInstanceClass(tag, viewConfig, internalInstanceHandle);
+}
+
+export function createPublicTextInstance(
+  internalInstanceHandle: InternalInstanceHandle,
+): ReadOnlyText {
+  if (ReadOnlyTextClass == null) {
+    ReadOnlyTextClass = require('../../DOM/Nodes/ReadOnlyText').default;
+  }
+
+  return new ReadOnlyTextClass(internalInstanceHandle);
+}
+
+export function getNativeTagFromPublicInstance(
+  publicInstance: ReactFabricHostComponent | ReactNativeElement,
+): number {
+  return publicInstance.__nativeTag;
+}
+
+export function getNodeFromPublicInstance(
+  publicInstance: ReactFabricHostComponent | ReactNativeElement,
+): ?Node {
+  // Avoid loading ReactFabric if using an instance from the legacy renderer.
+  if (publicInstance.__internalInstanceHandle == null) {
+    return null;
+  }
+
+  if (ReactFabric == null) {
+    ReactFabric = require('../../Renderer/shims/ReactFabric');
+  }
+  return ReactFabric.getNodeFromInternalInstanceHandle(
+    publicInstance.__internalInstanceHandle,
+  );
+}