feat: report custom element name collisions (#2053)

custom element name collisions are now detected before calling define()
logging is added to the console.error to help developers identify the collisions
includes version information to assist in troubleshooting

Author: gavinbarron

packages/mgt-element/src/components/baseComponent.ts

@@ -10,6 +10,7 @@ import { state } from 'lit/decorators.js';
 import { ProviderState } from '../providers/IProvider';
 import { Providers } from '../providers/Providers';
 import { LocalizationHelper } from '../utils/LocalizationHelper';
+import { PACKAGE_VERSION } from '../utils/version';
 
 /**
  * Defines media query based on component width
@@ -43,6 +44,10 @@ export enum ComponentMediaQuery {
  * @extends {LitElement}
  */
 export abstract class MgtBaseComponent extends LitElement {
+  public static get version() {
+    return PACKAGE_VERSION;
+  }
+
   /**
    * Gets or sets the direction of the component
    *

packages/mgt-element/src/utils/CustomElement.ts

@@ -16,5 +16,20 @@ import { customElementHelper } from '../components/customElementHelper';
  * @param tagName the base name for the custom element tag
  */
 export const customElement = (tagName: string): ((classOrDescriptor: unknown) => any) => {
-  return litElement(`${customElementHelper.prefix}-${tagName}`);
+  const mgtTagName = `${customElementHelper.prefix}-${tagName}`;
+  const mgtElement = customElements.get(mgtTagName);
+  const unknownVersion = ' Unknown likely <3.0.0';
+  const version = element => (element as any).version || unknownVersion;
+  if (mgtElement) {
+    return (classOrDescriptor: CustomElementConstructor) => {
+      // tslint:disable-next-line: no-console
+      console.error(
+        `Tag name ${mgtTagName} is already defined using class ${mgtElement.name} version ${version(mgtElement)}\n`,
+        `Currently registering class ${classOrDescriptor.name} with version ${version(classOrDescriptor)}\n`,
+        'Please use the disambiguation feature to define a unique tag name for this component see: https://github.com/microsoftgraph/microsoft-graph-toolkit/tree/main/packages/mgt-components#disambiguation'
+      );
+      return classOrDescriptor;
+    };
+  }
+  return litElement(mgtTagName);
 };