@dooboostore/simple-web-component 1.0.49 → 1.0.50

package/src/decorators/applyAttribute.ts

@@ -476,11 +476,21 @@ export const attr = applyAttribute;
 
 // ─── 편의 헬퍼 (selector/root 생략) ───
 
-export function attrThis(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator {
-  return applyAttribute('$this', targetAttributeName, options);
+export function attrThis(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator;
+export function attrThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function attrThis(targetAttributeNameOrTarget?: string | Object, optionsOrPropertyKey?: AttributeQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyAttribute('$this', undefined as any, {}) as any)(targetAttributeNameOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyAttribute('$this', targetAttributeNameOrTarget as any, optionsOrPropertyKey as AttributeQueryOptions);
 }
-export function attrAppHost(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator {
-  return applyAttribute('$appHost', targetAttributeName, options);
+export function attrAppHost(targetAttributeName?: string, options?: AttributeQueryOptions): MethodDecorator;
+export function attrAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function attrAppHost(targetAttributeNameOrTarget?: string | Object, optionsOrPropertyKey?: AttributeQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyAttribute('$appHost', undefined as any, {}) as any)(targetAttributeNameOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyAttribute('$appHost', targetAttributeNameOrTarget as any, optionsOrPropertyKey as AttributeQueryOptions);
 }
 export function attrLight(selector: string, targetAttributeName?: string, options?: Omit<AttributeQueryOptions, 'root'>): MethodDecorator {
   return applyAttribute(selector, targetAttributeName, {...options ?? {}, root: 'light'});

package/src/decorators/applyClass.ts

@@ -325,11 +325,21 @@ export const cls = applyClass;
 
 // ─── 편의 헬퍼 (selector/root 생략) ───
 
-export function clsThis(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator {
-  return applyClass('$this', action, options);
+export function clsThis(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator;
+export function clsThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function clsThis(actionOrTarget?: ClassAction | Object, optionsOrPropertyKey?: ClassQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyClass('$this', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyClass('$this', actionOrTarget as any, optionsOrPropertyKey as ClassQueryOptions);
 }
-export function clsAppHost(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator {
-  return applyClass('$appHost', action, options);
+export function clsAppHost(action?: ClassAction, options?: ClassQueryOptions): MethodDecorator;
+export function clsAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function clsAppHost(actionOrTarget?: ClassAction | Object, optionsOrPropertyKey?: ClassQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyClass('$appHost', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyClass('$appHost', actionOrTarget as any, optionsOrPropertyKey as ClassQueryOptions);
 }
 export function clsLight(selector: string, action?: ClassAction, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;
 export function clsLight(selector: string, options?: Omit<ClassQueryOptions, 'root'>): MethodDecorator;

package/src/decorators/applyNode.ts

@@ -642,11 +642,21 @@ export const node = applyNode;
 
 // ─── 편의 헬퍼 (selector/root 생략) ───
 
-export function applyThis(options?: ApplyNodeQueryOptions): MethodDecorator {
-  return applyNode('$this', options);
+export function applyThis(options?: ApplyNodeQueryOptions): MethodDecorator;
+export function applyThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function applyThis(optionsOrTarget?: ApplyNodeQueryOptions | Object, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+  if ((typeof propertyKey === 'string' || typeof propertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyNode('$this', {}) as any)(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode('$this', optionsOrTarget as ApplyNodeQueryOptions);
 }
-export function applyAppHost(options?: ApplyNodeQueryOptions): MethodDecorator {
-  return applyNode('$appHost', options);
+export function applyAppHost(options?: ApplyNodeQueryOptions): MethodDecorator;
+export function applyAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function applyAppHost(optionsOrTarget?: ApplyNodeQueryOptions | Object, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | PropertyDescriptor | void {
+  if ((typeof propertyKey === 'string' || typeof propertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyNode('$appHost', {}) as any)(optionsOrTarget, propertyKey, descriptor);
+  }
+  return applyNode('$appHost', optionsOrTarget as ApplyNodeQueryOptions);
 }
 export function applyLight(selector: string, options?: Omit<ApplyNodeQueryOptions, 'root'>): MethodDecorator {
   return applyNode(selector, {...options ?? {}, root: 'light'});

package/src/decorators/applyProperty.ts

@@ -434,17 +434,37 @@ export const prop = applyProperty;
 
 // ─── 편의 헬퍼 (selector/root 생략) ───
 
-export function propThis(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator {
-  return applyProperty('$this', targetPropertyKey, options);
+const dispatchPropConvenience = (
+  selector: '$this' | '$appHost' | '$window' | '$document',
+  targetPropertyKeyOrTarget?: string | symbol | Object,
+  optionsOrPropertyKey?: PropertyQueryOptions | string | symbol,
+  descriptor?: PropertyDescriptor
+): any => {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyProperty(selector, undefined as any, {}) as any)(targetPropertyKeyOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyProperty(selector, targetPropertyKeyOrTarget as any, optionsOrPropertyKey as PropertyQueryOptions);
+};
+
+export function propThis(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator;
+export function propThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function propThis(targetPropertyKeyOrTarget?: string | symbol | Object, optionsOrPropertyKey?: PropertyQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  return dispatchPropConvenience('$this', targetPropertyKeyOrTarget, optionsOrPropertyKey, descriptor);
 }
-export function propAppHost(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator {
-  return applyProperty('$appHost', targetPropertyKey, options);
+export function propAppHost(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator;
+export function propAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function propAppHost(targetPropertyKeyOrTarget?: string | symbol | Object, optionsOrPropertyKey?: PropertyQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  return dispatchPropConvenience('$appHost', targetPropertyKeyOrTarget, optionsOrPropertyKey, descriptor);
 }
-export function propWindow(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator {
-  return applyProperty('$window', targetPropertyKey, options);
+export function propWindow(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator;
+export function propWindow(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function propWindow(targetPropertyKeyOrTarget?: string | symbol | Object, optionsOrPropertyKey?: PropertyQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  return dispatchPropConvenience('$window', targetPropertyKeyOrTarget, optionsOrPropertyKey, descriptor);
 }
-export function propDocument(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator {
-  return applyProperty('$document', targetPropertyKey, options);
+export function propDocument(targetPropertyKey?: string | symbol, options?: PropertyQueryOptions): MethodDecorator;
+export function propDocument(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function propDocument(targetPropertyKeyOrTarget?: string | symbol | Object, optionsOrPropertyKey?: PropertyQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  return dispatchPropConvenience('$document', targetPropertyKeyOrTarget, optionsOrPropertyKey, descriptor);
 }
 export function propLight(selector: string, targetPropertyKey?: string | symbol, options?: Omit<PropertyQueryOptions, 'root'>): MethodDecorator {
   return applyProperty(selector, targetPropertyKey, {...options ?? {}, root: 'light'});

package/src/decorators/applySlot.ts

@@ -73,8 +73,8 @@ export const APPLY_SLOT_METADATA_KEY = Symbol.for('simple-web-component:apply-sl
 //     }
 // };
 
-const applyToDom = (swcId: string, id: string, pos: ApplySlotPosition, nodes: Node[]) => {
-  const nodeSlot = new NodeSlot(this, swcId);
+const applyToDom = (host: HTMLElement, swcId: string, id: string, pos: ApplySlotPosition, nodes: Node[]) => {
+  const nodeSlot = new NodeSlot(host, swcId);
   if (pos === 'replaceChildrenText' || pos === 'replaceChildren' || pos === 'replaceChildrenHtml') {
     nodeSlot.replaceChildren(id, ...nodes);
   } else if (pos === 'appendHtml' || pos === 'append' || pos === 'appendText') {
@@ -109,6 +109,7 @@ export function applySlot(targetId: string, opt: OptionalType<ApplySlotOptions,
     descriptor.value = function (...args: any[]) {
       ensureInit(this);
 
+      const host = this;
       const conf = getElementConfig(this);
       const currentWin = conf.window;
       const swcId = this._swcId;
@@ -137,7 +138,7 @@ export function applySlot(targetId: string, opt: OptionalType<ApplySlotOptions,
         const res: string | Node = options.fallback.call(this, hostSet);
         const nodes: Node[] = resToNodes(res);
         fallbackNodes.push(...nodes);
-        applyToDom(swcId, targetId, options.position, nodes);
+        applyToDom(host, swcId, targetId, options.position, nodes);
       }
 
       /**
@@ -162,12 +163,12 @@ export function applySlot(targetId: string, opt: OptionalType<ApplySlotOptions,
           const extracted = extractValue(asyncRes);
           const nodes = resToNodes(extracted)
           fallbackNodes.forEach((it: any) => it.remove());
-          applyToDom(swcId, targetId, options.position, nodes);
+          applyToDom(host, swcId, targetId, options.position, nodes);
         })
       } else {
         const extracted = extractValue(res);
         const nodes: Node[] = resToNodes(extracted);
-        applyToDom(swcId, targetId, options.position, nodes);
+        applyToDom(host, swcId, targetId, options.position, nodes);
       }
     };
   };

package/src/decorators/applyStyle.ts

@@ -266,11 +266,21 @@ export const style = applyStyle;
 
 // ─── 편의 헬퍼 (selector/root 생략) ───
 
-export function styleThis(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator {
-  return applyStyle('$this', action, options);
+export function styleThis(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator;
+export function styleThis(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function styleThis(actionOrTarget?: StyleAction | Object, optionsOrPropertyKey?: StyleQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyStyle('$this', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyStyle('$this', actionOrTarget as any, optionsOrPropertyKey as StyleQueryOptions);
 }
-export function styleAppHost(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator {
-  return applyStyle('$appHost', action, options);
+export function styleAppHost(action?: StyleAction, options?: StyleQueryOptions): MethodDecorator;
+export function styleAppHost(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function styleAppHost(actionOrTarget?: StyleAction | Object, optionsOrPropertyKey?: StyleQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    return (applyStyle('$appHost', undefined as any, {}) as any)(actionOrTarget, optionsOrPropertyKey, descriptor);
+  }
+  return applyStyle('$appHost', actionOrTarget as any, optionsOrPropertyKey as StyleQueryOptions);
 }
 export function styleLight(selector: string, action?: StyleAction, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;
 export function styleLight(selector: string, options?: Omit<StyleQueryOptions, 'root'>): MethodDecorator;

package/src/decorators/changedAttribute.ts

@@ -20,24 +20,39 @@ const convertValue = (val: any, type: any): any => {
   return val;
 };
 
+const applyChangedAttribute = (attributeName: string | undefined, options: ChangedAttributeThisOptions, target: Object, propertyKey: string | symbol): void => {
+  const constructor = target.constructor;
+  let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
+  if (!metaList) {
+    metaList = [];
+    ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
+  }
+
+  const name = attributeName || String(propertyKey);
+  metaList.push({
+    attributeName: name,
+    propertyKey,
+    options
+  });
+};
+
+export function changedAttribute(attributeName?: string, options?: ChangedAttributeThisOptions): MethodDecorator;
+export function changedAttribute(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
 /**
- * @changedAttributeThis decorator - fires when any attribute on $this changes
+ * @changedAttributeThis decorator - fires when any attribute on $this changes.
+ * 옵션 없이 `@changedAttribute` 그대로 붙여도 되고, `@changedAttribute(...)`처럼 이름/옵션을 줄 수도 있다.
  */
-export function changedAttribute(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
+export function changedAttribute(attributeNameOrTarget?: string | Object, optionsOrPropertyKey?: ChangedAttributeThisOptions | string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
+  if ((typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') && descriptor !== undefined) {
+    // 옵션 없이: @changedAttribute
+    applyChangedAttribute(undefined, {}, attributeNameOrTarget as Object, optionsOrPropertyKey);
+    return;
+  }
+  // 옵션과 함께: @changedAttribute() / @changedAttribute('name', options?)
+  const attributeName = attributeNameOrTarget as string | undefined;
+  const options = (optionsOrPropertyKey as ChangedAttributeThisOptions) ?? {};
   return (target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
-    if (!metaList) {
-      metaList = [];
-      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
-    }
-
-    const name = attributeName || String(propertyKey);
-    metaList.push({
-      attributeName: name,
-      propertyKey,
-      options
-    });
+    applyChangedAttribute(attributeName, options, target, propertyKey);
   };
 }
 

package/src/decorators/elementDefine.ts

@@ -11,6 +11,8 @@ import {getQueryMetadata, getQueryAllMetadata} from './query';
 import {SwcUtils} from '../utils/Utils';
 import {DOM_EVENT_NAMES, HTML_TAG_ENTRIES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
+import {FirstCheckMaker} from '@dooboostore/simple-boot';
+import {buildSwcParameterArgs, getParameterMetadata} from './parameter';
 import {ElementDefineLifeCycler, HelperHostSet, HostSet, InjectSituationType, IntersectionObserverSet, MutationObserverSet, OnConnectedResult, ResizeObserverSet, ResizeObserverSetEntry, SwcRootType} from '../types';
 import {ConvertUtils, ElementApply} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
@@ -20,6 +22,8 @@ import {MessageSubscribeLifeCycler} from "./subscribeSwcAppMessageWhileConnected
 import {RouteSubscribeLifeCycler} from "./subscribeSwcAppRouteChangeWhileConnected";
 import {SetIntervalLifeCycler} from "./setInterval";
 import {SetTimeoutLifeCycler} from "./setTimeout";
+import {RequestAnimationFrameLifeCycler} from "./requestAnimationFrame";
+import {EventMediaLifeCycler} from "./eventMedia";
 
 // --- Core Interfaces & Types ---
 
@@ -236,6 +240,13 @@ const setupPrototype = (proto: any, win: Window) => {
     if (typeof (this as any)[methodName] !== 'function') return;
     const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(win, this);
     const app = useHostSet?.$appHost?.simpleApplication;
+
+    // @hostSet/@helperHostSet/@helperSet(parameter.ts)를 위한 값. lifecycle 메서드는
+    // event/matched 개념이 없으므로 이 세 가지만 채운다.
+    const helperSetValue = SwcUtils.getHelperSet(win);
+    const helperHostSetValue = {...helperSetValue, ...useHostSet, $this: this};
+    const kindValues = {hostSet: useHostSet, helperHostSet: helperHostSetValue, helperSet: helperSetValue};
+
     // console.log('---->hh',app, this, methodName);
     if (app) {
       const otherStorage = new Map<any, any>();
@@ -248,16 +259,30 @@ const setupPrototype = (proto: any, win: Window) => {
       }), new SituationTypeContainer({situationType: InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost})]);
       otherStorage.set(SituationTypeContainers, situations);
 
+      // @hostSet/@helperHostSet/@helperSet가 붙은 파라미터는 @Inject/situationType 기반
+      // 해석보다 먼저 처리되고(firstCheckMaker), 그 외 파라미터는 기존처럼 @Inject/타입
+      // 기반으로 정상 해석된다 — 같은 메서드에서 두 방식을 섞어 써도 된다.
+      const firstCheckMaker: FirstCheckMaker = ({target, targetKey}, token, idx) => {
+        const saves = getParameterMetadata(target, targetKey!);
+        const found = saves.find(s => s.index === idx);
+        return found ? (kindValues as any)[found.kind] : undefined;
+      };
+
       return app.simstanceManager.executeBindParameterSim(
         {
           target: this,
           targetKey: methodName,
-          inputParameters: extraArgs
+          inputParameters: extraArgs,
+          firstCheckMaker: [firstCheckMaker]
         },
         otherStorage
       );
     } else {
-      return (this as any)[methodName](...extraArgs);
+      // SimpleApplication(DI 컨테이너)이 없는 standalone 사용 시에도 @hostSet/@helperHostSet/
+      // @helperSet만큼은 buildSwcParameterArgs로 주입해준다 — 해당 데코레이터가 하나도 없으면
+      // extraArgs를 그대로 반환하므로(기존 동작 그대로) 하위호환 깨지지 않는다.
+      const args = buildSwcParameterArgs(this, methodName, kindValues, extraArgs);
+      return (this as any)[methodName](...args);
     }
   };
 
@@ -372,6 +397,8 @@ export const elementDefine =
         new RouteSubscribeLifeCycler(),
         new SetIntervalLifeCycler(),
         new SetTimeoutLifeCycler(),
+        new RequestAnimationFrameLifeCycler(),
+        new EventMediaLifeCycler(),
       ];
 
       // observedAttributes 기여 cycler (define-time, constructor 기반)
@@ -416,7 +443,7 @@ export const elementDefine =
         const resizeObserved = new WeakSet<Element>();
         if (resizeObserverSet?.length) {
           const roCallbacks = [...new Set(resizeObserverSet.map(e => e.callback))];
-          const ro = new (win as any).ResizeObserver((entries, obs) => {
+          const ro = new win.ResizeObserver((entries, obs) => {
             for (const cb of roCallbacks) cb(entries, obs);
           });
           for (const e of resizeObserverSet) {
@@ -453,7 +480,7 @@ export const elementDefine =
         const intersectionDelegates: Array<{ target: string; delegateRoot?: SwcRootType; observe: (el: Element) => void; unobserve: (el: Element) => void }> = [];
         for (const group of intersectionObserverSet) {
           const ioCallbacks = [...new Set(group.observeTargets.map(e => e.callback))];
-          const io = new (win as any).IntersectionObserver((entries, obs) => {
+          const io = new win.IntersectionObserver((entries, obs) => {
             for (const cb of ioCallbacks) cb(entries, obs);
           }, group.options);
           const ioObserved = new WeakSet<Element>();
@@ -534,7 +561,7 @@ export const elementDefine =
         if (mutationObserverSet?.length || resizeDelegates.length > 0 || intersectionDelegates.length > 0) {
           // 하나의 MutationObserver 로 resize/intersection delegate 동적 추적 + mutation 콜백을 함께 처리
           const callbacks = [...new Set((mutationObserverSet ?? []).map(e => e.callback))];
-          const mo = new (win as any).MutationObserver((mutations, obs) => {
+          const mo = new win.MutationObserver((mutations, obs) => {
             for (const mut of mutations) {
               Array.from(mut.addedNodes   || []).forEach(n => { handleResizeDelegate(n as Node, true); handleIntersectionDelegate(n as Node, true); });
               Array.from(mut.removedNodes || []).forEach(n => { handleResizeDelegate(n as Node, false); handleIntersectionDelegate(n as Node, false); });

package/src/decorators/eventMedia.ts

@@ -0,0 +1,78 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ElementDefineLifeCycler, HelperHostSet } from '../types';
+import { SwcUtils } from '../utils/Utils';
+
+export const EVENT_MEDIA_METADATA_KEY = Symbol.for('simple-web-component:event-media');
+
+export interface EventMediaMetadata {
+  propertyKey: string | symbol;
+  query: string;
+  eventType: string;
+}
+
+/**
+ * CSS 미디어쿼리(`window.matchMedia`) 상태 변화를 감지한다.
+ * connect 시 자동으로 구독하고, disconnect 시 자동으로 해제한다.
+ *
+ * MediaQueryList는 스펙상 'change' 이벤트 하나만 정의돼있다 — eventType은 그래도 명시적으로 받는다
+ * (다른 @event* 계열처럼 베이스는 명시적, 편의 별칭이 값을 고정하는 컨벤션을 따름). 'change' 고정 버전은
+ * eventMediaChange를 사용한다.
+ */
+export function eventMedia(query: string, eventType: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol) => {
+    const constructor = target.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(EVENT_MEDIA_METADATA_KEY, constructor) as EventMediaMetadata[];
+    if (!metaList) {
+      metaList = [];
+      ReflectUtils.defineMetadata(EVENT_MEDIA_METADATA_KEY, metaList, constructor);
+    }
+    metaList.push({ propertyKey, query, eventType });
+  };
+}
+
+/** eventMedia(query, 'change')의 별칭 - MediaQueryList가 실제로 발생시키는 유일한 이벤트. */
+export function eventMediaChange(query: string): MethodDecorator {
+  return eventMedia(query, 'change');
+}
+
+export const findAllEventMediaMetadata = (target: any): EventMediaMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return (ReflectUtils.findAllMetadata<EventMediaMetadata[]>(EVENT_MEDIA_METADATA_KEY, constructor) || []).flat();
+};
+
+export class EventMediaLifeCycler implements ElementDefineLifeCycler {
+  private readonly entriesMap = new WeakMap<any, Array<{ mql: MediaQueryList; eventType: string; handler: (e: Event) => void }>>();
+
+  onConnected(helperHostSet: HelperHostSet): void {
+    const inst = helperHostSet.$this;
+    const metaList = findAllEventMediaMetadata(inst);
+    if (metaList.length === 0) return;
+
+    const entries: Array<{ mql: MediaQueryList; eventType: string; handler: (e: Event) => void }> = [];
+    for (const meta of metaList) {
+      const mql = helperHostSet.$w.matchMedia(meta.query);
+      const handler = (e: Event) => {
+        try {
+          inst[meta.propertyKey](e, helperHostSet);
+        } catch (err) {
+          console.error('[SWC] eventMedia handler error:', err);
+        }
+      };
+      mql.addEventListener(meta.eventType, handler);
+      entries.push({ mql, eventType: meta.eventType, handler });
+    }
+    this.entriesMap.set(inst, entries);
+  }
+
+  onDisconnected(helperHostSet: HelperHostSet): void {
+    const inst = helperHostSet.$this;
+    for (const { mql, eventType, handler } of this.entriesMap.get(inst) ?? []) {
+      try {
+        mql.removeEventListener(eventType, handler);
+      } catch (e) {
+        console.error('[SWC] eventMedia cleanup error:', e);
+      }
+    }
+    this.entriesMap.delete(inst);
+  }
+}

package/src/decorators/index.ts

@@ -20,3 +20,6 @@ export * from './applySlot';
 export * from './state';
 export * from './setInterval';
 export * from './setTimeout';
+export * from './requestAnimationFrame';
+export * from './eventMedia';
+export * from './parameter';