AB#17181 Convert defineElement to decorator and use in all elements and tests

Author: iOvergaard

packages/uui-action-bar/lib/uui-action-bar.element.ts

@@ -1,10 +1,12 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { UUIButtonGroupElement } from '@umbraco-ui/uui-button-group/lib';
 import { css } from 'lit';
 
 /**
  *  @element uui-action-bar
  *  @description - Extends button group to hold buttons with icons that represent actions.
  */
+@defineElement('uui-action-bar')
 export class UUIActionBarElement extends UUIButtonGroupElement {
   static styles = [
     ...UUIButtonGroupElement.styles,

packages/uui-action-bar/lib/uui-action-bar.test.ts

@@ -1,6 +1,6 @@
-import { html, fixture, expect } from '@open-wc/testing';
+import { expect, fixture, html } from '@open-wc/testing';
+
 import { UUIActionBarElement } from './uui-action-bar.element';
-import '.';
 
 describe('UUIActionBarElement', () => {
   let element: UUIActionBarElement;
@@ -9,6 +9,10 @@ describe('UUIActionBarElement', () => {
     element = await fixture(html` <uui-action-bar></uui-action-bar> `);
   });
 
+  it('is defined', () => {
+    expect(element).to.be.instanceOf(UUIActionBarElement);
+  });
+
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });

packages/uui-avatar-group/lib/uui-avatar-group.element.ts

@@ -1,4 +1,5 @@
 import { UUIAvatarElement } from '@umbraco-ui/uui-avatar/lib';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
 
@@ -7,6 +8,7 @@ import { property, queryAssignedElements, state } from 'lit/decorators.js';
  * @element uui-avatar-group
  * @slot for uui-avatar elements
  */
+@defineElement('uui-avatar-group')
 export class UUIAvatarGroupElement extends LitElement {
   static styles = [
     css`

packages/uui-avatar/lib/uui-avatar.element.ts

@@ -1,11 +1,13 @@
 import { property, state } from 'lit/decorators.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { LitElement, html, css } from 'lit';
 
 /**
  *  Avatar for displaying users
  *  @element uui-avatar
  *  @slot For anything other than initials (no more than 2-3 characters)
  */
+@defineElement('uui-avatar')
 export class UUIAvatarElement extends LitElement {
   static styles = [
     css`

packages/uui-badge/lib/uui-badge.element.ts

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property } from 'lit/decorators.js';
 
 import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
@@ -8,6 +9,7 @@ import { InterfaceLookType } from '@umbraco-ui/uui-base/lib/types';
  *  @element uui-badge
  *  @slot - for badge contents
  */
+@defineElement('uui-badge')
 export class UUIBadgeElement extends LitElement {
   static styles = [
     css`

packages/uui-base/lib/registration/index.ts

@@ -5,23 +5,26 @@
  * @param {string} constructor - Constructor for the new custom element.
  * @param {string} [options] - Object that controls how the element is defined.
  */
-export const defineElement = (
+export function defineElement(
   name: string,
-  constructor: CustomElementConstructor,
   options?: ElementDefinitionOptions | undefined
-) => {
-  const isValidElementName = name.indexOf('-') > 0;
+) {
+  return (constructor: CustomElementConstructor) => {
+    const isValidElementName = name.indexOf('-') > 0;
 
-  if (isValidElementName === false) {
-    console.error(
-      `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`
-    );
-    return;
-  }
+    if (isValidElementName === false) {
+      console.error(
+        `${name} is not a valid custom element name. A custom element name should consist of at least two words separated by a hyphen.`
+      );
+      return;
+    }
 
-  if (customElements.get(name)) {
-    console.error(`${name} is already defined`);
-  } else {
-    customElements.define(name, constructor, options);
-  }
-};
+    const existingElement = window.customElements.get(name);
+
+    if (existingElement) {
+      console.warn(`${name} is already defined`, existingElement); // TODO: Remove this in production
+    } else {
+      window.customElements.define(name, constructor, options);
+    }
+  };
+}

packages/uui-boolean-input/lib/uui-boolean-input.element.ts

@@ -1,6 +1,7 @@
-import { LitElement, html, css, TemplateResult } from 'lit';
-import { property, query } from 'lit/decorators.js';
 import { FormControlMixin, LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
+import { css, html, LitElement, TemplateResult } from 'lit';
+import { property, query } from 'lit/decorators.js';
+
 import { UUIBooleanInputEvent } from './UUIBooleanInputEvent';
 
 type LabelPosition = 'left' | 'right' | 'top' | 'bottom';
@@ -208,9 +209,3 @@ export abstract class UUIBooleanInputElement extends FormControlMixin(
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'uui-boolean-input': UUIBooleanInputElement;
-  }
-}

packages/uui-box/lib/uui-box.element.ts

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 /**
  *  A box for grouping elements
@@ -8,6 +9,7 @@ import { LitElement, html, css } from 'lit';
  *  @slot area with no padding
  *
  */
+@defineElement('uui-box')
 export class UUIBoxElement extends LitElement {
   static styles = [
     css`

packages/uui-box/lib/uui-box.test.ts

@@ -1,5 +1,5 @@
-import { html, fixture, expect } from '@open-wc/testing';
-import './index';
+import { expect, fixture, html } from '@open-wc/testing';
+
 import { UUIBoxElement } from './uui-box.element';
 
 describe('UUIBox', () => {
@@ -11,6 +11,10 @@ describe('UUIBox', () => {
     </uui-box>`);
   });
 
+  it('is defined', () => {
+    expect(element).to.be.instanceOf(UUIBoxElement);
+  });
+
   it('passes the a11y audit', async () => {
     await expect(element).shadowDom.to.be.accessible();
   });

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts

@@ -1,3 +1,4 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 
@@ -7,6 +8,7 @@ import { property } from 'lit/decorators.js';
  *  @slot - to show display an element inside the breadcrumb
  *  @csspart separator - change the content of the after element of this part to change the separator
  */
+@defineElement('uui-breadcrumb-item')
 export class UUIBreadcrumbItemElement extends LitElement {
   static styles = [
     css`