feat[DebuggingOverlayRegistry]: basic implementation (facebook#41743)

Summary:
Pull Request resolved: facebook#41743

Changelog: [Internal]

There will be a single DebuggingRegistry instance per runtime, which will be responsible for finding lowest AppContainer ancestor for highligthed component.

It will receive refs to root views (ancestors, AppContainers) as subscriptions and later will call all necessary methods.

In the next series of diffs, subscriber will also provide reference to the DebuggingOverlay, on which DebuggingRegistry can call all necessary methods to highlight elements.

Differential Revision: D51536787

Reviewed By: rshest

fbshipit-source-id: cf24bd0bdcd411e7529c591096cd3416ae07d95d

packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -0,0 +1,38 @@
+/**
+ * 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
+ * @oncall react_native
+ */
+
+import type {AppContainerRootViewRef} from '../ReactNative/AppContainer-dev';
+
+export type DebuggingOverlayRegistrySubscriberProtocol = {
+  rootViewRef: AppContainerRootViewRef,
+};
+
+class DebuggingOverlayRegistry {
+  #registry: Set<DebuggingOverlayRegistrySubscriberProtocol> = new Set();
+
+  subscribe(subscriber: DebuggingOverlayRegistrySubscriberProtocol) {
+    this.#registry.add(subscriber);
+  }
+
+  unsubscribe(subscriber: DebuggingOverlayRegistrySubscriberProtocol) {
+    const wasPresent = this.#registry.delete(subscriber);
+    if (!wasPresent) {
+      console.error(
+        '[DebuggingOverlayRegistry] Unexpected argument for unsubscription, which was not previously subscribed:',
+        subscriber,
+      );
+    }
+  }
+}
+
+const debuggingOverlayRegistryInstance: DebuggingOverlayRegistry =
+  new DebuggingOverlayRegistry();
+export default debuggingOverlayRegistryInstance;

packages/react-native/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.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-local
+ * @format
+ * @oncall react_native
+ */
+
+import type {AppContainerRootViewRef} from '../ReactNative/AppContainer-dev';
+
+import DebuggingOverlayRegistry from './DebuggingOverlayRegistry';
+import {useEffect} from 'react';
+
+const useSubscribeToDebuggingOverlayRegistry = (
+  rootViewRef: AppContainerRootViewRef,
+) => {
+  useEffect(() => {
+    const subscriber = {rootViewRef};
+
+    DebuggingOverlayRegistry.subscribe(subscriber);
+    return () => DebuggingOverlayRegistry.unsubscribe(subscriber);
+  }, [rootViewRef]);
+};
+
+export default useSubscribeToDebuggingOverlayRegistry;

packages/react-native/Libraries/Inspector/Inspector.js

@@ -10,6 +10,7 @@
 
 'use strict';
 
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
 import type {
   InspectorData,
   TouchedViewDataAtPoint,
@@ -46,7 +47,7 @@ export type InspectedElement = $ReadOnly<{
 export type ElementsHierarchy = InspectorData['hierarchy'];
 
 type Props = {
-  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
+  inspectedViewRef: InspectedViewRef,
   onRequestRerenderApp: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
 };

packages/react-native/Libraries/Inspector/ReactDevToolsOverlay.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {InspectedViewRef} from '../ReactNative/AppContainer-dev';
 import type {PointerEvent} from '../Types/CoreEventTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {
@@ -29,7 +30,7 @@ const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint
 const {useEffect, useState, useCallback} = React;
 
 type Props = {
-  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
+  inspectedViewRef: InspectedViewRef,
   reactDevToolsAgent: ReactDevToolsAgent,
 };
 

packages/react-native/Libraries/ReactNative/AppContainer-dev.js

@@ -18,6 +18,7 @@ import type {Props} from './AppContainer';
 import TraceUpdateOverlay from '../Components/TraceUpdateOverlay/TraceUpdateOverlay';
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
 import View from '../Components/View/View';
+import useSubscribeToDebuggingOverlayRegistry from '../Debugging/useSubscribeToDebuggingOverlayRegistry';
 import RCTDeviceEventEmitter from '../EventEmitter/RCTDeviceEventEmitter';
 import ReactDevToolsOverlay from '../Inspector/ReactDevToolsOverlay';
 import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
@@ -40,7 +41,7 @@ if (reactDevToolsHook) {
 }
 
 type InspectorDeferredProps = {
-  inspectedViewRef: React.RefObject<React.ElementRef<typeof View> | null>,
+  inspectedViewRef: InspectedViewRef,
   onInspectedViewRerenderRequest: () => void,
   reactDevToolsAgent?: ReactDevToolsAgent,
 };
@@ -73,7 +74,9 @@ const AppContainer = ({
   showArchitectureIndicator,
   WrapperComponent,
 }: Props): React.Node => {
-  const innerViewRef = React.useRef<React.ElementRef<typeof View> | null>(null);
+  const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null);
+  const innerViewRef: InspectedViewRef = React.useRef(null);
+  useSubscribeToDebuggingOverlayRegistry(appContainerRootViewRef);
 
   const [key, setKey] = useState(0);
   const [shouldRenderInspector, setShouldRenderInspector] = useState(false);
@@ -138,7 +141,10 @@ const AppContainer = ({
 
   return (
     <RootTagContext.Provider value={createRootTag(rootTag)}>
-      <View style={styles.container} pointerEvents="box-none">
+      <View
+        ref={appContainerRootViewRef}
+        style={styles.container}
+        pointerEvents="box-none">
         {innerView}
 
         {reactDevToolsAgent != null && (
@@ -169,4 +175,10 @@ const styles = StyleSheet.create({
   container: {flex: 1},
 });
 
+export type AppContainerRootViewRef = React.RefObject<React.ElementRef<
+  typeof View,
+> | null>;
+export type InspectedViewRef = React.RefObject<React.ElementRef<
+  typeof View,
+> | null>;
 export default AppContainer;