refactor(element): separate files and review types

ui/element/package.json

@@ -12,9 +12,9 @@
     "esm",
     "alwatr"
   ],
-  "main": "element.js",
+  "main": "index.js",
   "type": "module",
-  "types": "element.d.ts",
+  "types": "index.d.ts",
   "author": "S. Ali Mihandoost <[email protected]> (https://ali.mihandoost.com)",
   "license": "MIT",
   "files": [

ui/element/src/dummy-element.ts

@@ -0,0 +1,10 @@
+import {LitElement} from 'lit';
+
+import {LoggerMixin} from './mixins/logging.js';
+
+/**
+ * Alwatr Dummy Element
+ *
+ * Include: LoggerMixin
+ */
+export const AlwatrDummyElement = LoggerMixin(LitElement);

ui/element/src/element.ts → ui/element/src/index.ts

@@ -1,11 +1,11 @@
 import {alwatrRegisteredList} from '@alwatr/logger';
-import {LitElement} from 'lit';
 
-import {LoggerMixin} from './mixins/logging.js';
-import {SignalMixin} from './mixins/signal.js';
-import {AlwatrRootElement} from './root.js';
+export * from './dummy-element.js';
+export * from './smart-element.js';
+export * from './root-element.js';
 
-export {LoggerMixin, SignalMixin, AlwatrRootElement};
+export * from './mixins/localize.js';
+export * from './mixins/direction.js';
 
 export * from 'lit';
 export * from 'lit/decorators.js';
@@ -21,5 +21,3 @@ alwatrRegisteredList.push({
   version: '{{ALWATR_VERSION}}',
 });
 
-export const AlwatrDummyElement = LoggerMixin(LitElement);
-export const AlwatrSmartElement = SignalMixin(LoggerMixin(LitElement));

ui/element/src/mixins/logging.ts

@@ -1,17 +1,16 @@
 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';
+import type {LitElement, PropertyValues} from 'lit';
 
 export declare class LoggerMixinInterface extends LitElement {
   protected _logger: AlwatrLogger;
 }
 
-export function LoggerMixin<ClassType extends Constructor<LitElement>>(
-    superClass: ClassType,
-): Constructor<LoggerMixinInterface> & ClassType {
+export function LoggerMixin<T extends Constructor<LitElement>>(
+    superClass: T,
+): Constructor<LoggerMixinInterface> & T {
   class LoggerMixinClass extends superClass {
     protected _logger = createLogger(`<${this.tagName.toLowerCase()}>`);
 
@@ -55,5 +54,5 @@ export function LoggerMixin<ClassType extends Constructor<LitElement>>(
     }
   }
 
-  return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & ClassType;
+  return LoggerMixinClass as unknown as Constructor<LoggerMixinInterface> & T;
 }

ui/element/src/mixins/signal.ts

@@ -1,14 +1,13 @@
-import {LitElement} from 'lit';
-
 import type {Constructor} from '../type.js';
+import type {LitElement} from 'lit';
 
 export declare class SignalMixinInterface extends LitElement {
   protected _signalListenerList: Array<unknown>;
 }
 
-export function SignalMixin<ClassType extends Constructor<LitElement>>(
-    superClass: ClassType,
-): Constructor<SignalMixinInterface> & ClassType {
+export function SignalMixin<T extends Constructor<LitElement>>(
+    superClass: T,
+): Constructor<SignalMixinInterface> & T {
   class SignalMixinClass extends superClass {
     protected _signalListenerList: Array<Record<string, unknown>> = [];
 
@@ -23,5 +22,5 @@ export function SignalMixin<ClassType extends Constructor<LitElement>>(
     }
   }
 
-  return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & ClassType;
+  return SignalMixinClass as unknown as Constructor<SignalMixinInterface> & T;
 }

ui/element/src/root.ts → ui/element/src/root-element.ts

@@ -1,17 +1,19 @@
 import {l10n} from '@alwatr/i18n';
 import {router} from '@alwatr/router';
-import {LitElement, html, css} from 'lit';
+import {html, css} from 'lit';
 import {cache} from 'lit/directives/cache.js';
 
-import {LoggerMixin} from './mixins/logging.js';
+import {AlwatrSmartElement} from './smart-element.js';
 
 import type {RoutesConfig} from '@alwatr/router';
 import type {CSSResultGroup} from 'lit';
 
 /**
- * Alwatr Root Base Element
+ * Alwatr Root Element
+ *
+ * Include: AlwatrSmartElement, root styles, router config, multi-page render
  */
-export class AlwatrRootElement extends LoggerMixin(LitElement) {
+export class AlwatrRootElement extends AlwatrSmartElement {
   static override styles: CSSResultGroup = css`
     :host {
       display: flex;

ui/element/src/smart-element.ts

@@ -0,0 +1,9 @@
+import {AlwatrDummyElement} from './dummy-element.js';
+import {SignalMixin} from './mixins/signal.js';
+
+/**
+ * Alwatr Smart Element
+ *
+ * Include: SignalMixin, AlwatrDummyElement
+ */
+export const AlwatrSmartElement = SignalMixin(AlwatrDummyElement);