@nexim/element 1.1.4 → 2.0.2
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 +18 -0
- package/dist/main.cjs +6 -6
- package/dist/main.cjs.map +2 -2
- package/dist/main.mjs +6 -6
- package/dist/main.mjs.map +2 -2
- package/dist/mixin/light-dom.d.ts +1 -1
- package/dist/mixin/logging.d.ts +1 -1
- package/dist/mixin/logging.d.ts.map +1 -1
- package/docs/README.md +2 -2
- package/docs/functions/{LightDomMixin.md → lightDomMixin.md} +3 -3
- package/docs/functions/{LoggerMixin.md → loggerMixin.md} +3 -3
- package/package.json +9 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
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
|
+
## [2.0.2](https://github.com/the-nexim/nanolib/compare/@nexim/element@2.0.1...@nexim/element@2.0.2) (2025-04-21)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @nexim/element
|
|
9
|
+
|
|
10
|
+
## [2.0.1](https://github.com/the-nexim/nanolib/compare/@nexim/element@2.0.0...@nexim/element@2.0.1) (2025-04-20)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @nexim/element
|
|
13
|
+
|
|
14
|
+
## [2.0.0](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.4...@nexim/element@2.0.0) (2025-04-20)
|
|
15
|
+
|
|
16
|
+
### ⚠ BREAKING CHANGES
|
|
17
|
+
|
|
18
|
+
* **element:** use lowercase name for function based linting correct name conversation
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* **element:** use lowercase name for function based linting correct name conversation ([0f0bae8](https://github.com/the-nexim/nanolib/commit/0f0bae8a8e5f38930f56f285c91dd3ec05153ec0)) by @
|
|
23
|
+
|
|
6
24
|
## [1.1.4](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.3...@nexim/element@1.1.4) (2025-04-20)
|
|
7
25
|
|
|
8
26
|
**Note:** Version bump only for package @nexim/element
|
package/dist/main.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element
|
|
1
|
+
/* @nexim/element v2.0.2 */
|
|
2
2
|
"use strict";
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -21,14 +21,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/main.ts
|
|
22
22
|
var main_exports = {};
|
|
23
23
|
__export(main_exports, {
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
lightDomMixin: () => lightDomMixin,
|
|
25
|
+
loggerMixin: () => loggerMixin
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(main_exports);
|
|
28
28
|
var import_package_tracer = require("@alwatr/package-tracer");
|
|
29
29
|
|
|
30
30
|
// src/mixin/light-dom.ts
|
|
31
|
-
function
|
|
31
|
+
function lightDomMixin(superClass) {
|
|
32
32
|
class MixinClass extends superClass {
|
|
33
33
|
/**
|
|
34
34
|
* Flattens the CSSResultGroup into a single string of CSS text.
|
|
@@ -80,7 +80,7 @@ function LightDomMixin(superClass) {
|
|
|
80
80
|
// src/mixin/logging.ts
|
|
81
81
|
var import_logger = require("@alwatr/logger");
|
|
82
82
|
var elementIndex = 0;
|
|
83
|
-
function
|
|
83
|
+
function loggerMixin(superClass) {
|
|
84
84
|
return class MixinClass extends superClass {
|
|
85
85
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
86
86
|
constructor(...args) {
|
|
@@ -144,5 +144,5 @@ function LoggerMixin(superClass) {
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
// src/main.ts
|
|
147
|
-
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "
|
|
147
|
+
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "2.0.2");
|
|
148
148
|
//# 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__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type { CSSResultGroup, LitElement, ReactiveElement } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n * @typeParam T - The base class to extend.\n *\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * ```ts\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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA8B;;;AC2BvB,SAAS,cAA+D,YAAkB;AAAA,EAI/F,MAAM,mBAAmB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMlC,OAAO,YAAY,QAAiC;AAClD,UAAI,WAAW,OAAW,QAAO;AACjC,UAAI,aAAa,OAAQ,QAAO,OAAO,QAAQ,KAAK;AACpD,UAAI,MAAM,QAAQ,MAAM,GAAG;AACzB,eAAO,OACJ,IAAI,CAAC,UAAW,aAAa,QAAQ,MAAM,UAAU,WAAW,YAAY,KAAK,CAAE,EACnF,KAAK,IAAI,EACT,KAAK;AAAA,MACV;AACA,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAO,eAAe,SAAiB,SAAuC;AAC5E,YAAM,YAAY,GAAG,OAAO;AAC5B,UAAI,SAAS,cAAc,SAAS,SAAS,EAAE,MAAM,KAAM;AAE3D,YAAM,UAAU,WAAW,YAAY,QAAQ,MAAM;AACrD,UAAI,YAAY,GAAI;AAEpB,YAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,cAAQ,UAAU,IAAI,SAAS;AAC/B,cAAQ,YAAY;AACpB,eAAS,KAAK,OAAO,OAAO;AAAA,IAC9B;AAAA;AAAA;AAAA;AAAA,IAKS,mBAAmB;AAC1B,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMS,oBAAoB;AAC3B,YAAM,kBAAkB;AACxB,iBAAW,eAAe,KAAK,QAAQ,YAAY,GAAG,KAAK,WAAgC;AAAA,IAC7F;AAAA,EACF;AAEA,SAAO;AACT;;;ACtFA,oBAAgD;AAQhD,IAAI,eAA+B;AAgC5B,SAAS,YAA6D,YAAgD;AAI3H,SAAO,MAAM,mBAAmB,WAAW;AAAA;AAAA,IAczC,eAAe,MAAa;
|
|
4
|
+
"sourcesContent": ["import { packageTracer } from '@alwatr/package-tracer';\n\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type { CSSResultGroup, LitElement, ReactiveElement } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n * @typeParam T - The base class to extend.\n *\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * ```ts\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 /**\n * The base class to extend.\n */\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 { type AlwatrLogger, createLogger } from '@alwatr/logger';\n\nimport type { LitElement, PropertyValues } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\n/**\n * Interface for elements that have a logger instance.\n * @noInheritDoc\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 * @typeParam T - The base class to extend.\n *\n * @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.\n *\n * @example\n * ```ts\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 /**\n * The base class to extend.\n */\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__.toString()}>`);\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,10 +1,10 @@
|
|
|
1
|
-
/* @nexim/element
|
|
1
|
+
/* @nexim/element v2.0.2 */
|
|
2
2
|
|
|
3
3
|
// src/main.ts
|
|
4
4
|
import { packageTracer } from "@alwatr/package-tracer";
|
|
5
5
|
|
|
6
6
|
// src/mixin/light-dom.ts
|
|
7
|
-
function
|
|
7
|
+
function lightDomMixin(superClass) {
|
|
8
8
|
class MixinClass extends superClass {
|
|
9
9
|
/**
|
|
10
10
|
* Flattens the CSSResultGroup into a single string of CSS text.
|
|
@@ -56,7 +56,7 @@ function LightDomMixin(superClass) {
|
|
|
56
56
|
// src/mixin/logging.ts
|
|
57
57
|
import { createLogger } from "@alwatr/logger";
|
|
58
58
|
var elementIndex = 0;
|
|
59
|
-
function
|
|
59
|
+
function loggerMixin(superClass) {
|
|
60
60
|
return class MixinClass extends superClass {
|
|
61
61
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
62
62
|
constructor(...args) {
|
|
@@ -120,9 +120,9 @@ function LoggerMixin(superClass) {
|
|
|
120
120
|
}
|
|
121
121
|
|
|
122
122
|
// src/main.ts
|
|
123
|
-
__dev_mode__: packageTracer.add("@nexim/element", "
|
|
123
|
+
__dev_mode__: packageTracer.add("@nexim/element", "2.0.2");
|
|
124
124
|
export {
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
lightDomMixin,
|
|
126
|
+
loggerMixin
|
|
127
127
|
};
|
|
128
128
|
//# sourceMappingURL=main.mjs.map
|
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__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type { CSSResultGroup, LitElement, ReactiveElement } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n * @typeParam T - The base class to extend.\n *\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * ```ts\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
|
|
5
|
-
"mappings": ";;;AAAA,SAAS,qBAAqB;;;AC2BvB,SAAS,cAA+D,YAAkB;AAAA,EAI/F,MAAM,mBAAmB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMlC,OAAO,YAAY,QAAiC;AAClD,UAAI,WAAW,OAAW,QAAO;AACjC,UAAI,aAAa,OAAQ,QAAO,OAAO,QAAQ,KAAK;AACpD,UAAI,MAAM,QAAQ,MAAM,GAAG;AACzB,eAAO,OACJ,IAAI,CAAC,UAAW,aAAa,QAAQ,MAAM,UAAU,WAAW,YAAY,KAAK,CAAE,EACnF,KAAK,IAAI,EACT,KAAK;AAAA,MACV;AACA,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,OAAO,eAAe,SAAiB,SAAuC;AAC5E,YAAM,YAAY,GAAG,OAAO;AAC5B,UAAI,SAAS,cAAc,SAAS,SAAS,EAAE,MAAM,KAAM;AAE3D,YAAM,UAAU,WAAW,YAAY,QAAQ,MAAM;AACrD,UAAI,YAAY,GAAI;AAEpB,YAAM,UAAU,SAAS,cAAc,OAAO;AAC9C,cAAQ,UAAU,IAAI,SAAS;AAC/B,cAAQ,YAAY;AACpB,eAAS,KAAK,OAAO,OAAO;AAAA,IAC9B;AAAA;AAAA;AAAA;AAAA,IAKS,mBAAmB;AAC1B,aAAO;AAAA,IACT;AAAA;AAAA;AAAA;AAAA;AAAA,IAMS,oBAAoB;AAC3B,YAAM,kBAAkB;AACxB,iBAAW,eAAe,KAAK,QAAQ,YAAY,GAAG,KAAK,WAAgC;AAAA,IAC7F;AAAA,EACF;AAEA,SAAO;AACT;;;ACtFA,SAA4B,oBAAoB;AAQhD,IAAI,eAA+B;AAgC5B,SAAS,YAA6D,YAAgD;AAI3H,SAAO,MAAM,mBAAmB,WAAW;AAAA;AAAA,IAczC,eAAe,MAAa;
|
|
4
|
+
"sourcesContent": ["import { packageTracer } from '@alwatr/package-tracer';\n\n__dev_mode__: packageTracer.add(__package_name__, __package_version__);\n\nexport * from './mixin/light-dom.js';\nexport * from './mixin/logging.js';\n", "import type { CSSResultGroup, LitElement, ReactiveElement } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * A mixin to enable light DOM rendering and style encapsulation for LitElement components.\n * @typeParam T - The base class to extend.\n *\n * @returns A class that extends the base class with light DOM functionality.\n *\n * @example\n * ```ts\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 /**\n * The base class to extend.\n */\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 { type AlwatrLogger, createLogger } from '@alwatr/logger';\n\nimport type { LitElement, PropertyValues } from 'lit';\nimport type { Class } from '@alwatr/type-helper';\n\n/**\n * Global element index to uniquely identify each element instance\n */\nlet elementIndex = /* @__PURE__ */ 0;\n\n/**\n * Interface for elements that have a logger instance.\n * @noInheritDoc\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 * @typeParam T - The base class to extend.\n *\n * @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.\n *\n * @example\n * ```ts\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 /**\n * The base class to extend.\n */\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__.toString()}>`);\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
|
}
|
|
@@ -24,5 +24,5 @@ import type { Class } from '@alwatr/type-helper';
|
|
|
24
24
|
* }
|
|
25
25
|
* ```
|
|
26
26
|
*/
|
|
27
|
-
export declare function
|
|
27
|
+
export declare function lightDomMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): T;
|
|
28
28
|
//# sourceMappingURL=light-dom.d.ts.map
|
package/dist/mixin/logging.d.ts
CHANGED
|
@@ -30,5 +30,5 @@ export interface LoggerMixinInterface extends LitElement {
|
|
|
30
30
|
* }
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
export declare function
|
|
33
|
+
export declare function loggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T;
|
|
34
34
|
//# 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,EAAgB,MAAM,gBAAgB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAOjD;;;GAGG;AACH,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,
|
|
1
|
+
{"version":3,"file":"logging.d.ts","sourceRoot":"","sources":["../../src/mixin/logging.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAgB,MAAM,gBAAgB,CAAC;AAEjE,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AACtD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAOjD;;;GAGG;AACH,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,CA+E3H"}
|
package/docs/README.md
CHANGED
|
@@ -10,5 +10,5 @@
|
|
|
10
10
|
|
|
11
11
|
| Function | Description |
|
|
12
12
|
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
13
|
-
| [
|
|
14
|
-
| [
|
|
13
|
+
| [lightDomMixin](functions/lightDomMixin.md) | A mixin to enable light DOM rendering and style encapsulation for LitElement components. |
|
|
14
|
+
| [loggerMixin](functions/loggerMixin.md) | Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element. |
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
[@nexim/element](../README.md) /
|
|
1
|
+
[@nexim/element](../README.md) / lightDomMixin
|
|
2
2
|
|
|
3
|
-
# Function:
|
|
3
|
+
# Function: lightDomMixin()
|
|
4
4
|
|
|
5
|
-
> **
|
|
5
|
+
> **lightDomMixin**\<`T`\>(`superClass`: `T`): `T`
|
|
6
6
|
|
|
7
7
|
A mixin to enable light DOM rendering and style encapsulation for LitElement components.
|
|
8
8
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
[@nexim/element](../README.md) /
|
|
1
|
+
[@nexim/element](../README.md) / loggerMixin
|
|
2
2
|
|
|
3
|
-
# Function:
|
|
3
|
+
# Function: loggerMixin()
|
|
4
4
|
|
|
5
|
-
> **
|
|
5
|
+
> **loggerMixin**\<`T`\>(`superClass`: `T`): `Class`\<[`LoggerMixinInterface`](../interfaces/LoggerMixinInterface.md)\> & `T`
|
|
6
6
|
|
|
7
7
|
Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
|
|
8
8
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexim/element",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.2",
|
|
4
4
|
"description": "Utility functions and mixins for building high-performance web components with Lit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -48,16 +48,16 @@
|
|
|
48
48
|
"watch": "wireit"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@alwatr/logger": "^5.5.
|
|
52
|
-
"@alwatr/package-tracer": "^5.5.
|
|
53
|
-
"@alwatr/type-helper": "^5.4.
|
|
51
|
+
"@alwatr/logger": "^5.5.3",
|
|
52
|
+
"@alwatr/package-tracer": "^5.5.3",
|
|
53
|
+
"@alwatr/type-helper": "^5.4.1",
|
|
54
54
|
"lit": "^3.3.0",
|
|
55
55
|
"typedoc": "^0.28.3",
|
|
56
56
|
"typedoc-plugin-markdown": "^4.6.2"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@alwatr/nano-build": "^5.5.
|
|
60
|
-
"@nexim/typescript-config": "^2.0.
|
|
59
|
+
"@alwatr/nano-build": "^5.5.3",
|
|
60
|
+
"@nexim/typescript-config": "^2.0.1",
|
|
61
61
|
"ava": "^6.2.0",
|
|
62
62
|
"typedoc-plugin-no-inherit": "^1.6.1",
|
|
63
63
|
"typescript": "^5.8.3",
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
]
|
|
81
81
|
},
|
|
82
82
|
"build:es": {
|
|
83
|
-
"command": "nano-build --preset=module",
|
|
83
|
+
"command": "yarn nano-build --preset=module",
|
|
84
84
|
"files": [
|
|
85
85
|
"src",
|
|
86
86
|
"tsconfig.json"
|
|
@@ -105,12 +105,12 @@
|
|
|
105
105
|
"service": true
|
|
106
106
|
},
|
|
107
107
|
"watch:es": {
|
|
108
|
-
"command": "nano-build --preset=module --watch",
|
|
108
|
+
"command": "yarn nano-build --preset=module --watch",
|
|
109
109
|
"service": true
|
|
110
110
|
},
|
|
111
111
|
"doc": {
|
|
112
112
|
"command": "typedoc"
|
|
113
113
|
}
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "f20da89af20ee0c17c96e1ea15c6dfd831717ee6"
|
|
116
116
|
}
|