@office-iss/react-native-win32 0.70.2 → 0.71.0-preview.1

package/Libraries/Inspector/DevtoolsOverlay.js

@@ -0,0 +1,213 @@
+/**
+ * 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 {PressEvent} from '../Types/CoreEventTypes';
+import type {HostRef} from './getInspectorDataForViewAtPoint';
+
+import View from '../Components/View/View';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import Dimensions from '../Utilities/Dimensions';
+import ElementBox from './ElementBox';
+import * as React from 'react';
+
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+
+const {useEffect, useState, useCallback, useRef} = React;
+
+const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+
+export default function DevtoolsOverlay({
+  inspectedView,
+}: {
+  inspectedView: ?HostRef,
+}): React.Node {
+  const [inspected, setInspected] = useState<null | {
+    frame: {+height: any, +left: any, +top: any, +width: any},
+  }>(null);
+  const [isInspecting, setIsInspecting] = useState(false);
+  const devToolsAgentRef = useRef(null);
+
+  useEffect(() => {
+    let devToolsAgent = null;
+    let hideTimeoutId = null;
+
+    function onAgentHideNativeHighlight() {
+      // we wait to actually hide in order to avoid flicker
+      clearTimeout(hideTimeoutId);
+      hideTimeoutId = setTimeout(() => {
+        setInspected(null);
+      }, 100);
+    }
+
+    function onAgentShowNativeHighlight(node: any) {
+      clearTimeout(hideTimeoutId);
+      // Shape of `node` is different in Fabric.
+      const component = node.canonical ?? node;
+      if (!component || !component.measure) {
+        return;
+      }
+
+      component.measure((x, y, width, height, left, top) => {
+        setInspected({
+          frame: {left, top, width, height},
+        });
+      });
+    }
+
+    function cleanup() {
+      const currentAgent = devToolsAgent;
+      if (currentAgent != null) {
+        currentAgent.removeListener(
+          'hideNativeHighlight',
+          onAgentHideNativeHighlight,
+        );
+        currentAgent.removeListener(
+          'showNativeHighlight',
+          onAgentShowNativeHighlight,
+        );
+        currentAgent.removeListener('shutdown', cleanup);
+        currentAgent.removeListener(
+          'startInspectingNative',
+          onStartInspectingNative,
+        );
+        currentAgent.removeListener(
+          'stopInspectingNative',
+          onStopInspectingNative,
+        );
+        devToolsAgent = null;
+      }
+      devToolsAgentRef.current = null;
+    }
+
+    function onStartInspectingNative() {
+      setIsInspecting(true);
+    }
+
+    function onStopInspectingNative() {
+      setIsInspecting(false);
+    }
+
+    function _attachToDevtools(agent: Object) {
+      devToolsAgent = agent;
+      devToolsAgentRef.current = agent;
+      agent.addListener('hideNativeHighlight', onAgentHideNativeHighlight);
+      agent.addListener('showNativeHighlight', onAgentShowNativeHighlight);
+      agent.addListener('shutdown', cleanup);
+      agent.addListener('startInspectingNative', onStartInspectingNative);
+      agent.addListener('stopInspectingNative', onStopInspectingNative);
+    }
+
+    hook.on('react-devtools', _attachToDevtools);
+    if (hook.reactDevtoolsAgent) {
+      _attachToDevtools(hook.reactDevtoolsAgent);
+    }
+    return () => {
+      hook.off('react-devtools', _attachToDevtools);
+      cleanup();
+    };
+  }, []);
+
+  const findViewForLocation = useCallback(
+    (x: number, y: number) => {
+      const agent = devToolsAgentRef.current;
+      if (agent == null) {
+        return;
+      }
+      getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
+        const {touchedViewTag, closestInstance, frame} = viewData;
+        if (closestInstance != null || touchedViewTag != null) {
+          if (closestInstance != null) {
+            // Fabric
+            agent.selectNode(closestInstance);
+          } else {
+            agent.selectNode(findNodeHandle(touchedViewTag));
+          }
+          setInspected({
+            frame,
+          });
+          return true;
+        }
+        return false;
+      });
+    },
+    [inspectedView],
+  );
+
+  const stopInspecting = useCallback(() => {
+    const agent = devToolsAgentRef.current;
+    if (agent == null) {
+      return;
+    }
+    agent.stopInspectingNative(true);
+    setIsInspecting(false);
+    setInspected(null);
+  }, []);
+
+  const onPointerMove = useCallback(
+    e => {
+      findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
+    },
+    [findViewForLocation],
+  );
+
+  const onResponderMove = useCallback(
+    e => {
+      findViewForLocation(
+        e.nativeEvent.touches[0].locationX,
+        e.nativeEvent.touches[0].locationY,
+      );
+    },
+    [findViewForLocation],
+  );
+
+  const shouldSetResponser = useCallback(
+    (e: PressEvent): boolean => {
+      onResponderMove(e);
+      return true;
+    },
+    [onResponderMove],
+  );
+
+  let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
+  if (isInspecting) {
+    const events = ReactNativeFeatureFlags.shouldEmitW3CPointerEvents
+      ? {
+          onPointerMove,
+          onPointerDown: onPointerMove,
+          onPointerUp: stopInspecting,
+        }
+      : {
+          onStartShouldSetResponder: shouldSetResponser,
+          onResponderMove: onResponderMove,
+          onResponderRelease: stopInspecting,
+        };
+    return (
+      <View
+        nativeID="devToolsInspectorOverlay"
+        style={[styles.inspector, {height: Dimensions.get('window').height}]}
+        {...events}>
+        {highlight}
+      </View>
+    );
+  }
+  return highlight;
+}
+
+const styles = StyleSheet.create({
+  inspector: {
+    backgroundColor: 'transparent',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+  },
+});

package/Libraries/Inspector/ElementBox.js

@@ -10,14 +10,13 @@
 
 'use strict';
 
-const BorderBox = require('./BorderBox');
-const Dimensions = require('../Utilities/Dimensions');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
-
 const flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Dimensions = require('../Utilities/Dimensions');
+const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
+const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {

package/Libraries/Inspector/ElementProperties.js

@@ -10,20 +10,19 @@
 
 'use strict';
 
-const BoxInspector = require('./BoxInspector');
-const React = require('react');
-const StyleInspector = require('./StyleInspector');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const Text = require('../Text/Text');
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
 const View = require('../Components/View/View');
-
+const openFileInEditor = require('../Core/Devtools/openFileInEditor');
 const flattenStyle = require('../StyleSheet/flattenStyle');
+const StyleSheet = require('../StyleSheet/StyleSheet');
+const Text = require('../Text/Text');
 const mapWithSeparator = require('../Utilities/mapWithSeparator');
-const openFileInEditor = require('../Core/Devtools/openFileInEditor');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+const BoxInspector = require('./BoxInspector');
+const StyleInspector = require('./StyleInspector');
+const React = require('react');
 
 type Props = $ReadOnly<{|
   hierarchy: Array<{|name: string|}>,
@@ -66,7 +65,7 @@ class ElementProperties extends React.Component<Props> {
           <View style={styles.breadcrumb}>
             {mapWithSeparator(
               this.props.hierarchy,
-              (hierarchyItem, i) => (
+              (hierarchyItem, i): React.MixedElement => (
                 <TouchableHighlight
                   key={'item-' + i}
                   style={[styles.breadItem, i === selection && styles.selected]}
@@ -75,7 +74,7 @@ class ElementProperties extends React.Component<Props> {
                   <Text style={styles.breadItemText}>{hierarchyItem.name}</Text>
                 </TouchableHighlight>
               ),
-              i => (
+              (i): React.MixedElement => (
                 <Text key={'sep-' + i} style={styles.breadSep}>
                   &#9656;
                 </Text>

package/Libraries/Inspector/Inspector.js

@@ -10,80 +10,28 @@
 
 'use strict';
 
+import type {TouchedViewDataAtPoint} from '../Renderer/shims/ReactNativeTypes';
+import type {HostRef} from './getInspectorDataForViewAtPoint';
+
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+const View = require('../Components/View/View');
+const PressabilityDebug = require('../Pressability/PressabilityDebug');
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
+const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions');
+const Platform = require('../Utilities/Platform');
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
-const Platform = require('../Utilities/Platform');
-const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const React = require('react');
-const ReactNative = require('../Renderer/shims/ReactNative');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const View = require('../Components/View/View');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-
-const invariant = require('invariant');
-
-import type {
-  HostComponent,
-  TouchedViewDataAtPoint,
-} from '../Renderer/shims/ReactNativeTypes';
-
-type HostRef = React.ElementRef<HostComponent<mixed>>;
-
-export type ReactRenderer = {
-  rendererConfig: {
-    getInspectorDataForViewAtPoint: (
-      inspectedView: ?HostRef,
-      locationX: number,
-      locationY: number,
-      callback: Function,
-    ) => void,
-    ...
-  },
-};
 
 const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-const renderers = findRenderers();
 
 // Required for React DevTools to view/edit React Native styles in Flipper.
 // Flipper doesn't inject these values when initializing DevTools.
 hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
 hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
 
-function findRenderers(): $ReadOnlyArray<ReactRenderer> {
-  const allRenderers = Array.from(hook.renderers.values());
-  invariant(
-    allRenderers.length >= 1,
-    'Expected to find at least one React Native renderer on DevTools hook.',
-  );
-  return allRenderers;
-}
-
-function getInspectorDataForViewAtPoint(
-  inspectedView: ?HostRef,
-  locationX: number,
-  locationY: number,
-  callback: (viewData: TouchedViewDataAtPoint) => void,
-) {
-  // Check all renderers for inspector data.
-  for (let i = 0; i < renderers.length; i++) {
-    const renderer = renderers[i];
-    if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
-      renderer.rendererConfig.getInspectorDataForViewAtPoint(
-        inspectedView,
-        locationX,
-        locationY,
-        viewData => {
-          // Only return with non-empty view data since only one renderer will have this view.
-          if (viewData && viewData.hierarchy.length > 0) {
-            callback(viewData);
-          }
-        },
-      );
-    }
-  }
-}
-
 class Inspector extends React.Component<
   {
     inspectedView: ?HostRef,
@@ -144,8 +92,6 @@ class Inspector extends React.Component<
   }
 
   _attachToDevtools = (agent: Object) => {
-    agent.addListener('hideNativeHighlight', this._onAgentHideNativeHighlight);
-    agent.addListener('showNativeHighlight', this._onAgentShowNativeHighlight);
     agent.addListener('shutdown', this._onAgentShutdown);
 
     this.setState({
@@ -153,45 +99,9 @@ class Inspector extends React.Component<
     });
   };
 
-  _onAgentHideNativeHighlight = () => {
-    if (this.state.inspected === null) {
-      return;
-    }
-    // we wait to actually hide in order to avoid flicker
-    this._hideTimeoutID = setTimeout(() => {
-      this.setState({
-        inspected: null,
-      });
-    }, 100);
-  };
-
-  _onAgentShowNativeHighlight = (node: any) => {
-    clearTimeout(this._hideTimeoutID);
-
-    // Shape of `node` is different in Fabric.
-    const component = node.canonical ?? node;
-
-    component.measure((x, y, width, height, left, top) => {
-      this.setState({
-        hierarchy: [],
-        inspected: {
-          frame: {left, top, width, height},
-        },
-      });
-    });
-  };
-
   _onAgentShutdown = () => {
     const agent = this.state.devtoolsAgent;
     if (agent != null) {
-      agent.removeListener(
-        'hideNativeHighlight',
-        this._onAgentHideNativeHighlight,
-      );
-      agent.removeListener(
-        'showNativeHighlight',
-        this._onAgentShowNativeHighlight,
-      );
       agent.removeListener('shutdown', this._onAgentShutdown);
 
       this.setState({devtoolsAgent: null});
@@ -200,10 +110,9 @@ class Inspector extends React.Component<
 
   setSelection(i: number) {
     const hierarchyItem = this.state.hierarchy[i];
-    // we pass in ReactNative.findNodeHandle as the method is injected
-    const {measure, props, source} = hierarchyItem.getInspectorData(
-      ReactNative.findNodeHandle,
-    );
+    // we pass in findNodeHandle as the method is injected
+    const {measure, props, source} =
+      hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
       this.setState({
@@ -227,15 +136,19 @@ class Inspector extends React.Component<
         frame,
         pointerY,
         touchedViewTag,
+        closestInstance,
       } = viewData;
 
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent && touchedViewTag) {
-        this.state.devtoolsAgent.selectNode(
-          ReactNative.findNodeHandle(touchedViewTag),
-        );
+      if (this.state.devtoolsAgent) {
+        if (closestInstance != null) {
+          // Fabric
+          this.state.devtoolsAgent.selectNode(closestInstance);
+        } else if (touchedViewTag != null) {
+          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+        }
       }
 
       this.setState({
@@ -259,6 +172,7 @@ class Inspector extends React.Component<
           this._setTouchedViewData(viewData);
           this._setTouchedViewData = null;
         }
+        return false;
       },
     );
   }

package/Libraries/Inspector/Inspector.win32.js

@@ -10,81 +10,29 @@
 
 'use strict';
 
-// const Dimensions = require('../Utilities/Dimensions'); [Win32]
-const InspectorOverlay = require('./InspectorOverlay');
-const InspectorPanel = require('./InspectorPanel');
-const Platform = require('../Utilities/Platform');
+import type {TouchedViewDataAtPoint} from '../Renderer/shims/ReactNativeTypes';
+import type {HostRef} from './getInspectorDataForViewAtPoint';
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
-const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative');
+const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
+//const Dimensions = require('../Utilities/Dimensions');
+const Platform = require('../Utilities/Platform');
 const View = require('../Components/View/View');
-const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-
-const invariant = require('invariant');
-
-import type {
-  HostComponent,
-  TouchedViewDataAtPoint,
-} from '../Renderer/shims/ReactNativeTypes';
-
-type HostRef = React.ElementRef<HostComponent<mixed>>;
-
-const UIManager = require('../ReactNative/UIManager'); // [Win32]
-
-export type ReactRenderer = {
-  rendererConfig: {
-    getInspectorDataForViewAtPoint: (
-      inspectedView: ?HostRef,
-      locationX: number,
-      locationY: number,
-      callback: Function,
-    ) => void,
-    ...
-  },
-};
+const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
+const InspectorOverlay = require('./InspectorOverlay');
+const InspectorPanel = require('./InspectorPanel');
+const React = require('react');
 
 const hook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
-const renderers = findRenderers();
 
 // Required for React DevTools to view/edit React Native styles in Flipper.
 // Flipper doesn't inject these values when initializing DevTools.
 hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
 hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
 
-function findRenderers(): $ReadOnlyArray<ReactRenderer> {
-  const allRenderers = Array.from(hook.renderers.values());
-  invariant(
-    allRenderers.length >= 1,
-    'Expected to find at least one React Native renderer on DevTools hook.',
-  );
-  return allRenderers;
-}
-
-function getInspectorDataForViewAtPoint(
-  inspectedView: ?HostRef,
-  locationX: number,
-  locationY: number,
-  callback: (viewData: TouchedViewDataAtPoint) => void,
-) {
-  // Check all renderers for inspector data.
-  for (let i = 0; i < renderers.length; i++) {
-    const renderer = renderers[i];
-    if (renderer?.rendererConfig?.getInspectorDataForViewAtPoint != null) {
-      renderer.rendererConfig.getInspectorDataForViewAtPoint(
-        inspectedView,
-        locationX,
-        locationY,
-        viewData => {
-          // Only return with non-empty view data since only one renderer will have this view.
-          if (viewData && viewData.hierarchy.length > 0) {
-            callback(viewData);
-          }
-        },
-      );
-    }
-  }
-}
+const UIManager = require('../ReactNative/UIManager'); // [Win32]
 
 class Inspector extends React.Component<
   {
@@ -146,8 +94,6 @@ class Inspector extends React.Component<
   }
 
   _attachToDevtools = (agent: Object) => {
-    agent.addListener('hideNativeHighlight', this._onAgentHideNativeHighlight);
-    agent.addListener('showNativeHighlight', this._onAgentShowNativeHighlight);
     agent.addListener('shutdown', this._onAgentShutdown);
 
     this.setState({
@@ -155,45 +101,9 @@ class Inspector extends React.Component<
     });
   };
 
-  _onAgentHideNativeHighlight = () => {
-    if (this.state.inspected === null) {
-      return;
-    }
-    // we wait to actually hide in order to avoid flicker
-    this._hideTimeoutID = setTimeout(() => {
-      this.setState({
-        inspected: null,
-      });
-    }, 100);
-  };
-
-  _onAgentShowNativeHighlight = (node: any) => {
-    clearTimeout(this._hideTimeoutID);
-
-    // Shape of `node` is different in Fabric.
-    const component = node.canonical ?? node;
-
-    component.measure((x, y, width, height, left, top) => {
-      this.setState({
-        hierarchy: [],
-        inspected: {
-          frame: {left, top, width, height},
-        },
-      });
-    });
-  };
-
   _onAgentShutdown = () => {
     const agent = this.state.devtoolsAgent;
     if (agent != null) {
-      agent.removeListener(
-        'hideNativeHighlight',
-        this._onAgentHideNativeHighlight,
-      );
-      agent.removeListener(
-        'showNativeHighlight',
-        this._onAgentShowNativeHighlight,
-      );
       agent.removeListener('shutdown', this._onAgentShutdown);
 
       this.setState({devtoolsAgent: null});
@@ -202,10 +112,9 @@ class Inspector extends React.Component<
 
   setSelection(i: number) {
     const hierarchyItem = this.state.hierarchy[i];
-    // we pass in ReactNative.findNodeHandle as the method is injected
-    const {measure, props, source} = hierarchyItem.getInspectorData(
-      ReactNative.findNodeHandle,
-    );
+    // we pass in findNodeHandle as the method is injected
+    const {measure, props, source} =
+      hierarchyItem.getInspectorData(findNodeHandle);
 
     measure((x, y, width, height, left, top) => {
       this.setState({
@@ -229,15 +138,19 @@ class Inspector extends React.Component<
         frame,
         pointerY,
         touchedViewTag,
+        closestInstance,
       } = viewData;
 
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent && touchedViewTag) {
-        this.state.devtoolsAgent.selectNode(
-          ReactNative.findNodeHandle(touchedViewTag),
-        );
+      if (this.state.devtoolsAgent) {
+        if (closestInstance != null) {
+          // Fabric
+          this.state.devtoolsAgent.selectNode(closestInstance);
+        } else if (touchedViewTag != null) {
+          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+        }
       }
 
       // [Win32 Avoid Dimensions call
@@ -266,6 +179,7 @@ class Inspector extends React.Component<
           this._setTouchedViewData(viewData);
           this._setTouchedViewData = null;
         }
+        return false;
       },
     );
   }

package/Libraries/Inspector/InspectorOverlay.js

@@ -10,14 +10,14 @@
 
 'use strict';
 
+import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
+import type {PressEvent} from '../Types/CoreEventTypes';
+
+const View = require('../Components/View/View');
+const StyleSheet = require('../StyleSheet/StyleSheet');
 const Dimensions = require('../Utilities/Dimensions');
 const ElementBox = require('./ElementBox');
 const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const View = require('../Components/View/View');
-
-import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
-import type {PressEvent} from '../Types/CoreEventTypes';
 
 type Inspected = $ReadOnly<{|
   frame?: Object,