@dooboostore/simple-web-component 1.0.43 → 1.0.44

package/README.md

@@ -452,33 +452,168 @@ printTag() {
 
 ### 6. **Attribute Binding**
 
-#### @attribute
-Bind HTML attributes to properties (automatic sync).
+#### @attribute (Field Decorator)
+Bind HTML attributes to properties with automatic read/write synchronization.
+
+Intelligently distinguishes between attribute names and CSS selectors:
 
 ```typescript
-@attributeThis
-width: string = '100px';  // Bind to this.width
+@elementDefine('product-card')
+class ProductCard extends HTMLElement {
+  // Attribute name on $this (auto-detected)
+  @attribute('product-id')
+  productId: string;
+
+  // Attribute name on selector
+  @attribute('#user', 'data-id')
+  userId: string;
+
+  // Bare decorator (uses field name as attribute)
+  @attribute
+  title: string;
 
-@attribute('data-id')
-resourceId: string;  // element attribute first 
+  @onInitialize
+  onconstructor() {
+    if (this.productId) {
+      this.loadProduct(this.productId);
+    }
+  }
+}
 ```
 
-#### @attributeThis
-Bind attributes on host element itself.
+#### @setAttribute (Method Decorator)
+Set element attributes from method return values.
 
 ```typescript
-@attributeThis('product-id')
-productId?: string;
+@elementDefine('status-updater')
+class StatusUpdater extends HTMLElement {
+  // Set attribute on $this
+  @setAttribute('data-status')
+  updateStatus() {
+    return this.isActive ? 'active' : 'inactive';
+  }
 
-@onInitialize
-onconstructor() {
-  if (this.productId) {
-    this.loadProduct(this.productId);
+  // Set attribute on selector
+  @setAttribute('#user', 'data-name')
+  setUserName() {
+    return this.userName;
+  }
+
+  // Bare decorator (uses method name as attribute)
+  @setAttribute
+  setValue() {
+    return this.computedValue;
   }
 }
 ```
 
-### 7. **DOM Manipulation with @applyNode**
+**Usage Patterns:**
+- `@attribute('attr-name')` - Attribute name on $this (auto-detected)
+- `@attribute('#selector', 'attr-name')` - Attribute name on selector
+- `@attribute('attr-name', options)` - Attribute name on $this with options
+- `@attribute('#selector', 'attr-name', options)` - Attribute name on selector with options
+- `@attribute` - Bare decorator (uses field name as attribute on $this)
+
+**@setAttribute Patterns:**
+- `@setAttribute('attr-name')` - Set attribute on $this
+- `@setAttribute('#selector', 'attr-name')` - Set attribute on selector
+- `@setAttribute('attr-name', options)` - Set attribute on $this with options
+- `@setAttribute('#selector', 'attr-name', options)` - Set attribute on selector with options
+- `@setAttribute` - Bare decorator (uses method name as attribute on $this)
+
+#### @changedAttribute (Method Decorator)
+Listen for attribute changes on the component this element.
+
+```typescript
+@elementDefine('reactive-component')
+class ReactiveComponent extends HTMLElement {
+  @changedAttribute('product-id')
+  onProductIdChanged(newValue: string, oldValue: string) {
+    console.log(`Product changed from ${oldValue} to ${newValue}`);
+    this.loadProduct(newValue);
+  }
+
+  @changedAttribute('data-status', { type: Boolean })
+  onStatusChanged(newValue: boolean) {
+    console.log(`Status is now: ${newValue}`);
+  }
+
+  // Listen to any attribute change
+  @changedAttribute()
+  onAnyAttributeChanged(newValue: any, oldValue: any) {
+    console.log('An attribute changed');
+  }
+}
+```
+
+**@changedAttribute Options:**
+- `attributeName` - Attribute name to listen for (optional, defaults to method name)
+- `type` - Type converter: `Number`, `Boolean`, or `String`
+- `while` - Execution condition: `'connected'` (only while connected to DOM)
+
+### 6.5 **Property Binding**
+
+#### @property (Field Decorator)
+Bind element properties to component fields with automatic read/write synchronization.
+
+```typescript
+@elementDefine('input-wrapper')
+class InputWrapper extends HTMLElement {
+  // Property on $this (auto-detected)
+  @property('value')
+  inputValue: string;
+
+  // Property on selector
+  @property('#submit-btn', 'disabled')
+  isSubmitDisabled: boolean;
+
+  // Bare decorator (uses field name as property)
+  @property
+  checked: boolean;
+}
+```
+
+#### @setProperty (Method Decorator)
+Set element properties from method return values.
+
+```typescript
+@elementDefine('form-handler')
+class FormHandler extends HTMLElement {
+  // Set property on $this
+  @setProperty('disabled')
+  disableForm() {
+    return !this.isValid();
+  }
+
+  // Set property on selector
+  @setProperty('#submit-btn', 'disabled')
+  updateSubmitState() {
+    return this.hasErrors;
+  }
+
+  // Bare decorator (uses method name as property)
+  @setProperty
+  setValue() {
+    return this.computedValue;
+  }
+}
+```
+
+**Usage Patterns:**
+- `@property('propertyName')` - Property on $this
+- `@property('#selector', 'propertyName')` - Property on selector
+- `@property('propertyName', options)` - Property on $this with options
+- `@property('#selector', 'propertyName', options)` - Property on selector with options
+- `@property` - Bare decorator (uses field name as property on $this)
+
+**@setProperty Patterns:**
+- `@setProperty('propertyName')` - Set property on $this
+- `@setProperty('#selector', 'propertyName')` - Set property on selector
+- `@setProperty('propertyName', options)` - Set property on $this with options
+- `@setProperty('#selector', 'propertyName', options)` - Set property on selector with options
+- `@setProperty` - Bare decorator (uses method name as property on $this)
+
+### 7. **DOM Manipulation with applyNode**
 
 Surgically add, replace, or remove nodes in the DOM with fine-grained control.
 
@@ -486,19 +621,19 @@ Surgically add, replace, or remove nodes in the DOM with fine-grained control.
 @elementDefine('content-updater')
 class ContentUpdater extends HTMLElement {
   @addEventListener('button', 'click')
-  @replaceChildrenLightNodeThis
+  @replaceChildrenNode()
   updateContent() {
     return `<div>New content</div>`;
   }
 
   @addEventListener('.append-btn', 'click')
-  @beforeEndLightNodeThis
+  @beforeEndNode()
   appendContent() {
     return `<p>Appended content</p>`;
   }
 
   @addEventListener('.prepend-btn', 'click')
-  @afterBeginLightNodeThis
+  @afterBeginNode()
   prependContent() {
     return `<p>Prepended content</p>`;
   }
@@ -517,15 +652,15 @@ class ContentUpdater extends HTMLElement {
 ```
 
 **@applyNode Decorator Variants:**
-- `replaceChildrenNodeThis()` - Replace all children
-- `replaceChildrenLightNodeThis()` - Replace children in light DOM
-- `beforeEndNodeThis()` - Append to end
-- `beforeEndLightNodeThis()` - Append to light DOM end
-- `afterBeginNodeThis()` - Prepend to beginning
-- `afterBeginLightNodeThis()` - Prepend to light DOM beginning
-- `innerHtmlNodeThis()` - Set innerHTML
-- `innerHtmlLightNodeThis()` - Set innerHTML in light DOM
-- `innerTextNodeThis()` - Set innerText
+- `replaceChildrenNode()` - Replace all children
+- `replaceChildrenLightNode()` - Replace children in light DOM
+- `beforeEndNode()` - Append to end
+- `beforeEndLightNode()` - Append to light DOM end
+- `afterBeginNode()` - Prepend to beginning
+- `afterBeginLightNode()` - Prepend to light DOM beginning
+- `innerHtmlNode()` - Set innerHTML
+- `innerHtmlLightNode()` - Set innerHTML in light DOM
+- `innerTextNode()` - Set innerText
 
 **Position Options:**
 ```typescript
@@ -541,7 +676,7 @@ export type ApplyNodePosition =
   | 'remove';          // Remove element
 ```
 
-### 7.5 **Style & Class Management**
+### 8. **Style & Class Management**
 
 Apply styles and classes dynamically with `@applyStyle` and `@applyClass`.
 
@@ -552,7 +687,7 @@ class StyledComponent extends HTMLElement {
   isActive = false;
 
   @addEventListener('button', 'click')
-  @updateStyleThis
+  @updateStyle()
   toggleStyle() {
     return {
       color: this.isActive ? 'green' : 'red',
@@ -561,7 +696,7 @@ class StyledComponent extends HTMLElement {
   }
 
   @addEventListener('.toggle-btn', 'click')
-  @updateClassThis
+  @updateClass()
   toggleClass() {
     return {
       'active': this.isActive,
@@ -593,7 +728,7 @@ class StyledComponent extends HTMLElement {
 - `removeClassThis()` - Remove classes
 - `toggleClassThis()` - Toggle classes
 
-### 7.6 **Lifecycle Hooks**
+### 8.5 **Lifecycle Hooks**
 
 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.
 
@@ -676,7 +811,7 @@ onFirst() { }
 onSecond() { }
 ```
 
-### 8. **Structural Directives**
+### 9. **Structural Directives**
 
 Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
 
@@ -766,9 +901,9 @@ class LoginForm extends HTMLElement {
 - `publishSwcAppMessage(messageType)` - Publish with specific message type
 - `publishSwcAppMessage(messageType, { valueKey: 'customKey' })` - Publish with custom value extraction
 - `publishSwcAppMessage({ messageType: 'type', valueKey: 'customKey' })` - Publish with options object
-- `publish()` - Short alias
-- `publish(messageType)` - Short alias with message type
-- `publish(messageType, options)` - Short alias with options
+- `publishMessage()` - Short alias
+- `publishMessage(messageType)` - Short alias with message type
+- `publishMessage(messageType, options)` - Short alias with options
 
 **Using valueKey for Multiple Decorators:**
 
@@ -825,7 +960,7 @@ class ProductDetail extends HTMLElement {
 
 ---
 
-### 10. **SwcApp - Multiple Element Types with Mixin Pattern**
+### 11. **SwcApp - Multiple Element Types with Mixin Pattern**
 
 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.
 
@@ -937,7 +1072,7 @@ appElement.connect({
 });
 ```
 
-#### 11. **Routing with @subscribeSwcAppRouteChangeWhileConnected**
+#### 12. **Routing with @subscribeSwcAppRouteChangeWhileConnected**
 
 SWC provides declarative routing with automatic path matching, order-based execution, and optional propagation control.
 
@@ -1129,8 +1264,8 @@ import {
 class MultiDecoratorExample extends HTMLElement {
   @setAttribute('selector')
   @setProperty('selector')
-  @updateStyleThis
-  @updateClassThis
+  @updateStyle()
+  @updateClass()
   handleUpdate() {
     return {
       [ATTRIBUTE_METADATA_KEY]: 'attribute-value',
@@ -1151,8 +1286,8 @@ For more readable code, use the `valueKey` option to specify custom keys:
 class CustomKeyExample extends HTMLElement {
   @setAttribute('selector', { valueKey: 'attrValue' })
   @setProperty('selector', { valueKey: 'propValue' })
-  @updateStyleThis({ valueKey: 'styleValue' })
-  @updateClassThis({ valueKey: 'classValue' })
+  @updateStyle({ valueKey: 'styleValue' })
+  @updateClass({ valueKey: 'classValue' })
   handleUpdate() {
     return {
       attrValue: 'attribute-value',
@@ -1173,7 +1308,7 @@ You can mix both approaches in the same method:
 class MixedKeysExample extends HTMLElement {
   @setAttribute('selector')  // Uses default ATTRIBUTE_METADATA_KEY
   @setProperty('selector', { valueKey: 'customProp' })  // Uses custom key
-  @updateStyleThis({ valueKey: 'styles' })  // Uses custom key
+  @updateStyle({ valueKey: 'styles' })  // Uses custom key
   handleUpdate() {
     return {
       [ATTRIBUTE_METADATA_KEY]: 'attr-value',
@@ -1185,20 +1320,20 @@ class MixedKeysExample extends HTMLElement {
 ```
 
 **Supported Decorators with valueKey:**
-- `@applyAttribute` / `@setAttribute` / `@setAttributeThis`
-- `@applyProperty` / `@setProperty` / `@setPropertyThis`
+- `@applyAttribute` / `@setAttribute`
+- `@applyProperty` / `@setProperty`
 - `@applySlot` / `@clearSlot` / `@appendHtmlSlot` / etc.
-- `@applyNode` / `@replaceChildrenNodeThis` / etc.
-- `@applyStyle` / `@updateStyleThis` / etc.
-- `@applyClass` / `@updateClassThis` / etc.
-- `@emitCustomEvent` / `@emit` / `@emitCustomEventThis`
+- `@applyNode` / `@replaceChildrenNode` / etc.
+- `@applyStyle` / `@updateStyle` / etc.
+- `@applyClass` / `@updateClass` / etc.
+- `@emitCustomEvent` / `@emit`
 - `@publishSwcAppMessage` / `@publish`
 
 Each decorator will use only its corresponding value from the return object, preventing conflicts and allowing clean separation of concerns.
 
 ---
 
-### 12. **Accommodation Pattern**
+### 13. **Accommodation Pattern**
 Factory-based component registration with explicit DI.
 
 ```typescript
@@ -1239,6 +1374,120 @@ appElement.connect({
 ```
 ---
 
+## 🔄 Decorator API - Consolidated Pattern (v1.0.43+)
+
+### Simplified Decorator API
+
+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.
+
+#### Current Usage Pattern
+```typescript
+// Single function with optional selector
+@applyClass('selector', 'update')
+method() { ... }
+
+@applyClass('update')  // Selector defaults to $this
+method() { ... }
+
+@applyClass  // Bare decorator - selector defaults to $this
+method() { ... }
+```
+
+#### Decorator Functions (Current API)
+
+**applyClass.ts:**
+- `applyClass(selector?, options?)` - Set/update/add/remove/toggle classes
+- `setClass(selector?, options?)` - Replace all classes
+- `updateClass(selector?, options?)` - Toggle classes
+- `addClass(selector?, options?)` - Add classes
+- `removeClass(selector?, options?)` - Remove classes
+- `toggleClass(selector?, options?)` - Toggle classes
+
+**applyStyle.ts:**
+- `applyStyle(selector?, options?)` - Set/update/remove styles
+- `setStyle(selector?, options?)` - Clear and set styles
+- `updateStyle(selector?, options?)` - Update/merge styles
+- `removeStyle(selector?, options?)` - Remove specific styles
+
+**applyProperty.ts:**
+- `property(selector?, options?)` - Get/set element properties
+- `setProperty(selector?, options?)` - Set element properties
+
+**applyAttribute.ts:**
+- `attribute(selector?, options?)` - Get/set element attributes
+- `setAttribute(selector?, options?)` - Set element attributes
+
+**query.ts:**
+- `query(selector?, options?)` - Query single element (supports $this, $host, $appHost, etc.)
+
+**queryAll.ts:**
+- `queryAll(selector?, options?)` - Query multiple elements
+
+**emitCustomEvent.ts:**
+- `emitCustomEvent(target, type, options?)` - Emit custom events
+- `emit(target, type, options?)` - Short alias
+
+#### Usage Examples
+
+```typescript
+@elementDefine('my-component')
+class MyComponent extends HTMLElement {
+  // Class management - all default to $this
+  @updateClass()
+  toggleActive() {
+    return { 'active': this.isActive };
+  }
+
+  // Style management - all default to $this
+  @updateStyle()
+  applyTheme() {
+    return { color: this.theme.color, fontSize: '16px' };
+  }
+
+  // Property binding - all default to $this
+  @setProperty()
+  updateValue() {
+    return this.computedValue;
+  }
+
+  // Attribute binding - all default to $this
+  @setAttribute()
+  updateId() {
+    return this.elementId;
+  }
+
+  // Query elements
+  @query('#input')
+  inputElement?: HTMLInputElement;
+
+  @queryAll('li')
+  listItems?: HTMLLIElement[];
+
+  // Emit custom events
+  @addEventListener('button', 'click')
+  @emitCustomEvent('$this', 'item-selected')
+  onItemSelect() {
+    return { itemId: this.selectedId };
+  }
+
+  // With selector
+  @updateClass('.card', 'update')
+  updateCardClass() {
+    return { 'highlighted': true };
+  }
+}
+```
+
+#### Key Features
+
+1. **Reduced API Surface** - Consolidated decorators eliminate redundant `*This` functions
+2. **Cleaner Code** - Single function name with multiple overloads
+3. **Better Discoverability** - Intuitive parameter patterns
+4. **Flexible Usage** - Supports bare decorators, with options, and with selectors
+5. **Type Safe** - Full TypeScript support with proper type inference
+
+---
+
 ## ⚠️ Critical Rules
 
 ### DO NOT Use @Sim on Web Components

package/dist/cjs/SwcAppEngine.js

@@ -60,7 +60,9 @@ class SwcAppEngine {
       if (this.router) otherInstanceSim.set(import_core_web.Router, this.router);
       this.simpleApplication.run(otherInstanceSim);
       if (this._config.onStartedLazyDefineComponent) {
-        await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => it(this._config.window)));
+        await Promise.all(this._config.onStartedLazyDefineComponent.map((it) => {
+          it(this._config.window);
+        }));
       }
       if (this._config.onEngineStarted) {
         await this._config.onEngineStarted(this.simpleApplication, this.host);

package/dist/cjs/SwcAppEngine.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/SwcAppEngine.ts"],
-  "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"],
-  "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,GAAG,KAAK,QAAQ,MAAM,CAAC,CAAC;AAAA,MAChG;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;",
+  "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"],
+  "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;",
   "names": ["import_simple_boot"]
 }

package/dist/cjs/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "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: string;\n  type: string;\n  options: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions): MethodDecorator;\nexport function addEventListener(selector: string, type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener(selectorOrTarget: string, 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[]>(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(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'light', delegate: true});\n}\n\nexport function addEventListenerDelegateShadowDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'shadow', delegate: true});\n}\nexport function addEventListenerDelegateAllDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(selector, type, {...options??{}, root:'all', delegate: true});\n}\nexport function addEventListenerDelegate(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {\n  return addEventListener(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(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$appHost', type, options);\n}\n\nexport function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$window', type, options);\n}\nexport function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {\n  return addEventListener('$document', type, options);\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAsBtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAAiB,kBAA0B,MAAc,UAAe,CAAC,GAAoB;AAC3G,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,yBAAa,YAAwC,iCAAiC,WAAW;AACjH,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,iCAAiC,UAAkB,MAAc,SAA0E;AACzJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AACxF;AAEO,SAAS,kCAAkC,UAAkB,MAAc,SAA0E;AAC1J,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACzF;AACO,SAAS,+BAA+B,UAAkB,MAAc,SAA0E;AACvJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AACtF;AACO,SAAS,yBAAyB,UAAkB,MAAc,SAA0E;AACjJ,SAAO,iBAAiB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAQ,UAAU,KAAI,CAAC;AACvF;AAOO,MAAM,QAAQ;AACd,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,gBAAgB;AACtB,SAAS,qBAAqB,MAAc,SAA0E;AAC3H,SAAO,iBAAiB,SAAS,MAAM,OAAO;AAChD;AAKO,SAAS,wBAAwB,MAAc,SAA0E;AAC9H,SAAO,iBAAiB,YAAY,MAAM,OAAO;AACnD;AAEO,SAAS,uBAAuB,MAAc,SAA0E;AAC7H,SAAO,iBAAiB,WAAW,MAAM,OAAO;AAClD;AACO,SAAS,yBAAyB,MAAc,SAA0E;AAC/H,SAAO,iBAAiB,aAAa,MAAM,OAAO;AACpD;AAEO,MAAM,8BAA8B,CAAC,WAAwD;AAClG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "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 interface AddEventListenerMetadata<TEvent extends Event = Event> {\n  propertyKey: string | symbol;\n  selector: string;\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: string, 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: string, 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: string, 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: string, 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: string, 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: string, 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"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AA0BtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAA+C,kBAA0B,MAAc,UAAe,CAAC,GAAoB;AACzI,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,UAAkB,MAAc,SAAkF;AAC/L,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AAChG;AAEO,SAAS,kCAAgE,UAAkB,MAAc,SAAkF;AAChM,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACjG;AACO,SAAS,+BAA6D,UAAkB,MAAc,SAAkF;AAC7L,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AAC9F;AACO,SAAS,yBAAuD,UAAkB,MAAc,SAAkF;AACvL,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;",
   "names": []
 }

package/dist/cjs/decorators/applyAttribute.js

@@ -20,15 +20,13 @@ __export(applyAttribute_exports, {
   ATTRIBUTE_METADATA_KEY: () => ATTRIBUTE_METADATA_KEY,
   applyAttribute: () => applyAttribute,
   attribute: () => attribute,
-  attributeThis: () => attributeThis,
   convertValue: () => convertValue,
   default: () => applyAttribute_default,
   findAllAttributeApplyMetadata: () => findAllAttributeApplyMetadata,
   findAllAttributeMetadata: () => findAllAttributeMetadata,
   getAttributeValue: () => getAttributeValue,
   resolveAttributeTargets: () => resolveAttributeTargets,
-  setAttribute: () => setAttribute,
-  setAttributeThis: () => setAttributeThis
+  setAttribute: () => setAttribute
 });
 module.exports = __toCommonJS(applyAttribute_exports);
 var import_core = require("@dooboostore/core");
@@ -36,6 +34,13 @@ var import_elementDefine = require("./elementDefine");
 var import_Utils = require("../utils/Utils");
 var import_core_web = require("@dooboostore/core-web");
 const ATTRIBUTE_METADATA_KEY = Symbol.for("simple-web-component:attribute");
+const isCssSelector = (str) => {
+  if (!str) return false;
+  if (str.startsWith("$")) return true;
+  if (/^[#.\[\:>+~]/.test(str)) return true;
+  if (/[>+~:\[\]]/.test(str)) return true;
+  return false;
+};
 const convertValue = (val, type) => {
   if (val === null || val === void 0) return val;
   if (type === Number) return Number(val);
@@ -206,35 +211,32 @@ function applyAttribute(selector, targetAttributeNameOrOptions, options) {
     });
   };
 }
-function attribute(selector, targetAttributeNameOrOptions, options) {
-  return applyAttribute(selector, targetAttributeNameOrOptions, options);
-}
-function attributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol") {
-    return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+function attribute(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor) {
+  if (optionsOrDescriptor !== void 0 && (typeof attributeNameOrOptions === "string" || typeof attributeNameOrOptions === "symbol")) {
+    return applyAttribute("$this", void 0, {})(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor);
   }
-  if (typeof targetOrOptions === "string") {
-    return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
-  } else if (targetOrOptions && typeof targetOrOptions === "object") {
-    return applyAttribute("$this", void 0, targetOrOptions);
-  } else {
-    return applyAttribute("$this", void 0, {});
+  if (typeof selectorOrAttributeOrTarget === "string") {
+    const isSelector = isCssSelector(selectorOrAttributeOrTarget);
+    if (isSelector) {
+      return applyAttribute(selectorOrAttributeOrTarget, attributeNameOrOptions, optionsOrDescriptor);
+    } else {
+      const options = typeof attributeNameOrOptions === "object" && attributeNameOrOptions !== null ? attributeNameOrOptions : {};
+      return applyAttribute("$this", selectorOrAttributeOrTarget, options);
+    }
   }
+  return applyAttribute("$this", void 0, selectorOrAttributeOrTarget);
 }
-function setAttribute(selector, targetAttributeNameOrOptions, options) {
-  return applyAttribute(selector, targetAttributeNameOrOptions, options);
-}
-function setAttributeThis(targetOrOptions, propertyKeyOrOptions, descriptor) {
-  if (typeof targetOrOptions === "object" && targetOrOptions !== null && !Array.isArray(targetOrOptions) && (typeof propertyKeyOrOptions === "string" || typeof propertyKeyOrOptions === "symbol")) {
-    return applyAttribute("$this", void 0, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-  }
-  if (typeof targetOrOptions === "string") {
-    return applyAttribute("$this", targetOrOptions, propertyKeyOrOptions);
-  } else if (targetOrOptions && typeof targetOrOptions === "object") {
-    return applyAttribute("$this", void 0, targetOrOptions);
-  } else {
-    return applyAttribute("$this", void 0, {});
+function setAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined) {
+  if (typeof selectorOrAttributeOrOptions === "string") {
+    const isSelector = isCssSelector(selectorOrAttributeOrOptions);
+    if (isSelector) {
+      return applyAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions, optionsOrUndefined);
+    } else {
+      const options = typeof attributeNameOrOptions === "object" && attributeNameOrOptions !== null ? attributeNameOrOptions : {};
+      return applyAttribute("$this", selectorOrAttributeOrOptions, options);
+    }
   }
+  return applyAttribute("$this", void 0, selectorOrAttributeOrOptions);
 }
 const findAllAttributeMetadata = (target) => {
   const actualTarget = target instanceof Function ? target : target.constructor;