Merge pull request #130 from AliMD/feat/element

New package: element

.eslintrc.yaml

@@ -42,6 +42,9 @@ rules:
     - allowIndirect: true
   no-floating-decimal: error
   space-infix-ops: error
+  new-cap:
+    - error
+    - capIsNewExceptionPattern: 'Mixin$'
   "@typescript-eslint/explicit-function-return-type": error
   "import/order":
     - error

package/element/README.md

@@ -0,0 +1,5 @@
+# @alwatr/element
+
+Elegant powerful web component (lit-element) helper mixins written in tiny TypeScript module.
+
+<!-- @TODO: ## Example usage -->

package/element/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@alwatr/element",
+  "version": "0.0.0",
+  "description": "Elegant powerful web component (lit-element) helper mixins written in tiny TypeScript module.",
+  "keywords": [
+    "element",
+    "lit",
+    "lit-element",
+    "web-component",
+    "mixin",
+    "typescript",
+    "esm",
+    "alwatr"
+  ],
+  "main": "element.js",
+  "type": "module",
+  "types": "element.d.ts",
+  "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
+  "license": "MIT",
+  "files": [
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AliMD/alwatr",
+    "directory": "package/element"
+  },
+  "homepage": "https://github.com/AliMD/alwatr/tree/main/package/element#readme",
+  "bugs": {
+    "url": "https://github.com/AliMD/alwatr/issues"
+  },
+  "dependencies": {
+    "@alwatr/logger": "^0.10.0",
+    "lit": "^2.2.2",
+    "tslib": "^2.3.1"
+  }
+}

package/element/src/element.ts

@@ -0,0 +1,61 @@
+import {alwatrRegisteredList, createLogger} from '@alwatr/logger';
+import {LitElement} from 'lit';
+
+import type {Constructor} from './type';
+import type {Logger} from '@alwatr/logger/type';
+import type {PropertyValues} from 'lit';
+
+alwatrRegisteredList.push({
+  name: '@alwatr/element',
+  version: '{{ALWATR_VERSION}}',
+});
+
+declare class LoggerMixinInterface extends LitElement {
+  protected _logger: Logger;
+}
+
+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.logMethod('update');
+      super.update(_changedProperties);
+    }
+
+    protected override firstUpdated(_changedProperties: PropertyValues): void {
+      this._logger.logMethod('firstUpdated');
+      super.firstUpdated(_changedProperties);
+    }
+
+    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 const AlwatrElement = LoggerMixin(LitElement);

package/element/src/type.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+export type Constructor<ClassType = {}> = new (...args: any[]) => ClassType;

package/element/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": ".tsbuildinfo",
+    "rootDir": "src",
+    "outDir": ".",
+  },
+  // files, include and exclude from the inheriting config are always overwritten.
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [],
+  "references": [
+    { "path": "../logger" },
+  ]
+}

package/fetch/package.json

@@ -17,11 +17,7 @@
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

package/i18n/package.json

@@ -17,11 +17,7 @@
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

package/logger/package.json

@@ -17,11 +17,7 @@
   "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

package/math/package.json

@@ -16,11 +16,7 @@
   "contributors": [],
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

package/router/package.json

@@ -17,11 +17,7 @@
   "contributors": [],
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

package/signal/package.json

@@ -17,11 +17,7 @@
   ],
   "license": "MIT",
   "files": [
-    "**/*.js",
-    "**/*.d.ts",
-    "**/*.map",
-    "**/*.html",
-    "**/*.md"
+    "**/*.{d.ts.map,d.ts,js.map,js,html,md}"
   ],
   "publishConfig": {
     "access": "public"

yarn.lock

@@ -740,6 +740,11 @@
     npmlog "^4.1.2"
     write-file-atomic "^3.0.3"
 
+"@lit/reactive-element@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.3.1.tgz#3021ad0fa30a75a41212c5e7f1f169c5762ef8bb"
+  integrity sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1143,6 +1148,11 @@
     "@types/mime" "^1"
     "@types/node" "*"
 
+"@types/trusted-types@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.2.tgz#fc25ad9943bcac11cceb8168db4f275e0e72e756"
+  integrity sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==
+
 "@types/ws@^7.4.0":
   version "7.4.7"
   resolved "https://registry.yarnpkg.com/@types/ws/-/ws-7.4.7.tgz#f7c390a36f7a0679aa69de2d501319f4f8d9b702"
@@ -4011,6 +4021,30 @@ lit-analyzer@1.2.1:
     vscode-html-languageservice "3.1.0"
     web-component-analyzer "~1.1.1"
 
+lit-element@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.2.0.tgz#9c981c55dfd9a8f124dc863edb62cc529d434db7"
+  integrity sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-html "^2.2.0"
+
+lit-html@^2.2.0:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.2.2.tgz#06ced65dd3fb2d7a214d998c65acc576ae2cb3c4"
+  integrity sha512-cJofCRXuizwyaiGt9pJjJOcauezUlSB6t87VBXsPwRhbzF29MgD8GH6fZ0BuZdXAAC02IRONZBd//VPUuU8QbQ==
+  dependencies:
+    "@types/trusted-types" "^2.0.2"
+
+lit@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.2.2.tgz#b7f729d6ca7e17efbf2bf589df2d5eb04d9620ba"
+  integrity sha512-eN3+2QRHn/erxYB88AXiiRgQA6RltE9MhzySCwX+ACOxA/MLWN3VdXvcbZD9PN09zmUwlgzDvW3T84YWj2Sa0A==
+  dependencies:
+    "@lit/reactive-element" "^1.3.0"
+    lit-element "^3.2.0"
+    lit-html "^2.2.0"
+
 load-json-file@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"