@nexim/element 1.0.3 → 1.0.5
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 +23 -0
- package/dist/main.cjs +10 -7
- package/dist/main.cjs.map +2 -2
- package/dist/main.mjs +10 -7
- package/dist/main.mjs.map +2 -2
- package/dist/mixin/light-dom.d.ts +2 -2
- package/dist/mixin/light-dom.d.ts.map +1 -1
- package/dist/mixin/logging.d.ts +4 -4
- package/dist/mixin/logging.d.ts.map +1 -1
- package/package.json +3 -3
- package/dist/type.d.ts +0 -2
- package/dist/type.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,29 @@
|
|
|
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.0.5](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.4...@nexim/element@1.0.5) (2024-12-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **element:** deps ([1fa8618](https://github.com/the-nexim/nanolib/commit/1fa8618cd45978361adfd7be2dcce5a50c530dc6)) by @njfamirm
|
|
11
|
+
|
|
12
|
+
## [1.0.4](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.3...@nexim/element@1.0.4) (2024-12-07)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* **element/logging:** use interface for mixin type ([24de303](https://github.com/the-nexim/nanolib/commit/24de30357ff0690cd200c7171b87a56fc299ddef)) by @njfamirm
|
|
17
|
+
* **element:** handle typescript limitation about protected mixin property ([ad2adea](https://github.com/the-nexim/nanolib/commit/ad2adeac619dc355834878ccdd96aa933802d8c1)) by @njfamirm
|
|
18
|
+
|
|
19
|
+
### Code Refactoring
|
|
20
|
+
|
|
21
|
+
* **element/light-dom:** remove additional type set ([3011ba4](https://github.com/the-nexim/nanolib/commit/3011ba41fac47b80064bc62fbbbd2f1885abd308)) by @njfamirm
|
|
22
|
+
* **element:** use alwatr's class type and remove constructor type ([b3b5e91](https://github.com/the-nexim/nanolib/commit/b3b5e9147a14435c44a4458bbfbaefef9fa2267a)) by @njfamirm
|
|
23
|
+
|
|
24
|
+
### Miscellaneous Chores
|
|
25
|
+
|
|
26
|
+
* **element:** docuemnt typo ([0172cd7](https://github.com/the-nexim/nanolib/commit/0172cd77d5a04b4c32c626334c9ea8d4cada07db)) by @njfamirm
|
|
27
|
+
* **element:** move lit to dev dependency ([ae226ee](https://github.com/the-nexim/nanolib/commit/ae226eed51bde38b272e1977907dc83c92645481)) by @njfamirm
|
|
28
|
+
|
|
6
29
|
## [1.0.3](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.2...@nexim/element@1.0.3) (2024-12-07)
|
|
7
30
|
|
|
8
31
|
### Bug Fixes
|
package/dist/main.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.0.
|
|
1
|
+
/* @nexim/element v1.0.5 */
|
|
2
2
|
"use strict";
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -81,13 +81,17 @@ function LightDomMixin(superClass) {
|
|
|
81
81
|
var import_logger = require("@alwatr/logger");
|
|
82
82
|
var elementIndex = 0;
|
|
83
83
|
function LoggerMixin(superClass) {
|
|
84
|
-
class MixinClass extends superClass {
|
|
84
|
+
return class MixinClass extends superClass {
|
|
85
85
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
86
86
|
constructor(...args) {
|
|
87
87
|
super(...args);
|
|
88
|
-
|
|
88
|
+
/**
|
|
89
|
+
* Unique index for each element instance.
|
|
90
|
+
*/
|
|
89
91
|
this.elementIndex__ = ++elementIndex;
|
|
90
|
-
|
|
92
|
+
/**
|
|
93
|
+
* Logger instance with a tag name and unique index.
|
|
94
|
+
*/
|
|
91
95
|
this.logger_ = (0, import_logger.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
92
96
|
this.logger_.logMethod?.("constructor");
|
|
93
97
|
}
|
|
@@ -136,12 +140,11 @@ function LoggerMixin(superClass) {
|
|
|
136
140
|
this.logger_.logMethod?.("remove");
|
|
137
141
|
super.remove();
|
|
138
142
|
}
|
|
139
|
-
}
|
|
140
|
-
return MixinClass;
|
|
143
|
+
};
|
|
141
144
|
}
|
|
142
145
|
|
|
143
146
|
// src/main.ts
|
|
144
|
-
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.
|
|
147
|
+
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.5");
|
|
145
148
|
// Annotate the CommonJS export names for ESM import in node:
|
|
146
149
|
0 && (module.exports = {
|
|
147
150
|
LightDomMixin,
|
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 {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAA4B;;;ACyBrB,SAAS,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/main.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.0.
|
|
1
|
+
/* @nexim/element v1.0.5 */
|
|
2
2
|
|
|
3
3
|
// src/main.ts
|
|
4
4
|
import { packageTracer } from "@alwatr/package-tracer";
|
|
@@ -57,13 +57,17 @@ function LightDomMixin(superClass) {
|
|
|
57
57
|
import { createLogger } from "@alwatr/logger";
|
|
58
58
|
var elementIndex = 0;
|
|
59
59
|
function LoggerMixin(superClass) {
|
|
60
|
-
class MixinClass extends superClass {
|
|
60
|
+
return class MixinClass extends superClass {
|
|
61
61
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
62
62
|
constructor(...args) {
|
|
63
63
|
super(...args);
|
|
64
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Unique index for each element instance.
|
|
66
|
+
*/
|
|
65
67
|
this.elementIndex__ = ++elementIndex;
|
|
66
|
-
|
|
68
|
+
/**
|
|
69
|
+
* Logger instance with a tag name and unique index.
|
|
70
|
+
*/
|
|
67
71
|
this.logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
68
72
|
this.logger_.logMethod?.("constructor");
|
|
69
73
|
}
|
|
@@ -112,12 +116,11 @@ function LoggerMixin(superClass) {
|
|
|
112
116
|
this.logger_.logMethod?.("remove");
|
|
113
117
|
super.remove();
|
|
114
118
|
}
|
|
115
|
-
}
|
|
116
|
-
return MixinClass;
|
|
119
|
+
};
|
|
117
120
|
}
|
|
118
121
|
|
|
119
122
|
// src/main.ts
|
|
120
|
-
__dev_mode__: packageTracer.add("@nexim/element", "1.0.
|
|
123
|
+
__dev_mode__: packageTracer.add("@nexim/element", "1.0.5");
|
|
121
124
|
export {
|
|
122
125
|
LightDomMixin,
|
|
123
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 {
|
|
5
|
-
"mappings": ";;;AAAA,SAAQ,qBAAoB;;;ACyBrB,SAAS,
|
|
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": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { Class } from '@alwatr/type-helper';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
3
|
/**
|
|
4
4
|
* A mixin to enable light DOM rendering and style encapsulation for LitElement components.
|
|
@@ -22,5 +22,5 @@ import type { LitElement } from 'lit';
|
|
|
22
22
|
* }
|
|
23
23
|
* }
|
|
24
24
|
*/
|
|
25
|
-
export declare function LightDomMixin<T extends
|
|
25
|
+
export declare function LightDomMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): T;
|
|
26
26
|
//# 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,
|
|
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;;;;;;;;;;;;;;;;;;;;;GAqBG;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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { type AlwatrLogger } from '@alwatr/logger';
|
|
2
|
-
import type {
|
|
2
|
+
import type { Class } from '@alwatr/type-helper';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
|
-
export
|
|
5
|
-
|
|
4
|
+
export interface LoggerMixinInterface extends LitElement {
|
|
5
|
+
logger_: AlwatrLogger;
|
|
6
6
|
}
|
|
7
7
|
/**
|
|
8
8
|
* Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
|
|
@@ -24,5 +24,5 @@ export declare class LoggerMixinInterface extends LitElement {
|
|
|
24
24
|
* }
|
|
25
25
|
* }
|
|
26
26
|
*/
|
|
27
|
-
export declare function LoggerMixin<T extends
|
|
27
|
+
export declare function LoggerMixin<T extends Class<LitElement> = Class<LitElement>>(superClass: T): Class<LoggerMixinInterface> & T;
|
|
28
28
|
//# 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,
|
|
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;;;;;;;;;;;;;;;;;;;GAmBG;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.0.
|
|
3
|
+
"version": "1.0.5",
|
|
4
4
|
"description": "Utility functions and mixins for building high-performance web components with Lit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
@@ -61,11 +61,11 @@
|
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@alwatr/logger": "^5.0.0",
|
|
63
63
|
"@alwatr/package-tracer": "^5.0.0",
|
|
64
|
+
"@alwatr/type-helper": "^5.0.0",
|
|
64
65
|
"lit": "^3.2.1"
|
|
65
66
|
},
|
|
66
67
|
"devDependencies": {
|
|
67
68
|
"@alwatr/nano-build": "^5.0.0",
|
|
68
|
-
"@alwatr/type-helper": "^5.0.0",
|
|
69
69
|
"@nexim/typescript-config": "^1.0.0",
|
|
70
70
|
"ava": "^6.2.0",
|
|
71
71
|
"typescript": "^5.6.3"
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "ff22be12549a210b7a85598f94ddb11edd283adb"
|
|
77
77
|
}
|
package/dist/type.d.ts
DELETED
package/dist/type.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../src/type.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}
|