@office-iss/react-native-win32 0.76.2 → 0.77.0-preview.2

package/src/private/animated/NativeAnimatedHelper.win32.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import type {EventSubscription} from '../../../Libraries/vendor/emitter/EventEmitter';
 import type {EventConfig} from '../../../Libraries/Animated/AnimatedEvent';
 import type {
   AnimationConfig,
@@ -18,13 +17,14 @@ import type {
   AnimatedNodeConfig,
   EventMapping,
 } from '../../../Libraries/Animated/NativeAnimatedModule';
+import type {EventSubscription} from '../../../Libraries/vendor/emitter/EventEmitter';
 
-import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
+import NativeAnimatedNonTurboModule from '../../../Libraries/Animated/NativeAnimatedModule';
+import NativeAnimatedTurboModule from '../../../Libraries/Animated/NativeAnimatedTurboModule';
 import NativeEventEmitter from '../../../Libraries/EventEmitter/NativeEventEmitter';
 import RCTDeviceEventEmitter from '../../../Libraries/EventEmitter/RCTDeviceEventEmitter';
 import Platform from '../../../Libraries/Utilities/Platform';
-import NativeAnimatedNonTurboModule from '../../../Libraries/Animated/NativeAnimatedModule';
-import NativeAnimatedTurboModule from '../../../Libraries/Animated/NativeAnimatedTurboModule';
+import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 
@@ -46,7 +46,7 @@ const isSingleOpBatching =
   Platform.OS === 'android' &&
   NativeAnimatedModule?.queueAndExecuteBatchedOperations != null &&
   ReactNativeFeatureFlags.animatedShouldUseSingleOp();
-let flushQueueTimeout = null;
+let flushQueueImmediate = null;
 
 const eventListenerGetValueCallbacks: {
   [number]: (value: number) => void,
@@ -142,9 +142,13 @@ const API = {
     queueOperations = true;
     if (
       ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush() &&
-      flushQueueTimeout
+      flushQueueImmediate
     ) {
-      clearTimeout(flushQueueTimeout);
+      if (ReactNativeFeatureFlags.enableAnimatedClearImmediateFix()) {
+        clearImmediate(flushQueueImmediate);
+      } else {
+        clearTimeout(flushQueueImmediate);
+      }
     }
   },
 
@@ -161,9 +165,9 @@ const API = {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
 
     if (ReactNativeFeatureFlags.animatedShouldDebounceQueueFlush()) {
-      const prevTimeout = flushQueueTimeout;
-      clearImmediate(prevTimeout);
-      flushQueueTimeout = setImmediate(API.flushQueue);
+      const prevImmediate = flushQueueImmediate;
+      clearImmediate(prevImmediate);
+      flushQueueImmediate = setImmediate(API.flushQueue);
     } else {
       API.flushQueue();
     }
@@ -174,11 +178,11 @@ const API = {
         /* [Windows #11041
         // TODO: (T136971132)
         invariant(
-          NativeAnimatedModule || process.env.NODE_ENV === 'test',
+          NativeAnimatedModule,
           'Native animated module is not available',
         );
         Windows] */
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (singleOpQueue.length === 0) {
           return;
@@ -195,12 +199,11 @@ const API = {
         singleOpQueue.length = 0;
       }
     : (): void => {
-        // TODO: (T136971132)
         invariant(
-          NativeAnimatedModule || process.env.NODE_ENV === 'test',
+          NativeAnimatedModule,
           'Native animated module is not available',
         );
-        flushQueueTimeout = null;
+        flushQueueImmediate = null;
 
         if (queue.length === 0) {
           return;

package/src/private/animated/useAnimatedPropsMemo.js

@@ -0,0 +1,356 @@
+/**
+ * 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 AnimatedProps from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {AnimatedPropsAllowlist} from '../../../Libraries/Animated/nodes/AnimatedProps';
+import type {AnimatedStyleAllowlist} from '../../../Libraries/Animated/nodes/AnimatedStyle';
+
+import {AnimatedEvent} from '../../../Libraries/Animated/AnimatedEvent';
+import AnimatedNode from '../../../Libraries/Animated/nodes/AnimatedNode';
+import {isPlainObject} from '../../../Libraries/Animated/nodes/AnimatedObject';
+import flattenStyle from '../../../Libraries/StyleSheet/flattenStyle';
+import nullthrows from 'nullthrows';
+import {useMemo, useState} from 'react';
+
+type CompositeKey = {
+  style?: {[string]: CompositeKeyComponent},
+  [string]:
+    | CompositeKeyComponent
+    | AnimatedEvent
+    | $ReadOnlyArray<mixed>
+    | $ReadOnly<{[string]: mixed}>,
+};
+
+type CompositeKeyComponent =
+  | AnimatedNode
+  | Array<CompositeKeyComponent | null>
+  | {[string]: CompositeKeyComponent};
+
+type $ReadOnlyCompositeKey = $ReadOnly<{
+  style?: $ReadOnly<{[string]: CompositeKeyComponent}>,
+  [string]:
+    | $ReadOnlyCompositeKeyComponent
+    | AnimatedEvent
+    | $ReadOnlyArray<mixed>
+    | $ReadOnly<{[string]: mixed}>,
+}>;
+
+type $ReadOnlyCompositeKeyComponent =
+  | AnimatedNode
+  | $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null>
+  | $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}>;
+
+/**
+ * A hook that returns an `AnimatedProps` object that is memoized based on the
+ * subset of `props` that are instances of `AnimatedNode` or `AnimatedEvent`.
+ */
+export function useAnimatedPropsMemo(
+  create: () => AnimatedProps,
+  // TODO: Make this two separate arguments after the experiment is over. This
+  // is only an array-like structure to make it easier to experiment with this
+  // and `useMemo`.
+  [allowlist, props]: [?AnimatedPropsAllowlist, {[string]: mixed}],
+): AnimatedProps {
+  const compositeKey = useMemo(
+    () => createCompositeKeyForProps(props, allowlist),
+    [allowlist, props],
+  );
+
+  const [state, setState] = useState<{
+    allowlist: ?AnimatedPropsAllowlist,
+    compositeKey: $ReadOnlyCompositeKey | null,
+    value: AnimatedProps,
+  }>(() => ({
+    allowlist,
+    compositeKey,
+    value: create(),
+  }));
+
+  if (
+    state.allowlist !== allowlist ||
+    !areCompositeKeysEqual(state.compositeKey, compositeKey)
+  ) {
+    setState({
+      allowlist,
+      compositeKey,
+      value: create(),
+    });
+  }
+  return state.value;
+}
+
+/**
+ * Creates a new composite key for a `props` object that can be used to detect
+ * whether a new `AnimatedProps` instance must be created.
+ *
+ * - With an allowlist, those props are searched for `AnimatedNode` instances.
+ * - Without an allowlist, `style` is searched for `AnimatedNode` instances,
+ *   but all other objects and arrays are included (not searched). We do not
+ *   search objects and arrays without an allowlist in case they are very large
+ *   data structures. We safely traverse `style` becuase it is bounded.
+ *
+ * Any `AnimatedEvent` instances at the first depth are always included.
+ *
+ * If `props` contains no `AnimatedNode` or `AnimatedEvent` instances, this
+ * returns null.
+ */
+export function createCompositeKeyForProps(
+  props: $ReadOnly<{[string]: mixed}>,
+  allowlist: ?AnimatedPropsAllowlist,
+): $ReadOnlyCompositeKey | null {
+  let compositeKey: CompositeKey | null = null;
+
+  const keys = Object.keys(props);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+    const value = props[key];
+
+    if (allowlist == null || hasOwn(allowlist, key)) {
+      let compositeKeyComponent;
+      if (key === 'style') {
+        // $FlowFixMe[incompatible-call] - `style` is a valid argument.
+        // $FlowFixMe[incompatible-type] - `flattenStyle` returns an object.
+        const flatStyle: ?{[string]: mixed} = flattenStyle(value);
+        if (flatStyle != null) {
+          compositeKeyComponent = createCompositeKeyForObject(
+            flatStyle,
+            allowlist?.style,
+          );
+        }
+      } else if (
+        value instanceof AnimatedNode ||
+        value instanceof AnimatedEvent
+      ) {
+        compositeKeyComponent = value;
+      } else if (Array.isArray(value)) {
+        compositeKeyComponent =
+          allowlist == null ? value : createCompositeKeyForArray(value);
+      } else if (isPlainObject(value)) {
+        compositeKeyComponent =
+          allowlist == null ? value : createCompositeKeyForObject(value);
+      }
+      if (compositeKeyComponent != null) {
+        if (compositeKey == null) {
+          compositeKey = {} as CompositeKey;
+        }
+        compositeKey[key] = compositeKeyComponent;
+      }
+    }
+  }
+
+  return compositeKey;
+}
+
+/**
+ * Creates a new composite key for an array that retains all values that are or
+ * contain `AnimatedNode` instances, and `null` for the rest.
+ *
+ * If `array` contains no `AnimatedNode` instances, this returns null.
+ */
+function createCompositeKeyForArray(
+  array: $ReadOnlyArray<mixed>,
+): $ReadOnlyArray<$ReadOnlyCompositeKeyComponent | null> | null {
+  let compositeKey: Array<$ReadOnlyCompositeKeyComponent | null> | null = null;
+
+  for (let ii = 0, length = array.length; ii < length; ii++) {
+    const value = array[ii];
+
+    let compositeKeyComponent;
+    if (value instanceof AnimatedNode) {
+      compositeKeyComponent = value;
+    } else if (Array.isArray(value)) {
+      compositeKeyComponent = createCompositeKeyForArray(value);
+    } else if (isPlainObject(value)) {
+      compositeKeyComponent = createCompositeKeyForObject(value);
+    }
+    if (compositeKeyComponent != null) {
+      if (compositeKey == null) {
+        compositeKey = new Array<$ReadOnlyCompositeKeyComponent | null>(
+          array.length,
+        ).fill(null);
+      }
+      compositeKey[ii] = compositeKeyComponent;
+    }
+  }
+
+  return compositeKey;
+}
+
+/**
+ * Creates a new composite key for an object that retains only properties that
+ * are or contain `AnimatedNode` instances.
+ *
+ * When used to create composite keys for `style` props:
+ *
+ * - With an allowlist, those properties are searched.
+ * - Without an allowlist, every property is searched.
+ *
+ * If `object` contains no `AnimatedNode` instances, this returns null.
+ */
+function createCompositeKeyForObject(
+  object: $ReadOnly<{[string]: mixed}>,
+  allowlist?: ?AnimatedStyleAllowlist,
+): $ReadOnly<{[string]: $ReadOnlyCompositeKeyComponent}> | null {
+  let compositeKey: {[string]: $ReadOnlyCompositeKeyComponent} | null = null;
+
+  const keys = Object.keys(object);
+  for (let ii = 0, length = keys.length; ii < length; ii++) {
+    const key = keys[ii];
+
+    if (allowlist == null || hasOwn(allowlist, key)) {
+      const value = object[key];
+
+      let compositeKeyComponent;
+      if (value instanceof AnimatedNode) {
+        compositeKeyComponent = value;
+      } else if (Array.isArray(value)) {
+        compositeKeyComponent = createCompositeKeyForArray(value);
+      } else if (isPlainObject(value)) {
+        compositeKeyComponent = createCompositeKeyForObject(value);
+      }
+      if (compositeKeyComponent != null) {
+        if (compositeKey == null) {
+          compositeKey = {} as {[string]: $ReadOnlyCompositeKeyComponent};
+        }
+        compositeKey[key] = compositeKeyComponent;
+      }
+    }
+  }
+
+  return compositeKey;
+}
+
+export function areCompositeKeysEqual(
+  maybePrev: $ReadOnlyCompositeKey | null,
+  maybeNext: $ReadOnlyCompositeKey | null,
+  allowlist: ?AnimatedPropsAllowlist,
+): boolean {
+  if (maybePrev === maybeNext) {
+    return true;
+  }
+  if (maybePrev === null || maybeNext === null) {
+    return false;
+  }
+  // Help Flow retain the type refinements of these.
+  const prev = maybePrev;
+  const next = maybeNext;
+
+  const keys = Object.keys(prev);
+  const length = keys.length;
+  if (length !== Object.keys(next).length) {
+    return false;
+  }
+  for (let ii = 0; ii < length; ii++) {
+    const key = keys[ii];
+    if (!hasOwn(next, key)) {
+      return false;
+    }
+    const prevComponent = prev[key];
+    const nextComponent = next[key];
+
+    if (key === 'style') {
+      // We know style components are objects with non-mixed values.
+      if (
+        !areCompositeKeyComponentsEqual(
+          // $FlowIgnore[incompatible-cast]
+          prevComponent as $ReadOnlyCompositeKeyComponent,
+          // $FlowIgnore[incompatible-cast]
+          nextComponent as $ReadOnlyCompositeKeyComponent,
+        )
+      ) {
+        return false;
+      }
+    } else if (
+      prevComponent instanceof AnimatedNode ||
+      prevComponent instanceof AnimatedEvent
+    ) {
+      if (prevComponent !== nextComponent) {
+        return false;
+      }
+    } else {
+      // When `allowlist` is null, the components must be the same. Otherwise,
+      // we created the components using deep traversal, so deep compare them.
+      if (allowlist == null) {
+        if (prevComponent !== nextComponent) {
+          return false;
+        }
+      } else {
+        if (
+          !areCompositeKeyComponentsEqual(
+            // $FlowIgnore[incompatible-cast]
+            prevComponent as $ReadOnlyCompositeKeyComponent,
+            // $FlowIgnore[incompatible-cast]
+            nextComponent as $ReadOnlyCompositeKeyComponent,
+          )
+        ) {
+          return false;
+        }
+      }
+    }
+  }
+  return true;
+}
+
+function areCompositeKeyComponentsEqual(
+  prev: $ReadOnlyCompositeKeyComponent | null,
+  next: $ReadOnlyCompositeKeyComponent | null,
+): boolean {
+  if (prev === next) {
+    return true;
+  }
+  if (prev instanceof AnimatedNode) {
+    return prev === next;
+  }
+  if (Array.isArray(prev)) {
+    if (!Array.isArray(next)) {
+      return false;
+    }
+    const length = prev.length;
+    if (length !== next.length) {
+      return false;
+    }
+    for (let ii = 0; ii < length; ii++) {
+      if (!areCompositeKeyComponentsEqual(prev[ii], next[ii])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev)) {
+    if (!isPlainObject(next)) {
+      return false;
+    }
+    const keys = Object.keys(prev);
+    const length = keys.length;
+    if (length !== Object.keys(next).length) {
+      return false;
+    }
+    for (let ii = 0; ii < length; ii++) {
+      const key = keys[ii];
+      if (
+        !hasOwn(nullthrows(next), key) ||
+        !areCompositeKeyComponentsEqual(prev[key], next[key])
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// Supported versions of JSC do not implement the newer Object.hasOwn. Remove
+// this shim when they do.
+// $FlowIgnore[method-unbinding]
+const _hasOwnProp = Object.prototype.hasOwnProperty;
+const hasOwn: (obj: $ReadOnly<{...}>, prop: string) => boolean =
+  // $FlowIgnore[method-unbinding]
+  Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/components/HScrollViewNativeComponents.js

@@ -12,44 +12,18 @@
 import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
-import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
 
 import AndroidHorizontalScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/AndroidHorizontalScrollViewNativeComponent';
 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
 import ScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
 import Platform from '../../../Libraries/Utilities/Platform';
 import AndroidHorizontalScrollContentViewNativeComponent from '../specs/components/AndroidHorizontalScrollContentViewNativeComponent';
-import useSyncOnScroll from './useSyncOnScroll';
-import * as React from 'react';
-import {forwardRef} from 'react';
 
-const HScrollViewNativeComponentForPlatform =
+export const HScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
   Platform.OS === 'android'
     ? AndroidHorizontalScrollViewNativeComponent
     : ScrollViewNativeComponent;
 
-// TODO: After upgrading to React 19, remove `forwardRef` from this component.
-export const HScrollViewNativeComponent: React.AbstractComponent<
-  ScrollViewNativeProps,
-  TScrollViewNativeImperativeHandle,
-  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
-> = forwardRef(function HScrollViewNativeComponent(
-  props: ScrollViewNativeProps,
-  ref: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
-): React.Node {
-  const [componentRef, enableSyncOnScroll] = useSyncOnScroll(ref);
-  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
-  // changed. Notably, `props.children` will be the same, allowing React to
-  // bail out during reconciliation.
-  return (
-    <HScrollViewNativeComponentForPlatform
-      {...props}
-      ref={componentRef}
-      enableSyncOnScroll={enableSyncOnScroll}
-    />
-  );
-});
-
 export const HScrollContentViewNativeComponent: HostComponent<ViewProps> =
   Platform.OS === 'android'
     ? AndroidHorizontalScrollContentViewNativeComponent

package/src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE.js

@@ -10,19 +10,22 @@
  */
 
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
-import Platform from '../../../Libraries/Utilities/Platform';
+
 import View from '../../../Libraries/Components/View/View';
+import UIManager from '../../../Libraries/ReactNative/UIManager';
+import Platform from '../../../Libraries/Utilities/Platform';
 import * as React from 'react';
 
-const exported: React.AbstractComponent<
-  ViewProps,
-  React.ElementRef<typeof View>,
-> = Platform.select({
+const exported: component(
+  ref?: React.RefSetter<React.ElementRef<typeof View>>,
+  ...ViewProps
+) = Platform.select({
   ios: require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
     .default,
-  android:
-    require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
-      .default,
+  android: UIManager.hasViewManagerConfig('RCTSafeAreaView')
+    ? require('../../../src/private/specs/components/RCTSafeAreaViewNativeComponent')
+        .default
+    : View,
   default: View,
 });
 

package/src/private/components/VScrollViewNativeComponents.js

@@ -12,37 +12,14 @@
 import type {ScrollViewNativeProps} from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponentType';
 import type {ViewProps} from '../../../Libraries/Components/View/ViewPropTypes';
 import type {HostComponent} from '../../../Libraries/Renderer/shims/ReactNativeTypes';
-import type {TScrollViewNativeImperativeHandle} from './useSyncOnScroll';
 
 import ScrollContentViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollContentViewNativeComponent';
 import ScrollViewNativeComponent from '../../../Libraries/Components/ScrollView/ScrollViewNativeComponent';
 import View from '../../../Libraries/Components/View/View';
 import Platform from '../../../Libraries/Utilities/Platform';
-import useSyncOnScroll from './useSyncOnScroll';
-import * as React from 'react';
-import {forwardRef} from 'react';
 
-// TODO: After upgrading to React 19, remove `forwardRef` from this component.
-export const VScrollViewNativeComponent: React.AbstractComponent<
-  ScrollViewNativeProps,
-  TScrollViewNativeImperativeHandle,
-  // $FlowExpectedError[incompatible-type] - Flow cannot model imperative handles, yet.
-> = forwardRef(function VScrollViewNativeComponent(
-  props: ScrollViewNativeProps,
-  ref: ?React.RefSetter<TScrollViewNativeImperativeHandle | null>,
-): React.Node {
-  const [componentRef, enableSyncOnScroll] = useSyncOnScroll(ref);
-  // NOTE: When `useSyncOnScroll` triggers an update, `props` will not have
-  // changed. Notably, `props.children` will be the same, allowing React to
-  // bail out during reconciliation.
-  return (
-    <ScrollViewNativeComponent
-      {...props}
-      ref={componentRef}
-      enableSyncOnScroll={enableSyncOnScroll}
-    />
-  );
-});
+export const VScrollViewNativeComponent: HostComponent<ScrollViewNativeProps> =
+  ScrollViewNativeComponent;
 
 export const VScrollContentViewNativeComponent: HostComponent<ViewProps> =
   Platform.OS === 'android' ? View : ScrollContentViewNativeComponent;

package/src/private/debugging/ReactDevToolsSettingsManager.android.js

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+import NativeReactDevToolsSettingsManager from '../specs/modules/NativeReactDevToolsSettingsManager';
+
+module.exports = {
+  setGlobalHookSettings(settings: string) {
+    NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
+  },
+  getGlobalHookSettings(): ?string {
+    return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
+  },
+};

package/src/private/debugging/ReactDevToolsSettingsManager.ios.js

@@ -0,0 +1,30 @@
+/**
+ * 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
+ */
+
+import Settings from '../../../Libraries/Settings/Settings';
+
+const GLOBAL_HOOK_SETTINGS = 'ReactDevTools::HookSettings';
+
+const ReactDevToolsSettingsManager = {
+  setGlobalHookSettings(settings: string): void {
+    Settings.set({
+      [GLOBAL_HOOK_SETTINGS]: settings,
+    });
+  },
+  getGlobalHookSettings(): ?string {
+    const value = Settings.get(GLOBAL_HOOK_SETTINGS);
+    if (typeof value === 'string') {
+      return value;
+    }
+    return null;
+  },
+};
+
+module.exports = ReactDevToolsSettingsManager;

package/src/private/debugging/ReactDevToolsSettingsManager.win32.js

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+import NativeReactDevToolsSettingsManager from '../specs/modules/NativeReactDevToolsSettingsManager';
+
+module.exports = {
+  setGlobalHookSettings(settings: string) {
+    NativeReactDevToolsSettingsManager?.setGlobalHookSettings(settings);
+  },
+  getGlobalHookSettings(): ?string {
+    return NativeReactDevToolsSettingsManager?.getGlobalHookSettings();
+  },
+};

package/src/private/{fusebox → debugging}/setUpFuseboxReactDevToolsDispatcher.js

@@ -62,6 +62,12 @@ export class Domain {
   }
 }
 
+/**
+ * Globally bound object providing a hook for React DevTools runtime API calls
+ * over CDP.
+ *
+ * @see {@link ./__docs__/FuseboxReactDevToolsDispatcher.excalidraw-embedded.png}
+ */
 class FuseboxReactDevToolsDispatcher {
   static #domainNameToDomainMap: Map<DomainName, Domain> = new Map();
 

package/src/private/devmenu/DevMenu.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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
+ */
+
+/**
+ * The DevMenu module exposes methods for interacting with the Dev Menu in development.
+ */
+export interface DevMenuStatic {
+  /**
+   * Show the Dev Menu.
+   */
+  show(): void;
+}
+
+export const DevMenu: DevMenuStatic;