@nexim/element 1.1.2 → 1.1.4
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 +8 -0
- package/README.md +2 -38
- package/dist/main.cjs +3 -4
- package/dist/main.cjs.map +2 -2
- package/dist/main.d.ts.map +1 -1
- package/dist/main.mjs +3 -4
- package/dist/main.mjs.map +2 -2
- package/dist/main.test.d.ts +2 -0
- package/dist/main.test.d.ts.map +1 -0
- package/dist/mixin/light-dom.d.ts +4 -2
- package/dist/mixin/light-dom.d.ts.map +1 -1
- package/dist/mixin/logging.d.ts +8 -2
- package/dist/mixin/logging.d.ts.map +1 -1
- package/docs/README.md +14 -0
- package/docs/functions/LightDomMixin.md +44 -0
- package/docs/functions/LoggerMixin.md +42 -0
- package/docs/interfaces/LoggerMixinInterface.md +15 -0
- package/package.json +16 -9
- package/dist/main.cjs.LEGAL.txt +0 -0
- package/dist/main.mjs.LEGAL.txt +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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.4](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.3...@nexim/element@1.1.4) (2025-04-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @nexim/element
|
|
9
|
+
|
|
10
|
+
## [1.1.3](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.2...@nexim/element@1.1.3) (2025-01-09)
|
|
11
|
+
|
|
12
|
+
**Note:** Version bump only for package @nexim/element
|
|
13
|
+
|
|
6
14
|
## [1.1.2](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.1.1...@nexim/element@1.1.2) (2025-01-06)
|
|
7
15
|
|
|
8
16
|
### Code Refactoring
|
package/README.md
CHANGED
|
@@ -19,42 +19,6 @@ npm install @nexim/element
|
|
|
19
19
|
yarn add @nexim/element
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
##
|
|
22
|
+
## Documentation
|
|
23
23
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
The LoggerMixin adds logging capabilities to your LitElement components. It logs lifecycle methods and measures update times.
|
|
27
|
-
|
|
28
|
-
```ts
|
|
29
|
-
import {LitElement, html} from 'lit';
|
|
30
|
-
import {LoggerMixin} from '@nexim/element';
|
|
31
|
-
|
|
32
|
-
class MyElement extends LoggerMixin(LitElement) {
|
|
33
|
-
protected override render() {
|
|
34
|
-
super.render(); // must call super method to logger work
|
|
35
|
-
|
|
36
|
-
return html`<p>Hello, world!</p>`;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
```
|
|
40
|
-
|
|
41
|
-
### LightDomMixin
|
|
42
|
-
|
|
43
|
-
The LightDomMixin enables light DOM rendering and style encapsulation for LitElement components.
|
|
44
|
-
|
|
45
|
-
```ts
|
|
46
|
-
import {LitElement, html, css} from 'lit';
|
|
47
|
-
import {LightDomMixin} from '@nexim/element';
|
|
48
|
-
|
|
49
|
-
class MyLightDomElement extends LightDomMixin(LitElement) {
|
|
50
|
-
static styles = css`
|
|
51
|
-
p {
|
|
52
|
-
color: blue;
|
|
53
|
-
}
|
|
54
|
-
`;
|
|
55
|
-
|
|
56
|
-
protected override render() {
|
|
57
|
-
return html`<p>Hello, light DOM!</p>`;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
```
|
|
24
|
+
Read full documentation [here](./docs/README.md).
|
package/dist/main.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.1.
|
|
1
|
+
/* @nexim/element v1.1.4 */
|
|
2
2
|
"use strict";
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -92,7 +92,7 @@ function LoggerMixin(superClass) {
|
|
|
92
92
|
/**
|
|
93
93
|
* Logger instance with a tag name and unique index.
|
|
94
94
|
*/
|
|
95
|
-
this.logger_ = (0, import_logger.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
95
|
+
this.logger_ = (0, import_logger.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex__.toString()}>`);
|
|
96
96
|
this.logger_.logMethod?.("constructor");
|
|
97
97
|
}
|
|
98
98
|
connectedCallback() {
|
|
@@ -144,6 +144,5 @@ function LoggerMixin(superClass) {
|
|
|
144
144
|
}
|
|
145
145
|
|
|
146
146
|
// src/main.ts
|
|
147
|
-
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.1.
|
|
148
|
-
/*! For license information please see main.cjs.LEGAL.txt */
|
|
147
|
+
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.1.4");
|
|
149
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\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,
|
|
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 \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.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../src/main.ts"],"names":[],"mappings":"AAIA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}
|
package/dist/main.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.1.
|
|
1
|
+
/* @nexim/element v1.1.4 */
|
|
2
2
|
|
|
3
3
|
// src/main.ts
|
|
4
4
|
import { packageTracer } from "@alwatr/package-tracer";
|
|
@@ -68,7 +68,7 @@ function LoggerMixin(superClass) {
|
|
|
68
68
|
/**
|
|
69
69
|
* Logger instance with a tag name and unique index.
|
|
70
70
|
*/
|
|
71
|
-
this.logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
71
|
+
this.logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__.toString()}>`);
|
|
72
72
|
this.logger_.logMethod?.("constructor");
|
|
73
73
|
}
|
|
74
74
|
connectedCallback() {
|
|
@@ -120,10 +120,9 @@ 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.4");
|
|
124
124
|
export {
|
|
125
125
|
LightDomMixin,
|
|
126
126
|
LoggerMixin
|
|
127
127
|
};
|
|
128
|
-
/*! For license information please see main.mjs.LEGAL.txt */
|
|
129
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\
|
|
5
|
-
"mappings": ";;;AAAA,
|
|
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 \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
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.test.d.ts","sourceRoot":"","sources":["../src/main.test.js"],"names":[],"mappings":""}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
|
-
import type { Class } from '@alwatr/type-helper';
|
|
2
1
|
import type { LitElement } from 'lit';
|
|
2
|
+
import type { Class } from '@alwatr/type-helper';
|
|
3
3
|
/**
|
|
4
4
|
* A mixin to enable light DOM rendering and style encapsulation for LitElement components.
|
|
5
|
+
* @typeParam T - The base class to extend.
|
|
5
6
|
*
|
|
6
|
-
* @param superClass - The base class to extend.
|
|
7
7
|
* @returns A class that extends the base class with light DOM functionality.
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
|
+
* ```ts
|
|
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,
|
|
1
|
+
{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,UAAU,EAAmB,MAAM,KAAK,CAAC;AACvE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,KAAK,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,CA2D/F"}
|
package/dist/mixin/logging.d.ts
CHANGED
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { type AlwatrLogger } from '@alwatr/logger';
|
|
2
|
-
import type { Class } from '@alwatr/type-helper';
|
|
3
2
|
import type { LitElement } from 'lit';
|
|
3
|
+
import type { Class } from '@alwatr/type-helper';
|
|
4
|
+
/**
|
|
5
|
+
* Interface for elements that have a logger instance.
|
|
6
|
+
* @noInheritDoc
|
|
7
|
+
*/
|
|
4
8
|
export interface LoggerMixinInterface extends LitElement {
|
|
5
9
|
logger_: AlwatrLogger;
|
|
6
10
|
}
|
|
@@ -8,11 +12,12 @@ export interface LoggerMixinInterface extends LitElement {
|
|
|
8
12
|
* Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
|
|
9
13
|
*
|
|
10
14
|
* Hint: function super() must be called in the methods to logger work.
|
|
15
|
+
* @typeParam T - The base class to extend.
|
|
11
16
|
*
|
|
12
|
-
* @param superClass - The base class to extend.
|
|
13
17
|
* @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.
|
|
14
18
|
*
|
|
15
19
|
* @example
|
|
20
|
+
* ```ts
|
|
16
21
|
* import {LitElement, html} from 'lit';
|
|
17
22
|
* import {LoggerMixin} from '@nexim/element';
|
|
18
23
|
*
|
|
@@ -23,6 +28,7 @@ export interface LoggerMixinInterface extends LitElement {
|
|
|
23
28
|
* return html`<p>Hello, world!</p>`;
|
|
24
29
|
* }
|
|
25
30
|
* }
|
|
31
|
+
* ```
|
|
26
32
|
*/
|
|
27
33
|
export declare function LoggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T;
|
|
28
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,
|
|
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,CAgF3H"}
|
package/docs/README.md
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# @nexim/element
|
|
2
|
+
|
|
3
|
+
## Interfaces
|
|
4
|
+
|
|
5
|
+
| Interface | Description |
|
|
6
|
+
| ---------------------------------------------------------- | --------------------------------------------------- |
|
|
7
|
+
| [LoggerMixinInterface](interfaces/LoggerMixinInterface.md) | Interface for elements that have a logger instance. |
|
|
8
|
+
|
|
9
|
+
## Functions
|
|
10
|
+
|
|
11
|
+
| Function | Description |
|
|
12
|
+
| ------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
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. |
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
[@nexim/element](../README.md) / LightDomMixin
|
|
2
|
+
|
|
3
|
+
# Function: LightDomMixin()
|
|
4
|
+
|
|
5
|
+
> **LightDomMixin**\<`T`\>(`superClass`: `T`): `T`
|
|
6
|
+
|
|
7
|
+
A mixin to enable light DOM rendering and style encapsulation for LitElement components.
|
|
8
|
+
|
|
9
|
+
## Type Parameters
|
|
10
|
+
|
|
11
|
+
| Type Parameter | Default type | Description |
|
|
12
|
+
| ------------------------------------- | ----------------------- | ------------------------- |
|
|
13
|
+
| `T` _extends_ `Class`\<`LitElement`\> | `Class`\<`LitElement`\> | The base class to extend. |
|
|
14
|
+
|
|
15
|
+
## Parameters
|
|
16
|
+
|
|
17
|
+
| Parameter | Type |
|
|
18
|
+
| ------------ | ---- |
|
|
19
|
+
| `superClass` | `T` |
|
|
20
|
+
|
|
21
|
+
## Returns
|
|
22
|
+
|
|
23
|
+
`T`
|
|
24
|
+
|
|
25
|
+
A class that extends the base class with light DOM functionality.
|
|
26
|
+
|
|
27
|
+
## Example
|
|
28
|
+
|
|
29
|
+
```ts
|
|
30
|
+
import { LitElement, html, css } from 'lit';
|
|
31
|
+
import { LightDomMixin } from '@nexim/element';
|
|
32
|
+
|
|
33
|
+
class MyLightDomElement extends LightDomMixin(LitElement) {
|
|
34
|
+
static styles = css`
|
|
35
|
+
p {
|
|
36
|
+
color: blue;
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
39
|
+
|
|
40
|
+
protected override render() {
|
|
41
|
+
return html`<p>Hello, light DOM!</p>`;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
```
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
[@nexim/element](../README.md) / LoggerMixin
|
|
2
|
+
|
|
3
|
+
# Function: LoggerMixin()
|
|
4
|
+
|
|
5
|
+
> **LoggerMixin**\<`T`\>(`superClass`: `T`): `Class`\<[`LoggerMixinInterface`](../interfaces/LoggerMixinInterface.md)\> & `T`
|
|
6
|
+
|
|
7
|
+
Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
|
|
8
|
+
|
|
9
|
+
Hint: function super() must be called in the methods to logger work.
|
|
10
|
+
|
|
11
|
+
## Type Parameters
|
|
12
|
+
|
|
13
|
+
| Type Parameter | Default type | Description |
|
|
14
|
+
| ------------------------------------- | ----------------------- | ------------------------- |
|
|
15
|
+
| `T` _extends_ `Class`\<`LitElement`\> | `Class`\<`LitElement`\> | The base class to extend. |
|
|
16
|
+
|
|
17
|
+
## Parameters
|
|
18
|
+
|
|
19
|
+
| Parameter | Type |
|
|
20
|
+
| ------------ | ---- |
|
|
21
|
+
| `superClass` | `T` |
|
|
22
|
+
|
|
23
|
+
## Returns
|
|
24
|
+
|
|
25
|
+
`Class`\<[`LoggerMixinInterface`](../interfaces/LoggerMixinInterface.md)\> & `T`
|
|
26
|
+
|
|
27
|
+
A mixin class that extends the superclass and logs the lifecycle methods of the element.
|
|
28
|
+
|
|
29
|
+
## Example
|
|
30
|
+
|
|
31
|
+
```ts
|
|
32
|
+
import { LitElement, html } from 'lit';
|
|
33
|
+
import { LoggerMixin } from '@nexim/element';
|
|
34
|
+
|
|
35
|
+
class MyElement extends LoggerMixin(LitElement) {
|
|
36
|
+
protected override render() {
|
|
37
|
+
super.render(); // must call super method to logger work
|
|
38
|
+
|
|
39
|
+
return html`<p>Hello, world!</p>`;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
```
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
[@nexim/element](../README.md) / LoggerMixinInterface
|
|
2
|
+
|
|
3
|
+
# Interface: LoggerMixinInterface
|
|
4
|
+
|
|
5
|
+
Interface for elements that have a logger instance.
|
|
6
|
+
|
|
7
|
+
## Extends
|
|
8
|
+
|
|
9
|
+
- `LitElement`
|
|
10
|
+
|
|
11
|
+
## Properties
|
|
12
|
+
|
|
13
|
+
| Property | Type |
|
|
14
|
+
| ------------------------------ | -------------- |
|
|
15
|
+
| <a id="logger_"></a> `logger_` | `AlwatrLogger` |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexim/element",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"description": "Utility functions and mixins for building high-performance web components with Lit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -43,21 +43,25 @@
|
|
|
43
43
|
],
|
|
44
44
|
"scripts": {
|
|
45
45
|
"build": "wireit",
|
|
46
|
+
"doc": "wireit",
|
|
46
47
|
"test": "wireit",
|
|
47
48
|
"watch": "wireit"
|
|
48
49
|
},
|
|
49
50
|
"dependencies": {
|
|
50
|
-
"@alwatr/logger": "^5.
|
|
51
|
-
"@alwatr/package-tracer": "^5.
|
|
52
|
-
"@alwatr/type-helper": "^5.
|
|
53
|
-
"lit": "^3.
|
|
51
|
+
"@alwatr/logger": "^5.5.2",
|
|
52
|
+
"@alwatr/package-tracer": "^5.5.2",
|
|
53
|
+
"@alwatr/type-helper": "^5.4.0",
|
|
54
|
+
"lit": "^3.3.0",
|
|
55
|
+
"typedoc": "^0.28.3",
|
|
56
|
+
"typedoc-plugin-markdown": "^4.6.2"
|
|
54
57
|
},
|
|
55
58
|
"devDependencies": {
|
|
56
|
-
"@alwatr/nano-build": "^5.
|
|
59
|
+
"@alwatr/nano-build": "^5.5.2",
|
|
57
60
|
"@nexim/typescript-config": "^2.0.0",
|
|
58
61
|
"ava": "^6.2.0",
|
|
59
|
-
"
|
|
60
|
-
"
|
|
62
|
+
"typedoc-plugin-no-inherit": "^1.6.1",
|
|
63
|
+
"typescript": "^5.8.3",
|
|
64
|
+
"wireit": "^0.14.12"
|
|
61
65
|
},
|
|
62
66
|
"publishConfig": {
|
|
63
67
|
"access": "public"
|
|
@@ -103,7 +107,10 @@
|
|
|
103
107
|
"watch:es": {
|
|
104
108
|
"command": "nano-build --preset=module --watch",
|
|
105
109
|
"service": true
|
|
110
|
+
},
|
|
111
|
+
"doc": {
|
|
112
|
+
"command": "typedoc"
|
|
106
113
|
}
|
|
107
114
|
},
|
|
108
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "a05cc5333d53fd117ad3c60d6ec4d38bc187f0b6"
|
|
109
116
|
}
|
package/dist/main.cjs.LEGAL.txt
DELETED
|
File without changes
|
package/dist/main.mjs.LEGAL.txt
DELETED
|
File without changes
|