allow exposing the list of connected devices, and subscribe to that list being changed. (#54447)

Summary:

Changelog: [Internal]

Differential Revision: D86319965

Author: vzaidman

packages/dev-middleware/src/createDevMiddleware.js

@@ -9,6 +9,7 @@
  */
 
 import type {CreateCustomMessageHandlerFn} from './inspector-proxy/CustomMessageHandler';
+import type Device from './inspector-proxy/Device';
 import type {BrowserLauncher} from './types/BrowserLauncher';
 import type {EventReporter, ReportableEvent} from './types/EventReporter';
 import type {Experiments, ExperimentsConfig} from './types/Experiments';
@@ -73,6 +74,10 @@ type Options = $ReadOnly<{
 type DevMiddlewareAPI = $ReadOnly<{
   middleware: NextHandleFunction,
   websocketEndpoints: {[path: string]: ws$WebSocketServer},
+  getConnectedDevices: () => $ReadOnlyArray<Device>,
+  onDevicesListChanged: (
+    callback: (devices: Map<string, Device>) => void,
+  ) => () => void,
 }>;
 
 export default function createDevMiddleware({
@@ -131,6 +136,8 @@ export default function createDevMiddleware({
   return {
     middleware,
     websocketEndpoints: inspectorProxy.createWebSocketListeners(),
+    getConnectedDevices: () => inspectorProxy.getConnectedDevices(),
+    onDevicesListChanged: cb => inspectorProxy.onDevicesListChanged(cb),
   };
 }
 

packages/dev-middleware/src/inspector-proxy/InspectorProxy.js

@@ -97,6 +97,8 @@ export default class InspectorProxy implements InspectorProxyQueries {
 
   #eventLoopPerfTracker: EventLoopPerfTracker;
 
+  #onDevicesListChangedCallbacks: Set<(devices: Map<string, Device>) => void>;
+
   constructor(
     serverBaseUrl: string,
     eventReporter: ?EventReporter,
@@ -111,6 +113,7 @@ export default class InspectorProxy implements InspectorProxyQueries {
     this.#experiments = experiments;
     this.#logger = logger;
     this.#customMessageHandler = customMessageHandler;
+    this.#onDevicesListChangedCallbacks = new Set();
     if (trackEventLoopPerf) {
       this.#eventLoopPerfTracker = new EventLoopPerfTracker({
         perfMeasurementDuration: EVENT_LOOP_PERF_MEASUREMENT_MS,
@@ -142,6 +145,19 @@ export default class InspectorProxy implements InspectorProxyQueries {
     }
   }
 
+  getConnectedDevices(): Array<Device> {
+    return Array.from(this.#devices.values());
+  }
+
+  onDevicesListChanged(
+    callback: (devices: Map<string, Device>) => void,
+  ): () => void {
+    this.#onDevicesListChangedCallbacks.add(callback);
+    return () => {
+      this.#onDevicesListChangedCallbacks.delete(callback);
+    };
+  }
+
   getPageDescriptions({
     requestorRelativeBaseUrl,
     logNoPagesForConnectedDevice = false,
@@ -365,6 +381,7 @@ export default class InspectorProxy implements InspectorProxyQueries {
         }
 
         this.#devices.set(deviceId, newDevice);
+        this.#onDevicesListChangedCallbacks.forEach(cb => cb(this.#devices));
 
         debug(
           "Got new device connection: name='%s', app=%s, device=%s, via=%s",
@@ -457,6 +474,9 @@ export default class InspectorProxy implements InspectorProxyQueries {
 
           if (this.#devices.get(deviceId)?.dangerouslyGetSocket() === socket) {
             this.#devices.delete(deviceId);
+            this.#onDevicesListChangedCallbacks.forEach(cb =>
+              cb(this.#devices),
+            );
           }
         });
       } catch (error) {