@dooboostore/simple-web-component 1.0.51 → 1.0.53

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.51",
+  "version": "1.0.53",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -97,7 +97,7 @@
   "dependencies": {
     "@dooboostore/core": "1.0.33",
     "@dooboostore/core-web": "1.0.14",
-    "@dooboostore/simple-boot": "1.0.58"
+    "@dooboostore/simple-boot": "1.0.59"
   },
   "scripts": {
     "clean": "rm -rf dist",

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;

package/src/elements/SwcAppMixin.ts

@@ -56,6 +56,8 @@ export const setSSRAttribute = (i: HTMLElement) => {
   i.setAttribute('swc-use-ssr', (i as any)._swcId ?? '');
 };
 export const removeSSRAttribute = (i: HTMLElement) => {
+  // 표식은 지워도 "서버가 그린 엘리먼트"였다는 건 기억한다 → 첫 라우트(같은 경로)를 다시 그리지 않게 (_invokeRouteChangeSubscribers)
+  if (isSSR(i)) (i as any).__swc_ssrRoute ??= true;
   i.removeAttribute('swc-use-ssr');
 };
 
@@ -142,6 +144,14 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           // live는 전부 실행, replay는 해당 trigger 구독자만 실행.
           // on(enter/update/leave) 판정을 위해 구독자별 직전 매칭 상태를 기억한다 (멈춘 뒤에도 상태는 계속 갱신).
           const state = routeStateOf(instance);
+          // 서버가 이미 이 경로로 그려 보낸 엘리먼트는 같은 경로에 대해 다시 그리지 않는다 (@onConnected 렌더를 건너뛰는 것과 같은 규칙).
+          // 연결 때(connected)와 라우터 시작 때(live) 두 번 오므로 경로를 기억해 둘 다 건너뛰고, 다른 경로로 가면 잊는다.
+          // 매칭 상태는 아래에서 그대로 기록해 이후 enter/update/leave 판정은 정상으로 돈다.
+          const routeSig = JSON.stringify([re.path ?? '', re.search ?? '']);
+          if (ValidUtils.isBrowser() && isSSR(instance)) (instance as any).__swc_ssrRoute ??= true;
+          if ((instance as any).__swc_ssrRoute === true) (instance as any).__swc_ssrRoute = routeSig;
+          const ssrPainted = (instance as any).__swc_ssrRoute === routeSig;
+          if (!ssrPainted) delete (instance as any).__swc_ssrRoute;
           let stopped = false;
           for (const metadata of routeChangeSubscribers) {
             if (phase !== 'live' && (metadata.options?.trigger ?? 'connected') !== phase) continue;
@@ -168,7 +178,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
               : on === 'update' ? !!match && !!prev?.matched && prev.signature !== signature
               : on === 'leave' ? !match && !!prev?.matched
               : false;
-            if (stopped || !shouldRun || !instance[methodName]) continue;
+            if (stopped || ssrPainted || !shouldRun || !instance[methodName]) continue;
 
             // leave 는 지금 경로가 안 맞으므로 직전 매칭의 pathData 로 준다
             const pathData = match ? match.pathData : prev?.pathData ?? {};