fix: Ensure defineElement is used instead of customElement (#685)

This prevents elements from being registered multiple times.
Also adds ESLint rule configured as a warning.

Author: vsilvar

.eslintrc.js

@@ -27,6 +27,15 @@ module.exports = {
         'lit/prefer-nothing': 'error',
         'local-rules/uui-class-prefix': 'warn',
         'local-rules/prefer-static-styles-last': 'warn',
+        'no-restricted-syntax': [
+          'warn',
+          {
+            message:
+              'Elements should not be defined with customElement, use defineElement instead.',
+            selector:
+              'ClassDeclaration > Decorator[expression.callee.name="customElement"]',
+          },
+        ],
       },
       parserOptions: {
         project: './tsconfig.json',

packages/uui-combobox/lib/uui-combobox-async-example.ts

@@ -1,5 +1,6 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement, nothing } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 
 interface Fruit {
   name: string;
@@ -26,7 +27,7 @@ const data: Array<Fruit> = [
   { name: 'Lime', value: 'lime' },
 ];
 
-@customElement('uui-combobox-async-example')
+@defineElement('uui-combobox-async-example')
 export class UUIComboboxAsyncExampleElement extends LitElement {
   @state()
   _options: any[] = [];

packages/uui-combobox/lib/uui-combobox-async-options-example.ts

@@ -1,5 +1,6 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 interface Fruit {
   name: string;
@@ -30,7 +31,7 @@ async function getFruits() {
   return Promise.resolve(data);
 }
 
-@customElement('uui-combobox-async-options-example')
+@defineElement('uui-combobox-async-options-example')
 export class UUIComboboxAsyncOptionsExampleElement extends LitElement {
   @state()
   _options: any[] = [];

packages/uui-modal/lib/modal-example.element.ts

@@ -1,10 +1,11 @@
 import { LitElement, css, html, TemplateResult } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import './uui-modal-container';
 import { ref, createRef } from 'lit/directives/ref.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
-@customElement('modal-example')
+@defineElement('modal-example')
 export class ModalExampleElement extends LitElement {
   @state()
   private _modals: TemplateResult<1>[] = [];

packages/uui-modal/lib/uui-modal-container.ts

@@ -1,8 +1,10 @@
 import { LitElement, PropertyValueMap, css, html } from 'lit';
-import { customElement, property, query, state } from 'lit/decorators.js';
+import { property, query, state } from 'lit/decorators.js';
 import { UUIModalSidebarElement } from './uui-modal-sidebar.element';
 import { UUIModalElement } from './uui-modal.element';
-@customElement('uui-modal-container')
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+
+@defineElement('uui-modal-container')
 export class UUIModalContainerElement extends LitElement {
   @query('slot')
   modalSlot?: HTMLSlotElement;

packages/uui-modal/lib/uui-modal-dialog.element.ts

@@ -1,8 +1,8 @@
 import { css, html } from 'lit';
-import { customElement } from 'lit/decorators.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
-@customElement('uui-modal-dialog')
+@defineElement('uui-modal-dialog')
 export class UUIModalDialogElement extends UUIModalElement {
   render() {
     return html`

packages/uui-modal/lib/uui-modal-sidebar.element.ts

@@ -1,10 +1,11 @@
 import { css, html, PropertyValueMap } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { UUIModalElement } from './uui-modal.element';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 export type UUIModalSidebarSize = 'small' | 'medium' | 'large' | 'full';
 
-@customElement('uui-modal-sidebar')
+@defineElement('uui-modal-sidebar')
 export class UUIModalSidebarElement extends UUIModalElement {
   /**
    * @attr

packages/uui-table/lib/uui-table-advanced-example.ts

@@ -8,8 +8,9 @@ import '@umbraco-ui/uui-tag/lib';
 
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
 import { css, html, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 
 interface TableColumn {
   name: string;
@@ -25,7 +26,7 @@ interface TableItem {
   newsletter: boolean;
 }
 
-@customElement('uui-table-with-selection-example')
+@defineElement('uui-table-with-selection-example')
 export class UUITableWithSelectionExampleElement extends LitElement {
   @state()
   private _columns: Array<TableColumn> = [];