@dooboostore/simple-web-component 1.0.52 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.52",
+  "version": "1.0.53",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",

package/src/decorators/addEventListener.ts

@@ -1228,7 +1228,11 @@ export class EventListenerLifeCycler implements ElementDefineLifeCycler {
     const { type, options } = meta;
     const opts = { capture: options.capture, once: options.once, passive: options.passive };
 
+    // event.currentTarget 은 dispatch 가 끝나면 null 이 된다 (표준). debounce/throttle 이나 async filter 뒤에 읽으면 이미 null 이라
+    // 리스너가 불리는 순간에 잡아 둔다 → @matchedElement 가 항상 채워진다.
+    const matchedTargets = new WeakMap<Event, EventTarget | null>();
     const handler = async (event: Event) => {
+      const matchedElement = matchedTargets.get(event) ?? event.currentTarget;
       const helper = (options.filter || options.before || options.finally) ? SwcUtils.getHelperAndHostSet(target as HTMLElement, currentWin) : undefined;
       if (options.filter) {
         if (!(await options.filter(event, { currentThis: inst, helper }))) return;
@@ -1237,12 +1241,12 @@ export class EventListenerLifeCycler implements ElementDefineLifeCycler {
       if (options.stopImmediatePropagation) event.stopImmediatePropagation();
       if (options.preventDefault) event.preventDefault();
       const currentHostSet = SwcUtils.getHostSet(inst);
-      const legacyArgs = [event, { currentHostSet, $matchedElement: event.currentTarget }, { event, ...currentHostSet, $el: target, $root: target }];
+      const legacyArgs = [event, { currentHostSet, $matchedElement: matchedElement }, { event, ...currentHostSet, $el: target, $root: target }];
       const currentHelperSet = SwcUtils.getHelperSet(currentWin);
       const currentHelperHostSet = { ...currentHelperSet, ...currentHostSet, $this: inst };
       const buildArgs = (beforeReturn: any) => buildSwcParameterArgs(inst, meta.propertyKey, {
         eventObject: event,
-        matchedElement: event.currentTarget,
+        matchedElement,
         hostSet: currentHostSet,
         helperHostSet: currentHelperHostSet,
         helperSet: currentHelperSet,
@@ -1283,7 +1287,10 @@ export class EventListenerLifeCycler implements ElementDefineLifeCycler {
       error: (err: any) => console.error('Event stream error:', err),
     });
 
-    const wrappedHandler = (event: Event) => eventSubject.next(event);
+    const wrappedHandler = (event: Event) => {
+      matchedTargets.set(event, event.currentTarget);
+      eventSubject.next(event);
+    };
     target.addEventListener(type, wrappedHandler, opts);
 
     const onRemoves: Array<{ fn: any; opts: any }> =

package/src/decorators/requestAnimationFrame.ts

@@ -9,8 +9,8 @@ export type RequestAnimationFrameType = 'onConnected' | 'returnValue';
 
 export interface RequestAnimationFrameOptions {
   /**
-   * 'onConnected' - connect 시 자동으로 루프 시작 (매 프레임 데코레이트된 메서드를 직접 호출), disconnect 시 자동 정리.
-   * 'returnValue'(기본값) - 자동 시작 없음. 개발자가 이 메서드를 직접 호출해야 시작되고,
+   * 'onConnected'(기본값) - connect 시 자동으로 루프 시작 (매 프레임 데코레이트된 메서드를 직접 호출), disconnect 시 자동 정리.
+   * 'returnValue' - 자동 시작 없음. 개발자가 이 메서드를 직접 호출해야 시작되고,
    *   그 호출의 리턴값(또는 valueKey로 뽑은 값)이 실제로 매 프레임 호출될 함수가 된다.
    */
   type?: RequestAnimationFrameType;
@@ -63,7 +63,7 @@ const startFrameLoop = (win: Window, entries: number[], frameFn: FrameCallback):
 
 const applyRequestAnimationFrame = (options: RequestAnimationFrameOptions, target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void => {
   const constructor = target.constructor;
-  const normalizedOptions: RequestAnimationFrameOptions = { ...options, type: options.type ?? 'returnValue' };
+  const normalizedOptions: RequestAnimationFrameOptions = { ...options, type: options.type ?? 'onConnected' };
 
   let metaList = ReflectUtils.getOwnMetadata(REQUEST_ANIMATION_FRAME_METADATA_KEY, constructor) as RequestAnimationFrameMetadata[];
   if (!metaList) {
@@ -96,8 +96,8 @@ const applyRequestAnimationFrame = (options: RequestAnimationFrameOptions, targe
 };
 
 /**
- * type:'onConnected' - connect 시 자동으로 매 프레임 루프를 시작하고, disconnect 시 자동으로 cancelAnimationFrame 한다.
- * type:'returnValue'(기본값) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
+ * type:'onConnected'(기본값) - connect 시 자동으로 매 프레임 루프를 시작하고, disconnect 시 자동으로 cancelAnimationFrame 한다.
+ * type:'returnValue' (@requestAnimationFrameReturnValue) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
  *   그대로 실행하고 리턴값(또는 valueKey로 뽑은 값)이 함수면 그 함수를 매 프레임 호출되는 루프로 등록한다.
  *   원본 리턴값은 그대로 통과시키므로 다른 데코레이터와 같은 메서드에 스택해도 순서에 상관없이 안전하다.
  *
@@ -147,3 +147,15 @@ export class RequestAnimationFrameLifeCycler implements ElementDefineLifeCycler
     inst.__swc_requestAnimationFrameIds = [];
   }
 }
+
+/** 수동 시작: 메서드를 직접 호출해야 시작되고, 그 리턴 함수가 매 프레임 돈다. = @requestAnimationFrame({ type: 'returnValue' }) */
+export function requestAnimationFrameReturnValue(options: Omit<RequestAnimationFrameOptions, 'type'>): MethodDecorator;
+export function requestAnimationFrameReturnValue(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
+export function requestAnimationFrameReturnValue(optionsOrTarget?: Omit<RequestAnimationFrameOptions, 'type'> | Object, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): MethodDecorator | void {
+  if (propertyKey !== undefined) {
+    applyRequestAnimationFrame({ type: 'returnValue' }, optionsOrTarget as Object, propertyKey, descriptor);
+    return;
+  }
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) =>
+    applyRequestAnimationFrame({ ...((optionsOrTarget as RequestAnimationFrameOptions) ?? {}), type: 'returnValue' }, target, propertyKey, descriptor);
+}

package/src/decorators/setInterval.ts

@@ -10,8 +10,8 @@ export type SetIntervalType = 'onConnected' | 'returnValue';
 
 export interface SetIntervalOptions {
   /**
-   * 'onConnected' (connect 시 자동으로 시작, disconnect 시 자동 정리) |
-   * 'returnValue' (기본값 - 자동 시작 없음. 개발자가 이 메서드를 직접 호출해야 시작되고,
+   * 'onConnected' (기본값 - connect 시 자동으로 시작, disconnect 시 자동 정리) |
+   * 'returnValue' (자동 시작 없음. 개발자가 이 메서드를 직접 호출해야 시작되고,
    *   그 호출의 리턴값이 실제로 반복 실행될 함수가 된다 - 아래 설명 참고).
    */
   type?: SetIntervalType;
@@ -43,8 +43,8 @@ export interface SetIntervalMetadata {
 const getActiveEntries = (inst: any): number[] => (inst.__swc_intervalIds ??= []);
 
 /**
- * type:'onConnected' - connect 시 자동으로 setInterval을 걸고, disconnect 시 자동으로 clearInterval 한다.
- * type:'returnValue'(기본값) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
+ * type:'onConnected'(기본값) - connect 시 자동으로 setInterval을 걸고, disconnect 시 자동으로 clearInterval 한다.
+ * type:'returnValue' (@setIntervalReturnValue) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
  *   그대로 실행하고 리턴값(또는 valueKey로 뽑은 값)이 함수면 그 함수를 새 setInterval의 반복 콜백으로 등록한다.
  *   호출할 때마다 별도의 새 타이머가 생기며, disconnect 시 전부 정리된다. 원본 리턴값은 그대로 통과시키므로
  *   다른 데코레이터와 같은 메서드에 스택해도 순서에 상관없이 안전하다.
@@ -52,7 +52,7 @@ const getActiveEntries = (inst: any): number[] => (inst.__swc_intervalIds ??= []
 export function setInterval(interval: number, options: SetIntervalOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const constructor = target.constructor;
-    const normalizedOptions: SetIntervalOptions = { ...options, type: options.type ?? 'returnValue' };
+    const normalizedOptions: SetIntervalOptions = { ...options, type: options.type ?? 'onConnected' };
 
     let metaList = ReflectUtils.getOwnMetadata(SET_INTERVAL_METADATA_KEY, constructor) as SetIntervalMetadata[];
     if (!metaList) {
@@ -145,3 +145,7 @@ export class SetIntervalLifeCycler implements ElementDefineLifeCycler {
     inst.__swc_intervalIds = [];
   }
 }
+
+/** 수동 시작: 메서드를 직접 호출해야 시작된다. = @setInterval(interval, { type: 'returnValue' }) */
+export const setIntervalReturnValue = (interval: number, options: Omit<SetIntervalOptions, 'type'> = {}): MethodDecorator =>
+  setInterval(interval, { ...options, type: 'returnValue' });

package/src/decorators/setTimeout.ts

@@ -10,8 +10,8 @@ export type SetTimeoutType = 'onConnected' | 'returnValue';
 
 export interface SetTimeoutOptions {
   /**
-   * 'onConnected' (connect 시 자동으로 예약, disconnect 시 자동 정리) |
-   * 'returnValue' (기본값 - 자동 예약 없음. 개발자가 이 메서드를 직접 호출해야 예약되고,
+   * 'onConnected' (기본값 - connect 시 자동으로 예약, disconnect 시 자동 정리) |
+   * 'returnValue' (자동 예약 없음. 개발자가 이 메서드를 직접 호출해야 예약되고,
    *   그 호출의 리턴값이 실제로 실행될 함수가 된다 - 아래 설명 참고).
    */
   type?: SetTimeoutType;
@@ -43,8 +43,8 @@ export interface SetTimeoutMetadata {
 const getActiveEntries = (inst: any): number[] => (inst.__swc_timeoutIds ??= []);
 
 /**
- * type:'onConnected' - connect 시 자동으로 setTimeout을 걸고, disconnect 시 (아직 실행 전이라면) 자동으로 clearTimeout 한다.
- * type:'returnValue'(기본값) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
+ * type:'onConnected'(기본값) - connect 시 자동으로 setTimeout을 걸고, disconnect 시 (아직 실행 전이라면) 자동으로 clearTimeout 한다.
+ * type:'returnValue' (@setTimeoutReturnValue) - 메서드를 감싸지 않는 대신, 호출될 때마다(개발자가 직접 호출) 원본 로직을
  *   그대로 실행하고 리턴값(또는 valueKey로 뽑은 값)이 함수면 그 함수를 새 setTimeout으로 예약한다.
  *   호출할 때마다 별도의 새 타이머가 생기며, disconnect 시 (아직 실행 전인 것들은) 전부 정리된다.
  *   원본 리턴값은 그대로 통과시키므로 다른 데코레이터와 같은 메서드에 스택해도 순서에 상관없이 안전하다.
@@ -52,7 +52,7 @@ const getActiveEntries = (inst: any): number[] => (inst.__swc_timeoutIds ??= [])
 export function setTimeout(delay: number, options: SetTimeoutOptions = {}): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const constructor = target.constructor;
-    const normalizedOptions: SetTimeoutOptions = { ...options, type: options.type ?? 'returnValue' };
+    const normalizedOptions: SetTimeoutOptions = { ...options, type: options.type ?? 'onConnected' };
 
     let metaList = ReflectUtils.getOwnMetadata(SET_TIMEOUT_METADATA_KEY, constructor) as SetTimeoutMetadata[];
     if (!metaList) {
@@ -148,3 +148,7 @@ export class SetTimeoutLifeCycler implements ElementDefineLifeCycler {
     inst.__swc_timeoutIds = [];
   }
 }
+
+/** 수동 예약: 메서드를 직접 호출해야 예약된다. = @setTimeout(delay, { type: 'returnValue' }) */
+export const setTimeoutReturnValue = (delay: number, options: Omit<SetTimeoutOptions, 'type'> = {}): MethodDecorator =>
+  setTimeout(delay, { ...options, type: 'returnValue' });

package/src/decorators/subscribeSwcAppMessage.ts

@@ -82,6 +82,33 @@ export function subscribeSwcAppMessage(targetOrMessageTypeOrOptions?: any, optio
 }
 
 export const receiveMessage = subscribeSwcAppMessage;
+
+// ── subject 를 이름에 박은 별칭: @subscribeSwcAppMessageBehavior('auth') = @subscribeSwcAppMessage('auth', { subject: 'behavior' }) ──
+type SubjectlessOptions<Data, BeforeReturn, Result> = Omit<SwcAppMessageOptions<Data, BeforeReturn, Result>, 'subject'>;
+
+const withSubject = (subject: SwcAppMessageSubject, a?: any, b?: any, descriptor?: PropertyDescriptor): any => {
+  if (descriptor) return createSubscribeSwcAppMessage({ subject })(a, b, descriptor); // 괄호 없이
+  if (typeof a === 'string') return createSubscribeSwcAppMessage({ ...(b ?? {}), subject }, a);
+  return createSubscribeSwcAppMessage({ ...(a ?? {}), subject });
+};
+
+/** 늦게 붙어도 마지막 메시지 1개를 받는다 (subject: 'behavior') */
+export function subscribeSwcAppMessageBehavior(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function subscribeSwcAppMessageBehavior(messageType: string): MethodDecorator;
+export function subscribeSwcAppMessageBehavior<Data = any, BeforeReturn = any, Result = any>(options: SubjectlessOptions<NoInfer<Data>, NoInfer<BeforeReturn>, NoInfer<Result>>): MethodDecorator;
+export function subscribeSwcAppMessageBehavior<Data = any, BeforeReturn = any, Result = any>(messageType: string, options: SubjectlessOptions<NoInfer<Data>, NoInfer<BeforeReturn>, NoInfer<Result>>): MethodDecorator;
+export function subscribeSwcAppMessageBehavior(a?: any, b?: any, descriptor?: PropertyDescriptor): any {
+  return withSubject('behavior', a, b, descriptor);
+}
+
+/** 늦게 붙어도 지나간 메시지를 전부 시간순으로 받는다 (subject: 'replay') */
+export function subscribeSwcAppMessageReplay(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function subscribeSwcAppMessageReplay(messageType: string): MethodDecorator;
+export function subscribeSwcAppMessageReplay<Data = any, BeforeReturn = any, Result = any>(options: SubjectlessOptions<NoInfer<Data>, NoInfer<BeforeReturn>, NoInfer<Result>>): MethodDecorator;
+export function subscribeSwcAppMessageReplay<Data = any, BeforeReturn = any, Result = any>(messageType: string, options: SubjectlessOptions<NoInfer<Data>, NoInfer<BeforeReturn>, NoInfer<Result>>): MethodDecorator;
+export function subscribeSwcAppMessageReplay(a?: any, b?: any, descriptor?: PropertyDescriptor): any {
+  return withSubject('replay', a, b, descriptor);
+}
 // Helper function to retrieve message subscribers metadata
 export const getSubscribeSwcAppMessageMetadata = (target: any): SwcAppMessageSubscriberMetadata[] | undefined => {
   const constructor = typeof target === 'function' ? target : target.constructor;