Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "specific usePropsFor to treeshake out unncessary calling/chat code" #5728

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view

This file was deleted.

This file was deleted.

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -5494,15 +5494,9 @@ 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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4743,15 +4743,9 @@ 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;

Expand Down
56 changes: 6 additions & 50 deletions packages/communication-react/src/mergedHooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@ import {
getCallingSelector,
GetCallingSelector,
useCallingHandlers,
useCallingSelector,
useCallingPropsFor as useCallingPropsForInternal
useCallingSelector
} from '@internal/calling-component-bindings';
import {
ChatHandlers,
getChatSelector,
GetChatSelector,
useChatHandlers,
useChatSelector,
useChatPropsFor as useChatPropsForInternal
useChatSelector
} from '@internal/chat-component-bindings';
import { ChatClientState } from '@internal/chat-stateful-client';
import { CallClientState } from '@internal/calling-stateful-client';
Expand Down Expand Up @@ -127,63 +125,21 @@ export const usePropsFor = <Component extends (props: any) => JSX.Element>(

if (chatProps) {
if (!chatHandlers) {
throw new Error('Please initialize chatClient and chatThreadClient first!');
throw 'Please initialize chatClient and chatThreadClient first!';
}
return { ...chatProps, ...chatHandlers } as any;
}

if (callProps) {
if (!callingHandlers) {
throw new Error('Please initialize callClient first!');
throw 'Please initialize callClient first!';
}
return { ...callProps, ...callingHandlers } as any;
}

if (!chatSelector && !callingSelector) {
throw new Error(
"Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List."
);
throw "Can't find corresponding selector for this component. Please check the supported components from Azure Communication UI Feature Component List.";
} else {
throw new Error(
'Could not find props for this component, ensure the component is wrapped by appropriate providers.'
);
throw '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>;
};
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,6 @@ 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.
Expand Down
Loading