react-native-windows 0.73.11 → 0.74.0-preview.2

package/Libraries/Inspector/InspectorOverlay.js

@@ -10,58 +10,45 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {PressEvent} from '../Types/CoreEventTypes';
+import type {InspectedElement} from './Inspector';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
-type Inspected = $ReadOnly<{|
-  frame?: Object,
-  style?: ViewStyleProp,
-|}>;
-
 type Props = $ReadOnly<{|
-  inspected?: Inspected,
+  inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
 |}>;
 
-class InspectorOverlay extends React.Component<Props> {
-  findViewForTouchEvent: (e: PressEvent) => void = (e: PressEvent) => {
+function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+  const findViewForTouchEvent = (e: PressEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
 
-    this.props.onTouchPoint(locationX, locationY);
+    onTouchPoint(locationX, locationY);
   };
 
-  shouldSetResponder: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
-    this.findViewForTouchEvent(e);
+  const handleStartShouldSetResponder = (e: PressEvent): boolean => {
+    findViewForTouchEvent(e);
     return true;
   };
 
-  render(): React.Node {
-    let content = null;
-    if (this.props.inspected) {
-      content = (
-        <ElementBox
-          frame={this.props.inspected.frame}
-          style={this.props.inspected.style}
-        />
-      );
-    }
-
-    return (
-      <View
-        onStartShouldSetResponder={this.shouldSetResponder}
-        onResponderMove={this.findViewForTouchEvent}
-        nativeID="inspectorOverlay" /* TODO: T68258846. */
-        style={[styles.inspector, {height: Dimensions.get('window').height}]}>
-        {content}
-      </View>
-    );
+  let content = null;
+  if (inspected) {
+    content = <ElementBox frame={inspected.frame} style={inspected.style} />;
   }
+
+  return (
+    <View
+      onStartShouldSetResponder={handleStartShouldSetResponder}
+      onResponderMove={findViewForTouchEvent}
+      nativeID="inspectorOverlay" /* TODO: T68258846. */
+      style={styles.inspector}>
+      {content}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
@@ -71,6 +58,7 @@ const styles = StyleSheet.create({
     left: 0,
     top: 0,
     right: 0,
+    bottom: 0,
   },
 });
 

package/Libraries/Inspector/InspectorPanel.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {ElementsHierarchy, InspectedElement} from './Inspector';
 
 import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
 
@@ -34,22 +34,10 @@ type Props = $ReadOnly<{|
   setTouchTargeting: (val: boolean) => void,
   networking: boolean,
   setNetworking: (val: boolean) => void,
-  hierarchy?: ?Array<{|name: string|}>,
+  hierarchy?: ?ElementsHierarchy,
   selection?: ?number,
   setSelection: number => mixed,
-  inspected?: ?$ReadOnly<{|
-    style?: ?ViewStyleProp,
-    frame?: ?$ReadOnly<{|
-      top?: ?number,
-      left?: ?number,
-      width?: ?number,
-      height: ?number,
-    |}>,
-    source?: ?{|
-      fileName?: string,
-      lineNumber?: number,
-    |},
-  |}>,
+  inspected?: ?InspectedElement,
 |}>;
 
 class InspectorPanel extends React.Component<Props> {
@@ -70,8 +58,6 @@ class InspectorPanel extends React.Component<Props> {
           <ElementProperties
             style={this.props.inspected.style}
             frame={this.props.inspected.frame}
-            source={this.props.inspected.source}
-            // $FlowFixMe[incompatible-type] : Hierarchy should be non-nullable
             hierarchy={this.props.hierarchy}
             selection={this.props.selection}
             setSelection={this.props.setSelection}

package/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -0,0 +1,171 @@
+/**
+ * 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
+ */
+
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
+import type {PointerEvent} from '../Types/CoreEventTypes';
+import type {PressEvent} from '../Types/CoreEventTypes';
+import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import type {InspectedElement} from './Inspector';
+
+import View from '../Components/View/View';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import ElementBox from './ElementBox';
+import * as React from 'react';
+
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+
+const {useEffect, useState, useCallback} = React;
+
+type Props = {
+  inspectedViewRef: InspectedViewRef,
+  reactDevToolsAgent: ReactDevToolsAgent,
+};
+
+export default function ReactDevToolsOverlay({
+  inspectedViewRef,
+  reactDevToolsAgent,
+}: Props): React.Node {
+  const [inspected, setInspected] = useState<?InspectedElement>(null);
+  const [isInspecting, setIsInspecting] = useState(false);
+
+  useEffect(() => {
+    function cleanup() {
+      reactDevToolsAgent.removeListener('shutdown', cleanup);
+      reactDevToolsAgent.removeListener(
+        'startInspectingNative',
+        onStartInspectingNative,
+      );
+      reactDevToolsAgent.removeListener(
+        'stopInspectingNative',
+        onStopInspectingNative,
+      );
+    }
+
+    function onStartInspectingNative() {
+      setIsInspecting(true);
+    }
+
+    function onStopInspectingNative() {
+      setIsInspecting(false);
+    }
+
+    reactDevToolsAgent.addListener('shutdown', cleanup);
+    reactDevToolsAgent.addListener(
+      'startInspectingNative',
+      onStartInspectingNative,
+    );
+    reactDevToolsAgent.addListener(
+      'stopInspectingNative',
+      onStopInspectingNative,
+    );
+
+    return cleanup;
+  }, [reactDevToolsAgent]);
+
+  const findViewForLocation = useCallback(
+    (x: number, y: number) => {
+      getInspectorDataForViewAtPoint(
+        inspectedViewRef.current,
+        x,
+        y,
+        viewData => {
+          const {touchedViewTag, closestInstance, frame} = viewData;
+          if (closestInstance != null || touchedViewTag != null) {
+            // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+            // this makes sure it works for both architectures.
+            reactDevToolsAgent.selectNode(findNodeHandle(touchedViewTag));
+            if (closestInstance != null) {
+              reactDevToolsAgent.selectNode(closestInstance);
+            }
+            setInspected({
+              frame,
+            });
+            return true;
+          }
+          return false;
+        },
+      );
+    },
+    [inspectedViewRef, reactDevToolsAgent],
+  );
+
+  const stopInspecting = useCallback(() => {
+    reactDevToolsAgent.stopInspectingNative(true);
+    setIsInspecting(false);
+    setInspected(null);
+  }, [reactDevToolsAgent]);
+
+  const onPointerMove = useCallback(
+    (e: PointerEvent) => {
+      findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
+    },
+    [findViewForLocation],
+  );
+
+  const onResponderMove = useCallback(
+    (e: PressEvent) => {
+      findViewForLocation(
+        e.nativeEvent.touches[0].locationX,
+        e.nativeEvent.touches[0].locationY,
+      );
+    },
+    [findViewForLocation],
+  );
+
+  const shouldSetResponder = useCallback(
+    (e: PressEvent): boolean => {
+      onResponderMove(e);
+      return true;
+    },
+    [onResponderMove],
+  );
+
+  const highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+
+  if (isInspecting) {
+    const events =
+      // Pointer events only work on fabric
+      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+        ? {
+            onPointerMove,
+            onPointerDown: onPointerMove,
+            onPointerUp: stopInspecting,
+          }
+        : {
+            onStartShouldSetResponder: shouldSetResponder,
+            onResponderMove: onResponderMove,
+            onResponderRelease: stopInspecting,
+          };
+
+    return (
+      <View
+        nativeID="devToolsInspectorOverlay"
+        style={styles.inspector}
+        {...events}>
+        {highlight}
+      </View>
+    );
+  }
+
+  return highlight;
+}
+
+const styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  },
+});

package/Libraries/Inspector/getInspectorDataForViewAtPoint.js

@@ -28,17 +28,27 @@ export type ReactRenderer = {
     ...
   },
 };
+type AttachedRendererEventPayload = {id: number, renderer: ReactRenderer};
 
-const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-const renderers = findRenderers();
+const reactDevToolsHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+invariant(
+  Boolean(reactDevToolsHook),
+  'getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected',
+);
 
-function findRenderers(): $ReadOnlyArray<ReactRenderer> {
-  const allRenderers = Array.from(hook.renderers.values());
+const renderers: Array<ReactRenderer> = Array.from(
+  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values(),
+);
+
+const appendRenderer = ({renderer}: AttachedRendererEventPayload) =>
+  renderers.push(renderer);
+reactDevToolsHook.on('renderer', appendRenderer);
+
+function validateRenderers(): void {
   invariant(
-    allRenderers.length >= 1,
+    renderers.length > 0,
     'Expected to find at least one React Native renderer on DevTools hook.',
   );
-  return allRenderers;
 }
 
 module.exports = function getInspectorDataForViewAtPoint(
@@ -47,13 +57,15 @@ module.exports = function getInspectorDataForViewAtPoint(
   locationY: number,
   callback: (viewData: TouchedViewDataAtPoint) => boolean,
 ) {
+  validateRenderers();
+
   let shouldBreak = false;
   // Check all renderers for inspector data.
-  for (let i = 0; i < renderers.length; i++) {
+  for (const renderer of renderers) {
     if (shouldBreak) {
       break;
     }
-    const renderer = renderers[i];
+
     if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
       renderer.rendererConfig.getInspectorDataForViewAtPoint(
         inspectedView,

package/Libraries/Interaction/FrameRateLogger.js

@@ -30,28 +30,18 @@ const invariant = require('invariant');
  */
 const FrameRateLogger = {
   /**
-   * Enable `debug` to see local logs of what's going on. `reportStackTraces` will grab stack traces
-   * during UI thread stalls and upload them if the native module supports it.
+   * Enable `debug` to see local logs of what's going on.
    */
-  setGlobalOptions: function (options: {
-    debug?: boolean,
-    reportStackTraces?: boolean,
-    ...
-  }) {
+  setGlobalOptions: function (options: {debug?: boolean, ...}) {
     if (options.debug !== undefined) {
       invariant(
         NativeFrameRateLogger,
         'Trying to debug FrameRateLogger without the native module!',
       );
     }
-    if (NativeFrameRateLogger) {
-      // Needs to clone the object first to avoid modifying the argument.
-      const optionsClone = {
-        debug: !!options.debug,
-        reportStackTraces: !!options.reportStackTraces,
-      };
-      NativeFrameRateLogger.setGlobalOptions(optionsClone);
-    }
+    NativeFrameRateLogger?.setGlobalOptions({
+      debug: !!options.debug,
+    });
   },
 
   /**
@@ -59,7 +49,7 @@ const FrameRateLogger = {
    * in `AppRegistry`, but navigation is also a common place to hook in.
    */
   setContext: function (context: string) {
-    NativeFrameRateLogger && NativeFrameRateLogger.setContext(context);
+    NativeFrameRateLogger?.setContext(context);
   },
 
   /**
@@ -67,7 +57,7 @@ const FrameRateLogger = {
    * automatically.
    */
   beginScroll() {
-    NativeFrameRateLogger && NativeFrameRateLogger.beginScroll();
+    NativeFrameRateLogger?.beginScroll();
   },
 
   /**
@@ -75,7 +65,7 @@ const FrameRateLogger = {
    * automatically.
    */
   endScroll() {
-    NativeFrameRateLogger && NativeFrameRateLogger.endScroll();
+    NativeFrameRateLogger?.endScroll();
   },
 };
 

package/Libraries/Interaction/NativeFrameRateLogger.js

@@ -4,22 +4,10 @@
  * 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
+ * @format
  */
 
-import type {TurboModule} from '../TurboModule/RCTExport';
-
-import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
-
-export interface Spec extends TurboModule {
-  +setGlobalOptions: (options: {|
-    +debug?: ?boolean,
-    +reportStackTraces?: ?boolean,
-  |}) => void;
-  +setContext: (context: string) => void;
-  +beginScroll: () => void;
-  +endScroll: () => void;
-}
-
-export default (TurboModuleRegistry.get<Spec>('FrameRateLogger'): ?Spec);
+export * from '../../src/private/specs/modules/NativeFrameRateLogger';
+import NativeFrameRateLogger from '../../src/private/specs/modules/NativeFrameRateLogger';
+export default NativeFrameRateLogger;

package/Libraries/IntersectionObserver/IntersectionObserver.js

@@ -13,7 +13,7 @@
 import type IntersectionObserverEntry from './IntersectionObserverEntry';
 import type {IntersectionObserverId} from './IntersectionObserverManager';
 
-import ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import ReactNativeElement from '../../src/private/webapis/dom/nodes/ReactNativeElement';
 import * as IntersectionObserverManager from './IntersectionObserverManager';
 
 export type IntersectionObserverCallback = (

package/Libraries/IntersectionObserver/IntersectionObserverEntry.js

@@ -10,12 +10,10 @@
 
 // flowlint unsafe-getters-setters:off
 
-import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
-import type {InternalInstanceHandle} from '../Renderer/shims/ReactNativeTypes';
+import type ReactNativeElement from '../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type {NativeIntersectionObserverEntry} from './NativeIntersectionObserver';
 
-import DOMRectReadOnly from '../DOM/Geometry/DOMRectReadOnly';
-import {getPublicInstanceFromInternalInstanceHandle} from '../DOM/Nodes/ReadOnlyNode';
+import DOMRectReadOnly from '../../src/private/webapis/dom/geometry/DOMRectReadOnly';
 
 /**
  * The [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
@@ -29,9 +27,17 @@ export default class IntersectionObserverEntry {
   // We lazily compute all the properties from the raw entry provided by the
   // native module, so we avoid unnecessary work.
   _nativeEntry: NativeIntersectionObserverEntry;
-
-  constructor(nativeEntry: NativeIntersectionObserverEntry) {
+  // There are cases where this cannot be safely derived from the instance
+  // handle in the native entry (when the target is detached), so we need to
+  // keep a reference to it directly.
+  _target: ReactNativeElement;
+
+  constructor(
+    nativeEntry: NativeIntersectionObserverEntry,
+    target: ReactNativeElement,
+  ) {
     this._nativeEntry = nativeEntry;
+    this._target = target;
   }
 
   /**
@@ -60,10 +66,12 @@ export default class IntersectionObserverEntry {
       return 0;
     }
 
-    return (
+    const ratio =
       (intersectionRect.width * intersectionRect.height) /
-      (boundingClientRect.width * boundingClientRect.height)
-    );
+      (boundingClientRect.width * boundingClientRect.height);
+
+    // Prevent rounding errors from making this value greater than 1.
+    return Math.min(ratio, 1);
   }
 
   /**
@@ -113,15 +121,7 @@ export default class IntersectionObserverEntry {
    * The `ReactNativeElement` whose intersection with the root changed.
    */
   get target(): ReactNativeElement {
-    const targetInstanceHandle: InternalInstanceHandle =
-      // $FlowExpectedError[incompatible-type] native modules don't support using InternalInstanceHandle as a type
-      this._nativeEntry.targetInstanceHandle;
-
-    const targetElement =
-      getPublicInstanceFromInternalInstanceHandle(targetInstanceHandle);
-
-    // $FlowExpectedError[incompatible-cast] we know targetElement is a ReactNativeElement, not just a ReadOnlyNode
-    return (targetElement: ReactNativeElement);
+    return this._target;
   }
 
   /**
@@ -135,6 +135,7 @@ export default class IntersectionObserverEntry {
 
 export function createIntersectionObserverEntry(
   entry: NativeIntersectionObserverEntry,
+  target: ReactNativeElement,
 ): IntersectionObserverEntry {
-  return new IntersectionObserverEntry(entry);
+  return new IntersectionObserverEntry(entry, target);
 }

package/Libraries/IntersectionObserver/IntersectionObserverManager.js

@@ -18,13 +18,16 @@
  * the notifications together.
  */
 
-import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import type ReactNativeElement from '../../src/private/webapis/dom/nodes/ReactNativeElement';
 import type IntersectionObserver, {
   IntersectionObserverCallback,
 } from './IntersectionObserver';
 import type IntersectionObserverEntry from './IntersectionObserverEntry';
 
-import {getShadowNode} from '../DOM/Nodes/ReadOnlyNode';
+import {
+  getInstanceHandle,
+  getShadowNode,
+} from '../../src/private/webapis/dom/nodes/ReadOnlyNode';
 import * as Systrace from '../Performance/Systrace';
 import warnOnce from '../Utilities/warnOnce';
 import {createIntersectionObserverEntry} from './IntersectionObserverEntry';
@@ -40,6 +43,45 @@ const registeredIntersectionObservers: Map<
   {observer: IntersectionObserver, callback: IntersectionObserverCallback},
 > = new Map();
 
+// We need to keep the mapping from instance handles to targets because when
+// targets are detached (their components are unmounted), React resets the
+// instance handle to prevent memory leaks and it cuts the connection between
+// the instance handle and the target.
+const instanceHandleToTargetMap: WeakMap<interface {}, ReactNativeElement> =
+  new WeakMap();
+
+function getTargetFromInstanceHandle(
+  instanceHandle: mixed,
+): ?ReactNativeElement {
+  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
+  const key: interface {} = instanceHandle;
+  return instanceHandleToTargetMap.get(key);
+}
+
+function setTargetForInstanceHandle(
+  instanceHandle: mixed,
+  target: ReactNativeElement,
+): void {
+  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
+  const key: interface {} = instanceHandle;
+  instanceHandleToTargetMap.set(key, target);
+}
+
+function unsetTargetForInstanceHandle(instanceHandle: mixed): void {
+  // $FlowExpectedError[incompatible-type] instanceHandle is typed as mixed but we know it's an object and we need it to be to use it as a key in a WeakMap.
+  const key: interface {} = instanceHandle;
+  instanceHandleToTargetMap.delete(key);
+}
+
+// The mapping between ReactNativeElement and their corresponding shadow node
+// also needs to be kept here because React removes the link when unmounting.
+// We also keep the instance handle so we don't have to retrieve it again
+// from the target to unobserve.
+const targetToShadowNodeAndInstanceHandleMap: WeakMap<
+  ReactNativeElement,
+  [ReturnType<typeof getShadowNode>, mixed],
+> = new WeakMap();
+
 /**
  * Registers the given intersection observer and returns a unique ID for it,
  * which is required to start observing targets.
@@ -109,6 +151,25 @@ export function observe({
     return;
   }
 
+  const instanceHandle = getInstanceHandle(target);
+  if (instanceHandle == null) {
+    console.error(
+      'IntersectionObserverManager: could not find reference to instance handle from target',
+    );
+    return;
+  }
+
+  // Store the mapping between the instance handle and the target so we can
+  // access it even after the instance handle has been unmounted.
+  setTargetForInstanceHandle(instanceHandle, target);
+
+  // Same for the mapping between the target and its shadow node
+  // and instance handle.
+  targetToShadowNodeAndInstanceHandleMap.set(target, [
+    targetShadowNode,
+    instanceHandle,
+  ]);
+
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
     isConnected = true;
@@ -140,18 +201,26 @@ export function unobserve(
     return;
   }
 
-  const targetShadowNode = getShadowNode(target);
-  if (targetShadowNode == null) {
+  const targetShadowNodeAndInstanceHandle =
+    targetToShadowNodeAndInstanceHandleMap.get(target);
+  if (targetShadowNodeAndInstanceHandle == null) {
     console.error(
-      'IntersectionObserverManager: could not find reference to host node from target',
+      'IntersectionObserverManager: could not find registration data for target',
     );
     return;
   }
 
+  const [targetShadowNode, instanceHandle] = targetShadowNodeAndInstanceHandle;
+
   NativeIntersectionObserver.unobserve(
     intersectionObserverId,
     targetShadowNode,
   );
+
+  // We can guarantee we won't receive any more entries for this target,
+  // so we don't need to keep the mappings anymore.
+  unsetTargetForInstanceHandle(instanceHandle);
+  targetToShadowNodeAndInstanceHandleMap.delete(target);
 }
 
 /**
@@ -188,7 +257,16 @@ function doNotifyIntersectionObservers(): void {
       list = [];
       entriesByObserver.set(nativeEntry.intersectionObserverId, list);
     }
-    list.push(createIntersectionObserverEntry(nativeEntry));
+
+    const target = getTargetFromInstanceHandle(
+      nativeEntry.targetInstanceHandle,
+    );
+    if (target == null) {
+      console.warn('Could not find target to create IntersectionObserverEntry');
+      continue;
+    }
+
+    list.push(createIntersectionObserverEntry(nativeEntry, target));
   }
 
   for (const [