react-native-windows 0.84.0 → 0.85.0-preview.1

package/src/private/components/virtualview/VirtualViewNativeComponent.js

@@ -18,7 +18,7 @@ import type {HostComponent} from '../../types/HostComponent';
 
 import codegenNativeComponent from '../../../../Libraries/Utilities/codegenNativeComponent';
 
-export type NativeModeChangeEvent = $ReadOnly<{
+export type NativeModeChangeEvent = Readonly<{
   /**
    * Virtualization mode of the target view.
    *
@@ -34,7 +34,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   /**
    * Rect of the target view, relative to the nearest ancestor scroll container.
    */
-  targetRect: $ReadOnly<{
+  targetRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -51,7 +51,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
    *
    * This can be used to determine whether and how much new content to render.
    */
-  thresholdRect: $ReadOnly<{
+  thresholdRect: Readonly<{
     x: Double,
     y: Double,
     width: Double,
@@ -59,7 +59,7 @@ export type NativeModeChangeEvent = $ReadOnly<{
   }>,
 }>;
 
-type VirtualViewNativeProps = $ReadOnly<{
+type VirtualViewNativeProps = Readonly<{
   ...ViewProps,
 
   /**

package/src/private/devsupport/devmenu/elementinspector/BorderBox.js

@@ -16,9 +16,9 @@ import * as React from 'react';
 
 const View = require('../../../../../Libraries/Components/View/View').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   children: React.Node,
-  box?: ?$ReadOnly<{
+  box?: ?Readonly<{
     top: number,
     right: number,
     bottom: number,

package/src/private/devsupport/devmenu/elementinspector/BoxInspector.js

@@ -31,7 +31,7 @@ const blank = {
   bottom: 0,
 };
 
-type BoxInspectorProps = $ReadOnly<{
+type BoxInspectorProps = Readonly<{
   style: ViewStyleProp,
   frame: ?InspectedElementFrame,
 }>;
@@ -57,10 +57,10 @@ function BoxInspector({style, frame}: BoxInspectorProps): React.Node {
   );
 }
 
-type BoxContainerProps = $ReadOnly<{
+type BoxContainerProps = Readonly<{
   title: string,
   titleStyle?: TextStyleProp,
-  box: $ReadOnly<{
+  box: Readonly<{
     top: number,
     left: number,
     right: number,

package/src/private/devsupport/devmenu/elementinspector/ElementBox.js

@@ -25,15 +25,15 @@ const Dimensions =
 const BorderBox = require('./BorderBox').default;
 const resolveBoxStyle = require('./resolveBoxStyle').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   frame: InspectedElementFrame,
   style?: ?ViewStyleProp,
 }>;
 
 function ElementBox({frame, style}: Props): React.Node {
   const flattenedStyle = flattenStyle(style) || {};
-  let margin: ?$ReadOnly<Style> = resolveBoxStyle('margin', flattenedStyle);
-  let padding: ?$ReadOnly<Style> = resolveBoxStyle('padding', flattenedStyle);
+  let margin: ?Readonly<Style> = resolveBoxStyle('margin', flattenedStyle);
+  let padding: ?Readonly<Style> = resolveBoxStyle('padding', flattenedStyle);
 
   const frameStyle = {...frame};
   const contentStyle: {width: number, height: number} = {
@@ -110,7 +110,7 @@ type Style = {
  * @param style the style to resolve
  * @return a modified copy
  */
-function resolveRelativeSizes(style: $ReadOnly<Style>): Style {
+function resolveRelativeSizes(style: Readonly<Style>): Style {
   let resolvedStyle = {...style};
   resolveSizeInPlace(resolvedStyle, 'top', 'height');
   resolveSizeInPlace(resolvedStyle, 'right', 'width');

package/src/private/devsupport/devmenu/elementinspector/ElementProperties.js

@@ -30,7 +30,7 @@ const mapWithSeparator =
 const BoxInspector = require('./BoxInspector').default;
 const StyleInspector = require('./StyleInspector').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   hierarchy: ?InspectorData['hierarchy'],
   style?: ?ViewStyleProp,
   frame?: ?Object,

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -41,24 +41,35 @@ const {useState} = React;
 type PanelPosition = 'top' | 'bottom';
 
 export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
-export type InspectedElement = $ReadOnly<{
+export type InspectedElement = Readonly<{
   frame: InspectedElementFrame,
   style?: ViewStyleProp,
 }>;
 export type ElementsHierarchy = InspectorData['hierarchy'];
 
+type ExternalInspection = {
+  externalInspectingEnabled: boolean,
+  +reportToExternalInspection: (viewData: TouchedViewDataAtPoint) => void,
+};
+
 type Props = {
   inspectedViewRef: InspectedViewRef,
   onRequestRerenderApp: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
+  devMenuInspectorOpen: boolean,
+  externalInspection: ExternalInspection,
 };
 
 function Inspector({
   inspectedViewRef,
   onRequestRerenderApp,
   reactDevToolsAgent,
+  devMenuInspectorOpen,
+  externalInspection,
 }: Props): React.Node {
-  const [inspecting, setInspecting] = useState<boolean>(true);
+  const [inspectingEnabled, setInspectingEnabled] = useState<boolean>(true);
+  const {externalInspectingEnabled, reportToExternalInspection} =
+    externalInspection;
 
   const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
   const [inspectedElement, setInspectedElement] =
@@ -67,6 +78,9 @@ function Inspector({
   const [elementsHierarchy, setElementsHierarchy] =
     useState<?ElementsHierarchy>(null);
 
+  // Derive inspecting state: external inspection forces it on, otherwise use local state
+  const isInspecting = externalInspectingEnabled || inspectingEnabled;
+
   const setSelection = (i: number) => {
     const hierarchyItem = elementsHierarchy?.[i];
     if (hierarchyItem == null) {
@@ -99,6 +113,11 @@ function Inspector({
         closestInstance,
       } = viewData;
 
+      // Report to external inspection if in external inspection mode
+      if (externalInspectingEnabled) {
+        reportToExternalInspection(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.
@@ -133,7 +152,7 @@ function Inspector({
   };
 
   const handleSetInspecting = (enabled: boolean) => {
-    setInspecting(enabled);
+    setInspectingEnabled(enabled);
     setInspectedElement(null);
   };
 
@@ -149,26 +168,29 @@ function Inspector({
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      {inspecting && (
+      {isInspecting && (
         <InspectorOverlay
           inspected={inspectedElement}
           onTouchPoint={onTouchPoint}
+          externalInspectionActive={externalInspectingEnabled}
         />
       )}
 
-      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
-        <InspectorPanel
-          devtoolsIsOpen={!!reactDevToolsAgent}
-          inspecting={inspecting}
-          setInspecting={handleSetInspecting}
-          inspected={inspectedElement}
-          hierarchy={elementsHierarchy}
-          selection={selectionIndex}
-          setSelection={setSelection}
-          touchTargeting={PressabilityDebug.isEnabled()}
-          setTouchTargeting={setTouchTargeting}
-        />
-      </SafeAreaView>
+      {!externalInspectingEnabled && (
+        <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
+          <InspectorPanel
+            devtoolsIsOpen={!!reactDevToolsAgent}
+            inspecting={inspectingEnabled}
+            setInspecting={handleSetInspecting}
+            inspected={inspectedElement}
+            hierarchy={elementsHierarchy}
+            selection={selectionIndex}
+            setSelection={setSelection}
+            touchTargeting={PressabilityDebug.isEnabled()}
+            setTouchTargeting={setTouchTargeting}
+          />
+        </SafeAreaView>
+      )}
     </View>
   );
 }

package/src/private/devsupport/devmenu/elementinspector/InspectorOverlay.js

@@ -20,12 +20,17 @@ const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const ElementBox = require('./ElementBox').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
+  externalInspectionActive?: boolean,
 }>;
 
-function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
+function InspectorOverlay({
+  inspected,
+  onTouchPoint,
+  externalInspectionActive,
+}: Props): React.Node {
   const findViewForTouchEvent = (e: GestureResponderEvent) => {
     const {locationX, locationY} = e.nativeEvent.touches[0];
 
@@ -47,7 +52,10 @@ function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
       onStartShouldSetResponder={handleStartShouldSetResponder}
       onResponderMove={findViewForTouchEvent}
       nativeID="inspectorOverlay" /* TODO: T68258846. */
-      style={styles.inspector}>
+      style={[
+        styles.inspector,
+        externalInspectionActive === true && styles.externalInspectionIndicator,
+      ]}>
       {content}
     </View>
   );
@@ -62,6 +70,10 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  externalInspectionIndicator: {
+    borderWidth: 4,
+    borderColor: 'rgba(255, 0, 0, 0.8)',
+  },
 });
 
 export default InspectorOverlay;

package/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js

@@ -25,7 +25,7 @@ const StyleSheet =
 const Text = require('../../../../../Libraries/Text/Text').default;
 const ElementProperties = require('./ElementProperties').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   devtoolsIsOpen: boolean,
   inspecting: boolean,
   setInspecting: (val: boolean) => void,
@@ -84,7 +84,7 @@ class InspectorPanel extends React.Component<Props> {
   }
 }
 
-type InspectorPanelButtonProps = $ReadOnly<{
+type InspectorPanelButtonProps = Readonly<{
   onClick: (val: boolean) => void,
   pressed: boolean,
   title: string,

package/src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay.js

@@ -52,10 +52,12 @@ export default function ReactDevToolsOverlay({
 
     function onStartInspectingNative() {
       setIsInspecting(true);
+      setInspected(null);
     }
 
     function onStopInspectingNative() {
       setIsInspecting(false);
+      setInspected(null);
     }
 
     reactDevToolsAgent.addListener('shutdown', cleanup);
@@ -93,12 +95,6 @@ export default function ReactDevToolsOverlay({
     [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);
@@ -133,12 +129,10 @@ export default function ReactDevToolsOverlay({
         ? {
             onPointerMove,
             onPointerDown: onPointerMove,
-            onPointerUp: stopInspecting,
           }
         : {
             onStartShouldSetResponder: shouldSetResponder,
             onResponderMove: onResponderMove,
-            onResponderRelease: stopInspecting,
           };
 
     return (

package/src/private/devsupport/devmenu/elementinspector/StyleInspector.js

@@ -20,7 +20,7 @@ const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const Text = require('../../../../../Libraries/Text/Text').default;
 
-type Props = $ReadOnly<{
+type Props = Readonly<{
   style?: ?____FlattenStyleProp_Internal<ViewStyleProp>,
 }>;
 

package/src/private/devsupport/devmenu/elementinspector/resolveBoxStyle.js

@@ -26,7 +26,7 @@ const I18nManager =
 function resolveBoxStyle(
   prefix: string,
   style: Object,
-): ?$ReadOnly<{
+): ?Readonly<{
   bottom: number,
   left: number,
   right: number,

package/src/private/devsupport/devmenu/elementinspector/useExternalInspection.js

@@ -0,0 +1,102 @@
+/**
+ * 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.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+'use strict';
+
+import type {TouchedViewDataAtPoint} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
+
+import * as ReactNativeFeatureFlags from '../../../../../src/private/featureflags/ReactNativeFeatureFlags';
+import {useCallback, useEffect, useState} from 'react';
+
+type ExternalInspectionAPI = {
+  enable: () => void,
+  disable: () => void,
+};
+
+declare var __EXTERNAL_INSPECTION__: ?ExternalInspectionAPI;
+declare var __EXTERNAL_INSPECTION_SELECT__: ?(payload: string) => void;
+
+type UseExternalInspectionResult = {
+  externalInspectingEnabled: boolean,
+  reportToExternalInspection: (viewData: TouchedViewDataAtPoint) => void,
+};
+
+/**
+ * Initializes the __EXTERNAL_INSPECTION__ API on the device.
+ */
+function ensureExternalInspectionAPI(
+  onEnable: () => void,
+  onDisable: () => void,
+): ExternalInspectionAPI {
+  if (
+    typeof __EXTERNAL_INSPECTION__ === 'undefined' ||
+    __EXTERNAL_INSPECTION__ == null
+  ) {
+    const api: ExternalInspectionAPI = {
+      enable: onEnable,
+      disable: onDisable,
+    };
+    // $FlowFixMe[prop-missing] Initializing global API for DevTools communication
+    (global: $FlowFixMe).__EXTERNAL_INSPECTION__ = api;
+    return api;
+  }
+  __EXTERNAL_INSPECTION__.enable = onEnable;
+  __EXTERNAL_INSPECTION__.disable = onDisable;
+  return __EXTERNAL_INSPECTION__;
+}
+
+export default function useExternalInspection(): UseExternalInspectionResult {
+  const [externalInspectingEnabled, setExternalInspectingEnabled] =
+    useState<boolean>(false);
+
+  useEffect(() => {
+    if (!ReactNativeFeatureFlags.externalElementInspectionEnabled()) {
+      return;
+    }
+
+    const handleEnable = () => {
+      setExternalInspectingEnabled(true);
+    };
+
+    const handleDisable = () => {
+      setExternalInspectingEnabled(false);
+    };
+
+    ensureExternalInspectionAPI(handleEnable, handleDisable);
+  }, []);
+
+  const reportToExternalInspection = useCallback(
+    (viewData: TouchedViewDataAtPoint) => {
+      if (
+        typeof __EXTERNAL_INSPECTION_SELECT__ === 'undefined' ||
+        __EXTERNAL_INSPECTION_SELECT__ === null ||
+        !externalInspectingEnabled
+      ) {
+        return;
+      }
+
+      __EXTERNAL_INSPECTION_SELECT__(
+        JSON.stringify({
+          frame: viewData.frame,
+          hierarchy: viewData.hierarchy.map(item => ({
+            name: item.name,
+          })),
+          touchedViewTag: viewData.touchedViewTag,
+        }),
+      );
+    },
+    [externalInspectingEnabled],
+  );
+
+  return {
+    externalInspectingEnabled,
+    reportToExternalInspection,
+  };
+}

package/src/private/devsupport/rndevtools/FuseboxSessionObserver.js

@@ -8,34 +8,21 @@
  * @format
  */
 
-class FuseboxSessionObserver {
-  #hasNativeSupport: boolean;
+import GlobalStateObserver from './GlobalStateObserver';
 
-  constructor() {
-    this.#hasNativeSupport = global.hasOwnProperty(
-      '__DEBUGGER_SESSION_OBSERVER__',
-    );
-  }
+const observer = new GlobalStateObserver(
+  '__DEBUGGER_SESSION_OBSERVER__',
+  'hasActiveSession',
+);
 
+const FuseboxSessionObserver = {
   hasActiveSession(): boolean {
-    if (!this.#hasNativeSupport) {
-      return false;
-    }
-
-    return global.__DEBUGGER_SESSION_OBSERVER__.hasActiveSession;
-  }
+    return observer.getStatus();
+  },
 
   subscribe(callback: (status: boolean) => void): () => void {
-    if (!this.#hasNativeSupport) {
-      return () => {};
-    }
-
-    global.__DEBUGGER_SESSION_OBSERVER__.subscribers.add(callback);
-    return () => {
-      global.__DEBUGGER_SESSION_OBSERVER__.subscribers.delete(callback);
-    };
-  }
-}
+    return observer.subscribe(callback);
+  },
+};
 
-const observerInstance: FuseboxSessionObserver = new FuseboxSessionObserver();
-export default observerInstance;
+export default FuseboxSessionObserver;

package/src/private/devsupport/rndevtools/GlobalStateObserver.js

@@ -0,0 +1,56 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+/**
+ * Generic observer for a boolean state exposed via a native global object.
+ *
+ * Native code installs a global object with the following shape:
+ *   global[globalName] = {
+ *     [statusProperty]: boolean,
+ *     subscribers: Set<(status: boolean) => void>,
+ *     [callbackName]: (status: boolean) => void,
+ *   }
+ *
+ * This class provides a JS-friendly API over that global object.
+ */
+class GlobalStateObserver {
+  #globalName: string;
+  #statusProperty: string;
+
+  constructor(globalName: string, statusProperty: string) {
+    this.#globalName = globalName;
+    this.#statusProperty = statusProperty;
+  }
+
+  #hasNativeSupport(): boolean {
+    return global.hasOwnProperty(this.#globalName);
+  }
+
+  getStatus(): boolean {
+    if (!this.#hasNativeSupport()) {
+      return false;
+    }
+
+    return global[this.#globalName][this.#statusProperty];
+  }
+
+  subscribe(callback: (status: boolean) => void): () => void {
+    if (!this.#hasNativeSupport()) {
+      return () => {};
+    }
+
+    global[this.#globalName].subscribers.add(callback);
+    return () => {
+      global[this.#globalName].subscribers.delete(callback);
+    };
+  }
+}
+
+export default GlobalStateObserver;

package/src/private/devsupport/rndevtools/TracingStateObserver.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+import GlobalStateObserver from './GlobalStateObserver';
+
+const observer = new GlobalStateObserver(
+  '__TRACING_STATE_OBSERVER__',
+  'isTracing',
+);
+
+const TracingStateObserver = {
+  isTracing(): boolean {
+    return observer.getStatus();
+  },
+
+  subscribe(callback: (isTracing: boolean) => void): () => void {
+    return observer.subscribe(callback);
+  },
+};
+
+export default TracingStateObserver;