feat: require explicit component registration (#2848)

all components must now be registered by developers to ensure that they render
a convenience registeration function of registerMgtComponents can register all components
mgt-loader registers all components when loading the underlying scripts into the browser

BREAKING CHANGE: Developers must explicitly call the register function for all components used in their application. Importing from the root of @microsoft/mgt-components no longer has an automatic registration side effect

index.html

@@ -11,12 +11,12 @@
 
     <script src="https://unpkg.com/@microsoft/teams-js@2/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
 
-    <!-- <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script> -->
+    <script src="./packages/mgt/dist/bundle/mgt-loader.js"></script>
 
-    <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
+    <!-- <script type="module" src="./packages/mgt-element/dist/es6/index.js"></script>
     <script type="module" src="./packages/mgt-components/dist/es6/index.js"></script>
     <script type="module" src="./packages/providers/mgt-msal2-provider/dist/es6/index.js"></script>
-    <script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script>
+    <script type="module" src="./packages/providers/mgt-mock-provider/dist/es6/index.js"></script> -->
 
     <style>
       header {

packages/mgt-components/src/index.ts

@@ -4,10 +4,6 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtComponents } from './registerMgtComponents';
+export * from './registerMgtComponents';
 
 export * from './exports';
-
-// this side effect will register all components
-// this is to prevent a breaking change as we enable tree shaking
-registerMgtComponents();

packages/mgt/src/bundle/mgt-loader.js

@@ -23,18 +23,26 @@
 
   var rootPath = getScriptPath();
 
+  function onScriptLoaded() {
+    console.log('script loaded');
+    // register all the components to ensure that they are available in the browser
+    mgt.registerMgtComponents();
+    mgt.registerMgtMockProvider();
+    mgt.registerMgtMsal2Provider();
+    mgt.registerMgtProxyProvider();
+  }
+
   // decide es5 or es6
   if (es6()) {
     window.WebComponents = window.WebComponents || {};
     window.WebComponents.root = rootPath + 'wc/';
 
     addScript(rootPath + 'wc/webcomponents-loader.js');
-    addScript(rootPath + 'mgt.es6.js');
+    addScript(rootPath + 'mgt.es6.js', onScriptLoaded);
   } else {
     // es5 bundle already includes all the polyfills
-    addScript(rootPath + 'mgt.es5.js');
+    addScript(rootPath + 'mgt.es5.js', onScriptLoaded);
   }
-
   function getScriptPath() {
     var scripts = document.getElementsByTagName('script');
     var path = scripts[scripts.length - 1].src.split('?')[0];
@@ -59,12 +67,10 @@
 
   function addScript(src, onload) {
     var tag = document.createElement('script');
+    document.head.append(tag);
+    if (onload) {
+      tag.addEventListener('load', onload);
+    }
     tag.src = src;
-
-    // if (onload) {
-    //   tag.addEventListener("load", onload);
-    // }
-
-    document.write(tag.outerHTML);
   }
 })();

packages/mgt/src/exports.ts

@@ -0,0 +1,13 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+export * from '@microsoft/mgt-element';
+export * from '@microsoft/mgt-components';
+export * from '@microsoft/mgt-proxy-provider';
+export * from '@microsoft/mgt-sharepoint-provider';
+export * from '@microsoft/mgt-msal2-provider';
+export * from '@microsoft/mgt-mock-provider';

packages/mgt/src/index.ts

@@ -5,9 +5,4 @@
  * -------------------------------------------------------------------------------------------
  */
 
-export * from '@microsoft/mgt-element';
-export * from '@microsoft/mgt-components';
-export * from '@microsoft/mgt-proxy-provider';
-export * from '@microsoft/mgt-sharepoint-provider';
-export * from '@microsoft/mgt-msal2-provider';
-export * from '@microsoft/mgt-mock-provider';
+export * from './exports';

packages/providers/mgt-mock-provider/src/index.ts

@@ -4,8 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtMockProvider } from './mgt-mock-provider';
-
-registerMgtMockProvider();
-
+export * from './mgt-mock-provider';
 export * from './mgt-mock-provider';

packages/providers/mgt-msal2-provider/src/index.ts

@@ -4,6 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtMsal2Provider } from './mgt-msal2-provider';
-registerMgtMsal2Provider();
+export * from './mgt-msal2-provider';
 export * from './exports';

packages/providers/mgt-proxy-provider/src/index.ts

@@ -4,8 +4,5 @@
  * See License in the project root for license information.
  * -------------------------------------------------------------------------------------------
  */
-import { registerMgtProxyProvider } from './mgt-proxy-provider';
-
-registerMgtProxyProvider();
-
+export * from './mgt-proxy-provider';
 export * from './exports';