@dooboostore/simple-web-component 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.43",
+  "version": "1.0.45",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/SwcAppEngine.ts

@@ -78,7 +78,9 @@ export class SwcAppEngine {
 
       if (this._config.onStartedLazyDefineComponent) {
         // console.log('-------->', this._config.onStartedLazyDefineComponent)
-        await Promise.all(this._config.onStartedLazyDefineComponent.map(it => it(this._config.window)))
+        await Promise.all(this._config.onStartedLazyDefineComponent.map(it => {
+          it(this._config.window);
+        }))
       }
       if (this._config.onEngineStarted) {
         await this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);

package/src/decorators/addEventListener.ts

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 
-export interface AddEventListenerBaseOptions extends EventListenerOptions {
+export interface AddEventListenerBaseOptions<TEvent extends Event = Event> extends EventListenerOptions {
   capture?: boolean;
   once?: boolean;
   passive?: boolean;
@@ -11,27 +11,33 @@ export interface AddEventListenerBaseOptions extends EventListenerOptions {
   // removeOnDisconnected?: boolean;
   delegate?: boolean;
   filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;
+  // RxJS operator options
+  debounceTime?: number;
+  throttleTime?: number;
+  distinctUntilChanged?: boolean | ((prev: TEvent, curr: TEvent) => boolean);
 }
 
-export interface AddEventListenerMetadata {
+export type EventListenerSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
+export interface AddEventListenerMetadata<TEvent extends Event = Event> {
   propertyKey: string | symbol;
-  selector: string;
+  selector: EventListenerSelector;
   type: string;
-  options: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean };
+  options: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean };
 }
 
 export const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');
 
-export function addEventListener(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions): MethodDecorator;
-export function addEventListener(selector: string, type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;
+export function addEventListener<TEvent extends Event = Event>(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator;
+export function addEventListener<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;
 /**
  * @addEventListener decorator to bind events to elements.
  */
-export function addEventListener(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
+export function addEventListener<TEvent extends Event = Event>(selectorOrTarget: EventListenerSelector, type: string, options: any = {}): MethodDecorator {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
 
-    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
+    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata<TEvent>[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
@@ -42,18 +48,18 @@ export function addEventListener(selectorOrTarget: string, type: string, options
 }
 
 
-export function addEventListenerDelegateLightDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
-  return addEventListener(selector, type, {...options??{}, root:'light', delegate: true});
+export function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+  return addEventListener<TEvent>(selector, type, {...options??{}, root:'light', delegate: true});
 }
 
-export function addEventListenerDelegateShadowDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
-  return addEventListener(selector, type, {...options??{}, root:'shadow', delegate: true});
+export function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+  return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow', delegate: true});
 }
-export function addEventListenerDelegateAllDom(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
-  return addEventListener(selector, type, {...options??{}, root:'all', delegate: true});
+export function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+  return addEventListener<TEvent>(selector, type, {...options??{}, root:'all', delegate: true});
 }
-export function addEventListenerDelegate(selector: string, type: string, options?: Omit<AddEventListenerBaseOptions, 'delegate'>): MethodDecorator {
-  return addEventListener(selector, type, {...options??{}, root:'auto', delegate: true});
+export function addEventListenerDelegate<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {
+  return addEventListener<TEvent>(selector, type, {...options??{}, root:'auto', delegate: true});
 }
 
 /**
@@ -66,25 +72,25 @@ export const eventDelegateLightDom = addEventListenerDelegateLightDom;
 export const eventDelegateShadowDom = addEventListenerDelegateShadowDom;
 export const eventDelegateAllDom = addEventListenerDelegateAllDom;
 export const eventDelegate = addEventListenerDelegate;
-export function addEventListenerThis(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener('$this', type, options);
+export function addEventListenerThis<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {
+  return addEventListener<TEvent>('$this', type, options);
 }
 
 /**
  * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector
  */
-export function addEventListenerAppHost(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener('$appHost', type, options);
+export function addEventListenerAppHost<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {
+  return addEventListener<TEvent>('$appHost', type, options);
 }
 
-export function addEventListenerWindow(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener('$window', type, options);
+export function addEventListenerWindow<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {
+  return addEventListener<TEvent>('$window', type, options);
 }
-export function addEventListenerDocument(type: string, options?: AddEventListenerBaseOptions & SwcQueryOptions): MethodDecorator {
-  return addEventListener('$document', type, options);
+export function addEventListenerDocument<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {
+  return addEventListener<TEvent>('$document', type, options);
 }
 
-export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata[] | undefined => {
+export const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata<Event>[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
 };

package/src/decorators/applyAttribute.ts

@@ -40,9 +40,11 @@ export interface AttributeOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type AttributeSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface AttributeMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: AttributeSelector;
   targetAttributeName: string;
   options: AttributeOptions;
   type: 'property' | 'method';
@@ -54,6 +56,36 @@ export const ATTRIBUTE_METADATA_KEY = Symbol.for('simple-web-component:attribute
 // Utilities
 // ============================================
 
+/**
+ * Determine if a string is a CSS selector or an attribute name
+ * 
+ * CSS selectors typically:
+ * - Start with: #, ., [, :, >, +, ~
+ * - Contain special chars: >, +, ~, :, [, ]
+ * - Are special keywords: $this, $host, $parentHost, etc.
+ * 
+ * Attribute names are typically:
+ * - kebab-case (lowercase with hyphens)
+ * - No special selector syntax
+ * 
+ * @param str - String to check
+ * @returns true if it's a CSS selector, false if it's an attribute name
+ */
+const isCssSelector = (str: string): boolean => {
+  if (!str) return false;
+  
+  // Special keywords
+  if (str.startsWith('$')) return true;
+  
+  // CSS selector syntax
+  if (/^[#.\[\:>+~]/.test(str)) return true;
+  
+  // Contains CSS combinator or pseudo-selector syntax
+  if (/[>+~:\[\]]/.test(str)) return true;
+  
+  return false;
+};
+
 const convertValue = (val: string | null, type: any): any => {
   if (val === null || val === undefined) return val;
   if (type === Number) return Number(val);
@@ -63,7 +95,7 @@ const convertValue = (val: string | null, type: any): any => {
 
 export {convertValue};
 
-export const getAttributeValue = (inst: any, attrName: string, options?: AttributeOptions & { selector?: string }): any => {
+export const getAttributeValue = (inst: any, attrName: string, options?: AttributeOptions & { selector?: AttributeSelector }): any => {
   const conf = getElementConfig(inst);
   const currentWin = inst._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
 
@@ -101,15 +133,42 @@ export const getAttributeValue = (inst: any, attrName: string, options?: Attribu
 
 /**
  * Resolve target elements based on selector and options
- * Handles special selectors ($this, $host, etc.) and CSS selectors
+ * Handles special selectors ($this, $host, etc.), CSS selectors, and function-based selectors
  * Returns HTMLElement[] for attribute operations
  */
-export const resolveAttributeTargets = (inst: any, selector: string, options: AttributeOptions): HTMLElement[] => {
+export const resolveAttributeTargets = (inst: any, selector: AttributeSelector, options: AttributeOptions): HTMLElement[] => {
   const conf = getElementConfig(inst);
   const currentWin = conf.window;
   const r = options.root || 'auto';
   const results: HTMLElement[] = [];
 
+  // Resolve selector if it's a function
+  let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+    resolvedSelector = selector(inst, hostSet);
+  }
+
+  // If selector function returned elements directly, use them
+  if (resolvedSelector instanceof currentWin.Element) {
+    results.push(resolvedSelector as HTMLElement);
+    return results;
+  }
+  if (resolvedSelector instanceof currentWin.NodeList) {
+    results.push(...(Array.from(resolvedSelector) as HTMLElement[]));
+    return results;
+  }
+  if (Array.isArray(resolvedSelector)) {
+    results.push(...(resolvedSelector as HTMLElement[]));
+    return results;
+  }
+  if (resolvedSelector === null) {
+    return results;
+  }
+
+  // Handle string selector
+  const stringSelector = resolvedSelector as string;
+
   const applyRoot = (target: any) => {
     if (!target) return;
     if (r === 'auto') {
@@ -120,33 +179,33 @@ export const resolveAttributeTargets = (inst: any, selector: string, options: At
     }
   };
 
-  if (selector === '$this' || !selector) {
+  if (stringSelector === '$this' || !stringSelector) {
     applyRoot(inst);
   } else {
     const hostSet = SwcUtils.getHostSet(inst);
-    if (selector === '$host') applyRoot(hostSet.$host);
-    else if (selector === '$parentHost') applyRoot(hostSet.$parentHost);
-    else if (selector === '$appHost') applyRoot(hostSet.$appHost as any);
-    else if (selector === '$firstHost') applyRoot(hostSet.$firstHost);
-    else if (selector === '$lastHost') applyRoot(hostSet.$lastHost);
-    else if (selector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
-    else if (selector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
-    else if (selector === '$hosts') hostSet.$hosts.forEach(applyRoot);
-    else if (selector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+    if (stringSelector === '$host') applyRoot(hostSet.$host);
+    else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+    else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost as any);
+    else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+    else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+    else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost as any);
+    else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost as any);
+    else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+    else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
     else {
       if (r === 'shadow') {
-        const found = inst.shadowRoot?.querySelectorAll(selector);
+        const found = inst.shadowRoot?.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'light') {
-        const found = inst.querySelectorAll(selector);
+        const found = inst.querySelectorAll(stringSelector);
         if (found) results.push(...found);
       } else if (r === 'all') {
-        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
-        const lMatch = inst.querySelectorAll(selector);
+        const sMatch = inst.shadowRoot?.querySelectorAll(stringSelector);
+        const lMatch = inst.querySelectorAll(stringSelector);
         if (sMatch) results.push(...sMatch);
         if (lMatch) results.push(...lMatch);
       } else {
-        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        const found = (inst.shadowRoot || inst).querySelectorAll(stringSelector);
         if (found) results.push(...found);
       }
     }
@@ -161,11 +220,12 @@ export const resolveAttributeTargets = (inst: any, selector: string, options: At
  * - @applyAttribute('selector', 'attrName') - Set attribute with explicit name
  * - @applyAttribute('selector') - Use property name as attribute name
  * - @applyAttribute('selector', { name: 'attrName' }) - Set attribute via options
+ * - @applyAttribute((this, helper) => 'selector', 'attrName') - Function-based selector
  * - Return null to remove attribute
  */
-export function applyAttribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function applyAttribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
+export function applyAttribute(selector: AttributeSelector, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: AttributeSelector, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
+export function applyAttribute(selector: AttributeSelector, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     // ensureInit(target as any);
 
@@ -198,7 +258,7 @@ export function applyAttribute(selector: string, targetAttributeNameOrOptions?:
     }
     metaList.push({
       propertyKey,
-      selector,
+      selector: selector as AttributeSelector,
       targetAttributeName,
       options: finalOptions,
       type: metaType
@@ -307,77 +367,95 @@ export function applyAttribute(selector: string, targetAttributeNameOrOptions?:
 // ============================================
 
 /**
- * @attribute - Alias for @applyAttribute
- */
-export function attribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function attribute(selector: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function attribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator & PropertyDecorator {
-  return applyAttribute(selector, targetAttributeNameOrOptions as any, options);
-}
-
-/**
- * @attributeThis - Apply attribute on $this element
- * Can be used as: @attributeThis or @attributeThis('attrName') or @attributeThis({ name: 'attrName' })
+ * @attribute - Field decorator for binding element attributes (read/write)
+ * 
+ * Intelligently distinguishes between attribute names and CSS selectors:
+ * 
+ * Usage patterns:
+ * - @attribute('product-id') - Attribute name on $this (auto-detected)
+ * - @attribute('#user', 'product-id') - Attribute name on selector
+ * - @attribute('product-id', options) - Attribute name on $this with options
+ * - @attribute('#user', 'product-id', options) - Attribute name on selector with options
+ * - @attribute((this, helper) => 'selector', 'product-id') - Function-based selector
+ * - @attribute - Bare decorator (uses property name as attribute on $this)
+ * 
+ * Note: This decorator is for FIELDS ONLY. For methods, use @setAttribute.
  */
-export function attributeThis(target: Object, propertyKey: string | symbol): void;
-export function attributeThis(targetAttributeName: string, options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function attributeThis(options?: AttributeOptions): MethodDecorator & PropertyDecorator;
-export function attributeThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
-  // Direct decorator usage: @attributeThis
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
-    typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol') {
-    // Called as @attributeThis (target, propertyKey)
-    return applyAttribute('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+export function attribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function attribute(attributeName: string, options?: AttributeOptions): PropertyDecorator;
+export function attribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): PropertyDecorator;
+export function attribute(selectorOrAttributeOrTarget?: AttributeSelector | Object, attributeNameOrOptions?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @attribute
+  if (optionsOrDescriptor !== undefined && (typeof attributeNameOrOptions === 'string' || typeof attributeNameOrOptions === 'symbol')) {
+    return applyAttribute('$this', undefined as any, {})(selectorOrAttributeOrTarget as Object, attributeNameOrOptions, optionsOrDescriptor as PropertyDescriptor);
   }
-
-  // Called with parameters
-  if (typeof targetOrOptions === 'string') {
-    // @attributeThis('attrName', options?)
-    return applyAttribute('$this', targetOrOptions, propertyKeyOrOptions);
-  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // @attributeThis({ name: 'attrName' })
-    return applyAttribute('$this', undefined as any, targetOrOptions);
-  } else {
-    // @attributeThis() or @attributeThis
-    return applyAttribute('$this', undefined as any, {});
+  
+  // With string as first parameter
+  if (typeof selectorOrAttributeOrTarget === 'string') {
+    // Check if first parameter is a CSS selector or attribute name
+    const isSelector = isCssSelector(selectorOrAttributeOrTarget);
+    
+    if (isSelector) {
+      // First param is a selector: @attribute('#user', 'product-id', options?)
+      return applyAttribute(selectorOrAttributeOrTarget, attributeNameOrOptions as any, optionsOrDescriptor as AttributeOptions);
+    } else {
+      // First param is an attribute name: @attribute('product-id', options?)
+      // Treat as attribute name on $this
+      const options = (typeof attributeNameOrOptions === 'object' && attributeNameOrOptions !== null) 
+        ? attributeNameOrOptions 
+        : {};
+      return applyAttribute('$this', selectorOrAttributeOrTarget, options);
+    }
   }
+  
+  // Without selector (defaults to $this with options)
+  return applyAttribute('$this', undefined as any, selectorOrAttributeOrTarget as AttributeOptions);
 }
 
 /**
- * @setAttribute - Alias for @applyAttribute (method-decorator semantics)
+ * @setAttribute - Method decorator for setting element attributes from method return value
+ * 
+ * Intelligently distinguishes between attribute names and CSS selectors:
+ * 
+ * Usage patterns:
+ * - @setAttribute('data-id') - Attribute name on $this (auto-detected)
+ * - @setAttribute('#user', 'data-id') - Attribute name on selector
+ * - @setAttribute('data-id', options) - Attribute name on $this with options
+ * - @setAttribute('#user', 'data-id', options) - Attribute name on selector with options
+ * - @setAttribute((this, helper) => 'selector', 'data-id') - Function-based selector
+ * - @setAttribute - Bare decorator (uses method name as attribute on $this)
+ * 
+ * Note: This decorator is for METHODS ONLY. For fields, use @attribute.
+ * 
+ * Example:
+ * @setAttribute('data-status')
+ * updateStatus() {
+ *   return 'active';
+ * }
  */
-export function setAttribute(selector: string, targetAttributeName: string, options?: AttributeOptions): MethodDecorator;
-export function setAttribute(selector: string, options?: AttributeOptions): MethodDecorator;
-export function setAttribute(selector: string, targetAttributeNameOrOptions?: string | AttributeOptions, options?: AttributeOptions): MethodDecorator {
-  return applyAttribute(selector, targetAttributeNameOrOptions as any, options) as MethodDecorator;
-}
-
-/**
- * @setAttributeThis - Set attribute on $this element
- * Can be used as: @setAttributeThis or @setAttributeThis('attrName') or @setAttributeThis({ name: 'attrName' })
- */
-export function setAttributeThis(target: Object, propertyKey: string | symbol): void;
-export function setAttributeThis(targetAttributeName: string, options?: AttributeOptions): MethodDecorator;
-export function setAttributeThis(options?: AttributeOptions): MethodDecorator;
-export function setAttributeThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
-  // Direct decorator usage: @setAttributeThis
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
-    (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    // Called as @setAttributeThis (target, propertyKey)
-    return applyAttribute('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-  }
-
-  // Called with parameters
-  if (typeof targetOrOptions === 'string') {
-    // @setAttributeThis('attrName', options?)
-    return applyAttribute('$this', targetOrOptions, propertyKeyOrOptions) as MethodDecorator;
-  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // @setAttributeThis({ name: 'attrName' })
-    return applyAttribute('$this', undefined as any, targetOrOptions) as MethodDecorator;
-  } else {
-    // @setAttributeThis() or @setAttributeThis
-    return applyAttribute('$this', undefined as any, {}) as MethodDecorator;
+export function setAttribute(selector: AttributeSelector, attributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(attributeName: string, options?: AttributeOptions): MethodDecorator;
+export function setAttribute(selectorOrAttributeOrOptions?: AttributeSelector | AttributeOptions, attributeNameOrOptions?: any, optionsOrUndefined?: AttributeOptions): MethodDecorator {
+  // With string as first parameter
+  if (typeof selectorOrAttributeOrOptions === 'string') {
+    // Check if first parameter is a CSS selector or attribute name
+    const isSelector = isCssSelector(selectorOrAttributeOrOptions);
+    
+    if (isSelector) {
+      // First param is a selector: @setAttribute('#user', 'data-id', options?)
+      return applyAttribute(selectorOrAttributeOrOptions, attributeNameOrOptions as any, optionsOrUndefined as AttributeOptions) as MethodDecorator;
+    } else {
+      // First param is an attribute name: @setAttribute('data-id', options?)
+      // Treat as attribute name on $this
+      const options = (typeof attributeNameOrOptions === 'object' && attributeNameOrOptions !== null) 
+        ? attributeNameOrOptions 
+        : {};
+      return applyAttribute('$this', selectorOrAttributeOrOptions, options) as MethodDecorator;
+    }
   }
+  
+  // Without selector (defaults to $this with options)
+  return applyAttribute('$this', undefined as any, selectorOrAttributeOrOptions as AttributeOptions) as MethodDecorator;
 }
 
 // ============================================