@dooboostore/simple-web-component 1.0.33 → 1.0.34

package/src/decorators/attribute.ts

@@ -1,7 +1,7 @@
-import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
-import {ensureInit, getElementConfig} from './elementDefine';
-import {SwcUtils} from '../utils/Utils';
-import {SpecialSelector, SwcQueryOptions} from '../types';
+import { ReflectUtils, FunctionUtils, ActionExpression } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SpecialSelector, SwcQueryOptions } from '../types';
 import { ConvertUtils } from '@dooboostore/core-web';
 export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
@@ -25,6 +25,44 @@ const convertValue = (val: string | null, type: any): any => {
   return val;
 };
 
+export { convertValue };
+
+export const getAttributeValue = (inst: any, attrName: string, options?: AttributeFieldOptions & { selector?: string }): any => {
+  const conf = getElementConfig(inst);
+  const currentWin = inst._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+
+  // If selector is not provided, use inst itself
+  const targets = options?.selector ? resolveTargetEls(inst, options.selector, options, currentWin) : [inst];
+
+  const primaryTarget = targets[0];
+
+  if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function' && (primaryTarget as any).hasAttribute(attrName)) {
+    let domVal = (primaryTarget as any).getAttribute(attrName);
+
+    // 표현식 체크
+    const ae = new ActionExpression(domVal);
+    const expr = ae.getFirstExpression('call-return');
+    if (expr) {
+      try {
+        const result = FunctionUtils.executeReturn({
+          script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
+          context: inst,
+          args: SwcUtils.getHelperAndHostSet(currentWin, inst)
+        });
+        return convertValue(result, options?.type);
+      } catch (e) {
+        console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+        return convertValue(domVal, options?.type);
+      }
+    }
+
+    return convertValue(domVal, options?.type);
+  }
+
+  // If no target found, return null
+  return null;
+};
+
 export const resolveTargetEls = (inst: any, selector: string, options: AttributeFieldOptions, currentWin: any): HTMLElement[] => {
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
@@ -89,7 +127,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       metaList = [];
       ReflectUtils.defineMetadata(ATTRIBUTE_FIELD_METADATA_KEY, metaList, constructor);
     }
-    metaList.push({propertyKey, selector, options, privateKey});
+    metaList.push({ propertyKey, selector, options, privateKey });
 
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
       targets.forEach(it => {
@@ -111,45 +149,20 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       // delete target[propertyKey];
 
       // const defineTarget = target instanceof Function ? target : (target as any).constructor;
-      
+
       Object.defineProperty(target, propertyKey, {
         get(this: any) {
           const attrName = options.name || String(propertyKey);
-          const conf = getElementConfig(this);
-          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
-          const targetType = options.type || designType;
 
-          const targets = resolveTargetEls(this, selector, options, currentWin);
-          const primaryTarget = targets[0];
-
-          if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
-            if ((primaryTarget as any).hasAttribute(attrName)) {
-              let domVal = (primaryTarget as any).getAttribute(attrName);
-              
-              // 표현식 체크
-              const ae = new ActionExpression(domVal);
-              const expr = ae.getFirstExpression('call-return');
-              if (expr) {
-                try {
-                  const result = FunctionUtils.executeReturn({
-                    script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
-                    context: this,
-                    args: 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;
-          }
+          // Merge designType fallback into options once
+          const mergedOptions = {
+            ...options,
+            selector,
+            type: options.type || designType
+          };
 
-          const data = convertValue(this[privateKey], targetType);
-          return data;
+          const result = getAttributeValue(this, attrName, mergedOptions);
+          return result !== null ? result : this[privateKey];
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;
@@ -158,7 +171,6 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
-
           // if (!this.__swc_connected) {
           //   this[privateKey] = nv;
           //   return;
@@ -170,9 +182,9 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
         enumerable: true,
         configurable: true
       });
-  } catch (err) {
-    console.error('[SWC] defineProperty error:', err);
-  }
+    } catch (err) {
+      console.error('[SWC] defineProperty error:', err);
+    }
   };
 }
 

package/src/decorators/changedAttributeHost.ts

@@ -2,34 +2,67 @@ import {ReflectUtils} from '@dooboostore/core';
 
 export const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');
 
+export interface ChangedAttributeHostOptions {
+  type?: typeof Number | typeof Boolean | typeof String;
+}
+
+export interface ChangedAttributeHostMetadata {
+  attributeName: string;
+  propertyKey: string | symbol;
+  options: ChangedAttributeHostOptions;
+}
+
+const convertValue = (val: any, type: any): any => {
+  if (val === null || val === undefined) return val;
+  if (type === Number) return Number(val);
+  if (type === Boolean) return val === 'false' || val === '0' ? false : true;
+  return val;
+};
+
 /**
  * @changedAttributeHost decorator - fires when any attribute on :host changes
  * Usage: @changedAttributeHost('data-product-id')
+ *        @changedAttributeHost('count', { type: Number })
  */
-export function changedAttributeHost(attributeName?: string): MethodDecorator {
+export function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as Map<string, (string | symbol)[]>;
-    if (!meta) {
-      meta = new Map<string, (string | symbol)[]>();
-      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
     }
 
     const name = attributeName || String(propertyKey);
-    let methods = meta.get(name);
-    if (!methods) {
-      methods = [];
-      meta.set(name, methods);
-    }
-    if (!methods.includes(propertyKey)) methods.push(propertyKey);
+    metaList.push({
+      attributeName: name,
+      propertyKey,
+      options
+    });
   };
 }
 
-export const getChangedAttributeMetadata = (target: any): Map<string, (string | symbol)[]> | undefined => {
+export const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
 };
 
-export const findAllAttributeChangedMetadata = (target: any): Map<string, (string | symbol)[]> => {
-  return ReflectUtils.findAllMapMetadata<string, string | symbol>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, target);
+export const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+  
+  const result = new Map<string, ChangedAttributeHostMetadata[]>();
+  metaList.forEach(meta => {
+    meta.forEach(item => {
+      if (!result.has(item.attributeName)) {
+        result.set(item.attributeName, []);
+      }
+      result.get(item.attributeName)!.push(item);
+    });
+  });
+  return result;
+};
+
+export const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {
+  return convertValue(val, type);
 };

package/src/decorators/elementDefine.ts

@@ -2,7 +2,7 @@ import { ReflectUtils, FunctionUtils, ActionExpression } from '@dooboostore/core
 import { getAddEventListenerMetadata } from './addEventListener';
 import { ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
-import { findAllAttributeChangedMetadata } from './changedAttributeHost';
+import { findAllAttributeChangedMetadata, convertAttributeValue } from './changedAttributeHost';
 import { findAllAttributeApplyMetadata } from './applyAttribute';
 import { findAllAttributeMetadata } from './attribute';
 import { getQueryMetadata } from './query';
@@ -22,7 +22,7 @@ export interface ElementConfig {
   observedAttributes?: string[];
   customElementRegistry?: any;
   window?: Window;
-  useShadow?: boolean;
+  useShadow?: boolean | 'open' | 'closed';
 }
 
 export interface ElementMetadata extends Omit<ElementConfig, 'window'> {
@@ -126,8 +126,8 @@ const handleGlobalSwcEvent = async (event: Event) => {
   }
 };
 
-function buildEnv(configWindow?: Window) {
-  const win: Window = configWindow || ((typeof window !== 'undefined' ? window : undefined) as any);
+function buildEnv(configWindow: Window) {
+  const win: Window = configWindow;
   const doc: Document = win?.document;
   const builtInTagMap = new Map<any, string>();
   for (const [cls, tag] of HTML_TAG_ENTRIES) {
@@ -171,7 +171,7 @@ const setupPrototype = (proto: any) => {
       const aConf = getElementConfig(ancestors[i]);
       if (aConf?.window) return aConf.window;
     }
-    return (typeof window !== 'undefined' ? window : undefined) as Window;
+    return getElementConfig(this).window ?? (typeof window !== 'undefined' ? window : undefined) as Window;
   };
 
   proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
@@ -293,8 +293,15 @@ export const elementDefine =
     // const attributeListNames = attributeList.map(it => it.options.name || String(it.propertyKey));
     const hostAttributes = attributeList.filter(it => it.selector === ':host').map(it=>it.options.name || String(it.propertyKey));
 
+    const proto = constructor.prototype;
+    
+    // Get original static observedAttributes before they're overwritten by Object.defineProperty
+    const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
+    
+    // proto.observedAttributes??[];
     const mergedObservedAttributes = [...new Set([
       ...(metadata.observedAttributes ?? []),
+      ...originalStaticObservedAttributes,
       ...attrChangeMap.keys(),
       ...attributeApplyNames,
       ...hostAttributes,
@@ -305,7 +312,6 @@ export const elementDefine =
 
     const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
-    const proto = constructor.prototype;
     setupPrototype(proto);
 
     const originalConnected = proto.connectedCallback;
@@ -317,8 +323,10 @@ export const elementDefine =
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
 
-      if ((connectedInnerHtmlList.some(it => it.options.useShadow === true) || conf?.useShadow === true) && !this.shadowRoot) {
-        this.attachShadow({ mode: 'open' });
+      const shadowMode = conf?.useShadow || connectedInnerHtmlList.find(it => it.options.useShadow)?.options.useShadow;
+      if (shadowMode && !this.shadowRoot) {
+        const mode = shadowMode === true ? 'open' : shadowMode;
+        this.attachShadow({ mode: mode as ShadowRootMode });
       }
 
       (this as any)._executeSwcScript('swc-on-before-connected', hostSet);
@@ -336,12 +344,16 @@ export const elementDefine =
           // console.log('------res0', res);
           // console.log('------res1', res1);
           if (res !== undefined) {
-            if (meta.options.useShadow) sContent += res;
+            if (meta.options.useShadow || conf?.useShadow) sContent += res;
             else lContent += res;
           }
         }
-        if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
-        if (lContent) this.innerHTML = lContent;
+        try {
+          if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
+          if (lContent) this.innerHTML = lContent;
+        } catch (e) {
+          console.error('[ElementDefine] innerHTML setting error:', e);
+        }
       }
 
       const root = this.getRootNode();
@@ -468,7 +480,7 @@ export const elementDefine =
             // Apply filter if specified
             if (options.filter) {
               const helper = SwcUtils.getHelperAndHostSet(currentWin, t as HTMLElement);
-              if (!options.filter(event, helper)) {
+              if (!options.filter(event, {currentThis: this,helper})) {
                 return;  // Skip if filter returns false
               }
             }
@@ -565,21 +577,24 @@ export const elementDefine =
       const hSet = SwcUtils.getHostSet(this as any);
 
       // Process expression directive before passing to handlers
-      let processedVal = newVal;
+      let processedVal: any = newVal;
       if (newVal !== null) {
         const ae = new ActionExpression(newVal);
         const expr = ae.getFirstExpression('call-return');
         if (expr) {
           const win = (this as any)._resolveWindow?.() || ((typeof window !== 'undefined' ? window : undefined) as any);
+          const helperAndHostSet = SwcUtils.getHelperAndHostSet(win,this as any);
           try {
+            const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
             const result = FunctionUtils.executeReturn({
-              script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+              script: script,
               context: this,
-              args: SwcUtils.getHelperAndHostSet(win,this as any)
+              args: helperAndHostSet
             });
-            processedVal = String(result);
+            // Pass the result object directly without serialization
+            processedVal = result;
           } catch (e) {
-            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}:`, e);
+            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}: ${helperAndHostSet}`, e);
             processedVal = newVal;
           }
         }
@@ -597,9 +612,12 @@ export const elementDefine =
         (this as any)._bindAttributeEvent(this as any, name, newVal, hostCustomEventMeta.type);
       }
 
-      const mKeys = attrChangeMap.get(name);
-      if (mKeys && Array.isArray(mKeys)) {
-        for (const key of mKeys) (this as any)[key](processedVal, old, name, hSet);
+      const metaList = attrChangeMap.get(name);
+      if (metaList && Array.isArray(metaList)) {
+        for (const meta of metaList) {
+          const convertedVal = convertAttributeValue(processedVal, meta.options.type);
+          (this as any)[meta.propertyKey](convertedVal, old, name, hSet);
+        }
       }
     };
 

package/src/decorators/emitCustomEvent.ts

@@ -1,5 +1,5 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { SpecialSelector, SwcQueryOptions } from '../types';
+import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 import { ensureInit, getElementConfig } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
 
@@ -7,6 +7,7 @@ export interface EmitCustomEventBaseOptions {
   bubbles?: boolean;
   composed?: boolean;
   cancelable?: boolean;
+  filter?: (target: EventTarget, detail: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 export interface EmitCustomEventMetadata {
@@ -39,59 +40,74 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
     list.push({ propertyKey, selector: selectorOrTarget, type, options: fullOptions });
 
     const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
+    descriptor.value = function (...args: any[]) {
       ensureInit(this);
-      const detail = await original.apply(this, args);
-      const event = new CustomEvent(type, {
-        detail,
-        bubbles: fullOptions.bubbles,
-        composed: fullOptions.composed,
-        cancelable: fullOptions.cancelable
-      });
-
-      const hostSet = SwcUtils.getHostSet(this as any);
-      const conf = getElementConfig(this);
-      const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-      // console.log('emitEEEEEEEEEEE', hostSet);
-
-      const eventTargets: EventTarget[] = [];
-      if (selectorOrTarget === ':window') eventTargets.push(currentWin);
-      else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
-      else if (selectorOrTarget === ':parentHost') {
-        if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-      } else if (selectorOrTarget === ':appHost') {
-        if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-      } else if (selectorOrTarget === ':firstHost') {
-        if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-      } else if (selectorOrTarget === ':lastHost') {
-        if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-      } else if (selectorOrTarget === ':firstAppHost') {
-        if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-      } else if (selectorOrTarget === ':lastAppHost') {
-        if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-      } else if (selectorOrTarget === ':hosts') {
-        hostSet.$hosts.forEach(h => eventTargets.push(h));
-      } else if (selectorOrTarget === ':appHosts') {
-        hostSet.$appHosts.forEach(h => eventTargets.push(h));
-      } else if (selectorOrTarget === ':host' || !selectorOrTarget) eventTargets.push(this as any);
-      else {
-        const r = fullOptions.root || 'auto';
-        const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-        if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-        else if (r === 'light') searchRoots.push(this as any);
-        else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-        else if (r === 'all') {
-          searchRoots.push(this as any);
-          if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+      const res = original.apply(this, args);
+
+      const handleResult = (detail: any) => {
+        const event = new CustomEvent(type, {
+          detail,
+          bubbles: fullOptions.bubbles,
+          composed: fullOptions.composed,
+          cancelable: fullOptions.cancelable
+        });
+
+        const hostSet = SwcUtils.getHostSet(this as any);
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+
+        const eventTargets: EventTarget[] = [];
+        if (selectorOrTarget === ':window') eventTargets.push(currentWin);
+        else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
+        else if (selectorOrTarget === ':parentHost') {
+          if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+        } else if (selectorOrTarget === ':appHost') {
+          if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+        } else if (selectorOrTarget === ':firstHost') {
+          if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+        } else if (selectorOrTarget === ':lastHost') {
+          if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+        } else if (selectorOrTarget === ':firstAppHost') {
+          if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+        } else if (selectorOrTarget === ':lastAppHost') {
+          if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+        } else if (selectorOrTarget === ':hosts') {
+          hostSet.$hosts.forEach(h => eventTargets.push(h));
+        } else if (selectorOrTarget === ':appHosts') {
+          hostSet.$appHosts.forEach(h => eventTargets.push(h));
+        } else if (selectorOrTarget === ':host' || !selectorOrTarget) {
+          eventTargets.push(this as any);
+        } else {
+          const r = fullOptions.root || 'auto';
+          const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+          if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+          else if (r === 'light') searchRoots.push(this as any);
+          else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+          else if (r === 'all') {
+            searchRoots.push(this as any);
+            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          }
+
+          searchRoots.forEach(sr => {
+            sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
+          });
         }
 
-        searchRoots.forEach(sr => {
-          sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
+        eventTargets.forEach(t => {
+          if (fullOptions.filter && !fullOptions.filter(t, detail, {currentThis: this, helper: hostSet})) {
+            return;
+          }
+          t.dispatchEvent(event);
         });
-      }
 
-      eventTargets.forEach(t => t.dispatchEvent(event));
-      return detail;
+        return detail;
+      };
+
+      if (res instanceof Promise) {
+        return res.then(handleResult);
+      } else {
+        return handleResult(res);
+      }
     };
   };
 }

package/src/decorators/setProperty.ts

@@ -1,10 +1,11 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
+import { HelperHostSet, SwcQueryOptions } from '../types';
 
 export interface PropertySetOptions extends SwcQueryOptions {
   name?: string;
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 export interface PropertySetMetadata {
@@ -38,55 +39,68 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
     });
 
     const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
+    descriptor.value = function (...args: any[]) {
       ensureInit(this);
-      const res = await (original as any).apply(this, args);
-      if (res !== undefined) {
-        const win = (this as any).ownerDocument?.defaultView || window;
-        const host = this as unknown as HTMLElement;
-        const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
-        const r = finalOptions.root || 'auto';
-        const targetEls: HTMLElement[] = [];
+      const res = (original as any).apply(this, args);
 
-        const applyRoot = (t: any) => {
-          if (!t || !(t instanceof win.HTMLElement)) return;
-          targetEls.push(t);
-        };
+      const handleResult = (resolvedValue: any) => {
+        if (resolvedValue !== undefined) {
+          const win = (this as any).ownerDocument?.defaultView || window;
+          const host = this as unknown as HTMLElement;
+          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+          const r = finalOptions.root || 'auto';
+          const targetEls: HTMLElement[] = [];
 
-        if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
-        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
-        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
-        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
-        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
-        else if (selector === ':host' || !selector) applyRoot(host);
-        else {
-          const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-          if (targetRoot) {
-            const found = targetRoot.querySelectorAll(selector);
-            if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof win.HTMLElement)) return;
+            targetEls.push(t);
+          };
+
+          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+          else if (selector === ':appHost') applyRoot(hostSet.$appHost);
+          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
+          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
+          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ':host' || !selector) applyRoot(host);
+          else {
+            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+            if (targetRoot) {
+              const found = targetRoot.querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            }
           }
-        }
 
-        targetEls.forEach(targetEl => {
-          const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
+          targetEls.forEach(targetEl => {
+            if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
+              return;
+            }
+            const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
 
-          if (propertyName) {
-            // Case: @setProperty(selector, 'propertyName')
-            (targetEl as any)[propertyName] = resolvedRes;
-          } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-            // Case: @setProperty(selector) with Object return - assign multiple properties
-            Object.entries(resolvedRes as any).forEach(([prop, val]) => {
-              const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
-              (targetEl as any)[prop] = finalVal;
-            });
-          } else {
-            // Simple value - assign to 'value' property by default
-            (targetEl as any).value = resolvedRes;
-          }
-        });
+            if (propertyName) {
+              // Case: @setProperty(selector, 'propertyName')
+              (targetEl as any)[propertyName] = resolvedRes;
+            } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+              // Case: @setProperty(selector) with Object return - assign multiple properties
+              Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+                (targetEl as any)[prop] = finalVal;
+              });
+            } else {
+              // Simple value - assign to 'value' property by default
+              (targetEl as any).value = resolvedRes;
+            }
+          });
+        }
+        return resolvedValue;
+      };
+
+      if (res instanceof Promise) {
+        return res.then(handleResult);
+      } else {
+        return handleResult(res);
       }
     };
   };

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -6,11 +6,11 @@ export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for
 export interface SwcAppMessageSubscriberMetadata {
   propertyKey: string | symbol;
   messageType?: string;
-  filter?: (message: SwcAppMessage) => boolean;
+  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
 }
 
 export interface SwcAppMessageOptions {
-  filter?: (message: SwcAppMessage) => boolean;
+  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
 }
 
 function createSubscribeSwcAppMessageWhileConnected(options?: SwcAppMessageOptions, messageType?: string): MethodDecorator {