@nexim/element/dist/main.mjs

Utility functions and mixins for building high-performance web components with Lit.

/* @nexim/element v2.0.3 */

// src/main.ts
import { packageTracer } from "@alwatr/package-tracer";

// src/mixin/light-dom.ts
function lightDomMixin(superClass) {
  class MixinClass extends superClass {
    /**
     * 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;
    }
    /**
     * Called when the element is added to the document's DOM.
     * Adds the light DOM styles to the document head.
     */
    connectedCallback() {
      super.connectedCallback();
      MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor);
    }
  }
  return MixinClass;
}

// src/mixin/logging.ts
import { createLogger } from "@alwatr/logger";
var elementIndex = 0;
function loggerMixin(superClass) {
  return class MixinClass extends superClass {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    constructor(...args) {
      super(...args);
      /**
       * 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__.toString()}>`);
      this.logger_.logMethod?.("constructor");
    }
    connectedCallback() {
      this.logger_.logMethod?.("connectedCallback");
      super.connectedCallback();
    }
    disconnectedCallback() {
      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");
      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__) {
        this.logger_.timeEnd?.("update-time");
      } else {
        this.firstUpdated__ = true;
      }
      super.updated(changedProperties);
    }
    render() {
      this.logger_.logMethod?.("render");
      return;
    }
    dispatchEvent(event) {
      this.logger_.logMethodArgs?.("dispatchEvent", {
        type: event.type,
        detail: event.detail
      });
      return super.dispatchEvent(event);
    }
    remove() {
      this.logger_.logMethod?.("remove");
      super.remove();
    }
  };
}

// src/main.ts
__dev_mode__: packageTracer.add("@nexim/element", "2.0.3");
export {
  lightDomMixin,
  loggerMixin
};
//# sourceMappingURL=main.mjs.map