Skip to content

Commit

Permalink
feat(ui/element): seprate mixins
Browse files Browse the repository at this point in the history
  • Loading branch information
MM25Zamanian committed Dec 25, 2022
1 parent 75b54b5 commit a305c5d
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 78 deletions.
85 changes: 7 additions & 78 deletions ui/element/src/element.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import {alwatrRegisteredList, createLogger} from '@alwatr/logger';
import {alwatrRegisteredList} from '@alwatr/logger';
import {LitElement} from 'lit';

import type {Constructor} from './type.js';
import type {AlwatrLogger} from '@alwatr/logger/type.js';
import type {ListenerInterface} from '@alwatr/signal';
import type {PropertyValues} from 'lit';
import {LoggerMixin} from './mixins/logging.js';
import {SignalMixin} from './mixins/signal.js';

export * from './mixins/logging.js';
export * from './mixins/signal.js';

export * from 'lit';
export * from 'lit/decorators.js';
Expand All @@ -19,77 +20,5 @@ alwatrRegisteredList.push({
version: '{{ALWATR_VERSION}}',
});

export declare class LoggerMixinInterface extends LitElement {
protected _logger: AlwatrLogger;
}

export function LoggerMixin<ClassType extends Constructor<LitElement>>(
superClass: ClassType,
): Constructor<LoggerMixinInterface> & ClassType {
class LoggerMixinClass extends superClass {
protected _logger = createLogger(`<${this.tagName.toLowerCase()}>`);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(...args: any[]) {
super(...args);
this._logger.logMethod('constructor');
}

override connectedCallback(): void {
this._logger.logMethod('connectedCallback');
super.connectedCallback();
}

override disconnectedCallback(): void {
this._logger.logMethod('disconnectedCallback');
super.disconnectedCallback();
}

protected override update(changedProperties: PropertyValues): void {
this._logger.logMethodArgs('update', {changedProperties});
super.update(changedProperties);
}

protected override firstUpdated(changedProperties: PropertyValues): void {
this._logger.logMethodArgs('firstUpdated', {changedProperties});
super.firstUpdated(changedProperties);
}

protected override render(): unknown {
this._logger.logMethod('render');
return;
}

override dispatchEvent(event: Event): boolean {
this._logger.logMethodArgs('dispatchEvent', {
type: event.type,
detail: (event as Event & {detail?: unknown}).detail,
});
return super.dispatchEvent(event);
}
}

return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & ClassType;
}

export declare class SignalMixinInterface extends LitElement {
protected _signalListenerList: Array<ListenerInterface<keyof AlwatrSignals>>;
}

export function SignalMixin<ClassType extends Constructor<LitElement>>(
superClass: ClassType,
): Constructor<SignalMixinInterface> & ClassType {
class SignalMixinClass extends superClass {
protected _signalListenerList: Array<ListenerInterface<keyof AlwatrSignals>> = [];

override disconnectedCallback(): void {
super.disconnectedCallback();

this._signalListenerList.forEach((listener) => listener.remove());
}
}

return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & ClassType;
}

export const AlwatrDummyElement = LoggerMixin(LitElement);
export const AlwatrElement = SignalMixin(LoggerMixin(LitElement));
59 changes: 59 additions & 0 deletions ui/element/src/mixins/logging.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import {createLogger} from '@alwatr/logger';
import {LitElement} from 'lit';

import type {Constructor} from '../type.js';
import type {AlwatrLogger} from '@alwatr/logger/type.js';
import type {PropertyValues} from 'lit';

export declare class LoggerMixinInterface extends LitElement {
protected _logger: AlwatrLogger;
}

export function LoggerMixin<ClassType extends Constructor<LitElement>>(
superClass: ClassType,
): Constructor<LoggerMixinInterface> & ClassType {
class LoggerMixinClass extends superClass {
protected _logger = createLogger(`<${this.tagName.toLowerCase()}>`);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
constructor(...args: any[]) {
super(...args);
this._logger.logMethod('constructor');
}

override connectedCallback(): void {
this._logger.logMethod('connectedCallback');
super.connectedCallback();
}

override disconnectedCallback(): void {
this._logger.logMethod('disconnectedCallback');
super.disconnectedCallback();
}

protected override update(changedProperties: PropertyValues): void {
this._logger.logMethodArgs('update', {changedProperties});
super.update(changedProperties);
}

protected override firstUpdated(changedProperties: PropertyValues): void {
this._logger.logMethodArgs('firstUpdated', {changedProperties});
super.firstUpdated(changedProperties);
}

protected override render(): unknown {
this._logger.logMethod('render');
return;
}

override dispatchEvent(event: Event): boolean {
this._logger.logMethodArgs('dispatchEvent', {
type: event.type,
detail: (event as Event & {detail?: unknown}).detail,
});
return super.dispatchEvent(event);
}
}

return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & ClassType;
}
24 changes: 24 additions & 0 deletions ui/element/src/mixins/signal.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import {LitElement} from 'lit';

import type {Constructor} from '../type.js';
import type {ListenerInterface} from '@alwatr/signal';

export declare class SignalMixinInterface extends LitElement {
protected _signalListenerList: Array<ListenerInterface<keyof AlwatrSignals>>;
}

export function SignalMixin<ClassType extends Constructor<LitElement>>(
superClass: ClassType,
): Constructor<SignalMixinInterface> & ClassType {
class SignalMixinClass extends superClass {
protected _signalListenerList: Array<ListenerInterface<keyof AlwatrSignals>> = [];

override disconnectedCallback(): void {
super.disconnectedCallback();

this._signalListenerList.forEach((listener) => listener.remove());
}
}

return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & ClassType;
}

0 comments on commit a305c5d

Please sign in to comment.