@dooboostore/simple-web-component 1.0.48 → 1.0.49
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/README.md +117 -19
- package/dist/cjs/config/config.js +1 -1
- package/dist/cjs/config/config.js.map +2 -2
- package/dist/cjs/decorators/addEventListener.js +387 -29
- package/dist/cjs/decorators/addEventListener.js.map +3 -3
- package/dist/cjs/decorators/applyAttribute.js +25 -0
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyClass.js +49 -18
- package/dist/cjs/decorators/applyClass.js.map +3 -3
- package/dist/cjs/decorators/applyNode.js +67 -1
- package/dist/cjs/decorators/applyNode.js.map +3 -3
- package/dist/cjs/decorators/applyProperty.js +101 -3
- package/dist/cjs/decorators/applyProperty.js.map +2 -2
- package/dist/cjs/decorators/applyStyle.js +36 -5
- package/dist/cjs/decorators/applyStyle.js.map +2 -2
- package/dist/cjs/decorators/changedAttribute.js +39 -0
- package/dist/cjs/decorators/changedAttribute.js.map +2 -2
- package/dist/cjs/decorators/elementDefine.js +237 -437
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/emitCustomEvent.js +55 -0
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/index.js +3 -1
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/intersectionObserver.js +209 -0
- package/dist/cjs/decorators/intersectionObserver.js.map +7 -0
- package/dist/cjs/decorators/mutationObserver.js +140 -0
- package/dist/cjs/decorators/mutationObserver.js.map +3 -3
- package/dist/cjs/decorators/query.js +117 -102
- package/dist/cjs/decorators/query.js.map +2 -2
- package/dist/cjs/decorators/resizeObserver.js +87 -0
- package/dist/cjs/decorators/resizeObserver.js.map +2 -2
- package/dist/cjs/decorators/setInterval.js +82 -0
- package/dist/cjs/decorators/setInterval.js.map +7 -0
- package/dist/cjs/decorators/setTimeout.js +82 -0
- package/dist/cjs/decorators/setTimeout.js.map +7 -0
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js +9 -0
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +9 -0
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/cjs/types/index.js.map +1 -1
- package/dist/esm/config/config.js +1 -1
- package/dist/esm/config/config.js.map +2 -2
- package/dist/esm/decorators/addEventListener.js +388 -29
- package/dist/esm/decorators/addEventListener.js.map +3 -3
- package/dist/esm/decorators/applyAttribute.js +25 -0
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyClass.js +49 -18
- package/dist/esm/decorators/applyClass.js.map +3 -3
- package/dist/esm/decorators/applyNode.js +67 -1
- package/dist/esm/decorators/applyNode.js.map +3 -3
- package/dist/esm/decorators/applyProperty.js +101 -3
- package/dist/esm/decorators/applyProperty.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +36 -5
- package/dist/esm/decorators/applyStyle.js.map +2 -2
- package/dist/esm/decorators/changedAttribute.js +40 -0
- package/dist/esm/decorators/changedAttribute.js.map +2 -2
- package/dist/esm/decorators/elementDefine.js +244 -444
- package/dist/esm/decorators/elementDefine.js.map +3 -3
- package/dist/esm/decorators/emitCustomEvent.js +55 -0
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/index.js +3 -1
- package/dist/esm/decorators/index.js.map +2 -2
- package/dist/esm/decorators/intersectionObserver.js +191 -0
- package/dist/esm/decorators/intersectionObserver.js.map +7 -0
- package/dist/esm/decorators/mutationObserver.js +141 -0
- package/dist/esm/decorators/mutationObserver.js.map +3 -3
- package/dist/esm/decorators/query.js +117 -102
- package/dist/esm/decorators/query.js.map +2 -2
- package/dist/esm/decorators/resizeObserver.js +88 -0
- package/dist/esm/decorators/resizeObserver.js.map +2 -2
- package/dist/esm/decorators/setInterval.js +64 -0
- package/dist/esm/decorators/setInterval.js.map +7 -0
- package/dist/esm/decorators/setTimeout.js +64 -0
- package/dist/esm/decorators/setTimeout.js.map +7 -0
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js +9 -0
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +9 -0
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/esm/types/index.js.map +1 -1
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +2565 -1474
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/config/config.d.ts.map +1 -1
- package/dist/types/decorators/addEventListener.d.ts +84 -33
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +22 -34
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyClass.d.ts +34 -34
- package/dist/types/decorators/applyClass.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts +30 -20
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyProperty.d.ts +57 -34
- package/dist/types/decorators/applyProperty.d.ts.map +1 -1
- package/dist/types/decorators/applyStyle.d.ts +25 -12
- package/dist/types/decorators/applyStyle.d.ts.map +1 -1
- package/dist/types/decorators/changedAttribute.d.ts +11 -0
- package/dist/types/decorators/changedAttribute.d.ts.map +1 -1
- package/dist/types/decorators/elementDefine.d.ts +0 -14
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts +28 -4
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +3 -1
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/intersectionObserver.d.ts +49 -0
- package/dist/types/decorators/intersectionObserver.d.ts.map +1 -0
- package/dist/types/decorators/mutationObserver.d.ts +35 -25
- package/dist/types/decorators/mutationObserver.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +57 -14
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/resizeObserver.d.ts +34 -23
- package/dist/types/decorators/resizeObserver.d.ts.map +1 -1
- package/dist/types/decorators/setInterval.d.ts +29 -0
- package/dist/types/decorators/setInterval.d.ts.map +1 -0
- package/dist/types/decorators/setTimeout.d.ts +29 -0
- package/dist/types/decorators/setTimeout.d.ts.map +1 -0
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +7 -1
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +6 -0
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
- package/dist/types/types/index.d.ts +104 -0
- package/dist/types/types/index.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +2565 -1474
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +7 -5
- package/src/config/config.ts +1 -1
- package/src/decorators/addEventListener.ts +394 -34
- package/src/decorators/applyAttribute.ts +50 -36
- package/src/decorators/applyClass.ts +76 -26
- package/src/decorators/applyNode.ts +114 -36
- package/src/decorators/applyProperty.ts +152 -40
- package/src/decorators/applyStyle.ts +64 -17
- package/src/decorators/changedAttribute.ts +46 -0
- package/src/decorators/elementDefine.ts +281 -580
- package/src/decorators/emitCustomEvent.ts +73 -5
- package/src/decorators/index.ts +3 -1
- package/src/decorators/intersectionObserver.ts +259 -0
- package/src/decorators/mutationObserver.ts +215 -39
- package/src/decorators/query.ts +168 -126
- package/src/decorators/resizeObserver.ts +152 -46
- package/src/decorators/setInterval.ts +80 -0
- package/src/decorators/setTimeout.ts +80 -0
- package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +17 -0
- package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +19 -0
- package/src/types/index.ts +141 -0
- package/dist/cjs/decorators/queryAll.js +0 -181
- package/dist/cjs/decorators/queryAll.js.map +0 -7
- package/dist/esm/decorators/queryAll.js +0 -162
- package/dist/esm/decorators/queryAll.js.map +0 -7
- package/dist/types/decorators/queryAll.d.ts +0 -22
- package/dist/types/decorators/queryAll.d.ts.map +0 -1
- package/src/decorators/queryAll.ts +0 -186
package/README.md
CHANGED
|
@@ -39,11 +39,11 @@ class Dashboard extends HTMLElement {
|
|
|
39
39
|
|
|
40
40
|
### 3. **Declarative DOM Updates**
|
|
41
41
|
|
|
42
|
-
#### @
|
|
42
|
+
#### @onConnectedBodyShadow
|
|
43
43
|
Render HTML automatically when component connects to DOM.
|
|
44
44
|
|
|
45
45
|
```typescript
|
|
46
|
-
@
|
|
46
|
+
@onConnectedBodyShadow
|
|
47
47
|
render() {
|
|
48
48
|
return `<div>Hello, <span>${this.name}</span>!</div>`;
|
|
49
49
|
}
|
|
@@ -101,7 +101,7 @@ class ContentManager extends HTMLElement {
|
|
|
101
101
|
return true;
|
|
102
102
|
}
|
|
103
103
|
|
|
104
|
-
@
|
|
104
|
+
@onConnectedBodyLight
|
|
105
105
|
render() {
|
|
106
106
|
return `
|
|
107
107
|
<div>
|
|
@@ -171,7 +171,7 @@ class CounterApp extends HTMLElement {
|
|
|
171
171
|
this.count++; // Triggers automatic DOM update
|
|
172
172
|
}
|
|
173
173
|
|
|
174
|
-
@
|
|
174
|
+
@onConnectedBodyLight
|
|
175
175
|
render() {
|
|
176
176
|
return `
|
|
177
177
|
<div>
|
|
@@ -254,7 +254,7 @@ class UserProfile extends HTMLElement {
|
|
|
254
254
|
this.isEditing = !this.isEditing;
|
|
255
255
|
}
|
|
256
256
|
|
|
257
|
-
@
|
|
257
|
+
@onConnectedBodyShadow
|
|
258
258
|
render() {
|
|
259
259
|
return `
|
|
260
260
|
<div>
|
|
@@ -305,12 +305,16 @@ onCriticalClick(event: Event) {
|
|
|
305
305
|
- `addEventListenerDocument(type, options)` - Listen on document
|
|
306
306
|
- `addEventListenerDelegate(selector, type, options)` - Event delegation
|
|
307
307
|
- `eventDelegate(selector, type, options)` - Short alias
|
|
308
|
-
- `
|
|
309
|
-
- `
|
|
310
|
-
- `
|
|
311
|
-
- `
|
|
312
|
-
- `
|
|
313
|
-
- `
|
|
308
|
+
- `addEventListenerDelegateLight(selector, type, options)` - Delegate in light DOM
|
|
309
|
+
- `eventDelegateLight(selector, type, options)` - Short alias
|
|
310
|
+
- `addEventListenerDelegateShadow(selector, type, options)` - Delegate in shadow DOM
|
|
311
|
+
- `eventDelegateShadow(selector, type, options)` - Short alias
|
|
312
|
+
- `addEventListenerDelegateAll(selector, type, options)` - Delegate in all DOM
|
|
313
|
+
- `eventDelegateAll(selector, type, options)` - Short alias
|
|
314
|
+
- `addEventListenerLight(selector, type, options)` / `eventLight(...)` - Bind (non-delegated) in light DOM
|
|
315
|
+
- `addEventListenerShadow(selector, type, options)` / `eventShadow(...)` - Bind (non-delegated) in shadow DOM
|
|
316
|
+
- `addEventListenerAll(selector, type, options)` / `eventAll(...)` - Bind (non-delegated) in both light & shadow DOM
|
|
317
|
+
- `addEventListenerMutation(selector, type, options)` / `eventMutation(...)` - Delegate via `MutationObserver` instead of event bubbling (useful for non-bubbling events like `focus`/`blur`); `*Light`/`*Shadow`/`*All` variants also available
|
|
314
318
|
|
|
315
319
|
#### @emitCustomEvent
|
|
316
320
|
Emit custom events with data.
|
|
@@ -613,9 +617,9 @@ class FormHandler extends HTMLElement {
|
|
|
613
617
|
- `@setProperty('#selector', 'propertyName', options)` - Set property on selector with options
|
|
614
618
|
- `@setProperty` - Bare decorator (uses method name as property on $this)
|
|
615
619
|
|
|
616
|
-
### 6.6 **DOM Observers (@mutationObserver, @resizeObserver)**
|
|
620
|
+
### 6.6 **DOM Observers (@mutationObserver, @resizeObserver, @intersectionObserver)**
|
|
617
621
|
|
|
618
|
-
Observe DOM mutations
|
|
622
|
+
Observe DOM mutations, element size changes, and viewport intersection declaratively. All three decorators share the same pattern as `@event` — they support optional selector (defaults to `$this`), root-based helpers, and `delegate` mode.
|
|
619
623
|
|
|
620
624
|
#### @mutationObserver
|
|
621
625
|
Detect DOM changes (child add/remove, attribute changes, text changes) and react automatically.
|
|
@@ -708,8 +712,52 @@ class ChartWidget extends HTMLElement {
|
|
|
708
712
|
**Combining with @resizeObserver delegate (dynamic tracking):**
|
|
709
713
|
When `delegate: true`, an internal `MutationObserver` automatically observes the root so that elements matching the selector are tracked even after being dynamically added/removed from the DOM.
|
|
710
714
|
|
|
715
|
+
#### @intersectionObserver
|
|
716
|
+
Detect when elements enter/exit the viewport (or a custom scroll container) and react automatically — useful for lazy loading, infinite scroll, and visibility tracking.
|
|
717
|
+
|
|
718
|
+
```typescript
|
|
719
|
+
@elementDefine('lazy-image-list')
|
|
720
|
+
class LazyImageList extends HTMLElement {
|
|
721
|
+
// Fire when any matching element crosses the viewport boundary
|
|
722
|
+
@intersectionObserverLight('.lazy-img', { threshold: 0 })
|
|
723
|
+
onImageVisible(matchedEls: HTMLElement[], entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
|
|
724
|
+
entries.forEach(e => {
|
|
725
|
+
if (e.isIntersecting) (e.target as HTMLImageElement).src = (e.target as HTMLElement).dataset.src!;
|
|
726
|
+
});
|
|
727
|
+
}
|
|
728
|
+
|
|
729
|
+
// Delegate mode tracks dynamically added elements too
|
|
730
|
+
@intersectionObserverDelegateShadow('.card', { threshold: [0, 0.5, 1] })
|
|
731
|
+
onCardIntersect(matchedEls: HTMLElement[], entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
|
|
732
|
+
console.log('intersection ratio:', entries[0]?.intersectionRatio);
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
```
|
|
736
|
+
|
|
737
|
+
**Callback signature:**
|
|
738
|
+
- `matchedEls: HTMLElement[]` - Elements matching the selector (1st arg)
|
|
739
|
+
- `entries: IntersectionObserverEntry[]` - Original observer entries (2nd arg)
|
|
740
|
+
- `observer: IntersectionObserver` - The observer instance (3rd arg)
|
|
741
|
+
|
|
742
|
+
**@intersectionObserver Options:**
|
|
743
|
+
- Standard `IntersectionObserverInit` options: `threshold`, `rootMargin` (note: its own scroll-container `root` is passed as `intersectionRoot`, since the decorator's `root` option already means light/shadow/all/auto selector scope)
|
|
744
|
+
- `delegate` - Observe root and filter by selector in callback (dynamically added/removed elements are tracked too)
|
|
745
|
+
- `root` - `'light' | 'shadow' | 'all' | 'auto'`
|
|
746
|
+
- `filter` - Additional callback filter
|
|
747
|
+
- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
|
|
748
|
+
|
|
749
|
+
**@intersectionObserver Decorator Variants:**
|
|
750
|
+
- `intersectionObserver(selector?, options?)` - Full form (selector defaults to `$this`)
|
|
751
|
+
- `intersectionObserverLight(selector?, options?)` - Observe light DOM
|
|
752
|
+
- `intersectionObserverShadow(selector?, options?)` - Observe shadow DOM
|
|
753
|
+
- `intersectionObserverAll(selector?, options?)` - Observe both light & shadow
|
|
754
|
+
- `intersectionObserverDelegate(selector?, options?)` - Delegate mode (root observe)
|
|
755
|
+
- `intersectionObserverDelegateLight(selector?, options?)` - Delegate in light DOM
|
|
756
|
+
- `intersectionObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
|
|
757
|
+
- `intersectionObserverDelegateAll(selector?, options?)` - Delegate in all DOM
|
|
758
|
+
|
|
711
759
|
**Cleanup:**
|
|
712
|
-
|
|
760
|
+
All three observers are automatically disconnected when the component is removed from the DOM. `removeObserver` callbacks (if provided) are invoked during cleanup.
|
|
713
761
|
|
|
714
762
|
### 7. **DOM Manipulation with applyNode**
|
|
715
763
|
|
|
@@ -736,7 +784,7 @@ class ContentUpdater extends HTMLElement {
|
|
|
736
784
|
return `<p>Prepended content</p>`;
|
|
737
785
|
}
|
|
738
786
|
|
|
739
|
-
@
|
|
787
|
+
@onConnectedBodyLight
|
|
740
788
|
render() {
|
|
741
789
|
return `
|
|
742
790
|
<div>
|
|
@@ -802,7 +850,7 @@ class StyledComponent extends HTMLElement {
|
|
|
802
850
|
};
|
|
803
851
|
}
|
|
804
852
|
|
|
805
|
-
@
|
|
853
|
+
@onConnectedBodyLight
|
|
806
854
|
render() {
|
|
807
855
|
return `
|
|
808
856
|
<div>
|
|
@@ -909,6 +957,57 @@ onFirst() { }
|
|
|
909
957
|
onSecond() { }
|
|
910
958
|
```
|
|
911
959
|
|
|
960
|
+
### 8.6 **Timers (@setInterval, @setTimeout)**
|
|
961
|
+
|
|
962
|
+
Declaratively run a method on a repeating interval or after a one-time delay, tied to the component's connected lifecycle. Both are pure metadata-collecting decorators — they never touch the method itself (no `descriptor.value` wrapping) — so they compose safely with any other decorator stacked on the same method, regardless of declaration order. All the actual scheduling/cleanup is handled by `SetIntervalLifeCycler`/`SetTimeoutLifeCycler` (`ElementDefineLifeCycler` implementations, same plugin pattern as the observers above):
|
|
963
|
+
|
|
964
|
+
- Starts automatically when the component connects.
|
|
965
|
+
- Automatically `clearInterval`/`clearTimeout`s when the component disconnects — no manual cleanup needed.
|
|
966
|
+
|
|
967
|
+
```typescript
|
|
968
|
+
@elementDefine('live-clock')
|
|
969
|
+
class LiveClock extends HTMLElement {
|
|
970
|
+
@setInterval(1000, {
|
|
971
|
+
parameter: (set) => [Date.now()],
|
|
972
|
+
created: (set, id) => console.log('interval started, timer id:', id)
|
|
973
|
+
})
|
|
974
|
+
tick(now: number) {
|
|
975
|
+
this.textContent = new Date(now).toLocaleTimeString();
|
|
976
|
+
}
|
|
977
|
+
|
|
978
|
+
// No options - called with no arguments, once per second
|
|
979
|
+
@setInterval(1000)
|
|
980
|
+
onTick() {
|
|
981
|
+
console.log('tick');
|
|
982
|
+
}
|
|
983
|
+
|
|
984
|
+
// Fires once, 3 seconds after connect
|
|
985
|
+
@setTimeout(3000)
|
|
986
|
+
onceAfter3s() {
|
|
987
|
+
console.log('3 seconds have passed');
|
|
988
|
+
}
|
|
989
|
+
}
|
|
990
|
+
```
|
|
991
|
+
|
|
992
|
+
**`@setInterval(interval, options?)` / `@setTimeout(delay, options?)`:**
|
|
993
|
+
- `interval` / `delay` - milliseconds. `setInterval` repeats; `setTimeout` fires once.
|
|
994
|
+
- `parameter?: (set: HelperHostSet) => any[]` - computes the arguments passed to the method on each tick/fire. Omitted → method is called with no arguments.
|
|
995
|
+
- `created?: (set: HelperHostSet, id: number) => void` - fires once, right after the timer is armed, with the real `setInterval`/`setTimeout` return value. For logging/debugging only — cleanup is still handled automatically, this is not a manual-clear hook.
|
|
996
|
+
- `valueKey?: symbol | string` - same convention as `@applyAttribute`'s `valueKey` (see "Multiple Decorators with Shared Return Value" below): if the method's return value is an object and this key's value is a function, that function is called on every tick/fire — but note the callback signature is just `(id: number)`, not `(set, id)` like `created`.
|
|
997
|
+
|
|
998
|
+
```typescript
|
|
999
|
+
@setInterval(900, { valueKey: 'onTick' })
|
|
1000
|
+
poll() {
|
|
1001
|
+
return {
|
|
1002
|
+
onTick: (id: number) => console.log('interval', id, 'ticked'),
|
|
1003
|
+
};
|
|
1004
|
+
}
|
|
1005
|
+
```
|
|
1006
|
+
|
|
1007
|
+
**Why no wrapping is needed:** unlike `@applyAttribute`/`@setAttribute` (which must wrap the method because it can be called by arbitrary code — event handlers, other decorators, etc.), the timer's own `LifeCycler` is the one calling `inst[propertyKey](...)` every tick/fire — it already has the return value in hand at that call site, so it can read `valueKey` off of it without ever needing to intercept the method.
|
|
1008
|
+
|
|
1009
|
+
> `@requestAnimationFrame` is not implemented yet.
|
|
1010
|
+
|
|
912
1011
|
### 9. **Structural Directives**
|
|
913
1012
|
|
|
914
1013
|
Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
|
|
@@ -1426,6 +1525,7 @@ class MixedKeysExample extends HTMLElement {
|
|
|
1426
1525
|
- `@applyClass` / `@updateClass` / etc.
|
|
1427
1526
|
- `@emitCustomEvent` / `@emit`
|
|
1428
1527
|
- `@publishSwcAppMessage` / `@publish`
|
|
1528
|
+
- `@setInterval` / `@setTimeout` - variant: the extracted value must itself be a function, and that function is invoked with `(id: number)` on every tick/fire (see "Timers" section above) rather than being applied directly like the other decorators here.
|
|
1429
1529
|
|
|
1430
1530
|
Each decorator will use only its corresponding value from the return object, preventing conflicts and allowing clean separation of concerns.
|
|
1431
1531
|
|
|
@@ -1517,9 +1617,7 @@ method() { ... }
|
|
|
1517
1617
|
|
|
1518
1618
|
**query.ts:**
|
|
1519
1619
|
- `query(selector?, options?)` - Query single element (supports $this, $host, $appHost, etc.)
|
|
1520
|
-
|
|
1521
|
-
**queryAll.ts:**
|
|
1522
|
-
- `queryAll(selector?, options?)` - Query multiple elements
|
|
1620
|
+
- `queryAll(selector?, options?)` - Query multiple elements (same file as `query`)
|
|
1523
1621
|
|
|
1524
1622
|
**emitCustomEvent.ts:**
|
|
1525
1623
|
- `emitCustomEvent(target, type, options?)` - Emit custom events
|
|
@@ -81,6 +81,6 @@ const HTML_TAG_ENTRIES = [
|
|
|
81
81
|
["HTMLHeadingElement", "h1"],
|
|
82
82
|
["HTMLBodyElement", "body"]
|
|
83
83
|
];
|
|
84
|
-
const DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "
|
|
84
|
+
const DOM_EVENT_NAMES = ["click", "dblclick", "mousedown", "mouseenter", "mouseleave", "mousemove", "mouseout", "mouseover", "mouseup", "contextmenu", "keydown", "keypress", "keyup", "blur", "change", "focus", "focusin", "focusout", "input", "invalid", "reset", "search", "select", "submit", "drag", "dragend", "dragenter", "dragleave", "dragover", "dragstart", "drop", "copy", "cut", "paste", "abort", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "scroll", "resize", "load", "hashchange", "connected"];
|
|
85
85
|
const BROWSER_GLOBALS = ["window", "document", "Node", "Element", "HTMLElement", "DocumentFragment", "CustomEvent", "customElements", "NodeFilter", ...HTML_TAG_ENTRIES.map(([className]) => className)];
|
|
86
86
|
//# sourceMappingURL=config.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/config/config.ts"],
|
|
4
|
-
"sourcesContent": ["export const HTML_TAG_ENTRIES: [string, string][] = [\n ['HTMLAnchorElement', 'a'],\n ['HTMLAreaElement', 'area'],\n ['HTMLAudioElement', 'audio'],\n ['HTMLBaseElement', 'base'],\n ['HTMLButtonElement', 'button'],\n ['HTMLCanvasElement', 'canvas'],\n ['HTMLDataElement', 'data'],\n ['HTMLDataListElement', 'datalist'],\n ['HTMLDetailsElement', 'details'],\n ['HTMLDialogElement', 'dialog'],\n ['HTMLDivElement', 'div'],\n ['HTMLDListElement', 'dl'],\n ['HTMLEmbedElement', 'embed'],\n ['HTMLFieldSetElement', 'fieldset'],\n ['HTMLFormElement', 'form'],\n ['HTMLHRElement', 'hr'],\n ['HTMLIFrameElement', 'iframe'],\n ['HTMLImageElement', 'img'],\n ['HTMLInputElement', 'input'],\n ['HTMLLabelElement', 'label'],\n ['HTMLLegendElement', 'legend'],\n ['HTMLLIElement', 'li'],\n ['HTMLLinkElement', 'link'],\n ['HTMLMapElement', 'map'],\n ['HTMLMetaElement', 'meta'],\n ['HTMLMeterElement', 'meter'],\n ['HTMLModElement', 'del'],\n ['HTMLObjectElement', 'object'],\n ['HTMLOListElement', 'ol'],\n ['HTMLOptGroupElement', 'optgroup'],\n ['HTMLOptionElement', 'option'],\n ['HTMLOutputElement', 'output'],\n ['HTMLParagraphElement', 'p'],\n ['HTMLParamElement', 'param'],\n ['HTMLPictureElement', 'picture'],\n ['HTMLPreElement', 'pre'],\n ['HTMLProgressElement', 'progress'],\n ['HTMLQuoteElement', 'blockquote'],\n ['HTMLScriptElement', 'script'],\n ['HTMLSelectElement', 'select'],\n ['HTMLSlotElement', 'slot'],\n ['HTMLSourceElement', 'source'],\n ['HTMLSpanElement', 'span'],\n ['HTMLStyleElement', 'style'],\n ['HTMLTableElement', 'table'],\n ['HTMLTableSectionElement', 'tbody'],\n ['HTMLTableCellElement', 'td'],\n ['HTMLTemplateElement', 'template'],\n ['HTMLTextAreaElement', 'textarea'],\n ['HTMLTimeElement', 'time'],\n ['HTMLTitleElement', 'title'],\n ['HTMLTableRowElement', 'tr'],\n ['HTMLTrackElement', 'track'],\n ['HTMLUListElement', 'ul'],\n ['HTMLVideoElement', 'video'],\n ['HTMLHeadingElement', 'h1'],\n ['HTMLBodyElement', 'body']\n];\n\nexport const DOM_EVENT_NAMES = ['click', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'contextmenu', 'keydown', 'keypress', 'keyup', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'scroll', 'resize', 'load', '
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,mBAAuC;AAAA,EAClD,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,KAAK;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,oBAAoB,YAAY;AAAA,EACjC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,2BAA2B,OAAO;AAAA,EACnC,CAAC,wBAAwB,IAAI;AAAA,EAC7B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,IAAI;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,IAAI;AAAA,EAC3B,CAAC,mBAAmB,MAAM;AAC5B;AAEO,MAAM,kBAAkB,CAAC,SAAS,YAAY,aAAa,cAAc,cAAc,aAAa,YAAY,aAAa,WAAW,eAAe,WAAW,YAAY,SAAS,QAAQ,UAAU,SAAS,WAAW,YAAY,SAAS,WAAW,SAAS,UAAU,UAAU,UAAU,QAAQ,WAAW,aAAa,aAAa,YAAY,aAAa,QAAQ,QAAQ,OAAO,SAAS,SAAS,WAAW,kBAAkB,kBAAkB,WAAW,SAAS,SAAS,cAAc,kBAAkB,aAAa,SAAS,QAAQ,WAAW,YAAY,cAAc,UAAU,WAAW,WAAW,WAAW,cAAc,gBAAgB,WAAW,UAAU,UAAU,QAAQ,
|
|
4
|
+
"sourcesContent": ["export const HTML_TAG_ENTRIES: [string, string][] = [\n ['HTMLAnchorElement', 'a'],\n ['HTMLAreaElement', 'area'],\n ['HTMLAudioElement', 'audio'],\n ['HTMLBaseElement', 'base'],\n ['HTMLButtonElement', 'button'],\n ['HTMLCanvasElement', 'canvas'],\n ['HTMLDataElement', 'data'],\n ['HTMLDataListElement', 'datalist'],\n ['HTMLDetailsElement', 'details'],\n ['HTMLDialogElement', 'dialog'],\n ['HTMLDivElement', 'div'],\n ['HTMLDListElement', 'dl'],\n ['HTMLEmbedElement', 'embed'],\n ['HTMLFieldSetElement', 'fieldset'],\n ['HTMLFormElement', 'form'],\n ['HTMLHRElement', 'hr'],\n ['HTMLIFrameElement', 'iframe'],\n ['HTMLImageElement', 'img'],\n ['HTMLInputElement', 'input'],\n ['HTMLLabelElement', 'label'],\n ['HTMLLegendElement', 'legend'],\n ['HTMLLIElement', 'li'],\n ['HTMLLinkElement', 'link'],\n ['HTMLMapElement', 'map'],\n ['HTMLMetaElement', 'meta'],\n ['HTMLMeterElement', 'meter'],\n ['HTMLModElement', 'del'],\n ['HTMLObjectElement', 'object'],\n ['HTMLOListElement', 'ol'],\n ['HTMLOptGroupElement', 'optgroup'],\n ['HTMLOptionElement', 'option'],\n ['HTMLOutputElement', 'output'],\n ['HTMLParagraphElement', 'p'],\n ['HTMLParamElement', 'param'],\n ['HTMLPictureElement', 'picture'],\n ['HTMLPreElement', 'pre'],\n ['HTMLProgressElement', 'progress'],\n ['HTMLQuoteElement', 'blockquote'],\n ['HTMLScriptElement', 'script'],\n ['HTMLSelectElement', 'select'],\n ['HTMLSlotElement', 'slot'],\n ['HTMLSourceElement', 'source'],\n ['HTMLSpanElement', 'span'],\n ['HTMLStyleElement', 'style'],\n ['HTMLTableElement', 'table'],\n ['HTMLTableSectionElement', 'tbody'],\n ['HTMLTableCellElement', 'td'],\n ['HTMLTemplateElement', 'template'],\n ['HTMLTextAreaElement', 'textarea'],\n ['HTMLTimeElement', 'time'],\n ['HTMLTitleElement', 'title'],\n ['HTMLTableRowElement', 'tr'],\n ['HTMLTrackElement', 'track'],\n ['HTMLUListElement', 'ul'],\n ['HTMLVideoElement', 'video'],\n ['HTMLHeadingElement', 'h1'],\n ['HTMLBodyElement', 'body']\n];\n\nexport const DOM_EVENT_NAMES = ['click', 'dblclick', 'mousedown', 'mouseenter', 'mouseleave', 'mousemove', 'mouseout', 'mouseover', 'mouseup', 'contextmenu', 'keydown', 'keypress', 'keyup', 'blur', 'change', 'focus', 'focusin', 'focusout', 'input', 'invalid', 'reset', 'search', 'select', 'submit', 'drag', 'dragend', 'dragenter', 'dragleave', 'dragover', 'dragstart', 'drop', 'copy', 'cut', 'paste', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'scroll', 'resize', 'load', 'hashchange', 'connected'];\n\nexport const BROWSER_GLOBALS = ['window', 'document', 'Node', 'Element', 'HTMLElement', 'DocumentFragment', 'CustomEvent', 'customElements', 'NodeFilter', ...HTML_TAG_ENTRIES.map(([className]) => className)];\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAO,MAAM,mBAAuC;AAAA,EAClD,CAAC,qBAAqB,GAAG;AAAA,EACzB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,KAAK;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,iBAAiB,IAAI;AAAA,EACtB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,wBAAwB,GAAG;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,SAAS;AAAA,EAChC,CAAC,kBAAkB,KAAK;AAAA,EACxB,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,oBAAoB,YAAY;AAAA,EACjC,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,qBAAqB,QAAQ;AAAA,EAC9B,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,2BAA2B,OAAO;AAAA,EACnC,CAAC,wBAAwB,IAAI;AAAA,EAC7B,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,uBAAuB,UAAU;AAAA,EAClC,CAAC,mBAAmB,MAAM;AAAA,EAC1B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,uBAAuB,IAAI;AAAA,EAC5B,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,oBAAoB,IAAI;AAAA,EACzB,CAAC,oBAAoB,OAAO;AAAA,EAC5B,CAAC,sBAAsB,IAAI;AAAA,EAC3B,CAAC,mBAAmB,MAAM;AAC5B;AAEO,MAAM,kBAAkB,CAAC,SAAS,YAAY,aAAa,cAAc,cAAc,aAAa,YAAY,aAAa,WAAW,eAAe,WAAW,YAAY,SAAS,QAAQ,UAAU,SAAS,WAAW,YAAY,SAAS,WAAW,SAAS,UAAU,UAAU,UAAU,QAAQ,WAAW,aAAa,aAAa,YAAY,aAAa,QAAQ,QAAQ,OAAO,SAAS,SAAS,WAAW,kBAAkB,kBAAkB,WAAW,SAAS,SAAS,cAAc,kBAAkB,aAAa,SAAS,QAAQ,WAAW,YAAY,cAAc,UAAU,WAAW,WAAW,WAAW,cAAc,gBAAgB,WAAW,UAAU,UAAU,QAAQ,cAAc,WAAW;AAE3sB,MAAM,kBAAkB,CAAC,UAAU,YAAY,QAAQ,WAAW,eAAe,oBAAoB,eAAe,kBAAkB,cAAc,GAAG,iBAAiB,IAAI,CAAC,CAAC,SAAS,MAAM,SAAS,CAAC;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|