Treeshaking Locales and Reduced Bundle Size (#3615)

* Treeshake locales

* Treeshake locales from composites

* minor

* Change files

* Duplicate change files for beta release

* minor changes

Author: prabhjot-msft

change-beta/@azure-communication-react-bea23a73-0068-4635-bb72-8dcaa78f51c4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Calling",
+  "comment": "Treeshake locales from composites",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-bea23a73-0068-4635-bb72-8dcaa78f51c4.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "improvement",
+  "workstream": "Calling",
+  "comment": "Treeshake locales from composites",
+  "packageName": "@azure/communication-react",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

common/config/webpack/sampleapp.webpack.config.js

@@ -68,7 +68,7 @@ const webpackConfig = (sampleAppDir, env, babelConfig) => {
         __BUILDTIME__: JSON.stringify(new Date().toLocaleString())
       }),
       new BundleAnalyzerPlugin({
-        analyzerMode: 'json',
+        analyzerMode: 'json'
       }),
       new CopyPlugin({
         patterns: [

packages/communication-react/src/index.ts

@@ -131,7 +131,27 @@ export {
   StreamMedia,
   TypingIndicator,
   VideoGallery,
-  VideoTile
+  VideoTile,
+  COMPONENT_LOCALE_EN_GB,
+  COMPONENT_LOCALE_AR_SA,
+  COMPONENT_LOCALE_CS_CZ,
+  COMPONENT_LOCALE_DE_DE,
+  COMPONENT_LOCALE_ES_ES,
+  COMPONENT_LOCALE_FI_FI,
+  COMPONENT_LOCALE_FR_FR,
+  COMPONENT_LOCALE_HE_IL,
+  COMPONENT_LOCALE_IT_IT,
+  COMPONENT_LOCALE_JA_JP,
+  COMPONENT_LOCALE_KO_KR,
+  COMPONENT_LOCALE_NB_NO,
+  COMPONENT_LOCALE_NL_NL,
+  COMPONENT_LOCALE_PL_PL,
+  COMPONENT_LOCALE_PT_BR,
+  COMPONENT_LOCALE_RU_RU,
+  COMPONENT_LOCALE_SV_SE,
+  COMPONENT_LOCALE_TR_TR,
+  COMPONENT_LOCALE_ZH_CN,
+  COMPONENT_LOCALE_ZH_TW
 } from '../../react-components/src';
 /* @conditional-compile-remove(image-gallery) */
 export { ImageGallery } from '../../react-components/src';

packages/react-components/src/index.ts

@@ -6,6 +6,26 @@ export { _IdentifierProvider } from './identifiers';
 export type { _Identifiers, _IdentifierProviderProps } from './identifiers';
 export * from './localization/locales';
 export { LocalizationProvider } from './localization';
+export { COMPONENT_LOCALE_EN_GB } from './localization/locales/en-GB/ComponentLocale';
+export { COMPONENT_LOCALE_AR_SA } from './localization/locales/ar-SA/ComponentLocale';
+export { COMPONENT_LOCALE_CS_CZ } from './localization/locales/cs-CZ/ComponentLocale';
+export { COMPONENT_LOCALE_DE_DE } from './localization/locales/de-DE/ComponentLocale';
+export { COMPONENT_LOCALE_ES_ES } from './localization/locales/es-ES/ComponentLocale';
+export { COMPONENT_LOCALE_FI_FI } from './localization/locales/fi-FI/ComponentLocale';
+export { COMPONENT_LOCALE_FR_FR } from './localization/locales/fr-FR/ComponentLocale';
+export { COMPONENT_LOCALE_HE_IL } from './localization/locales/he-IL/ComponentLocale';
+export { COMPONENT_LOCALE_IT_IT } from './localization/locales/it-IT/ComponentLocale';
+export { COMPONENT_LOCALE_JA_JP } from './localization/locales/ja-JP/ComponentLocale';
+export { COMPONENT_LOCALE_KO_KR } from './localization/locales/ko-KR/ComponentLocale';
+export { COMPONENT_LOCALE_NB_NO } from './localization/locales/nb-NO/ComponentLocale';
+export { COMPONENT_LOCALE_NL_NL } from './localization/locales/nl-NL/ComponentLocale';
+export { COMPONENT_LOCALE_PL_PL } from './localization/locales/pl-PL/ComponentLocale';
+export { COMPONENT_LOCALE_PT_BR } from './localization/locales/pt-BR/ComponentLocale';
+export { COMPONENT_LOCALE_RU_RU } from './localization/locales/ru-RU/ComponentLocale';
+export { COMPONENT_LOCALE_SV_SE } from './localization/locales/sv-SE/ComponentLocale';
+export { COMPONENT_LOCALE_TR_TR } from './localization/locales/tr-TR/ComponentLocale';
+export { COMPONENT_LOCALE_ZH_CN } from './localization/locales/zh-CN/ComponentLocale';
+export { COMPONENT_LOCALE_ZH_TW } from './localization/locales/zh-TW/ComponentLocale';
 export type { ComponentStrings, ComponentLocale, LocalizationProviderProps } from './localization';
 export * from './theming';
 

packages/react-components/src/localization/locales/ar-SA/ComponentLocale.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createComponentStrings } from '../utils';
+import type { ComponentLocale } from '../..';
+import ar_SA from './strings.json';
+
+/**
+ * Locale for Arabic (Saudi Arabia).
+ *
+ * @public
+ */
+export const COMPONENT_LOCALE_AR_SA: ComponentLocale = { strings: createComponentStrings(ar_SA) };

packages/react-components/src/localization/locales/cs-CZ/ComponentLocale.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createComponentStrings } from '../utils';
+import type { ComponentLocale } from '../..';
+import cs_CZ from './strings.json';
+
+/**
+ * Locale for Czech (Czech Republic).
+ *
+ * @public
+ */
+export const COMPONENT_LOCALE_CS_CZ: ComponentLocale = { strings: createComponentStrings(cs_CZ) };

packages/react-components/src/localization/locales/de-DE/ComponentLocale.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createComponentStrings } from '../utils';
+import type { ComponentLocale } from '../..';
+import de_DE from './strings.json';
+
+/**
+ * Locale for German (Germany).
+ *
+ * @public
+ */
+export const COMPONENT_LOCALE_DE_DE: ComponentLocale = { strings: createComponentStrings(de_DE) };

packages/react-components/src/localization/locales/en-GB/ComponentLocale.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createComponentStrings } from '../utils';
+import type { ComponentLocale } from '../..';
+import en_GB from './strings.json';
+
+/**
+ * Locale for English (GB).
+ *
+ * @public
+ */
+export const COMPONENT_LOCALE_EN_GB: ComponentLocale = { strings: createComponentStrings(en_GB) };

packages/react-components/src/localization/locales/es-ES/ComponentLocale.tsx

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { createComponentStrings } from '../utils';
+import type { ComponentLocale } from '../..';
+import es_ES from './strings.json';
+
+/**
+ * Locale for Spanish (Spain).
+ *
+ * @public
+ */
+export const COMPONENT_LOCALE_ES_ES: ComponentLocale = { strings: createComponentStrings(es_ES) };