Merge branch 'main' into vhuseinova/axios-issue-fix

Author: vhuseinova-msft

change-beta/@azure-communication-react-2e4a29d5-272c-4225-9f4f-add54c5646f1.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "fixes treeshaking issue with usePropsFor by supporting useChatPropsFor and useCallingPropsFor",
+  "comment": "re-exporting functions and handling undefined case to match top-level usePropsFor function",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-4a805157-c696-47df-8490-c10e6c9370f2.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "3",
+  "comment": "draft of modality specific usePropsFor functions",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-bc219d8c-b452-49b5-b84d-fda5e16c9e1f.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Created modality specific selectors",
+  "comment": "draft of modality specific usePropsFor functions",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-2e4a29d5-272c-4225-9f4f-add54c5646f1.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "fixes treeshaking issue with usePropsFor by supporting useChatPropsFor and useCallingPropsFor",
+  "comment": "re-exporting functions and handling undefined case to match top-level usePropsFor function",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/communication-react/review/beta/communication-react.api.md

@@ -5494,9 +5494,15 @@ export const useCallAgent: () => CallAgent | undefined;
 // @public
 export const useCallClient: () => StatefulCallClient;
 
+// @public
+export const useCallingPropsFor: <Component extends (props: any) => JSX.Element>(component: Component) => ComponentProps<Component>;
+
 // @public
 export const useChatClient: () => StatefulChatClient;
 
+// @public
+export const useChatPropsFor: <Component extends (props: any) => JSX.Element>(component: Component) => ComponentProps<Component>;
+
 // @public
 export const useChatThreadClient: () => ChatThreadClient;
 

packages/communication-react/review/stable/communication-react.api.md

@@ -4743,9 +4743,15 @@ export const useCallAgent: () => CallAgent | undefined;
 // @public
 export const useCallClient: () => StatefulCallClient;
 
+// @public
+export const useCallingPropsFor: <Component extends (props: any) => JSX.Element>(component: Component) => ComponentProps<Component>;
+
 // @public
 export const useChatClient: () => StatefulChatClient;
 
+// @public
+export const useChatPropsFor: <Component extends (props: any) => JSX.Element>(component: Component) => ComponentProps<Component>;
+
 // @public
 export const useChatThreadClient: () => ChatThreadClient;
 

packages/communication-react/src/mergedHooks.ts

@@ -5,14 +5,16 @@ import {
   getCallingSelector,
   GetCallingSelector,
   useCallingHandlers,
-  useCallingSelector
+  useCallingSelector,
+  useCallingPropsFor as useCallingPropsForInternal
 } from '@internal/calling-component-bindings';
 import {
   ChatHandlers,
   getChatSelector,
   GetChatSelector,
   useChatHandlers,
-  useChatSelector
+  useChatSelector,
+  useChatPropsFor as useChatPropsForInternal
 } from '@internal/chat-component-bindings';
 import { ChatClientState } from '@internal/chat-stateful-client';
 import { CallClientState } from '@internal/calling-stateful-client';
@@ -125,21 +127,63 @@ export const usePropsFor = <Component extends (props: any) => JSX.Element>(
 
   if (chatProps) {
     if (!chatHandlers) {
-      throw 'Please initialize chatClient and chatThreadClient first!';
+      throw new Error('Please initialize chatClient and chatThreadClient first!');
     }
     return { ...chatProps, ...chatHandlers } as any;
   }
 
   if (callProps) {
     if (!callingHandlers) {
-      throw 'Please initialize callClient first!';
+      throw new Error('Please initialize callClient first!');
     }
     return { ...callProps, ...callingHandlers } as any;
   }
 
   if (!chatSelector && !callingSelector) {
-    throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
+    throw new Error(
+      "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List."
+    );
   } else {
-    throw 'Could not find props for this component, ensure the component is wrapped by appropriate providers.';
+    throw new Error(
+      'Could not find props for this component, ensure the component is wrapped by appropriate providers.'
+    );
   }
 };
+
+/**
+ * Helper function to pull the necessary properties for a chat component. There is a general usePropsFor
+ * function however since it can pull in for both calling and chat you will not be able to leverage any treeshaking
+ * functionality.
+ *
+ * @public
+ */
+export const useChatPropsFor = <Component extends (props: any) => JSX.Element>(
+  component: Component
+): ComponentProps<Component> => {
+  const props = useChatPropsForInternal(component);
+  if (props === undefined) {
+    throw new Error(
+      'Could not find props for this component, ensure the component is wrapped by appropriate providers.'
+    );
+  }
+  return props as ComponentProps<Component>;
+};
+
+/**
+ * Helper function to pull the necessary properties for a calling component. There is a general usePropsFor
+ * function however since it can pull in for both calling and chat you will not be able to leverage any treeshaking
+ * functionality.
+ *
+ * @public
+ */
+export const useCallingPropsFor = <Component extends (props: any) => JSX.Element>(
+  component: Component
+): ComponentProps<Component> => {
+  const props = useCallingPropsForInternal(component);
+  if (props === undefined) {
+    throw new Error(
+      'Could not find props for this component, ensure the component is wrapped by appropriate providers.'
+    );
+  }
+  return props as ComponentProps<Component>;
+};

packages/storybook8/stories/StatefulClient/BestPractices.mdx

@@ -17,6 +17,11 @@ By using the stateful client for calling or chat, you are on our recommended pat
 If you are using our provided UI Components, `usePropsFor` will help you get integrated with the underlying functionality quickly. This provides a series of properties our
 provided components are expecting from the stateful client to render an experience your users will be expecting. This is the fastest way to get your experience up and running with Azure Communication Services.
 
+If you are building calling specific or chat specific scenarios it may be advantageous to use the `useCallingPropsFor` or `useChatPropsFor` functions instead of `usePropsFor`.
+Since `usePropsFor` can grab references to calling or chat components it tells the treeshaking process I am going to need both Calling and Chat functionality and will not treeshake out those dependencies.
+If you are looking to reduce the bundle size further and you are building a chat scenario we would recommend using `useChatPropsFor` instead of `usePropsFor` and skip pulling in any calling dependencies.
+Similarly for calling scenarios you will want to use `useCallingPropsFor` and treeshake out any chat specific dependencies.
+
 ## You can use your own UI Components
 
 Today you can use `useSelector` to connect your own components to create your own experiences! We use `useSelector` under the hood when you leverage our `usePropsFor` hook.