sdkPegaComponentMap as argument instead of import

packages/react-sdk-components/src/bridge/helpers/sdk_component_map.ts

@@ -1,8 +1,8 @@
+import type {ComponentType} from 'react';
+
 // Helper singleton class to assist with loading and
 //  accessing the SDK components
 // import localSdkComponentMap from '../../sdk-local-component-map';
-import pegaSdkComponentMap from '../../sdk-pega-component-map';
-
 // Statically load all "local" components
 
 // Create a singleton for this class (with async loading of components map file) and export it
@@ -17,6 +17,8 @@ interface ISdkComponentMap {
   pegaProvidedComponentMap: Object
 }
 
+type PegaSdkComponentMap = Record<string, ComponentType<any>>;
+
 class ComponentMap {
   sdkComponentMap: ISdkComponentMap;            // Top level object
   isComponentMapLoaded: boolean;
@@ -43,7 +45,7 @@ class ComponentMap {
    * Asynchronous initialization of the config file contents.
    * @returns Promise of config file fetch
    */
-   async readSdkComponentMap(inLocalSdkComponentMap = {}) {
+   async readSdkComponentMap(inLocalSdkComponentMap = {}, pegaSdkComponentMap: PegaSdkComponentMap = {}) {
     // debugger;
     if( Object.keys(this.sdkComponentMap.localComponentMap).length === 0 && Object.keys(this.sdkComponentMap.pegaProvidedComponentMap).length === 0) {
 
@@ -126,20 +128,20 @@ export function getComponentFromMap(inComponentName: string): any {
 
 // Implement Factory function to allow async load
 //  See https://stackoverflow.com/questions/49905178/asynchronous-operations-in-constructor/49906064#49906064 for inspiration
-async function createSdkComponentMap(inLocalComponentMap = {}) {
+async function createSdkComponentMap(inLocalComponentMap = {}, pegaSdkComponentMap: PegaSdkComponentMap = {}) {
   // Note that our initialize function returns a promise...
   const singleton = new ComponentMap();
   await singleton.readSdkComponentMap(inLocalComponentMap);
   return singleton;
 }
 
 // Initialize exported SdkComponentMap structure
-export async function getSdkComponentMap(inLocalComponentMap = {}) {
+export async function getSdkComponentMap(inLocalComponentMap = {}, pegaSdkComponentMap: PegaSdkComponentMap = {}) {
   return new Promise( (resolve) => {
     let idNextCheck;
     if( !SdkComponentMap && !SdkComponentMapCreateInProgress ) {
       SdkComponentMapCreateInProgress = true;
-      createSdkComponentMap(inLocalComponentMap).then( theComponentMap => {
+      createSdkComponentMap(inLocalComponentMap, pegaSdkComponentMap).then( theComponentMap => {
         // debugger;
         // Key initialization of SdkComponentMap
         SdkComponentMap = theComponentMap;

packages/react-sdk-components/src/samples/Embedded/EmbeddedTopLevel/index.tsx

@@ -14,6 +14,7 @@ import EmbeddedSwatch from '../EmbeddedSwatch';
 import { compareSdkPCoreVersions } from '../../../components/helpers/versionHelpers';
 import { getSdkConfig } from '../../../components/helpers/config_access';
 
+import * as sdkPegaComponentMap from '../../../sdk-pega-component-map';
 import { getSdkComponentMap } from '../../../bridge/helpers/sdk_component_map';
 import localSdkComponentMap from '../../../../sdk-local-component-map';
 
@@ -381,7 +382,7 @@ export default function EmbeddedTopLevel() {
 
       // Initialize the SdkComponentMap (local and pega-provided)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-      getSdkComponentMap(localSdkComponentMap).then( (theComponentMap: any) => {
+      getSdkComponentMap(localSdkComponentMap, sdkPegaComponentMap).then( (theComponentMap: any) => {
         // eslint-disable-next-line no-console
         console.log(`SdkComponentMap initialized`);
 

packages/react-sdk-components/src/samples/FullPortal/index.tsx

@@ -10,6 +10,7 @@ import { compareSdkPCoreVersions } from '../../components/helpers/versionHelpers
 import { loginIfNecessary, getAvailablePortals } from '../../components/helpers/authManager';
 import InvalidPortal from './InvalidPortal';
 
+import * as sdkPegaComponentMap from '../../sdk-pega-component-map';
 import { getSdkComponentMap } from '../../bridge/helpers/sdk_component_map';
 import localSdkComponentMap from '../../../sdk-local-component-map';
 
@@ -134,7 +135,7 @@ export default function FullPortal() {
 
       // Initialize the SdkComponentMap (local and pega-provided)
       // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
-      getSdkComponentMap(localSdkComponentMap).then((theComponentMap: any) => {
+      getSdkComponentMap(localSdkComponentMap, sdkPegaComponentMap).then((theComponentMap: any) => {
         // eslint-disable-next-line no-console
         console.log(`SdkComponentMap initialized`);
 

packages/react-sdk-components/src/sdk-pega-component-map.js

@@ -113,107 +113,107 @@ import WssQuickCreate from './components/designSystemExtension/WssQuickCreate';
 //  'Todo' is what's in the metadata, not ToDo
 //  Also, note that "Checkbox" component is named/exported as CheckboxComponent
 
-const pegaSdkComponentMap = {
-  'ActionButtons': ActionButtons,
-  'ActionButtonsForFileUtil': ActionButtonsForFileUtil,
-  'AlertBanner': AlertBanner,
-  'AppAnnouncement': AppAnnouncement,
-  'AppShell': AppShell,
-  'Assignment': Assignment,
-  'AssignmentCard': AssignmentCard,
-  'Attachment': Attachment,
-  'AutoComplete': AutoComplete,
-  'Banner': Banner,
-  'BannerPage': BannerPage,
-  'CancelAlert': CancelAlert,
-  'CaseHistory': CaseHistory,
-  'CaseSummary': CaseSummary,
-  'CaseSummaryFields': CaseSummaryFields,
-  'CaseView': CaseView,
-  'CaseViewActionsMenu': CaseViewActionsMenu,
-  'Checkbox': Checkbox,
-  'Confirmation': Confirmation,
-  'Currency': Currency,
-  'DashboardFilter': DashboardFilter,
-  'DataReference': DataReference,
-  'Date': Date,
-  'DateTime': DateTime,
-  'Decimal': Decimal,
-  'DefaultForm': DefaultForm,
-  'DeferLoad': DeferLoad,
-  'Details': Details,
-  'DetailsSubTabs': DetailsSubTabs,
-  'DetailsThreeColumn': DetailsThreeColumn,
-  'DetailsTwoColumn': DetailsTwoColumn,
-  'Dropdown': Dropdown,
-  'DynamicTabs': DynamicTabs,
-  'Email': Email,
-  'ErrorBoundary': ErrorBoundary,
-  'FieldGroup': FieldGroup,
-  'FieldGroupList': FieldGroupList,
-  'FieldGroupTemplate': FieldGroupTemplate,
-  'FieldValueList': FieldValueList,
-  'FileUtility': FileUtility,
-  'FlowContainer': FlowContainer,
-  'Followers': Followers,
-  'InlineDashboard': InlineDashboard,
-  'InlineDashboardPage': InlineDashboardPage,
-  'Integer': Integer,
-  'LeftAlignVerticalTabs': LeftAlignVerticalTabs,
-  'ListPage': ListPage,
-  'ListView': ListView,
-  'ModalViewContainer': ModalViewContainer,
-  'MultiReferenceReadOnly': MultiReferenceReadOnly,
-  'MultiStep': MultiStep,
-  'NarrowWide': NarrowWide,
-  'NarrowWideDetails': NarrowWideDetails,
-  'NarrowWideForm': NarrowWideForm,
-  'NarrowWidePage': NarrowWidePage,
-  'NavBar': NavBar,
-  'OneColumn': OneColumn,
-  'OneColumnPage': OneColumnPage,
-  'OneColumnTab': OneColumnTab,
-  'Operator': Operator,
-  'Percentage': Percentage,
-  'Phone': Phone,
-  'PromotedFilters': PromotedFilters,
-  'Pulse': Pulse,
-  'QuickCreate': QuickCreate,
-  'reference': Reference,   // See note about about non-standard capitalization
-  'RadioButtons': RadioButtons,
-  'Region': Region,
-  'RichText': RichText,
-  'RichTextEditor': RichTextEditor,
-  'RootContainer': RootContainer,
-  'ScalarList': ScalarList,
-  'SemanticLink': SemanticLink,
-  'SimpleTable': SimpleTable,
-  'SimpleTableManual': SimpleTableManual,
-  'SimpleTableSelect': SimpleTableSelect,
-  'SingleReferenceReadOnly': SingleReferenceReadOnly,
-  'Stages': Stages,
-  'SubTabs': SubTabs,
-  'SummaryItem': SummaryItem,
-  'SummaryList': SummaryList,
-  'TextArea': TextArea,
-  'TextContent': TextContent,
-  'TextInput': TextInput,
-  'Time': Time,
-  'Todo': ToDo,   // See note about about non-standard capitalization
-  'TwoColumn': TwoColumn,
-  'TwoColumnPage': TwoColumnPage,
-  'TwoColumnTab': TwoColumnTab,
-  'URL': URL,
-  'UserReference': UserReference,
-  'VerticalTabs': VerticalTabs,
-  'View': View,
-  'ViewContainer': ViewContainer,
-  'WideNarrow': WideNarrow,
-  'WideNarrowDetails': WideNarrowDetails,
-  'WideNarrowForm': WideNarrowForm,
-  'WideNarrowPage': WideNarrowPage,
-  'WssNavBar': WssNavBar,
-  'WssQuickCreate': WssQuickCreate
-};
-
-export default pegaSdkComponentMap;
+// Export without wrapping in object so individual components can be imported
+// separately and allow tree-shaking, but still allow importing * to get a 'map' object
+export {
+  ActionButtons,
+  ActionButtonsForFileUtil,
+  AlertBanner,
+  AppAnnouncement,
+  AppShell,
+  Assignment,
+  AssignmentCard,
+  Attachment,
+  AutoComplete,
+  Banner,
+  BannerPage,
+  CancelAlert,
+  CaseHistory,
+  CaseSummary,
+  CaseSummaryFields,
+  CaseView,
+  CaseViewActionsMenu,
+  Checkbox,
+  Confirmation,
+  Currency,
+  DashboardFilter,
+  DataReference,
+  Date,
+  DateTime,
+  Decimal,
+  DefaultForm,
+  DeferLoad,
+  Details,
+  DetailsSubTabs,
+  DetailsThreeColumn,
+  DetailsTwoColumn,
+  Dropdown,
+  DynamicTabs,
+  Email,
+  ErrorBoundary,
+  FieldGroup,
+  FieldGroupList,
+  FieldGroupTemplate,
+  FieldValueList,
+  FileUtility,
+  FlowContainer,
+  Followers,
+  InlineDashboard,
+  InlineDashboardPage,
+  Integer,
+  LeftAlignVerticalTabs,
+  ListPage,
+  ListView,
+  ModalViewContainer,
+  MultiReferenceReadOnly,
+  MultiStep,
+  NarrowWide,
+  NarrowWideDetails,
+  NarrowWideForm,
+  NarrowWidePage,
+  NavBar,
+  OneColumn,
+  OneColumnPage,
+  OneColumnTab,
+  Operator,
+  Percentage,
+  Phone,
+  PromotedFilters,
+  Pulse,
+  QuickCreate,
+  Reference as reference,   // See note about about non-standard capitalization
+  RadioButtons,
+  Region,
+  RichText,
+  RichTextEditor,
+  RootContainer,
+  ScalarList,
+  SemanticLink,
+  SimpleTable,
+  SimpleTableManual,
+  SimpleTableSelect,
+  SingleReferenceReadOnly,
+  Stages,
+  SubTabs,
+  SummaryItem,
+  SummaryList,
+  TextArea,
+  TextContent,
+  TextInput,
+  Time,
+  ToDo as Todo,   // See note about about non-standard capitalization
+  TwoColumn,
+  TwoColumnPage,
+  TwoColumnTab,
+  URL,
+  UserReference,
+  VerticalTabs,
+  View,
+  ViewContainer,
+  WideNarrow,
+  WideNarrowDetails,
+  WideNarrowForm,
+  WideNarrowPage,
+  WssNavBar,
+  WssQuickCreate
+};