From b7db262a77389717c449ef8d4c12343860dd9cb6 Mon Sep 17 00:00:00 2001
From: Gavin Barron <gavinbarron@microsoft.com>
Date: Mon, 13 Nov 2023 13:17:00 -0800
Subject: [PATCH] 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                                    |  6 ++---
 packages/mgt-components/src/index.ts          |  6 +----
 packages/mgt/src/bundle/mgt-loader.js         | 24 ++++++++++++-------
 packages/mgt/src/exports.ts                   | 13 ++++++++++
 packages/mgt/src/index.ts                     |  7 +-----
 .../providers/mgt-mock-provider/src/index.ts  |  5 +---
 .../providers/mgt-msal2-provider/src/index.ts |  3 +--
 .../providers/mgt-proxy-provider/src/index.ts |  5 +---
 8 files changed, 36 insertions(+), 33 deletions(-)
 create mode 100644 packages/mgt/src/exports.ts

diff --git a/index.html b/index.html
index 29385313ad..7875a790c3 100644
--- a/index.html
+++ b/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 {
diff --git a/packages/mgt-components/src/index.ts b/packages/mgt-components/src/index.ts
index eedaa7a348..6952ef6e8b 100644
--- a/packages/mgt-components/src/index.ts
+++ b/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();
diff --git a/packages/mgt/src/bundle/mgt-loader.js b/packages/mgt/src/bundle/mgt-loader.js
index 6f30d89c08..e511e0dbc4 100644
--- a/packages/mgt/src/bundle/mgt-loader.js
+++ b/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);
   }
 })();
diff --git a/packages/mgt/src/exports.ts b/packages/mgt/src/exports.ts
new file mode 100644
index 0000000000..2bf2259888
--- /dev/null
+++ b/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';
diff --git a/packages/mgt/src/index.ts b/packages/mgt/src/index.ts
index 2bf2259888..21455c1c40 100644
--- a/packages/mgt/src/index.ts
+++ b/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';
diff --git a/packages/providers/mgt-mock-provider/src/index.ts b/packages/providers/mgt-mock-provider/src/index.ts
index 6e9e624037..eee7695286 100644
--- a/packages/providers/mgt-mock-provider/src/index.ts
+++ b/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';
diff --git a/packages/providers/mgt-msal2-provider/src/index.ts b/packages/providers/mgt-msal2-provider/src/index.ts
index 7cd9a0f500..0db7fc3134 100644
--- a/packages/providers/mgt-msal2-provider/src/index.ts
+++ b/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';
diff --git a/packages/providers/mgt-proxy-provider/src/index.ts b/packages/providers/mgt-proxy-provider/src/index.ts
index 542eb26fa2..04211e8900 100644
--- a/packages/providers/mgt-proxy-provider/src/index.ts
+++ b/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';