@nexim/element 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/dist/main.cjs +2 -2
- package/dist/main.cjs.map +2 -2
- package/dist/main.mjs +2 -2
- package/dist/main.mjs.map +2 -2
- package/dist/mixin/light-dom.d.ts +2 -0
- package/dist/mixin/light-dom.d.ts.map +1 -1
- package/dist/mixin/logging.d.ts +2 -0
- package/dist/mixin/logging.d.ts.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,16 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.1.3](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.2...@nexim/element@1.1.3) (2025-01-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @nexim/element
|
|
9
|
+
|
|
10
|
+
## [1.1.2](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.1...@nexim/element@1.1.2) (2025-01-06)
|
|
11
|
+
|
|
12
|
+
### Code Refactoring
|
|
13
|
+
|
|
14
|
+
* use new @nexim/typescript-config api ([6d656b4](https://github.com/the-nexim/nanolib/commit/6d656b483f27d556e59bdcec1220511c5c819cc8)) by @njfamirm
|
|
15
|
+
|
|
6
16
|
## [1.1.1](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.0...@nexim/element@1.1.1) (2025-01-05)
|
|
7
17
|
|
|
8
18
|
### Bug Fixes
|
package/dist/main.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.1.
|
|
1
|
+
/* @nexim/element v1.1.3 */
|
|
2
2
|
"use strict";
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -144,6 +144,6 @@ function LoggerMixin(superClass) {
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
// src/main.ts
|
|
147
|
-
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.1.
|
|
147
|
+
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.1.3");
|
|
148
148
|
/*! For license information please see main.cjs.LEGAL.txt */
|
|
149
149
|
//# sourceMappingURL=main.cjs.map
|
package/dist/main.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/main.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
|
|
4
|
-
"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 {Class} from '@alwatr/type-helper';\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 Class<LitElement> = Class<LitElement>>(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;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Class} from '@alwatr/type-helper';\nimport type {LitElement, PropertyValues} from 'lit';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\nexport interface LoggerMixinInterface extends LitElement {\n 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 Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T {\n return class MixinClass extends superClass {\n /**\n * Unique index for each element instance.\n */\n private elementIndex__: number = ++elementIndex;\n\n /**\n * Logger instance with a tag name and unique index.\n */\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 } as unknown as Class<LoggerMixinInterface> & T; // TypeScript doesn't support protected mixin methods!\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA4B;;;
|
|
4
|
+
"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 {Class} from '@alwatr/type-helper';\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 * ```\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 * ```\n */\nexport function LightDomMixin<T extends Class<LitElement> = Class<LitElement>>(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;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Class} from '@alwatr/type-helper';\nimport type {LitElement, PropertyValues} from 'lit';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\nexport interface LoggerMixinInterface extends LitElement {\n 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 * ```\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 * ```\n */\nexport function LoggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T {\n return class MixinClass extends superClass {\n /**\n * Unique index for each element instance.\n */\n private elementIndex__: number = ++elementIndex;\n\n /**\n * Logger instance with a tag name and unique index.\n */\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 } as unknown as Class<LoggerMixinInterface> & T; // TypeScript doesn't support protected mixin methods!\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/main.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.1.
|
|
1
|
+
/* @nexim/element v1.1.3 */
|
|
2
2
|
|
|
3
3
|
// src/main.ts
|
|
4
4
|
import { packageTracer } from "@alwatr/package-tracer";
|
|
@@ -120,7 +120,7 @@ function LoggerMixin(superClass) {
|
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
// src/main.ts
|
|
123
|
-
__dev_mode__: packageTracer.add("@nexim/element", "1.1.
|
|
123
|
+
__dev_mode__: packageTracer.add("@nexim/element", "1.1.3");
|
|
124
124
|
export {
|
|
125
125
|
LightDomMixin,
|
|
126
126
|
LoggerMixin
|
package/dist/main.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/main.ts", "../src/mixin/light-dom.ts", "../src/mixin/logging.ts"],
|
|
4
|
-
"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 {Class} from '@alwatr/type-helper';\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 Class<LitElement> = Class<LitElement>>(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;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Class} from '@alwatr/type-helper';\nimport type {LitElement, PropertyValues} from 'lit';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\nexport interface LoggerMixinInterface extends LitElement {\n 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 Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T {\n return class MixinClass extends superClass {\n /**\n * Unique index for each element instance.\n */\n private elementIndex__: number = ++elementIndex;\n\n /**\n * Logger instance with a tag name and unique index.\n */\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 } as unknown as Class<LoggerMixinInterface> & T; // TypeScript doesn't support protected mixin methods!\n}\n"],
|
|
5
|
-
"mappings": ";;;AAAA,SAAQ,qBAAoB;;;
|
|
4
|
+
"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 {Class} from '@alwatr/type-helper';\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 * ```\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 * ```\n */\nexport function LightDomMixin<T extends Class<LitElement> = Class<LitElement>>(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;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Class} from '@alwatr/type-helper';\nimport type {LitElement, PropertyValues} from 'lit';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\nexport interface LoggerMixinInterface extends LitElement {\n 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 * ```\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 * ```\n */\nexport function LoggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T {\n return class MixinClass extends superClass {\n /**\n * Unique index for each element instance.\n */\n private elementIndex__: number = ++elementIndex;\n\n /**\n * Logger instance with a tag name and unique index.\n */\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 } as unknown as Class<LoggerMixinInterface> & T; // TypeScript doesn't support protected mixin methods!\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ import type { LitElement } from 'lit';
|
|
|
7
7
|
* @returns A class that extends the base class with light DOM functionality.
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
|
+
* ```
|
|
10
11
|
* import {LitElement, html, css} from 'lit';
|
|
11
12
|
* import {LightDomMixin} from '@nexim/element';
|
|
12
13
|
*
|
|
@@ -21,6 +22,7 @@ import type { LitElement } from 'lit';
|
|
|
21
22
|
* return html`<p>Hello, light DOM!</p>`;
|
|
22
23
|
* }
|
|
23
24
|
* }
|
|
25
|
+
* ```
|
|
24
26
|
*/
|
|
25
27
|
export declare function LightDomMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): T;
|
|
26
28
|
//# sourceMappingURL=light-dom.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAC,UAAU,EAAkC,MAAM,KAAK,CAAC;AAErE
|
|
1
|
+
{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAC,UAAU,EAAkC,MAAM,KAAK,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,CAwD/F"}
|
package/dist/mixin/logging.d.ts
CHANGED
|
@@ -13,6 +13,7 @@ export interface LoggerMixinInterface extends LitElement {
|
|
|
13
13
|
* @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
|
+
* ```
|
|
16
17
|
* import {LitElement, html} from 'lit';
|
|
17
18
|
* import {LoggerMixin} from '@nexim/element';
|
|
18
19
|
*
|
|
@@ -23,6 +24,7 @@ export interface LoggerMixinInterface extends LitElement {
|
|
|
23
24
|
* return html`<p>Hello, world!</p>`;
|
|
24
25
|
* }
|
|
25
26
|
* }
|
|
27
|
+
* ```
|
|
26
28
|
*/
|
|
27
29
|
export declare function LoggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T;
|
|
28
30
|
//# sourceMappingURL=logging.d.ts.map
|
|
@@ -1 +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,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOpD,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED
|
|
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,KAAK,EAAC,MAAM,qBAAqB,CAAC;AAC/C,OAAO,KAAK,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAOpD,MAAM,WAAW,oBAAqB,SAAQ,UAAU;IACtD,OAAO,EAAE,YAAY,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,KAAK,CAAC,oBAAoB,CAAC,GAAG,CAAC,CA4E3H"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexim/element",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "Utility functions and mixins for building high-performance web components with Lit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@alwatr/nano-build": "^5.0.0",
|
|
57
|
-
"@nexim/typescript-config": "^
|
|
57
|
+
"@nexim/typescript-config": "^2.0.0",
|
|
58
58
|
"ava": "^6.2.0",
|
|
59
59
|
"typescript": "^5.7.2",
|
|
60
60
|
"wireit": "^0.14.9"
|
|
@@ -105,5 +105,5 @@
|
|
|
105
105
|
"service": true
|
|
106
106
|
}
|
|
107
107
|
},
|
|
108
|
-
"gitHead": "
|
|
108
|
+
"gitHead": "67de35829cde30ef70d87361d7f104762f6ccfd5"
|
|
109
109
|
}
|