From 31b876c3b615e462e2b7d3257c30eecfc2fee650 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Mon, 23 Oct 2023 21:06:36 +0000
Subject: [PATCH] making registration of custom elements for providers use a
 register function and setting up a side effect free path for importing the
 provider class

---
 packages/mgt-components/README.md              | 18 +++++++++---------
 .../src/components/mgt-agenda/mgt-agenda.ts    |  2 +-
 .../src/components/mgt-contact/mgt-contact.ts  |  2 +-
 .../components/mgt-file-list/mgt-file-list.ts  |  2 +-
 .../mgt-file-upload/mgt-file-upload.ts         |  2 +-
 .../src/components/mgt-file/mgt-file.ts        |  2 +-
 .../src/components/mgt-get/mgt-get.ts          |  2 +-
 .../src/components/mgt-login/mgt-login.ts      |  2 +-
 .../components/mgt-messages/mgt-messages.ts    |  2 +-
 .../mgt-organization/mgt-organization.ts       |  2 +-
 .../mgt-people-picker/mgt-people-picker.ts     |  2 +-
 .../src/components/mgt-people/mgt-people.ts    |  2 +-
 .../mgt-person-card/mgt-person-card.ts         |  2 +-
 .../src/components/mgt-person/mgt-person.ts    |  2 +-
 .../src/components/mgt-picker/mgt-picker.ts    |  2 +-
 .../src/components/mgt-profile/mgt-profile.ts  |  2 +-
 .../src/components/mgt-tasks/mgt-tasks.ts      |  2 +-
 .../mgt-taxonomy-picker/mgt-taxonomy-picker.ts |  2 +-
 .../mgt-teams-channel-picker.ts                |  2 +-
 .../mgt-theme-toggle/mgt-theme-toggle.ts       |  2 +-
 .../src/components/mgt-todo/mgt-todo.ts        |  2 +-
 .../preview/mgt-search-box/mgt-search-box.ts   |  2 +-
 .../mgt-search-results/mgt-search-results.ts   |  2 +-
 .../mgt-arrow-options/mgt-arrow-options.ts     |  2 +-
 .../mgt-dot-options/mgt-dot-options.ts         |  2 +-
 .../sub-components/mgt-flyout/mgt-flyout.ts    |  2 +-
 .../sub-components/mgt-spinner/mgt-spinner.ts  |  2 +-
 packages/mgt-element/README.md                 |  3 ++-
 packages/mgt-element/src/index.ts              |  2 ++
 .../mgt-element/src/providers/IProvider.ts     |  2 +-
 packages/mgt-element/src/utils/Batch.ts        |  2 +-
 .../src/utils/{index.ts => delay.ts}           |  0
 .../src/utils}/registerComponent.ts            |  2 +-
 packages/providers/mgt-mock-provider/README.md |  2 +-
 .../providers/mgt-mock-provider/package.json   |  5 ++++-
 .../providers/mgt-mock-provider/src/index.ts   |  3 +++
 .../mgt-mock-provider/src/mgt-mock-provider.ts |  8 ++++++--
 .../providers/mgt-msal2-provider/README.md     |  6 +++---
 .../providers/mgt-msal2-provider/package.json  |  5 ++++-
 .../mgt-msal2-provider/src/exports.ts          |  2 ++
 .../providers/mgt-msal2-provider/src/index.ts  |  6 +++---
 .../src/mgt-msal2-provider.ts                  | 10 +++++++---
 .../providers/mgt-proxy-provider/README.md     |  2 +-
 .../providers/mgt-proxy-provider/package.json  |  5 ++++-
 .../mgt-proxy-provider/src/exports.ts          |  2 ++
 .../providers/mgt-proxy-provider/src/index.ts  |  6 ++++--
 .../src/mgt-proxy-provider.ts                  |  9 ++++++---
 samples/react-contoso/src/index.tsx            |  2 +-
 48 files changed, 93 insertions(+), 61 deletions(-)
 rename packages/mgt-element/src/utils/{index.ts => delay.ts} (100%)
 rename packages/{mgt-components/src/components => mgt-element/src/utils}/registerComponent.ts (83%)
 create mode 100644 packages/providers/mgt-msal2-provider/src/exports.ts
 create mode 100644 packages/providers/mgt-proxy-provider/src/exports.ts

diff --git a/packages/mgt-components/README.md b/packages/mgt-components/README.md
index bd9d967e71..2ec0e8f38e 100644
--- a/packages/mgt-components/README.md
+++ b/packages/mgt-components/README.md
@@ -48,7 +48,7 @@ The components can be used on their own, but they are at their best when they ar
     ```html
     <script type="module">
       import {Providers} from '@microsoft/mgt-element';
-      import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
+      import {Msal2Provider} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
       // import the components
       import '@microsoft/mgt-components';
@@ -66,7 +66,7 @@ The components can be used on their own, but they are at their best when they ar
 
 By default importing anything from the root of the `@microsoft/mgt-components` package triggers a side effect causing the registration of all components as custom elements with the browser. If you are using a bundler that can perform "tree shaking" then there are two steps to ensure that your bundler can correctly determine which pieces of code to include in you bundle.
 
-- Use the `@microsoft/mgt-components/exports` path to import your dependencies. This code path has no side effects unlike the root path.
+- Use the `@microsoft/mgt-components/dist/es6/exports` path to import your dependencies. This code path has no side effects unlike the root path.
 - Explicitly register each component that will be used in your application using the appropriate function. For each component there is a registration function `registerMgt{Name}Component()`, e.g. `registerMgtLoginComponent()`.
 
 In cases where a component has a dependency on other components these are all registered in the registration function. For example, the mgt-login component uses an mgt-person internally, so `registerMgtLoginComponent()` calls `registerMgtPersonComponent()`.`
@@ -84,13 +84,13 @@ This removes the registration of a component from being a side effect of importi
 ```html
 <script type="module">
   import {Providers} from '@microsoft/mgt-element';
-  import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
+  import {Msal2Provider} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
   // import the registration functions
   import {
     registerMgtLoginComponent,
     registerMgtAgendaComponent
-  } from '@microsoft/mgt-components';
+  } from '@microsoft/mgt-components/dist/es6/exports';
 
   // register the components
   registerMgtLoginComponent();
@@ -121,11 +121,11 @@ The earlier example can be updated to use the disambiguation feature as follows:
 ```html
 <script type="module">
   import { Providers, customElementHelper } from '@microsoft/mgt-element';
-  import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+  import { Msal2Provider } from '@microsoft/mgt-msal2-provider/dist/es6/exports';
   import {
     registerMgtLoginComponent,
     registerMgtAgendaComponent
-  } from '@microsoft/mgt-components';
+  } from '@microsoft/mgt-components/dist/es6/exports';
 
   // configure disambiguation
   customElementHelper.withDisambiguation('contoso');
@@ -155,7 +155,7 @@ The earlier example can be updated to use the disambiguation feature as follows:
 ```html
 <script type="module">
   import { Providers, customElementHelper } from '@microsoft/mgt-element';
-  import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+  import { Msal2Provider } from '@microsoft/mgt-msal2-provider/dist/es6/exports';
   // configure disambiguation
   customElementHelper.withDisambiguation('contoso');
 
@@ -266,7 +266,7 @@ When using an `import` statement the import statement is hoisted and executed be
 ```typescript
 // static import via a statement
 import { Providers, customElementHelper } from '@microsoft/mgt-element';
-import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+import { Msal2Provider } from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
 customElementHelper.withDisambiguation('contoso');
 Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
@@ -285,7 +285,7 @@ import('@microsoft/mgt-components').then(() => {
 ```typescript
 // static import via a statement
 import { Provider } from '@microsoft/mgt-element';
-import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+import { Msal2Provider } from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 import '@microsoft/mgt-components';
 
 Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
diff --git a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
index c7ce45f629..cdbd0f4a35 100644
--- a/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
+++ b/packages/mgt-components/src/components/mgt-agenda/mgt-agenda.ts
@@ -18,7 +18,7 @@ import { MgtPeople, registerMgtPeopleComponent } from '../mgt-people/mgt-people'
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { fluentCard } from '@fluentui/web-components';
 import { classMap } from 'lit/directives/class-map.js';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * Web Component which represents events in a user or group calendar.
diff --git a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
index 208a67f83c..8a845c45cc 100644
--- a/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
+++ b/packages/mgt-components/src/components/mgt-contact/mgt-contact.ts
@@ -15,7 +15,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
 import { styles } from './mgt-contact-css';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * Represents a contact part and its metadata
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
index 35c249e3fe..e03adb98e1 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-list.ts
@@ -47,7 +47,7 @@ import { MgtFileUploadConfig, registerMgtFileUploadComponent } from './mgt-file-
 import { fluentProgressRing } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { CardSection } from '../BasePersonCardSection';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtFileListComponent = () => {
   registerFluentComponents(fluentProgressRing);
diff --git a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
index 43abf5c334..e6991b64d5 100644
--- a/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
+++ b/packages/mgt-components/src/components/mgt-file-list/mgt-file-upload/mgt-file-upload.ts
@@ -26,7 +26,7 @@ import { getSvg, SvgIcon } from '../../../utils/SvgHelper';
 import { formatBytes } from '../../../utils/Utils';
 import { styles } from './mgt-file-upload-css';
 import { strings } from './strings';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtFileComponent } from '../../mgt-file/mgt-file';
 
 /**
diff --git a/packages/mgt-components/src/components/mgt-file/mgt-file.ts b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
index dffb232688..2816844257 100644
--- a/packages/mgt-components/src/components/mgt-file/mgt-file.ts
+++ b/packages/mgt-components/src/components/mgt-file/mgt-file.ts
@@ -31,7 +31,7 @@ import { OfficeGraphInsightString, ViewType } from '../../graph/types';
 import { getFileTypeIconUriByExtension } from '../../styles/fluent-icons';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { strings } from './strings';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtFileComponent = () => registerComponent('file', MgtFile);
 
diff --git a/packages/mgt-components/src/components/mgt-get/mgt-get.ts b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
index 2b66473942..8678115f1d 100644
--- a/packages/mgt-components/src/components/mgt-get/mgt-get.ts
+++ b/packages/mgt-components/src/components/mgt-get/mgt-get.ts
@@ -25,7 +25,7 @@ import { schemas } from '../../graph/cacheStores';
 import { CacheResponse } from '../CacheResponse';
 import { Entity } from '@microsoft/microsoft-graph-types';
 import { GraphRequest } from '@microsoft/microsoft-graph-client';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * Simple holder type for an image
diff --git a/packages/mgt-components/src/components/mgt-login/mgt-login.ts b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
index 1c23f8b785..c16021076d 100644
--- a/packages/mgt-components/src/components/mgt-login/mgt-login.ts
+++ b/packages/mgt-components/src/components/mgt-login/mgt-login.ts
@@ -26,7 +26,7 @@ import '../../styles/style-helper';
 
 import { fluentListbox, fluentProgressRing, fluentButton, fluentCard } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * loginViewType describes the enum strings that can be passed in to determine
diff --git a/packages/mgt-components/src/components/mgt-messages/mgt-messages.ts b/packages/mgt-components/src/components/mgt-messages/mgt-messages.ts
index 3dc9fc2d90..733acd2d1d 100644
--- a/packages/mgt-components/src/components/mgt-messages/mgt-messages.ts
+++ b/packages/mgt-components/src/components/mgt-messages/mgt-messages.ts
@@ -13,7 +13,7 @@ import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { getRelativeDisplayDate } from '../../utils/Utils';
 import { styles } from './mgt-messages-css';
 import { strings } from './strings';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtMessagesComponent = () => registerComponent('messages', MgtMessages);
 
diff --git a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
index ba247dc713..751ff8dec6 100644
--- a/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
+++ b/packages/mgt-components/src/components/mgt-organization/mgt-organization.ts
@@ -15,7 +15,7 @@ import { styles } from './mgt-organization-css';
 import { strings } from './strings';
 import { ViewType } from '../../graph/types';
 import { mgtHtml } from '@microsoft/mgt-element';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtPersonComponent } from '../mgt-person/mgt-person';
 
 export const registerMgtOrganizationComponent = () => {
diff --git a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
index 12c300986c..d585cff0b2 100644
--- a/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
+++ b/packages/mgt-components/src/components/mgt-people-picker/mgt-people-picker.ts
@@ -45,7 +45,7 @@ import { fluentTextField, fluentCard } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { strings } from './strings';
 import { Person, User } from '@microsoft/microsoft-graph-types';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtSpinnerComponent } from '../sub-components/mgt-spinner/mgt-spinner';
 import { isGraphError } from '../../graph/isGraphError';
 
diff --git a/packages/mgt-components/src/components/mgt-people/mgt-people.ts b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
index ea88cedc84..a47ec9720a 100644
--- a/packages/mgt-components/src/components/mgt-people/mgt-people.ts
+++ b/packages/mgt-components/src/components/mgt-people/mgt-people.ts
@@ -18,7 +18,7 @@ import '../../styles/style-helper';
 import { PersonCardInteraction } from './../PersonCardInteraction';
 import { styles } from './mgt-people-css';
 import { MgtPerson, registerMgtPersonComponent } from '../mgt-person/mgt-person';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export { PersonCardInteraction } from './../PersonCardInteraction';
 
diff --git a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
index 06016213ab..31c46ef6cc 100644
--- a/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
+++ b/packages/mgt-components/src/components/mgt-person-card/mgt-person-card.ts
@@ -51,7 +51,7 @@ import {
 } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { BasePersonCardSection, CardSection } from '../BasePersonCardSection';
-import { buildComponentName, registerComponent } from '../registerComponent';
+import { buildComponentName, registerComponent } from '@microsoft/mgt-element';
 import { registerMgtSpinnerComponent } from '../sub-components/mgt-spinner/mgt-spinner';
 import { IHistoryClearer, IExpandable } from './types';
 
diff --git a/packages/mgt-components/src/components/mgt-person/mgt-person.ts b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
index 0751dbe5fd..afd078b99f 100644
--- a/packages/mgt-components/src/components/mgt-person/mgt-person.ts
+++ b/packages/mgt-components/src/components/mgt-person/mgt-person.ts
@@ -26,7 +26,7 @@ import { MgtPersonConfig, PersonViewType, avatarType } from './mgt-person-types'
 import { strings } from './strings';
 import { isUser, isContact } from '../../graph/entityType';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { buildComponentName, registerComponent } from '../registerComponent';
+import { buildComponentName, registerComponent } from '@microsoft/mgt-element';
 import { IExpandable, IHistoryClearer } from '../mgt-person-card/types';
 
 export { PersonCardInteraction } from '../PersonCardInteraction';
diff --git a/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts b/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
index ebf6a6b196..d1e4e531e4 100644
--- a/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
+++ b/packages/mgt-components/src/components/mgt-picker/mgt-picker.ts
@@ -16,7 +16,7 @@ import '../../styles/style-helper';
 import { Entity } from '@microsoft/microsoft-graph-types';
 import { DataChangedDetail, registerMgtGetComponent } from '../mgt-get/mgt-get';
 import { styles } from './mgt-picker-css';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtPickerComponent = () => {
   registerFluentComponents(fluentCombobox, fluentOption);
diff --git a/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts b/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
index 3fc71a23bf..40cda2b6f3 100644
--- a/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
+++ b/packages/mgt-components/src/components/mgt-profile/mgt-profile.ts
@@ -17,7 +17,7 @@ import { BasePersonCardSection } from '../BasePersonCardSection';
 import { getSvg, SvgIcon } from '../../utils/SvgHelper';
 import { styles } from './mgt-profile-css';
 import { strings } from './strings';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtProfileComponent = () => registerComponent('profile', MgtProfile);
 
diff --git a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
index d885c396b6..b4ed549121 100644
--- a/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
+++ b/packages/mgt-components/src/components/mgt-tasks/mgt-tasks.ts
@@ -36,7 +36,7 @@ import {
   fluentCheckbox,
   fluentSkeleton
 } from '@fluentui/web-components';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtDotOptionsComponent } from '../sub-components/mgt-dot-options/mgt-dot-options';
 import { registerMgtArrowOptionsComponent } from '../sub-components/mgt-arrow-options/mgt-arrow-options';
 
diff --git a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
index db25b99cf4..6d34dd60a5 100644
--- a/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
+++ b/packages/mgt-components/src/components/mgt-taxonomy-picker/mgt-taxonomy-picker.ts
@@ -16,7 +16,7 @@ import { registerFluentComponents } from '../../utils/FluentComponents';
 import '../../styles/style-helper';
 import { styles } from './mgt-taxonomy-picker-css';
 import { DataChangedDetail, registerMgtGetComponent } from '../mgt-get/mgt-get';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtSpinnerComponent } from '../sub-components/mgt-spinner/mgt-spinner';
 
 export const registerMgtTaxonomyPickerComponent = () => {
diff --git a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
index b778539bd4..1342652a5a 100644
--- a/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
+++ b/packages/mgt-components/src/components/mgt-teams-channel-picker/mgt-teams-channel-picker.ts
@@ -34,7 +34,7 @@ import {
   fluentCard,
   fluentTextField
 } from '@fluentui/web-components';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtSpinnerComponent } from '../sub-components/mgt-spinner/mgt-spinner';
 
 /**
diff --git a/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts b/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
index 8138a822fc..87e99a0c1d 100644
--- a/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
+++ b/packages/mgt-components/src/components/mgt-theme-toggle/mgt-theme-toggle.ts
@@ -12,7 +12,7 @@ import { fluentSwitch } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../utils/FluentComponents';
 import { applyTheme } from '../../styles/theme-manager';
 import { strings } from './strings';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtThemeToggleComponent = () => {
   registerFluentComponents(fluentSwitch);
diff --git a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
index 57e9be1286..a132e55043 100644
--- a/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
+++ b/packages/mgt-components/src/components/mgt-todo/mgt-todo.ts
@@ -33,7 +33,7 @@ import { isElementDark } from '../../utils/isDark';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { TodoTaskList, TodoTask, TaskStatus } from '@microsoft/microsoft-graph-types';
-import { registerComponent } from '../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtPickerComponent } from '../mgt-picker/mgt-picker';
 
 /**
diff --git a/packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts b/packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts
index 1a84402f53..b599d1853c 100644
--- a/packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts
+++ b/packages/mgt-components/src/components/preview/mgt-search-box/mgt-search-box.ts
@@ -13,7 +13,7 @@ import { registerFluentComponents } from '../../../utils/FluentComponents';
 import { strings } from './strings';
 import { styles } from './mgt-search-box-css';
 import { debounce } from '../../../utils/Utils';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtSearchBoxComponent = () => {
   registerFluentComponents(fluentSearch);
diff --git a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts
index 3c83ec359a..f5916bc393 100644
--- a/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts
+++ b/packages/mgt-components/src/components/preview/mgt-search-results/mgt-search-results.ts
@@ -51,7 +51,7 @@ import { getSvg, SvgIcon } from '../../../utils/SvgHelper';
 import { fluentSkeleton, fluentButton, fluentTooltip, fluentDivider } from '@fluentui/web-components';
 import { registerFluentComponents } from '../../../utils/FluentComponents';
 import { CacheResponse } from '../../CacheResponse';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 import { registerMgtFileComponent } from '../../mgt-file/mgt-file';
 import { registerMgtPersonComponent } from '../../mgt-person/mgt-person';
 
diff --git a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.ts b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.ts
index d10f61a89c..11ac743906 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.ts
+++ b/packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.ts
@@ -12,7 +12,7 @@ import { MgtBaseComponent } from '@microsoft/mgt-element';
 import { styles } from './mgt-arrow-options-css';
 import { registerFluentComponents } from '../../../utils/FluentComponents';
 import { fluentMenu, fluentMenuItem, fluentButton } from '@fluentui/web-components';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /*
   Ok, the name here deserves a bit of explanation,
diff --git a/packages/mgt-components/src/components/sub-components/mgt-dot-options/mgt-dot-options.ts b/packages/mgt-components/src/components/sub-components/mgt-dot-options/mgt-dot-options.ts
index 5008cef531..6ffa21a5cc 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-dot-options/mgt-dot-options.ts
+++ b/packages/mgt-components/src/components/sub-components/mgt-dot-options/mgt-dot-options.ts
@@ -13,7 +13,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { strings } from './strings';
 import { registerFluentComponents } from '../../../utils/FluentComponents';
 import { styles } from './mgt-dot-options-css';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 /**
  * Defines the event functions passed to the option item.
diff --git a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
index 815e50b553..1dc936e82a 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
+++ b/packages/mgt-components/src/components/sub-components/mgt-flyout/mgt-flyout.ts
@@ -11,7 +11,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { getSegmentAwareWindow, isWindowSegmentAware, IWindowSegment } from '../../../utils/WindowSegmentHelpers';
 import { styles } from './mgt-flyout-css';
 import { MgtBaseComponent } from '@microsoft/mgt-element/';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtFlyoutComponent = () => registerComponent('flyout', MgtFlyout);
 
diff --git a/packages/mgt-components/src/components/sub-components/mgt-spinner/mgt-spinner.ts b/packages/mgt-components/src/components/sub-components/mgt-spinner/mgt-spinner.ts
index 1d31d9dfff..ca31c4d7be 100644
--- a/packages/mgt-components/src/components/sub-components/mgt-spinner/mgt-spinner.ts
+++ b/packages/mgt-components/src/components/sub-components/mgt-spinner/mgt-spinner.ts
@@ -8,7 +8,7 @@
 import { html } from 'lit';
 import { MgtBaseComponent } from '@microsoft/mgt-element';
 import { styles } from './mgt-spinner-css';
-import { registerComponent } from '../../registerComponent';
+import { registerComponent } from '@microsoft/mgt-element';
 
 export const registerMgtSpinnerComponent = () => registerComponent('spinner', MgtSpinner);
 
diff --git a/packages/mgt-element/README.md b/packages/mgt-element/README.md
index c90d9b643d..ddd5cdbf9a 100644
--- a/packages/mgt-element/README.md
+++ b/packages/mgt-element/README.md
@@ -24,7 +24,8 @@ This example illustrates how to instantiate a new provider (MsalProvider in this
 
     ```ts
     import {Providers} from '@microsoft/mgt-element';
-    import {Msal2Provider} from '@microsoft/mgt-msal2-provider';
+    // importing via the export path will exclude the custom element for <mgt-msal2-proivder> from the final bundle
+    import {Msal2Provider} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
     // initialize the auth provider globally
     Providers.globalProvider = new Msal2Provider({clientId: 'clientId'});
diff --git a/packages/mgt-element/src/index.ts b/packages/mgt-element/src/index.ts
index a69f9f30ce..2f89f7612b 100644
--- a/packages/mgt-element/src/index.ts
+++ b/packages/mgt-element/src/index.ts
@@ -36,6 +36,8 @@ export * from './utils/GraphPageIterator';
 export * from './utils/LocalizationHelper';
 export * from './utils/mgtHtml';
 export * from './utils/CustomElement';
+export * from './utils/registerComponent';
+
 export { PACKAGE_VERSION } from './utils/version';
 
 export * from './CollectionResponse';
diff --git a/packages/mgt-element/src/providers/IProvider.ts b/packages/mgt-element/src/providers/IProvider.ts
index 7645dc17c4..275e78aec5 100644
--- a/packages/mgt-element/src/providers/IProvider.ts
+++ b/packages/mgt-element/src/providers/IProvider.ts
@@ -11,7 +11,7 @@ import { GraphEndpoint, IGraph, MICROSOFT_GRAPH_DEFAULT_ENDPOINT } from '../IGra
 import { EventDispatcher, EventHandler } from '../utils/EventDispatcher';
 
 /**
- * Provider Type to be extended for implmenting new providers
+ * Provider Type to be extended for implementing new providers
  *
  * @export
  * @abstract
diff --git a/packages/mgt-element/src/utils/Batch.ts b/packages/mgt-element/src/utils/Batch.ts
index e541c9ac04..37f326b090 100644
--- a/packages/mgt-element/src/utils/Batch.ts
+++ b/packages/mgt-element/src/utils/Batch.ts
@@ -7,7 +7,7 @@
 
 import { BatchResponse, BatchResponseBody, IBatch } from '../IBatch';
 import { BatchRequestContent, MiddlewareOptions } from '@microsoft/microsoft-graph-client';
-import { delay } from '../utils';
+import { delay } from './delay';
 import { prepScopes } from './prepScopes';
 import { IGraph } from '../IGraph';
 import { BatchRequest } from './BatchRequest';
diff --git a/packages/mgt-element/src/utils/index.ts b/packages/mgt-element/src/utils/delay.ts
similarity index 100%
rename from packages/mgt-element/src/utils/index.ts
rename to packages/mgt-element/src/utils/delay.ts
diff --git a/packages/mgt-components/src/components/registerComponent.ts b/packages/mgt-element/src/utils/registerComponent.ts
similarity index 83%
rename from packages/mgt-components/src/components/registerComponent.ts
rename to packages/mgt-element/src/utils/registerComponent.ts
index 24eab77989..f0327a25ef 100644
--- a/packages/mgt-components/src/components/registerComponent.ts
+++ b/packages/mgt-element/src/utils/registerComponent.ts
@@ -1,4 +1,4 @@
-import { customElementHelper } from '@microsoft/mgt-element';
+import { customElementHelper } from '../components/customElementHelper';
 
 export const buildComponentName = (tagBase: string) => `${customElementHelper.prefix}-${tagBase}`;
 
diff --git a/packages/providers/mgt-mock-provider/README.md b/packages/providers/mgt-mock-provider/README.md
index 8f1cc8a4c0..3abb28b2c5 100644
--- a/packages/providers/mgt-mock-provider/README.md
+++ b/packages/providers/mgt-mock-provider/README.md
@@ -20,7 +20,7 @@ The `@microsoft/mgt-proxy-provider` package exposes the `ProxyProvider` class wh
 
     ```ts
     import {Providers} from '@microsoft/mgt-element';
-    import {ProxyProvider} from '@microsoft/mgt-proxy-provider';
+    import {ProxyProvider} from '@microsoft/mgt-proxy-provider/exports';
 
     // initialize the auth provider globally
     Providers.globalProvider = new ProxyProvider("https://myurl.com/api/GraphProxy");
diff --git a/packages/providers/mgt-mock-provider/package.json b/packages/providers/mgt-mock-provider/package.json
index b335c60df4..bccf9cb573 100644
--- a/packages/providers/mgt-mock-provider/package.json
+++ b/packages/providers/mgt-mock-provider/package.json
@@ -37,7 +37,10 @@
     "lint": "eslint -c ../../../.eslintrc.js 'src/**/*.ts'",
     "postpack": "cpx *.tgz ../../../artifacts"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/es6/index.js",
+    "./src/index.ts"
+  ],
   "dependencies": {
     "@microsoft/mgt-element": "*"
   },
diff --git a/packages/providers/mgt-mock-provider/src/index.ts b/packages/providers/mgt-mock-provider/src/index.ts
index 01bc05e4b7..6e9e624037 100644
--- a/packages/providers/mgt-mock-provider/src/index.ts
+++ b/packages/providers/mgt-mock-provider/src/index.ts
@@ -4,5 +4,8 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+import { registerMgtMockProvider } from './mgt-mock-provider';
+
+registerMgtMockProvider();
 
 export * from './mgt-mock-provider';
diff --git a/packages/providers/mgt-mock-provider/src/mgt-mock-provider.ts b/packages/providers/mgt-mock-provider/src/mgt-mock-provider.ts
index 0736bb4e05..4c86d62b91 100644
--- a/packages/providers/mgt-mock-provider/src/mgt-mock-provider.ts
+++ b/packages/providers/mgt-mock-provider/src/mgt-mock-provider.ts
@@ -9,7 +9,12 @@ import { property } from 'lit/decorators.js';
 import { MgtBaseProvider } from '@microsoft/mgt-element';
 import { Providers } from '@microsoft/mgt-element';
 import { MockProvider } from '@microsoft/mgt-element';
-import { customElement } from '@microsoft/mgt-element';
+import { registerComponent } from '@microsoft/mgt-element';
+
+export const registerMgtMockProvider = () => {
+  registerComponent('mock-provider', MgtMockProvider);
+};
+
 /**
  * Sets global provider to a mock Provider
  *
@@ -17,7 +22,6 @@ import { customElement } from '@microsoft/mgt-element';
  * @class MgtMockProvider
  * @extends {LitElement}
  */
-@customElement('mock-provider')
 export class MgtMockProvider extends MgtBaseProvider {
   /**
    * A property to allow the developer to start the sample logged out if they desired.
diff --git a/packages/providers/mgt-msal2-provider/README.md b/packages/providers/mgt-msal2-provider/README.md
index 13adc5e3c8..4c5e10cbe3 100644
--- a/packages/providers/mgt-msal2-provider/README.md
+++ b/packages/providers/mgt-msal2-provider/README.md
@@ -19,7 +19,7 @@ The `@microsoft/mgt-msal2-provider` package exposes the `Msal2Provider` class wh
 
     ```ts
     import {Providers, LoginType} from '@microsoft/mgt-element';
-    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider';
+    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
     // initialize the auth provider globally
     Providers.globalProvider = new Msal2Provider({
@@ -44,7 +44,7 @@ The `@microsoft/mgt-msal2-provider` package exposes the `Msal2Provider` class wh
 
     ```ts
     import {Providers, LoginType} from '@microsoft/mgt-element';
-    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider';
+    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
     import {PublicClientApplication} from '@azure/msal-browser';
 
     // initialize the auth provider globally
@@ -96,7 +96,7 @@ The `@microsoft/mgt-msal2-provider` package exposes the `Msal2Provider` class wh
 
     ```ts
     import {Providers, LoginType} from '@microsoft/mgt-element';
-    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider';
+    import {Msal2Provider, PromptType} from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 
     // initialize the auth provider globally
     Providers.globalProvider = new Msal2Provider({
diff --git a/packages/providers/mgt-msal2-provider/package.json b/packages/providers/mgt-msal2-provider/package.json
index 31aa3b5371..add24c57ac 100644
--- a/packages/providers/mgt-msal2-provider/package.json
+++ b/packages/providers/mgt-msal2-provider/package.json
@@ -38,7 +38,10 @@
     "lint": "eslint -c ../../../.eslintrc.js 'src/**/*.ts'",
     "postpack": "cpx *.tgz ../../../artifacts"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/es6/index.js",
+    "./src/index.ts"
+  ],
   "dependencies": {
     "@azure/msal-browser": "^2.22.0",
     "@microsoft/mgt-element": "*",
diff --git a/packages/providers/mgt-msal2-provider/src/exports.ts b/packages/providers/mgt-msal2-provider/src/exports.ts
new file mode 100644
index 0000000000..9bc3a2de1e
--- /dev/null
+++ b/packages/providers/mgt-msal2-provider/src/exports.ts
@@ -0,0 +1,2 @@
+export * from './Msal2Provider';
+export * from './mgt-msal2-provider';
diff --git a/packages/providers/mgt-msal2-provider/src/index.ts b/packages/providers/mgt-msal2-provider/src/index.ts
index eeae918924..7cd9a0f500 100644
--- a/packages/providers/mgt-msal2-provider/src/index.ts
+++ b/packages/providers/mgt-msal2-provider/src/index.ts
@@ -4,6 +4,6 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-
-export * from './Msal2Provider';
-export * from './mgt-msal2-provider';
+import { registerMgtMsal2Provider } from './mgt-msal2-provider';
+registerMgtMsal2Provider();
+export * from './exports';
diff --git a/packages/providers/mgt-msal2-provider/src/mgt-msal2-provider.ts b/packages/providers/mgt-msal2-provider/src/mgt-msal2-provider.ts
index a9071f0b14..88ba2f8dc6 100644
--- a/packages/providers/mgt-msal2-provider/src/mgt-msal2-provider.ts
+++ b/packages/providers/mgt-msal2-provider/src/mgt-msal2-provider.ts
@@ -6,8 +6,13 @@
  */
 
 import { property } from 'lit/decorators.js';
-import { Providers, LoginType, MgtBaseProvider, customElement } from '@microsoft/mgt-element';
+import { Providers, LoginType, MgtBaseProvider, registerComponent } from '@microsoft/mgt-element';
 import { Msal2Config, Msal2Provider, PromptType } from './Msal2Provider';
+
+export const registerMgtMsal2Provider = () => {
+  registerComponent('msal2-provider', MgtMsal2Provider);
+};
+
 /**
  * Authentication Library Provider for Microsoft personal accounts
  *
@@ -15,8 +20,7 @@ import { Msal2Config, Msal2Provider, PromptType } from './Msal2Provider';
  * @class MgtMsalProvider
  * @extends {MgtBaseProvider}
  */
-@customElement('msal2-provider')
-export class MgtMsal2Provider extends MgtBaseProvider {
+class MgtMsal2Provider extends MgtBaseProvider {
   /**
    * String alphanumerical value relation to a specific user
    *
diff --git a/packages/providers/mgt-proxy-provider/README.md b/packages/providers/mgt-proxy-provider/README.md
index 522a77ba5d..24429abd18 100644
--- a/packages/providers/mgt-proxy-provider/README.md
+++ b/packages/providers/mgt-proxy-provider/README.md
@@ -20,7 +20,7 @@ The `@microsoft/mgt-proxy-provider` package exposes the `ProxyProvider` class wh
 
     ```ts
     import {Providers} from '@microsoft/mgt-element';
-    import {ProxyProvider} from '@microsoft/mgt-proxy-provider';
+    import {ProxyProvider} from '@microsoft/mgt-proxy-provider/exports';
 
     // initialize the auth provider globally
     Providers.globalProvider = new ProxyProvider("https://myurl.com/api/GraphProxy");
diff --git a/packages/providers/mgt-proxy-provider/package.json b/packages/providers/mgt-proxy-provider/package.json
index 9bb4e7def4..a7513a8d50 100644
--- a/packages/providers/mgt-proxy-provider/package.json
+++ b/packages/providers/mgt-proxy-provider/package.json
@@ -36,7 +36,10 @@
     "lint": "eslint -c ../../../.eslintrc.js 'src/**/*.ts'",
     "postpack": "cpx *.tgz ../../../artifacts"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "./dist/es6/index.js",
+    "./src/index.ts"
+  ],
   "dependencies": {
     "@microsoft/mgt-element": "*",
     "@microsoft/microsoft-graph-client": "3.0.2"
diff --git a/packages/providers/mgt-proxy-provider/src/exports.ts b/packages/providers/mgt-proxy-provider/src/exports.ts
new file mode 100644
index 0000000000..e597818a40
--- /dev/null
+++ b/packages/providers/mgt-proxy-provider/src/exports.ts
@@ -0,0 +1,2 @@
+export * from './mgt-proxy-provider';
+export * from './ProxyProvider';
diff --git a/packages/providers/mgt-proxy-provider/src/index.ts b/packages/providers/mgt-proxy-provider/src/index.ts
index 475ebbc856..542eb26fa2 100644
--- a/packages/providers/mgt-proxy-provider/src/index.ts
+++ b/packages/providers/mgt-proxy-provider/src/index.ts
@@ -4,6 +4,8 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
+import { registerMgtProxyProvider } from './mgt-proxy-provider';
 
-export * from './ProxyProvider';
-export * from './mgt-proxy-provider';
+registerMgtProxyProvider();
+
+export * from './exports';
diff --git a/packages/providers/mgt-proxy-provider/src/mgt-proxy-provider.ts b/packages/providers/mgt-proxy-provider/src/mgt-proxy-provider.ts
index b64d785428..f47d725557 100644
--- a/packages/providers/mgt-proxy-provider/src/mgt-proxy-provider.ts
+++ b/packages/providers/mgt-proxy-provider/src/mgt-proxy-provider.ts
@@ -6,9 +6,13 @@
  */
 
 import { property } from 'lit/decorators.js';
-import { Providers, MgtBaseProvider, customElement } from '@microsoft/mgt-element';
+import { Providers, MgtBaseProvider, registerComponent } from '@microsoft/mgt-element';
 import { ProxyProvider } from './ProxyProvider';
 
+export const registerMgtProxyProvider = () => {
+  registerComponent('proxy-provider', MgtProxyProvider);
+};
+
 /**
  * Authentication component for ProxyProvider
  *
@@ -16,8 +20,7 @@ import { ProxyProvider } from './ProxyProvider';
  * @class MgtProxyProvider
  * @extends {LitElement}
  */
-@customElement('proxy-provider')
-export class MgtProxyProvider extends MgtBaseProvider {
+class MgtProxyProvider extends MgtBaseProvider {
   /**
    * The base url to the proxy api
    *
diff --git a/samples/react-contoso/src/index.tsx b/samples/react-contoso/src/index.tsx
index b94813d954..eeb2f8c302 100644
--- a/samples/react-contoso/src/index.tsx
+++ b/samples/react-contoso/src/index.tsx
@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import { App } from './App';
 import { mergeStyles } from '@fluentui/react';
-import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
+import { Msal2Provider } from '@microsoft/mgt-msal2-provider/dist/es6/exports';
 import { Providers, LoginType } from '@microsoft/mgt-element';
 
 // Inject some global styles