@dooboostore/simple-web-component 1.0.43 → 1.0.45

package/src/decorators/applyProperty.ts

@@ -34,9 +34,11 @@ export interface PropertyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type PropertySelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface PropertyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: PropertySelector;
   targetPropertyKey: string | symbol;
   options: PropertyOptions;
   type: 'property' | 'method';
@@ -50,15 +52,42 @@ export const PROPERTY_METADATA_KEY = Symbol.for('simple-web-component:property')
 
 /**
  * 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[] but can include Window and Document for property access
  */
-export const resolvePropertyTargets = (inst: any, selector: string, options: PropertyOptions): any[] => {
+export const resolvePropertyTargets = (inst: any, selector: PropertySelector, options: PropertyOptions): any[] => {
   const conf = getElementConfig(inst);
   const currentWin = conf.window;
   const r = options.root || 'auto';
   const results: any[] = [];
 
+  // 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);
+    return results;
+  }
+  if (resolvedSelector instanceof currentWin.NodeList) {
+    results.push(...Array.from(resolvedSelector));
+    return results;
+  }
+  if (Array.isArray(resolvedSelector)) {
+    results.push(...resolvedSelector);
+    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') {
@@ -69,37 +98,37 @@ export const resolvePropertyTargets = (inst: any, selector: string, options: Pro
     }
   };
 
-  if (selector === '$this' || !selector) {
+  if (stringSelector === '$this' || !stringSelector) {
     applyRoot(inst);
-  } else if (selector === '$window') {
+  } else if (stringSelector === '$window') {
     results.push(currentWin);
-  } else if (selector === '$document') {
+  } else if (stringSelector === '$document') {
     results.push(currentWin.document);
   } 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);
       }
     }
@@ -114,11 +143,12 @@ export const resolvePropertyTargets = (inst: any, selector: string, options: Pro
  * - @applyProperty('selector', 'propertyName') - Set property with explicit name
  * - @applyProperty('selector') - Use property name as target property name
  * - @applyProperty('selector', { name: 'propertyName' }) - Set property via options
+ * - @applyProperty((this, helper) => 'selector', 'propertyName') - Function-based selector
  * - Return null/undefined to skip setting
  */
-export function applyProperty(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function applyProperty(selector: string, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function applyProperty(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
+export function applyProperty(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
+export function applyProperty(selector: PropertySelector, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
+export function applyProperty(selector: PropertySelector, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     // ensureInit(target as any);
     
@@ -150,7 +180,7 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
     }
     metaList.push({
       propertyKey,
-      selector,
+      selector: selector as PropertySelector,
       targetPropertyKey,
       options: finalOptions,
       type: metaType
@@ -260,81 +290,62 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
 // ============================================
 
 /**
- * @property - Alias for @applyProperty
- */
-export function property(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function property(selector: string, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function property(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
-  return applyProperty(selector, targetPropertyKeyOrOptions as any, options);
-}
-
-/**
- * @propertyThis - Apply property on $this element
- * Can be used as: @propertyThis or @propertyThis('propertyName') or @propertyThis({ name: 'propertyName' })
+ * @property - Field decorator for binding element properties (read/write)
+ * 
+ * Usage:
+ * - @property('selector', 'propertyName') - Bind to specific property
+ * - @property('selector') - Use field name as property name
+ * - @property('selector', options) - Bind with options
+ * - @property((this, helper) => 'selector', 'propertyName') - Function-based selector
+ * - @property - Bare decorator (binds to $this with field name)
+ * 
+ * Note: This decorator is for FIELDS ONLY. For methods, use @setProperty.
  */
-export function propertyThis(target: Object, propertyKey: string | symbol): void;
-export function propertyThis(targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function propertyThis(options?: PropertyOptions): MethodDecorator & PropertyDecorator;
-export function propertyThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
-  // Direct decorator usage: @propertyThis
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) && 
-      (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    // Called as @propertyThis (target, propertyKey)
-    return applyProperty('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
+export function property(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function property(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): PropertyDecorator;
+export function property(selector: PropertySelector, options?: PropertyOptions): PropertyDecorator;
+export function property(selectorOrTarget?: PropertySelector | Object, targetPropertyKeyOrOptions?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @property
+  if (optionsOrDescriptor !== undefined && (typeof targetPropertyKeyOrOptions === 'string' || typeof targetPropertyKeyOrOptions === 'symbol')) {
+    return applyProperty('$this', undefined as any, {})(selectorOrTarget as Object, targetPropertyKeyOrOptions, optionsOrDescriptor as PropertyDescriptor);
   }
-  
-  // Called with parameters
-  if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'symbol') {
-    // @propertyThis('propertyName', options?)
-    return applyProperty('$this', targetOrOptions, propertyKeyOrOptions);
-  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // @propertyThis({ name: 'propertyName' })
-    return applyProperty('$this', undefined as any, targetOrOptions);
-  } else {
-    // @propertyThis() or @propertyThis
-    return applyProperty('$this', undefined as any, {});
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return applyProperty(selectorOrTarget, targetPropertyKeyOrOptions as any, optionsOrDescriptor as PropertyOptions);
   }
+  // Without selector (defaults to $this)
+  return applyProperty('$this', undefined as any, selectorOrTarget as PropertyOptions);
 }
 
 /**
- * @setProperty - Alias for @applyProperty (method-decorator semantics)
- */
-export function setProperty(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
-export function setProperty(selector: string, options?: PropertyOptions): MethodDecorator;
-export function setProperty(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator {
-  return applyProperty(selector, targetPropertyKeyOrOptions as any, options) as MethodDecorator;
-}
-
-/**
- * @setPropertyThis - Set property on $this element
- * Can be used as: @setPropertyThis or @setPropertyThis('propertyName') or @setPropertyThis({ name: 'propertyName' })
+ * @setProperty - Method decorator for setting element properties from method return value
+ * 
+ * Usage:
+ * - @setProperty('selector', 'propertyName') - Set specific property
+ * - @setProperty('selector') - Use method name as property name
+ * - @setProperty('selector', options) - Set with options
+ * - @setProperty((this, helper) => 'selector', 'propertyName') - Function-based selector
+ * - @setProperty - Bare decorator (sets on $this with method name)
+ * 
+ * Note: This decorator is for METHODS ONLY. For fields, use @property.
+ * 
+ * Example:
+ * @setProperty('selector', 'disabled')
+ * disableElement() {
+ *   return true;
+ * }
  */
-export function setPropertyThis(target: Object, propertyKey: string | symbol): void;
-export function setPropertyThis(targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
-export function setPropertyThis(options?: PropertyOptions): MethodDecorator;
-export function setPropertyThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
-  // Direct decorator usage: @setPropertyThis
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) && 
-      (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
-    // Called as @setPropertyThis (target, propertyKey)
-    return applyProperty('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
-  }
-  
-  // Called with parameters
-  if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'symbol') {
-    // @setPropertyThis('propertyName', options?)
-    return applyProperty('$this', targetOrOptions, propertyKeyOrOptions) as MethodDecorator;
-  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // @setPropertyThis({ name: 'propertyName' })
-    return applyProperty('$this', undefined as any, targetOrOptions) as MethodDecorator;
-  } else {
-    // @setPropertyThis() or @setPropertyThis
-    return applyProperty('$this', undefined as any, {}) as MethodDecorator;
+export function setProperty(selector: PropertySelector, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
+export function setProperty(selector: PropertySelector, options?: PropertyOptions): MethodDecorator;
+export function setProperty(selectorOrOptions?: PropertySelector | PropertyOptions, targetPropertyKeyOrOptions?: any, optionsOrUndefined?: PropertyOptions): MethodDecorator {
+  // With selector
+  if (typeof selectorOrOptions === 'string') {
+    return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions as any, optionsOrUndefined as PropertyOptions) as MethodDecorator;
   }
+  // Without selector (defaults to $this)
+  return applyProperty('$this', undefined as any, selectorOrOptions as PropertyOptions) as MethodDecorator;
 }
 
-
-
 // ============================================
 // Metadata Helpers
 // ============================================

package/src/decorators/applyStyle.ts

@@ -15,17 +15,86 @@ export interface StyleApplyOptions extends SwcQueryOptions {
   valueKey?: symbol | string;
 }
 
+export type StyleSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface StyleApplyMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: StyleSelector;
   action: StyleAction;
   options: StyleApplyOptions;
 }
 
 export const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');
 
+/**
+ * Resolve selector to string or elements
+ * Handles function-based selectors and returns elements if applicable
+ */
+const resolveSelector = (selector: StyleSelector, inst: any, win: Window): string | HTMLElement[] => {
+  if (typeof selector === 'function') {
+    const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+    const result = selector(inst, hostSet);
+    
+    if (result instanceof win.Element) {
+      return [result as HTMLElement];
+    }
+    if (result instanceof win.NodeList) {
+      return Array.from(result) as HTMLElement[];
+    }
+    if (Array.isArray(result)) {
+      return result as HTMLElement[];
+    }
+    if (result === null) {
+      return [];
+    }
+    return result as string;
+  }
+  return selector as string;
+};
+
+/**
+ * Get target elements from selector
+ */
+const getTargetElements = (selector: StyleSelector, inst: any, win: Window, root: string): HTMLElement[] => {
+  const resolved = resolveSelector(selector, inst, win);
+  
+  if (Array.isArray(resolved)) {
+    return resolved;
+  }
+
+  const stringSelector = resolved as string;
+  const targetEls: HTMLElement[] = [];
+  const host = inst as unknown as HTMLElement;
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+
+  const applyRoot = (t: any) => {
+    if (!t || !(t instanceof win.HTMLElement)) return;
+    targetEls.push(t);
+  };
+
+  if (stringSelector === '$this' || !stringSelector) applyRoot(host);
+  else if (stringSelector === '$host') applyRoot(hostSet.$host);
+  else if (stringSelector === '$parentHost') applyRoot(hostSet.$parentHost);
+  else if (stringSelector === '$appHost') applyRoot(hostSet.$appHost);
+  else if (stringSelector === '$firstHost') applyRoot(hostSet.$firstHost);
+  else if (stringSelector === '$lastHost') applyRoot(hostSet.$lastHost);
+  else if (stringSelector === '$firstAppHost') applyRoot(hostSet.$firstAppHost);
+  else if (stringSelector === '$lastAppHost') applyRoot(hostSet.$lastAppHost);
+  else if (stringSelector === '$hosts') hostSet.$hosts.forEach(applyRoot);
+  else if (stringSelector === '$appHosts') hostSet.$appHosts.forEach(applyRoot);
+  else {
+    const targetRoot = root === 'auto' ? (host.shadowRoot || host) : (root === 'shadow' ? host.shadowRoot : host);
+    if (targetRoot) {
+      const found = targetRoot.querySelectorAll(stringSelector);
+      if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+    }
+  }
+
+  return targetEls;
+};
+
 function createStyleDecorator(action: StyleAction) {
-  return (selector: string, options: StyleApplyOptions = {}): MethodDecorator => {
+  return (selector: StyleSelector, options: StyleApplyOptions = {}): MethodDecorator => {
     return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
       const constructor = target.constructor;
       let metaList = ReflectUtils.getOwnMetadata(STYLE_METADATA_KEY, constructor) as Map<string | symbol, StyleApplyMetadata>;
@@ -62,30 +131,7 @@ function createStyleDecorator(action: StyleAction) {
             const host = this as unknown as HTMLElement;
             const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
             const r = options.root || 'auto';
-            const targetEls: HTMLElement[] = [];
-
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof win.HTMLElement)) return;
-              targetEls.push(t);
-            };
-
-            if (selector === '$this' || !selector) applyRoot(host);
-            else if (selector === '$host') applyRoot(hostSet.$host);
-            else 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 {
-              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 targetEls = getTargetElements(selector, this, win, r);
 
             targetEls.forEach(targetEl => {
               if (options.filter && !options.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
@@ -137,21 +183,69 @@ function createStyleDecorator(action: StyleAction) {
   };
 }
 
-export function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
-  return createStyleDecorator(action)(selector, options);
+export function applyStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function applyStyle(selector: StyleSelector, action?: StyleAction, options?: StyleApplyOptions): MethodDecorator;
+export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Bare decorator: @applyStyle
+  if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
+    return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, actionOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    const action = (typeof actionOrPropertyKey === 'string' ? actionOrPropertyKey : 'update') as StyleAction;
+    const options = (typeof actionOrPropertyKey === 'object' ? actionOrPropertyKey : optionsOrDescriptor) as StyleApplyOptions | undefined;
+    return createStyleDecorator(action)(selectorOrTarget, options);
+  }
+  // Without selector (defaults to $this)
+  const action = (typeof selectorOrTarget === 'string' ? selectorOrTarget : 'update') as StyleAction;
+  const options = (typeof selectorOrTarget === 'object' ? selectorOrTarget : actionOrPropertyKey) as StyleApplyOptions | undefined;
+  return createStyleDecorator(action)('$this', options);
 }
 
-export const setStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('set')(selector, options);
-export const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);
-export const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);
+export function setStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function setStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
+  // Bare decorator: @setStyle
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    return createStyleDecorator('set')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createStyleDecorator('set')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createStyleDecorator('set')('$this', selectorOrTarget as StyleApplyOptions);
+}
 
-// This versions
-export function applyStyleThis(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
-  return createStyleDecorator(action)('$this', options);
+export function updateStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function updateStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
+  // Bare decorator: @updateStyle
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createStyleDecorator('update')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createStyleDecorator('update')('$this', selectorOrTarget as StyleApplyOptions);
+}
+
+export function removeStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function removeStyle(selector: StyleSelector, options?: StyleApplyOptions): MethodDecorator;
+export function removeStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
+  // Bare decorator: @removeStyle
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    return createStyleDecorator('remove')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return createStyleDecorator('remove')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
+  }
+  // Without selector (defaults to $this)
+  return createStyleDecorator('remove')('$this', selectorOrTarget as StyleApplyOptions);
 }
-export const setStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('set')('$this', options);
-export const updateStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('update')('$this', options);
-export const removeStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')('$this', options);
 
 export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {
   const result = new Map<string | symbol, StyleApplyMetadata>();

package/src/decorators/{changedAttributeThis.ts → changedAttribute.ts}

@@ -23,7 +23,7 @@ const convertValue = (val: any, type: any): any => {
 /**
  * @changedAttributeThis decorator - fires when any attribute on $this changes
  */
-export function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
+export function changedAttribute(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
     let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];