Rename to StoreDebugAPI, remove React context, use Registry WeakMap

compulim · compulim · commit dd4c8c542028 · 2025-12-23T01:20:03.000Z
diff --git a/packages/api/src/boot/hook.ts b/packages/api/src/boot/hook.ts
@@ -47,7 +47,6 @@ export {
   useRenderAttachment,
   useRenderToast,
   useRenderTypingIndicator,
-  useRootDebugAPI,
   useSendBoxAttachments,
   useSendBoxValue,
   useSendEvent,
diff --git a/packages/api/src/hooks/Composer.tsx b/packages/api/src/hooks/Composer.tsx
@@ -60,7 +60,6 @@ import ActivityListenerComposer from '../providers/ActivityListener/ActivityList
 import ActivitySendStatusComposer from '../providers/ActivitySendStatus/ActivitySendStatusComposer';
 import ActivitySendStatusTelemetryComposer from '../providers/ActivitySendStatusTelemetry/ActivitySendStatusTelemetryComposer';
 import ActivityTypingComposer from '../providers/ActivityTyping/ActivityTypingComposer';
-import DebugAPIComposer from '../providers/DebugAPI/DebugAPIComposer';
 import GroupActivitiesComposer from '../providers/GroupActivities/GroupActivitiesComposer';
 import PonyfillComposer from '../providers/Ponyfill/PonyfillComposer';
 import StyleOptionsComposer from '../providers/StyleOptions/StyleOptionsComposer';
@@ -748,19 +747,17 @@ const ComposerWithStore = ({ onTelemetry, store, ...props }: ComposerWithStorePr
   }, [ponyfill, store]);
 
   return (
-    <DebugAPIComposer rootDebugAPI={memoizedStore['debugAPI']}>
-      <Provider context={WebChatReduxContext} store={memoizedStore}>
-        <ReduxStoreComposer store={memoizedStore}>
-          <GraphProvider store={memoizedStore}>
-            <ActivityKeyerComposer>
-              <ActivityAcknowledgementComposer>
-                <ComposerCore onTelemetry={onTelemetry} {...props} />
-              </ActivityAcknowledgementComposer>
-            </ActivityKeyerComposer>
-          </GraphProvider>
-        </ReduxStoreComposer>
-      </Provider>
-    </DebugAPIComposer>
+    <Provider context={WebChatReduxContext} store={memoizedStore}>
+      <ReduxStoreComposer store={memoizedStore}>
+        <GraphProvider store={memoizedStore}>
+          <ActivityKeyerComposer>
+            <ActivityAcknowledgementComposer>
+              <ComposerCore onTelemetry={onTelemetry} {...props} />
+            </ActivityAcknowledgementComposer>
+          </ActivityKeyerComposer>
+        </GraphProvider>
+      </ReduxStoreComposer>
+    </Provider>
   );
 };
 
diff --git a/packages/api/src/hooks/index.ts b/packages/api/src/hooks/index.ts
@@ -74,7 +74,6 @@ import useVoiceSelector from './useVoiceSelector';
 
 export { useBuildRenderActivityCallback } from '@msinternal/botframework-webchat-api-middleware';
 export { useSuggestedActionsHooks } from '@msinternal/botframework-webchat-redux-store';
-export { default as useRootDebugAPI } from '../providers/DebugAPI/useRootDebugAPI';
 
 export {
   useActiveTyping,
diff --git a/packages/api/src/providers/DebugAPI/DebugAPIComposer.tsx b/packages/api/src/providers/DebugAPI/DebugAPIComposer.tsx
diff --git a/packages/api/src/providers/DebugAPI/private/DebugAPIContext.ts b/packages/api/src/providers/DebugAPI/private/DebugAPIContext.ts
diff --git a/packages/api/src/providers/DebugAPI/useRootDebugAPI.ts b/packages/api/src/providers/DebugAPI/useRootDebugAPI.ts
diff --git a/packages/component/src/ActivityDebug/RestrictedActivityDebugAPI.ts b/packages/component/src/ActivityDebug/RestrictedActivityDebugAPI.ts
@@ -4,8 +4,7 @@ import type { ArrayElement } from 'type-fest';
 const BREAKPOINT_NAMES = ['render'] as const;
 
 type ActivityBreakpointName = ArrayElement<typeof BREAKPOINT_NAMES>;
-type ActivityDebugContext = {  readonly activity: any;
-};
+type ActivityDebugContext = { readonly activity: any };
 
 class RestrictedActivityDebugAPI extends RestrictedDebugAPI<ActivityBreakpointName, ActivityDebugContext> {
   constructor(getActivity: () => any) {
diff --git a/packages/component/src/Composer.tsx b/packages/component/src/Composer.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/require-default-props */
+
 import {
   Composer as APIComposer,
   extractSendBoxMiddleware,
@@ -9,7 +11,6 @@ import {
   type SendBoxToolbarMiddleware
 } from 'botframework-webchat-api';
 import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
-import { useRootDebugAPI } from 'botframework-webchat-api/hook';
 import { type Polymiddleware } from 'botframework-webchat-api/middleware';
 import { singleToArray } from 'botframework-webchat-core';
 import classNames from 'classnames';
@@ -18,6 +19,7 @@ import PropTypes from 'prop-types';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { Composer as SayComposer } from 'react-say';
 
+import { StoreDebugAPIRegistry, type StoreDebugAPI } from 'botframework-webchat-core/internal';
 import createDefaultAttachmentMiddleware from './Attachment/createMiddleware';
 import BuiltInDecorator from './BuiltInDecorator';
 import Dictation from './Dictation';
@@ -65,9 +67,9 @@ function styleSetToEmotionObjects(styleToEmotionObject, styleSet) {
 }
 
 type ComposerCoreUIProps = {
-  // eslint-disable-next-line react/require-default-props
   readonly children?: ReactNode | undefined;
   readonly nonce: string | undefined;
+  readonly storeDebugAPI?: StoreDebugAPI | undefined;
 };
 
 const ROOT_STYLE = {
@@ -84,9 +86,8 @@ const ROOT_STYLE = {
   }
 };
 
-const ComposerCoreUI = memo(({ children, nonce }: ComposerCoreUIProps) => {
+const ComposerCoreUI = memo(({ children, nonce, storeDebugAPI }: ComposerCoreUIProps) => {
   const [{ internalLiveRegionFadeAfter }] = useStyleOptions();
-  const [rootDebugAPI] = useRootDebugAPI();
   const rootClassName = useStyleToEmotionObject()(ROOT_STYLE) + '';
   const rootRef = useRef<HTMLDivElement>(null);
   const trackException = useTrackException();
@@ -110,15 +111,15 @@ const ComposerCoreUI = memo(({ children, nonce }: ComposerCoreUIProps) => {
     const { current } = rootRef;
 
     if (current) {
-      current['webChat'] = rootDebugAPI;
+      current['webChat'] = storeDebugAPI;
 
       return () => delete current['webChat'];
     }
 
     return () => {
       // Intentionally left blank.
     };
-  }, [rootDebugAPI]);
+  }, [storeDebugAPI]);
 
   return (
     <CSSCustomPropertiesContainer
@@ -158,6 +159,7 @@ type ComposerCoreProps = Readonly<{
     newLineOptions: { markdownRespectCRLF: boolean },
     linkOptions: { externalLinkAlt: string }
   ) => string;
+  storeDebugAPI?: StoreDebugAPI | undefined;
   styleSet?: any;
   suggestedActionsAccessKey?: boolean | string;
   webSpeechPonyfillFactory?: WebSpeechPonyfillFactory;
@@ -168,6 +170,7 @@ const ComposerCore = ({
   extraStyleSet,
   nonce,
   renderMarkdown,
+  storeDebugAPI,
   styleSet,
   suggestedActionsAccessKey,
   webSpeechPonyfillFactory
@@ -309,7 +312,9 @@ const ComposerCore = ({
   return (
     <SayComposer ponyfill={webSpeechPonyfill}>
       <WebChatUIContext.Provider value={context}>
-        <ComposerCoreUI nonce={nonce}>{children}</ComposerCoreUI>
+        <ComposerCoreUI nonce={nonce} storeDebugAPI={storeDebugAPI}>
+          {children}
+        </ComposerCoreUI>
       </WebChatUIContext.Provider>
     </SayComposer>
   );
@@ -458,6 +463,8 @@ const Composer = ({
     [sendBoxToolbarMiddlewareFromProps, theme.sendBoxToolbarMiddleware]
   );
 
+  const storeDebugAPI = useMemo(() => StoreDebugAPIRegistry.get(composerProps.store), [composerProps.store]);
+
   return (
     <APIComposer
       activityMiddleware={patchedActivityMiddleware}
@@ -487,6 +494,7 @@ const Composer = ({
                   extraStyleSet={extraStyleSet}
                   nonce={nonce}
                   renderMarkdown={renderMarkdown}
+                  storeDebugAPI={storeDebugAPI}
                   styleSet={styleSet}
                   suggestedActionsAccessKey={suggestedActionsAccessKey}
                   webSpeechPonyfillFactory={webSpeechPonyfillFactory}
diff --git a/packages/core/src/createReducer.ts b/packages/core/src/createReducer.ts
@@ -19,12 +19,12 @@ import suggestedActions from './reducers/suggestedActions';
 import suggestedActionsOriginActivity from './reducers/suggestedActionsOriginActivity';
 
 import type { GlobalScopePonyfill } from './types/GlobalScopePonyfill';
-import type { RestrictedRootDebugAPI } from './types/RootDebugAPI';
+import type { RestrictedStoreDebugAPI } from './types/StoreDebugAPI';
 
-export default function createReducer(ponyfill: GlobalScopePonyfill, restrictedRootDebugAPI: RestrictedRootDebugAPI) {
+export default function createReducer(ponyfill: GlobalScopePonyfill, restrictedStoreDebugAPI: RestrictedStoreDebugAPI) {
   return combineActivitiesReducer(
     ponyfill,
-    restrictedRootDebugAPI,
+    restrictedStoreDebugAPI,
     combineReducers({
       connectivityStatus,
       dictateInterims,
diff --git a/packages/core/src/createStore.ts b/packages/core/src/createStore.ts
@@ -5,9 +5,10 @@ import createSagaMiddleware from 'redux-saga';
 import sagaError from './actions/sagaError';
 import createReducer from './createReducer';
 import createSagas from './createSagas';
-import { RestrictedRootDebugAPI } from './types/RootDebugAPI';
+import { RestrictedStoreDebugAPI } from './types/StoreDebugAPI';
 
 import type { GlobalScopePonyfill } from './types/GlobalScopePonyfill';
+import { StoreDebugAPIRegistry } from './internal';
 
 type CreateStoreOptions = {
   /**
@@ -113,24 +114,24 @@ export function withOptions(options: CreateStoreOptions, initialState?, ...middl
   // eslint-disable-next-line prefer-const
   let store: Store | undefined;
 
-  const restrictedRootDebugAPI = new RestrictedRootDebugAPI(() => store?.getState().activities);
+  const restrictedStoreDebugAPI = new RestrictedStoreDebugAPI(() => store?.getState().activities);
 
   // We are sure the "getStore" (first argument) is not called on "createEnhancerAndSagaMiddleware()".
   const { enhancer, sagaMiddleware } = createEnhancerAndSagaMiddleware(() => store, ...middlewares);
 
   store = createReduxStore(
-    createReducer(ponyfill, restrictedRootDebugAPI),
+    createReducer(ponyfill, restrictedStoreDebugAPI),
     initialState || {},
     options.devTools ? composeWithDevTools(enhancer) : enhancer
   );
 
   // TODO: [P1] When we redesign the store and chat adapter, we should have the Debug API stored somewhere else.
-  store['debugAPI'] = restrictedRootDebugAPI.toPublic();
+  StoreDebugAPIRegistry.set(store, restrictedStoreDebugAPI.toPublic());
 
   // TODO: [P1] When we redesign the store and chat adapter, we shoulstore.getState().activities
   sagaMiddleware.run(createSagas({ ponyfill }));
 
-  return Object.freeze(store);
+  return store;
 }
 
 /**
diff --git a/packages/core/src/internal/StoreDebugAPIRegistry.ts b/packages/core/src/internal/StoreDebugAPIRegistry.ts
@@ -0,0 +1,4 @@
+import type createStore from '../createStore';
+import type { StoreDebugAPI } from '../types/StoreDebugAPI';
+
+export default new WeakMap<ReturnType<typeof createStore>, StoreDebugAPI>();
diff --git a/packages/core/src/internal/index.ts b/packages/core/src/internal/index.ts
@@ -5,6 +5,7 @@ export {
   type SetRawStateAction
 } from './actions/setRawState';
 
-export { type RootDebugAPI } from '../types/RootDebugAPI';
+export { default as StoreDebugAPIRegistry } from './StoreDebugAPIRegistry';
+export { type StoreDebugAPI } from '../types/StoreDebugAPI';
 
 export { RestrictedDebugAPI, type InferPublic } from '@msinternal/botframework-webchat-core-debug-api';
diff --git a/packages/core/src/reducers/activities/combineActivitiesReducer.ts b/packages/core/src/reducers/activities/combineActivitiesReducer.ts
@@ -1,7 +1,7 @@
 import { isForbiddenPropertyName } from '@msinternal/botframework-webchat-base/utils';
 import type { ActionFromReducersMapObject, combineReducers, Reducer, StateFromReducersMapObject } from 'redux';
 import type { GlobalScopePonyfill } from '../../types/GlobalScopePonyfill';
-import type { RestrictedRootDebugAPI } from '../../types/RootDebugAPI';
+import type { RestrictedStoreDebugAPI } from '../../types/StoreDebugAPI';
 import type { WebChatActivity } from '../../types/WebChatActivity';
 import createGroupedActivitiesReducer, {
   type GroupedActivitiesAction,
@@ -22,13 +22,13 @@ type ActivitiesState = {
  */
 export default function combineActivitiesReducer<M>(
   ponyfill: GlobalScopePonyfill,
-  restrictedRootDebugAPI: RestrictedRootDebugAPI,
+  restrictedStoreDebugAPI: RestrictedStoreDebugAPI,
   existingSlicedReducer: ReturnType<typeof combineReducers<M>>
 ): Reducer<StateFromReducersMapObject<M> & ActivitiesState, ActionFromReducersMapObject<M> & GroupedActivitiesAction> {
   type ExistingState = StateFromReducersMapObject<M>;
   type ExistingAction = ActionFromReducersMapObject<M>;
 
-  const groupedActivitiesReducer = createGroupedActivitiesReducer(ponyfill, restrictedRootDebugAPI);
+  const groupedActivitiesReducer = createGroupedActivitiesReducer(ponyfill, restrictedStoreDebugAPI);
 
   return function (
     state: (ExistingState & ActivitiesState) | undefined,
diff --git a/packages/core/src/reducers/activities/createGroupedActivitiesReducer.ts b/packages/core/src/reducers/activities/createGroupedActivitiesReducer.ts
@@ -27,7 +27,7 @@ import type {
   PostActivityRejectedAction
 } from '../../actions/postActivity';
 import type { GlobalScopePonyfill } from '../../types/GlobalScopePonyfill';
-import { type RestrictedRootDebugAPI } from '../../types/RootDebugAPI';
+import { type RestrictedStoreDebugAPI } from '../../types/StoreDebugAPI';
 import type { WebChatActivity } from '../../types/WebChatActivity';
 import patchActivity from './patchActivity';
 import deleteActivityByLocalId from './sort/deleteActivityByLocalId';
@@ -62,7 +62,7 @@ function getClientActivityID(activity: WebChatActivity): string | undefined {
 
 function createGroupedActivitiesReducer(
   ponyfill: GlobalScopePonyfill,
-  restrictedRootDebugAPI: RestrictedRootDebugAPI
+  restrictedStoreDebugAPI: RestrictedStoreDebugAPI
 ): Reducer<GroupedActivitiesState, GroupedActivitiesAction> {
   return function activities(
     state: GroupedActivitiesState = DEFAULT_STATE,
@@ -192,7 +192,7 @@ function createGroupedActivitiesReducer(
         } = action;
 
         // We cannot call breakpoint inside Redux because DebugContext cannot call getState(), need setTimeout.
-        queueMicrotask(() => restrictedRootDebugAPI.UNSAFE_callBreakpoint.incomingActivity({ activity }));
+        queueMicrotask(() => restrictedStoreDebugAPI.UNSAFE_callBreakpoint.incomingActivity({ activity }));
 
         activity = patchActivity(activity, ponyfill);
 
diff --git a/packages/core/src/types/RootDebugAPI.ts b/packages/core/src/types/RootDebugAPI.ts
diff --git a/packages/core/src/types/StoreDebugAPI.ts b/packages/core/src/types/StoreDebugAPI.ts
