@nexim/element 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.2](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.1...@nexim/element@1.0.2) (2024-12-07)
+
+### Bug Fixes
+
+* **element:** default mixin type ([#12](https://github.com/the-nexim/nanolib/issues/12)) ([ec0966d](https://github.com/the-nexim/nanolib/commit/ec0966d28e4172eec4879bbc273c1b9fd50ab800)) by @arashagp
+
+## [1.0.1](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.0...@nexim/element@1.0.1) (2024-12-07)
+
+### Bug Fixes
+
+* **element/logging-mixin:** remove extra field in type and make some part private ([9774abb](https://github.com/the-nexim/nanolib/commit/9774abbfbbba8ed539138d8f50127933cdcc791a)) by @njfamirm
+
+### Code Refactoring
+
+* **element/light-dom:** move style utils to class as static property ([7532dc7](https://github.com/the-nexim/nanolib/commit/7532dc738b8d8e66c9ee12c75485dd30ca32a897)) by @njfamirm
+
+### Miscellaneous Chores
+
+* **element/type:** move to root ([433a1c0](https://github.com/the-nexim/nanolib/commit/433a1c057edc8ae797f75db4bcb3d1c846a033bc)) by @njfamirm
+* **element:** exclude test files from package distribution ([d308a17](https://github.com/the-nexim/nanolib/commit/d308a1724e12b1a5738352f5b8cd9bae0c7e225a)) by @njfamirm
+* **element:** move lit to the devDependency because use as type ([fd5f879](https://github.com/the-nexim/nanolib/commit/fd5f879d964b710ee76b8f7a59375d7f708991d0)) by @njfamirm
+* **element:** remove base element ([94047d4](https://github.com/the-nexim/nanolib/commit/94047d45e15df99d03605b82a4708cc735fe99ed)) by @njfamirm
+
 ## 1.0.0 (2024-12-04)
 
 ### Features

package/README.md

@@ -1 +1,60 @@
-# Element
+# @nexim/element
+
+![NPM Version](https://img.shields.io/npm/v/%40nexim%2Felement)
+![npm bundle size](https://img.shields.io/bundlephobia/min/%40nexim%2Felement)
+![Build & Lint & Test](https://github.com/the-nexim/nanolib/actions/workflows/build-lint-test.yaml/badge.svg)
+![NPM Downloads](https://img.shields.io/npm/dm/%40nexim%2Felement)
+![NPM License](https://img.shields.io/npm/l/%40nexim%2Felement)
+
+## Overview
+
+`@nexim/element` is a collection of utility functions and mixins for building high-performance, maintainable web components using Lit.
+
+## Installation
+
+```sh
+npm install @nexim/element
+
+# Or using yarn
+yarn add @nexim/element
+```
+
+## API
+
+### LoggerMixin
+
+The LoggerMixin adds logging capabilities to your LitElement components. It logs lifecycle methods and measures update times.
+
+```ts
+import {LitElement, html} from 'lit';
+import {LoggerMixin} from '@nexim/element';
+
+class MyElement extends LoggerMixin(LitElement) {
+  protected override render() {
+    super.render(); // must call super method to logger work
+
+    return html`<p>Hello, world!</p>`;
+  }
+}
+```
+
+### LightDomMixin
+
+The LightDomMixin enables light DOM rendering and style encapsulation for LitElement components.
+
+```ts
+import {LitElement, html, css} from 'lit';
+import {LightDomMixin} from '@nexim/element';
+
+class MyLightDomElement extends LightDomMixin(LitElement) {
+  static styles = css`
+    p {
+      color: blue;
+    }
+  `;
+
+  protected override render() {
+    return html`<p>Hello, light DOM!</p>`;
+  }
+}
+```

package/dist/main.cjs

@@ -1,4 +1,4 @@
-/* @nexim/element v1.0.0 */
+/* @nexim/element v1.0.2 */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,69 +21,74 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/main.ts
 var main_exports = {};
 __export(main_exports, {
-  BaseElement: () => BaseElement,
   LightDomMixin: () => LightDomMixin,
-  LoggerMixin: () => LoggerMixin,
-  lightDomStyles: () => lightDomStyles
+  LoggerMixin: () => LoggerMixin
 });
 module.exports = __toCommonJS(main_exports);
 var import_package_tracer = require("@alwatr/package-tracer");
 
-// src/lib/base-element.ts
-var import_lit = require("lit");
-
-// src/lib/logger.ts
-var import_logger = require("@alwatr/logger");
-var logger = /* @__PURE__ */ (0, import_logger.createLogger)("common/component");
-
-// src/lib/lit-light-dom-style.ts
-function flatCssText(styles) {
-  logger.logMethod?.("flatCssText");
-  if (styles === void 0) return "";
-  if ("cssText" in styles) return styles.cssText.trim();
-  if (Array.isArray(styles)) {
-    return styles.map((style) => "cssText" in style ? style.cssText : flatCssText(style)).join("\n").trim();
-  }
-  return "";
-}
-function lightDomStyles(tagName, element) {
-  const className = `${tagName}-light-dom-style`;
-  if (document.querySelector(`style.${className}`) !== null) return;
-  const cssText = flatCssText(element.styles);
-  if (cssText === "") return;
-  logger.logMethodArgs?.("lightDomStyles", { tagName });
-  const styleEl = document.createElement("style");
-  styleEl.classList.add(className);
-  styleEl.innerHTML = cssText;
-  document.head.append(styleEl);
-}
-
 // src/mixin/light-dom.ts
 function LightDomMixin(superClass) {
   class MixinClass extends superClass {
-    // Render template into light DOM
+    /**
+     * Flattens the CSSResultGroup into a single string of CSS text.
+     * @param styles - The styles to flatten.
+     * @returns A string of concatenated CSS text.
+     */
+    static flatCssText(styles) {
+      if (styles === void 0) return "";
+      if ("cssText" in styles) return styles.cssText.trim();
+      if (Array.isArray(styles)) {
+        return styles.map((style) => "cssText" in style ? style.cssText : MixinClass.flatCssText(style)).join("\n").trim();
+      }
+      return "";
+    }
+    /**
+     * Injects light DOM styles into the document head if not already present.
+     *
+     * @param tagName - The tag name of the custom element.
+     * @param element - The element class containing the styles.
+     */
+    static lightDomStyles(tagName, element) {
+      const className = `${tagName}-light-dom-style`;
+      if (document.querySelector(`style.${className}`) !== null) return;
+      const cssText = MixinClass.flatCssText(element.styles);
+      if (cssText === "") return;
+      const styleEl = document.createElement("style");
+      styleEl.classList.add(className);
+      styleEl.innerHTML = cssText;
+      document.head.append(styleEl);
+    }
+    /**
+     * Overrides the default render root to use the light DOM.
+     */
     createRenderRoot() {
       return this;
     }
-    // Add light dom class when the element is connected to the DOM
+    /**
+     * Called when the element is added to the document's DOM.
+     * Adds the light DOM styles to the document head.
+     */
     connectedCallback() {
       super.connectedCallback();
-      lightDomStyles(this.localName, this.constructor);
+      MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor);
     }
   }
   return MixinClass;
 }
 
 // src/mixin/logging.ts
-var import_logger3 = require("@alwatr/logger");
+var import_logger = require("@alwatr/logger");
 var elementIndex = 0;
 function LoggerMixin(superClass) {
   class MixinClass extends superClass {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(...args) {
       super(...args);
-      this.elementIndex_ = ++elementIndex;
-      this.logger_ = (0, import_logger3.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex_}>`);
+      // Unique index for each element instance
+      this.elementIndex__ = ++elementIndex;
+      // Logger instance with a tag name and unique index
+      this.logger_ = (0, import_logger.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
       this.logger_.logMethod?.("constructor");
     }
     connectedCallback() {
@@ -94,22 +99,25 @@ function LoggerMixin(superClass) {
       this.logger_.logMethod?.("disconnectedCallback");
       super.disconnectedCallback();
     }
+    // Override update to measure update time
     update(changedProperties) {
       this.logger_.logMethodArgs?.("update", { changedProperties });
-      this.logger_.time?.(this._$firstUpdated ? "update-time" : "first-update-time");
+      this.logger_.time?.(this.firstUpdated__ ? "update-time" : "first-update-time");
       super.update(changedProperties);
     }
+    // Override firstUpdated to end the first update time measurement
     firstUpdated(changedProperties) {
       this.logger_.logMethodArgs?.("firstUpdated", { changedProperties });
       this.logger_.timeEnd?.("first-update-time");
       super.firstUpdated(changedProperties);
     }
+    // Override updated to end the update time measurement
     updated(changedProperties) {
       this.logger_.logMethodArgs?.("updated", { changedProperties });
-      if (this._$firstUpdated) {
+      if (this.firstUpdated__) {
         this.logger_.timeEnd?.("update-time");
       } else {
-        this._$firstUpdated = true;
+        this.firstUpdated__ = true;
       }
       super.updated(changedProperties);
     }
@@ -132,17 +140,12 @@ function LoggerMixin(superClass) {
   return MixinClass;
 }
 
-// src/lib/base-element.ts
-var BaseElement = LightDomMixin(LoggerMixin(import_lit.LitElement));
-
 // src/main.ts
-__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.0");
+__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.2");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BaseElement,
   LightDomMixin,
-  LoggerMixin,
-  lightDomStyles
+  LoggerMixin
 });
 /*! For license information please see main.cjs.LEGAL.txt */
 //# sourceMappingURL=main.cjs.map

package/dist/main.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/main.ts", "../src/lib/base-element.ts", "../src/lib/logger.ts", "../src/lib/lit-light-dom-style.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
-  "sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\nexport * from './lib/base-element.js';\nexport * from './lib/lit-light-dom-style.js';\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n", "import {LitElement} from 'lit';\n\nimport {LightDomMixin} from '../mixin/light-dom.js';\nimport {LoggerMixin} from '../mixin/logging.js';\n\nexport const BaseElement = LightDomMixin(LoggerMixin(LitElement));\n", "import {createLogger} from '@alwatr/logger';\n\nexport const logger = /* @__PURE__ */ createLogger('common/component');\n", "import {logger} from './logger.js';\n\nimport type {CSSResultGroup, ReactiveElement} from 'lit';\n\nfunction flatCssText(styles?: CSSResultGroup): string {\n  logger.logMethod?.('flatCssText');\n\n  if (styles === undefined) return '';\n  if ('cssText' in styles) return styles.cssText.trim();\n  if (Array.isArray(styles)) {\n    return styles\n      .map((style) => ('cssText' in style ? style.cssText : flatCssText(style)))\n      .join('\\n')\n      .trim();\n  }\n  return '';\n}\n\nexport function lightDomStyles(tagName: string, element: typeof ReactiveElement): void {\n  const className = `${tagName}-light-dom-style`;\n  if (document.querySelector(`style.${className}`) !== null) return;\n\n  const cssText = flatCssText(element.styles);\n  if (cssText === '') return;\n  logger.logMethodArgs?.('lightDomStyles', {tagName});\n\n  const styleEl = document.createElement('style');\n  styleEl.classList.add(className);\n  styleEl.innerHTML = cssText;\n  document.head.append(styleEl);\n}\n", "import {lightDomStyles} from '../lib/lit-light-dom-style.js';\n\nimport type {Constructor} from '../lib/type.js';\nimport type {LitElement} from 'lit';\n\nexport function LightDomMixin<T extends Constructor<LitElement>>(superClass: T): T {\n  class MixinClass extends superClass {\n    // Render template into light DOM\n    override createRenderRoot() {\n      return this;\n    }\n\n    // Add light dom class when the element is connected to the DOM\n    override connectedCallback() {\n      super.connectedCallback();\n      lightDomStyles(this.localName, this.constructor as typeof LitElement);\n    }\n  }\n\n  return MixinClass as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../lib/type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\nlet elementIndex = 0;\n\nexport declare class LoggerMixinInterface extends LitElement {\n  /**\n   * Logger index!\n   *\n   * Element index for logger ;)\n   */\n  elementIndex_: number;\n\n  protected logger_: AlwatrLogger;\n}\n\nexport function LoggerMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T {\n  class MixinClass extends superClass {\n    protected elementIndex_: number = ++elementIndex;\n    protected logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex_}>`);\n\n    private _$firstUpdated?: true;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this.logger_.logMethod?.('constructor');\n    }\n\n    override connectedCallback(): void {\n      this.logger_.logMethod?.('connectedCallback');\n      super.connectedCallback();\n    }\n\n    override disconnectedCallback(): void {\n      this.logger_.logMethod?.('disconnectedCallback');\n      super.disconnectedCallback();\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('update', {changedProperties});\n      this.logger_.time?.(this._$firstUpdated ? 'update-time' : 'first-update-time');\n      super.update(changedProperties);\n    }\n\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('firstUpdated', {changedProperties});\n      this.logger_.timeEnd?.('first-update-time');\n      super.firstUpdated(changedProperties);\n    }\n\n    protected override updated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('updated', {changedProperties});\n\n      if (this._$firstUpdated) {\n        this.logger_.timeEnd?.('update-time');\n      }\n      else {\n        this._$firstUpdated = true;\n      }\n\n      super.updated(changedProperties);\n    }\n\n    protected override render(): unknown {\n      this.logger_.logMethod?.('render');\n      return;\n    }\n\n    override dispatchEvent(event: Event): boolean {\n      this.logger_.logMethodArgs?.('dispatchEvent', {\n        type: event.type,\n        detail: (event as Event & {detail?: unknown}).detail,\n      });\n      return super.dispatchEvent(event);\n    }\n\n    override remove(): void {\n      this.logger_.logMethod?.('remove');\n      super.remove();\n    }\n  }\n\n  return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA4B;;;ACA5B,iBAAyB;;;ACAzB,oBAA2B;AAEpB,IAAM,SAAyB,gDAAa,kBAAkB;;;ACErE,SAAS,YAAY,QAAiC;AACpD,SAAO,YAAY,aAAa;AAEhC,MAAI,WAAW,OAAW,QAAO;AACjC,MAAI,aAAa,OAAQ,QAAO,OAAO,QAAQ,KAAK;AACpD,MAAI,MAAM,QAAQ,MAAM,GAAG;AACzB,WAAO,OACJ,IAAI,CAAC,UAAW,aAAa,QAAQ,MAAM,UAAU,YAAY,KAAK,CAAE,EACxE,KAAK,IAAI,EACT,KAAK;AAAA,EACV;AACA,SAAO;AACT;AAEO,SAAS,eAAe,SAAiB,SAAuC;AACrF,QAAM,YAAY,GAAG,OAAO;AAC5B,MAAI,SAAS,cAAc,SAAS,SAAS,EAAE,MAAM,KAAM;AAE3D,QAAM,UAAU,YAAY,QAAQ,MAAM;AAC1C,MAAI,YAAY,GAAI;AACpB,SAAO,gBAAgB,kBAAkB,EAAC,QAAO,CAAC;AAElD,QAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,UAAQ,UAAU,IAAI,SAAS;AAC/B,UAAQ,YAAY;AACpB,WAAS,KAAK,OAAO,OAAO;AAC9B;;;ACzBO,SAAS,cAAiD,YAAkB;AAAA,EACjF,MAAM,mBAAmB,WAAW;AAAA;AAAA,IAEzB,mBAAmB;AAC1B,aAAO;AAAA,IACT;AAAA;AAAA,IAGS,oBAAoB;AAC3B,YAAM,kBAAkB;AACxB,qBAAe,KAAK,WAAW,KAAK,WAAgC;AAAA,IACtE;AAAA,EACF;AAEA,SAAO;AACT;;;ACpBA,IAAAA,iBAA8C;AAK9C,IAAI,eAAe;AAaZ,SAAS,YAA+C,YAAsD;AAAA,EACnH,MAAM,mBAAmB,WAAW;AAAA;AAAA,IAOlC,eAAe,MAAa;AAC1B,YAAM,GAAG,IAAI;AAPf,WAAU,gBAAwB,EAAE;AACpC,WAAU,cAAU,6BAAa,IAAI,KAAK,QAAQ,YAAY,CAAC,IAAI,KAAK,aAAa,GAAG;AAOtF,WAAK,QAAQ,YAAY,aAAa;AAAA,IACxC;AAAA,IAES,oBAA0B;AACjC,WAAK,QAAQ,YAAY,mBAAmB;AAC5C,YAAM,kBAAkB;AAAA,IAC1B;AAAA,IAES,uBAA6B;AACpC,WAAK,QAAQ,YAAY,sBAAsB;AAC/C,YAAM,qBAAqB;AAAA,IAC7B;AAAA,IAEmB,OAAO,mBAAyC;AACjE,WAAK,QAAQ,gBAAgB,UAAU,EAAC,kBAAiB,CAAC;AAC1D,WAAK,QAAQ,OAAO,KAAK,iBAAiB,gBAAgB,mBAAmB;AAC7E,YAAM,OAAO,iBAAiB;AAAA,IAChC;AAAA,IAEmB,aAAa,mBAAyC;AACvE,WAAK,QAAQ,gBAAgB,gBAAgB,EAAC,kBAAiB,CAAC;AAChE,WAAK,QAAQ,UAAU,mBAAmB;AAC1C,YAAM,aAAa,iBAAiB;AAAA,IACtC;AAAA,IAEmB,QAAQ,mBAAyC;AAClE,WAAK,QAAQ,gBAAgB,WAAW,EAAC,kBAAiB,CAAC;AAE3D,UAAI,KAAK,gBAAgB;AACvB,aAAK,QAAQ,UAAU,aAAa;AAAA,MACtC,OACK;AACH,aAAK,iBAAiB;AAAA,MACxB;AAEA,YAAM,QAAQ,iBAAiB;AAAA,IACjC;AAAA,IAEmB,SAAkB;AACnC,WAAK,QAAQ,YAAY,QAAQ;AACjC;AAAA,IACF;AAAA,IAES,cAAc,OAAuB;AAC5C,WAAK,QAAQ,gBAAgB,iBAAiB;AAAA,QAC5C,MAAM,MAAM;AAAA,QACZ,QAAS,MAAqC;AAAA,MAChD,CAAC;AACD,aAAO,MAAM,cAAc,KAAK;AAAA,IAClC;AAAA,IAES,SAAe;AACtB,WAAK,QAAQ,YAAY,QAAQ;AACjC,YAAM,OAAO;AAAA,IACf;AAAA,EACF;AAEA,SAAO;AACT;;;AJjFO,IAAM,cAAc,cAAc,YAAY,qBAAU,CAAC;;;ADEhE,aAAc,qCAAc,IAAI,kBAAkB,OAAmB;",
-  "names": ["import_logger"]
+  "sources": ["../src/main.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
+  "sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\n// Ensure only single version of this package use in the project (only check in development environment).\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type {Constructor} from '../type.js';\nimport type {LitElement, CSSResultGroup, ReactiveElement} from 'lit';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n *\n * @param superClass - The base class to extend.\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * import {LitElement, html, css} from 'lit';\n * import {LightDomMixin} from '@nexim/element';\n *\n * class MyLightDomElement extends LightDomMixin(LitElement) {\n *   static styles = css`\n *     p {\n *       color: blue;\n *     }\n *   `;\n *\n *   protected override render() {\n *     return html`<p>Hello, light DOM!</p>`;\n *   }\n * }\n */\nexport function LightDomMixin<T extends Constructor<LitElement> = Constructor<LitElement>>\n(superClass: T): T {\n  class MixinClass extends superClass {\n    /**\n     * Flattens the CSSResultGroup into a single string of CSS text.\n     * @param styles - The styles to flatten.\n     * @returns A string of concatenated CSS text.\n     */\n    static flatCssText(styles?: CSSResultGroup): string {\n      if (styles === undefined) return '';\n      if ('cssText' in styles) return styles.cssText.trim();\n      if (Array.isArray(styles)) {\n        return styles\n          .map((style) => ('cssText' in style ? style.cssText : MixinClass.flatCssText(style)))\n          .join('\\n')\n          .trim();\n      }\n      return '';\n    }\n\n    /**\n     * Injects light DOM styles into the document head if not already present.\n     *\n     * @param tagName - The tag name of the custom element.\n     * @param element - The element class containing the styles.\n     */\n    static lightDomStyles(tagName: string, element: typeof ReactiveElement): void {\n      const className = `${tagName}-light-dom-style`;\n      if (document.querySelector(`style.${className}`) !== null) return;\n\n      const cssText = MixinClass.flatCssText(element.styles);\n      if (cssText === '') return;\n\n      const styleEl = document.createElement('style');\n      styleEl.classList.add(className);\n      styleEl.innerHTML = cssText;\n      document.head.append(styleEl);\n    }\n\n    /**\n     * Overrides the default render root to use the light DOM.\n     */\n    override createRenderRoot() {\n      return this;\n    }\n\n    /**\n     * Called when the element is added to the document's DOM.\n     * Adds the light DOM styles to the document head.\n     */\n    override connectedCallback() {\n      super.connectedCallback();\n      MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor as typeof LitElement);\n    }\n  }\n\n  return MixinClass as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\n// Global element index to uniquely identify each element instance\nlet elementIndex = /* @__PURE__ */ 0;\n\n// Declaration of the LoggerMixinInterface class extending LitElement\nexport declare class LoggerMixinInterface extends LitElement {\n  // Logger instance for the element\n  protected logger_: AlwatrLogger;\n}\n\n/**\n * Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.\n *\n * Hint: function super() must be called in the methods to logger work.\n *\n * @param superClass - The base class to extend.\n * @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.\n *\n * @example\n * import {LitElement, html} from 'lit';\n * import {LoggerMixin} from '@nexim/element';\n *\n * class MyElement extends LoggerMixin(LitElement) {\n *   protected override render() {\n *     super.render(); // must call super method to logger work\n *\n *     return html`<p>Hello, world!</p>`;\n *   }\n * }\n */\nexport function LoggerMixin<T extends Constructor<LitElement> = Constructor<LitElement>>\n(superClass: T): Constructor<LoggerMixinInterface> & T {\n  class MixinClass extends superClass {\n    // Unique index for each element instance\n    private elementIndex__: number = ++elementIndex;\n\n    // Logger instance with a tag name and unique index\n    protected logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);\n\n    private firstUpdated__?: true;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this.logger_.logMethod?.('constructor');\n    }\n\n    override connectedCallback(): void {\n      this.logger_.logMethod?.('connectedCallback');\n      super.connectedCallback();\n    }\n\n    override disconnectedCallback(): void {\n      this.logger_.logMethod?.('disconnectedCallback');\n      super.disconnectedCallback();\n    }\n\n    // Override update to measure update time\n    protected override update(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('update', {changedProperties});\n      this.logger_.time?.(this.firstUpdated__ ? 'update-time' : 'first-update-time');\n      super.update(changedProperties);\n    }\n\n    // Override firstUpdated to end the first update time measurement\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('firstUpdated', {changedProperties});\n      this.logger_.timeEnd?.('first-update-time');\n      super.firstUpdated(changedProperties);\n    }\n\n    // Override updated to end the update time measurement\n    protected override updated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('updated', {changedProperties});\n\n      if (this.firstUpdated__) {\n        this.logger_.timeEnd?.('update-time');\n      }\n      else {\n        this.firstUpdated__ = true;\n      }\n\n      super.updated(changedProperties);\n    }\n\n    protected override render(): unknown {\n      this.logger_.logMethod?.('render');\n      return;\n    }\n\n    override dispatchEvent(event: Event): boolean {\n      this.logger_.logMethodArgs?.('dispatchEvent', {\n        type: event.type,\n        detail: (event as Event & {detail?: unknown}).detail,\n      });\n      return super.dispatchEvent(event);\n    }\n\n    override remove(): void {\n      this.logger_.logMethod?.('remove');\n      super.remove();\n    }\n  }\n\n  return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist/main.d.ts

@@ -1,5 +1,3 @@
-export * from './lib/base-element.js';
-export * from './lib/lit-light-dom-style.js';
 export * from './mixin/light-dom.js';
 export * from './mixin/logging.js';
 //# sourceMappingURL=main.d.ts.map

package/dist/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAEA,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAKA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}

package/dist/main.mjs

@@ -1,63 +1,70 @@
-/* @nexim/element v1.0.0 */
+/* @nexim/element v1.0.2 */
 
 // src/main.ts
 import { packageTracer } from "@alwatr/package-tracer";
 
-// src/lib/base-element.ts
-import { LitElement } from "lit";
-
-// src/lib/logger.ts
-import { createLogger } from "@alwatr/logger";
-var logger = /* @__PURE__ */ createLogger("common/component");
-
-// src/lib/lit-light-dom-style.ts
-function flatCssText(styles) {
-  logger.logMethod?.("flatCssText");
-  if (styles === void 0) return "";
-  if ("cssText" in styles) return styles.cssText.trim();
-  if (Array.isArray(styles)) {
-    return styles.map((style) => "cssText" in style ? style.cssText : flatCssText(style)).join("\n").trim();
-  }
-  return "";
-}
-function lightDomStyles(tagName, element) {
-  const className = `${tagName}-light-dom-style`;
-  if (document.querySelector(`style.${className}`) !== null) return;
-  const cssText = flatCssText(element.styles);
-  if (cssText === "") return;
-  logger.logMethodArgs?.("lightDomStyles", { tagName });
-  const styleEl = document.createElement("style");
-  styleEl.classList.add(className);
-  styleEl.innerHTML = cssText;
-  document.head.append(styleEl);
-}
-
 // src/mixin/light-dom.ts
 function LightDomMixin(superClass) {
   class MixinClass extends superClass {
-    // Render template into light DOM
+    /**
+     * Flattens the CSSResultGroup into a single string of CSS text.
+     * @param styles - The styles to flatten.
+     * @returns A string of concatenated CSS text.
+     */
+    static flatCssText(styles) {
+      if (styles === void 0) return "";
+      if ("cssText" in styles) return styles.cssText.trim();
+      if (Array.isArray(styles)) {
+        return styles.map((style) => "cssText" in style ? style.cssText : MixinClass.flatCssText(style)).join("\n").trim();
+      }
+      return "";
+    }
+    /**
+     * Injects light DOM styles into the document head if not already present.
+     *
+     * @param tagName - The tag name of the custom element.
+     * @param element - The element class containing the styles.
+     */
+    static lightDomStyles(tagName, element) {
+      const className = `${tagName}-light-dom-style`;
+      if (document.querySelector(`style.${className}`) !== null) return;
+      const cssText = MixinClass.flatCssText(element.styles);
+      if (cssText === "") return;
+      const styleEl = document.createElement("style");
+      styleEl.classList.add(className);
+      styleEl.innerHTML = cssText;
+      document.head.append(styleEl);
+    }
+    /**
+     * Overrides the default render root to use the light DOM.
+     */
     createRenderRoot() {
       return this;
     }
-    // Add light dom class when the element is connected to the DOM
+    /**
+     * Called when the element is added to the document's DOM.
+     * Adds the light DOM styles to the document head.
+     */
     connectedCallback() {
       super.connectedCallback();
-      lightDomStyles(this.localName, this.constructor);
+      MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor);
     }
   }
   return MixinClass;
 }
 
 // src/mixin/logging.ts
-import { createLogger as createLogger2 } from "@alwatr/logger";
+import { createLogger } from "@alwatr/logger";
 var elementIndex = 0;
 function LoggerMixin(superClass) {
   class MixinClass extends superClass {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     constructor(...args) {
       super(...args);
-      this.elementIndex_ = ++elementIndex;
-      this.logger_ = createLogger2(`<${this.tagName.toLowerCase()}-${this.elementIndex_}>`);
+      // Unique index for each element instance
+      this.elementIndex__ = ++elementIndex;
+      // Logger instance with a tag name and unique index
+      this.logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
       this.logger_.logMethod?.("constructor");
     }
     connectedCallback() {
@@ -68,22 +75,25 @@ function LoggerMixin(superClass) {
       this.logger_.logMethod?.("disconnectedCallback");
       super.disconnectedCallback();
     }
+    // Override update to measure update time
     update(changedProperties) {
       this.logger_.logMethodArgs?.("update", { changedProperties });
-      this.logger_.time?.(this._$firstUpdated ? "update-time" : "first-update-time");
+      this.logger_.time?.(this.firstUpdated__ ? "update-time" : "first-update-time");
       super.update(changedProperties);
     }
+    // Override firstUpdated to end the first update time measurement
     firstUpdated(changedProperties) {
       this.logger_.logMethodArgs?.("firstUpdated", { changedProperties });
       this.logger_.timeEnd?.("first-update-time");
       super.firstUpdated(changedProperties);
     }
+    // Override updated to end the update time measurement
     updated(changedProperties) {
       this.logger_.logMethodArgs?.("updated", { changedProperties });
-      if (this._$firstUpdated) {
+      if (this.firstUpdated__) {
         this.logger_.timeEnd?.("update-time");
       } else {
-        this._$firstUpdated = true;
+        this.firstUpdated__ = true;
       }
       super.updated(changedProperties);
     }
@@ -106,16 +116,11 @@ function LoggerMixin(superClass) {
   return MixinClass;
 }
 
-// src/lib/base-element.ts
-var BaseElement = LightDomMixin(LoggerMixin(LitElement));
-
 // src/main.ts
-__dev_mode__: packageTracer.add("@nexim/element", "1.0.0");
+__dev_mode__: packageTracer.add("@nexim/element", "1.0.2");
 export {
-  BaseElement,
   LightDomMixin,
-  LoggerMixin,
-  lightDomStyles
+  LoggerMixin
 };
 /*! For license information please see main.mjs.LEGAL.txt */
 //# sourceMappingURL=main.mjs.map

package/dist/main.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/main.ts", "../src/lib/base-element.ts", "../src/lib/logger.ts", "../src/lib/lit-light-dom-style.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
-  "sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\nexport * from './lib/base-element.js';\nexport * from './lib/lit-light-dom-style.js';\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n", "import {LitElement} from 'lit';\n\nimport {LightDomMixin} from '../mixin/light-dom.js';\nimport {LoggerMixin} from '../mixin/logging.js';\n\nexport const BaseElement = LightDomMixin(LoggerMixin(LitElement));\n", "import {createLogger} from '@alwatr/logger';\n\nexport const logger = /* @__PURE__ */ createLogger('common/component');\n", "import {logger} from './logger.js';\n\nimport type {CSSResultGroup, ReactiveElement} from 'lit';\n\nfunction flatCssText(styles?: CSSResultGroup): string {\n  logger.logMethod?.('flatCssText');\n\n  if (styles === undefined) return '';\n  if ('cssText' in styles) return styles.cssText.trim();\n  if (Array.isArray(styles)) {\n    return styles\n      .map((style) => ('cssText' in style ? style.cssText : flatCssText(style)))\n      .join('\\n')\n      .trim();\n  }\n  return '';\n}\n\nexport function lightDomStyles(tagName: string, element: typeof ReactiveElement): void {\n  const className = `${tagName}-light-dom-style`;\n  if (document.querySelector(`style.${className}`) !== null) return;\n\n  const cssText = flatCssText(element.styles);\n  if (cssText === '') return;\n  logger.logMethodArgs?.('lightDomStyles', {tagName});\n\n  const styleEl = document.createElement('style');\n  styleEl.classList.add(className);\n  styleEl.innerHTML = cssText;\n  document.head.append(styleEl);\n}\n", "import {lightDomStyles} from '../lib/lit-light-dom-style.js';\n\nimport type {Constructor} from '../lib/type.js';\nimport type {LitElement} from 'lit';\n\nexport function LightDomMixin<T extends Constructor<LitElement>>(superClass: T): T {\n  class MixinClass extends superClass {\n    // Render template into light DOM\n    override createRenderRoot() {\n      return this;\n    }\n\n    // Add light dom class when the element is connected to the DOM\n    override connectedCallback() {\n      super.connectedCallback();\n      lightDomStyles(this.localName, this.constructor as typeof LitElement);\n    }\n  }\n\n  return MixinClass as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../lib/type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\nlet elementIndex = 0;\n\nexport declare class LoggerMixinInterface extends LitElement {\n  /**\n   * Logger index!\n   *\n   * Element index for logger ;)\n   */\n  elementIndex_: number;\n\n  protected logger_: AlwatrLogger;\n}\n\nexport function LoggerMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T {\n  class MixinClass extends superClass {\n    protected elementIndex_: number = ++elementIndex;\n    protected logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex_}>`);\n\n    private _$firstUpdated?: true;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this.logger_.logMethod?.('constructor');\n    }\n\n    override connectedCallback(): void {\n      this.logger_.logMethod?.('connectedCallback');\n      super.connectedCallback();\n    }\n\n    override disconnectedCallback(): void {\n      this.logger_.logMethod?.('disconnectedCallback');\n      super.disconnectedCallback();\n    }\n\n    protected override update(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('update', {changedProperties});\n      this.logger_.time?.(this._$firstUpdated ? 'update-time' : 'first-update-time');\n      super.update(changedProperties);\n    }\n\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('firstUpdated', {changedProperties});\n      this.logger_.timeEnd?.('first-update-time');\n      super.firstUpdated(changedProperties);\n    }\n\n    protected override updated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('updated', {changedProperties});\n\n      if (this._$firstUpdated) {\n        this.logger_.timeEnd?.('update-time');\n      }\n      else {\n        this._$firstUpdated = true;\n      }\n\n      super.updated(changedProperties);\n    }\n\n    protected override render(): unknown {\n      this.logger_.logMethod?.('render');\n      return;\n    }\n\n    override dispatchEvent(event: Event): boolean {\n      this.logger_.logMethodArgs?.('dispatchEvent', {\n        type: event.type,\n        detail: (event as Event & {detail?: unknown}).detail,\n      });\n      return super.dispatchEvent(event);\n    }\n\n    override remove(): void {\n      this.logger_.logMethod?.('remove');\n      super.remove();\n    }\n  }\n\n  return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
-  "mappings": "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",
-  "names": ["createLogger"]
+  "sources": ["../src/main.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
+  "sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\n// Ensure only single version of this package use in the project (only check in development environment).\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type {Constructor} from '../type.js';\nimport type {LitElement, CSSResultGroup, ReactiveElement} from 'lit';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n *\n * @param superClass - The base class to extend.\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * import {LitElement, html, css} from 'lit';\n * import {LightDomMixin} from '@nexim/element';\n *\n * class MyLightDomElement extends LightDomMixin(LitElement) {\n *   static styles = css`\n *     p {\n *       color: blue;\n *     }\n *   `;\n *\n *   protected override render() {\n *     return html`<p>Hello, light DOM!</p>`;\n *   }\n * }\n */\nexport function LightDomMixin<T extends Constructor<LitElement> = Constructor<LitElement>>\n(superClass: T): T {\n  class MixinClass extends superClass {\n    /**\n     * Flattens the CSSResultGroup into a single string of CSS text.\n     * @param styles - The styles to flatten.\n     * @returns A string of concatenated CSS text.\n     */\n    static flatCssText(styles?: CSSResultGroup): string {\n      if (styles === undefined) return '';\n      if ('cssText' in styles) return styles.cssText.trim();\n      if (Array.isArray(styles)) {\n        return styles\n          .map((style) => ('cssText' in style ? style.cssText : MixinClass.flatCssText(style)))\n          .join('\\n')\n          .trim();\n      }\n      return '';\n    }\n\n    /**\n     * Injects light DOM styles into the document head if not already present.\n     *\n     * @param tagName - The tag name of the custom element.\n     * @param element - The element class containing the styles.\n     */\n    static lightDomStyles(tagName: string, element: typeof ReactiveElement): void {\n      const className = `${tagName}-light-dom-style`;\n      if (document.querySelector(`style.${className}`) !== null) return;\n\n      const cssText = MixinClass.flatCssText(element.styles);\n      if (cssText === '') return;\n\n      const styleEl = document.createElement('style');\n      styleEl.classList.add(className);\n      styleEl.innerHTML = cssText;\n      document.head.append(styleEl);\n    }\n\n    /**\n     * Overrides the default render root to use the light DOM.\n     */\n    override createRenderRoot() {\n      return this;\n    }\n\n    /**\n     * Called when the element is added to the document's DOM.\n     * Adds the light DOM styles to the document head.\n     */\n    override connectedCallback() {\n      super.connectedCallback();\n      MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor as typeof LitElement);\n    }\n  }\n\n  return MixinClass as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\n// Global element index to uniquely identify each element instance\nlet elementIndex = /* @__PURE__ */ 0;\n\n// Declaration of the LoggerMixinInterface class extending LitElement\nexport declare class LoggerMixinInterface extends LitElement {\n  // Logger instance for the element\n  protected logger_: AlwatrLogger;\n}\n\n/**\n * Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.\n *\n * Hint: function super() must be called in the methods to logger work.\n *\n * @param superClass - The base class to extend.\n * @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.\n *\n * @example\n * import {LitElement, html} from 'lit';\n * import {LoggerMixin} from '@nexim/element';\n *\n * class MyElement extends LoggerMixin(LitElement) {\n *   protected override render() {\n *     super.render(); // must call super method to logger work\n *\n *     return html`<p>Hello, world!</p>`;\n *   }\n * }\n */\nexport function LoggerMixin<T extends Constructor<LitElement> = Constructor<LitElement>>\n(superClass: T): Constructor<LoggerMixinInterface> & T {\n  class MixinClass extends superClass {\n    // Unique index for each element instance\n    private elementIndex__: number = ++elementIndex;\n\n    // Logger instance with a tag name and unique index\n    protected logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);\n\n    private firstUpdated__?: true;\n\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this.logger_.logMethod?.('constructor');\n    }\n\n    override connectedCallback(): void {\n      this.logger_.logMethod?.('connectedCallback');\n      super.connectedCallback();\n    }\n\n    override disconnectedCallback(): void {\n      this.logger_.logMethod?.('disconnectedCallback');\n      super.disconnectedCallback();\n    }\n\n    // Override update to measure update time\n    protected override update(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('update', {changedProperties});\n      this.logger_.time?.(this.firstUpdated__ ? 'update-time' : 'first-update-time');\n      super.update(changedProperties);\n    }\n\n    // Override firstUpdated to end the first update time measurement\n    protected override firstUpdated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('firstUpdated', {changedProperties});\n      this.logger_.timeEnd?.('first-update-time');\n      super.firstUpdated(changedProperties);\n    }\n\n    // Override updated to end the update time measurement\n    protected override updated(changedProperties: PropertyValues): void {\n      this.logger_.logMethodArgs?.('updated', {changedProperties});\n\n      if (this.firstUpdated__) {\n        this.logger_.timeEnd?.('update-time');\n      }\n      else {\n        this.firstUpdated__ = true;\n      }\n\n      super.updated(changedProperties);\n    }\n\n    protected override render(): unknown {\n      this.logger_.logMethod?.('render');\n      return;\n    }\n\n    override dispatchEvent(event: Event): boolean {\n      this.logger_.logMethodArgs?.('dispatchEvent', {\n        type: event.type,\n        detail: (event as Event & {detail?: unknown}).detail,\n      });\n      return super.dispatchEvent(event);\n    }\n\n    override remove(): void {\n      this.logger_.logMethod?.('remove');\n      super.remove();\n    }\n  }\n\n  return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
+  "mappings": "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",
+  "names": []
 }

package/dist/mixin/light-dom.d.ts

@@ -1,4 +1,26 @@
-import type { Constructor } from '../lib/type.js';
+import type { Constructor } from '../type.js';
 import type { LitElement } from 'lit';
-export declare function LightDomMixin<T extends Constructor<LitElement>>(superClass: T): T;
+/**
+ * A mixin to enable light DOM rendering and style encapsulation for LitElement components.
+ *
+ * @param superClass - The base class to extend.
+ * @returns A class that extends the base class with light DOM functionality.
+ *
+ * @example
+ * import {LitElement, html, css} from 'lit';
+ * import {LightDomMixin} from '@nexim/element';
+ *
+ * class MyLightDomElement extends LightDomMixin(LitElement) {
+ *   static styles = css`
+ *     p {
+ *       color: blue;
+ *     }
+ *   `;
+ *
+ *   protected override render() {
+ *     return html`<p>Hello, light DOM!</p>`;
+ *   }
+ * }
+ */
+export declare function LightDomMixin<T extends Constructor<LitElement> = Constructor<LitElement>>(superClass: T): T;
 //# sourceMappingURL=light-dom.d.ts.map

package/dist/mixin/light-dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAEpC,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,CAejF"}
+{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAC,UAAU,EAAkC,MAAM,KAAK,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC,UAAU,CAAC,EACxF,UAAU,EAAE,CAAC,GAAG,CAAC,CAwDjB"}

package/dist/mixin/logging.d.ts

@@ -1,14 +1,28 @@
 import { type AlwatrLogger } from '@alwatr/logger';
-import type { Constructor } from '../lib/type.js';
+import type { Constructor } from '../type.js';
 import type { LitElement } from 'lit';
 export declare class LoggerMixinInterface extends LitElement {
-    /**
-     * Logger index!
-     *
-     * Element index for logger ;)
-     */
-    elementIndex_: number;
     protected logger_: AlwatrLogger;
 }
-export declare function LoggerMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T;
+/**
+ * Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
+ *
+ * Hint: function super() must be called in the methods to logger work.
+ *
+ * @param superClass - The base class to extend.
+ * @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.
+ *
+ * @example
+ * import {LitElement, html} from 'lit';
+ * import {LoggerMixin} from '@nexim/element';
+ *
+ * class MyElement extends LoggerMixin(LitElement) {
+ *   protected override render() {
+ *     super.render(); // must call super method to logger work
+ *
+ *     return html`<p>Hello, world!</p>`;
+ *   }
+ * }
+ */
+export declare function LoggerMixin<T extends Constructor<LitElement> = Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T;
 //# sourceMappingURL=logging.d.ts.map

package/dist/mixin/logging.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logging.d.ts","sourceRoot":"","sources":["../../src/mixin/logging.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE/D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAIpD,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAC1D;;;;OAIG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC;CACjC;AAED,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,WAAW,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAoEnH"}
+{"version":3,"file":"logging.d.ts","sourceRoot":"","sources":["../../src/mixin/logging.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE/D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMpD,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAE1D,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,GAAG,WAAW,CAAC,UAAU,CAAC,EACtF,UAAU,EAAE,CAAC,GAAG,WAAW,CAAC,oBAAoB,CAAC,GAAG,CAAC,CA0ErD"}

package/dist/type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../src/type.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}

package/package.json

@@ -1,18 +1,14 @@
 {
   "name": "@nexim/element",
-  "version": "1.0.0",
-  "description": "A collection of utility functions and mixins for building high-performance, maintainable web components using Lit.",
+  "version": "1.0.2",
+  "description": "Utility functions and mixins for building high-performance web components with Lit.",
   "keywords": [
     "lit",
-    "element",
-    "web-component",
-    "ECMAScript",
+    "web-components",
+    "mixins",
+    "logger",
+    "light-dom",
     "typescript",
-    "javascript",
-    "browser",
-    "esm",
-    "module",
-    "nanolib",
     "nexim"
   ],
   "homepage": "https://github.com/the-nexim/nanolib/tree/next/packages/element#readme",
@@ -26,6 +22,9 @@
   },
   "license": "AGPL-3.0-only",
   "author": "S. Amir Mohammad Najafi <njfamirm@gmail.com> (www.njfamirm.ir)",
+  "contributors": [
+    "Arash Ghardashpoor <arash.qardashpoor@gmail.com> (https://www.agpagp.ir)"
+  ],
   "type": "module",
   "exports": {
     ".": {
@@ -40,6 +39,7 @@
   "files": [
     "**/*.{js,mjs,cjs,map,d.ts,html,md,LEGAL.txt}",
     "LICENSE",
+    "!**/*.test.js",
     "!demo/**/*"
   ],
   "scripts": {
@@ -60,18 +60,18 @@
   },
   "dependencies": {
     "@alwatr/logger": "^5.0.0",
-    "@alwatr/package-tracer": "^5.0.0",
-    "lit": "^3.2.1"
+    "@alwatr/package-tracer": "^5.0.0"
   },
   "devDependencies": {
     "@alwatr/nano-build": "^5.0.0",
     "@alwatr/type-helper": "^5.0.0",
     "@nexim/typescript-config": "^1.0.0",
     "ava": "^6.2.0",
+    "lit": "^3.2.1",
     "typescript": "^5.6.3"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a0d65b818f0df410b44563e8b9c13524b1d8c681"
+  "gitHead": "995dc07eb79d75aed09d828ee76b028b7523633c"
 }

package/dist/lib/base-element.d.ts

@@ -1,3 +0,0 @@
-import { LitElement } from 'lit';
-export declare const BaseElement: import("./type.js").Constructor<import("../main.js").LoggerMixinInterface> & typeof LitElement;
-//# sourceMappingURL=base-element.d.ts.map

package/dist/lib/base-element.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/lib/base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAK/B,eAAO,MAAM,WAAW,gGAAyC,CAAC"}

package/dist/lib/lit-light-dom-style.d.ts

@@ -1,3 +0,0 @@
-import type { ReactiveElement } from 'lit';
-export declare function lightDomStyles(tagName: string, element: typeof ReactiveElement): void;
-//# sourceMappingURL=lit-light-dom-style.d.ts.map

package/dist/lib/lit-light-dom-style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"lit-light-dom-style.d.ts","sourceRoot":"","sources":["../../src/lib/lit-light-dom-style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,eAAe,EAAC,MAAM,KAAK,CAAC;AAgBzD,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,eAAe,GAAG,IAAI,CAYrF"}

package/dist/lib/logger.d.ts

@@ -1,2 +0,0 @@
-export declare const logger: import("@alwatr/logger").AlwatrLogger;
-//# sourceMappingURL=logger.d.ts.map

package/dist/lib/logger.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,uCAAmD,CAAC"}

package/dist/lib/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/lib/type.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}

package/src/main.test.js

@@ -1,6 +0,0 @@
-import test from 'ava';
-
-// empty test
-test('empty test', (test) => {
-  test.pass();
-});