Add logging interface, context, callbacks to VirtualView (facebook#54392)

Summary:
Pull Request resolved: facebook#54392

## Changelog: [Internal]
Adds a VirtualView-specific logging interface, related default implementation within hook. Uses returned callbacks in VirtualView to do lifecycle-related logging.

### Public API Change
Changes `ModeChangeEvent` (defined in `VirtualView.js`) to include a field for the Virtual View's current `VirtualViewRenderState`.

Reviewed By: lunaleaps

Differential Revision: D85712933

fbshipit-source-id: 0bc7a9f0a10e1e801f235975ba179832306815d7

Author: CalixTang

packages/react-native/ReactNativeApi.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<4e0d1f9ebc86fb237989b7099bf6f9df>>
+ * @generated SignedSource<<a01aee11d06658fe06d702ee4c48bf8e>>
  *
  * This file was generated by scripts/js-api/build-types/index.js.
  */
@@ -3188,6 +3188,7 @@ declare type ModalRefProps = {
 declare type ModeChangeEvent = Readonly<
   Omit<NativeModeChangeEvent, "mode"> & {
     mode: VirtualViewMode
+    renderState: VirtualViewRenderState
     target: HostInstance
   }
 >
@@ -5838,6 +5839,19 @@ declare namespace VirtualViewMode {
   export function members(): IterableIterator<VirtualViewMode>
   export function getName(value: VirtualViewMode): string
 }
+declare enum VirtualViewRenderState {
+  None = 2,
+  Rendered = 1,
+  Unknown = 0,
+}
+declare namespace VirtualViewRenderState {
+  function cast(value: null | number | undefined): VirtualViewRenderState
+  function isValid(
+    value: null | number | undefined,
+  ): value is VirtualViewRenderState
+  function members(): IterableIterator<VirtualViewRenderState>
+  function getName(value: VirtualViewRenderState): string
+}
 declare type WebPlatform = {
   OS: "web"
   select: <T>(spec: PlatformSelectSpec<T>) => T
@@ -6038,7 +6052,7 @@ export {
   ModalProps, // 270223fa
   ModalPropsAndroid, // 515fb173
   ModalPropsIOS, // 4fbcedf6
-  ModeChangeEvent, // b889a7ce
+  ModeChangeEvent, // af2c4926
   MouseEvent, // 53ede3db
   NativeAppEventEmitter, // b4d20c1d
   NativeColorValue, // d2094c29

packages/react-native/src/private/components/virtualview/VirtualView.js

@@ -15,6 +15,7 @@ import type {NativeModeChangeEvent} from './VirtualViewNativeComponent';
 
 import StyleSheet from '../../../../Libraries/StyleSheet/StyleSheet';
 import * as ReactNativeFeatureFlags from '../../featureflags/ReactNativeFeatureFlags';
+import {useVirtualViewLogging} from './logger/VirtualViewLogger';
 import VirtualViewExperimentalNativeComponent from './VirtualViewExperimentalNativeComponent';
 import VirtualViewClassicNativeComponent from './VirtualViewNativeComponent';
 import nullthrows from 'nullthrows';
@@ -45,6 +46,7 @@ export type Rect = $ReadOnly<{
 
 export type ModeChangeEvent = $ReadOnly<{
   ...Omit<NativeModeChangeEvent, 'mode'>,
+  renderState: VirtualViewRenderState,
   mode: VirtualViewMode,
   target: HostInstance,
 }>;
@@ -90,21 +92,26 @@ function createVirtualView(initialState: State): VirtualViewComponent {
       _logs.states?.push(state);
     }
     const isHidden = state !== NotHidden;
+    const loggingCallbacksRef = useVirtualViewLogging(isHidden, nativeID);
 
     const handleModeChange = (
       event: NativeSyntheticEvent<NativeModeChangeEvent>,
     ) => {
       const mode = nullthrows(VirtualViewMode.cast(event.nativeEvent.mode));
+      const modeChangeEvent: ModeChangeEvent = {
+        mode,
+        renderState: isHidden
+          ? VirtualViewRenderState.None
+          : VirtualViewRenderState.Rendered,
+        // $FlowFixMe[incompatible-type] - we know this is a HostInstance
+        target: event.currentTarget as HostInstance,
+        targetRect: event.nativeEvent.targetRect,
+        thresholdRect: event.nativeEvent.thresholdRect,
+      };
+      loggingCallbacksRef.current?.logModeChange(modeChangeEvent);
+
       const emitModeChange =
-        onModeChange == null
-          ? null
-          : onModeChange.bind(null, {
-              mode,
-              // $FlowFixMe[incompatible-type] - we know this is a HostInstance
-              target: event.currentTarget as HostInstance,
-              targetRect: event.nativeEvent.targetRect,
-              thresholdRect: event.nativeEvent.thresholdRect,
-            });
+        onModeChange == null ? null : onModeChange.bind(null, modeChangeEvent);
 
       match (mode) {
         VirtualViewMode.Visible => {

packages/react-native/src/private/components/virtualview/logger/VirtualViewLogger.js

@@ -0,0 +1,21 @@
+/**
+ * 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 {IVirtualViewLogFunctions} from './VirtualViewLoggerTypes';
+
+import {useRef} from 'react';
+
+export hook useVirtualViewLogging(
+  initiallyHidden: boolean,
+  nativeID?: string,
+): React.RefObject<?IVirtualViewLogFunctions> {
+  return useRef(null);
+}

packages/react-native/src/private/components/virtualview/logger/VirtualViewLoggerTypes.js

@@ -0,0 +1,24 @@
+/**
+ * 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 {ModeChangeEvent} from '../../../../..';
+
+export interface IVirtualViewLogFunctions {
+  logMount: () => void;
+  logModeChange: (event: ModeChangeEvent) => void;
+  logUnmount: () => void;
+}
+export interface IVirtualViewLogger {
+  getVirtualViewLoggingCallbacks(
+    initiallyHidden: boolean,
+    nativeID?: string,
+  ): IVirtualViewLogFunctions;
+}