@dooboostore/simple-web-component 1.0.38 → 1.0.40

package/src/decorators/applyNode.ts

@@ -37,69 +37,60 @@ export interface ApplyNodeMetadata {
 
 export const APPLY_NODE_METADATA_KEY = Symbol.for('simple-web-component:apply-node');
 
-const normalizeNodes = (res: any, doc: Document): Node[] => {
-  const items = Array.isArray(res) ? res : [res];
-  return items.map(it => {
-    if (it instanceof Node) return it;
-    return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
-  });
-};
-
-const applyToDom = (currentThis: any, targetEl: HTMLElement, res: any, pos: ApplyNodePosition, win: Window, host?: any) => {
+// const normalizeNodes = (res: any, doc: Document): Node[] => {
+//   const items = Array.isArray(res) ? res : [res];
+//   return items.map(it => {
+//     if (it instanceof Node) return it;
+//     return doc.createTextNode(it !== undefined && it !== null ? String(it) : '');
+//   });
+// };
+
+const applyToDom = (currentThis: any, targetEl: HTMLElement, res: Node | string, pos: ApplyNodePosition, win: Window, host?: any) => {
   if (!targetEl) return;
-
-  // console.log('------------',currentThis.tagName, res)
   const doc = win.document;
   const hostSet = SwcUtils.getHelperAndHostSet(win, currentThis);
   const id = currentThis._swcId;
-  // Allow processHtml to run here so all DOM insertions go through a single
-  // processing point. processHtml may mutate Node[] in-place or return a
-  // transformed string result for text processing.
-  try {
-    if (typeof res === 'string') {
-      const processed = SwcUtils.projectProcessHtml(id, res as string, doc);
-      if (processed !== undefined) res = processed;
-    } else if (res) {
-      SwcUtils.projectProcessHtml(id, res, doc);
-    }
-  } catch (e) {
-    // swallow and proceed with original res
-  }
 
-  if (pos === 'innerHtml') {
-    targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-    return;
-  }
 
-  if (pos === 'innerText') {
-    if (targetEl.innerText !== undefined) {
-      targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
-    }
-    return;
+  const nodes: Node[] = [];
+
+  if (typeof res === 'string' && pos === 'innerHtml') {
+    const t = win.document.createElement('template');
+    t.innerHTML = res;
+    nodes.push(...Array.from(t.content.childNodes));
+  } else if (typeof res === 'string' && pos === 'innerText') {
+    nodes.push(win.document.createTextNode(res));
   }
 
-  const stateContext: any = {...hostSet};
-  findAllStateMetadata(currentThis).forEach(it => {
-    stateContext[it.name] = currentThis[it.propertyKey]
-  })
-  new ElementApply(currentThis, {id: currentThis._swcId}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
+  SwcUtils.projectProcessHtml(id, nodes, doc);
+
 
 
   const isShadowRoot = targetEl instanceof win.ShadowRoot;
-  const nodes = normalizeNodes(res, doc);
+  // const nodes = normalizeNodes(res, doc);
   if (pos === 'replace') {
     if (!isShadowRoot) targetEl.replaceWith(...nodes);
+  } else if (pos === 'innerHtml') {
+    targetEl.replaceChildren(...nodes);
+  } else if (pos === 'innerText') {
+    targetEl.replaceChildren(...nodes);
   } else if (pos === 'replaceChildren') {
     targetEl.replaceChildren(...nodes);
   } else {
     if (pos === 'beforeEnd') {
-      console.log('tarbbbbbbbbbbbbbb')
       targetEl.append(...nodes)
     }
     else if (pos === 'afterBegin') targetEl.prepend(...nodes);
     else if (pos === 'beforeBegin' && !isShadowRoot) targetEl.before(...nodes);
     else if (pos === 'afterEnd' && !isShadowRoot) targetEl.after(...nodes);
   }
+
+  const stateContext: any = {...hostSet};
+  findAllStateMetadata(currentThis).forEach(it => {
+    stateContext[it.name] = currentThis[it.propertyKey]
+  })
+  new ElementApply(targetEl, {id: id}).apply({target: 'noInitialized', context: stateContext, bind: currentThis});
+  return nodes;
 };
 
 /**
@@ -146,8 +137,6 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
         return targetRoot ? targetRoot.querySelector(selector) : null;
       };
 
-
-      console.log('fffffffffff')
       const targetEl = getTarget();
       const res = original.apply(this, args);
 
@@ -164,16 +153,17 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
         }
       };
 
-      if (res instanceof Promise) {
-        // 비동기일 때만 로딩 표시
-        if (targetEl && options.fallback) {
-          const loadingRes = options.fallback.call(this, hostSet);
-          // applyToDom expects a Window as the 4th argument
-          applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', currentWin);
-        }
 
+        const fallbackNodes: Node[] = [];
+      if (targetEl && options.fallback) {
+        const loadingRes = options.fallback.call(this, hostSet);
+        // applyToDom expects a Window as the 4th argument
+        fallbackNodes.push(...applyToDom(this, targetEl, loadingRes, options.position || 'beforeEnd', currentWin));
+      }
+
+      if (res instanceof Promise) {
         return res.then(finalRes => {
-          console.log('amnkj')
+          fallbackNodes.forEach((it: any)=>it.remove());
           if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
           return finalRes;
         });
@@ -185,17 +175,6 @@ export function applyNode(selector: string, options: ApplyNodeOptions = {positio
   };
 }
 
-export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, ApplyNodeMetadata> => {
-  const result = new Map<string | symbol, ApplyNodeMetadata>();
-  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ApplyNodeMetadata>>(APPLY_NODE_METADATA_KEY, target);
-  maps.forEach(map => {
-    if (map instanceof Map) {
-      map.forEach((v, k) => result.set(k, v));
-    }
-  });
-  return result;
-};
-
 export function applyNodeThis(options: ApplyNodeOptions): MethodDecorator;
 export function applyNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function applyNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
@@ -205,111 +184,135 @@ export function applyNodeThis(targetOrOptions?: any, propertyKey?: string | symb
   return applyNode('$this', {...option, ...opt});
 }
 
-export function applyNodeThisReplaceChildren(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
-export function applyNodeThisReplaceChildren(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisReplaceChildren(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function replaceChildrenNodeThis(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function replaceChildrenNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function replaceChildrenNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'replaceChildren'};
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeThisReplaceChildrenLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyNodeThisReplaceChildrenLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisReplaceChildrenLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  const options: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
-  if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
-  const opt = targetOrOptions || {};
-  return applyNode('$this', {...opt, ...options});
-}
 
-export function applyNodeThisBeforeEnd(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
-export function applyNodeThisBeforeEnd(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisBeforeEnd(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+
+export function beforeEndNodeThis(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function beforeEndNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function beforeEndNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const options: ApplyNodeOptions = {position: 'beforeEnd'};
   if (propertyKey !== undefined) return applyNode('$this', options)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...options});
 }
 
-export function applyNodeThisBeforeEndLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyNodeThisBeforeEndLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisBeforeEndLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function beforeEndLightNodeThis(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function beforeEndLightNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function beforeEndLightNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'light'}
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
-export function applyNodeThisBeforeEndShadow(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyNodeThisBeforeEndShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisBeforeEndShadow(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+
+export function beforeEndShadowNodeThis(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function beforeEndShadowNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function beforeEndShadowNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'beforeEnd', root: 'shadow'}
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeThisAfterBegin(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
-export function applyNodeThisAfterBegin(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisAfterBegin(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function afterBeginNodeThis(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function afterBeginNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function afterBeginNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'afterBegin'};
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeThisAfterBeginLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyNodeThisAfterBeginLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeThisAfterBeginLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function afterBeginLightNodeThis(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function afterBeginLightNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function afterBeginLightNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'afterBegin', root: 'light'}
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyThisInnerHtmlNode(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
-export function applyThisInnerHtmlNode(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyThisInnerHtmlNode(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function innerHtmlNodeThis(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerHtmlNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function innerHtmlNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'innerHtml'}
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyThisInnerHtmlNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyThisInnerHtmlNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyThisInnerHtmlNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function innerTextNodeThis(options: Omit<ApplyNodeOptions, 'position'>): MethodDecorator;
+export function innerTextNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function innerTextNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  const option: ApplyNodeOptions = {position: 'innerText'}
+  if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode('$this', {...opt, ...option});
+}
+
+export function innerHtmlLightNodeThis(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function innerHtmlLightNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function innerHtmlLightNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'innerHtml', root: 'light'};
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyThisReplaceChildrenNodeLightDom(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
-export function applyThisReplaceChildrenNodeLightDom(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyThisReplaceChildrenNodeLightDom(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function replaceChildrenLightNodeThis(options: Omit<ApplyNodeOptions, 'position' | 'root'>): MethodDecorator;
+export function replaceChildrenLightNodeThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function replaceChildrenLightNodeThis(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
   const option: ApplyNodeOptions = {position: 'replaceChildren', root: 'light'};
   if (propertyKey !== undefined) return applyNode('$this', option)(targetOrOptions, propertyKey, descriptor);
   const opt = targetOrOptions || {};
   return applyNode('$this', {...opt, ...option});
 }
 
-export function applyNodeReplaceChildren(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+export function replaceChildrenNode(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
   return applyNode(selector, {...options, position: 'replaceChildren'});
 }
 
-export function applyNodeInnerHtml(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+export function innerHtmlNode(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
   return applyNode(selector, {...options, position: 'innerHtml'});
 }
 
-// export function applyNodeInnerHtmlLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
-//   return applyNode(selector, {...options, position: 'innerHtml', root: 'light'});
-// }
+export function innerHtmlLightNode(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerHtml', root: 'light'});
+}
 
-export function applyNodeInnerText(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
+export function innerHtmlShadowNode(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerHtml', root: 'shadow'});
+}
+
+export function innerTextNode(selector: string, options: Omit<ApplyNodeOptions, 'position'> = {}): MethodDecorator {
   return applyNode(selector, {...options, position: 'innerText'});
 }
 
-// export function applyNodeInnerTextLightDom(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
-//   return applyNode(selector, {...options, position: 'innerText', root: 'light'});
-// }
+export function innerTextLightNode(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerText', root: 'light'});
+}
+
+export function innerTextShadowNode(selector: string, options: Omit<ApplyNodeOptions, 'position' | 'root'> = {}): MethodDecorator {
+  return applyNode(selector, {...options, position: 'innerText', root: 'shadow'});
+}
+
+
+
+export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, ApplyNodeMetadata> => {
+  const result = new Map<string | symbol, ApplyNodeMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, ApplyNodeMetadata>>(APPLY_NODE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};

package/src/decorators/applyProperty.ts

@@ -0,0 +1,302 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit, getElementConfig } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions, HelperHostSet } from '../types';
+
+export interface PropertyOptions extends SwcQueryOptions {
+  name?: string | symbol;
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+}
+
+export interface PropertyMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  targetPropertyKey: string | symbol;
+  options: PropertyOptions;
+  type: 'property' | 'method';
+}
+
+export const PROPERTY_METADATA_KEY = Symbol.for('simple-web-component:property');
+
+// ============================================
+// Utilities
+// ============================================
+
+/**
+ * Resolve target elements based on selector and options
+ * Handles special selectors ($this, $host, etc.) and CSS selectors
+ * Returns HTMLElement[] but can include Window and Document for property access
+ */
+export const resolvePropertyTargets = (inst: any, selector: string, options: PropertyOptions): any[] => {
+  const conf = getElementConfig(inst);
+  const currentWin = conf.window;
+  const r = options.root || 'auto';
+  const results: any[] = [];
+
+  const applyRoot = (target: any) => {
+    if (!target) return;
+    if (r === 'auto') {
+      results.push(target);
+    } else {
+      if (r === 'light' || r === 'all') results.push(target);
+      if ((r === 'shadow' || r === 'all') && target.shadowRoot) results.push(target.shadowRoot);
+    }
+  };
+
+  if (selector === '$this' || !selector) {
+    applyRoot(inst);
+  } else if (selector === '$window') {
+    results.push(currentWin);
+  } else if (selector === '$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);
+    else {
+      if (r === 'shadow') {
+        const found = inst.shadowRoot?.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'light') {
+        const found = inst.querySelectorAll(selector);
+        if (found) results.push(...found);
+      } else if (r === 'all') {
+        const sMatch = inst.shadowRoot?.querySelectorAll(selector);
+        const lMatch = inst.querySelectorAll(selector);
+        if (sMatch) results.push(...sMatch);
+        if (lMatch) results.push(...lMatch);
+      } else {
+        const found = (inst.shadowRoot || inst).querySelectorAll(selector);
+        if (found) results.push(...found);
+      }
+    }
+  }
+  return results;
+};
+
+/**
+ * @applyProperty decorator - set/get element properties
+ * 
+ * Usage:
+ * - @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
+ * - 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 {
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    // ensureInit(target as any);
+    
+    const constructor = target.constructor;
+    const metaType: 'property' | 'method' = descriptor && typeof descriptor.value === 'function' ? 'method' : 'property';
+    
+    // Parse arguments
+    let finalOptions: PropertyOptions = {};
+    let targetPropertyKey: string | symbol;
+    
+    if (typeof targetPropertyKeyOrOptions === 'string' || typeof targetPropertyKeyOrOptions === 'symbol') {
+      // applyProperty('selector', 'propertyName', options?)
+      targetPropertyKey = targetPropertyKeyOrOptions;
+      finalOptions = options || {};
+    } else if (targetPropertyKeyOrOptions) {
+      // applyProperty('selector', options)
+      finalOptions = targetPropertyKeyOrOptions;
+      targetPropertyKey = finalOptions.name || propertyKey;
+    } else {
+      // applyProperty('selector')
+      targetPropertyKey = propertyKey;
+    }
+
+    // Store metadata
+    let metaList = ReflectUtils.getOwnMetadata(PROPERTY_METADATA_KEY, constructor) as PropertyMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(PROPERTY_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({
+      propertyKey,
+      selector,
+      targetPropertyKey,
+      options: finalOptions,
+      type: metaType
+    });
+
+    // Helper: apply resolved value to targets
+    const applyValueToTargets = (inst: any, resolvedValue: any) => {
+      if (resolvedValue === undefined) return resolvedValue;
+
+      const targetEls = resolvePropertyTargets(inst, selector, finalOptions);
+      const conf = getElementConfig(inst);
+      const currentWin = conf.window;
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, inst);
+
+      targetEls.forEach(targetEl => {
+        // Apply filter if provided
+        if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, { currentThis: inst, helper: hostSet })) {
+          return;
+        }
+
+        const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
+        (targetEl as any)[targetPropertyKey] = resolvedRes;
+      });
+
+      return resolvedValue;
+    };
+
+    // Method decorator: wrap method to apply its return value to properties
+    if (descriptor && typeof descriptor.value === 'function') {
+      const original = descriptor.value;
+      descriptor.value = function (...args: any[]) {
+        ensureInit(this);
+        const res = (original as any).apply(this, args);
+
+        if (res instanceof Promise) {
+          return res.then((v: any) => { applyValueToTargets(this, v); return v; });
+        } else {
+          applyValueToTargets(this, res);
+          return res;
+        }
+      };
+      return;
+    }
+
+    // Property decorator: define getter/setter to proxy to element properties
+    Object.defineProperty(target, propertyKey, {
+      configurable: true,
+      enumerable: true,
+      get(this: any) {
+        ensureInit(this);
+        // Read from matched elements
+        const targetEls = resolvePropertyTargets(this, selector, finalOptions);
+        const conf = getElementConfig(this);
+        const currentWin = conf.window;
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+
+        // Apply filter
+        const filtered = targetEls.filter(el => {
+          if (finalOptions.filter && !finalOptions.filter(el, (el as any)[targetPropertyKey], { currentThis: this, helper: hostSet })) {
+            return false;
+          }
+          return true;
+        });
+
+        const values = filtered.map(el => (el as any)[targetPropertyKey]);
+        return values.length === 1 ? values[0] : values;
+      },
+      set(this: any, value: any) {
+        ensureInit(this);
+        applyValueToTargets(this, value);
+      }
+    });
+  };
+}
+
+// ============================================
+// Convenience Aliases
+// ============================================
+
+/**
+ * @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' })
+ */
+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);
+  }
+  
+  // 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, {});
+  }
+}
+
+/**
+ * @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' })
+ */
+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;
+  }
+}
+
+
+
+// ============================================
+// Metadata Helpers
+// ============================================
+
+export const findAllPropertyMetadata = (target: any): PropertyMetadata[] => {
+  const actualTarget = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.findAllMetadata<PropertyMetadata[]>(PROPERTY_METADATA_KEY, actualTarget).flat();
+};
+
+// Backward compatibility alias
+export const findAllPropertyApplyMetadata = (target: any): Map<string | symbol, PropertyMetadata> => {
+  const result = new Map<string | symbol, PropertyMetadata>();
+  findAllPropertyMetadata(target).forEach(meta => {
+    result.set(meta.propertyKey, meta);
+  });
+  return result;
+};
+
+
+export default applyProperty;