Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(esl-core): make this.constructor strictly typed for ESLBaseElement and ESLMixinElement #1536

Merged
merged 3 commits into from
Mar 13, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion src/modules/esl-base-element/core/esl-base-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,18 @@ 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 as typeof ESLBaseElement).is);
this.classList.add(this.constructor.is);

ESLEventUtils.subscribe(this);
}
Expand Down
3 changes: 1 addition & 2 deletions src/modules/esl-footnotes/core/esl-note.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,7 @@ export class ESLNote extends ESLBaseElement {

/** Gets attribute value from the closest element with group behavior settings */
protected getClosestRelatedAttr(attrName: string): string | null {
const tagName = (this.constructor as typeof ESLBaseElement).is;
const relatedAttrName = `${tagName}-${attrName}`;
const relatedAttrName = `${this.constructor.is}-${attrName}`;
const $closest = this.closest(`[${relatedAttrName}]`);
return $closest ? $closest.getAttribute(relatedAttrName) : null;
}
Expand Down
10 changes: 7 additions & 3 deletions src/modules/esl-mixin-element/ui/esl-mixin-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ 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;

Expand All @@ -36,12 +40,12 @@ export class ESLMixinElement implements ESLDomElementRelated {

/** Callback of mixin instance initialization */
public connectedCallback(): void {
const constructor = this.constructor as typeof ESLMixinElement;
if (constructor.observedAttributes.length) {
const {observedAttributes} = this.constructor;
if (observedAttributes.length) {
this._attr$$ = new MutationObserver(this._onAttrMutation.bind(this));
this._attr$$.observe(this.$host, {
attributes: true,
attributeFilter: constructor.observedAttributes,
attributeFilter: observedAttributes,
attributeOldValue: true
});
}
Expand Down
3 changes: 1 addition & 2 deletions src/modules/esl-toggleable/core/esl-toggleable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,7 @@ export class ESLToggleable extends ESLBaseElement {
protected override connectedCallback(): void {
super.connectedCallback();
if (!this.id && !this.noAutoId) {
const tag = (this.constructor as typeof ESLToggleable).is;
this.id = sequentialUID(tag, tag + '-');
this.id = sequentialUID(this.constructor.is, this.constructor.is + '-');
}
this.initiallyOpened = this.hasAttribute('open');
this.setInitialState();
Expand Down
6 changes: 4 additions & 2 deletions src/modules/esl-trigger/test/esl-trigger.a11y.test.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
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: Partial<ESLToggleable> = {}): ESLToggleable {
function createTargetMock(init: any = {}): ESLToggleable {
const et = new SyntheticEventTarget();
return Object.assign(et, {
show: jest.fn(function () {
Expand All @@ -16,7 +18,7 @@ function createTargetMock(init: Partial<ESLToggleable> = {}): ESLToggleable {
ESLEventUtils.dispatch(this, 'esl:hide');
}),
open: false
}, init) as any;
}, init);
}

describe('esl-trigger a11y attributes test', () => {
Expand Down