@dooboostore/simple-web-component 1.0.50 → 1.0.52

package/src/decorators/intersectionObserver.ts

@@ -1,5 +1,6 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHostSet } from '../types';
+import { buildSwcParameterArgs } from './parameter';
 
 // 공통 옵션 — IntersectionObserverInit + filter/removeObserver. root·delegate 제외.
 // 주의: 데코레이터의 root(light/shadow/all/auto) 는 셀렉터 스코프 선택용이다.
@@ -7,7 +8,12 @@ import { SpecialSelector, SwcQueryOptions, SwcFnSelector, SwcSelector, HelperHos
 export interface IntersectionObserverBaseOptions extends Omit<IntersectionObserverInit, 'root'> {
   /** IntersectionObserver 의 스크롤 컨테이너 (viewport 대신). 데코레이터 root 와 혼동 주의. */
   intersectionRoot?: Element | Document;
-  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  /** 매칭 시 핸들러 실행 여부 게이트. Promise<boolean>도 되어 async 판정 가능. false면 스킵. */
+  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean | Promise<boolean>;
+  /** filter 통과 후 핸들러 직전 훅. await되고, 리턴값은 @intersectionObserverBeforeReturn 으로 핸들러에 주입된다. */
+  before?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => any | Promise<any>;
+  /** 핸들러가 성공/실패해도 항상 실행되는 정리 훅. ctx로 인자/결과/에러를 받는다. 에러는 로깅됨. */
+  finally?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }, ctx: { args: any[]; result?: any; error?: any }) => any | Promise<any>;
   removeObserver?: (target: Element, optionValue: IntersectionObserverQueryOptions) => void;
 }
 
@@ -31,7 +37,7 @@ export const INTERSECTION_OBSERVER_METADATA_KEY = Symbol.for('simple-web-compone
 
 const applyIntersectionObserver = (selector: SwcSelector, options: IntersectionObserverOptions, targetObj: Object, propertyKey: string | symbol): void => {
   const constructor = targetObj.constructor;
-  let observers = ReflectUtils.getMetadata<IntersectionObserverMetadata[]>(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+  let observers = ReflectUtils.getOwnMetadata(INTERSECTION_OBSERVER_METADATA_KEY, constructor) as IntersectionObserverMetadata[] | undefined;
   if (!observers) {
     observers = [];
     ReflectUtils.defineMetadata(INTERSECTION_OBSERVER_METADATA_KEY, observers, constructor);
@@ -51,7 +57,7 @@ const resolveIntersectionObserverArgs = (
 };
 
 /**
- * bare(@decorator)와 factory(@decorator()/@decorator(...)) 호출을 모두 처리하는 공통 디스패처.
+ * bare(@decorator)와 factory(@decorator(...), 빈 괄호는 타입에서 막음) 호출을 모두 처리하는 공통 디스패처.
  * extra는 Light/Shadow/All/Delegate 변형이 강제로 덧씌우는 옵션(root, delegate 등)이다.
  */
 const dispatchIntersectionObserver = (
@@ -65,7 +71,7 @@ const dispatchIntersectionObserver = (
     applyIntersectionObserver('$this', { ...extra }, selectorOrOptionsOrTarget as Object, maybeOptionsOrPropertyKey);
     return;
   }
-  // 옵션과 함께: @decorator() / @decorator(selector, options) / @decorator(options)
+  // 옵션과 함께: @decorator(selector, options) / @decorator(options)
   const { selector, options } = resolveIntersectionObserverArgs(
     selectorOrOptionsOrTarget as SwcSelector | IntersectionObserverOptions | undefined,
     maybeOptionsOrPropertyKey as IntersectionObserverOptions | undefined,
@@ -79,7 +85,7 @@ const dispatchIntersectionObserver = (
 export function intersectionObserver(target: SpecialSelector, options?: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserver(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserver(selector: SwcFnSelector, options?: IntersectionObserverNonQueryOptions): MethodDecorator;
-export function intersectionObserver(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserver(options: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserver(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 /**
  * @intersectionObserver decorator to observe element intersection changes.
@@ -92,37 +98,32 @@ export function intersectionObserver(selectorOrOptionsOrTarget?: SwcSelector | I
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget, maybeOptionsOrPropertyKey, descriptor, {});
 }
 
-export function intersectionObserverThis(options?: IntersectionObserverQueryOptions): MethodDecorator;
-export function intersectionObserverThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function intersectionObserverThis(optionsOrTarget?: IntersectionObserverQueryOptions | Object, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
-  return dispatchIntersectionObserver(optionsOrTarget, propertyKey, descriptor, {});
-}
 
 // ─── root별 delegate 헬퍼 (root 주입 → 문자열 셀렉터 전용) ───
 
 export function intersectionObserverDelegateLight(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
-export function intersectionObserverDelegateLight(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateLight(options: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
 export function intersectionObserverDelegateLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverDelegateLight(selectorOrOptionsOrTarget?: string | Omit<IntersectionObserverQueryOptions, 'delegate'> | Object, maybeOptionsOrPropertyKey?: Omit<IntersectionObserverQueryOptions, 'delegate'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'light', delegate: true });
 }
 
 export function intersectionObserverDelegateShadow(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
-export function intersectionObserverDelegateShadow(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateShadow(options: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
 export function intersectionObserverDelegateShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverDelegateShadow(selectorOrOptionsOrTarget?: string | Omit<IntersectionObserverQueryOptions, 'delegate'> | Object, maybeOptionsOrPropertyKey?: Omit<IntersectionObserverQueryOptions, 'delegate'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'shadow', delegate: true });
 }
 
 export function intersectionObserverDelegateAll(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
-export function intersectionObserverDelegateAll(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegateAll(options: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
 export function intersectionObserverDelegateAll(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverDelegateAll(selectorOrOptionsOrTarget?: string | Omit<IntersectionObserverQueryOptions, 'delegate'> | Object, maybeOptionsOrPropertyKey?: Omit<IntersectionObserverQueryOptions, 'delegate'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'all', delegate: true });
 }
 
 export function intersectionObserverDelegate(selector: string, options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
-export function intersectionObserverDelegate(options?: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
+export function intersectionObserverDelegate(options: Omit<IntersectionObserverQueryOptions, 'delegate'>): MethodDecorator;
 export function intersectionObserverDelegate(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverDelegate(selectorOrOptionsOrTarget?: string | Omit<IntersectionObserverQueryOptions, 'delegate'> | Object, maybeOptionsOrPropertyKey?: Omit<IntersectionObserverQueryOptions, 'delegate'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'auto', delegate: true });
@@ -131,29 +132,29 @@ export function intersectionObserverDelegate(selectorOrOptionsOrTarget?: string
 // ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
 
 export function intersectionObserverLight(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
-export function intersectionObserverLight(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverLight(options: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserverLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverLight(selectorOrOptionsOrTarget?: string | IntersectionObserverQueryOptions | Object, maybeOptionsOrPropertyKey?: IntersectionObserverQueryOptions | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'light' });
 }
 
 export function intersectionObserverShadow(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
-export function intersectionObserverShadow(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverShadow(options: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserverShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverShadow(selectorOrOptionsOrTarget?: string | IntersectionObserverQueryOptions | Object, maybeOptionsOrPropertyKey?: IntersectionObserverQueryOptions | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'shadow' });
 }
 
 export function intersectionObserverAll(selector: string, options?: IntersectionObserverQueryOptions): MethodDecorator;
-export function intersectionObserverAll(options?: IntersectionObserverQueryOptions): MethodDecorator;
+export function intersectionObserverAll(options: IntersectionObserverQueryOptions): MethodDecorator;
 export function intersectionObserverAll(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function intersectionObserverAll(selectorOrOptionsOrTarget?: string | IntersectionObserverQueryOptions | Object, maybeOptionsOrPropertyKey?: IntersectionObserverQueryOptions | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchIntersectionObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'all' });
 }
 
 export function getIntersectionObserverMetadata(target: any): IntersectionObserverMetadata[] | undefined {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(INTERSECTION_OBSERVER_METADATA_KEY, constructor);
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  return ReflectUtils.findAllMetadata<any[]>(INTERSECTION_OBSERVER_METADATA_KEY, constructor).flat();
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -200,11 +201,24 @@ export class IntersectionObserverLifeCycler implements ElementDefineLifeCycler {
             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 });
+          const opts = m.options;
+          void (async () => {
+            const helper = SwcUtils.getHelperAndHostSet(inst);
+            if (opts.filter && !(await opts.filter(matchedEls, { currentThis: inst, helper }))) return;
+            const hostSet = SwcUtils.getHostSet(inst);
+            const helperSet = SwcUtils.getHelperSet(helperHostSet.$w);
+            const legacyArgs = [matchedEls, entries, obs, { ...hostSet, $root: root }];
+            const buildArgs = (beforeReturn: any) => buildSwcParameterArgs(inst, m.propertyKey, {
+              hostSet, helperHostSet: helper, helperSet, intersectionObserverBeforeReturn: beforeReturn
+            }, [...legacyArgs, beforeReturn]);
+            let args = buildArgs(undefined);
+            if (opts.before) { const br = await opts.before(matchedEls, { currentThis: inst, helper }); args = buildArgs(br); }
+            let result: any, error: any;
+            try { result = await inst[m.propertyKey](...args); }
+            catch (e) { error = e; }
+            finally { if (opts.finally) await opts.finally(matchedEls, { currentThis: inst, helper }, { args, result, error }); }
+            if (error) throw error;
+          })().catch(e => console.error('[SWC] intersectionObserver handler error:', e));
         }
       };
     };

package/src/decorators/lifecycles.ts

@@ -19,6 +19,8 @@ export interface OnConnectedAppendChildOptions {
   // replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
   order?: number;
+  // 비동기 렌더가 끝나기 전까지 먼저 보여줄 내용. resolve되면 제거되고 실제 결과가 들어감.
+  fallback?: string | ((helper: any) => string | Node | Node[] | DocumentFragment);
 }
 export interface OnConnectedAppendChildOptionsMetadata {
   propertyKey: string | symbol;
@@ -48,7 +50,7 @@ export function onConnectedBefore(target: Object, propertyKey: string | symbol,
 export function onConnectedBefore(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor);
+    let list = ReflectUtils.getOwnMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) as OnConnectedMetadata[] | undefined;
     if (!list) {
       list = [];
       ReflectUtils.defineMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, list, constructor);
@@ -70,7 +72,7 @@ export function onConnectedAfter(target: Object, propertyKey: string | symbol, d
 export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: string | symbol, arg3?: PropertyDescriptor): MethodDecorator | void {
   const decorator = (options: OnConnectedOptions, target: Object, propertyKey: string | symbol) => {
     const constructor = target.constructor;
-    let list = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor);
+    let list = ReflectUtils.getOwnMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) as OnConnectedMetadata[] | undefined;
     if (!list) {
       list = [];
       ReflectUtils.defineMetadata(ON_AFTER_CONNECTED_METADATA_KEY, list, constructor);
@@ -116,7 +118,7 @@ export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: stri
 //   ) as any;
 // }
 
-// Helper to handle both @decorator and @decorator() syntax
+// Helper: bare @decorator 와 옵션 @decorator({...}) (빈 괄호 @decorator() 는 타입에서 막음)
 function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
   return function(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
     if (propertyKey) {
@@ -144,19 +146,19 @@ function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
   };
 }
 
-export function onInitialize(options?: LifecycleOptions): MethodDecorator;
+export function onInitialize(options: LifecycleOptions): MethodDecorator;
 export function onInitialize(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onInitialize(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_INITIALIZE_METADATA_KEY)(optionOrTarget, propertyKey);
 }
 
-export function onDisconnectedBefore(options?: LifecycleOptions): MethodDecorator;
+export function onDisconnectedBefore(options: LifecycleOptions): MethodDecorator;
 export function onDisconnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onDisconnectedBefore(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_BEFORE_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
 }
 
-export function onDisconnectedAfter(options?: LifecycleOptions): MethodDecorator;
+export function onDisconnectedAfter(options: LifecycleOptions): MethodDecorator;
 export function onDisconnectedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onDisconnectedAfter(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_AFTER_DISCONNECTED_METADATA_KEY)(optionOrTarget, propertyKey);
@@ -164,13 +166,13 @@ export function onDisconnectedAfter(optionOrTarget?: LifecycleOptions | Object,
 
 export const onDisconnected = onDisconnectedAfter;
 
-export function onAdoptedBefore(options?: LifecycleOptions): MethodDecorator;
+export function onAdoptedBefore(options: LifecycleOptions): MethodDecorator;
 export function onAdoptedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onAdoptedBefore(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_BEFORE_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
 }
 
-export function onAdoptedAfter(options?: LifecycleOptions): MethodDecorator;
+export function onAdoptedAfter(options: LifecycleOptions): MethodDecorator;
 export function onAdoptedAfter(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onAdoptedAfter(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_AFTER_ADOPTED_METADATA_KEY)(optionOrTarget, propertyKey);
@@ -178,13 +180,13 @@ export function onAdoptedAfter(optionOrTarget?: LifecycleOptions | Object, prope
 
 export const onAdopted = onAdoptedAfter;
 
-export function onConnectedSwcApp(options?: LifecycleOptions): MethodDecorator;
+export function onConnectedSwcApp(options: LifecycleOptions): MethodDecorator;
 export function onConnectedSwcApp(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onConnectedSwcApp(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_CONNECTED_SWC_APP_METADATA_KEY)(optionOrTarget, propertyKey);
 }
 
-export function onConnectedCompleted(options?: LifecycleOptions): MethodDecorator;
+export function onConnectedCompleted(options: LifecycleOptions): MethodDecorator;
 export function onConnectedCompleted(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function onConnectedCompleted(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
   return createLifecycleDecoratorWithOptions(ON_CONNECTED_COMPLETED_METADATA_KEY)(optionOrTarget, propertyKey);
@@ -196,7 +198,7 @@ export function onConnectedCompleted(optionOrTarget?: LifecycleOptions | Object,
 
 const decorator = (options: OnConnectedAppendChildOptions, target: Object, propertyKey: string | symbol) => {
   const constructor = target.constructor;
-  let list = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor);
+  let list = ReflectUtils.getOwnMetadata(ON_CONNECTED_BODY_METADATA_KEY, constructor) as OnConnectedAppendChildOptionsMetadata[] | undefined;
   if (!list) {
     list = [];
     ReflectUtils.defineMetadata(ON_CONNECTED_BODY_METADATA_KEY, list, constructor);
@@ -210,7 +212,7 @@ export function onConnectedBodyShadow(optionOrTarget: Omit<OnConnectedAppendChil
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: true}, optionOrTarget!, propertyKey);
   }
-  // parameter option @decorator()
+  // parameter option @decorator({...})
   return (target: Object, propertyKey: string | symbol) => {
     decorator({...optionOrTarget??{}, useShadow: true}, target, propertyKey);
   };
@@ -222,7 +224,7 @@ export function onConnectedBodyLight(optionOrTarget: Omit<OnConnectedAppendChild
   if (propertyKey) { // no parameter option  @decorator
     return decorator({useShadow: false}, optionOrTarget!, propertyKey);
   }
-  // parameter option @decorator()
+  // parameter option @decorator({...})
   return (target: Object, propertyKey: string | symbol) => {
     decorator({...optionOrTarget??{}, useShadow: false}, target, propertyKey);
   };
@@ -233,7 +235,7 @@ export function onConnectedBody(optionOrTarget: OnConnectedAppendChildOptions |
   if (propertyKey) { // no parameter option  @decorator
     return decorator({}, optionOrTarget!, propertyKey);
   }
-  // parameter option @decorator()
+  // parameter option @decorator({...})
   return (target: Object, propertyKey: string | symbol) => {
     decorator((optionOrTarget as OnConnectedAppendChildOptions) || {}, target, propertyKey);
   };
@@ -243,15 +245,15 @@ export function onConnectedBody(optionOrTarget: OnConnectedAppendChildOptions |
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
 export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): LifecycleMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[] ?? [];
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  const results = ReflectUtils.findAllMetadata<LifecycleMetadata[]>(metadataKey, constructor).flat();
   // Sort by order (default 0 if not specified)
   return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 };
 
 export const findAllOnConnectedMetadata = (target: any): OnConnectedAppendChildOptionsMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor) ?? [];
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  const results = ReflectUtils.findAllMetadata<OnConnectedAppendChildOptionsMetadata[]>(ON_CONNECTED_BODY_METADATA_KEY, constructor).flat();
   // Sort by order (default 0 if not specified)
   return [...results].sort((a, b) => {
     const orderA = a.options?.order ?? 0;
@@ -261,15 +263,15 @@ export const findAllOnConnectedMetadata = (target: any): OnConnectedAppendChildO
 };
 
 export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  const results = ReflectUtils.findAllMetadata<OnConnectedMetadata[]>(ON_BEFORE_CONNECTED_METADATA_KEY, constructor).flat();
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };
 
 export const findAllOnConnectedAfterMetadata = (target: any): OnConnectedMetadata[] => {
-  const constructor = target instanceof Function ? target : target.constructor;
-  const results = ReflectUtils.getMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  const results = ReflectUtils.findAllMetadata<OnConnectedMetadata[]>(ON_AFTER_CONNECTED_METADATA_KEY, constructor).flat();
   // Sort by order
   return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/decorators/mutationObserver.ts

@@ -1,9 +1,15 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { SpecialSelector, SwcQueryOptions, SwcSelector, SwcFnSelector, HelperHostSet } from '../types';
+import { buildSwcParameterArgs } from './parameter';
 
 // 공통 옵션 — root·delegate 없음 (MutationObserverInit + filter/removeObserver)
 export interface MutationObserverBaseOptions extends MutationObserverInit {
-  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+  /** 매칭 시 핸들러 실행 여부 게이트. Promise<boolean>도 되어 async 판정 가능. false면 스킵. */
+  filter?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => boolean | Promise<boolean>;
+  /** filter 통과 후 핸들러 직전 훅. await되고, 리턴값은 @mutationObserverBeforeReturn 으로 핸들러에 주입된다. */
+  before?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }) => any | Promise<any>;
+  /** 핸들러가 성공/실패해도 항상 실행되는 정리 훅. ctx로 결과/에러를 받는다. 에러는 로깅됨. */
+  finally?: (matchedEls: HTMLElement[], meta: { currentThis: any, helper: HelperHostSet }, ctx: { args: any[]; result?: any; error?: any }) => any | Promise<any>;
   // observer 해제(disconnected) 시 호출되는 콜백. 첫 번째 인자는 observe된 target element, 두 번째는 사용자 옵션 객체.
   removeObserver?: (target: Element, optionValue: MutationObserverQueryOptions) => void;
 }
@@ -26,7 +32,7 @@ export const MUTATION_OBSERVER_METADATA_KEY = Symbol.for('simple-web-component:m
 
 const applyMutationObserver = (selector: SwcSelector, options: MutationObserverQueryOptions, targetObj: Object, propertyKey: string | symbol): void => {
   const constructor = targetObj.constructor;
-  let observers = ReflectUtils.getMetadata<MutationObserverMetadata[]>(MUTATION_OBSERVER_METADATA_KEY, constructor);
+  let observers = ReflectUtils.getOwnMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor) as MutationObserverMetadata[] | undefined;
   if (!observers) {
     observers = [];
     ReflectUtils.defineMetadata(MUTATION_OBSERVER_METADATA_KEY, observers, constructor);
@@ -47,7 +53,7 @@ const resolveMutationObserverArgs = (
 
 /**
  * selectorOrOptionsOrTarget/maybeOptionsOrPropertyKey/descriptor을 받아 bare(@decorator)와
- * factory(@decorator()/@decorator(...)) 호출을 모두 처리하는 공통 디스패처.
+ * factory(@decorator(...), 빈 괄호는 타입에서 막음) 호출을 모두 처리하는 공통 디스패처.
  * extra는 Light/Shadow/All/Delegate 변형이 강제로 덧씌우는 옵션(root, delegate 등)이다.
  */
 const dispatchMutationObserver = (
@@ -57,11 +63,11 @@ const dispatchMutationObserver = (
   extra: Partial<MutationObserverQueryOptions>
 ): MethodDecorator | void => {
   if ((typeof maybeOptionsOrPropertyKey === 'string' || typeof maybeOptionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
-    // 옵션 없이: @decorator
-    applyMutationObserver('$this', { ...extra }, selectorOrOptionsOrTarget as Object, maybeOptionsOrPropertyKey);
+    // 옵션 없이: @decorator — 자기 자신의 하위 전체(childList + subtree)를 본다. 범위를 좁히려면 옵션을 명시.
+    applyMutationObserver('$this', { subtree: true, ...extra }, selectorOrOptionsOrTarget as Object, maybeOptionsOrPropertyKey);
     return;
   }
-  // 옵션과 함께: @decorator() / @decorator(selector, options) / @decorator(options)
+  // 옵션과 함께: @decorator(selector, options) / @decorator(options)
   const { selector, options } = resolveMutationObserverArgs(
     selectorOrOptionsOrTarget as SwcSelector | MutationObserverQueryOptions | undefined,
     maybeOptionsOrPropertyKey as MutationObserverQueryOptions | undefined,
@@ -75,7 +81,7 @@ const dispatchMutationObserver = (
 export function mutationObserver(target: SpecialSelector, options?: MutationObserverQueryOptions): MethodDecorator;
 export function mutationObserver(selector: string, options?: MutationObserverQueryOptions): MethodDecorator;
 export function mutationObserver(selector: SwcFnSelector, options?: MutationObserverNonQueryOptions): MethodDecorator;
-export function mutationObserver(options?: MutationObserverQueryOptions): MethodDecorator;
+export function mutationObserver(options: MutationObserverQueryOptions): MethodDecorator;
 export function mutationObserver(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 /**
  * @mutationObserver decorator to observe DOM mutations.
@@ -85,37 +91,32 @@ export function mutationObserver(selectorOrOptionsOrTarget?: SwcSelector | Mutat
   return dispatchMutationObserver(selectorOrOptionsOrTarget, maybeOptionsOrPropertyKey, descriptor, {});
 }
 
-export function mutationObserverThis(options?: MutationObserverQueryOptions): MethodDecorator;
-export function mutationObserverThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
-export function mutationObserverThis(optionsOrTarget?: MutationObserverQueryOptions | Object, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
-  return dispatchMutationObserver(optionsOrTarget, propertyKey, descriptor, {});
-}
 
 // ─── root별 delegate 헬퍼 (addEventListener와 동일 패턴) ───
 
 export function mutationObserverDelegateLight(selector: string, options?: MutationObserverBaseOptions): MethodDecorator;
-export function mutationObserverDelegateLight(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverDelegateLight(options: MutationObserverBaseOptions): MethodDecorator;
 export function mutationObserverDelegateLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverDelegateLight(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'light', delegate: true });
 }
 
 export function mutationObserverDelegateShadow(selector: string, options?: MutationObserverBaseOptions): MethodDecorator;
-export function mutationObserverDelegateShadow(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverDelegateShadow(options: MutationObserverBaseOptions): MethodDecorator;
 export function mutationObserverDelegateShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverDelegateShadow(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'shadow', delegate: true });
 }
 
 export function mutationObserverDelegateAll(selector: string, options?: MutationObserverBaseOptions): MethodDecorator;
-export function mutationObserverDelegateAll(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverDelegateAll(options: MutationObserverBaseOptions): MethodDecorator;
 export function mutationObserverDelegateAll(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverDelegateAll(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'all', delegate: true });
 }
 
 export function mutationObserverDelegate(selector: string, options?: MutationObserverBaseOptions): MethodDecorator;
-export function mutationObserverDelegate(options?: MutationObserverBaseOptions): MethodDecorator;
+export function mutationObserverDelegate(options: MutationObserverBaseOptions): MethodDecorator;
 export function mutationObserverDelegate(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverDelegate(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'auto', delegate: true });
@@ -124,29 +125,29 @@ export function mutationObserverDelegate(selectorOrOptionsOrTarget?: string | Om
 // ─── root별 일반 헬퍼 (delegate 없이, 셀렉터 생략 시 $this) ───
 
 export function mutationObserverLight(selector: string, options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
-export function mutationObserverLight(options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
+export function mutationObserverLight(options: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
 export function mutationObserverLight(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverLight(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'light' });
 }
 
 export function mutationObserverShadow(selector: string, options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
-export function mutationObserverShadow(options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
+export function mutationObserverShadow(options: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
 export function mutationObserverShadow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverShadow(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'shadow' });
 }
 
 export function mutationObserverAll(selector: string, options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
-export function mutationObserverAll(options?: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
+export function mutationObserverAll(options: Omit<MutationObserverQueryOptions, 'root'>): MethodDecorator;
 export function mutationObserverAll(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 export function mutationObserverAll(selectorOrOptionsOrTarget?: string | Omit<MutationObserverQueryOptions, 'root'> | Object, maybeOptionsOrPropertyKey?: Omit<MutationObserverQueryOptions, 'root'> | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
   return dispatchMutationObserver(selectorOrOptionsOrTarget as any, maybeOptionsOrPropertyKey as any, descriptor, { root: 'all' });
 }
 
 export function getMutationObserverMetadata(target: any): MutationObserverMetadata[] | undefined {
-  const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(MUTATION_OBSERVER_METADATA_KEY, constructor);
+  const constructor = typeof target === 'function' ? target : target.constructor;
+  return ReflectUtils.findAllMetadata<any[]>(MUTATION_OBSERVER_METADATA_KEY, constructor).flat();
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -154,20 +155,21 @@ export function getMutationObserverMetadata(target: any): MutationObserverMetada
 // observer 를 직접 생성하지 않고 OnConnectedResult 를 반환한다.
 // elementDefine 이 수집된 MutationObserverSet 으로 observer 를 생성한다.
 // ─────────────────────────────────────────────────────────────────────────────
-import { ElementDefineLifeCycler, MutationObserverSet, MutationObserverSetEntry, ObserverObserveTarget, OnConnectedResult } from '../types';
+import { ElementDefineLifeCycler, inObserverScope, MutationObserverSet, MutationObserverSetEntry, ObserverObserveTarget, ObserverScope, OnConnectedResult, ResizeObserverSet } from '../types';
 import { SwcUtils } from '../utils/Utils';
 
 export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
   private readonly removeObserverCallbacksMap = new WeakMap<Element, Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }>>();
 
-  onConnected(helperHostSet: HelperHostSet): OnConnectedResult | void {
+  onConnected(helperHostSet: HelperHostSet, _set?: ResizeObserverSet, scope?: ObserverScope): OnConnectedResult | void {
     const inst = helperHostSet.$this;
     const currentWin = helperHostSet.$w;
 
-    const removeObserverCallbacks: Array<{ fn: (target: Element, opts: unknown) => void; target: any; opts: unknown }> = [];
+    // 'rest' 는 같은 connect 의 'self' 뒤에 오므로 이어 붙이고, 그 외(새 connect)는 새로 시작한다.
+    const removeObserverCallbacks = (scope === 'rest' && this.removeObserverCallbacksMap.get(inst)) || [];
     this.removeObserverCallbacksMap.set(inst, removeObserverCallbacks);
 
-    const allMeta = getMutationObserverMetadata(inst) ?? [];
+    const allMeta = (getMutationObserverMetadata(inst) ?? []).filter(m => inObserverScope(m, scope));
     // 처리할 메타가 없으면 observer 불필요
     if (allMeta.length === 0) return;
 
@@ -197,13 +199,19 @@ export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
         return init;
       };
 
-      const fnObservedSets = new Map<MutationObserverMetadata, WeakSet<Element>>();
+      // non-delegate 메타별 observe 대상. MO 는 인스턴스당 1개를 모든 메타가 공유하므로(옵션도 합집합),
+      // 메타는 자기 대상(subtree 면 그 하위)에서 온 레코드만 받는다.
+      const observedNodes = new Map<MutationObserverMetadata, Node[]>();
+      const owns = (meta: MutationObserverMetadata, m: MutationRecord): boolean =>
+        (observedNodes.get(meta) ?? []).some(o => o === m.target || (!!meta.options.subtree && o.contains(m.target)));
 
       const callback = (mutations: MutationRecord[], obs: MutationObserver) => {
         // ── MutationObserver 메타 콜백 ──
         for (const meta of metas) {
           const { selector, options } = meta;
           let matchedEls: HTMLElement[] = [];
+          // 핸들러에 넘길 레코드 — non-delegate 는 자기 대상 레코드만 (옵저버는 공유라 배치에 다른 대상 레코드가 섞인다)
+          let records = mutations;
 
           const typeMatches = (m: MutationRecord): boolean => {
             const has = !!(options.childList || options.attributes || options.characterData);
@@ -213,8 +221,8 @@ export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
             return true;
           };
 
-          const collect = (matchesSel: (n: any) => boolean) =>
-            mutations.flatMap(m => {
+          const collect = (matchesSel: (n: any) => boolean, records: MutationRecord[] = mutations) =>
+            records.flatMap(m => {
               if (!typeMatches(m)) return [];
               const els: HTMLElement[] = [];
               if (matchesSel(m.target)) els.push(m.target as HTMLElement);
@@ -223,26 +231,27 @@ export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
               return els;
             });
 
-          if (options.delegate && typeof selector === 'string') {
-            const isThis = selector === '$this' || selector === '';
+          if (typeof selector === 'string' && (selector === '$this' || selector === '')) {
+            // 자기 자신을 볼 때는 바뀐/추가된 노드가 아니라 자기 자신 하나 — 해당 종류의 변화가 있었으면 [inst]
+            records = mutations.filter(m => typeMatches(m) && owns(meta, m));
+            matchedEls = records.length ? [inst as HTMLElement] : [];
+          } else if (options.delegate && typeof selector === 'string') {
             matchedEls = collect(n => {
               if (!n || n.nodeType !== 1) return false;
-              if (isThis) return true;
               const el = n as HTMLElement;
               return el.matches?.(selector) || !!el.closest?.(selector);
             });
           } else if (typeof selector === 'string') {
-            const isThis = selector === '$this' || selector === '';
-            matchedEls = collect(n => {
+            records = mutations.filter(m => owns(meta, m));
+            matchedEls = records.length ? collect(n => {
               if (!n || n.nodeType !== 1) return false;
-              if (isThis) return true;
               return (n as HTMLElement).matches?.(selector);
-            });
+            }, records) : [];
           } else if (typeof selector === 'function') {
-            const set = fnObservedSets.get(meta);
-            matchedEls = mutations.filter(m => typeMatches(m))
-              .map(m => m.target as HTMLElement)
-              .filter(t => t && t.nodeType === 1 && (set ? set.has(t) : false));
+            // 레코드가 속한 observe 대상 요소 (subtree 면 하위 변경도 그 대상으로 묶는다)
+            records = mutations.filter(m => typeMatches(m) && owns(meta, m));
+            matchedEls = (observedNodes.get(meta) ?? []).filter(o =>
+              records.some(m => o === m.target || (!!options.subtree && o.contains(m.target)))) as HTMLElement[];
           } else {
             matchedEls = mutations.filter(m => typeMatches(m))
               .map(m => m.target as HTMLElement)
@@ -250,11 +259,24 @@ export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
           }
 
           if (matchedEls.length === 0) continue;
-          if (options.filter) {
-            if (!options.filter(matchedEls, { currentThis: inst, helper: helperHostSet })) continue;
-          }
-          const hostSet = SwcUtils.getHostSet(inst);
-          inst[meta.propertyKey](matchedEls, mutations, obs, { ...hostSet, $root: root });
+          // fire-and-forget async 러너 — filter(async)/before/finally + @mutationObserverBeforeReturn 주입.
+          void (async () => {
+            const helper = SwcUtils.getHelperAndHostSet(inst);
+            if (options.filter && !(await options.filter(matchedEls, { currentThis: inst, helper }))) return;
+            const hostSet = SwcUtils.getHostSet(inst);
+            const helperSet = SwcUtils.getHelperSet(helperHostSet.$w);
+            const legacyArgs = [matchedEls, records, obs, { ...hostSet, $root: root }];
+            const buildArgs = (beforeReturn: any) => buildSwcParameterArgs(inst, meta.propertyKey, {
+              hostSet, helperHostSet: helper, helperSet, mutationObserverBeforeReturn: beforeReturn
+            }, [...legacyArgs, beforeReturn]);
+            let args = buildArgs(undefined);
+            if (options.before) { const br = await options.before(matchedEls, { currentThis: inst, helper }); args = buildArgs(br); }
+            let result: any, error: any;
+            try { result = await inst[meta.propertyKey](...args); }
+            catch (e) { error = e; }
+            finally { if (options.finally) await options.finally(matchedEls, { currentThis: inst, helper }, { args, result, error }); }
+            if (error) throw error;
+          })().catch(e => console.error('[SWC] mutationObserver handler error:', e));
         }
 
       };
@@ -272,20 +294,17 @@ export class MutationObserverLifeCycler implements ElementDefineLifeCycler {
         const { selector, options } = m;
         const mInit = initFrom(options);
         if (typeof selector === 'string') {
-          if (selector === '$this' || selector === '') {
-            observeTargets.push({ target: root, options: mInit });
-          } else {
-            root.querySelectorAll(selector).forEach(el => observeTargets.push({ target: el as Element, options: mInit }));
-          }
+          const nodes: Node[] = selector === '$this' || selector === '' ? [root] : Array.from(root.querySelectorAll(selector));
+          for (const n of nodes) observeTargets.push({ target: n as Element, options: mInit });
+          observedNodes.set(m, nodes);
         } else if (typeof selector === 'function') {
           const res = (selector as any)(inst, helperHostSet);
           let targets: HTMLElement[] = [];
           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[];
-          const set = new WeakSet<Element>();
-          for (const el of targets) { set.add(el); observeTargets.push({ target: el, options: mInit }); }
-          fnObservedSets.set(m, set);
+          for (const el of targets) observeTargets.push({ target: el, options: mInit });
+          observedNodes.set(m, targets);
         }
       }