@nexim/element 1.0.0 → 1.0.1
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 +17 -0
- package/README.md +60 -1
- package/dist/main.cjs +52 -49
- package/dist/main.cjs.map +4 -4
- package/dist/main.d.ts +0 -2
- package/dist/main.d.ts.map +1 -1
- package/dist/main.mjs +51 -46
- package/dist/main.mjs.map +4 -4
- package/dist/mixin/light-dom.d.ts +23 -1
- package/dist/mixin/light-dom.d.ts.map +1 -1
- package/dist/mixin/logging.d.ts +21 -7
- package/dist/mixin/logging.d.ts.map +1 -1
- package/dist/type.d.ts.map +1 -0
- package/package.json +13 -13
- package/dist/lib/base-element.d.ts +0 -3
- package/dist/lib/base-element.d.ts.map +0 -1
- package/dist/lib/lit-light-dom-style.d.ts +0 -3
- package/dist/lib/lit-light-dom-style.d.ts.map +0 -1
- package/dist/lib/logger.d.ts +0 -2
- package/dist/lib/logger.d.ts.map +0 -1
- package/dist/lib/type.d.ts.map +0 -1
- package/src/main.test.js +0 -6
- /package/dist/{lib/type.d.ts → type.d.ts} +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,23 @@
|
|
|
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.1](https://github.com/the-nexim/nanolib/compare/@nexim/element@1.0.0...@nexim/element@1.0.1) (2024-12-07)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
* **element/logging-mixin:** remove extra field in type and make some part private ([9774abb](https://github.com/the-nexim/nanolib/commit/9774abbfbbba8ed539138d8f50127933cdcc791a)) by @njfamirm
|
|
11
|
+
|
|
12
|
+
### Code Refactoring
|
|
13
|
+
|
|
14
|
+
* **element/light-dom:** move style utils to class as static property ([7532dc7](https://github.com/the-nexim/nanolib/commit/7532dc738b8d8e66c9ee12c75485dd30ca32a897)) by @njfamirm
|
|
15
|
+
|
|
16
|
+
### Miscellaneous Chores
|
|
17
|
+
|
|
18
|
+
* **element/type:** move to root ([433a1c0](https://github.com/the-nexim/nanolib/commit/433a1c057edc8ae797f75db4bcb3d1c846a033bc)) by @njfamirm
|
|
19
|
+
* **element:** exclude test files from package distribution ([d308a17](https://github.com/the-nexim/nanolib/commit/d308a1724e12b1a5738352f5b8cd9bae0c7e225a)) by @njfamirm
|
|
20
|
+
* **element:** move lit to the devDependency because use as type ([fd5f879](https://github.com/the-nexim/nanolib/commit/fd5f879d964b710ee76b8f7a59375d7f708991d0)) by @njfamirm
|
|
21
|
+
* **element:** remove base element ([94047d4](https://github.com/the-nexim/nanolib/commit/94047d45e15df99d03605b82a4708cc735fe99ed)) by @njfamirm
|
|
22
|
+
|
|
6
23
|
## 1.0.0 (2024-12-04)
|
|
7
24
|
|
|
8
25
|
### Features
|
package/README.md
CHANGED
|
@@ -1 +1,60 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @nexim/element
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## Overview
|
|
10
|
+
|
|
11
|
+
`@nexim/element` is a collection of utility functions and mixins for building high-performance, maintainable web components using Lit.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```sh
|
|
16
|
+
npm install @nexim/element
|
|
17
|
+
|
|
18
|
+
# Or using yarn
|
|
19
|
+
yarn add @nexim/element
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## API
|
|
23
|
+
|
|
24
|
+
### LoggerMixin
|
|
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
|
+
```
|
package/dist/main.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @nexim/element v1.0.
|
|
1
|
+
/* @nexim/element v1.0.1 */
|
|
2
2
|
"use strict";
|
|
3
3
|
var __defProp = Object.defineProperty;
|
|
4
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
@@ -21,69 +21,74 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
21
21
|
// src/main.ts
|
|
22
22
|
var main_exports = {};
|
|
23
23
|
__export(main_exports, {
|
|
24
|
-
BaseElement: () => BaseElement,
|
|
25
24
|
LightDomMixin: () => LightDomMixin,
|
|
26
|
-
LoggerMixin: () => LoggerMixin
|
|
27
|
-
lightDomStyles: () => lightDomStyles
|
|
25
|
+
LoggerMixin: () => LoggerMixin
|
|
28
26
|
});
|
|
29
27
|
module.exports = __toCommonJS(main_exports);
|
|
30
28
|
var import_package_tracer = require("@alwatr/package-tracer");
|
|
31
29
|
|
|
32
|
-
// src/lib/base-element.ts
|
|
33
|
-
var import_lit = require("lit");
|
|
34
|
-
|
|
35
|
-
// src/lib/logger.ts
|
|
36
|
-
var import_logger = require("@alwatr/logger");
|
|
37
|
-
var logger = /* @__PURE__ */ (0, import_logger.createLogger)("common/component");
|
|
38
|
-
|
|
39
|
-
// src/lib/lit-light-dom-style.ts
|
|
40
|
-
function flatCssText(styles) {
|
|
41
|
-
logger.logMethod?.("flatCssText");
|
|
42
|
-
if (styles === void 0) return "";
|
|
43
|
-
if ("cssText" in styles) return styles.cssText.trim();
|
|
44
|
-
if (Array.isArray(styles)) {
|
|
45
|
-
return styles.map((style) => "cssText" in style ? style.cssText : flatCssText(style)).join("\n").trim();
|
|
46
|
-
}
|
|
47
|
-
return "";
|
|
48
|
-
}
|
|
49
|
-
function lightDomStyles(tagName, element) {
|
|
50
|
-
const className = `${tagName}-light-dom-style`;
|
|
51
|
-
if (document.querySelector(`style.${className}`) !== null) return;
|
|
52
|
-
const cssText = flatCssText(element.styles);
|
|
53
|
-
if (cssText === "") return;
|
|
54
|
-
logger.logMethodArgs?.("lightDomStyles", { tagName });
|
|
55
|
-
const styleEl = document.createElement("style");
|
|
56
|
-
styleEl.classList.add(className);
|
|
57
|
-
styleEl.innerHTML = cssText;
|
|
58
|
-
document.head.append(styleEl);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
30
|
// src/mixin/light-dom.ts
|
|
62
31
|
function LightDomMixin(superClass) {
|
|
63
32
|
class MixinClass extends superClass {
|
|
64
|
-
|
|
33
|
+
/**
|
|
34
|
+
* Flattens the CSSResultGroup into a single string of CSS text.
|
|
35
|
+
* @param styles - The styles to flatten.
|
|
36
|
+
* @returns A string of concatenated CSS text.
|
|
37
|
+
*/
|
|
38
|
+
static flatCssText(styles) {
|
|
39
|
+
if (styles === void 0) return "";
|
|
40
|
+
if ("cssText" in styles) return styles.cssText.trim();
|
|
41
|
+
if (Array.isArray(styles)) {
|
|
42
|
+
return styles.map((style) => "cssText" in style ? style.cssText : MixinClass.flatCssText(style)).join("\n").trim();
|
|
43
|
+
}
|
|
44
|
+
return "";
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Injects light DOM styles into the document head if not already present.
|
|
48
|
+
*
|
|
49
|
+
* @param tagName - The tag name of the custom element.
|
|
50
|
+
* @param element - The element class containing the styles.
|
|
51
|
+
*/
|
|
52
|
+
static lightDomStyles(tagName, element) {
|
|
53
|
+
const className = `${tagName}-light-dom-style`;
|
|
54
|
+
if (document.querySelector(`style.${className}`) !== null) return;
|
|
55
|
+
const cssText = MixinClass.flatCssText(element.styles);
|
|
56
|
+
if (cssText === "") return;
|
|
57
|
+
const styleEl = document.createElement("style");
|
|
58
|
+
styleEl.classList.add(className);
|
|
59
|
+
styleEl.innerHTML = cssText;
|
|
60
|
+
document.head.append(styleEl);
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Overrides the default render root to use the light DOM.
|
|
64
|
+
*/
|
|
65
65
|
createRenderRoot() {
|
|
66
66
|
return this;
|
|
67
67
|
}
|
|
68
|
-
|
|
68
|
+
/**
|
|
69
|
+
* Called when the element is added to the document's DOM.
|
|
70
|
+
* Adds the light DOM styles to the document head.
|
|
71
|
+
*/
|
|
69
72
|
connectedCallback() {
|
|
70
73
|
super.connectedCallback();
|
|
71
|
-
lightDomStyles(this.
|
|
74
|
+
MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor);
|
|
72
75
|
}
|
|
73
76
|
}
|
|
74
77
|
return MixinClass;
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
// src/mixin/logging.ts
|
|
78
|
-
var
|
|
81
|
+
var import_logger = require("@alwatr/logger");
|
|
79
82
|
var elementIndex = 0;
|
|
80
83
|
function LoggerMixin(superClass) {
|
|
81
84
|
class MixinClass extends superClass {
|
|
82
85
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
83
86
|
constructor(...args) {
|
|
84
87
|
super(...args);
|
|
85
|
-
|
|
86
|
-
this.
|
|
88
|
+
// Unique index for each element instance
|
|
89
|
+
this.elementIndex__ = ++elementIndex;
|
|
90
|
+
// Logger instance with a tag name and unique index
|
|
91
|
+
this.logger_ = (0, import_logger.createLogger)(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
87
92
|
this.logger_.logMethod?.("constructor");
|
|
88
93
|
}
|
|
89
94
|
connectedCallback() {
|
|
@@ -94,22 +99,25 @@ function LoggerMixin(superClass) {
|
|
|
94
99
|
this.logger_.logMethod?.("disconnectedCallback");
|
|
95
100
|
super.disconnectedCallback();
|
|
96
101
|
}
|
|
102
|
+
// Override update to measure update time
|
|
97
103
|
update(changedProperties) {
|
|
98
104
|
this.logger_.logMethodArgs?.("update", { changedProperties });
|
|
99
|
-
this.logger_.time?.(this.
|
|
105
|
+
this.logger_.time?.(this.firstUpdated__ ? "update-time" : "first-update-time");
|
|
100
106
|
super.update(changedProperties);
|
|
101
107
|
}
|
|
108
|
+
// Override firstUpdated to end the first update time measurement
|
|
102
109
|
firstUpdated(changedProperties) {
|
|
103
110
|
this.logger_.logMethodArgs?.("firstUpdated", { changedProperties });
|
|
104
111
|
this.logger_.timeEnd?.("first-update-time");
|
|
105
112
|
super.firstUpdated(changedProperties);
|
|
106
113
|
}
|
|
114
|
+
// Override updated to end the update time measurement
|
|
107
115
|
updated(changedProperties) {
|
|
108
116
|
this.logger_.logMethodArgs?.("updated", { changedProperties });
|
|
109
|
-
if (this.
|
|
117
|
+
if (this.firstUpdated__) {
|
|
110
118
|
this.logger_.timeEnd?.("update-time");
|
|
111
119
|
} else {
|
|
112
|
-
this.
|
|
120
|
+
this.firstUpdated__ = true;
|
|
113
121
|
}
|
|
114
122
|
super.updated(changedProperties);
|
|
115
123
|
}
|
|
@@ -132,17 +140,12 @@ function LoggerMixin(superClass) {
|
|
|
132
140
|
return MixinClass;
|
|
133
141
|
}
|
|
134
142
|
|
|
135
|
-
// src/lib/base-element.ts
|
|
136
|
-
var BaseElement = LightDomMixin(LoggerMixin(import_lit.LitElement));
|
|
137
|
-
|
|
138
143
|
// src/main.ts
|
|
139
|
-
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.
|
|
144
|
+
__dev_mode__: import_package_tracer.packageTracer.add("@nexim/element", "1.0.1");
|
|
140
145
|
// Annotate the CommonJS export names for ESM import in node:
|
|
141
146
|
0 && (module.exports = {
|
|
142
|
-
BaseElement,
|
|
143
147
|
LightDomMixin,
|
|
144
|
-
LoggerMixin
|
|
145
|
-
lightDomStyles
|
|
148
|
+
LoggerMixin
|
|
146
149
|
});
|
|
147
150
|
/*! For license information please see main.cjs.LEGAL.txt */
|
|
148
151
|
//# sourceMappingURL=main.cjs.map
|
package/dist/main.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/main.ts", "../src/
|
|
4
|
-
"sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA
|
|
6
|
-
"names": [
|
|
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 {Constructor} from '../type.js';\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 Constructor<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 as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\n// Global element index to uniquely identify each element instance\nlet elementIndex = /* @__PURE__ */ 0;\n\n// Declaration of the LoggerMixinInterface class extending LitElement\nexport declare class LoggerMixinInterface extends LitElement {\n // Logger instance for the element\n protected 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 Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T {\n class MixinClass extends superClass {\n // Unique index for each element instance\n private elementIndex__: number = ++elementIndex;\n\n // Logger instance with a tag name and unique index\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 }\n\n return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
package/dist/main.d.ts
CHANGED
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":"AAKA,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC"}
|
package/dist/main.mjs
CHANGED
|
@@ -1,63 +1,70 @@
|
|
|
1
|
-
/* @nexim/element v1.0.
|
|
1
|
+
/* @nexim/element v1.0.1 */
|
|
2
2
|
|
|
3
3
|
// src/main.ts
|
|
4
4
|
import { packageTracer } from "@alwatr/package-tracer";
|
|
5
5
|
|
|
6
|
-
// src/lib/base-element.ts
|
|
7
|
-
import { LitElement } from "lit";
|
|
8
|
-
|
|
9
|
-
// src/lib/logger.ts
|
|
10
|
-
import { createLogger } from "@alwatr/logger";
|
|
11
|
-
var logger = /* @__PURE__ */ createLogger("common/component");
|
|
12
|
-
|
|
13
|
-
// src/lib/lit-light-dom-style.ts
|
|
14
|
-
function flatCssText(styles) {
|
|
15
|
-
logger.logMethod?.("flatCssText");
|
|
16
|
-
if (styles === void 0) return "";
|
|
17
|
-
if ("cssText" in styles) return styles.cssText.trim();
|
|
18
|
-
if (Array.isArray(styles)) {
|
|
19
|
-
return styles.map((style) => "cssText" in style ? style.cssText : flatCssText(style)).join("\n").trim();
|
|
20
|
-
}
|
|
21
|
-
return "";
|
|
22
|
-
}
|
|
23
|
-
function lightDomStyles(tagName, element) {
|
|
24
|
-
const className = `${tagName}-light-dom-style`;
|
|
25
|
-
if (document.querySelector(`style.${className}`) !== null) return;
|
|
26
|
-
const cssText = flatCssText(element.styles);
|
|
27
|
-
if (cssText === "") return;
|
|
28
|
-
logger.logMethodArgs?.("lightDomStyles", { tagName });
|
|
29
|
-
const styleEl = document.createElement("style");
|
|
30
|
-
styleEl.classList.add(className);
|
|
31
|
-
styleEl.innerHTML = cssText;
|
|
32
|
-
document.head.append(styleEl);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
6
|
// src/mixin/light-dom.ts
|
|
36
7
|
function LightDomMixin(superClass) {
|
|
37
8
|
class MixinClass extends superClass {
|
|
38
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Flattens the CSSResultGroup into a single string of CSS text.
|
|
11
|
+
* @param styles - The styles to flatten.
|
|
12
|
+
* @returns A string of concatenated CSS text.
|
|
13
|
+
*/
|
|
14
|
+
static flatCssText(styles) {
|
|
15
|
+
if (styles === void 0) return "";
|
|
16
|
+
if ("cssText" in styles) return styles.cssText.trim();
|
|
17
|
+
if (Array.isArray(styles)) {
|
|
18
|
+
return styles.map((style) => "cssText" in style ? style.cssText : MixinClass.flatCssText(style)).join("\n").trim();
|
|
19
|
+
}
|
|
20
|
+
return "";
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Injects light DOM styles into the document head if not already present.
|
|
24
|
+
*
|
|
25
|
+
* @param tagName - The tag name of the custom element.
|
|
26
|
+
* @param element - The element class containing the styles.
|
|
27
|
+
*/
|
|
28
|
+
static lightDomStyles(tagName, element) {
|
|
29
|
+
const className = `${tagName}-light-dom-style`;
|
|
30
|
+
if (document.querySelector(`style.${className}`) !== null) return;
|
|
31
|
+
const cssText = MixinClass.flatCssText(element.styles);
|
|
32
|
+
if (cssText === "") return;
|
|
33
|
+
const styleEl = document.createElement("style");
|
|
34
|
+
styleEl.classList.add(className);
|
|
35
|
+
styleEl.innerHTML = cssText;
|
|
36
|
+
document.head.append(styleEl);
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Overrides the default render root to use the light DOM.
|
|
40
|
+
*/
|
|
39
41
|
createRenderRoot() {
|
|
40
42
|
return this;
|
|
41
43
|
}
|
|
42
|
-
|
|
44
|
+
/**
|
|
45
|
+
* Called when the element is added to the document's DOM.
|
|
46
|
+
* Adds the light DOM styles to the document head.
|
|
47
|
+
*/
|
|
43
48
|
connectedCallback() {
|
|
44
49
|
super.connectedCallback();
|
|
45
|
-
lightDomStyles(this.
|
|
50
|
+
MixinClass.lightDomStyles(this.tagName.toLowerCase(), this.constructor);
|
|
46
51
|
}
|
|
47
52
|
}
|
|
48
53
|
return MixinClass;
|
|
49
54
|
}
|
|
50
55
|
|
|
51
56
|
// src/mixin/logging.ts
|
|
52
|
-
import { createLogger
|
|
57
|
+
import { createLogger } from "@alwatr/logger";
|
|
53
58
|
var elementIndex = 0;
|
|
54
59
|
function LoggerMixin(superClass) {
|
|
55
60
|
class MixinClass extends superClass {
|
|
56
61
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
57
62
|
constructor(...args) {
|
|
58
63
|
super(...args);
|
|
59
|
-
|
|
60
|
-
this.
|
|
64
|
+
// Unique index for each element instance
|
|
65
|
+
this.elementIndex__ = ++elementIndex;
|
|
66
|
+
// Logger instance with a tag name and unique index
|
|
67
|
+
this.logger_ = createLogger(`<${this.tagName.toLowerCase()}-${this.elementIndex__}>`);
|
|
61
68
|
this.logger_.logMethod?.("constructor");
|
|
62
69
|
}
|
|
63
70
|
connectedCallback() {
|
|
@@ -68,22 +75,25 @@ function LoggerMixin(superClass) {
|
|
|
68
75
|
this.logger_.logMethod?.("disconnectedCallback");
|
|
69
76
|
super.disconnectedCallback();
|
|
70
77
|
}
|
|
78
|
+
// Override update to measure update time
|
|
71
79
|
update(changedProperties) {
|
|
72
80
|
this.logger_.logMethodArgs?.("update", { changedProperties });
|
|
73
|
-
this.logger_.time?.(this.
|
|
81
|
+
this.logger_.time?.(this.firstUpdated__ ? "update-time" : "first-update-time");
|
|
74
82
|
super.update(changedProperties);
|
|
75
83
|
}
|
|
84
|
+
// Override firstUpdated to end the first update time measurement
|
|
76
85
|
firstUpdated(changedProperties) {
|
|
77
86
|
this.logger_.logMethodArgs?.("firstUpdated", { changedProperties });
|
|
78
87
|
this.logger_.timeEnd?.("first-update-time");
|
|
79
88
|
super.firstUpdated(changedProperties);
|
|
80
89
|
}
|
|
90
|
+
// Override updated to end the update time measurement
|
|
81
91
|
updated(changedProperties) {
|
|
82
92
|
this.logger_.logMethodArgs?.("updated", { changedProperties });
|
|
83
|
-
if (this.
|
|
93
|
+
if (this.firstUpdated__) {
|
|
84
94
|
this.logger_.timeEnd?.("update-time");
|
|
85
95
|
} else {
|
|
86
|
-
this.
|
|
96
|
+
this.firstUpdated__ = true;
|
|
87
97
|
}
|
|
88
98
|
super.updated(changedProperties);
|
|
89
99
|
}
|
|
@@ -106,16 +116,11 @@ function LoggerMixin(superClass) {
|
|
|
106
116
|
return MixinClass;
|
|
107
117
|
}
|
|
108
118
|
|
|
109
|
-
// src/lib/base-element.ts
|
|
110
|
-
var BaseElement = LightDomMixin(LoggerMixin(LitElement));
|
|
111
|
-
|
|
112
119
|
// src/main.ts
|
|
113
|
-
__dev_mode__: packageTracer.add("@nexim/element", "1.0.
|
|
120
|
+
__dev_mode__: packageTracer.add("@nexim/element", "1.0.1");
|
|
114
121
|
export {
|
|
115
|
-
BaseElement,
|
|
116
122
|
LightDomMixin,
|
|
117
|
-
LoggerMixin
|
|
118
|
-
lightDomStyles
|
|
123
|
+
LoggerMixin
|
|
119
124
|
};
|
|
120
125
|
/*! For license information please see main.mjs.LEGAL.txt */
|
|
121
126
|
//# sourceMappingURL=main.mjs.map
|
package/dist/main.mjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/main.ts", "../src/
|
|
4
|
-
"sourcesContent": ["import {packageTracer} from '@alwatr/package-tracer';\n\
|
|
5
|
-
"mappings": ";;;AAAA,SAAQ,qBAAoB;;;
|
|
6
|
-
"names": [
|
|
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 {Constructor} from '../type.js';\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 Constructor<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 as unknown as T;\n}\n", "import {createLogger, type AlwatrLogger} from '@alwatr/logger';\n\nimport type {Constructor} from '../type.js';\nimport type {LitElement, PropertyValues} from 'lit';\n\n// Global element index to uniquely identify each element instance\nlet elementIndex = /* @__PURE__ */ 0;\n\n// Declaration of the LoggerMixinInterface class extending LitElement\nexport declare class LoggerMixinInterface extends LitElement {\n // Logger instance for the element\n protected 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 Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T {\n class MixinClass extends superClass {\n // Unique index for each element instance\n private elementIndex__: number = ++elementIndex;\n\n // Logger instance with a tag name and unique index\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 }\n\n return MixinClass as unknown as Constructor<LoggerMixinInterface> & T;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": []
|
|
7
7
|
}
|
|
@@ -1,4 +1,26 @@
|
|
|
1
|
-
import type { Constructor } from '../
|
|
1
|
+
import type { Constructor } from '../type.js';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
+
/**
|
|
4
|
+
* A mixin to enable light DOM rendering and style encapsulation for LitElement components.
|
|
5
|
+
*
|
|
6
|
+
* @param superClass - The base class to extend.
|
|
7
|
+
* @returns A class that extends the base class with light DOM functionality.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* import {LitElement, html, css} from 'lit';
|
|
11
|
+
* import {LightDomMixin} from '@nexim/element';
|
|
12
|
+
*
|
|
13
|
+
* class MyLightDomElement extends LightDomMixin(LitElement) {
|
|
14
|
+
* static styles = css`
|
|
15
|
+
* p {
|
|
16
|
+
* color: blue;
|
|
17
|
+
* }
|
|
18
|
+
* `;
|
|
19
|
+
*
|
|
20
|
+
* protected override render() {
|
|
21
|
+
* return html`<p>Hello, light DOM!</p>`;
|
|
22
|
+
* }
|
|
23
|
+
* }
|
|
24
|
+
*/
|
|
3
25
|
export declare function LightDomMixin<T extends Constructor<LitElement>>(superClass: T): T;
|
|
4
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":"
|
|
1
|
+
{"version":3,"file":"light-dom.d.ts","sourceRoot":"","sources":["../../src/mixin/light-dom.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAC,UAAU,EAAkC,MAAM,KAAK,CAAC;AAErE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,CAwDjF"}
|
package/dist/mixin/logging.d.ts
CHANGED
|
@@ -1,14 +1,28 @@
|
|
|
1
1
|
import { type AlwatrLogger } from '@alwatr/logger';
|
|
2
|
-
import type { Constructor } from '../
|
|
2
|
+
import type { Constructor } from '../type.js';
|
|
3
3
|
import type { LitElement } from 'lit';
|
|
4
4
|
export declare class LoggerMixinInterface extends LitElement {
|
|
5
|
-
/**
|
|
6
|
-
* Logger index!
|
|
7
|
-
*
|
|
8
|
-
* Element index for logger ;)
|
|
9
|
-
*/
|
|
10
|
-
elementIndex_: number;
|
|
11
5
|
protected logger_: AlwatrLogger;
|
|
12
6
|
}
|
|
7
|
+
/**
|
|
8
|
+
* Create a mixin class that extends the provided superclass and logs the lifecycle methods of the element.
|
|
9
|
+
*
|
|
10
|
+
* Hint: function super() must be called in the methods to logger work.
|
|
11
|
+
*
|
|
12
|
+
* @param superClass - The base class to extend.
|
|
13
|
+
* @returns A mixin class that extends the superclass and logs the lifecycle methods of the element.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* import {LitElement, html} from 'lit';
|
|
17
|
+
* import {LoggerMixin} from '@nexim/element';
|
|
18
|
+
*
|
|
19
|
+
* class MyElement extends LoggerMixin(LitElement) {
|
|
20
|
+
* protected override render() {
|
|
21
|
+
* super.render(); // must call super method to logger work
|
|
22
|
+
*
|
|
23
|
+
* return html`<p>Hello, world!</p>`;
|
|
24
|
+
* }
|
|
25
|
+
* }
|
|
26
|
+
*/
|
|
13
27
|
export declare function LoggerMixin<T extends Constructor<LitElement>>(superClass: T): Constructor<LoggerMixinInterface> & T;
|
|
14
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,WAAW,EAAC,MAAM,
|
|
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,WAAW,EAAC,MAAM,YAAY,CAAC;AAC5C,OAAO,KAAK,EAAC,UAAU,EAAiB,MAAM,KAAK,CAAC;AAMpD,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,UAAU;IAE1D,SAAS,CAAC,OAAO,EAAE,YAAY,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,WAAW,CAAC,oBAAoB,CAAC,GAAG,CAAC,CA0EnH"}
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@nexim/element",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "Utility functions and mixins for building high-performance web components with Lit.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"lit",
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
7
|
+
"web-components",
|
|
8
|
+
"mixins",
|
|
9
|
+
"logger",
|
|
10
|
+
"light-dom",
|
|
10
11
|
"typescript",
|
|
11
|
-
"javascript",
|
|
12
|
-
"browser",
|
|
13
|
-
"esm",
|
|
14
|
-
"module",
|
|
15
|
-
"nanolib",
|
|
16
12
|
"nexim"
|
|
17
13
|
],
|
|
18
14
|
"homepage": "https://github.com/the-nexim/nanolib/tree/next/packages/element#readme",
|
|
@@ -26,6 +22,9 @@
|
|
|
26
22
|
},
|
|
27
23
|
"license": "AGPL-3.0-only",
|
|
28
24
|
"author": "S. Amir Mohammad Najafi <njfamirm@gmail.com> (www.njfamirm.ir)",
|
|
25
|
+
"contributors": [
|
|
26
|
+
"Arash Ghardashpoor <arash.qardashpoor@gmail.com> (https://www.agpagp.ir)"
|
|
27
|
+
],
|
|
29
28
|
"type": "module",
|
|
30
29
|
"exports": {
|
|
31
30
|
".": {
|
|
@@ -40,6 +39,7 @@
|
|
|
40
39
|
"files": [
|
|
41
40
|
"**/*.{js,mjs,cjs,map,d.ts,html,md,LEGAL.txt}",
|
|
42
41
|
"LICENSE",
|
|
42
|
+
"!**/*.test.js",
|
|
43
43
|
"!demo/**/*"
|
|
44
44
|
],
|
|
45
45
|
"scripts": {
|
|
@@ -60,18 +60,18 @@
|
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@alwatr/logger": "^5.0.0",
|
|
63
|
-
"@alwatr/package-tracer": "^5.0.0"
|
|
64
|
-
"lit": "^3.2.1"
|
|
63
|
+
"@alwatr/package-tracer": "^5.0.0"
|
|
65
64
|
},
|
|
66
65
|
"devDependencies": {
|
|
67
66
|
"@alwatr/nano-build": "^5.0.0",
|
|
68
67
|
"@alwatr/type-helper": "^5.0.0",
|
|
69
68
|
"@nexim/typescript-config": "^1.0.0",
|
|
70
69
|
"ava": "^6.2.0",
|
|
70
|
+
"lit": "^3.2.1",
|
|
71
71
|
"typescript": "^5.6.3"
|
|
72
72
|
},
|
|
73
73
|
"publishConfig": {
|
|
74
74
|
"access": "public"
|
|
75
75
|
},
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "5ef926fb9ddd993105454aa776d59c4d6d7fd4e0"
|
|
77
77
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../src/lib/base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,KAAK,CAAC;AAK/B,eAAO,MAAM,WAAW,gGAAyC,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"lit-light-dom-style.d.ts","sourceRoot":"","sources":["../../src/lib/lit-light-dom-style.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAiB,eAAe,EAAC,MAAM,KAAK,CAAC;AAgBzD,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,eAAe,GAAG,IAAI,CAYrF"}
|
package/dist/lib/logger.d.ts
DELETED
package/dist/lib/logger.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../src/lib/logger.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,uCAAmD,CAAC"}
|
package/dist/lib/type.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/lib/type.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC"}
|
package/src/main.test.js
DELETED
|
File without changes
|