Revert "feat(esl-core): make this.constructor strictly typed for `ESL…

…BaseElement` and `ESLMixinElement`"
exadel-inc · Mar 15, 2023 · 14de2de · 14de2de
1 parent 1231f87
commit 14de2de
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 18 deletions.
diff --git a/src/modules/esl-base-element/core/esl-base-element.ts b/src/modules/esl-base-element/core/esl-base-element.ts
@@ -19,18 +19,14 @@ export abstract class ESLBaseElement extends HTMLElement {
   /** Custom element tag name */
   public static is = '';
 
-  // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  override ['constructor']!: typeof ESLBaseElement & Function;
-
   /** Event to indicate component significant state change that may affect other components state */
   @prop('esl:refresh') public REFRESH_EVENT: string;
 
   protected _connected: boolean = false;
 
   protected connectedCallback(): void {
     this._connected = true;
-    this.classList.add(this.constructor.is);
+    this.classList.add((this.constructor as typeof ESLBaseElement).is);
 
     ESLEventUtils.subscribe(this);
   }

diff --git a/src/modules/esl-footnotes/core/esl-note.ts b/src/modules/esl-footnotes/core/esl-note.ts
@@ -127,7 +127,8 @@ export class ESLNote extends ESLBaseElement {
 
   /** Gets attribute value from the closest element with group behavior settings */
   protected getClosestRelatedAttr(attrName: string): string | null {
-    const relatedAttrName = `${this.constructor.is}-${attrName}`;
+    const tagName = (this.constructor as typeof ESLBaseElement).is;
+    const relatedAttrName = `${tagName}-${attrName}`;
     const $closest = this.closest(`[${relatedAttrName}]`);
     return $closest ? $closest.getAttribute(relatedAttrName) : null;
   }

diff --git a/src/modules/esl-mixin-element/ui/esl-mixin-element.ts b/src/modules/esl-mixin-element/ui/esl-mixin-element.ts
@@ -24,10 +24,6 @@ export class ESLMixinElement implements ESLDomElementRelated {
   /** Additional observed attributes */
   static observedAttributes: string[] = [];
 
-  // @see https://github.com/Microsoft/TypeScript/issues/3841#issuecomment-337560146
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  ['constructor']!: typeof ESLMixinElement & Function;
-
   /** Event to indicate component significant state change that may affect other components state */
   @prop('esl:refresh') public REFRESH_EVENT: string;
 
@@ -40,12 +36,12 @@ export class ESLMixinElement implements ESLDomElementRelated {
 
   /** Callback of mixin instance initialization */
   public connectedCallback(): void {
-    const {observedAttributes} = this.constructor;
-    if (observedAttributes.length) {
+    const constructor = this.constructor as typeof ESLMixinElement;
+    if (constructor.observedAttributes.length) {
       this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this));
       this._attr$$.observe(this.$host, {
         attributes: true,
-        attributeFilter: observedAttributes,
+        attributeFilter: constructor.observedAttributes,
         attributeOldValue: true
       });
     }

diff --git a/src/modules/esl-toggleable/core/esl-toggleable.ts b/src/modules/esl-toggleable/core/esl-toggleable.ts
@@ -121,7 +121,8 @@ export class ESLToggleable extends ESLBaseElement {
   protected override connectedCallback(): void {
     super.connectedCallback();
     if (!this.id && !this.noAutoId) {
-      this.id = sequentialUID(this.constructor.is, this.constructor.is + '-');
+      const tag = (this.constructor as typeof ESLToggleable).is;
+      this.id = sequentialUID(tag, tag + '-');
     }
     this.initiallyOpened = this.hasAttribute('open');
     this.setInitialState();

diff --git a/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts b/src/modules/esl-trigger/test/esl-trigger.a11y.test.ts
@@ -1,12 +1,10 @@
 import '../../../polyfills/es5-target-shim';
-
 import {SyntheticEventTarget} from '../../esl-utils/dom/events/target';
 import {ESLEventUtils} from '../../esl-utils/dom/events';
 import {ESLTrigger} from '../core/esl-trigger';
-
 import type {ESLToggleable} from '../../esl-toggleable/core/esl-toggleable';
 
-function createTargetMock(init: any = {}): ESLToggleable {
+function createTargetMock(init: Partial<ESLToggleable> = {}): ESLToggleable {
   const et = new SyntheticEventTarget();
   return Object.assign(et, {
     show: jest.fn(function () {
@@ -18,7 +16,7 @@ function createTargetMock(init: any = {}): ESLToggleable {
       ESLEventUtils.dispatch(this, 'esl:hide');
     }),
     open: false
-  }, init);
+  }, init) as any;
 }
 
 describe('esl-trigger a11y attributes test', () => {