From baa1e5e546654658f473622b148ceb7e7e8e3da6 Mon Sep 17 00:00:00 2001
From: Ali Mihandoost <ali.mihandoost@gmail.com>
Date: Mon, 30 Jan 2023 19:29:03 +0330
Subject: [PATCH] feat(element): rewrite all mixins with new api

---
 ui/element/src/index.ts            | 12 +++--------
 ui/element/src/lit.ts              |  9 ++++++++
 ui/element/src/mixins/direction.ts | 22 ++++++++++++--------
 ui/element/src/mixins/localize.ts  | 33 ++++++++++++------------------
 ui/element/src/mixins/logging.ts   |  2 +-
 ui/element/src/mixins/signal.ts    |  9 +++++---
 ui/element/src/pwa-element.ts      | 21 ++++++++-----------
 7 files changed, 54 insertions(+), 54 deletions(-)
 create mode 100644 ui/element/src/lit.ts

diff --git a/ui/element/src/index.ts b/ui/element/src/index.ts
index 33bfc6fe3..945e34dca 100644
--- a/ui/element/src/index.ts
+++ b/ui/element/src/index.ts
@@ -5,16 +5,10 @@ export * from './smart-element.js';
 
 export * from './mixins/localize.js';
 export * from './mixins/direction.js';
+export * from './mixins/logging.js';
+export * from './mixins/signal.js';
 
-export * from 'lit';
-export * from 'lit/decorators.js';
-export {map} from 'lit/directives/map.js';
-export {when} from 'lit/directives/when.js';
-export {repeat} from 'lit/directives/repeat.js';
-export {ifDefined} from 'lit/directives/if-defined.js';
-export {unsafeSVG} from 'lit/directives/unsafe-svg.js';
-export {unsafeHTML} from 'lit/directives/unsafe-html.js';
-export {cache} from 'lit/directives/cache.js';
+export * from './lit.js';
 
 globalAlwatr.registeredList.push({
   name: '@alwatr/element',
diff --git a/ui/element/src/lit.ts b/ui/element/src/lit.ts
new file mode 100644
index 000000000..52c331602
--- /dev/null
+++ b/ui/element/src/lit.ts
@@ -0,0 +1,9 @@
+export * from 'lit';
+export * from 'lit/decorators.js';
+export {map} from 'lit/directives/map.js';
+export {when} from 'lit/directives/when.js';
+export {repeat} from 'lit/directives/repeat.js';
+export {ifDefined} from 'lit/directives/if-defined.js';
+export {unsafeSVG} from 'lit/directives/unsafe-svg.js';
+export {unsafeHTML} from 'lit/directives/unsafe-html.js';
+export {cache} from 'lit/directives/cache.js';
diff --git a/ui/element/src/mixins/direction.ts b/ui/element/src/mixins/direction.ts
index 1c9baf6e8..19e42772e 100644
--- a/ui/element/src/mixins/direction.ts
+++ b/ui/element/src/mixins/direction.ts
@@ -1,20 +1,19 @@
 import {localeContextConsumer} from '@alwatr/i18n';
 
-import type {LoggerMixinInterface} from './logging.js';
-import type {Constructor} from '@alwatr/type';
+import {SignalMixinInterface} from './signal.js';
 
-export declare class DirectionMixinInterface extends LoggerMixinInterface {
-  protected _signalListenerList: Array<unknown>;
+import type {Constructor, LocaleContext} from '@alwatr/type';
+
+export declare class DirectionMixinInterface extends SignalMixinInterface {
   protected _dirParent: HTMLElement | null;
+  protected _localeChange: (localeContext: LocaleContext) => void;
   protected _updateDir: () => void;
-  protected _localeChange: () => void;
 }
 
-export function DirectionMixin<T extends Constructor<LoggerMixinInterface>>(
+export function DirectionMixin<T extends Constructor<SignalMixinInterface>>(
     superClass: T,
 ): Constructor<DirectionMixinInterface> & T {
   class DirectionMixinClass extends superClass {
-    protected _signalListenerList: Array<unknown> = [];
     protected _dirParent: HTMLElement | null = null;
 
     override connectedCallback(): void {
@@ -31,8 +30,12 @@ export function DirectionMixin<T extends Constructor<LoggerMixinInterface>>(
       this.setAttribute('dir', dir === 'rtl' ? dir : 'ltr');
     }
 
-    protected _localeChanged(): void {
-      this._logger.logMethod('_localeChanged');
+    /**
+     * On locale context updated.
+     */
+    protected _localeChanged(localeContext: LocaleContext): void {
+      this._logger.logMethodArgs('_localeChanged', localeContext.code);
+      console.time('_localeChanged');
       if (this._dirParent !== null) {
         return this._updateDir();
       }
@@ -48,6 +51,7 @@ export function DirectionMixin<T extends Constructor<LoggerMixinInterface>>(
       }
 
       this._dirParent = dirParent?.dir ? dirParent : null;
+      console.timeEnd('_localeChanged');
       return this._updateDir();
     }
   }
diff --git a/ui/element/src/mixins/localize.ts b/ui/element/src/mixins/localize.ts
index 70201d344..bc61936e5 100644
--- a/ui/element/src/mixins/localize.ts
+++ b/ui/element/src/mixins/localize.ts
@@ -1,35 +1,28 @@
 import {l18eContextConsumer} from '@alwatr/i18n';
 
-import type {LoggerMixinInterface} from './logging.js';
-import type {ListenerSpec} from '@alwatr/signal';
-import type {Constructor} from '@alwatr/type';
+import type {SignalMixinInterface} from './signal.js';
+import type {Constructor, L18eContext} from '@alwatr/type';
 
-export declare class LocalizeMixinInterface extends LoggerMixinInterface {
-  private __l10nResourceListener: ListenerSpec;
+export declare class LocalizeMixinInterface extends SignalMixinInterface {
+  protected _l18eContextUpdated(_l18eContext: L18eContext): void;
 }
 
-export function LocalizeMixin<T extends Constructor<LoggerMixinInterface>>(
+export function LocalizeMixin<T extends Constructor<SignalMixinInterface>>(
     superClass: T,
 ): Constructor<LocalizeMixinInterface> & T {
   class LocalizeMixinClass extends superClass {
-    private __l10nResourceListener?: ListenerSpec;
-
     override connectedCallback(): void {
       super.connectedCallback();
-      this.__l10nResourceListener = l18eContextConsumer.subscribe(() => {
-        this._l10nResourceChanged();
-      });
-    }
-
-    override disconnectedCallback(): void {
-      if (this.__l10nResourceListener != null) {
-        l18eContextConsumer.unsubscribe(this.__l10nResourceListener);
-      }
-      super.disconnectedCallback();
+      this._signalListenerList.push(
+          l18eContextConsumer.subscribe(this._l18eContextUpdated.bind(this)),
+      );
     }
 
-    protected _l10nResourceChanged(): void {
-      this._logger.logMethod('_l10nResourceChange');
+    /**
+     * On localization resource context updated.
+     */
+    protected _l18eContextUpdated(l18eContext: L18eContext): void {
+      this._logger.logMethodArgs('_l18eContextUpdated', l18eContext.meta);
       this.requestUpdate();
     }
   }
diff --git a/ui/element/src/mixins/logging.ts b/ui/element/src/mixins/logging.ts
index d931a26a1..f1cf9f314 100644
--- a/ui/element/src/mixins/logging.ts
+++ b/ui/element/src/mixins/logging.ts
@@ -1,7 +1,7 @@
 import {createLogger, type AlwatrLogger} from '@alwatr/logger';
 
+import type {LitElement, PropertyValues} from '../lit.js';
 import type {Constructor} from '@alwatr/type';
-import type {LitElement, PropertyValues} from 'lit';
 
 export declare class LoggerMixinInterface extends LitElement {
   protected _logger: AlwatrLogger;
diff --git a/ui/element/src/mixins/signal.ts b/ui/element/src/mixins/signal.ts
index 82979eac1..38ccf0416 100644
--- a/ui/element/src/mixins/signal.ts
+++ b/ui/element/src/mixins/signal.ts
@@ -1,14 +1,17 @@
 import {unsubscribe} from '@alwatr/signal/core.js';
 
+import {LoggerMixinInterface} from './logging.js';
+
 import type {ListenerSpec} from '@alwatr/signal/type.js';
 import type {Constructor} from '@alwatr/type';
-import type {LitElement} from 'lit';
 
-export declare class SignalMixinInterface extends LitElement {
+export declare class SignalMixinInterface extends LoggerMixinInterface {
   protected _signalListenerList: Array<ListenerSpec>;
 }
 
-export function SignalMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<SignalMixinInterface> & T {
+export function SignalMixin<T extends Constructor<LoggerMixinInterface>>(
+    superClass: T,
+): Constructor<SignalMixinInterface> & T {
   class SignalMixinClass extends superClass {
     protected _signalListenerList: Array<ListenerSpec> = [];
 
diff --git a/ui/element/src/pwa-element.ts b/ui/element/src/pwa-element.ts
index 7bf171eca..707b7b0f6 100644
--- a/ui/element/src/pwa-element.ts
+++ b/ui/element/src/pwa-element.ts
@@ -32,23 +32,20 @@ export class AlwatrPwaElement extends AlwatrSmartElement {
     }
   `;
 
-  protected _routes: RoutesConfig = {
+  protected _routesConfig: RoutesConfig = {
     routeId: (route) => route.sectionList[0]?.toString(),
     templates: {
       home: () => html`<h1>Page Home ;)</h1>`,
-      _404: () => html`404, Not found!`,
+      _404: () => html`<h1>404, Not found!</h1>`,
     },
   };
 
-  constructor() {
-    super();
-    this._initLocale();
-    localeContextConsumer.subscribe(this._routeChanged.bind(this));
-  }
-
-  protected _initLocale(): void {
-    this._logger.logMethod('_initLocale');
-    setLocale('fa');
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this._signalListenerList.push(localeContextConsumer.subscribe(this._routeChanged.bind(this)));
+    if (localeContextConsumer.getValue() === undefined) {
+      setLocale('fa');
+    }
   }
 
   protected _routeChanged(): void {
@@ -58,7 +55,7 @@ export class AlwatrPwaElement extends AlwatrSmartElement {
 
   override render(): unknown {
     super.render();
-    return html`<div class="page-container">${cache(routerOutlet(this._routes))}</div>`;
+    return html`<div class="page-container">${cache(routerOutlet(this._routesConfig))}</div>`;
   }
 
   protected override firstUpdated(changedProperties: PropertyValues<this>): void {