@dooboostore/simple-web-component 1.0.31 → 1.0.33

package/README.md

@@ -251,6 +251,35 @@ onAppReady(router: Router) {
 
 Structural Directives allow declarative conditional rendering, list iteration, async handling, and routing with automatic attribute substitution and dynamic expressions.
 
+#### 8.0 **Expression Syntax - Dynamic Evaluation**
+
+SWC supports two types of expression syntax for dynamic value evaluation:
+
+**`{{ }} - Standard Expression Evaluation**
+- Used for boolean conditions and value comparisons
+- Syntax: `{{ expression }}`
+- Example: `{{ $value === 'pending' }}`, `{{ $host.isLoggedIn }}`
+- Context variables: `$value`, `$item`, `$index`, `$host`, `$parentHost`, `$appHost`, etc.
+
+**`{{= }} - Function Call & Return Expression**
+- Evaluates JavaScript expressions and returns result
+- Syntax: `{{= functionCall() }}`  or `{{= computedValue }}`
+- Automatically executes functions and captures return values
+- Example: `{{= $item.name }}`, `{{= $parentHost.getData() }}`, `{{= formatDate($item.date) }}`
+- Used in attributes for dynamic substitution
+- Result is converted to string for DOM attributes
+
+**Context Variables Available in All Directives:**
+- `$value` - the value passed to the template
+- `$host` - the current Web Component instance
+- `$parentHost` - parent component
+- `$appHost` - root application component
+- `$item` - current item (in SwcLoop)
+- `$index` - current index (in SwcLoop)
+- Helper functions - utility methods from `SwcUtils.getHelperAndHostSet()`
+
+---
+
 #### 8.1 **SwcChoose - Multi-Condition Rendering**
 
 Switch-case style conditional rendering with `swc-when` and `swc-otherwise` sub-templates.
@@ -271,17 +300,17 @@ class StatusDisplay extends HTMLElement {
   render() {
     return `
       <template id="status-template" is="swc-choose">
-        <!-- Pending State -->
+        <!-- Pending State: Using {{ }} for condition -->
         <template is="swc-when" value="{{ $value === 'pending' }}">
           <div style="color: orange;">⏳ Processing...</div>
         </template>
         
-        <!-- Success State -->
+        <!-- Success State: Using {{ }} for condition -->
         <template is="swc-when" value="{{ $value === 'success' }}">
           <div style="color: green;">✓ Completed</div>
         </template>
         
-        <!-- Error State -->
+        <!-- Error State: Using {{ }} for condition -->
         <template is="swc-when" value="{{ $value === 'error' }}">
           <div style="color: red;">✗ Failed</div>
         </template>
@@ -296,11 +325,31 @@ class StatusDisplay extends HTMLElement {
 }
 ```
 
-**Features:**
+**Expression Features:**
 - `{{ }} braces` for dynamic condition evaluation
 - `$value` contains the value passed to `swc-choose`
 - `skip-if-same` attribute prevents re-render when same template selected
-- Attribute substitution: `attribute-name="{{ expression }}"` automatically evaluated
+- **Attribute substitution with `{{= }}`**: `attribute-name="{{= expression }}"` automatically evaluated
+  
+**Attribute Substitution Example ({{= }} usage):**
+```html
+<template is="swc-choose">
+  <template is="swc-when" value="{{ $value?.type === 'user' }}">
+    <user-card 
+      data-username="{{= $value?.name }}" 
+      data-email="{{= $value?.email }}"
+      data-id="{{= $value?.id }}"
+    ></user-card>
+  </template>
+  
+  <template is="swc-when" value="{{ $value?.type === 'product' }}">
+    <product-card 
+      data-product-name="{{= $value?.title }}"
+      data-price="{{= $value?.price }}"
+    ></product-card>
+  </template>
+</template>
+```
 
 ---
 
@@ -312,6 +361,7 @@ If-then-else rendering with optional `swc-default` fallback.
 @elementDefine('user-profile')
 class UserProfile extends HTMLElement {
   private isLoggedIn = false;
+  private userData = { userName: 'Alice', userId: 123 };
 
   @setProperty('#content', 'value')
   checkAuth() {
@@ -321,10 +371,15 @@ class UserProfile extends HTMLElement {
   @onConnectedInnerHtml
   render() {
     return `
-      <!-- True condition: renders main template -->
+      <!-- True condition: renders main template using {{ }} -->
       <template id="content" is="swc-if" value="{{ $host.isLoggedIn }}">
+        <!-- Attribute substitution with {{= }} expressions -->
+        <user-card 
+          data-username="{{= $host.userData.userName }}"
+          data-userid="{{= $host.userData.userId }}"
+        ></user-card>
         <div>
-          <h2>Welcome, {{ $host.userName }}</h2>
+          <h2>Welcome, {{ $host.userData.userName }}</h2>
           <button on-click="logout">Logout</button>
         </div>
         
@@ -341,12 +396,13 @@ class UserProfile extends HTMLElement {
 }
 ```
 
-**Features:**
-- Binary true/false logic
+**Expression Features:**
+- Binary true/false logic with `{{ }} condition`
 - Main template renders when `value` is truthy
 - `swc-default` sub-template renders when value is falsy
-- Dynamic attribute substitution supported
+- Dynamic attribute substitution with `{{= }}` supported
 - Access `$host`, `$value`, and other context variables
+- `{{= functionCall() }}` executes functions and returns results for attributes
 
 ---
 
@@ -362,7 +418,7 @@ class DataLoader extends HTMLElement {
   async fetchData() {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
-        resolve({ id: 1, name: 'Sample Data' });
+        resolve({ id: 1, name: 'Sample Data', description: 'API response' });
       }, 2000);
     });
   }
@@ -375,17 +431,23 @@ class DataLoader extends HTMLElement {
   @onConnectedInnerHtml
   render() {
     return `
-      <template id="async-content" is="swc-async" value="{{ $host.fetchData() }}">
+      <template id="async-content" is="swc-async" value="{{= $host.fetchData() }}">
         <!-- Loading State: Shows while Promise is pending -->
         <template is="swc-loading">
           <div>🔄 Loading data...</div>
         </template>
         
         <!-- Success State: Shows when Promise resolves -->
+        <!-- Using {{= }} to extract data from resolved Promise -->
         <template is="swc-success">
+          <data-card
+            data-id="{{= $value.id }}"
+            data-name="{{= $value.name }}"
+          ></data-card>
           <div>
             <p>Data ID: {{ $value.id }}</p>
             <p>Data Name: {{ $value.name }}</p>
+            <p>Description: {{= $value.description }}</p>
           </div>
         </template>
         
@@ -399,12 +461,14 @@ class DataLoader extends HTMLElement {
 }
 ```
 
-**Features:**
-- Automatically manages Promise lifecycle
+**Expression Features:**
+- Promise lifecycle management with `{{ }} conditions`
+- `{{= $host.fetchData() }}` - function call expression that executes and returns Promise
+- `{{= $value.propertyName }}` - extract properties from resolved value
 - `swc-loading` - displays during pending state
-- `swc-success` - displays on successful resolution, `$value` contains result
-- `swc-error` - displays on Promise rejection
-- Dynamic attribute substitution in all states
+- `swc-success` - displays on successful resolution, `$value` contains resolved result
+- `swc-error` - displays on Promise rejection, `$value` contains error
+- Dynamic attribute substitution with `{{= }}` in all states
 - `on-clone-node` and `on-clone-nodes` callbacks for DOM manipulation
 
 ---
@@ -417,9 +481,9 @@ Iterate over arrays and render templates for each item.
 @elementDefine('product-list')
 class ProductList extends HTMLElement {
   private products = [
-    { id: 1, name: 'Laptop', price: 1200 },
-    { id: 2, name: 'Phone', price: 800 },
-    { id: 3, name: 'Tablet', price: 500 }
+    { id: 1, name: 'Laptop', price: 1200, category: 'electronics' },
+    { id: 2, name: 'Phone', price: 800, category: 'electronics' },
+    { id: 3, name: 'Tablet', price: 500, category: 'electronics' }
   ];
 
   @setProperty('#products-list', 'value')
@@ -430,12 +494,26 @@ class ProductList extends HTMLElement {
   @onConnectedInnerHtml
   render() {
     return `
-      <template id="products-list" is="swc-loop" value="{{ $host.products }}">
+      <template id="products-list" is="swc-loop" value="{{= $host.products }}">
+        <!-- Loop iteration with {{ }} for display and {{= }} for attributes -->
         <div style="margin: 10px; padding: 10px; border: 1px solid #ddd;">
+          <!-- Using {{ }} for template content rendering -->
           <h3>{{ $item.name }}</h3>
           <p>Price: ${{ $item.price }}</p>
           <p>ID: {{ $item.id }} (Index: {{ $index }})</p>
-          <button data-id="{{ $item.id }}">Add to Cart</button>
+          
+          <!-- Using {{= }} for dynamic attribute substitution -->
+          <product-card
+            data-product-id="{{= $item.id }}"
+            data-product-name="{{= $item.name }}"
+            data-product-price="{{= $item.price }}"
+            data-product-category="{{= $item.category }}"
+          ></product-card>
+          
+          <!-- Computed expressions with {{= }} -->
+          <button data-id="{{= $item.id }}" data-price="{{= $item.price }}">
+            Add to Cart - \${{= $item.price }}
+          </button>
         </div>
         
         <!-- Empty fallback: renders when array is empty -->
@@ -448,26 +526,76 @@ class ProductList extends HTMLElement {
 }
 ```
 
-**Context variables:**
+**Context Variables (Available in loop):**
 - `$item` - current item in iteration
-- `$index` - zero-based index
-- `$value` - entire array
+- `$index` - zero-based index (0, 1, 2, ...)
+- `$value` - entire array being iterated
 - `$nodes` - cloned DOM nodes
 - `$elements` - cloned HTML elements
 - `$firstElement` - first element in cloned nodes
 
-**Features:**
-- Efficient DOM cloning for each item
+**Expression Features:**
+- `{{= $host.products }}` - function call expression that returns the array to iterate
+- `{{ $item.propertyName }}` - display item properties using standard `{{ }}` 
+- `{{= $item.propertyName }}` - extract item properties for attributes using `{{= }}`
+- `{{= computedValue }}` - compute values in attributes (e.g., calculations, method calls)
 - `swc-default` fallback renders when array is empty
-- All cloned attributes support `{{ }}` substitution
+- All cloned attributes support `{{ }}` and `{{= }}` substitution
 - `on-clone-node` callback fires for each cloned node
 - `on-clone-nodes` callback fires after all nodes cloned
 
+**Common Patterns:**
+```html
+<!-- Template functions with {{= }} -->
+<template is="swc-loop" value="{{= filterProducts($host.products) }}">
+  <!-- Dynamic calculations -->
+  <span>Total: {{= $item.price * $item.quantity }}</span>
+  
+  <!-- Conditional attributes -->
+  <div class="{{= $item.inStock ? 'available' : 'unavailable' }}"></div>
+  
+  <!-- Method calls as attributes -->
+  <button data-formatted="{{= formatPrice($item.price) }}">
+    Buy - {{ formatPrice($item.price) }}
+  </button>
+</template>
+```
+
+**Advanced: replace-wrap for Custom Expression Syntax**
+
+Override default `{{ }}` and `{{= }}` syntax with custom wrappers:
+
+```typescript
+@elementDefine('custom-loop')
+class CustomLoop extends HTMLElement {
+  private items = [{ id: 1, name: 'Item 1' }];
+
+  @onConnectedInnerHtml
+  render() {
+    return `
+      <!-- Using custom wrapper syntax [(= ... )] instead of {{= ... }} -->
+      <template id="items" is="swc-loop" replace-wrap="[(= )]" value="[(= $host.items )]">
+        <div>
+          <p>Name: [(= $item.name )]</p>
+          <button data-id="[(= $item.id )]">Click me</button>
+        </div>
+      </template>
+    `;
+  }
+}
+```
+
+**replace-wrap attribute options:**
+- Change expression wrapper from default `{{= }}` to custom pattern
+- Useful when `{{ }}` conflicts with template engines like EJS or Mustache
+- Supported on: `SwcLoop`, `SwcChoose`, `SwcIf`, `SwcAsync`, `register()` directives
+- Example patterns: `[(= )]`, `{[= ]}`, `<%= %>` (after escaping)
+
 ---
 
 #### 8.5 **Declarative Routing with swc-choose**
 
-Combine `@subscribeSwcAppRouteChange` with `swc-choose` for clean, declarative routing without boilerplate.
+Combine `@subscribeSwcAppRouteChangeWhileConnected` with `swc-choose` for clean, declarative routing without boilerplate.
 
 ```typescript
 @elementDefine('root-router')
@@ -480,23 +608,37 @@ class RootRouter extends HTMLElement {
   }
 
   @setProperty('#router', 'value')
-  @subscribeSwcAppRouteChange(['/', '/product/{id}'])
-  routeChanged(router: RouterEventType) {
-    return router;
+  @subscribeSwcAppRouteChangeWhileConnected(['/', '/users', '/users/{id}', '/products/{id}'])
+  routeChanged(route: RouterEventType) {
+    return route;
+  }
+
+  navigate(path: string): void {
+    this.router?.go(path);
   }
 
   @onConnectedInnerHtml
   render() {
     return `
       <template id="router" is="swc-choose">
-        <!-- Home -->
+        <!-- Home Page: Using {{ }} for condition -->
         <template is="swc-when" value="{{ ['', '/'].includes($value?.path) }}">
           <home-page/>
         </template>
         
-        <!-- Product Detail -->
-        <template is="swc-when" value="{{ $value?.path.startsWith('/product/') }}">
-          <product-page product-id="{{$value?.pathData?.id}}"/>
+        <!-- Users List Page -->
+        <template is="swc-when" value="{{ $value?.path === '/users' }}">
+          <users-list-page/>
+        </template>
+        
+        <!-- User Detail Page: Using {{= }} for dynamic attributes from route params -->
+        <template is="swc-when" value="{{ $value?.path.startsWith('/users/') }}">
+          <user-detail-page user-id="{{= $value?.pathData?.id }}"></user-detail-page>
+        </template>
+        
+        <!-- Product Detail Page: Using {{= }} for dynamic route parameters -->
+        <template is="swc-when" value="{{ $value?.path.startsWith('/products/') }}">
+          <product-detail-page product-id="{{= $value?.pathData?.id }}"></product-detail-page>
         </template>
         
         <!-- Not Found -->
@@ -511,12 +653,107 @@ class RootRouter extends HTMLElement {
 
 **Benefits:**
 - ✅ **No imperative route methods** - routes are declarative templates
-- ✅ **Automatic re-rendering** - attributes like `product-id` update automatically
+- ✅ **Automatic re-rendering** - attributes like `user-id` update automatically
 - ✅ **Performance optimization** - use `skip-if-same` on templates to prevent re-renders
-- ✅ **Dynamic path parameters** - use `{{$value?.pathData?.id}}` syntax to inject route params
+- ✅ **Dynamic path parameters** - use `{{= $value?.pathData?.id }}` syntax to inject route params with `{{= }}`
 - ✅ **Cleaner DX** - single unified routing pattern
+- ✅ **Full expression support** - use `{{= }}` for complex parameter transformations
+
+### 9. **Component Communication - Message Bus**
+
+SWC provides a powerful message bus system for inter-component communication through SwcApp. Components can publish and subscribe to typed messages while connected.
+
+#### @subscribeSwcAppMessageWhileConnected
+Subscribe to messages while component is connected to DOM.
+
+```typescript
+@elementDefine('notification-panel')
+class NotificationPanel extends HTMLElement {
+  @subscribeSwcAppMessageWhileConnected()
+  onAnyMessage(message: SwcAppMessage) {
+    console.log('Received message:', message);
+  }
+
+  @subscribeSwcAppMessageWhileConnected('user-login')
+  onUserLogin(message: SwcAppMessage<{ username: string }>) {
+    console.log(`Welcome ${message.data?.username}`);
+  }
+
+  @subscribeSwcAppMessageWhileConnected('user-login', {
+    filter: (msg) => msg.data?.username === 'admin'
+  })
+  onAdminLogin(message: SwcAppMessage) {
+    console.log('Admin logged in!');
+  }
+}
+```
+
+#### @publishSwcAppMessage
+Publish a message from a method's return value.
+
+```typescript
+@elementDefine('login-form')
+class LoginForm extends HTMLElement {
+  @publishSwcAppMessage()
+  async onSubmit() {
+    const user = await this.authService.login(
+      this.username,
+      this.password
+    );
+    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'
+  }
+}
+```
+
+**SwcAppMessage Structure:**
+```typescript
+type SwcAppMessage<T = any> = {
+  publisher?: any;        // Component that published the message
+  data?: T;              // Payload data
+  type?: string;         // Optional message type/category
+};
+```
+
+**Key Features:**
+- ✅ **Lifecycle-aware** - subscriptions only active while component is connected
+- ✅ **Type-safe** - specify message types for filtering
+- ✅ **Filter support** - use custom filter functions to handle specific conditions
+- ✅ **Auto-publishing** - return value automatically becomes message payload
+- ✅ **Async support** - works with async methods (promises)
+- ✅ **Centralized** - all messages routed through SwcApp host
+- ✅ **Decoupled** - components don't need to know about each other
+
+**Usage Example:**
+```typescript
+// Publisher component
+@elementDefine('product-list')
+class ProductList extends HTMLElement {
+  @publishSwcAppMessage('product-selected')
+  selectProduct(productId: string) {
+    const product = this.findProduct(productId);
+    return product;
+  }
+}
+
+// Subscriber component
+@elementDefine('product-detail')
+class ProductDetail extends HTMLElement {
+  @subscribeSwcAppMessageWhileConnected('product-selected')
+  onProductSelected(message: SwcAppMessage<Product>) {
+    this.displayProduct(message.data);
+  }
+}
+```
+
+---
 
-### 9. **Accommodation Pattern**
+### 10. **Accommodation Pattern**
 Factory-based component registration with explicit DI.
 
 ```typescript
@@ -555,7 +792,7 @@ appElement.connect({
 });
 ```
 
-### 10. **Quickstart - Basic SPA Setup**
+### 11. **Quickstart - Basic SPA Setup**
 
 Complete example of setting up a production SPA with routing, services, and components.
 
@@ -631,7 +868,7 @@ export const serviceFactories = [userServiceFactory];
 #### Step 3. Router Configuration (Declarative with swc-choose)
 ```typescript
 // pages/RootRouter.ts
-import { elementDefine, subscribeSwcAppRouteChange, setProperty, onConnectedInnerHtml, onInitialize } from '@dooboostore/simple-web-component';
+import { elementDefine, subscribeSwcAppRouteChangeWhileConnected, setProperty, onConnectedInnerHtml, onInitialize } from '@dooboostore/simple-web-component';
 import { Router, RouterEventType } from '@dooboostore/core-web';
 
 const rootRouterFactory = (w: Window) => {
@@ -649,7 +886,7 @@ const rootRouterFactory = (w: Window) => {
     }
 
     @setProperty('#router', 'value')
-    @subscribeSwcAppRouteChange(['/', '/users', '/users/{id}'])
+    @subscribeSwcAppRouteChangeWhileConnected(['/', '/users', '/users/{id}'])
     routeChanged(route: RouterEventType) {
       return route;
     }
@@ -933,7 +1170,7 @@ src/
 3. `bootFactory` registers services and components (including `rootRouterFactory`)
 4. App waits for `swc-app-body` to be defined
 5. `appElement.connect()` initializes routing & DI
-6. `<root-router>` becomes active with `@subscribeSwcAppRouteChange` + `swc-choose` template
+6. `<root-router>` becomes active with `@subscribeSwcAppRouteChangeWhileConnected` + `swc-choose` template
 7. Route changes automatically trigger `swc-choose` re-evaluation and template re-rendering
 8. Template attributes like `user-id="{{$value?.pathData?.id}}"` are dynamically populated with route params
 9. All components have access to injected services via `@onInitialize` or `@onConnectedSwcApp`

package/dist/cjs/decorators/applyStyle.js

@@ -50,7 +50,7 @@ function createStyleDecorator(action) {
         if (res !== void 0) {
           const win = this.ownerDocument?.defaultView || window;
           const host = this;
-          const hostSet = { ...import_Utils.SwcUtils.getHelperAndHostSet(win, host), $this: this };
+          const hostSet = import_Utils.SwcUtils.getHelperAndHostSet(win, host);
           const r = options.root || "auto";
           const targetEls = [];
           const applyRoot = (t) => {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/applyStyle.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SwcQueryOptions, HelperHostSet } from '../types';\n\nexport type StyleAction = 'set' | 'update' | 'remove';\n\nexport interface StyleApplyOptions extends SwcQueryOptions {}\n\nexport interface StyleApplyMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  action: StyleAction;\n  options: StyleApplyOptions;\n}\n\nexport const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');\n\nfunction createStyleDecorator(action: StyleAction) {\n  return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {\n    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n      const constructor = target.constructor;\n      let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;\n      if (!metaList) {\n        metaList = new Map<string | symbol, StyleApplyMetadata>();\n        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);\n      }\n      metaList.set(propertyKey, { propertyKey, selector, action, options });\n\n      const original = descriptor.value;\n      descriptor.value = async function (...args: any[]) {\n        ensureInit(this);\n        const res = await (original as any).apply(this, args);\n        if (res !== undefined) {\n          const win = (this as any).ownerDocument?.defaultView || window;\n          const host = this as unknown as HTMLElement;\n          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };\n          const r = options.root || 'auto';\n          const targetEls: HTMLElement[] = [];\n\n          const applyRoot = (t: any) => {\n            if (!t || !(t instanceof win.HTMLElement)) return;\n            targetEls.push(t);\n          };\n\n          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n          else if (selector === ':appHost') applyRoot(hostSet.$appHost);\n          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);\n          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);\n          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);\n          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);\n          else if (selector === ':host' || !selector) applyRoot(host);\n          else {\n            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);\n            if (targetRoot) {\n                const found = targetRoot.querySelectorAll(selector);\n                if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));\n            }\n          }\n\n          targetEls.forEach(targetEl => {\n            const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;\n\n            if (action === 'set' || action === 'update') {\n              if (action === 'set') targetEl.style.cssText = '';\n              \n              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n                Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n                  const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;\n                  if (finalVal === null || finalVal === undefined) {\n                    targetEl.style.removeProperty(prop);\n                  } else {\n                    targetEl.style[prop as any] = String(finalVal);\n                  }\n                });\n              } else if (typeof resolvedRes === 'string') {\n                targetEl.style.cssText = resolvedRes;\n              }\n            } else if (action === 'remove') {\n              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n                Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n                  const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;\n                  if (shouldRemove) {\n                    targetEl.style.removeProperty(prop);\n                  }\n                });\n              } else {\n                const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];\n                props.forEach(p => targetEl.style.removeProperty(String(p)));\n              }\n            }\n          });\n        }\n        return res;\n      };\n      return descriptor;\n    };\n  };\n}\n\nexport function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n  return createStyleDecorator(action)(selector, options);\n}\n\nexport const setStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('set')(selector, options);\nexport const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);\nexport const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);\n\n// Host versions\nexport function applyStyleHost(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n  return createStyleDecorator(action)(':host', options);\n}\nexport const setStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('set')(':host', options);\nexport const updateStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('update')(':host', options);\nexport const removeStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')(':host', options);\n\nexport const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {\n  const result = new Map<string | symbol, StyleApplyMetadata>();\n  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleApplyMetadata>>(STYLE_METADATA_KEY, target);\n  maps.forEach(map => {\n    if (map instanceof Map) {\n      map.forEach((v, k) => result.set(k, v));\n    }\n  });\n  return result;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { ensureInit } from './elementDefine';\nimport { SwcUtils } from '../utils/Utils';\nimport { SwcQueryOptions, HelperHostSet } from '../types';\n\nexport type StyleAction = 'set' | 'update' | 'remove';\n\nexport interface StyleApplyOptions extends SwcQueryOptions {}\n\nexport interface StyleApplyMetadata {\n  propertyKey: string | symbol;\n  selector: string;\n  action: StyleAction;\n  options: StyleApplyOptions;\n}\n\nexport const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');\n\nfunction createStyleDecorator(action: StyleAction) {\n  return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {\n    return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n      const constructor = target.constructor;\n      let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;\n      if (!metaList) {\n        metaList = new Map<string | symbol, StyleApplyMetadata>();\n        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);\n      }\n      metaList.set(propertyKey, { propertyKey, selector, action, options });\n\n      const original = descriptor.value;\n      descriptor.value = async function (...args: any[]) {\n        ensureInit(this);\n        const res = await (original as any).apply(this, args);\n        if (res !== undefined) {\n          const win = (this as any).ownerDocument?.defaultView || window;\n          const host = this as unknown as HTMLElement;\n          const hostSet = SwcUtils.getHelperAndHostSet(win, host);\n          const r = options.root || 'auto';\n          const targetEls: HTMLElement[] = [];\n\n          const applyRoot = (t: any) => {\n            if (!t || !(t instanceof win.HTMLElement)) return;\n            targetEls.push(t);\n          };\n\n          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);\n          else if (selector === ':appHost') applyRoot(hostSet.$appHost);\n          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);\n          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);\n          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);\n          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);\n          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);\n          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);\n          else if (selector === ':host' || !selector) applyRoot(host);\n          else {\n            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);\n            if (targetRoot) {\n                const found = targetRoot.querySelectorAll(selector);\n                if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));\n            }\n          }\n\n          targetEls.forEach(targetEl => {\n            const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;\n\n            if (action === 'set' || action === 'update') {\n              if (action === 'set') targetEl.style.cssText = '';\n              \n              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n                Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n                  const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;\n                  if (finalVal === null || finalVal === undefined) {\n                    targetEl.style.removeProperty(prop);\n                  } else {\n                    targetEl.style[prop as any] = String(finalVal);\n                  }\n                });\n              } else if (typeof resolvedRes === 'string') {\n                targetEl.style.cssText = resolvedRes;\n              }\n            } else if (action === 'remove') {\n              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {\n                Object.entries(resolvedRes as any).forEach(([prop, val]) => {\n                  const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;\n                  if (shouldRemove) {\n                    targetEl.style.removeProperty(prop);\n                  }\n                });\n              } else {\n                const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];\n                props.forEach(p => targetEl.style.removeProperty(String(p)));\n              }\n            }\n          });\n        }\n        return res;\n      };\n      return descriptor;\n    };\n  };\n}\n\nexport function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n  return createStyleDecorator(action)(selector, options);\n}\n\nexport const setStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('set')(selector, options);\nexport const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);\nexport const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);\n\n// Host versions\nexport function applyStyleHost(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {\n  return createStyleDecorator(action)(':host', options);\n}\nexport const setStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('set')(':host', options);\nexport const updateStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('update')(':host', options);\nexport const removeStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')(':host', options);\n\nexport const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {\n  const result = new Map<string | symbol, StyleApplyMetadata>();\n  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleApplyMetadata>>(STYLE_METADATA_KEY, target);\n  maps.forEach(map => {\n    if (map instanceof Map) {\n      map.forEach((v, k) => result.set(k, v));\n    }\n  });\n  return result;\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/decorators/attribute.js

@@ -27,6 +27,7 @@ module.exports = __toCommonJS(attribute_exports);
 var import_core = require("@dooboostore/core");
 var import_elementDefine = require("./elementDefine");
 var import_Utils = require("../utils/Utils");
+var import_core_web = require("@dooboostore/core-web");
 const ATTRIBUTE_FIELD_METADATA_KEY = Symbol.for("simple-web-component:attribute-field");
 const convertValue = (val, type) => {
   if (val === null || val === void 0) return val;
@@ -115,7 +116,22 @@ function attribute(selector, options = {}) {
           const primaryTarget = targets[0];
           if (primaryTarget && typeof primaryTarget.hasAttribute === "function") {
             if (primaryTarget.hasAttribute(attrName)) {
-              const domVal = primaryTarget.getAttribute(attrName);
+              let domVal = primaryTarget.getAttribute(attrName);
+              const ae = new import_core.ActionExpression(domVal);
+              const expr = ae.getFirstExpression("call-return");
+              if (expr) {
+                try {
+                  const result = import_core.FunctionUtils.executeReturn({
+                    script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
+                    context: this,
+                    args: import_Utils.SwcUtils.getHelperAndHostSet(currentWin, this)
+                  });
+                  return convertValue(result, targetType);
+                } catch (e) {
+                  console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+                  return convertValue(domVal, targetType);
+                }
+              }
               return convertValue(domVal, targetType);
             }
             return null;