Replace TS experimental decorators with ES decorators

src/comments-element.ts

@@ -13,13 +13,13 @@ import {SpinnerFactory} from './subcomponent/spinner-factory.js';
 import {CommentViewModel, CommentViewModelEvent} from './comment-view-model.js';
 import {findParentsBySelector, hideElement} from './html-util.js';
 import {STYLE_SHEET} from './css/stylesheet.js';
-import {RegisterCustomElement} from './register-custom-element.js';
+import {CustomElement} from './custom-element.js';
 import {createDynamicStylesheet} from './css/dynamic-stylesheet-factory.js';
 import {ToggleAllButtonElement} from './subcomponent/toggle-all-button-element.js';
 import {CommentingFieldElement} from './subcomponent/commenting-field-element.js';
 import {CommentElement} from './subcomponent/comment-element.js';
 
-@RegisterCustomElement('ax-comments')
+@CustomElement('ax-comments')
 export class CommentsElement extends HTMLElement implements WebComponent {
     private container!: HTMLElement;
 

src/register-custom-element.ts → src/custom-element.ts

@@ -1,9 +1,11 @@
 /**
  * Decorator which registers custom HTML element.
  */
-export function RegisterCustomElement(selector: string, options?: ElementDefinitionOptions): CustomElementDecorator {
-    return (target) => {
-        customElements.define(selector, target, options);
+export function CustomElement(selector: string, options?: ElementDefinitionOptions): CustomElementDecorator {
+    return (target, context) => {
+        context.addInitializer(function () {
+            customElements.define(selector, this, options);
+        });
     };
 }
 
@@ -16,7 +18,7 @@ export function RegisterCustomElement(selector: string, options?: ElementDefinit
 /**
  * Custom element decorator. Based on {@link ClassDecorator}.
  */
-type CustomElementDecorator = <E extends HTMLElement, C extends CustomElementConstructor<E>>(target: C) => C | void;
+type CustomElementDecorator = <E extends HTMLElement, C extends CustomElementConstructor<E>>(target: C, context: ClassDecoratorContext<C>) => C | void;
 
 /**
  * Reference to the specific custom element's class.

src/subcomponent/button-element.ts

@@ -1,15 +1,15 @@
 import {CommentModel, CommentsOptions} from '../api.js';
 import {OptionsProvider, ServiceProvider} from '../provider.js';
 import {SpinnerFactory} from './spinner-factory.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {getHostContainer} from '../html-util.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 import {ErrorFct, SuccessFct} from '../options/callbacks.js';
 import {isNil, noop} from '../util.js';
 
-@RegisterCustomElement('ax-button', {extends: 'button'})
+@CustomElement('ax-button', {extends: 'button'})
 export class ButtonElement extends HTMLButtonElement implements WebComponent {
 
     set inline(value: boolean) {

src/subcomponent/comment-container-element.ts

@@ -4,7 +4,7 @@ import {TagFactory} from './tag-factory.js';
 import {CommentModel, CommentsOptions} from '../api.js';
 import {CommentViewModelProvider, OptionsProvider, ServiceProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {findParentsBySelector, getHostContainer} from '../html-util.js';
 import {ButtonElement} from './button-element.js';
 import {CommentViewModel, CommentViewModelEvent, CommentViewModelEventSubscription} from '../comment-view-model.js';
@@ -16,7 +16,7 @@ import {SuccessFct} from '../options/callbacks.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {AttachmentModel} from '../options/models.js';
 
-@RegisterCustomElement('ax-comment-container')
+@CustomElement('ax-comment-container')
 export class CommentContainerElement extends HTMLElement implements WebComponent {
 
     commentModel!: CommentModelEnriched;

src/subcomponent/comment-element.ts

@@ -1,10 +1,10 @@
 import {isNil} from '../util.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {CommentContainerElement} from './comment-container-element.js';
 import {CommentModelEnriched} from '../comments-by-id.js';
 
-@RegisterCustomElement('ax-comment', {extends: 'li'})
+@CustomElement('ax-comment', {extends: 'li'})
 export class CommentElement extends HTMLLIElement implements WebComponent {
 
     #commentModel!: CommentModelEnriched;

src/subcomponent/commenting-field-element.ts

@@ -9,7 +9,7 @@ import {CommentModelEnriched} from '../comments-by-id.js';
 import {CommentViewModelProvider, OptionsProvider, ServiceProvider} from '../provider.js';
 import {CommentViewModel} from '../comment-view-model.js';
 import {WebComponent} from '../web-component.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {
     findSiblingsBySelector,
     getHostContainer,
@@ -21,7 +21,7 @@ import {ErrorFct, SuccessFct} from '../options/callbacks.js';
 import {CommentTransformer} from '../comment-transformer.js';
 import {AttachmentModel} from '../options/models.js';
 
-@RegisterCustomElement('ax-commenting-field')
+@CustomElement('ax-commenting-field')
 export class CommentingFieldElement extends HTMLElement implements WebComponent {
 
     parentId: string | null = null;

src/subcomponent/navigation-element.ts

@@ -1,11 +1,11 @@
 import {CommentsOptions, SortKey} from '../api.js';
 import {OptionsProvider} from '../provider.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {WebComponent} from '../web-component.js';
 import {getHostContainer, hideElement, showElement} from '../html-util.js';
 import {noop} from '../util.js';
 
-@RegisterCustomElement('ax-navigation')
+@CustomElement('ax-navigation')
 export class NavigationElement extends HTMLElement implements WebComponent {
 
     sortKey: SortKey = SortKey.NEWEST;

src/subcomponent/textarea-element.ts

@@ -3,11 +3,11 @@ import {CommentsOptions} from '../api.js';
 import {CommentViewModelProvider, OptionsProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
 import {findSiblingsBySelector, getHostContainer} from '../html-util.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {PingableUser, UserDisplayNamesById} from '../options/models.js';
 import {CommentViewModel} from '../comment-view-model.js';
 
-@RegisterCustomElement('ax-textarea', {extends: 'textarea'})
+@CustomElement('ax-textarea', {extends: 'textarea'})
 export class TextareaElement extends HTMLTextAreaElement implements WebComponent {
 
     parentId: string | null = null;

src/subcomponent/toggle-all-button-element.ts

@@ -1,12 +1,12 @@
 import {isNil} from '../util.js';
 import {OptionsProvider} from '../provider.js';
 import {WebComponent} from '../web-component.js';
-import {RegisterCustomElement} from '../register-custom-element.js';
+import {CustomElement} from '../custom-element.js';
 import {findSiblingsBySelector, getHostContainer} from '../html-util.js';
 import {Labels} from '../options/labels.js';
 import {Misc} from '../options/misc.js';
 
-@RegisterCustomElement('ax-toggle-all-button', {extends: 'li'})
+@CustomElement('ax-toggle-all-button', {extends: 'li'})
 export class ToggleAllButtonElement extends HTMLLIElement implements WebComponent {
 
     #options!: Required<Labels & Misc>;

tsconfig-template.json

@@ -1,15 +1,13 @@
 {
   "compilerOptions": {
-    "target": "esnext",
+    "target": "es2022",
     "module": "nodenext",
     "moduleResolution": "nodenext",
     "noEmitOnError": true,
-    "lib": ["esnext", "dom", "dom.iterable"],
+    "lib": ["es2022", "dom", "dom.iterable"],
     "strict": true,
     "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
     "importHelpers": false,
     "outDir": "dist",
     "sourceMap": true,