@trunkjs/browser-utils 1.0.15 → 1.0.17
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 +39 -148
- package/index.d.ts +2 -0
- package/index.js +148 -57
- package/lib/breakpoints.d.ts +24 -0
- package/lib/wait-for.d.ts +12 -1
- package/mixins/EventBindingsMixin.d.ts +17 -0
- package/mixins/LoggingMixin.d.ts +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## 1.0.17 (2025-09-11)
|
|
2
|
+
|
|
3
|
+
This was a version bump only for browser-utils to align it with other projects, there were no code changes.
|
|
4
|
+
|
|
5
|
+
## 1.0.16 (2025-08-27)
|
|
6
|
+
|
|
7
|
+
This was a version bump only for browser-utils to align it with other projects, there were no code changes.
|
|
8
|
+
|
|
1
9
|
## 1.0.15 (2025-08-24)
|
|
2
10
|
|
|
3
11
|
This was a version bump only for browser-utils to align it with other projects, there were no code changes.
|
package/README.md
CHANGED
|
@@ -9,29 +9,20 @@ Exports:
|
|
|
9
9
|
- waitFor, waitForDomContentLoaded, waitForLoad, sleep, waitForAnimationEnd: Promise-based event and timing helpers
|
|
10
10
|
- LoggingMixin: Lightweight logging mixin for Custom Elements
|
|
11
11
|
|
|
12
|
+
- [Event Bindings for WebComponents](./docs/README_EventHandling.md)
|
|
13
|
+
|
|
12
14
|
## Installation
|
|
13
15
|
|
|
14
16
|
Within this monorepo, the package is consumed via path aliases. If you publish or consume it externally, import from the package name:
|
|
15
17
|
|
|
16
18
|
```ts
|
|
17
|
-
import {
|
|
18
|
-
create_element,
|
|
19
|
-
Debouncer,
|
|
20
|
-
Stopwatch,
|
|
21
|
-
waitFor,
|
|
22
|
-
waitForDomContentLoaded,
|
|
23
|
-
waitForLoad,
|
|
24
|
-
sleep,
|
|
25
|
-
waitForAnimationEnd,
|
|
26
|
-
LoggingMixin,
|
|
27
|
-
} from '@trunkjs/browser-utils';
|
|
19
|
+
import { } from '@trunkjs/browser-utils';
|
|
28
20
|
```
|
|
29
21
|
|
|
30
|
-
Note: Several utilities depend on browser globals (window, document, performance). Use them in browser-like environments.
|
|
31
22
|
|
|
32
23
|
## Quick start
|
|
33
24
|
|
|
34
|
-
### Create and append an element
|
|
25
|
+
### `function create_element()`: Create and append an element
|
|
35
26
|
|
|
36
27
|
```ts
|
|
37
28
|
import { create_element } from '@trunkjs/browser-utils';
|
|
@@ -49,7 +40,7 @@ Notes:
|
|
|
49
40
|
- Attributes with value true create boolean attributes (e.g. disabled becomes disabled="").
|
|
50
41
|
- Attributes with null or undefined are omitted.
|
|
51
42
|
|
|
52
|
-
### Debounce input handling
|
|
43
|
+
### `class Debouncer`:Debounce input handling
|
|
53
44
|
|
|
54
45
|
```ts
|
|
55
46
|
import { Debouncer } from '@trunkjs/browser-utils';
|
|
@@ -75,7 +66,7 @@ window.addEventListener('resize', () => {
|
|
|
75
66
|
});
|
|
76
67
|
```
|
|
77
68
|
|
|
78
|
-
### Measure performance with Stopwatch
|
|
69
|
+
### `class Stopwatch`: Measure performance with Stopwatch
|
|
79
70
|
|
|
80
71
|
```ts
|
|
81
72
|
import { Stopwatch } from '@trunkjs/browser-utils';
|
|
@@ -88,7 +79,7 @@ sw.lap('after step 2');
|
|
|
88
79
|
console.debug('Total ms:', sw.stop());
|
|
89
80
|
```
|
|
90
81
|
|
|
91
|
-
### Enable conditional logging in custom elements (LoggingMixin)
|
|
82
|
+
### `class LoggingMixin`: Enable conditional logging in custom elements (LoggingMixin)
|
|
92
83
|
|
|
93
84
|
```ts
|
|
94
85
|
import { LoggingMixin } from '@trunkjs/browser-utils';
|
|
@@ -113,7 +104,37 @@ customElements.define('my-el', MyEl);
|
|
|
113
104
|
Tip:
|
|
114
105
|
- If you toggle the debug attribute at runtime, call el.invalidateDebugCache() so the mixin re-evaluates the attribute on the next log/warn/error call.
|
|
115
106
|
|
|
116
|
-
###
|
|
107
|
+
### `class EventBindingsMixin`: Auto-bind event listeners in custom elements
|
|
108
|
+
|
|
109
|
+
This mixin handles automatic registration and removal of event listeners in custom elements. It uses the `@Listen` decorator to bind class methods to events on specified targets.
|
|
110
|
+
|
|
111
|
+
It will register the events in connectedCallback and remove them in disconnectedCallback.
|
|
112
|
+
|
|
113
|
+
```ts
|
|
114
|
+
import { EventBindingsMixin } from '@trunkjs/browser-utils';
|
|
115
|
+
import { Listen } from '@trunkjs/browser-utils';
|
|
116
|
+
|
|
117
|
+
class MyEl extends EventBindingsMixin(HTMLElement) {
|
|
118
|
+
@Listen('click', { target: 'this' }) // listens to clicks on the element itself
|
|
119
|
+
onClick(event: MouseEvent) {
|
|
120
|
+
this.log('Element clicked', event);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
@Listen('resize', { target: 'window' }) // listens to window resize events
|
|
124
|
+
onResize(event: UIEvent) {
|
|
125
|
+
this.log('Window resized', event);
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
Target options:
|
|
131
|
+
- 'host': the custom element itself
|
|
132
|
+
- 'window': the global window object
|
|
133
|
+
- 'document': the global document object
|
|
134
|
+
- 'shadowRoot': the shadow root of the element (if any)
|
|
135
|
+
- `(element) => EventTarget`: a function returning any EventTarget (e.g. another DOM element)
|
|
136
|
+
|
|
137
|
+
### `async function waitForXYZ`: Promise-based event helpers
|
|
117
138
|
|
|
118
139
|
```ts
|
|
119
140
|
import { waitFor, waitForDomContentLoaded, waitForLoad, sleep, waitForAnimationEnd } from '@trunkjs/browser-utils';
|
|
@@ -131,137 +152,7 @@ await sleep(250);
|
|
|
131
152
|
await waitForAnimationEnd(document.querySelector('.animate')!);
|
|
132
153
|
```
|
|
133
154
|
|
|
134
|
-
## API Reference
|
|
135
|
-
|
|
136
|
-
### create_element(tag, attrs?, children?)
|
|
137
155
|
|
|
138
|
-
- Signature:
|
|
139
|
-
- create_element(tag: string, attrs?: Record<string, string | true | null | undefined>, children?: (Node | string)[] | string | Node): HTMLElement
|
|
140
|
-
- Behavior:
|
|
141
|
-
- Creates an element, sets provided attributes, and appends children.
|
|
142
|
-
- children can be a single Node/string or an array.
|
|
143
|
-
- Attribute values:
|
|
144
|
-
- true → renders as a boolean attribute with an empty value (e.g. disabled="")
|
|
145
|
-
- null/undefined → attribute is omitted
|
|
146
|
-
- string → sets the attribute to the given string
|
|
147
156
|
|
|
148
|
-
Example:
|
|
149
|
-
```ts
|
|
150
|
-
create_element('input', { type: 'checkbox', checked: true });
|
|
151
|
-
```
|
|
152
157
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
- constructor(delay: number, max_delay: number | false = false)
|
|
156
|
-
- delay: debounce window in ms
|
|
157
|
-
- max_delay: maximum time a call may be deferred. If false, no max is applied.
|
|
158
|
-
- wait(): Promise<true>
|
|
159
|
-
- Returns a promise that resolves after delay ms since the last call.
|
|
160
|
-
- If max_delay is set and exceeded, the pending timer is not cleared and will resolve soon.
|
|
161
|
-
- debounce(callback: () => void): void
|
|
162
|
-
- Schedules callback to run after delay ms since the last call.
|
|
163
|
-
|
|
164
|
-
Use cases:
|
|
165
|
-
- User input throttling (search boxes)
|
|
166
|
-
- Resize or scroll handlers
|
|
167
|
-
- Preventing excessive network calls
|
|
168
|
-
|
|
169
|
-
### class Stopwatch
|
|
170
|
-
|
|
171
|
-
- constructor(label: string, enabled: boolean = true)
|
|
172
|
-
- lap(msg?: string): void
|
|
173
|
-
- Logs a lap line to console.debug in format: [label] msg +Xs
|
|
174
|
-
- elapsed(): number
|
|
175
|
-
- Milliseconds since start
|
|
176
|
-
- reset(): void
|
|
177
|
-
- stop(): number
|
|
178
|
-
- Stops the stopwatch and returns elapsed ms
|
|
179
|
-
- start(): void
|
|
180
|
-
- Starts (or restarts) and resets timings
|
|
181
|
-
- isRunning(): boolean
|
|
182
|
-
|
|
183
|
-
Notes:
|
|
184
|
-
- Uses performance.now() for high-resolution timing
|
|
185
|
-
- If enabled is false, lap is a no-op
|
|
186
|
-
|
|
187
|
-
### LoggingMixin(Base)
|
|
188
|
-
|
|
189
|
-
- Signature:
|
|
190
|
-
- LoggingMixin<TBase extends abstract new (...args: any[]) => object>(Base: TBase): class extends Base
|
|
191
|
-
- Adds methods and properties to your Custom Element base class:
|
|
192
|
-
- log(...args: any[]): void
|
|
193
|
-
- Logs to console.log only when debug is enabled.
|
|
194
|
-
- warn(...args: any[]): void
|
|
195
|
-
- Always logs to console.warn (independent of debug).
|
|
196
|
-
- error(...args: any[]): void
|
|
197
|
-
- Always logs to console.error (independent of debug).
|
|
198
|
-
- get _debug(): boolean
|
|
199
|
-
- Indicates whether debug logging is enabled for the instance.
|
|
200
|
-
- invalidateDebugCache(): void
|
|
201
|
-
- Clears the cached debug flag. Call this after changing the debug attribute dynamically.
|
|
202
|
-
|
|
203
|
-
How debug is determined:
|
|
204
|
-
- On first call to log/warn/error, the mixin checks the element’s debug attribute and caches the result.
|
|
205
|
-
- The attribute is considered truthy if present and not one of: "false", "0", "off", "no".
|
|
206
|
-
- Examples:
|
|
207
|
-
- <my-el debug></my-el> → debug ON
|
|
208
|
-
- <my-el debug="true"></my-el> → debug ON
|
|
209
|
-
- <my-el debug="false"></my-el> → debug OFF
|
|
210
|
-
- <my-el></my-el> → debug OFF
|
|
211
|
-
- If you toggle the attribute at runtime, call invalidateDebugCache() so the next call re-evaluates it.
|
|
212
|
-
|
|
213
|
-
Usage:
|
|
214
|
-
```ts
|
|
215
|
-
class MyEl extends LoggingMixin(HTMLElement) {
|
|
216
|
-
connectedCallback() {
|
|
217
|
-
this.log('connected'); // prints only if debug is ON
|
|
218
|
-
this.warn('warning'); // always prints
|
|
219
|
-
this.error('error'); // always prints
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
```
|
|
223
|
-
|
|
224
|
-
### waitFor<T>(target, eventName, options?)
|
|
225
|
-
|
|
226
|
-
- Signature:
|
|
227
|
-
- waitFor<T>(target: EventTarget, eventName: string, options?: AddEventListenerOptions): Promise<T>
|
|
228
|
-
- Resolves with the event object T upon first occurrence.
|
|
229
|
-
|
|
230
|
-
### waitForDomContentLoaded()
|
|
231
|
-
|
|
232
|
-
- Resolves once the DOM is ready (DOMContentLoaded).
|
|
233
|
-
- If the document is already past loading, resolves immediately.
|
|
234
|
-
|
|
235
|
-
### waitForLoad()
|
|
236
|
-
|
|
237
|
-
- Resolves once the window load event fires.
|
|
238
|
-
- If the document is already complete, resolves immediately.
|
|
239
|
-
|
|
240
|
-
### sleep(ms)
|
|
241
|
-
|
|
242
|
-
- Signature: sleep(ms: number): Promise<void>
|
|
243
|
-
- Resolves after the given delay.
|
|
244
|
-
|
|
245
|
-
### waitForAnimationEnd(element)
|
|
246
|
-
|
|
247
|
-
- Signature: waitForAnimationEnd(element: HTMLElement): Promise<AnimationEvent>
|
|
248
|
-
- Resolves when the element fires animationend.
|
|
249
|
-
|
|
250
|
-
## Building
|
|
251
|
-
|
|
252
|
-
Run `nx build browser-utils` to build the library.
|
|
253
|
-
|
|
254
|
-
The library is configured for:
|
|
255
|
-
- ES module output
|
|
256
|
-
- TypeScript declaration generation via vite-plugin-dts
|
|
257
|
-
- Vite rollup bundling
|
|
258
|
-
|
|
259
|
-
## Running unit tests
|
|
260
|
-
|
|
261
|
-
Run `nx test browser-utils` to execute the unit tests via Vitest.
|
|
262
|
-
|
|
263
|
-
## Notes and caveats
|
|
264
|
-
|
|
265
|
-
- Environment: Some utilities require browser globals (window, document, performance). Use them in a DOM-capable environment (browser or a DOM-enabled test runner).
|
|
266
|
-
- Types: Debouncer uses NodeJS.Timeout type in typings; in browsers, the runtime value is still a timeout handle and works as expected.
|
|
267
|
-
- LoggingMixin: Designed for Custom Elements (HTMLElement or frameworks like Lit’s ReactiveElement). The debug attribute is cached for performance; call invalidateDebugCache() after toggling it dynamically. warn and error always log regardless of debug state.
|
|
158
|
+
## API Reference
|
package/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
export * from './lib/breakpoints';
|
|
1
2
|
export * from './lib/create-element';
|
|
2
3
|
export * from './lib/Debouncer';
|
|
3
4
|
export * from './lib/get-error-location';
|
|
4
5
|
export * from './lib/Logger';
|
|
5
6
|
export * from './lib/Stopwatch';
|
|
6
7
|
export * from './lib/wait-for';
|
|
8
|
+
export * from './mixins/EventBindingsMixin';
|
|
7
9
|
export * from './mixins/LoggingMixin';
|
package/index.js
CHANGED
|
@@ -1,28 +1,51 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
1
|
+
var W = Object.defineProperty;
|
|
2
|
+
var L = (t) => {
|
|
3
3
|
throw TypeError(t);
|
|
4
4
|
};
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
|
|
5
|
+
var x = (t, e, n) => e in t ? W(t, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[e] = n;
|
|
6
|
+
var u = (t, e, n) => x(t, typeof e != "symbol" ? e + "" : e, n), w = (t, e, n) => e.has(t) || L("Cannot " + n);
|
|
7
|
+
var a = (t, e, n) => (w(t, e, "read from private field"), n ? n.call(t) : e.get(t)), l = (t, e, n) => e.has(t) ? L("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, n), c = (t, e, n, i) => (w(t, e, "write to private field"), i ? i.call(t, n) : e.set(t, n), n), v = (t, e, n) => (w(t, e, "access private method"), n);
|
|
8
|
+
const h = [
|
|
9
|
+
{ name: "xs", minWidth: 0 },
|
|
10
|
+
{ name: "sm", minWidth: 576 },
|
|
11
|
+
{ name: "md", minWidth: 768 },
|
|
12
|
+
{ name: "lg", minWidth: 992 },
|
|
13
|
+
{ name: "xl", minWidth: 1200 },
|
|
14
|
+
{ name: "xxl", minWidth: 1400 }
|
|
15
|
+
], y = h.reduce(
|
|
16
|
+
(t, e) => (t[e.name] = e.minWidth, t),
|
|
17
|
+
{}
|
|
18
|
+
);
|
|
19
|
+
function P(t) {
|
|
20
|
+
if (!(t in y))
|
|
21
|
+
throw new Error(`Unknown breakpoint: ${t}`);
|
|
22
|
+
return y[t];
|
|
23
|
+
}
|
|
24
|
+
function B(t) {
|
|
25
|
+
t === void 0 && (t = window.innerWidth);
|
|
26
|
+
for (let e = h.length - 1; e >= 0; e--)
|
|
27
|
+
if (t >= h[e].minWidth)
|
|
28
|
+
return h[e].name;
|
|
29
|
+
return "xs";
|
|
30
|
+
}
|
|
31
|
+
function _(t, e = {}, n = []) {
|
|
9
32
|
Array.isArray(n) || (n = [n]);
|
|
10
33
|
const i = document.createElement(t);
|
|
11
|
-
for (const
|
|
12
|
-
e[
|
|
13
|
-
for (const
|
|
14
|
-
i.append(typeof
|
|
34
|
+
for (const r in e)
|
|
35
|
+
e[r] !== null && e[r] !== void 0 && i.setAttribute(r, e[r] !== !0 ? e[r] : "");
|
|
36
|
+
for (const r of n)
|
|
37
|
+
i.append(typeof r == "string" ? document.createTextNode(r) : r);
|
|
15
38
|
return i;
|
|
16
39
|
}
|
|
17
|
-
class
|
|
40
|
+
class N {
|
|
18
41
|
/**
|
|
19
42
|
*
|
|
20
43
|
* @param delay Debounce delay in milliseconds
|
|
21
44
|
* @param max_delay Maximum delay in milliseconds, if false then no maximum delay is applied
|
|
22
45
|
*/
|
|
23
46
|
constructor(e, n = !1) {
|
|
24
|
-
|
|
25
|
-
|
|
47
|
+
u(this, "timeout", null);
|
|
48
|
+
u(this, "startTimeWithMs", 0);
|
|
26
49
|
this.delay = e, this.max_delay = n;
|
|
27
50
|
}
|
|
28
51
|
async wait() {
|
|
@@ -38,7 +61,7 @@ class y {
|
|
|
38
61
|
}, this.delay);
|
|
39
62
|
}
|
|
40
63
|
}
|
|
41
|
-
function
|
|
64
|
+
function F(t) {
|
|
42
65
|
if (typeof t.lineNumber == "number")
|
|
43
66
|
return {
|
|
44
67
|
file: t.fileName || t.sourceURL,
|
|
@@ -53,14 +76,14 @@ function I(t) {
|
|
|
53
76
|
};
|
|
54
77
|
const n = String(t.stack || t.message || "").split(`
|
|
55
78
|
`), i = /(.*?)(?:\(|@)?(.*?):(\d+):(\d+)\)?$/;
|
|
56
|
-
for (const
|
|
57
|
-
const
|
|
58
|
-
if (
|
|
59
|
-
return { file:
|
|
79
|
+
for (const r of n) {
|
|
80
|
+
const s = r.match(i);
|
|
81
|
+
if (s)
|
|
82
|
+
return { file: s[2], line: +s[3], column: +s[4] };
|
|
60
83
|
}
|
|
61
84
|
return { file: t.fileName || t.sourceURL };
|
|
62
85
|
}
|
|
63
|
-
class
|
|
86
|
+
class k {
|
|
64
87
|
constructor(e, n, i = "main") {
|
|
65
88
|
this._debug = e, this.myElementId = n, this.instanceId = i;
|
|
66
89
|
}
|
|
@@ -78,13 +101,13 @@ class w {
|
|
|
78
101
|
throw this.error(...e), new Error(n);
|
|
79
102
|
}
|
|
80
103
|
}
|
|
81
|
-
class
|
|
104
|
+
class O {
|
|
82
105
|
constructor(e, n = !0) {
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
106
|
+
u(this, "label");
|
|
107
|
+
u(this, "last");
|
|
108
|
+
u(this, "startTime");
|
|
109
|
+
u(this, "running", !1);
|
|
110
|
+
u(this, "enabled");
|
|
88
111
|
this.label = e, this.enabled = n, this.startTime = this.last = performance.now(), this.running = !0;
|
|
89
112
|
}
|
|
90
113
|
lap(e = "") {
|
|
@@ -108,28 +131,38 @@ class p {
|
|
|
108
131
|
return this.running;
|
|
109
132
|
}
|
|
110
133
|
}
|
|
111
|
-
function
|
|
112
|
-
return new Promise((i,
|
|
113
|
-
const
|
|
114
|
-
t.removeEventListener(e,
|
|
134
|
+
function S(t, e, n) {
|
|
135
|
+
return new Promise((i, r) => {
|
|
136
|
+
const s = (g) => {
|
|
137
|
+
t.removeEventListener(e, s, n), i(g);
|
|
115
138
|
};
|
|
116
|
-
t.addEventListener(e,
|
|
139
|
+
t.addEventListener(e, s, n);
|
|
117
140
|
});
|
|
118
141
|
}
|
|
119
|
-
function
|
|
142
|
+
function U() {
|
|
120
143
|
return document.readyState === "loading" ? new Promise((t) => {
|
|
121
144
|
document.addEventListener("DOMContentLoaded", () => t());
|
|
122
145
|
}) : Promise.resolve();
|
|
123
146
|
}
|
|
124
|
-
function
|
|
125
|
-
|
|
126
|
-
|
|
147
|
+
function H(t = null) {
|
|
148
|
+
if (t || (t = document), t instanceof Document) {
|
|
149
|
+
if (document.readyState === "complete")
|
|
150
|
+
return Promise.resolve();
|
|
151
|
+
} else if (t instanceof HTMLImageElement) {
|
|
152
|
+
if (t.complete)
|
|
153
|
+
return Promise.resolve();
|
|
154
|
+
} else if (t instanceof HTMLVideoElement || t instanceof HTMLAudioElement)
|
|
155
|
+
return t.readyState >= 3 ? Promise.resolve() : new Promise((e) => {
|
|
156
|
+
t.addEventListener("loadeddata", () => e(), { once: !0 });
|
|
157
|
+
});
|
|
158
|
+
return new Promise((e) => {
|
|
159
|
+
window.addEventListener("load", () => e());
|
|
127
160
|
});
|
|
128
161
|
}
|
|
129
|
-
function
|
|
162
|
+
function G(t) {
|
|
130
163
|
return new Promise((e) => setTimeout(e, t));
|
|
131
164
|
}
|
|
132
|
-
function
|
|
165
|
+
function j(t) {
|
|
133
166
|
return new Promise((e) => {
|
|
134
167
|
const n = (i) => {
|
|
135
168
|
t.removeEventListener("animationend", n), e(i);
|
|
@@ -137,28 +170,80 @@ function R(t) {
|
|
|
137
170
|
t.addEventListener("animationend", n);
|
|
138
171
|
});
|
|
139
172
|
}
|
|
140
|
-
|
|
141
|
-
function
|
|
142
|
-
|
|
173
|
+
const f = Symbol("listenerDefs"), p = Symbol("withEventBindings");
|
|
174
|
+
function V(t, e) {
|
|
175
|
+
const n = Array.isArray(t) ? t : [t];
|
|
176
|
+
return function(i, r) {
|
|
177
|
+
if (r.kind !== "method") throw new Error("@Listen nur für Methoden");
|
|
178
|
+
return r.addInitializer(function() {
|
|
179
|
+
const s = this.constructor;
|
|
180
|
+
(s[f] || (s[f] = [])).push({
|
|
181
|
+
method: r.name,
|
|
182
|
+
events: n,
|
|
183
|
+
opts: e
|
|
184
|
+
});
|
|
185
|
+
}), function(...s) {
|
|
186
|
+
if (!this[p])
|
|
187
|
+
throw new Error("[EventBindings] @Listen - decorator requires EventBindingMixin.");
|
|
188
|
+
return i.apply(this, s);
|
|
189
|
+
};
|
|
190
|
+
};
|
|
191
|
+
}
|
|
192
|
+
function A(t, e) {
|
|
193
|
+
var n;
|
|
194
|
+
return !e || e === "host" ? t : e === "document" ? t.ownerDocument ?? document : e === "window" ? ((n = t.ownerDocument) == null ? void 0 : n.defaultView) ?? window : e === "shadowRoot" ? t.shadowRoot ?? t : typeof e == "function" ? e(t) : e;
|
|
195
|
+
}
|
|
196
|
+
function q(t) {
|
|
197
|
+
var n, i, I;
|
|
198
|
+
class e extends t {
|
|
199
|
+
constructor(...o) {
|
|
200
|
+
super(...o);
|
|
201
|
+
l(this, i);
|
|
202
|
+
l(this, n);
|
|
203
|
+
this[p] = !0;
|
|
204
|
+
}
|
|
205
|
+
connectedCallback() {
|
|
206
|
+
var o;
|
|
207
|
+
(o = super.connectedCallback) == null || o.call(this), v(this, i, I).call(this);
|
|
208
|
+
}
|
|
209
|
+
disconnectedCallback() {
|
|
210
|
+
var o, d;
|
|
211
|
+
(o = a(this, n)) == null || o.abort(), (d = super.disconnectedCallback) == null || d.call(this);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
return n = new WeakMap(), i = new WeakSet(), I = function() {
|
|
215
|
+
var d, b, E;
|
|
216
|
+
(d = a(this, n)) == null || d.abort(), c(this, n, new AbortController());
|
|
217
|
+
const o = this.constructor[f] || [];
|
|
218
|
+
for (const m of o) {
|
|
219
|
+
const T = A(this, (b = m.opts) == null ? void 0 : b.target), M = ((E = m.opts) == null ? void 0 : E.options) ?? {}, $ = this[m.method].bind(this);
|
|
220
|
+
for (const D of m.events)
|
|
221
|
+
T.addEventListener(D, $, { ...M, signal: a(this, n).signal });
|
|
222
|
+
}
|
|
223
|
+
}, e;
|
|
224
|
+
}
|
|
225
|
+
let R = 1;
|
|
226
|
+
function z(t) {
|
|
227
|
+
var n, i, r;
|
|
143
228
|
class e extends t {
|
|
144
229
|
constructor() {
|
|
145
230
|
super(...arguments);
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
231
|
+
l(this, n, null);
|
|
232
|
+
l(this, i, R++);
|
|
233
|
+
l(this, r, null);
|
|
149
234
|
}
|
|
150
235
|
/**
|
|
151
236
|
* Clears the cached debug flag so the attribute will be checked again
|
|
152
237
|
* on the next log/warn/error call.
|
|
153
238
|
*/
|
|
154
239
|
invalidateDebugCache() {
|
|
155
|
-
|
|
240
|
+
c(this, n, null);
|
|
156
241
|
}
|
|
157
242
|
get _debug() {
|
|
158
|
-
return
|
|
243
|
+
return a(this, n) !== null ? a(this, n) : (this instanceof HTMLElement && c(this, n, this.hasAttribute("debug") && !["false", "0", "off", "no"].includes(this.getAttribute("debug") || "")), a(this, n) === !0 && console.log(`[DEBUG][ID:${a(this, i)}] LoggingMixin: Debug mode is enabled for <${this.tagName}>`, this), a(this, n) ?? !1);
|
|
159
244
|
}
|
|
160
245
|
getLogger(o = "main") {
|
|
161
|
-
return
|
|
246
|
+
return a(this, r) || c(this, r, new k(this._debug, `${a(this, i)}`, o)), a(this, r);
|
|
162
247
|
}
|
|
163
248
|
log(...o) {
|
|
164
249
|
this.getLogger().log(...o);
|
|
@@ -173,18 +258,24 @@ function x(t) {
|
|
|
173
258
|
return this.getLogger().throwError(...o);
|
|
174
259
|
}
|
|
175
260
|
}
|
|
176
|
-
return n = new WeakMap(), i = new WeakMap(),
|
|
261
|
+
return n = new WeakMap(), i = new WeakMap(), r = new WeakMap(), e;
|
|
177
262
|
}
|
|
178
263
|
export {
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
264
|
+
N as Debouncer,
|
|
265
|
+
q as EventBindingsMixin,
|
|
266
|
+
V as Listen,
|
|
267
|
+
k as Logger,
|
|
268
|
+
z as LoggingMixin,
|
|
269
|
+
O as Stopwatch,
|
|
270
|
+
y as breakpointMap,
|
|
271
|
+
h as breakpoints,
|
|
272
|
+
_ as create_element,
|
|
273
|
+
P as getBreakpointMinWidth,
|
|
274
|
+
B as getCurrentBreakpoint,
|
|
275
|
+
F as getErrorLocation,
|
|
276
|
+
G as sleep,
|
|
277
|
+
S as waitFor,
|
|
278
|
+
j as waitForAnimationEnd,
|
|
279
|
+
U as waitForDomContentLoaded,
|
|
280
|
+
H as waitForLoad
|
|
190
281
|
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare const breakpoints: readonly [{
|
|
2
|
+
readonly name: "xs";
|
|
3
|
+
readonly minWidth: 0;
|
|
4
|
+
}, {
|
|
5
|
+
readonly name: "sm";
|
|
6
|
+
readonly minWidth: 576;
|
|
7
|
+
}, {
|
|
8
|
+
readonly name: "md";
|
|
9
|
+
readonly minWidth: 768;
|
|
10
|
+
}, {
|
|
11
|
+
readonly name: "lg";
|
|
12
|
+
readonly minWidth: 992;
|
|
13
|
+
}, {
|
|
14
|
+
readonly name: "xl";
|
|
15
|
+
readonly minWidth: 1200;
|
|
16
|
+
}, {
|
|
17
|
+
readonly name: "xxl";
|
|
18
|
+
readonly minWidth: 1400;
|
|
19
|
+
}];
|
|
20
|
+
export declare const breakpointMap: {
|
|
21
|
+
[key: string]: number;
|
|
22
|
+
};
|
|
23
|
+
export declare function getBreakpointMinWidth(breakpoint: string): number;
|
|
24
|
+
export declare function getCurrentBreakpoint(width?: number): string;
|
package/lib/wait-for.d.ts
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
export declare function waitFor<T>(target: EventTarget, eventName: string, options?: AddEventListenerOptions): Promise<T>;
|
|
2
2
|
export declare function waitForDomContentLoaded(): Promise<void>;
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Waits for the load event of the given element or the window if no element is provided.
|
|
5
|
+
*
|
|
6
|
+
* Hanles:
|
|
7
|
+
* - Document: waits for 'load' event if not already loaded
|
|
8
|
+
* - HTMLImageElement: waits for 'load' event if not already complete
|
|
9
|
+
* - HTMLVideoElement and HTMLAudioElement: waits for 'loadeddata' event if not
|
|
10
|
+
*
|
|
11
|
+
*
|
|
12
|
+
* @param element
|
|
13
|
+
*/
|
|
14
|
+
export declare function waitForLoad(element?: HTMLElement | Document | null): Promise<void>;
|
|
4
15
|
export declare function sleep(ms: number): Promise<void>;
|
|
5
16
|
export declare function waitForAnimationEnd(element: HTMLElement): Promise<AnimationEvent>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
type Ctor<T = object> = new (...args: any[]) => T;
|
|
2
|
+
type TargetSpec = 'host' | 'document' | 'window' | 'shadowRoot' | EventTarget | ((host: HTMLElement) => EventTarget);
|
|
3
|
+
type ListenOpts = {
|
|
4
|
+
target?: TargetSpec;
|
|
5
|
+
options?: AddEventListenerOptions;
|
|
6
|
+
};
|
|
7
|
+
type EventName = keyof DocumentEventMap;
|
|
8
|
+
type OneOrMany<N extends EventName> = N | readonly N[];
|
|
9
|
+
type EventFromInput<I extends OneOrMany<EventName>> = I extends readonly (infer K)[] ? K extends EventName ? DocumentEventMap[K] : never : I extends EventName ? DocumentEventMap[I] : never;
|
|
10
|
+
export declare function Listen<I extends OneOrMany<EventName>>(type: I, opts?: ListenOpts): <This, Fn extends (this: This, ev: EventFromInput<I>, ...args: any[]) => any>(value: Fn, context: ClassMethodDecoratorContext<This, Fn>) => Fn;
|
|
11
|
+
export declare function EventBindingsMixin<TBase extends Ctor<object>>(Base: TBase): (abstract new (...a: any[]) => {
|
|
12
|
+
"__#2347@#ac"?: AbortController;
|
|
13
|
+
connectedCallback(): void;
|
|
14
|
+
disconnectedCallback(): void;
|
|
15
|
+
"__#2347@#bindEventListeners"(): void;
|
|
16
|
+
}) & TBase;
|
|
17
|
+
export {};
|
package/mixins/LoggingMixin.d.ts
CHANGED
|
@@ -26,14 +26,14 @@ type Constructor<T = object> = abstract new (...args: any[]) => T;
|
|
|
26
26
|
* <my-element debug></my-element> // enables debug logging
|
|
27
27
|
*/
|
|
28
28
|
export declare function LoggingMixin<TBase extends Constructor<object>>(Base: TBase): (abstract new (...args: any[]) => {
|
|
29
|
-
"__#
|
|
30
|
-
"__#
|
|
29
|
+
"__#2348@#debugCached": boolean | null;
|
|
30
|
+
"__#2348@#myElementId": number;
|
|
31
31
|
/**
|
|
32
32
|
* Clears the cached debug flag so the attribute will be checked again
|
|
33
33
|
* on the next log/warn/error call.
|
|
34
34
|
*/
|
|
35
35
|
invalidateDebugCache(): void;
|
|
36
|
-
"__#
|
|
36
|
+
"__#2348@#myLoggerInstance": Logger | null;
|
|
37
37
|
readonly _debug: boolean;
|
|
38
38
|
getLogger(instanceId?: string): Logger;
|
|
39
39
|
log(...args: any[]): void;
|