Clean up useMemoIterable

Author: compulim

packages/api/src/hooks/Composer.tsx

@@ -100,6 +100,7 @@ import useStyleOptions from './useStyleOptions';
 import ErrorBoundary from './utils/ErrorBoundary';
 import observableToPromise from './utils/observableToPromise';
 import { parseUIState } from './validation/uiState';
+import type { ActivityMiddleware } from '../../dist/botframework-webchat-api.mjs';
 
 // List of Redux actions factory we are hoisting as Web Chat functions
 const DISPATCHERS = {
@@ -272,11 +273,11 @@ type ComposerCoreProps = Readonly<{
 }>;
 
 const ComposerCore = ({
-  activityMiddleware,
+  activityMiddleware: activityMiddlewareFromProps,
   activityStatusMiddleware,
   attachmentForScreenReaderMiddleware,
   attachmentMiddleware,
-  avatarMiddleware,
+  avatarMiddleware: avatarMiddlewareFromProps,
   cardActionMiddleware,
   children,
   dir,
@@ -472,16 +473,17 @@ const ComposerCore = ({
   );
 
   const groupActivitiesMiddleware = useMemoIterable<readonly GroupActivitiesMiddleware[] | undefined>(
-    () =>
-      groupActivitiesMiddlewareFromProps
-        ? Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps ?? []))
-        : undefined,
+    () => Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps ?? [])),
     [groupActivitiesMiddlewareFromProps]
   );
 
+  const avatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
+    () => singleToArray(avatarMiddlewareFromProps ?? []),
+    [avatarMiddlewareFromProps]
+  );
+
   const polymiddlewareForLegacyAvatarMiddleware = useMemo<Polymiddleware | undefined>(
-    () =>
-      avatarMiddleware ? createAvatarPolymiddlewareFromLegacy(...singleToArray(avatarMiddleware ?? [])) : undefined,
+    () => createAvatarPolymiddlewareFromLegacy(...avatarMiddleware),
     [avatarMiddleware]
   );
 
@@ -526,11 +528,13 @@ const ComposerCore = ({
     [scrollToEndButtonMiddleware]
   );
 
+  const activityMiddleware = useMemoIterable<readonly ActivityMiddleware[]>(
+    () => singleToArray(activityMiddlewareFromProps ?? []),
+    [activityMiddlewareFromProps]
+  );
+
   const polymiddlewareForLegacyActivityMiddleware = useMemo<Polymiddleware | undefined>(
-    () =>
-      activityMiddleware
-        ? createActivityPolymiddlewareFromLegacy(...singleToArray(activityMiddleware ?? []))
-        : undefined,
+    () => createActivityPolymiddlewareFromLegacy(...activityMiddleware),
     [activityMiddleware]
   );
 

packages/bundle/src/AddFullBundle.tsx

@@ -57,19 +57,15 @@ function AddFullBundle({
 }: AddFullBundleProps) {
   adaptiveCardHostConfig && adaptiveCardHostConfigDeprecation();
 
-  const attachmentForScreenReaderMiddleware = useMemoIterable<
-    readonly AttachmentForScreenReaderMiddleware[] | undefined
-  >(() => {
-    const middleware = singleToArray(attachmentForScreenReaderMiddlewareFromProps);
-
-    return middleware.length ? middleware : undefined;
-  }, [attachmentForScreenReaderMiddlewareFromProps]);
-
-  const attachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[] | undefined>(() => {
-    const middleware = singleToArray(attachmentMiddlewareFromProps);
+  const attachmentForScreenReaderMiddleware = useMemoIterable<readonly AttachmentForScreenReaderMiddleware[]>(
+    () => singleToArray(attachmentForScreenReaderMiddlewareFromProps),
+    [attachmentForScreenReaderMiddlewareFromProps]
+  );
 
-    return middleware.length ? middleware : undefined;
-  }, [attachmentMiddlewareFromProps]);
+  const attachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[]>(
+    () => singleToArray(attachmentMiddlewareFromProps),
+    [attachmentMiddlewareFromProps]
+  );
 
   const patchedProps = useComposerProps({
     attachmentForScreenReaderMiddleware,

packages/component/src/Composer.tsx

@@ -4,14 +4,21 @@ import { singleToArray } from '@msinternal/botframework-webchat-base/utils';
 import { useMemoIterable } from '@msinternal/botframework-webchat-react-hooks';
 import {
   Composer as APIComposer,
+  AttachmentForScreenReaderMiddleware,
   extractSendBoxMiddleware,
   extractSendBoxToolbarMiddleware,
   hooks,
   WebSpeechPonyfillFactory,
+  type ActivityStatusMiddleware,
   type ComposerProps as APIComposerProps,
+  type AttachmentMiddleware,
   type AvatarMiddleware,
+  type CardActionMiddleware,
+  type ScrollToEndButtonMiddleware,
   type SendBoxMiddleware,
-  type SendBoxToolbarMiddleware
+  type SendBoxToolbarMiddleware,
+  type ToastMiddleware,
+  type TypingIndicatorMiddleware
 } from 'botframework-webchat-api';
 import { DecoratorComposer, type DecoratorMiddleware } from 'botframework-webchat-api/decorator';
 import { type LegacyActivityMiddleware, type Polymiddleware } from 'botframework-webchat-api/middleware';
@@ -369,13 +376,12 @@ const Composer = ({
   const { nonce, onTelemetry } = composerProps;
   const theme = useTheme();
 
-  const patchedActivityMiddleware = useMemo<readonly LegacyActivityMiddleware[] | undefined>(() => {
-    const middleware = Object.freeze([...singleToArray(activityMiddleware ?? []), ...theme.activityMiddleware]);
-
-    return middleware.length ? middleware : undefined;
-  }, [activityMiddleware, theme.activityMiddleware]);
+  const patchedActivityMiddleware = useMemo<readonly LegacyActivityMiddleware[]>(
+    () => Object.freeze([...singleToArray(activityMiddleware ?? []), ...theme.activityMiddleware]),
+    [activityMiddleware, theme.activityMiddleware]
+  );
 
-  const patchedActivityStatusMiddleware = useMemo(
+  const patchedActivityStatusMiddleware = useMemoIterable<readonly ActivityStatusMiddleware[]>(
     () =>
       Object.freeze([
         ...singleToArray(activityStatusMiddleware ?? []),
@@ -385,7 +391,7 @@ const Composer = ({
     [activityStatusMiddleware, theme.activityStatusMiddleware]
   );
 
-  const patchedAttachmentForScreenReaderMiddleware = useMemo(
+  const patchedAttachmentForScreenReaderMiddleware = useMemoIterable<readonly AttachmentForScreenReaderMiddleware[]>(
     () =>
       Object.freeze([
         ...singleToArray(attachmentForScreenReaderMiddleware ?? []),
@@ -395,7 +401,7 @@ const Composer = ({
     [attachmentForScreenReaderMiddleware, theme.attachmentForScreenReaderMiddleware]
   );
 
-  const patchedAttachmentMiddleware = useMemo(
+  const patchedAttachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[]>(
     () =>
       Object.freeze([
         ...singleToArray(attachmentMiddleware ?? []),
@@ -405,13 +411,12 @@ const Composer = ({
     [attachmentMiddleware, theme.attachmentMiddleware]
   );
 
-  const patchedAvatarMiddleware = useMemo<readonly AvatarMiddleware[] | undefined>(() => {
-    const middleware = Object.freeze([...singleToArray(avatarMiddleware ?? []), ...theme.avatarMiddleware]);
-
-    return middleware.length ? middleware : undefined;
-  }, [avatarMiddleware, theme.avatarMiddleware]);
+  const patchedAvatarMiddleware = useMemoIterable<readonly AvatarMiddleware[]>(
+    () => Object.freeze([...singleToArray(avatarMiddleware ?? []), ...theme.avatarMiddleware]),
+    [avatarMiddleware, theme.avatarMiddleware]
+  );
 
-  const patchedCardActionMiddleware = useMemo(
+  const patchedCardActionMiddleware = useMemoIterable<readonly CardActionMiddleware[]>(
     () =>
       Object.freeze([
         ...singleToArray(cardActionMiddleware ?? []),
@@ -434,32 +439,37 @@ const Composer = ({
     [polymiddleware, theme.polymiddleware]
   );
 
-  const patchedToastMiddleware = useMemo(
-    () => [...singleToArray(toastMiddleware ?? []), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],
+  const patchedToastMiddleware = useMemoIterable<readonly ToastMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(toastMiddleware ?? []),
+        ...theme.toastMiddleware,
+        ...createDefaultToastMiddleware()
+      ]),
     [toastMiddleware, theme.toastMiddleware]
   );
 
-  const patchedTypingIndicatorMiddleware = useMemo(
-    () => [
-      ...singleToArray(typingIndicatorMiddleware ?? []),
-      ...theme.typingIndicatorMiddleware,
-      ...createDefaultTypingIndicatorMiddleware()
-    ],
+  const patchedTypingIndicatorMiddleware = useMemoIterable<readonly TypingIndicatorMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(typingIndicatorMiddleware ?? []),
+        ...theme.typingIndicatorMiddleware,
+        ...createDefaultTypingIndicatorMiddleware()
+      ]),
     [typingIndicatorMiddleware, theme.typingIndicatorMiddleware]
   );
 
-  const defaultScrollToEndButtonMiddleware = useMemo(() => createDefaultScrollToEndButtonMiddleware(), []);
-
-  const patchedScrollToEndButtonMiddleware = useMemo(
-    () => [
-      ...singleToArray(scrollToEndButtonMiddleware ?? []),
-      ...theme.scrollToEndButtonMiddleware,
-      ...defaultScrollToEndButtonMiddleware
-    ],
-    [defaultScrollToEndButtonMiddleware, scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
+  const patchedScrollToEndButtonMiddleware = useMemoIterable<readonly ScrollToEndButtonMiddleware[]>(
+    () =>
+      Object.freeze([
+        ...singleToArray(scrollToEndButtonMiddleware ?? []),
+        ...theme.scrollToEndButtonMiddleware,
+        ...createDefaultScrollToEndButtonMiddleware()
+      ]),
+    [scrollToEndButtonMiddleware, theme.scrollToEndButtonMiddleware]
   );
 
-  const sendBoxMiddleware = useMemo<readonly SendBoxMiddleware[]>(
+  const sendBoxMiddleware = useMemoIterable<readonly SendBoxMiddleware[]>(
     () =>
       Object.freeze([
         ...extractSendBoxMiddleware(sendBoxMiddlewareFromProps),