Fix middleware.length

Author: compulim

packages/api/src/hooks/Composer.tsx

@@ -342,7 +342,7 @@ const ComposerCore = ({
   const cardActionContext = useMemo(
     () =>
       createCardActionContext({
-        cardActionMiddleware: Object.freeze([...singleToArray(cardActionMiddleware)]),
+        cardActionMiddleware: Object.freeze([...singleToArray(cardActionMiddleware ?? [])]),
         continuous: !!styleOptions.speechRecognitionContinuous,
         directLine,
         dispatch,
@@ -422,7 +422,7 @@ const ComposerCore = ({
       applyMiddlewareForRenderer(
         'activity status',
         { strict: false },
-        ...singleToArray(activityStatusMiddleware),
+        ...singleToArray(activityStatusMiddleware ?? []),
         () => () => () => false
       )({}),
     [activityStatusMiddleware]
@@ -433,7 +433,7 @@ const ComposerCore = ({
       applyMiddlewareForRenderer(
         'attachment for screen reader',
         { strict: true },
-        ...singleToArray(attachmentForScreenReaderMiddleware),
+        ...singleToArray(attachmentForScreenReaderMiddleware ?? []),
         () =>
           () =>
           ({ attachment }) => {
@@ -457,7 +457,7 @@ const ComposerCore = ({
     () =>
       applyMiddlewareForLegacyRenderer(
         'attachment',
-        ...singleToArray(attachmentMiddleware),
+        ...singleToArray(attachmentMiddleware ?? []),
         () =>
           () =>
           ({ attachment }) => {
@@ -473,12 +473,15 @@ const ComposerCore = ({
 
   const groupActivitiesMiddleware = useMemoIterable<readonly GroupActivitiesMiddleware[] | undefined>(
     () =>
-      groupActivitiesMiddlewareFromProps ? Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps)) : undefined,
+      groupActivitiesMiddlewareFromProps
+        ? Object.freeze(singleToArray(groupActivitiesMiddlewareFromProps ?? []))
+        : undefined,
     [groupActivitiesMiddlewareFromProps]
   );
 
   const polymiddlewareForLegacyAvatarMiddleware = useMemo<Polymiddleware | undefined>(
-    () => (avatarMiddleware ? createAvatarPolymiddlewareFromLegacy(...singleToArray(avatarMiddleware)) : undefined),
+    () =>
+      avatarMiddleware ? createAvatarPolymiddlewareFromLegacy(...singleToArray(avatarMiddleware ?? [])) : undefined,
     [avatarMiddleware]
   );
 
@@ -487,7 +490,7 @@ const ComposerCore = ({
       applyMiddlewareForRenderer(
         'toast',
         { strict: false },
-        ...singleToArray(toastMiddleware),
+        ...singleToArray(toastMiddleware ?? []),
         () =>
           () =>
           ({ notification }) => {
@@ -506,7 +509,7 @@ const ComposerCore = ({
       applyMiddlewareForRenderer(
         'typing indicator',
         { strict: false },
-        ...singleToArray(typingIndicatorMiddleware),
+        ...singleToArray(typingIndicatorMiddleware ?? []),
         () => () => () => false
       )({}),
     [typingIndicatorMiddleware]
@@ -517,15 +520,17 @@ const ComposerCore = ({
       applyMiddlewareForRenderer(
         'scroll to end button',
         { strict: true },
-        ...singleToArray(scrollToEndButtonMiddleware),
+        ...singleToArray(scrollToEndButtonMiddleware ?? []),
         () => () => () => false
       )() as any,
     [scrollToEndButtonMiddleware]
   );
 
   const polymiddlewareForLegacyActivityMiddleware = useMemo<Polymiddleware | undefined>(
     () =>
-      activityMiddleware ? createActivityPolymiddlewareFromLegacy(...singleToArray(activityMiddleware)) : undefined,
+      activityMiddleware
+        ? createActivityPolymiddlewareFromLegacy(...singleToArray(activityMiddleware ?? []))
+        : undefined,
     [activityMiddleware]
   );
 

packages/bundle/src/AddFullBundle.tsx

@@ -59,18 +59,17 @@ function AddFullBundle({
 
   const attachmentForScreenReaderMiddleware = useMemoIterable<
     readonly AttachmentForScreenReaderMiddleware[] | undefined
-  >(
-    () =>
-      attachmentForScreenReaderMiddlewareFromProps?.length
-        ? singleToArray(attachmentForScreenReaderMiddlewareFromProps)
-        : undefined,
-    [attachmentForScreenReaderMiddlewareFromProps]
-  );
+  >(() => {
+    const middleware = singleToArray(attachmentForScreenReaderMiddlewareFromProps);
 
-  const attachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[] | undefined>(
-    () => (attachmentMiddlewareFromProps?.length ? singleToArray(attachmentMiddlewareFromProps) : undefined),
-    [attachmentMiddlewareFromProps]
-  );
+    return middleware.length ? middleware : undefined;
+  }, [attachmentForScreenReaderMiddlewareFromProps]);
+
+  const attachmentMiddleware = useMemoIterable<readonly AttachmentMiddleware[] | undefined>(() => {
+    const middleware = singleToArray(attachmentMiddlewareFromProps);
+
+    return middleware.length ? middleware : undefined;
+  }, [attachmentMiddlewareFromProps]);
 
   const patchedProps = useComposerProps({
     attachmentForScreenReaderMiddleware,

packages/component/src/Composer.tsx

@@ -406,15 +406,15 @@ const Composer = ({
   );
 
   const patchedAvatarMiddleware = useMemo<readonly AvatarMiddleware[] | undefined>(() => {
-    const middleware = Object.freeze([...singleToArray(avatarMiddleware), ...theme.avatarMiddleware]);
+    const middleware = Object.freeze([...singleToArray(avatarMiddleware ?? []), ...theme.avatarMiddleware]);
 
     return middleware.length ? middleware : undefined;
   }, [avatarMiddleware, theme.avatarMiddleware]);
 
   const patchedCardActionMiddleware = useMemo(
     () =>
       Object.freeze([
-        ...singleToArray(cardActionMiddleware),
+        ...singleToArray(cardActionMiddleware ?? []),
         ...theme.cardActionMiddleware,
         ...createDefaultCardActionMiddleware()
       ]),
@@ -435,13 +435,13 @@ const Composer = ({
   );
 
   const patchedToastMiddleware = useMemo(
-    () => [...singleToArray(toastMiddleware), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],
+    () => [...singleToArray(toastMiddleware ?? []), ...theme.toastMiddleware, ...createDefaultToastMiddleware()],
     [toastMiddleware, theme.toastMiddleware]
   );
 
   const patchedTypingIndicatorMiddleware = useMemo(
     () => [
-      ...singleToArray(typingIndicatorMiddleware),
+      ...singleToArray(typingIndicatorMiddleware ?? []),
       ...theme.typingIndicatorMiddleware,
       ...createDefaultTypingIndicatorMiddleware()
     ],
@@ -452,7 +452,7 @@ const Composer = ({
 
   const patchedScrollToEndButtonMiddleware = useMemo(
     () => [
-      ...singleToArray(scrollToEndButtonMiddleware),
+      ...singleToArray(scrollToEndButtonMiddleware ?? []),
       ...theme.scrollToEndButtonMiddleware,
       ...defaultScrollToEndButtonMiddleware
     ],

packages/react-hooks/src/useMemoIterable.ts

@@ -6,6 +6,6 @@ export default function useMemoIterable<T extends Iterable<unknown>>(factory: ()
   return useMemoWithPrevious<T>(prevValue => {
     const value = factory();
 
-    return prevValue && iterateEquals(value, prevValue) ? prevValue : value;
+    return typeof prevValue !== 'undefined' && iterateEquals(value, prevValue) ? prevValue : value;
   }, deps);
 }