@dooboostore/simple-web-component 1.0.48 → 1.0.49

package/src/decorators/query.ts

@@ -1,36 +1,110 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions, HelperHostSet } from '../types';
+import { SwcQueryOptions, SwcRootType, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
 
-export interface QueryOptions extends SwcQueryOptions {
-  /**
-   * Filter function to determine whether to include the element.
-   * If it returns false, the element is skipped.
-   */
+export type QueryPick = 'first' | 'last' | 'all' | 'even' | 'odd' | number;
+
+export interface QueryBaseOptions {
+  // 어떤 요소를 고를지 — 기본 'first'(단일). 'all'/'even'/'odd'는 배열, number는 인덱스(단일)
+  pick?: QueryPick;
   filter?: (target: HTMLElement, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
 }
+// 문자열 셀렉터 전용 — root 허용
+export type QueryOptions = QueryBaseOptions & SwcQueryOptions;
+// 함수 셀렉터 전용 — root 금지
+export type QueryNonQueryOptions = QueryBaseOptions;
+
+export type QueryFnSelector = SwcFnSelector;
+export type QuerySelector = SwcSelector;
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type QueryOptionsOf<S extends QuerySelector> = S extends string ? QueryOptions : QueryNonQueryOptions;
 
 export interface QueryMetadata {
   propertyKey: string | symbol;
-  selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null);
-  options: QueryOptions ;
+  selector: QuerySelector;
+  options: QueryOptions;
 }
 
 export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
 
+/**
+ * 셀렉터를 해석해 매칭된 모든 요소를 배열로 반환한다 (query/queryAll 공용).
+ * $window/$document는 요소가 아니므로 여기서 처리하지 않는다.
+ */
+export const resolveQueryElements = (
+  inst: any,
+  selector: QuerySelector,
+  options: QueryOptions,
+  win: Window
+): HTMLElement[] => {
+  const hostSet = SwcUtils.getHelperAndHostSet(win, inst);
+  let all: HTMLElement[] = [];
+
+  if (typeof selector === 'function') {
+    const result = (selector as any)(inst, hostSet);
+    if (result instanceof win.NodeList) all = Array.from(result as NodeList).filter(e => e instanceof win.HTMLElement) as HTMLElement[];
+    else if (Array.isArray(result)) all = (result as any[]).filter(e => e instanceof win.HTMLElement) as HTMLElement[];
+    else if (result instanceof win.HTMLElement) all = [result as HTMLElement];
+  } else if (typeof selector === 'string') {
+    const r = (options as any)?.root || 'auto';
+    if (selector === '$this') all = [inst as HTMLElement];
+    else if (selector === '$host') all = hostSet.$host ? [hostSet.$host] : [];
+    else if (selector === '$parentHost') all = hostSet.$parentHost ? [hostSet.$parentHost] : [];
+    else if (selector === '$appHost') all = hostSet.$appHost ? [hostSet.$appHost as any] : [];
+    else if (selector === '$firstHost') all = hostSet.$firstHost ? [hostSet.$firstHost] : [];
+    else if (selector === '$lastHost') all = hostSet.$lastHost ? [hostSet.$lastHost] : [];
+    else if (selector === '$firstAppHost') all = hostSet.$firstAppHost ? [hostSet.$firstAppHost as any] : [];
+    else if (selector === '$lastAppHost') all = hostSet.$lastAppHost ? [hostSet.$lastAppHost as any] : [];
+    else if (selector === '$hosts') all = hostSet.$hosts.filter(Boolean);
+    else if (selector === '$appHosts') all = hostSet.$appHosts.filter(Boolean) as any[];
+    else {
+      const scopes: any[] = [];
+      if (r === 'auto') scopes.push(inst.shadowRoot || inst);
+      else if (r === 'light') scopes.push(inst);
+      else if (r === 'shadow' && inst.shadowRoot) scopes.push(inst.shadowRoot);
+      else if (r === 'all') { scopes.push(inst); if (inst.shadowRoot) scopes.push(inst.shadowRoot); }
+      for (const scope of scopes) {
+        const found = scope?.querySelectorAll?.(selector) as NodeListOf<HTMLElement> | undefined;
+        if (found?.length) all.push(...Array.from(found).filter(e => e instanceof win.HTMLElement));
+      }
+    }
+  }
+
+  if ((options as any)?.filter) {
+    all = all.filter(el => (options as any).filter(el, { currentThis: inst, helper: hostSet }));
+  }
+  return all;
+};
+
+/**
+ * 매칭된 요소 배열에서 pick 옵션에 따라 요소를 고른다.
+ * - 'first'(기본) / 'last' / number(인덱스) → 단일 요소
+ * - 'all' / 'even'(0,2,4...) / 'odd'(1,3,5...) → 배열
+ */
+export const pickElements = (
+  all: HTMLElement[],
+  pick: QueryPick
+): HTMLElement | HTMLElement[] | null => {
+  if (pick === 'all') return all;
+  if (pick === 'even') return all.filter((_, i) => i % 2 === 0);
+  if (pick === 'odd') return all.filter((_, i) => i % 2 === 1);
+  if (typeof pick === 'number') return all[pick] ?? null;
+  if (pick === 'last') return all.length ? all[all.length - 1] : null;
+  return all.length ? all[0] : null;
+};
+
 export function query(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
-export function query(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: QueryOptions): PropertyDecorator;
+export function query(selector: string, options?: QueryOptions): PropertyDecorator;
+export function query(selector: QueryFnSelector, options?: QueryNonQueryOptions): PropertyDecorator;
 export function query(options?: QueryOptions): PropertyDecorator;
 /**
- * @query decorator to inject a single element into a class property.
- * 
- * Supports both string selectors and function-based selectors:
- * - String selector: @query('#my-element')
- * - Function selector: @query((currentThis, helper) => currentThis.shadowRoot?.querySelector('.item'))
- * 
- * Supports filtering:
- * - @query('#my-element', { filter: (target, meta) => target.hasAttribute('active') })
+ * @query decorator — 클래스 필드에 요소를 주입한다.
+ *
+ * - 문자열 셀렉터: CSS / 특수 셀렉터($this,$host,$window,...), root 옵션으로 탐색 영역 지정
+ * - 함수 셀렉터: (currentThis, helper) => Node | NodeList | Element | Element[] | null (root 금지)
+ * - options.pick: 'first'(기본) | 'last' | 'all' | 'even' | 'odd' | number
  */
 export function query(selectorOrTarget?: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null) | Object, optionsOrPropertyKey?: QueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
   // Bare decorator: @query
@@ -50,118 +124,32 @@ export function query(selectorOrTarget?: string | ((currentThis: any, helper: He
         queries = [];
         ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
       }
-      queries.push({ propertyKey, selector: selectorOrTarget as any, options: optionsOrPropertyKey as QueryOptions || {} });
+      queries.push({ propertyKey, selector: selectorOrTarget as any, options: (optionsOrPropertyKey as QueryOptions) || {} });
 
       Object.defineProperty(targetObj, propertyKey, {
         get(this: HTMLElement) {
           ensureInit(this);
           const config = getElementConfig(this);
           const win = config?.window || window;
-          const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-          
-          // Resolve selector - can be string or function
-          let resolvedSelector: string;
-          let resolvedElement: HTMLElement | null = null;
-          
-          if (typeof selectorOrTarget === 'function') {
-            const result = (selectorOrTarget as any)(this, hostSet);
-            // If function returns a Node/Element, return it directly
-            if (result instanceof win.Node || result instanceof win.Element) {
-              resolvedElement = result instanceof win.HTMLElement ? (result as HTMLElement) : null;
-            }
-            // If function returns NodeList or Element[], return first element
-            else if (result instanceof win.NodeList || Array.isArray(result)) {
-              resolvedElement = result.length > 0 && result[0] instanceof win.HTMLElement ? (result[0] as HTMLElement) : null;
-            }
-          } else {
-            resolvedSelector = selectorOrTarget;
-
-            const r = (optionsOrPropertyKey as QueryOptions)?.root || 'auto';
-            const applyRoot = (t: any) => {
-              if (!t || !(t instanceof HTMLElement)) 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; 
-              return t;
-            };
-
-            // --- Special Selectors: HostSet ---
-            if (resolvedSelector === '$this') resolvedElement = applyRoot(this);
-            else if (resolvedSelector === '$host') resolvedElement = applyRoot(hostSet.$host);
-            else if (resolvedSelector === '$parentHost') resolvedElement = applyRoot(hostSet.$parentHost);
-            else if (resolvedSelector === '$appHost') resolvedElement = applyRoot(hostSet.$appHost);
-            else if (resolvedSelector === '$firstHost') resolvedElement = applyRoot(hostSet.$firstHost);
-            else if (resolvedSelector === '$lastHost') resolvedElement = applyRoot(hostSet.$lastHost);
-            else if (resolvedSelector === '$firstAppHost') resolvedElement = applyRoot(hostSet.$firstAppHost);
-            else if (resolvedSelector === '$lastAppHost') resolvedElement = applyRoot(hostSet.$lastAppHost);
-            // --- Special Selectors: Env ---
-            else if (resolvedSelector === '$window') return win;
-            else if (resolvedSelector === '$document') return win.document;
-            // --- Standard Selectors ---
-            else {
-              if (r === 'shadow') resolvedElement = this.shadowRoot ? (this.shadowRoot.querySelector(resolvedSelector) as HTMLElement | null) : null;
-              else if (r === 'light') resolvedElement = this.querySelector(resolvedSelector) as HTMLElement | null;
-              else if (r === 'all') {
-                const shadowMatch = this.shadowRoot ? (this.shadowRoot.querySelector(resolvedSelector) as HTMLElement | null) : null;
-                resolvedElement = shadowMatch || (this.querySelector(resolvedSelector) as HTMLElement | null);
-              }
-              else resolvedElement = ((this.shadowRoot || this).querySelector(resolvedSelector) as HTMLElement | null);
-            }
-          }
+          const options = (optionsOrPropertyKey as QueryOptions) || {};
 
-          // Apply filter if provided
-          if (resolvedElement instanceof win.HTMLElement && (optionsOrPropertyKey as QueryOptions)?.filter) {
-            const shouldInclude = (optionsOrPropertyKey as QueryOptions).filter!(resolvedElement, { currentThis: this, helper: hostSet });
-            if (!shouldInclude) {
-              return null;
-            }
-          }
+          // $window/$document는 요소가 아니므로 항상 단일 반환
+          if (typeof selectorOrTarget === 'string' && selectorOrTarget === '$window') return win;
+          if (typeof selectorOrTarget === 'string' && selectorOrTarget === '$document') return win.document;
 
-          return resolvedElement;
+          const all = resolveQueryElements(this, selectorOrTarget as QuerySelector, options, win);
+          return pickElements(all, options.pick ?? 'first');
         },
         set(this: HTMLElement, nv: any) {
           ensureInit(this);
-          if (nv === null || nv === undefined) {
+          if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
             const config = getElementConfig(this);
             const win = config?.window || window;
-            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
-            
-            // Resolve selector - can be string or function
-            if (typeof selectorOrTarget === 'function') {
-              // Get the element from function and remove it
-              const result = (selectorOrTarget as any)(this, hostSet);
-              if (result instanceof win.Element) {
-                (result as Element).remove();
-              } else if (result instanceof win.NodeList || Array.isArray(result)) {
-                const el = result.length > 0 ? result[0] : null;
-                if (el instanceof win.Element) {
-                  (el as Element).remove();
-                }
-              }
-              return;
-            }
-            
-            const resolvedSelector = selectorOrTarget;
-            
-            if (resolvedSelector.startsWith('$') && resolvedSelector !== '$this') return;
-
-            const r = (optionsOrPropertyKey as QueryOptions)?.root || 'auto';
-            const targets: Element[] = [];
-
-            if (r === 'shadow') {
-              if (this.shadowRoot?.querySelector(resolvedSelector)) targets.push(this.shadowRoot.querySelector(resolvedSelector)!);
-            } else if (r === 'light') {
-              if (this.querySelector(resolvedSelector)) targets.push(this.querySelector(resolvedSelector)!);
-            } else if (r === 'all') {
-              if (this.shadowRoot?.querySelector(resolvedSelector)) targets.push(this.shadowRoot.querySelector(resolvedSelector)!);
-              if (this.querySelector(resolvedSelector)) targets.push(this.querySelector(resolvedSelector)!);
-            } else {
-              const el = (this.shadowRoot || this).querySelector(resolvedSelector);
-              if (el) targets.push(el);
-            }
-
-            targets.forEach(t => t.remove());
+            const options = (optionsOrPropertyKey as QueryOptions) || {};
+            const all = resolveQueryElements(this, selectorOrTarget as QuerySelector, options, win);
+            const picked = pickElements(all, options.pick ?? 'first');
+            if (Array.isArray(picked)) picked.forEach(t => t.remove());
+            else if (picked) picked.remove();
           }
         },
         enumerable: true,
@@ -170,7 +158,7 @@ export function query(selectorOrTarget?: string | ((currentThis: any, helper: He
     };
   }
   // Without selector (defaults to $this)
-  return query('$this', selectorOrTarget as SwcQueryOptions);
+  return query('$this', selectorOrTarget as QueryOptions);
 }
 
 export const getQueryMetadata = (target: any): QueryMetadata[]  => {
@@ -178,25 +166,79 @@ export const getQueryMetadata = (target: any): QueryMetadata[]  => {
   return ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor) ?? [];
 };
 
+// ─── queryAll (query의 pick:'all' 편의 래퍼 — 호환용) ───
+export const QUERY_ALL_METADATA_KEY = QUERY_METADATA_KEY;
+
+export function queryAll(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
+export function queryAll(selector: string, options?: Omit<QueryOptions, 'pick'>): PropertyDecorator;
+export function queryAll(selector: QueryFnSelector, options?: Omit<QueryNonQueryOptions, 'pick'>): PropertyDecorator;
+export function queryAll(options?: Omit<QueryOptions, 'pick'>): PropertyDecorator;
+export function queryAll(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: PropertyDescriptor): any {
+  // bare(필드 직접 적용)는 query로 위임
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    return query(selectorOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
+    return query(selectorOrTarget, {...(optionsOrPropertyKey ?? {}), pick: 'all'});
+  }
+  return query({...(selectorOrTarget ?? {}), pick: 'all'});
+}
+
+export const getQueryAllMetadata = getQueryMetadata;
+
 // ─── root별 편의 데코레이터 ───
 
 /**
- * @queryShadow(selector, options?) — shadow DOM에서 단일 요소를 쿼리
+ * @queryShadow(selector, options?) — shadow DOM에서 요소를 쿼리
+ */
+export function queryShadow(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'shadow'});
+}
+
+/**
+ * @queryLight(selector, options?) — light DOM에서 요소를 쿼리
+ */
+export function queryLight(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'light'});
+}
+
+/**
+ * @queryAllRoots(selector, options?) — shadow+light 모두에서 요소를 쿼리 (pick 기본 first)
+ */
+export function queryAllRoots(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'all'});
+}
+
+/**
+ * @queryAllShadow(selector, options?) — shadow DOM에서 모든 매칭 요소를 배열로 쿼리
  */
-export function queryShadow(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
-  return query(selector, {...options ?? {}, root: 'shadow'});
+export function queryAllShadow(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'shadow', pick: 'all'});
 }
 
 /**
- * @queryLight(selector, options?) — light DOM에서 단일 요소를 쿼리
+ * @queryAllLight(selector, options?) — light DOM에서 모든 매칭 요소를 배열로 쿼리
  */
-export function queryLight(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
-  return query(selector, {...options ?? {}, root: 'light'});
+export function queryAllLight(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'light', pick: 'all'});
 }
 
 /**
- * @queryAll(selector, options?) — shadow+light 모두에서 요소를 쿼리
+ * @queryAllAll(selector, options?) — shadow+light 모두에서 모든 매칭 요소를 배열로 쿼리
  */
-export function queryAllRoots(selector: string | ((currentThis: any, helper: HelperHostSet) => Node | NodeList | Element | Element[] | null), options?: Omit<QueryOptions, 'root'>): PropertyDecorator {
-  return query(selector, {...options ?? {}, root: 'all'});
+export function queryAllAll(selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator {
+  return query(selector as any, {...options ?? {}, root: 'all', pick: 'all'});
 }
+
+/**
+ * @queryIn(root, pick?) — root + pick 조합 팩토리.
+ * first/last/even/odd/all/number를 모두 지원하는 데코레이터를 생성한다.
+ *
+ * @example
+ * @queryIn('shadow', 'even')('.item')   // shadow DOM 짝수 인덱스들
+ * @queryIn('light', 2)('.item')         // light DOM 3번째 요소
+ * @queryIn('all')('.item')              // root all, pick 기본 first
+ */
+export const queryIn = (root: SwcRootType, pick?: QueryPick) =>
+  (selector: string | QueryFnSelector, options?: QueryBaseOptions): PropertyDecorator =>
+    query(selector as any, {...options ?? {}, root, ...(pick !== undefined ? {pick} : {})});

package/src/decorators/resizeObserver.ts

@@ -1,35 +1,41 @@
 import { ReflectUtils } from '@dooboostore/core';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
-import { EventListenerSelector } from './addEventListener';
-
-export interface ResizeObserverOptions extends SwcQueryOptions {
-  // 관찰 대상 셀렉터. 기본값 $this (컴포넌트 자신)
-  // delegate: true 인 경우 루트에서 매칭 요소들의 크기 변화를 감지 (동적 요소 포함)
-  delegate?: boolean;
-  // ResizeObserver box 옵션
+import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
+
+// 공통 옵션 — root·delegate 없음
+export interface ResizeObserverBaseOptions {
   box?: 'content-box' | 'border-box' | 'device-pixel-content-box';
   filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
-  // observer 해제(disconnected) 시 호출되는 콜백. 첫 번째 인자는 observe된 target element, 두 번째는 사용자 옵션 객체.
   removeObserver?: (target: Element, optionValue: ResizeObserverOptions) => void;
 }
 
+// 문자열 셀렉터 전용 — root·delegate 허용
+export type ResizeObserverQueryOptions = ResizeObserverBaseOptions & SwcQueryOptions & { delegate?: boolean };
+// 함수 셀렉터 전용 — root·delegate 금지
+export type ResizeObserverNonQueryOptions = ResizeObserverBaseOptions;
+// 내부 저장/해석용
+export type ResizeObserverOptions = ResizeObserverQueryOptions;
+
+// 셀렉터 종류에 따라 옵션 타입 분기
+export type ResizeObserverOptionsOf<S extends SwcSelector> = S extends string ? ResizeObserverQueryOptions : ResizeObserverNonQueryOptions;
+
 export interface ResizeObserverMetadata {
   propertyKey: string | symbol;
-  selector: EventListenerSelector;
+  selector: SwcSelector;
   options: ResizeObserverOptions;
 }
 
 export const RESIZE_OBSERVER_METADATA_KEY = Symbol.for('simple-web-component:resize-observer');
 
-export function resizeObserver(target: SpecialSelector, options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserver(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserver(options?: ResizeObserverOptions): MethodDecorator;
+export function resizeObserver(target: SpecialSelector, options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserver(selector: string, options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserver(selector: SwcFnSelector, options?: ResizeObserverNonQueryOptions): MethodDecorator;
+export function resizeObserver(options?: ResizeObserverQueryOptions): MethodDecorator;
 /**
  * @resizeObserver decorator to observe element size changes.
  */
-export function resizeObserver(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+export function resizeObserver(selectorOrOptions?: SwcSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
-    let selector: EventListenerSelector = '$this';
+    let selector: SwcSelector = '$this';
     let options: ResizeObserverOptions = {};
 
     if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
@@ -52,73 +58,73 @@ export function resizeObserver(selectorOrOptions?: EventListenerSelector | Resiz
   };
 }
 
-export function resizeObserverThis(options?: ResizeObserverOptions): MethodDecorator {
+export function resizeObserverThis(options?: ResizeObserverQueryOptions): MethodDecorator {
   return resizeObserver('$this', options);
 }
 
-// ─── root별 delegate 헬퍼 ───
+// ─── root별 delegate 헬퍼 (root 주입 → 문자열 셀렉터 전용) ───
 
-export function resizeObserverDelegateLight(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateLight(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateLight(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+export function resizeObserverDelegateLight(selector: string, options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateLight(options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateLight(selectorOrOptions?: string | Omit<ResizeObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light', delegate: true});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'light', delegate: true});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'light', delegate: true});
 }
 
-export function resizeObserverDelegateShadow(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateShadow(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateShadow(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+export function resizeObserverDelegateShadow(selector: string, options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateShadow(options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateShadow(selectorOrOptions?: string | Omit<ResizeObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow', delegate: true});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'shadow', delegate: true});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'shadow', delegate: true});
 }
 
-export function resizeObserverDelegateAll(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateAll(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegateAll(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+export function resizeObserverDelegateAll(selector: string, options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateAll(options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegateAll(selectorOrOptions?: string | Omit<ResizeObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all', delegate: true});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'all', delegate: true});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'all', delegate: true});
 }
 
-export function resizeObserverDelegate(selector: EventListenerSelector, options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegate(options?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator;
-export function resizeObserverDelegate(selectorOrOptions?: EventListenerSelector | Omit<ResizeObserverOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverOptions, 'delegate'>): MethodDecorator {
+export function resizeObserverDelegate(selector: string, options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegate(options?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function resizeObserverDelegate(selectorOrOptions?: string | Omit<ResizeObserverQueryOptions, 'delegate'>, maybeOptions?: Omit<ResizeObserverQueryOptions, 'delegate'>): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'auto', delegate: true});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'auto', delegate: true});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'auto', delegate: true});
 }
 
 // ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
 
-export function resizeObserverLight(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverLight(options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverLight(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+export function resizeObserverLight(selector: string, options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverLight(options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverLight(selectorOrOptions?: string | ResizeObserverQueryOptions, maybeOptions?: ResizeObserverQueryOptions): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'light'});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'light'});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'light'});
 }
 
-export function resizeObserverShadow(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverShadow(options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverShadow(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+export function resizeObserverShadow(selector: string, options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverShadow(options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverShadow(selectorOrOptions?: string | ResizeObserverQueryOptions, maybeOptions?: ResizeObserverQueryOptions): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'shadow'});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'shadow'});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'shadow'});
 }
 
-export function resizeObserverAll(selector: EventListenerSelector, options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverAll(options?: ResizeObserverOptions): MethodDecorator;
-export function resizeObserverAll(selectorOrOptions?: EventListenerSelector | ResizeObserverOptions, maybeOptions?: ResizeObserverOptions): MethodDecorator {
+export function resizeObserverAll(selector: string, options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverAll(options?: ResizeObserverQueryOptions): MethodDecorator;
+export function resizeObserverAll(selectorOrOptions?: string | ResizeObserverQueryOptions, maybeOptions?: ResizeObserverQueryOptions): MethodDecorator {
   if (typeof selectorOrOptions === 'string' || typeof selectorOrOptions === 'function') {
-    return resizeObserver(selectorOrOptions, {...maybeOptions ?? {}, root: 'all'});
+    return resizeObserver(selectorOrOptions as any, {...maybeOptions ?? {}, root: 'all'});
   }
   return resizeObserver({...selectorOrOptions ?? {}, root: 'all'});
 }
@@ -126,4 +132,104 @@ export function resizeObserverAll(selectorOrOptions?: EventListenerSelector | Re
 export function getResizeObserverMetadata(target: any): ResizeObserverMetadata[] | undefined {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(RESIZE_OBSERVER_METADATA_KEY, constructor);
-}
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ResizeObserverLifeCycler
+// observer 를 직접 생성하지 않고 OnConnectedResult 를 반환한다.
+// elementDefine 이 수집된 ResizeObserverSet 으로 observer 를 생성하고,
+// observe/unobserve 함수를 주입해 MutationObserver delegate 추적이 사용할 수 있게 한다.
+// ─────────────────────────────────────────────────────────────────────────────
+import { ElementDefineLifeCycler, OnConnectedResult, ResizeObserverSet, ResizeObserverSetEntry } from '../types';
+import { SwcUtils } from '../utils/Utils';
+
+export class ResizeObserverLifeCycler implements ElementDefineLifeCycler {
+  private readonly removeObserverCallbacksMap = new WeakMap<Element, Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }>>();
+
+  onConnected(helperHostSet: HelperHostSet): OnConnectedResult | void {
+    const inst = helperHostSet.$this;
+    const currentWin = helperHostSet.$w;
+
+    const removeObserverCallbacks: Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }> = [];
+    this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
+
+    const allMeta = getResizeObserverMetadata(inst) ?? [];
+    if (allMeta.length === 0) return;
+
+    const root: HTMLElement | ShadowRoot = inst.shadowRoot || inst;
+
+    // removeObserver 콜백 수집
+    for (const m of allMeta) {
+      if (m.options.removeObserver) removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root, opts: m.options });
+    }
+
+    // ── ResizeObserver 콜백 ──
+    const callback: ResizeObserverSetEntry['callback'] = (entries, obs) => {
+      for (const m of allMeta) {
+        let matchedEls: HTMLElement[];
+        if (m.options.delegate && typeof m.selector === 'string') {
+          const isThis = m.selector === '$this' || m.selector === '';
+          matchedEls = entries.map(e => e.target as HTMLElement).filter(el => {
+            if (!el || el.nodeType !== 1) return false;
+            if (isThis) return true;
+            return el.matches?.(m.selector as string) || !!el.closest?.(m.selector as string);
+          });
+        } else {
+          matchedEls = entries.map(e => e.target as HTMLElement).filter(t => t && t.nodeType === 1);
+        }
+        if (matchedEls.length === 0) continue;
+        if (m.options.filter) {
+          if (!m.options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
+        }
+        const hostSet = SwcUtils.getHostSet(inst);
+        inst[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root });
+      }
+    };
+
+    // ── observe 대상 목록 구성 ──
+    // - non-delegate: 실제 요소를 초기 observe
+    // - delegate: 동적 추적용 셀렉터 문자열로 선언 (elementDefine 의 MutationObserver 콜백이 observe/unobserve)
+    // 모든 대상은 이 루트의 callback 을 공유한다.
+    const resizeObserverSet: ResizeObserverSet = [];
+    for (const m of allMeta) {
+      if (m.options.delegate && typeof m.selector === 'string') {
+        resizeObserverSet.push({ target: m.selector, delegate: true, delegateRoot: m.options.root, options: m.options.box ? { box: m.options.box } : undefined, callback });
+        continue;
+      }
+      let targets: HTMLElement[] = [];
+
+      if (typeof m.selector === 'function') {
+        const res = (m.selector as any)(inst, helperHostSet);
+        if (res instanceof currentWin.HTMLElement) targets = [res as HTMLElement];
+        else if (res instanceof currentWin.NodeList) targets = Array.from(res as NodeList).filter((e: any) => e instanceof currentWin.HTMLElement) as HTMLElement[];
+        else if (Array.isArray(res)) targets = res.filter((e: any) => e instanceof currentWin.HTMLElement) as HTMLElement[];
+      } else if (typeof m.selector === 'string') {
+        if (m.selector === '$this' || m.selector === '') {
+          targets = [inst as HTMLElement];
+        } else {
+          const r: any = m.options.root || 'auto';
+          const scopes: any[] = [];
+          if (r === 'auto') scopes.push(inst.shadowRoot || inst);
+          else if (r === 'light') scopes.push(inst);
+          else if (r === 'shadow' && inst.shadowRoot) scopes.push(inst.shadowRoot);
+          else if (r === 'all') { scopes.push(inst); if (inst.shadowRoot) scopes.push(inst.shadowRoot); }
+          for (const s of scopes) {
+            const found = s?.querySelectorAll?.(m.selector as string) as NodeListOf<HTMLElement> | undefined;
+            if (found?.length) targets.push(...Array.from(found));
+          }
+        }
+      }
+      for (const el of targets) resizeObserverSet.push({ target: el, options: m.options.box ? { box: m.options.box } : undefined, callback });
+    }
+
+    return { resizeObserverSet };
+  }
+
+  onDisconnected(helperHostSet: HelperHostSet): void {
+    const inst = helperHostSet.$this;
+    for (const cb of this.removeObserverCallbacksMap.get(inst) ?? []) {
+      try { cb.fn(cb.target, cb.opts); } catch (e) { console.error('[SWC] removeObserver error:', e); }
+    }
+    this.removeObserverCallbacksMap.delete(inst);
+  }
+}