@dooboostore/simple-web-component 1.0.42 → 1.0.44

package/README.md

@@ -70,18 +70,14 @@ replaceChildren(node: Node) {
 ```
 ### 3.5 **Slot Management with @applySlot**
 
-Manage dynamic content insertion into named slots using the `@applySlot` decorator. Slots are placeholders in templates that can be updated dynamically.
+Manage dynamic content insertion into named slots using slot decorators. Slots are placeholders in templates that can be updated dynamically.
 
 ```typescript
-import {clearSlot} from "./applySlot";
-
 @elementDefine('content-manager')
 class ContentManager extends HTMLElement {
-
-
   // Method: Replace children in slot with HTML
   @addEventListener('.update-btn', 'click')
-  @replaceChildrenSlot('main-content')
+  @replaceChildrenHtmlSlot('main-content')
   updateContent() {
     return '<div>Updated content here</div>';
   }
@@ -105,7 +101,6 @@ class ContentManager extends HTMLElement {
     return true;
   }
 
-
   @onConnectedLight
   render() {
     return `
@@ -130,17 +125,13 @@ class ContentManager extends HTMLElement {
 - `<!--[[ slot-id ]]-->` - Named slot placeholder (HTML comment syntax)
 
 **@applySlot Decorator Variants:**
-- clearSlot
-- prependHtmlSlot
-- prependSlot
-- prependTextSlot
-- appendHtmlSlot
-- appendTextSlot
-- appendSlot
-- replaceChildrenHtmlSlot
-- replaceChildrenSlot
-- replaceChildrenTextSlot
-
+- `clearSlot(slotId)` - Clear all content
+- `prependHtmlSlot(slotId)` - Add HTML at beginning
+- `prependTextSlot(slotId)` - Add text at beginning
+- `appendHtmlSlot(slotId)` - Add HTML at end
+- `appendTextSlot(slotId)` - Add text at end
+- `replaceChildrenHtmlSlot(slotId)` - Replace all with HTML
+- `replaceChildrenTextSlot(slotId)` - Replace all with text
 
 **Position Options:**
 ```typescript
@@ -207,7 +198,7 @@ class CounterApp extends HTMLElement {
 
 **State Syntax in Templates:**
 
-**Reading State Values:**
+**Reading State Values(read only):**
 - `@stateName@` - Read state value as text/attribute
 - `@stateName@()` - Call state property as function (if it's a function)
 - `@expression@` - Evaluate expressions with state variables
@@ -231,6 +222,23 @@ class CounterApp extends HTMLElement {
 - `@expression@` - Evaluate JavaScript expressions
 - All state variables available in template expressions
 
+**Important: State Properties are Read-Only in Templates**
+State values accessed in templates via `@stateName@` syntax are read-only. You cannot assign values to state properties from within template expressions. State must be updated from component methods:
+
+```typescript
+// ✅ CORRECT - Update state from method
+@addEventListener('button', 'click')
+increment() {
+  this.count++;  // Direct property assignment in code
+}
+
+// ❌ WRONG - Cannot assign in template
+<!--[text @count = 5@ ]-->  // This won't work - read-only in templates
+
+// ✅ CORRECT - Call method from template
+<button e:click="@increment@()">Increment</button>
+```
+
 **Advanced Example:**
 ```typescript
 @elementDefine('user-profile')
@@ -288,16 +296,21 @@ onCriticalClick(event: Event) {
 }
 ```
 
-**other Event decorators**
-- addEventListenerDelegateLightDom
-- addEventListenerDelegateShadowDom
-- addEventListenerDelegateAllDom
-- addEventListenerDelegate
-- addEventListenerThis
-- addEventListenerAppHost
-- addEventListenerWindow
-- addEventListenerDocument
-
+**@addEventListener Decorator Variants:**
+- `addEventListener(selector, type, options)` - Full form
+- `event(selector, type, options)` - Short alias
+- `addEventListenerThis(type, options)` - Listen on $this element
+- `addEventListenerAppHost(type, options)` - Listen on $appHost
+- `addEventListenerWindow(type, options)` - Listen on window
+- `addEventListenerDocument(type, options)` - Listen on document
+- `addEventListenerDelegate(selector, type, options)` - Event delegation
+- `eventDelegate(selector, type, options)` - Short alias
+- `addEventListenerDelegateLightDom(selector, type, options)` - Delegate in light DOM
+- `eventDelegateLightDom(selector, type, options)` - Short alias
+- `addEventListenerDelegateShadowDom(selector, type, options)` - Delegate in shadow DOM
+- `eventDelegateShadowDom(selector, type, options)` - Short alias
+- `addEventListenerDelegateAllDom(selector, type, options)` - Delegate in all DOM
+- `eventDelegateAllDom(selector, type, options)` - Short alias
 
 #### @emitCustomEvent
 Emit custom events with data.
@@ -310,6 +323,50 @@ async onLogin() {
 }
 ```
 
+**@emitCustomEvent Decorator Variants:**
+- `emitCustomEvent(target, type, options)` - Full form
+- `emit(target, type, options)` - Short alias
+- `emitCustomEventThis(type, options)` - Emit from $this element
+
+#### @publishSwcAppMessage
+Publish messages through the message bus when method completes.
+
+```typescript
+@publishSwcAppMessage()
+async onLogin() {
+  const user = await this.authService.login();
+  return user;  // Published as message with data: user
+}
+
+@publishSwcAppMessage('user-profile-updated')
+updateProfile() {
+  const profile = { name: this.name, email: this.email };
+  return profile;  // Published as message with type: 'user-profile-updated'
+}
+```
+
+**@publishSwcAppMessage Decorator Variants:**
+- `publishSwcAppMessage()` - Publish without message type
+- `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
+
+**Using valueKey for Multiple Decorators:**
+
+```typescript
+@publishSwcAppMessage('event1', { valueKey: 'detail1' })
+@publishSwcAppMessage('event2', { valueKey: 'detail2' })
+handleMultipleEvents() {
+  return {
+    detail1: { type: 'event1', data: 'value1' },
+    detail2: { type: 'event2', data: 'value2' }
+  };
+}
+```
+
 #### @emitCustomEventThis
 Emit events from a method with custom event name mapping.
 
@@ -321,7 +378,7 @@ onNavClick(e: any) {
 ```
 
 #### @addEventListenerThis
-Listen to events on the component element itself (`@host` selector).
+Listen to events on the component element itself (`$this` selector).
 
 ```typescript
 @addEventListenerThis('click')
@@ -395,55 +452,366 @@ 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('data-id')
-resourceId: string;  // element attribute first 
+  // Attribute name on selector
+  @attribute('#user', 'data-id')
+  userId: string;
+
+  // Bare decorator (uses field name as attribute)
+  @attribute
+  title: string;
+
+  @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. **Lifecycle Hooks**
+**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
-@onConnected
-onConnected() {
-  // Called when element enters DOM
+@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)
 
-@onDisconnected
-onDisconnected() {
-  // Called when element leaves 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.
 
-@onConnectedBefore
-onAppReady(router: Router) {
-  // Called after SwcApp.connect() completes on all already-connected components
-  // Full DI support available through hostSet
-  console.log('Application initialization complete!');
+```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;
+  }
 }
 ```
 
-### 8. **Structural Directives**
+**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.
+
+```typescript
+@elementDefine('content-updater')
+class ContentUpdater extends HTMLElement {
+  @addEventListener('button', 'click')
+  @replaceChildrenNode()
+  updateContent() {
+    return `<div>New content</div>`;
+  }
+
+  @addEventListener('.append-btn', 'click')
+  @beforeEndNode()
+  appendContent() {
+    return `<p>Appended content</p>`;
+  }
+
+  @addEventListener('.prepend-btn', 'click')
+  @afterBeginNode()
+  prependContent() {
+    return `<p>Prepended content</p>`;
+  }
+
+  @onConnectedLight
+  render() {
+    return `
+      <div>
+        <button class="append-btn">Append</button>
+        <button class="prepend-btn">Prepend</button>
+        <button>Replace</button>
+      </div>
+    `;
+  }
+}
+```
+
+**@applyNode Decorator Variants:**
+- `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
+export type ApplyNodePosition = 
+  | 'beforeBegin'      // Before element
+  | 'afterBegin'       // After element opens
+  | 'beforeEnd'        // Before element closes
+  | 'afterEnd'         // After element closes
+  | 'replace'          // Replace element
+  | 'replaceChildren'  // Replace children
+  | 'innerHtml'        // Set innerHTML
+  | 'innerText'        // Set innerText
+  | 'remove';          // Remove element
+```
+
+### 8. **Style & Class Management**
+
+Apply styles and classes dynamically with `@applyStyle` and `@applyClass`.
+
+```typescript
+@elementDefine('styled-component')
+class StyledComponent extends HTMLElement {
+  @state('isActive')
+  isActive = false;
+
+  @addEventListener('button', 'click')
+  @updateStyle()
+  toggleStyle() {
+    return {
+      color: this.isActive ? 'green' : 'red',
+      fontSize: '16px'
+    };
+  }
+
+  @addEventListener('.toggle-btn', 'click')
+  @updateClass()
+  toggleClass() {
+    return {
+      'active': this.isActive,
+      'disabled': !this.isActive
+    };
+  }
+
+  @onConnectedLight
+  render() {
+    return `
+      <div>
+        <button class="toggle-btn">Toggle</button>
+        <button>Update Style</button>
+      </div>
+    `;
+  }
+}
+```
+
+**@applyStyle Variants:**
+- `setStyleThis()` - Clear and set styles
+- `updateStyleThis()` - Update/merge styles
+- `removeStyleThis()` - Remove specific styles
+
+**@applyClass Variants:**
+- `setClassThis()` - Replace all classes
+- `updateClassThis()` - Toggle classes
+- `addClassThis()` - Add classes
+- `removeClassThis()` - Remove classes
+- `toggleClassThis()` - Toggle classes
+
+### 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.
+
+```typescript
+@elementDefine('my-component')
+class MyComponent extends HTMLElement {
+  @onInitialize({ order: 0 })
+  onInit() {
+    // Called during component construction
+    console.log('Component initialized');
+  }
+
+  @onConnectedBefore({ order: 0 })
+  beforeConnected() {
+    // Called before element connects to DOM
+  }
+
+  @onConnectedAfter({ order: 1 })
+  afterConnected() {
+    // Called after element connects to DOM
+  }
+
+  @onConnected
+  onConnected() {
+    // Called when element enters DOM
+  }
+
+  @onDisconnectedBefore
+  beforeDisconnected() {
+    // Called before element disconnects from DOM
+  }
+
+  @onDisconnected
+  onDisconnected() {
+    // Called when element leaves DOM
+  }
+
+  @onAdoptedBefore
+  beforeAdopted() {
+    // Called before element is adopted into new document
+  }
+
+  @onAdopted
+  onAdopted() {
+    // Called when element is adopted into new document
+  }
+
+  @onConnectedSwcApp({ order: 0 })
+  onSwcAppConnected() {
+    // Called after SwcApp.connect() completes
+    // Full DI support available through hostSet
+  }
+
+  @onConnectedCompleted({ order: 0 })
+  onConnectedCompleted() {
+    // Called after all connected lifecycle hooks complete
+  }
+}
+```
+
+**Lifecycle Execution Order:**
+- `@onInitialize` - Component construction
+- `@onConnectedBefore` - Before DOM connection
+- `@onConnectedAfter` - After DOM connection
+- `@onConnected` - DOM connection (with HTML rendering)
+- `@onConnectedSwcApp` - After SwcApp initialization
+- `@onConnectedCompleted` - All connected hooks done
+- `@onDisconnectedBefore` - Before DOM disconnection
+- `@onDisconnected` - DOM disconnection
+- `@onAdoptedBefore` - Before document adoption
+- `@onAdopted` - Document adoption
+
+**Order Parameter:**
+All lifecycle decorators support `order?: number` for controlling execution sequence:
+```typescript
+@onConnectedBefore({ order: 0 })  // Runs first
+onFirst() { }
+
+@onConnectedBefore({ order: 1 })  // Runs second
+onSecond() { }
+```
+
+### 9. **Structural Directives**
 
 Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
 
@@ -528,6 +896,28 @@ class LoginForm extends HTMLElement {
 }
 ```
 
+**@publishSwcAppMessage Decorator Variants:**
+- `publishSwcAppMessage()` - Publish without message type
+- `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
+- `publishMessage()` - Short alias
+- `publishMessage(messageType)` - Short alias with message type
+- `publishMessage(messageType, options)` - Short alias with options
+
+**Using valueKey for Multiple Decorators:**
+
+```typescript
+@publishSwcAppMessage('event1', { valueKey: 'detail1' })
+@publishSwcAppMessage('event2', { valueKey: 'detail2' })
+handleMultipleEvents() {
+  return {
+    detail1: { type: 'event1', data: 'value1' },
+    detail2: { type: 'event2', data: 'value2' }
+  };
+}
+```
+
 **SwcAppMessage Structure:**
 ```typescript
 type SwcAppMessage<T = any> = {
@@ -570,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.
 
@@ -647,17 +1037,15 @@ w.document.addEventListener('DOMContentLoaded', async () => {
 
 ```typescript
 // Component factory
-import {defineSwcApp} from "./SwcApp";
-
 export default (w: Window) => {
   const tagName = 'my-component';
   const existing = w.customElements.get(tagName);
   if (existing) return tagName;
 
-  @elementDefine(tagName, {window: w})
+  @elementDefine(tagName, { window: w })
   class MyComponent extends w.HTMLElement {
     @onInitialize
-    onconstructor(service: MyService) {
+    onconstructor(@inject(MyService.SYMBOL) service: MyService) {
       this.service = service;
     }
   }
@@ -672,7 +1060,7 @@ export default (w: Window, container: symbol) => {
 
 // Entry point
 const container = Symbol('app');
-await defineSwcAppBody(w)
+await defineSwcAppBody(w);
 const appElement = w.document.querySelector('#app') as SwcAppInterface;
 appElement.connect({
   container,
@@ -684,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.
 
@@ -723,10 +1111,11 @@ class RootRouter extends HTMLElement {
 #### Route Handler Features
 
 **1. Path Matching**
-- Exact match: `['', '/']` - matches home route
-- Prefix match: `['/products']` - matches `/products` and `/products/...`
-- Dynamic segments: `['/product/{id}']` - captures `id` parameter
-- Wildcard: `['/{tail:.*}']` - matches any remaining path (use for 404)
+- **No path pattern** (omit path): `@subscribeSwcAppRouteChangeWhileConnected({ order: -1 })` - matches all routes
+- **Exact match**: `['', '/']` - matches home route only
+- **Prefix match**: `['/products']` - matches `/products` and `/products/...`
+- **Dynamic segments**: `['/product/{id}']` - captures `id` parameter
+- **Wildcard**: `['/{tail:.*}']` - matches any remaining path (use for 404)
 
 **2. Order-Based Execution**
 Routes are executed in order of `order` value (lowest first). First matching route with a return value stops propagation:
@@ -750,7 +1139,7 @@ handleAdmin(routerPathSet: RouterEventType) {
 }
 
 // This handler continues propagation (no return value)
-@subscribeSwcAppRouteChangeWhileConnected(['{other:.*}'], { order: -1 })
+@subscribeSwcAppRouteChangeWhileConnected({ order: -1 })
 onRouteChange(routerPathSet: RouterEventType) {
   console.log('Route changed:', routerPathSet.path);
   // No return value → continues to next handler
@@ -762,8 +1151,8 @@ onRouteChange(routerPathSet: RouterEventType) {
 ```typescript
 @elementDefine('accommodation-router')
 class AccommodationRouter extends HTMLElement {
-  // Global route logger (order: -1 runs first, no return value)
-  @subscribeSwcAppRouteChangeWhileConnected(['*'], { order: -1 })
+  // Global route logger (order: -1 runs first, no path pattern = matches all routes)
+  @subscribeSwcAppRouteChangeWhileConnected({ order: -1 })
   onRouteChange(routerPathSet: RouterEventType) {
     console.log('[Route Change]', {
       path: routerPathSet.path,
@@ -851,37 +1240,252 @@ URL: /product/123
 pathData: { id: '123' }
 ```
 
+#### Multiple Decorators with Shared Return Value
+
+When using multiple decorators on the same method, each decorator can extract its own value from the return object using its symbol key or custom `valueKey` option.
+
+**How It Works:**
+1. Each decorator has a default symbol key (e.g., `ATTRIBUTE_METADATA_KEY`, `PROPERTY_METADATA_KEY`)
+2. When a method returns an object, each decorator checks if its key exists in the object
+3. If the key exists, the decorator uses that value; otherwise uses the entire return value
+4. This allows multiple decorators to extract different values from the same return object
+
+**Method 1: Using Default Symbol Keys**
+
+```typescript
+import {
+  ATTRIBUTE_METADATA_KEY,
+  PROPERTY_METADATA_KEY,
+  STYLE_METADATA_KEY,
+  CLASS_METADATA_KEY
+} from '@dooboostore/simple-web-component';
+
+@elementDefine('multi-decorator-example')
+class MultiDecoratorExample extends HTMLElement {
+  @setAttribute('selector')
+  @setProperty('selector')
+  @updateStyle()
+  @updateClass()
+  handleUpdate() {
+    return {
+      [ATTRIBUTE_METADATA_KEY]: 'attribute-value',
+      [PROPERTY_METADATA_KEY]: 'property-value',
+      [STYLE_METADATA_KEY]: { color: 'red', fontSize: '16px' },
+      [CLASS_METADATA_KEY]: { 'active': true, 'disabled': false }
+    };
+  }
+}
+```
+
+**Method 2: Using Custom valueKey Option**
+
+For more readable code, use the `valueKey` option to specify custom keys:
+
+```typescript
+@elementDefine('custom-key-example')
+class CustomKeyExample extends HTMLElement {
+  @setAttribute('selector', { valueKey: 'attrValue' })
+  @setProperty('selector', { valueKey: 'propValue' })
+  @updateStyle({ valueKey: 'styleValue' })
+  @updateClass({ valueKey: 'classValue' })
+  handleUpdate() {
+    return {
+      attrValue: 'attribute-value',
+      propValue: 'property-value',
+      styleValue: { color: 'red', fontSize: '16px' },
+      classValue: { 'active': true, 'disabled': false }
+    };
+  }
+}
+```
+
+**Method 3: Mixing Symbol Keys and Custom Keys**
+
+You can mix both approaches in the same method:
+
+```typescript
+@elementDefine('mixed-keys-example')
+class MixedKeysExample extends HTMLElement {
+  @setAttribute('selector')  // Uses default ATTRIBUTE_METADATA_KEY
+  @setProperty('selector', { valueKey: 'customProp' })  // Uses custom key
+  @updateStyle({ valueKey: 'styles' })  // Uses custom key
+  handleUpdate() {
+    return {
+      [ATTRIBUTE_METADATA_KEY]: 'attr-value',
+      customProp: 'prop-value',
+      styles: { color: 'blue' }
+    };
+  }
+}
+```
+
+**Supported Decorators with valueKey:**
+- `@applyAttribute` / `@setAttribute`
+- `@applyProperty` / `@setProperty`
+- `@applySlot` / `@clearSlot` / `@appendHtmlSlot` / etc.
+- `@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
 // Component factory
-import {SwcUtils, createElement, CreateElementConfig} from '@dooboostore/simple-web-component';
-const tagName = 'my-component';
-export interface MyComponent extends HTMLElement {
-  value: string;
-}
-export const MyComponent = (w: Window|Document, data?: CreateElementConfig) => {
-  return createElement<HTMLElement>(w, tagName, data);
-};
 export default (w: Window) => {
+  const tagName = 'my-component';
   const existing = w.customElements.get(tagName);
-  if (existing) return existing;
+  if (existing) return tagName;
 
   @elementDefine(tagName, { window: w })
-  class MyComponentImp extends w.HTMLElement implements MyComponent{
-    value: string = 'value';
+  class MyComponent extends w.HTMLElement {
     @onInitialize
-    onconstructor(service: MyService) {
+    onconstructor(@inject(MyService.SYMBOL) service: MyService) {
       this.service = service;
     }
   }
-  return w.customElements.whenDefined(swcAppTagName);
+
+  return tagName;
+};
+
+// Boot factory
+export default (w: Window, container: symbol) => {
+  serviceFactories.forEach(s => s(container));
 };
 
+// Entry point
+const container = Symbol('app');
+await defineSwcAppBody(w);
+const appElement = w.document.querySelector('#app') as SwcAppInterface;
+appElement.connect({
+  container,
+  window: w,
+  onStartedLazyDefineComponent: [...pageFactories, ...componentFactories],
+  onEngineStarted: () => {
+    appElement.innerHTML = '<root-router></root-router>';
+  }
+});
+```
+---
+
+## 🔄 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