@dooboostore/simple-web-component 1.0.43 → 1.0.45
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 +312 -63
- package/dist/cjs/SwcAppEngine.js +3 -1
- package/dist/cjs/SwcAppEngine.js.map +2 -2
- package/dist/cjs/decorators/addEventListener.js.map +2 -2
- package/dist/cjs/decorators/applyAttribute.js +66 -43
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyClass.js +110 -43
- package/dist/cjs/decorators/applyClass.js.map +3 -3
- package/dist/cjs/decorators/applyNode.js +200 -112
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/applyProperty.js +49 -45
- package/dist/cjs/decorators/applyProperty.js.map +2 -2
- package/dist/cjs/decorators/applyStyle.js +92 -37
- package/dist/cjs/decorators/applyStyle.js.map +3 -3
- package/dist/cjs/decorators/{changedAttributeThis.js → changedAttribute.js} +6 -6
- package/dist/cjs/decorators/changedAttribute.js.map +7 -0
- package/dist/cjs/decorators/elementDefine.js +81 -31
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/emitCustomEvent.js +80 -52
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/index.js +1 -1
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/publishSwcAppMessage.js +5 -5
- package/dist/cjs/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/cjs/decorators/query.js +133 -147
- package/dist/cjs/decorators/query.js.map +3 -3
- package/dist/cjs/decorators/queryAll.js +143 -132
- package/dist/cjs/decorators/queryAll.js.map +3 -3
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/cjs/elements/SwcAppMixin.js +17 -2
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
- package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/router/ElementRouter.js +4 -0
- package/dist/cjs/router/ElementRouter.js.map +2 -2
- package/dist/cjs/types/window.d.js.map +1 -1
- package/dist/esm/SwcAppEngine.js +3 -1
- package/dist/esm/SwcAppEngine.js.map +2 -2
- package/dist/esm/decorators/addEventListener.js.map +2 -2
- package/dist/esm/decorators/applyAttribute.js +66 -43
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyClass.js +110 -43
- package/dist/esm/decorators/applyClass.js.map +3 -3
- package/dist/esm/decorators/applyNode.js +200 -112
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/applyProperty.js +49 -45
- package/dist/esm/decorators/applyProperty.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +92 -37
- package/dist/esm/decorators/applyStyle.js.map +3 -3
- package/dist/esm/decorators/{changedAttributeThis.js → changedAttribute.js} +3 -3
- package/dist/esm/decorators/changedAttribute.js.map +7 -0
- package/dist/esm/decorators/elementDefine.js +79 -29
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/emitCustomEvent.js +80 -52
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/index.js +1 -1
- package/dist/esm/decorators/index.js.map +1 -1
- package/dist/esm/decorators/publishSwcAppMessage.js +5 -5
- package/dist/esm/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/esm/decorators/query.js +133 -147
- package/dist/esm/decorators/query.js.map +3 -3
- package/dist/esm/decorators/queryAll.js +143 -132
- package/dist/esm/decorators/queryAll.js.map +3 -3
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +18 -3
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
- package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/router/ElementRouter.js +4 -0
- package/dist/esm/router/ElementRouter.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +1118 -633
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/SwcAppEngine.d.ts.map +1 -1
- package/dist/types/decorators/addEventListener.d.ts +19 -15
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +45 -26
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyClass.d.ts +19 -38
- package/dist/types/decorators/applyClass.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts +175 -32
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyProperty.d.ts +38 -25
- package/dist/types/decorators/applyProperty.d.ts.map +1 -1
- package/dist/types/decorators/applyStyle.d.ts +10 -9
- package/dist/types/decorators/applyStyle.d.ts.map +1 -1
- package/dist/types/decorators/{changedAttributeThis.d.ts → changedAttribute.d.ts} +2 -2
- package/dist/types/decorators/changedAttribute.d.ts.map +1 -0
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts +6 -12
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +1 -1
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +16 -29
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/queryAll.d.ts +16 -23
- package/dist/types/decorators/queryAll.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +1 -0
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +2 -0
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts +4 -4
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
- package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/router/ElementRouter.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +1118 -633
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +1 -1
- package/src/SwcAppEngine.ts +3 -1
- package/src/decorators/addEventListener.ts +31 -25
- package/src/decorators/applyAttribute.ts +164 -86
- package/src/decorators/applyClass.ts +161 -41
- package/src/decorators/applyNode.ts +408 -108
- package/src/decorators/applyProperty.ts +100 -89
- package/src/decorators/applyStyle.ts +131 -37
- package/src/decorators/{changedAttributeThis.ts → changedAttribute.ts} +1 -1
- package/src/decorators/elementDefine.ts +96 -30
- package/src/decorators/emitCustomEvent.ts +92 -60
- package/src/decorators/index.ts +1 -1
- package/src/decorators/publishSwcAppMessage.ts +1 -1
- package/src/decorators/query.ts +155 -162
- package/src/decorators/queryAll.ts +157 -139
- package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +1 -0
- package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +3 -1
- package/src/elements/SwcAppMixin.ts +43 -24
- package/src/examples/RxJSOperatorsExample.ts +279 -0
- package/src/index.ts +2 -0
- package/src/router/ElementRouter.ts +4 -0
- package/src/types/window.d.ts +3 -0
- package/dist/cjs/decorators/changedAttributeThis.js.map +0 -7
- package/dist/esm/decorators/changedAttributeThis.js.map +0 -7
- package/dist/types/decorators/changedAttributeThis.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -49,21 +49,21 @@ render() {
|
|
|
49
49
|
}
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
#### @
|
|
52
|
+
#### @innerHtmlLight
|
|
53
53
|
Apply HTML to specific host element.
|
|
54
54
|
|
|
55
55
|
```typescript
|
|
56
|
-
@
|
|
56
|
+
@innerHtmlLight
|
|
57
57
|
updateContent() {
|
|
58
58
|
return `<p>Updated content</p>`;
|
|
59
59
|
}
|
|
60
60
|
```
|
|
61
61
|
|
|
62
|
-
#### @
|
|
62
|
+
#### @replaceChildrenLight
|
|
63
63
|
Replace child nodes with new content.
|
|
64
64
|
|
|
65
65
|
```typescript
|
|
66
|
-
@
|
|
66
|
+
@replaceChildrenLight
|
|
67
67
|
replaceChildren(node: Node) {
|
|
68
68
|
return node;
|
|
69
69
|
}
|
|
@@ -452,33 +452,168 @@ printTag() {
|
|
|
452
452
|
|
|
453
453
|
### 6. **Attribute Binding**
|
|
454
454
|
|
|
455
|
-
#### @attribute
|
|
456
|
-
Bind HTML attributes to properties
|
|
455
|
+
#### @attribute (Field Decorator)
|
|
456
|
+
Bind HTML attributes to properties with automatic read/write synchronization.
|
|
457
|
+
|
|
458
|
+
Intelligently distinguishes between attribute names and CSS selectors:
|
|
457
459
|
|
|
458
460
|
```typescript
|
|
459
|
-
@
|
|
460
|
-
|
|
461
|
+
@elementDefine('product-card')
|
|
462
|
+
class ProductCard extends HTMLElement {
|
|
463
|
+
// Attribute name on $this (auto-detected)
|
|
464
|
+
@attribute('product-id')
|
|
465
|
+
productId: string;
|
|
466
|
+
|
|
467
|
+
// Attribute name on selector
|
|
468
|
+
@attribute('#user', 'data-id')
|
|
469
|
+
userId: string;
|
|
470
|
+
|
|
471
|
+
// Bare decorator (uses field name as attribute)
|
|
472
|
+
@attribute
|
|
473
|
+
title: string;
|
|
461
474
|
|
|
462
|
-
@
|
|
463
|
-
|
|
475
|
+
@onInitialize
|
|
476
|
+
onconstructor() {
|
|
477
|
+
if (this.productId) {
|
|
478
|
+
this.loadProduct(this.productId);
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}
|
|
464
482
|
```
|
|
465
483
|
|
|
466
|
-
#### @
|
|
467
|
-
|
|
484
|
+
#### @setAttribute (Method Decorator)
|
|
485
|
+
Set element attributes from method return values.
|
|
468
486
|
|
|
469
487
|
```typescript
|
|
470
|
-
@
|
|
471
|
-
|
|
488
|
+
@elementDefine('status-updater')
|
|
489
|
+
class StatusUpdater extends HTMLElement {
|
|
490
|
+
// Set attribute on $this
|
|
491
|
+
@setAttribute('data-status')
|
|
492
|
+
updateStatus() {
|
|
493
|
+
return this.isActive ? 'active' : 'inactive';
|
|
494
|
+
}
|
|
472
495
|
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
this.
|
|
496
|
+
// Set attribute on selector
|
|
497
|
+
@setAttribute('#user', 'data-name')
|
|
498
|
+
setUserName() {
|
|
499
|
+
return this.userName;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
// Bare decorator (uses method name as attribute)
|
|
503
|
+
@setAttribute
|
|
504
|
+
setValue() {
|
|
505
|
+
return this.computedValue;
|
|
477
506
|
}
|
|
478
507
|
}
|
|
479
508
|
```
|
|
480
509
|
|
|
481
|
-
|
|
510
|
+
**Usage Patterns:**
|
|
511
|
+
- `@attribute('attr-name')` - Attribute name on $this (auto-detected)
|
|
512
|
+
- `@attribute('#selector', 'attr-name')` - Attribute name on selector
|
|
513
|
+
- `@attribute('attr-name', options)` - Attribute name on $this with options
|
|
514
|
+
- `@attribute('#selector', 'attr-name', options)` - Attribute name on selector with options
|
|
515
|
+
- `@attribute` - Bare decorator (uses field name as attribute on $this)
|
|
516
|
+
|
|
517
|
+
**@setAttribute Patterns:**
|
|
518
|
+
- `@setAttribute('attr-name')` - Set attribute on $this
|
|
519
|
+
- `@setAttribute('#selector', 'attr-name')` - Set attribute on selector
|
|
520
|
+
- `@setAttribute('attr-name', options)` - Set attribute on $this with options
|
|
521
|
+
- `@setAttribute('#selector', 'attr-name', options)` - Set attribute on selector with options
|
|
522
|
+
- `@setAttribute` - Bare decorator (uses method name as attribute on $this)
|
|
523
|
+
|
|
524
|
+
#### @changedAttribute (Method Decorator)
|
|
525
|
+
Listen for attribute changes on the component this element.
|
|
526
|
+
|
|
527
|
+
```typescript
|
|
528
|
+
@elementDefine('reactive-component')
|
|
529
|
+
class ReactiveComponent extends HTMLElement {
|
|
530
|
+
@changedAttribute('product-id')
|
|
531
|
+
onProductIdChanged(newValue: string, oldValue: string) {
|
|
532
|
+
console.log(`Product changed from ${oldValue} to ${newValue}`);
|
|
533
|
+
this.loadProduct(newValue);
|
|
534
|
+
}
|
|
535
|
+
|
|
536
|
+
@changedAttribute('data-status', { type: Boolean })
|
|
537
|
+
onStatusChanged(newValue: boolean) {
|
|
538
|
+
console.log(`Status is now: ${newValue}`);
|
|
539
|
+
}
|
|
540
|
+
|
|
541
|
+
// Listen to any attribute change
|
|
542
|
+
@changedAttribute()
|
|
543
|
+
onAnyAttributeChanged(newValue: any, oldValue: any) {
|
|
544
|
+
console.log('An attribute changed');
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
```
|
|
548
|
+
|
|
549
|
+
**@changedAttribute Options:**
|
|
550
|
+
- `attributeName` - Attribute name to listen for (optional, defaults to method name)
|
|
551
|
+
- `type` - Type converter: `Number`, `Boolean`, or `String`
|
|
552
|
+
- `while` - Execution condition: `'connected'` (only while connected to DOM)
|
|
553
|
+
|
|
554
|
+
### 6.5 **Property Binding**
|
|
555
|
+
|
|
556
|
+
#### @property (Field Decorator)
|
|
557
|
+
Bind element properties to component fields with automatic read/write synchronization.
|
|
558
|
+
|
|
559
|
+
```typescript
|
|
560
|
+
@elementDefine('input-wrapper')
|
|
561
|
+
class InputWrapper extends HTMLElement {
|
|
562
|
+
// Property on $this (auto-detected)
|
|
563
|
+
@property('value')
|
|
564
|
+
inputValue: string;
|
|
565
|
+
|
|
566
|
+
// Property on selector
|
|
567
|
+
@property('#submit-btn', 'disabled')
|
|
568
|
+
isSubmitDisabled: boolean;
|
|
569
|
+
|
|
570
|
+
// Bare decorator (uses field name as property)
|
|
571
|
+
@property
|
|
572
|
+
checked: boolean;
|
|
573
|
+
}
|
|
574
|
+
```
|
|
575
|
+
|
|
576
|
+
#### @setProperty (Method Decorator)
|
|
577
|
+
Set element properties from method return values.
|
|
578
|
+
|
|
579
|
+
```typescript
|
|
580
|
+
@elementDefine('form-handler')
|
|
581
|
+
class FormHandler extends HTMLElement {
|
|
582
|
+
// Set property on $this
|
|
583
|
+
@setProperty('disabled')
|
|
584
|
+
disableForm() {
|
|
585
|
+
return !this.isValid();
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
// Set property on selector
|
|
589
|
+
@setProperty('#submit-btn', 'disabled')
|
|
590
|
+
updateSubmitState() {
|
|
591
|
+
return this.hasErrors;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
// Bare decorator (uses method name as property)
|
|
595
|
+
@setProperty
|
|
596
|
+
setValue() {
|
|
597
|
+
return this.computedValue;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
```
|
|
601
|
+
|
|
602
|
+
**Usage Patterns:**
|
|
603
|
+
- `@property('propertyName')` - Property on $this
|
|
604
|
+
- `@property('#selector', 'propertyName')` - Property on selector
|
|
605
|
+
- `@property('propertyName', options)` - Property on $this with options
|
|
606
|
+
- `@property('#selector', 'propertyName', options)` - Property on selector with options
|
|
607
|
+
- `@property` - Bare decorator (uses field name as property on $this)
|
|
608
|
+
|
|
609
|
+
**@setProperty Patterns:**
|
|
610
|
+
- `@setProperty('propertyName')` - Set property on $this
|
|
611
|
+
- `@setProperty('#selector', 'propertyName')` - Set property on selector
|
|
612
|
+
- `@setProperty('propertyName', options)` - Set property on $this with options
|
|
613
|
+
- `@setProperty('#selector', 'propertyName', options)` - Set property on selector with options
|
|
614
|
+
- `@setProperty` - Bare decorator (uses method name as property on $this)
|
|
615
|
+
|
|
616
|
+
### 7. **DOM Manipulation with applyNode**
|
|
482
617
|
|
|
483
618
|
Surgically add, replace, or remove nodes in the DOM with fine-grained control.
|
|
484
619
|
|
|
@@ -486,19 +621,19 @@ Surgically add, replace, or remove nodes in the DOM with fine-grained control.
|
|
|
486
621
|
@elementDefine('content-updater')
|
|
487
622
|
class ContentUpdater extends HTMLElement {
|
|
488
623
|
@addEventListener('button', 'click')
|
|
489
|
-
@
|
|
624
|
+
@replaceChildren()
|
|
490
625
|
updateContent() {
|
|
491
626
|
return `<div>New content</div>`;
|
|
492
627
|
}
|
|
493
628
|
|
|
494
629
|
@addEventListener('.append-btn', 'click')
|
|
495
|
-
@
|
|
630
|
+
@beforeEndNode()
|
|
496
631
|
appendContent() {
|
|
497
632
|
return `<p>Appended content</p>`;
|
|
498
633
|
}
|
|
499
634
|
|
|
500
635
|
@addEventListener('.prepend-btn', 'click')
|
|
501
|
-
@
|
|
636
|
+
@afterBegin()
|
|
502
637
|
prependContent() {
|
|
503
638
|
return `<p>Prepended content</p>`;
|
|
504
639
|
}
|
|
@@ -517,15 +652,15 @@ class ContentUpdater extends HTMLElement {
|
|
|
517
652
|
```
|
|
518
653
|
|
|
519
654
|
**@applyNode Decorator Variants:**
|
|
520
|
-
- `
|
|
521
|
-
- `
|
|
522
|
-
- `
|
|
523
|
-
- `
|
|
524
|
-
- `
|
|
525
|
-
- `
|
|
526
|
-
- `
|
|
527
|
-
- `
|
|
528
|
-
- `
|
|
655
|
+
- `replaceChildren()` - Replace all children
|
|
656
|
+
- `replaceChildrenLight()` - Replace children in light DOM
|
|
657
|
+
- `beforeEnd()` - Append to end
|
|
658
|
+
- `beforeEndLight()` - Append to light DOM end
|
|
659
|
+
- `afterBegin()` - Prepend to beginning
|
|
660
|
+
- `afterBeginLight()` - Prepend to light DOM beginning
|
|
661
|
+
- `innerHtml()` - Set innerHTML
|
|
662
|
+
- `innerHtmlLight()` - Set innerHTML in light DOM
|
|
663
|
+
- `innerText()` - Set innerText
|
|
529
664
|
|
|
530
665
|
**Position Options:**
|
|
531
666
|
```typescript
|
|
@@ -541,7 +676,7 @@ export type ApplyNodePosition =
|
|
|
541
676
|
| 'remove'; // Remove element
|
|
542
677
|
```
|
|
543
678
|
|
|
544
|
-
###
|
|
679
|
+
### 8. **Style & Class Management**
|
|
545
680
|
|
|
546
681
|
Apply styles and classes dynamically with `@applyStyle` and `@applyClass`.
|
|
547
682
|
|
|
@@ -552,7 +687,7 @@ class StyledComponent extends HTMLElement {
|
|
|
552
687
|
isActive = false;
|
|
553
688
|
|
|
554
689
|
@addEventListener('button', 'click')
|
|
555
|
-
@
|
|
690
|
+
@updateStyle()
|
|
556
691
|
toggleStyle() {
|
|
557
692
|
return {
|
|
558
693
|
color: this.isActive ? 'green' : 'red',
|
|
@@ -561,7 +696,7 @@ class StyledComponent extends HTMLElement {
|
|
|
561
696
|
}
|
|
562
697
|
|
|
563
698
|
@addEventListener('.toggle-btn', 'click')
|
|
564
|
-
@
|
|
699
|
+
@updateClass()
|
|
565
700
|
toggleClass() {
|
|
566
701
|
return {
|
|
567
702
|
'active': this.isActive,
|
|
@@ -593,7 +728,7 @@ class StyledComponent extends HTMLElement {
|
|
|
593
728
|
- `removeClassThis()` - Remove classes
|
|
594
729
|
- `toggleClassThis()` - Toggle classes
|
|
595
730
|
|
|
596
|
-
###
|
|
731
|
+
### 8.5 **Lifecycle Hooks**
|
|
597
732
|
|
|
598
733
|
Lifecycle hooks allow you to execute code at specific points in a component's lifecycle. All lifecycle decorators support optional `order` parameter for execution ordering.
|
|
599
734
|
|
|
@@ -676,7 +811,7 @@ onFirst() { }
|
|
|
676
811
|
onSecond() { }
|
|
677
812
|
```
|
|
678
813
|
|
|
679
|
-
###
|
|
814
|
+
### 9. **Structural Directives**
|
|
680
815
|
|
|
681
816
|
Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
|
|
682
817
|
|
|
@@ -766,9 +901,9 @@ class LoginForm extends HTMLElement {
|
|
|
766
901
|
- `publishSwcAppMessage(messageType)` - Publish with specific message type
|
|
767
902
|
- `publishSwcAppMessage(messageType, { valueKey: 'customKey' })` - Publish with custom value extraction
|
|
768
903
|
- `publishSwcAppMessage({ messageType: 'type', valueKey: 'customKey' })` - Publish with options object
|
|
769
|
-
- `
|
|
770
|
-
- `
|
|
771
|
-
- `
|
|
904
|
+
- `publishMessage()` - Short alias
|
|
905
|
+
- `publishMessage(messageType)` - Short alias with message type
|
|
906
|
+
- `publishMessage(messageType, options)` - Short alias with options
|
|
772
907
|
|
|
773
908
|
**Using valueKey for Multiple Decorators:**
|
|
774
909
|
|
|
@@ -825,7 +960,7 @@ class ProductDetail extends HTMLElement {
|
|
|
825
960
|
|
|
826
961
|
---
|
|
827
962
|
|
|
828
|
-
###
|
|
963
|
+
### 11. **SwcApp - Multiple Element Types with Mixin Pattern**
|
|
829
964
|
|
|
830
965
|
SWC provides a flexible Mixin-based architecture for creating SwcApp elements that extend different HTMLElement types. This enables building SPAs with any semantic HTML element as the root.
|
|
831
966
|
|
|
@@ -937,7 +1072,7 @@ appElement.connect({
|
|
|
937
1072
|
});
|
|
938
1073
|
```
|
|
939
1074
|
|
|
940
|
-
####
|
|
1075
|
+
#### 12. **Routing with @subscribeSwcAppRouteChangeWhileConnected**
|
|
941
1076
|
|
|
942
1077
|
SWC provides declarative routing with automatic path matching, order-based execution, and optional propagation control.
|
|
943
1078
|
|
|
@@ -947,26 +1082,26 @@ SWC provides declarative routing with automatic path matching, order-based execu
|
|
|
947
1082
|
@elementDefine('root-router')
|
|
948
1083
|
class RootRouter extends HTMLElement {
|
|
949
1084
|
@subscribeSwcAppRouteChangeWhileConnected(['', '/'], { order: 0 })
|
|
950
|
-
@
|
|
1085
|
+
@innerHtmlLight
|
|
951
1086
|
handleHome(routerPathSet: RouterEventType) {
|
|
952
1087
|
return `<landing-page/>`;
|
|
953
1088
|
}
|
|
954
1089
|
|
|
955
1090
|
@subscribeSwcAppRouteChangeWhileConnected(['/products'], { order: 1 })
|
|
956
|
-
@
|
|
1091
|
+
@innerHtmlLight
|
|
957
1092
|
handleProducts(routerPathSet: RouterEventType) {
|
|
958
1093
|
return `<products-list/>`;
|
|
959
1094
|
}
|
|
960
1095
|
|
|
961
1096
|
@subscribeSwcAppRouteChangeWhileConnected(['/product/{id}'], { order: 2 })
|
|
962
|
-
@
|
|
1097
|
+
@innerHtmlLight
|
|
963
1098
|
handleProductDetail(routerPathSet: RouterEventType) {
|
|
964
1099
|
const { id } = routerPathSet.pathData;
|
|
965
1100
|
return `<product-detail product-id="${id}"/>`;
|
|
966
1101
|
}
|
|
967
1102
|
|
|
968
1103
|
@subscribeSwcAppRouteChangeWhileConnected(['/{tail:.*}'], { order: 999 })
|
|
969
|
-
@
|
|
1104
|
+
@innerHtmlLight
|
|
970
1105
|
handle404(routerPathSet: RouterEventType) {
|
|
971
1106
|
return `<not-found-page/>`;
|
|
972
1107
|
}
|
|
@@ -998,7 +1133,7 @@ Routes are executed in order of `order` value (lowest first). First matching rou
|
|
|
998
1133
|
```typescript
|
|
999
1134
|
// This handler stops propagation (returns HTML)
|
|
1000
1135
|
@subscribeSwcAppRouteChangeWhileConnected(['/admin'], { order: 1 })
|
|
1001
|
-
@
|
|
1136
|
+
@innerHtmlLight
|
|
1002
1137
|
handleAdmin(routerPathSet: RouterEventType) {
|
|
1003
1138
|
return `<admin-panel/>`; // ✅ Stops here
|
|
1004
1139
|
}
|
|
@@ -1029,7 +1164,7 @@ class AccommodationRouter extends HTMLElement {
|
|
|
1029
1164
|
|
|
1030
1165
|
// Home route
|
|
1031
1166
|
@subscribeSwcAppRouteChangeWhileConnected(['', '/'], { order: 0 })
|
|
1032
|
-
@
|
|
1167
|
+
@innerHtmlLight
|
|
1033
1168
|
handleHome(routerPathSet: RouterEventType) {
|
|
1034
1169
|
console.log('[Route Handler] Home');
|
|
1035
1170
|
return `<landing-page/>`;
|
|
@@ -1037,7 +1172,7 @@ class AccommodationRouter extends HTMLElement {
|
|
|
1037
1172
|
|
|
1038
1173
|
// List route
|
|
1039
1174
|
@subscribeSwcAppRouteChangeWhileConnected(['/list'], { order: 1 })
|
|
1040
|
-
@
|
|
1175
|
+
@innerHtmlLight
|
|
1041
1176
|
handleList(routerPathSet: RouterEventType) {
|
|
1042
1177
|
console.log('[Route Handler] List');
|
|
1043
1178
|
return `<list-page/>`;
|
|
@@ -1045,7 +1180,7 @@ class AccommodationRouter extends HTMLElement {
|
|
|
1045
1180
|
|
|
1046
1181
|
// Detail route with dynamic parameter
|
|
1047
1182
|
@subscribeSwcAppRouteChangeWhileConnected(['/detail/{productId}'], { order: 2 })
|
|
1048
|
-
@
|
|
1183
|
+
@innerHtmlLight
|
|
1049
1184
|
handleDetail(routerPathSet: RouterEventType) {
|
|
1050
1185
|
const { productId } = routerPathSet.pathData;
|
|
1051
1186
|
console.log('[Route Handler] Detail', { productId });
|
|
@@ -1054,7 +1189,7 @@ class AccommodationRouter extends HTMLElement {
|
|
|
1054
1189
|
|
|
1055
1190
|
// 404 fallback (order: 999 runs last)
|
|
1056
1191
|
@subscribeSwcAppRouteChangeWhileConnected(['/{tail:.*}'], { order: 999 })
|
|
1057
|
-
@
|
|
1192
|
+
@innerHtmlLight
|
|
1058
1193
|
handle404(routerPathSet: RouterEventType) {
|
|
1059
1194
|
console.log('[Route Handler] 404 Not Found', routerPathSet.path);
|
|
1060
1195
|
return `<not-found-page/>`;
|
|
@@ -1081,7 +1216,7 @@ interface SwcAppRouteChangeOptions {
|
|
|
1081
1216
|
filter: (router, meta) => meta.currentThis.isAdmin === true
|
|
1082
1217
|
}
|
|
1083
1218
|
)
|
|
1084
|
-
@
|
|
1219
|
+
@innerHtmlLight
|
|
1085
1220
|
handleAdminSection(routerPathSet: RouterEventType) {
|
|
1086
1221
|
const { section } = routerPathSet.pathData;
|
|
1087
1222
|
return `<admin-${section}/>`;
|
|
@@ -1129,8 +1264,8 @@ import {
|
|
|
1129
1264
|
class MultiDecoratorExample extends HTMLElement {
|
|
1130
1265
|
@setAttribute('selector')
|
|
1131
1266
|
@setProperty('selector')
|
|
1132
|
-
@
|
|
1133
|
-
@
|
|
1267
|
+
@updateStyle()
|
|
1268
|
+
@updateClass()
|
|
1134
1269
|
handleUpdate() {
|
|
1135
1270
|
return {
|
|
1136
1271
|
[ATTRIBUTE_METADATA_KEY]: 'attribute-value',
|
|
@@ -1151,8 +1286,8 @@ For more readable code, use the `valueKey` option to specify custom keys:
|
|
|
1151
1286
|
class CustomKeyExample extends HTMLElement {
|
|
1152
1287
|
@setAttribute('selector', { valueKey: 'attrValue' })
|
|
1153
1288
|
@setProperty('selector', { valueKey: 'propValue' })
|
|
1154
|
-
@
|
|
1155
|
-
@
|
|
1289
|
+
@updateStyle({ valueKey: 'styleValue' })
|
|
1290
|
+
@updateClass({ valueKey: 'classValue' })
|
|
1156
1291
|
handleUpdate() {
|
|
1157
1292
|
return {
|
|
1158
1293
|
attrValue: 'attribute-value',
|
|
@@ -1173,7 +1308,7 @@ You can mix both approaches in the same method:
|
|
|
1173
1308
|
class MixedKeysExample extends HTMLElement {
|
|
1174
1309
|
@setAttribute('selector') // Uses default ATTRIBUTE_METADATA_KEY
|
|
1175
1310
|
@setProperty('selector', { valueKey: 'customProp' }) // Uses custom key
|
|
1176
|
-
@
|
|
1311
|
+
@updateStyle({ valueKey: 'styles' }) // Uses custom key
|
|
1177
1312
|
handleUpdate() {
|
|
1178
1313
|
return {
|
|
1179
1314
|
[ATTRIBUTE_METADATA_KEY]: 'attr-value',
|
|
@@ -1185,20 +1320,20 @@ class MixedKeysExample extends HTMLElement {
|
|
|
1185
1320
|
```
|
|
1186
1321
|
|
|
1187
1322
|
**Supported Decorators with valueKey:**
|
|
1188
|
-
- `@applyAttribute` / `@setAttribute`
|
|
1189
|
-
- `@applyProperty` / `@setProperty`
|
|
1323
|
+
- `@applyAttribute` / `@setAttribute`
|
|
1324
|
+
- `@applyProperty` / `@setProperty`
|
|
1190
1325
|
- `@applySlot` / `@clearSlot` / `@appendHtmlSlot` / etc.
|
|
1191
|
-
- `@applyNode` / `@
|
|
1192
|
-
- `@applyStyle` / `@
|
|
1193
|
-
- `@applyClass` / `@
|
|
1194
|
-
- `@emitCustomEvent` / `@emit`
|
|
1326
|
+
- `@applyNode` / `@replaceChildrenNode` / etc.
|
|
1327
|
+
- `@applyStyle` / `@updateStyle` / etc.
|
|
1328
|
+
- `@applyClass` / `@updateClass` / etc.
|
|
1329
|
+
- `@emitCustomEvent` / `@emit`
|
|
1195
1330
|
- `@publishSwcAppMessage` / `@publish`
|
|
1196
1331
|
|
|
1197
1332
|
Each decorator will use only its corresponding value from the return object, preventing conflicts and allowing clean separation of concerns.
|
|
1198
1333
|
|
|
1199
1334
|
---
|
|
1200
1335
|
|
|
1201
|
-
###
|
|
1336
|
+
### 13. **Accommodation Pattern**
|
|
1202
1337
|
Factory-based component registration with explicit DI.
|
|
1203
1338
|
|
|
1204
1339
|
```typescript
|
|
@@ -1239,6 +1374,120 @@ appElement.connect({
|
|
|
1239
1374
|
```
|
|
1240
1375
|
---
|
|
1241
1376
|
|
|
1377
|
+
## 🔄 Decorator API - Consolidated Pattern (v1.0.43+)
|
|
1378
|
+
|
|
1379
|
+
### Simplified Decorator API
|
|
1380
|
+
|
|
1381
|
+
The decorator API uses a consolidated pattern where all decorators support **optional selector parameter** that defaults to `$this` when omitted. This eliminates redundant `*This` functions.
|
|
1382
|
+
|
|
1383
|
+
#### Current Usage Pattern
|
|
1384
|
+
```typescript
|
|
1385
|
+
// Single function with optional selector
|
|
1386
|
+
@applyClass('selector', 'update')
|
|
1387
|
+
method() { ... }
|
|
1388
|
+
|
|
1389
|
+
@applyClass('update') // Selector defaults to $this
|
|
1390
|
+
method() { ... }
|
|
1391
|
+
|
|
1392
|
+
@applyClass // Bare decorator - selector defaults to $this
|
|
1393
|
+
method() { ... }
|
|
1394
|
+
```
|
|
1395
|
+
|
|
1396
|
+
#### Decorator Functions (Current API)
|
|
1397
|
+
|
|
1398
|
+
**applyClass.ts:**
|
|
1399
|
+
- `applyClass(selector?, options?)` - Set/update/add/remove/toggle classes
|
|
1400
|
+
- `setClass(selector?, options?)` - Replace all classes
|
|
1401
|
+
- `updateClass(selector?, options?)` - Toggle classes
|
|
1402
|
+
- `addClass(selector?, options?)` - Add classes
|
|
1403
|
+
- `removeClass(selector?, options?)` - Remove classes
|
|
1404
|
+
- `toggleClass(selector?, options?)` - Toggle classes
|
|
1405
|
+
|
|
1406
|
+
**applyStyle.ts:**
|
|
1407
|
+
- `applyStyle(selector?, options?)` - Set/update/remove styles
|
|
1408
|
+
- `setStyle(selector?, options?)` - Clear and set styles
|
|
1409
|
+
- `updateStyle(selector?, options?)` - Update/merge styles
|
|
1410
|
+
- `removeStyle(selector?, options?)` - Remove specific styles
|
|
1411
|
+
|
|
1412
|
+
**applyProperty.ts:**
|
|
1413
|
+
- `property(selector?, options?)` - Get/set element properties
|
|
1414
|
+
- `setProperty(selector?, options?)` - Set element properties
|
|
1415
|
+
|
|
1416
|
+
**applyAttribute.ts:**
|
|
1417
|
+
- `attribute(selector?, options?)` - Get/set element attributes
|
|
1418
|
+
- `setAttribute(selector?, options?)` - Set element attributes
|
|
1419
|
+
|
|
1420
|
+
**query.ts:**
|
|
1421
|
+
- `query(selector?, options?)` - Query single element (supports $this, $host, $appHost, etc.)
|
|
1422
|
+
|
|
1423
|
+
**queryAll.ts:**
|
|
1424
|
+
- `queryAll(selector?, options?)` - Query multiple elements
|
|
1425
|
+
|
|
1426
|
+
**emitCustomEvent.ts:**
|
|
1427
|
+
- `emitCustomEvent(target, type, options?)` - Emit custom events
|
|
1428
|
+
- `emit(target, type, options?)` - Short alias
|
|
1429
|
+
|
|
1430
|
+
#### Usage Examples
|
|
1431
|
+
|
|
1432
|
+
```typescript
|
|
1433
|
+
@elementDefine('my-component')
|
|
1434
|
+
class MyComponent extends HTMLElement {
|
|
1435
|
+
// Class management - all default to $this
|
|
1436
|
+
@updateClass()
|
|
1437
|
+
toggleActive() {
|
|
1438
|
+
return { 'active': this.isActive };
|
|
1439
|
+
}
|
|
1440
|
+
|
|
1441
|
+
// Style management - all default to $this
|
|
1442
|
+
@updateStyle()
|
|
1443
|
+
applyTheme() {
|
|
1444
|
+
return { color: this.theme.color, fontSize: '16px' };
|
|
1445
|
+
}
|
|
1446
|
+
|
|
1447
|
+
// Property binding - all default to $this
|
|
1448
|
+
@setProperty()
|
|
1449
|
+
updateValue() {
|
|
1450
|
+
return this.computedValue;
|
|
1451
|
+
}
|
|
1452
|
+
|
|
1453
|
+
// Attribute binding - all default to $this
|
|
1454
|
+
@setAttribute()
|
|
1455
|
+
updateId() {
|
|
1456
|
+
return this.elementId;
|
|
1457
|
+
}
|
|
1458
|
+
|
|
1459
|
+
// Query elements
|
|
1460
|
+
@query('#input')
|
|
1461
|
+
inputElement?: HTMLInputElement;
|
|
1462
|
+
|
|
1463
|
+
@queryAll('li')
|
|
1464
|
+
listItems?: HTMLLIElement[];
|
|
1465
|
+
|
|
1466
|
+
// Emit custom events
|
|
1467
|
+
@addEventListener('button', 'click')
|
|
1468
|
+
@emitCustomEvent('$this', 'item-selected')
|
|
1469
|
+
onItemSelect() {
|
|
1470
|
+
return { itemId: this.selectedId };
|
|
1471
|
+
}
|
|
1472
|
+
|
|
1473
|
+
// With selector
|
|
1474
|
+
@updateClass('.card', 'update')
|
|
1475
|
+
updateCardClass() {
|
|
1476
|
+
return { 'highlighted': true };
|
|
1477
|
+
}
|
|
1478
|
+
}
|
|
1479
|
+
```
|
|
1480
|
+
|
|
1481
|
+
#### Key Features
|
|
1482
|
+
|
|
1483
|
+
1. **Reduced API Surface** - Consolidated decorators eliminate redundant `*This` functions
|
|
1484
|
+
2. **Cleaner Code** - Single function name with multiple overloads
|
|
1485
|
+
3. **Better Discoverability** - Intuitive parameter patterns
|
|
1486
|
+
4. **Flexible Usage** - Supports bare decorators, with options, and with selectors
|
|
1487
|
+
5. **Type Safe** - Full TypeScript support with proper type inference
|
|
1488
|
+
|
|
1489
|
+
---
|
|
1490
|
+
|
|
1242
1491
|
## ⚠️ Critical Rules
|
|
1243
1492
|
|
|
1244
1493
|
### DO NOT Use @Sim on Web Components
|
package/dist/cjs/SwcAppEngine.js
CHANGED
|
@@ -60,7 +60,9 @@ class SwcAppEngine {
|
|
|
60
60
|
if (this.router) otherInstanceSim.set(import_core_web.Router, this.router);
|
|
61
61
|
this.simpleApplication.run(otherInstanceSim);
|
|
62
62
|
if (this._config.onStartedLazyDefineComponent) {
|
|
63
|
-
await Promise.all(this._config.onStartedLazyDefineComponent.map((it) =>
|
|
63
|
+
await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => {
|
|
64
|
+
it(this._config.window);
|
|
65
|
+
}));
|
|
64
66
|
}
|
|
65
67
|
if (this._config.onEngineStarted) {
|
|
66
68
|
await this._config.onEngineStarted(this.simpleApplication, this.host);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/SwcAppEngine.ts"],
|
|
4
|
-
"sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot';\nimport { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';\nimport { ElementRouter } from './router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot';\nimport { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';\nimport { SwcAppInterface } from './types';\nimport { SimConfig } from '@dooboostore/simple-boot';\n\nexport type SwcConfigType = {\n routeType: 'path' | 'hash' | 'element';\n // connectMode?: 'direct' | 'swap' | 'clear-swap'; // hydrate \uC544\uC9C1 \uAC1C\uBC1C\uC911\n container?: symbol;\n otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;\n path?: string;\n window: Window;\n onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;\n onConnectedChildAfter?: (swcEl: HTMLElement) => void;\n onConnectedChildBefore?: (swcEl: HTMLElement) => void;\n onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;\n onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;\n onConnected?: (app: SwcAppInterface) => void;\n onDisconnected?: (app: SwcAppInterface) => void;\n ssr?: boolean;\n onStartedLazyDefineComponent?: ((w: Window)=> Promise<CustomElementConstructor> | void | string | any | CustomElementConstructor)[];\n\n onChildrenConnectedDone?: (app: SwcAppInterface) => void;\n // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;\n // childrenSwcAppStartedDoneCheckIntervalTime?: number;\n onChildrenRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;\n childrenRouteChangedCheckIntervalTime?: number; // \uC790\uC2DD \uC5F0\uACB0 \uC644\uB8CC \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC784 (ms)\n childrenConnectedDoneCheckIntervalTime?: number;\n};\n\nexport type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n public simpleApplication?: SimpleApplication;\n public router?: Router;\n private routerSubscription?: Subscription;\n private _config?: SwcConfigType;\n\n constructor(private host: HTMLElement) {}\n\n get config() {\n return this._config;\n }\n\n async connect(config: SwcConfigType) {\n try {\n this._config = config;\n\n // Router Selection\n if (this._config.routeType === 'path') {\n this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });\n } else if (this._config.routeType === 'hash') {\n this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });\n } else if (this._config.routeType === 'element') {\n this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });\n }\n\n // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)\n\n // App start\n this.simpleApplication = new SimpleApplication(\n new SimOption({\n excludeProxys: [(this._config.window as any).Node],\n container: this._config.container\n })\n );\n\n const otherInstanceSim = new Map<any, any>();\n this.config?.otherInstanceSim?.forEach((v, k) => {\n otherInstanceSim.set(k, v);\n });\n if (this.router) otherInstanceSim.set(Router, this.router);\n this.simpleApplication.run(otherInstanceSim);\n\n\n if (this._config.onStartedLazyDefineComponent) {\n // console.log('-------->', this._config.onStartedLazyDefineComponent)\n await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))\n }\n if (this._config.onEngineStarted) {\n await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);\n }\n } catch (e) {\n console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);\n }\n }\n\n disconnect() {\n this.routerSubscription?.unsubscribe();\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAkC;AAClC,sBAAgE;AAChE,2BAA8B;AAC9B,IAAAA,sBAA0B;AAgCnB,MAAM,aAAa;AAAA,EAMxB,YAAoB,MAAmB;AAAnB;AALpB,wBAAO;AACP,wBAAO;AACP,wBAAQ;AACR,wBAAQ;AAAA,EAEgC;AAAA,EAExC,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,QAAQ,QAAuB;AACnC,QAAI;AACF,WAAK,UAAU;AAGf,UAAI,KAAK,QAAQ,cAAc,QAAQ;AACrC,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,QAAQ;AAC5C,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,WAAW;AAC/C,aAAK,SAAS,IAAI,mCAAc,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC9F;AAKA,WAAK,oBAAoB,IAAI;AAAA,QAC3B,IAAI,8BAAU;AAAA,UACZ,eAAe,CAAE,KAAK,QAAQ,OAAe,IAAI;AAAA,UACjD,WAAW,KAAK,QAAQ;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,YAAM,mBAAmB,oBAAI,IAAc;AAC3C,WAAK,QAAQ,kBAAkB,QAAQ,CAAC,GAAG,MAAM;AAC/C,yBAAiB,IAAI,GAAG,CAAC;AAAA,MAC3B,CAAC;AACD,UAAI,KAAK,OAAQ,kBAAiB,IAAI,wBAAQ,KAAK,MAAM;AACzD,WAAK,kBAAkB,IAAI,gBAAgB;AAG3C,UAAI,KAAK,QAAQ,8BAA8B;AAE7C,cAAM,QAAQ,IAAI,KAAK,QAAQ,6BAA6B,IAAI,QAAM,
|
|
4
|
+
"sourcesContent": ["import { SimpleApplication } from '@dooboostore/simple-boot';\nimport { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';\nimport { ElementRouter } from './router/ElementRouter';\nimport { SimOption } from '@dooboostore/simple-boot';\nimport { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';\nimport { SwcAppInterface } from './types';\nimport { SimConfig } from '@dooboostore/simple-boot';\n\nexport type SwcConfigType = {\n routeType: 'path' | 'hash' | 'element';\n // connectMode?: 'direct' | 'swap' | 'clear-swap'; // hydrate \uC544\uC9C1 \uAC1C\uBC1C\uC911\n container?: symbol;\n otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;\n path?: string;\n window: Window;\n onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => Promise<void> | void;\n onConnectedChildAfter?: (swcEl: HTMLElement) => void;\n onConnectedChildBefore?: (swcEl: HTMLElement) => void;\n onDisconnectedChildAfter?: (swcEl: HTMLElement) => void;\n onDisconnectedChildBefore?: (swcEl: HTMLElement) => void;\n onConnected?: (app: SwcAppInterface) => void;\n onDisconnected?: (app: SwcAppInterface) => void;\n ssr?: boolean;\n onStartedLazyDefineComponent?: ((w: Window)=> Promise<CustomElementConstructor> | void | string | any | CustomElementConstructor)[];\n\n onChildrenConnectedDone?: (app: SwcAppInterface) => void;\n // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;\n // childrenSwcAppStartedDoneCheckIntervalTime?: number;\n onChildrenRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;\n childrenRouteChangedCheckIntervalTime?: number; // \uC790\uC2DD \uC5F0\uACB0 \uC644\uB8CC \uC774\uBCA4\uD2B8 \uB514\uBC14\uC6B4\uC2A4 \uD0C0\uC784 (ms)\n childrenConnectedDoneCheckIntervalTime?: number;\n};\n\nexport type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;\n\nexport class SwcAppEngine {\n public simpleApplication?: SimpleApplication;\n public router?: Router;\n private routerSubscription?: Subscription;\n private _config?: SwcConfigType;\n\n constructor(private host: HTMLElement) {}\n\n get config() {\n return this._config;\n }\n\n async connect(config: SwcConfigType) {\n try {\n this._config = config;\n\n // Router Selection\n if (this._config.routeType === 'path') {\n this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });\n } else if (this._config.routeType === 'hash') {\n this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });\n } else if (this._config.routeType === 'element') {\n this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });\n }\n\n // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)\n\n // App start\n this.simpleApplication = new SimpleApplication(\n new SimOption({\n excludeProxys: [(this._config.window as any).Node],\n container: this._config.container\n })\n );\n\n const otherInstanceSim = new Map<any, any>();\n this.config?.otherInstanceSim?.forEach((v, k) => {\n otherInstanceSim.set(k, v);\n });\n if (this.router) otherInstanceSim.set(Router, this.router);\n this.simpleApplication.run(otherInstanceSim);\n\n\n if (this._config.onStartedLazyDefineComponent) {\n // console.log('-------->', this._config.onStartedLazyDefineComponent)\n await Promise.all(this._config.onStartedLazyDefineComponent.map(it => {\n it(this._config.window);\n }))\n }\n if (this._config.onEngineStarted) {\n await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);\n }\n } catch (e) {\n console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);\n }\n }\n\n disconnect() {\n this.routerSubscription?.unsubscribe();\n }\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAkC;AAClC,sBAAgE;AAChE,2BAA8B;AAC9B,IAAAA,sBAA0B;AAgCnB,MAAM,aAAa;AAAA,EAMxB,YAAoB,MAAmB;AAAnB;AALpB,wBAAO;AACP,wBAAO;AACP,wBAAQ;AACR,wBAAQ;AAAA,EAEgC;AAAA,EAExC,IAAI,SAAS;AACX,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,MAAM,QAAQ,QAAuB;AACnC,QAAI;AACF,WAAK,UAAU;AAGf,UAAI,KAAK,QAAQ,cAAc,QAAQ;AACrC,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,QAAQ;AAC5C,aAAK,SAAS,IAAI,2BAAW,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC3F,WAAW,KAAK,QAAQ,cAAc,WAAW;AAC/C,aAAK,SAAS,IAAI,mCAAc,EAAE,QAAQ,KAAK,QAAQ,QAAQ,UAAU,KAAK,QAAQ,KAAK,CAAC;AAAA,MAC9F;AAKA,WAAK,oBAAoB,IAAI;AAAA,QAC3B,IAAI,8BAAU;AAAA,UACZ,eAAe,CAAE,KAAK,QAAQ,OAAe,IAAI;AAAA,UACjD,WAAW,KAAK,QAAQ;AAAA,QAC1B,CAAC;AAAA,MACH;AAEA,YAAM,mBAAmB,oBAAI,IAAc;AAC3C,WAAK,QAAQ,kBAAkB,QAAQ,CAAC,GAAG,MAAM;AAC/C,yBAAiB,IAAI,GAAG,CAAC;AAAA,MAC3B,CAAC;AACD,UAAI,KAAK,OAAQ,kBAAiB,IAAI,wBAAQ,KAAK,MAAM;AACzD,WAAK,kBAAkB,IAAI,gBAAgB;AAG3C,UAAI,KAAK,QAAQ,8BAA8B;AAE7C,cAAM,QAAQ,IAAI,KAAK,QAAQ,6BAA6B,IAAI,QAAM;AACpE,aAAG,KAAK,QAAQ,MAAM;AAAA,QACxB,CAAC,CAAC;AAAA,MACJ;AACA,UAAI,KAAK,QAAQ,iBAAiB;AAChC,cAAM,KAAK,QAAQ,gBAAgB,KAAK,mBAAmB,KAAK,IAAkC;AAAA,MACpG;AAAA,IACF,SAAS,GAAG;AACV,cAAQ,MAAM,iCAAiC,GAAG,KAAK,OAAO;AAAA,IAChE;AAAA,EACF;AAAA,EAEA,aAAa;AACX,SAAK,oBAAoB,YAAY;AAAA,EACvC;AACF;",
|
|
6
6
|
"names": ["import_simple_boot"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/decorators/addEventListener.ts"],
|
|
4
|
-
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions extends EventListenerOptions {\n capture?: boolean;\n once?: boolean;\n passive?: boolean;\n stopPropagation?: boolean;\n stopImmediatePropagation?: boolean;\n preventDefault?: boolean;\n // removeOnDisconnected?: boolean;\n delegate?: boolean;\n filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n}\n\nexport interface AddEventListenerMetadata {\n propertyKey: string | symbol;\n selector:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;
|
|
4
|
+
"sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions<TEvent extends Event = Event> extends EventListenerOptions {\n capture?: boolean;\n once?: boolean;\n passive?: boolean;\n stopPropagation?: boolean;\n stopImmediatePropagation?: boolean;\n preventDefault?: boolean;\n // removeOnDisconnected?: boolean;\n delegate?: boolean;\n filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n // RxJS operator options\n debounceTime?: number;\n throttleTime?: number;\n distinctUntilChanged?: boolean | ((prev: TEvent, curr: TEvent) => boolean);\n}\n\nexport type EventListenerSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);\n\nexport interface AddEventListenerMetadata<TEvent extends Event = Event> {\n propertyKey: string | symbol;\n selector: EventListenerSelector;\n type: string;\n options: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener<TEvent extends Event = Event>(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator;\nexport function addEventListener<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener<TEvent extends Event = Event>(selectorOrTarget: EventListenerSelector, type: string, options: any = {}): MethodDecorator {\n return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n const constructor = targetObj.constructor;\n\n let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata<TEvent>[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n if (!listeners) {\n listeners = [];\n ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n }\n\n listeners.push({ propertyKey, selector: selectorOrTarget, type, options });\n };\n}\n\n\nexport function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n return addEventListener<TEvent>(selector, type, {...options??{}, root:'light', delegate: true});\n}\n\nexport function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow', delegate: true});\n}\nexport function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n return addEventListener<TEvent>(selector, type, {...options??{}, root:'all', delegate: true});\n}\nexport function addEventListenerDelegate<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n return addEventListener<TEvent>(selector, type, {...options??{}, root:'auto', delegate: true});\n}\n\n/**\n * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector\n */\n\n// --- Aliases: event... ---\nexport const event = addEventListener;\nexport const eventDelegateLightDom = addEventListenerDelegateLightDom;\nexport const eventDelegateShadowDom = addEventListenerDelegateShadowDom;\nexport const eventDelegateAllDom = addEventListenerDelegateAllDom;\nexport const eventDelegate = addEventListenerDelegate;\nexport function addEventListenerThis<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n return addEventListener<TEvent>('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n return addEventListener<TEvent>('$appHost', type, options);\n}\n\nexport function addEventListenerWindow<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n return addEventListener<TEvent>('$window', type, options);\n}\nexport function addEventListenerDocument<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n return addEventListener<TEvent>('$document', type, options);\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata<Event>[] | undefined => {\n const constructor = target instanceof Function ? target : target.constructor;\n return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AA4BtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAA+C,kBAAyC,MAAc,UAAe,CAAC,GAAoB;AACxJ,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,yBAAa,YAAgD,iCAAiC,WAAW;AACzH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,+BAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AAEA,cAAU,KAAK,EAAE,aAAa,UAAU,kBAAkB,MAAM,QAAQ,CAAC;AAAA,EAC3E;AACF;AAGO,SAAS,iCAA+D,UAAiC,MAAc,SAAkF;AAC9M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AAChG;AAEO,SAAS,kCAAgE,UAAiC,MAAc,SAAkF;AAC/M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACjG;AACO,SAAS,+BAA6D,UAAiC,MAAc,SAAkF;AAC5M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AAC9F;AACO,SAAS,yBAAuD,UAAiC,MAAc,SAAkF;AACtM,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAQ,UAAU,KAAI,CAAC;AAC/F;AAOO,MAAM,QAAQ;AACd,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,gBAAgB;AACtB,SAAS,qBAAmD,MAAc,SAAkF;AACjK,SAAO,iBAAyB,SAAS,MAAM,OAAO;AACxD;AAKO,SAAS,wBAAsD,MAAc,SAAkF;AACpK,SAAO,iBAAyB,YAAY,MAAM,OAAO;AAC3D;AAEO,SAAS,uBAAqD,MAAc,SAAkF;AACnK,SAAO,iBAAyB,WAAW,MAAM,OAAO;AAC1D;AACO,SAAS,yBAAuD,MAAc,SAAkF;AACrK,SAAO,iBAAyB,aAAa,MAAM,OAAO;AAC5D;AAEO,MAAM,8BAA8B,CAAC,WAA+D;AACzG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,iCAAiC,WAAW;AAC9E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|