making registration of custom elements for providers use a register f…

…unction and setting up a side effect free path for importing the provider class

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'});

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.

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

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);

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';
 
 /**

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);
 

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

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

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);
 

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 = () => {

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';
 

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';
 

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';
 

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';

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);

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);
 

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';
 

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 = () => {

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';
 
 /**

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);

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';
 
 /**

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);

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';
 

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,

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.

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);
 

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);
 

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'});

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';

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

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';

packages/mgt-components/src/components/registerComponent.ts → 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}`;
 

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");

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": "*"
   },

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';