@dooboostore/simple-web-component 1.0.24 → 1.0.26

package/src/decorators/applyNode.ts

@@ -1,13 +1,22 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcRootType } from '../types';
-import {SwcUtils} from "../utils/Utils";
+import { HelperHostSet, SwcRootType } from '../types';
+import { SwcUtils } from "../utils/Utils";
 
 export type ApplyNodePosition = 'beforeBegin' | 'afterBegin' | 'beforeEnd' | 'afterEnd' | 'replace' | 'replaceChildren' | 'innerHtml' | 'innerText' | 'remove';
 
 export interface ApplyNodeOptions {
   position?: ApplyNodePosition;
   root?: SwcRootType;
+  /**
+   * Filter function to determine whether to perform DOM operation.
+   * If it returns false, the operation is skipped.
+   */
+  filter?: (target: HTMLElement | ShadowRoot, newValue: any, helper: HelperHostSet) => boolean;
+  /**
+   * Optional loading content to display while an async method is executing.
+   */
+  loading?: (helper: HelperHostSet) => any;
 }
 
 export interface ApplyNodeMetadata {
@@ -16,7 +25,7 @@ export interface ApplyNodeMetadata {
   options: ApplyNodeOptions;
 }
 
-export const APPLY_NODE_METADATA_KEY = Symbol('simple-web-component:apply-node');
+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];
@@ -26,37 +35,41 @@ const normalizeNodes = (res: any, doc: Document): Node[] => {
   });
 };
 
+const applyToDom = (targetEl: any, res: any, pos: ApplyNodePosition, doc: Document) => {
+    if (!targetEl) return;
+    
+    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 isShadowRoot = targetEl instanceof ShadowRoot;
+    const nodes = normalizeNodes(res, doc);
+    if (pos === 'replace') {
+      if (!isShadowRoot) targetEl.replaceWith(...nodes);
+    } else if (pos === 'replaceChildren') {
+      targetEl.replaceChildren(...nodes);
+    } else {
+      if (pos === 'beforeEnd') 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);
+    }
+};
+
 /**
  * @applyNode decorator to surgically add/replace nodes to a target element.
- * 
- * Usage examples:
- *   @applyNode('#list') addItem() { return '<li>New Item</li>'; }  // append at end
- *   @applyNode('#header', { position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }  // prepend at start
- *   @applyNode('#item', { position: 'replace' }) replaceItem() { return '<div>Replaced</div>'; }  // replace element
- *   @applyNode('#list', { position: 'replaceChildren' }) updateList() { return [item1, item2]; }  // replace all children
- *   @applyNode('#notification', { position: 'remove' }) dismissNotification() { return shouldDismiss; }  // remove if truthy
- *   @applyNode('.items', { position: 'remove', root: 'shadow' }) clearItems() { return true; }  // remove shadow DOM elements
- * 
- * Positions:
- *   - 'beforeEnd' (default): Append at end of target
- *   - 'afterBegin': Prepend at start of target
- *   - 'beforeBegin': Insert before target
- *   - 'afterEnd': Insert after target
- *   - 'replace': Replace the entire target element
- *   - 'replaceChildren': Replace all children of target element
- *   - 'innerHtml': Set target's innerHTML
- *   - 'innerText': Set target's innerText
- *   - 'remove': Remove target element if returned value is truthy
- * 
- * Root Options:
- *   - 'auto' (default): Search shadow DOM first, then light DOM
- *   - 'shadow': Search only in shadow DOM
- *   - 'light': Search only in light DOM
- *   - 'all': Use both (shadow preferred for query, both for remove)
  */
 export function applyNode(selector: string, options: ApplyNodeOptions = { position: 'beforeEnd' }): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-    const constructor = target.constructor;
+  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = targetObj.constructor;
     let metaList = ReflectUtils.getOwnMetadata(APPLY_NODE_METADATA_KEY, constructor) as Map<string | symbol, ApplyNodeMetadata>;
     if (!metaList) {
       metaList = new Map<string | symbol, ApplyNodeMetadata>();
@@ -65,113 +78,71 @@ export function applyNode(selector: string, options: ApplyNodeOptions = { positi
     metaList.set(propertyKey, { propertyKey, selector, options });
 
     const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
+    descriptor.value = function (...args: any[]) {
       ensureInit(this);
-      const res = await original.apply(this, args);
-      if (res !== undefined) {
-        const conf = getElementConfig(this);
-        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-        const currentDoc = currentWin.document;
-
-        const pos = options.position || 'beforeEnd';
+      
+      const conf = getElementConfig(this);
+      const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+      const currentDoc = currentWin.document;
+      const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+      
+      const getTarget = () => {
         const r = options.root || 'auto';
         const applyRoot = (t: any) => {
-          if (!t || !(t instanceof HTMLElement)) return t;
+          if (!t) return t;
           if (r === 'auto') return t.shadowRoot || t;
           if (r === 'shadow') return t.shadowRoot;
           if (r === 'light') return t;
-          if (r === 'all') return t.shadowRoot || t; // query only returns one, so shadow preferred
+          if (r === 'all') return t.shadowRoot || t;
           return t;
         };
 
-        const hostSet = SwcUtils.getHostSet(this);
-        // const getTargetRoot = () => {
-        //   if (r === 'shadow') return this.shadowRoot;
-        //   if (r === 'light') return this as any;
-        //   if (r === 'all') return this.shadowRoot || (this as any);
-        //   return this.shadowRoot || (this as any); // auto
-        // };
-
-        if (pos === 'remove') {
-          // Remove element(s) if returned value is truthy
-          if (res) {
-            if (selector === ':host' || !selector) {
-              if (r === 'shadow' && this.shadowRoot) {
-                // Remove all children from shadow DOM
-                this.shadowRoot.replaceChildren();
-              } else {
-                // Remove the component itself
-                (this as any).remove();
-              }
-            } else {
-              const targetRoot = applyRoot(this);
-              if (targetRoot) {
-                const targets = targetRoot.querySelectorAll(selector);
-                targets.forEach((el: Element) => el.remove());
-              }
-            }
-          }
-        } else {
-          let targetEl: any = null;
+        if (selector === ':host') return applyRoot(this);
+        if (selector === ':parentHost') return applyRoot(hostSet.$parentHost);
+        if (selector === ':appHost') return applyRoot(hostSet.$appHost);
+        if (selector === ':firstHost') return applyRoot(hostSet.$firstHost);
+        if (selector === ':lastHost') return applyRoot(hostSet.$lastHost);
+        
+        const targetRoot = applyRoot(this);
+        return targetRoot ? targetRoot.querySelector(selector) : null;
+      };
 
-          if (selector === ':host') {
-            targetEl =  applyRoot(this)
-          } else if (selector === ':parentHost') {
-            targetEl =  applyRoot(hostSet.$parentHost)
-          } else if (selector === ':appHost') {
-            targetEl =  applyRoot(hostSet.$appHost)
-          } else if (selector === ':firstHost') {
-            targetEl =  applyRoot(hostSet.$firstHost)
-          } else if (selector === ':lastHost') {
-            targetEl =  applyRoot(hostSet.$lastHost)
-          } else if (selector === ':firstAppHost') {
-            targetEl =  applyRoot(hostSet.$firstHost)
-          } else if (selector === ':lastAppHost') {
-            targetEl =  applyRoot(hostSet.$lastAppHost);
-          } else {
-            const targetRoot = applyRoot(this);
-            targetEl = targetRoot ? targetRoot.querySelector(selector) : null;
-          }
+      const targetEl = getTarget();
+      const res = original.apply(this, args);
 
-          if (targetEl) {
-            const isShadowRoot = targetEl instanceof ShadowRoot;
-            const nodes = normalizeNodes(res, currentDoc);
+      const runApply = (target: any, val: any) => {
+        const pos = options.position || 'beforeEnd';
+        
+        // Intelligent Default Filter
+        const defaultFilter = (t: any, v: any) => {
+            if (v instanceof Node) return !t.contains(v);
+            if (pos === 'innerHtml' && typeof v === 'string') return t.innerHTML !== v;
+            if (pos === 'replaceChildren' && v instanceof Node) return !t.contains(v);
+            return true;
+        };
+        
+        const activeFilter = options.filter || defaultFilter;
+        
+        if (activeFilter(target, val, hostSet)) {
+            applyToDom(target, val, pos, currentDoc);
+        }
+      };
 
-            if (pos === 'replace') {
-              // ShadowRoot doesn't support replaceWith
-              if (!isShadowRoot) {
-                targetEl.replaceWith(...nodes);
-              }
-            } else if (pos === 'replaceChildren') {
-              // Replace all children of target element
-              targetEl.replaceChildren(...nodes);
-            } else if (pos === 'innerHtml') {
-              // Set innerHTML
-              targetEl.innerHTML = res !== undefined && res !== null ? String(res) : '';
-            } else if (pos === 'innerText') {
-              // Set innerText
-              if (targetEl.innerText !== undefined) {
-                targetEl.innerText = res !== undefined && res !== null ? String(res) : '';
-              }
-            } else {
-              /*
-                    <!-- beforebegin -->
-                    <p>
-                      <!-- afterbegin -->
-                      foo
-                      <!-- beforeend -->
-                    </p>
-                    <!-- afterend -->
-               */
-              if (pos === 'beforeEnd') 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);
-            }
+      if (res instanceof Promise) {
+          // 비동기일 때만 로딩 표시
+          if (targetEl && options.loading) {
+              const loadingRes = options.loading.call(this, hostSet);
+              applyToDom(targetEl, loadingRes, options.position || 'beforeEnd', currentDoc);
           }
-        }
+
+          return res.then(finalRes => {
+              if (finalRes !== undefined && targetEl) runApply(targetEl, finalRes);
+              return finalRes;
+          });
+      } else {
+          if (res !== undefined && targetEl) runApply(targetEl, res);
+          return res;
       }
-      return res;
     };
   };
 }
@@ -187,223 +158,34 @@ export const findAllApplyNodeMetadata = (target: any): Map<string | symbol, Appl
   return result;
 };
 
-/**
- * @applyNodeHost decorator - simplified version of @applyNode for :host selector
- * Usage: @applyNodeHost addItem() { return '<li>New Item</li>'; }
- * Usage: @applyNodeHost() addItem() { return '<li>New Item</li>'; }
- * Usage: @applyNodeHost({ position: 'afterBegin' }) prependItem() { return '<h1>Title</h1>'; }
- */
-export function applyNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function applyNodeHost(): MethodDecorator;
 export function applyNodeHost(options: ApplyNodeOptions): MethodDecorator;
+export function applyNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function applyNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  // Direct decorator usage: @applyNodeHost (no parentheses)
-  console.log('vvvvv')
-  if (propertyKey !== undefined && typeof propertyKey === 'string' || typeof propertyKey === 'symbol') {
-    return applyNode(':host', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
-  }
-
-  // @applyNodeHost() or @applyNodeHost(options)
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    const options = targetOrOptions as ApplyNodeOptions;
-    return applyNode(':host', { ...options, position: options.position || 'beforeEnd' });
-  } else {
-    // @applyNodeHost() - use default position
-    return applyNode(':host', { position: 'beforeEnd' });
-  }
-}
-
-// Convenience decorators for specific positions
-
-/**
- * @applyBeforeBeginNode - Insert before target element
- */
-export function applyBeforeBeginNode(selector: string): MethodDecorator;
-export function applyBeforeBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyBeforeBeginNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'beforeBegin' });
-}
-
-/**
- * @applyAfterBeginNode - Prepend to target element
- */
-export function applyAfterBeginNode(selector: string): MethodDecorator;
-export function applyAfterBeginNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyAfterBeginNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'afterBegin' });
-}
-
-/**
- * @applyBeforeEndNode - Append to target element (default)
- */
-export function applyBeforeEndNode(selector: string): MethodDecorator;
-export function applyBeforeEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyBeforeEndNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'beforeEnd' });
-}
-
-/**
- * @applyAfterEndNode - Insert after target element
- */
-export function applyAfterEndNode(selector: string): MethodDecorator;
-export function applyAfterEndNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyAfterEndNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'afterEnd' });
-}
-
-/**
- * @applyReplaceNode - Replace entire target element
- */
-export function applyReplaceNode(selector: string): MethodDecorator;
-export function applyReplaceNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'replace' });
-}
-
-/**
- * @applyReplaceChildrenNode - Replace all children of target element
- */
-export function applyReplaceChildrenNode(selector: string): MethodDecorator;
-export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceChildrenNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'replaceChildren' });
-}
-
-/**
- * @applyInnerHtmlNode - Set target's innerHTML
- */
-export function applyInnerHtmlNode(selector: string): MethodDecorator;
-export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerHtmlNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'innerHtml' });
-}
-
-/**
- * @applyInnerTextNode - Set target's innerText
- */
-export function applyInnerTextNode(selector: string): MethodDecorator;
-export function applyInnerTextNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerTextNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'innerText' });
-}
-
-/**
- * @applyRemoveNode - Remove target element if truthy
- */
-export function applyRemoveNode(selector: string): MethodDecorator;
-export function applyRemoveNode(selector: string, options: ApplyNodeOptions): MethodDecorator;
-export function applyRemoveNode(selector: string, options?: ApplyNodeOptions): any {
-  return applyNode(selector, { ...options, position: 'remove' });
-}
-
-// Host versions
-
-/**
- * @applyBeforeBeginNodeHost - Insert before :host
- */
-export function applyBeforeBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;
-export function applyBeforeBeginNodeHost(): MethodDecorator;
-export function applyBeforeBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyBeforeBeginNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'beforeBegin' });
-    return decorator(targetOrOptions, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(targetOrOptions as ApplyNodeOptions || {}), position: 'beforeBegin' });
-}
-
-/**
- * @applyAfterBeginNodeHost - Prepend to :host
- */export function applyAfterBeginNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterBeginNodeHost(): MethodDecorator;
-export function applyAfterBeginNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyAfterBeginNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'afterBegin' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterBegin' });
-}
-
-/**
- * @applyBeforeEndNodeHost - Append to :host
- */export function applyBeforeEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyBeforeEndNodeHost(): MethodDecorator;
-export function applyBeforeEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyBeforeEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'beforeEnd' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'beforeEnd' });
+  if (propertyKey !== undefined) return applyNode(':host', { position: 'beforeEnd' })(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode(':host', { position: 'beforeEnd', ...opt });
 }
 
-/**
- * @applyAfterEndNodeHost - Insert after :host
- */export function applyAfterEndNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyAfterEndNodeHost(): MethodDecorator;
-export function applyAfterEndNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyAfterEndNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'afterEnd' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'afterEnd' });
-}
-
-/**
- * @applyReplaceNodeHost - Replace :host
- */export function applyReplaceNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceNodeHost(): MethodDecorator;
-export function applyReplaceNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'replace' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replace' });
-}
-
-/**
- * @applyReplaceChildrenNodeHost - Replace children of :host
- */export function applyReplaceChildrenNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyReplaceChildrenNodeHost(): MethodDecorator;
 export function applyReplaceChildrenNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyReplaceChildrenNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'replaceChildren' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'replaceChildren' });
+export function applyReplaceChildrenNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyReplaceChildrenNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) return applyNode(':host', { position: 'replaceChildren' })(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode(':host', { position: 'replaceChildren', ...opt });
 }
 
-/**
- * @applyInnerHtmlNodeHost - Set :host innerHTML
- */export function applyInnerHtmlNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerHtmlNodeHost(): MethodDecorator;
 export function applyInnerHtmlNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerHtmlNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'innerHtml' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerHtml' });
+export function applyInnerHtmlNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function applyInnerHtmlNodeHost(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  if (propertyKey !== undefined) return applyNode(':host', { position: 'innerHtml' })(targetOrOptions, propertyKey, descriptor);
+  const opt = targetOrOptions || {};
+  return applyNode(':host', { position: 'innerHtml', ...opt });
 }
 
-/**
- * @applyInnerTextNodeHost - Set :host innerText
- */export function applyInnerTextNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyInnerTextNodeHost(): MethodDecorator;
-export function applyInnerTextNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyInnerTextNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'innerText' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'innerText' });
+export function applyReplaceChildrenNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+    return applyNode(selector, { ...options, position: 'replaceChildren' });
 }
 
-/**
- * @applyRemoveNodeHost - Remove :host if truthy
- */export function applyRemoveNodeHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): any;export function applyRemoveNodeHost(): MethodDecorator;
-export function applyRemoveNodeHost(options: ApplyNodeOptions): MethodDecorator;
-export function applyRemoveNodeHost(optionsOrTarget?: ApplyNodeOptions | any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  if (propertyKey !== undefined) {
-    const decorator = applyNode(':host', { position: 'remove' });
-    return decorator(optionsOrTarget, propertyKey, descriptor);
-  }
-  return applyNode(':host', { ...(optionsOrTarget as ApplyNodeOptions || {}), position: 'remove' });
+export function applyInnerHtmlNode(selector: string, options: ApplyNodeOptions = {}): MethodDecorator {
+    return applyNode(selector, { ...options, position: 'innerHtml' });
 }

package/src/decorators/applyStyle.ts

@@ -0,0 +1,128 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions, HelperHostSet } from '../types';
+
+export type StyleAction = 'set' | 'update' | 'remove';
+
+export interface StyleApplyOptions extends SwcQueryOptions {}
+
+export interface StyleApplyMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  action: StyleAction;
+  options: StyleApplyOptions;
+}
+
+export const STYLE_METADATA_KEY = Symbol.for('simple-web-component:style');
+
+function createStyleDecorator(action: StyleAction) {
+  return (selector: string, 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>;
+      if (!metaList) {
+        metaList = new Map<string | symbol, StyleApplyMetadata>();
+        ReflectUtils.defineMetadata(STYLE_METADATA_KEY, metaList, constructor);
+      }
+      metaList.set(propertyKey, { propertyKey, selector, action, options });
+
+      const original = descriptor.value;
+      descriptor.value = async 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 = options.root || 'auto';
+          const targetEls: 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;
+
+            if (action === 'set' || action === 'update') {
+              if (action === 'set') targetEl.style.cssText = '';
+              
+              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                  const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+                  if (finalVal === null || finalVal === undefined) {
+                    targetEl.style.removeProperty(prop);
+                  } else {
+                    targetEl.style[prop as any] = String(finalVal);
+                  }
+                });
+              } else if (typeof resolvedRes === 'string') {
+                targetEl.style.cssText = resolvedRes;
+              }
+            } else if (action === 'remove') {
+              if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+                Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                  const shouldRemove = typeof val === 'function' ? val(targetEl, hostSet) : !!val;
+                  if (shouldRemove) {
+                    targetEl.style.removeProperty(prop);
+                  }
+                });
+              } else {
+                const props = Array.isArray(resolvedRes) ? resolvedRes : [resolvedRes];
+                props.forEach(p => targetEl.style.removeProperty(String(p)));
+              }
+            }
+          });
+        }
+        return res;
+      };
+      return descriptor;
+    };
+  };
+}
+
+export function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
+  return createStyleDecorator(action)(selector, 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);
+
+// Host versions
+export function applyStyleHost(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
+  return createStyleDecorator(action)(':host', options);
+}
+export const setStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('set')(':host', options);
+export const updateStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('update')(':host', options);
+export const removeStyleHost = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')(':host', options);
+
+export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {
+  const result = new Map<string | symbol, StyleApplyMetadata>();
+  const maps = ReflectUtils.findAllMetadata<Map<string | symbol, StyleApplyMetadata>>(STYLE_METADATA_KEY, target);
+  maps.forEach(map => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};