@dooboostore/simple-web-component 1.0.41 → 1.0.43

package/src/decorators/lifecycles.ts

@@ -26,12 +26,21 @@ export interface InnerHtmlMetadata {
 
 export interface OnConnectedOptions {
   ssrFirst?: boolean;
+  order?: number;
 }
 export interface OnConnectedMetadata {
   propertyKey: string | symbol;
   options: OnConnectedOptions;
 }
 
+export interface LifecycleOptions {
+  order?: number;
+}
+export interface LifecycleMetadata {
+  propertyKey: string | symbol;
+  order?: number;
+}
+
 
 export function onConnectedBefore(options: OnConnectedOptions): MethodDecorator;
 export function onConnectedBefore(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): void;
@@ -78,35 +87,107 @@ export function onConnectedAfter(arg1?: OnConnectedOptions | Object, arg2?: stri
 }
 
 
-function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
-  return (target: Object, propertyKey: string | symbol) => {
-    const constructor = target.constructor;
-    let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as (string | symbol)[];
-    if (!list) {
-      list = [];
-      ReflectUtils.defineMetadata(metadataKey, list, constructor);
+function createLifecycleDecorator(metadataKey: symbol): ((options?: LifecycleOptions) => MethodDecorator) & MethodDecorator {
+  const decorator = (options?: LifecycleOptions): MethodDecorator => {
+    return (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: options?.order ?? 0 });
+    };
+  };
+
+  // Support both @decorator and @decorator() syntax
+  return Object.assign(
+    (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: 0 });
+    },
+    { __isDecorator: true, __decorator: decorator }
+  ) as any;
+}
+
+// Helper to handle both @decorator and @decorator() syntax
+function createLifecycleDecoratorWithOptions(metadataKey: symbol) {
+  return function(optionOrTarget?: LifecycleOptions | Object, propertyKey?: string | symbol): MethodDecorator | void {
+    if (propertyKey) {
+      // Direct decorator usage: @decorator
+      const constructor = (optionOrTarget as Object).constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: 0 });
+      return;
     }
-    list.push(propertyKey);
+
+    // Decorator with options: @decorator({ order: 1 })
+    return (target: Object, propertyKey: string | symbol) => {
+      const constructor = target.constructor;
+      let list = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[];
+      if (!list) {
+        list = [];
+        ReflectUtils.defineMetadata(metadataKey, list, constructor);
+      }
+      list.push({ propertyKey, order: (optionOrTarget as LifecycleOptions)?.order ?? 0 });
+    };
   };
 }
 
-export const onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-// export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-// export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-// export const onConnected = onConnectedAfter;
+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(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(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);
+}
 
-export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
-export const onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
 export const onDisconnected = onDisconnectedAfter;
 
-export const onAdoptedBefore = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
-export const onAdoptedAfter = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
+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(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);
+}
+
 export const onAdopted = onAdoptedAfter;
 
-export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
+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 const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
-export const onConnectedCompleted = createLifecycleDecorator(ON_CONNECTED_COMPLETED_METADATA_KEY);
+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);
+}
 
 
 
@@ -160,21 +241,34 @@ export function onConnected(optionOrTarget: InnerHtmlOptions | Object, propertyK
 /**
  * 프로토타입 체인을 순회하며 모든 라이프사이클 메서드를 수집합니다.
  */
-// export const findAllLifecycleMetadata = <T = (string | symbol)[]>(target: any, metadataKey: symbol): T | undefined => {
-export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): (string | symbol)[] => {
-  const results = ReflectUtils.findAllMetadataFlatten(metadataKey, target)??[];
-  return results;
+export const findAllLifecycleMetadata = (target: any, metadataKey: symbol): LifecycleMetadata[] => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  const results = ReflectUtils.getOwnMetadata(metadataKey, constructor) as LifecycleMetadata[] ?? [];
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 };
 
 export const findAllOnConnectedMetadata = (target: any): InnerHtmlMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => {
+    const orderA = (a.options as any)?.order ?? 0;
+    const orderB = (b.options as any)?.order ?? 0;
+    return orderA - orderB;
+  });
 };
+
 export const findAllOnConnectedBeforeMetadata = (target: any): OnConnectedMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_BEFORE_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // 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;
-  return ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  const results = ReflectUtils.getMetadata(ON_AFTER_CONNECTED_METADATA_KEY, constructor) ?? [];
+  // Sort by order
+  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/decorators/publishSwcAppMessage.ts

@@ -10,9 +10,25 @@ export interface PublishSwcAppMessageMetadata {
 
 export interface PublishSwcAppMessageOptions {
   messageType?: string;
+  /**
+   * Custom key to extract value from return object.
+   * If not provided, uses PUBLISH_SWC_APP_MESSAGE_METADATA_KEY by default.
+   * Useful when multiple @publishSwcAppMessage decorators are on the same method.
+   * 
+   * Example:
+   * @publishSwcAppMessage('event1', { valueKey: 'detail1' })
+   * @publishSwcAppMessage('event2', { valueKey: 'detail2' })
+   * myMethod() {
+   *   return {
+   *     detail1: { type: 'event1', data: 'value1' },
+   *     detail2: { type: 'event2', data: 'value2' }
+   *   };
+   * }
+   */
+  valueKey?: symbol | string;
 }
 
-function createPublishSwcAppMessage(messageType?: string): MethodDecorator {
+function createPublishSwcAppMessage(messageType?: string, options?: PublishSwcAppMessageOptions): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const constructor = target.constructor;
     let list = ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor) as PublishSwcAppMessageMetadata[];
@@ -31,32 +47,47 @@ function createPublishSwcAppMessage(messageType?: string): MethodDecorator {
     descriptor.value = function (...args: any[]) {
       // 원본 메서드 실행
       const result = originalMethod.apply(this, args);
+
+      /**
+       * Extract value for this decorator from method return value
+       * 
+       * If return value is an object with this decorator's key,
+       * use that value. Otherwise use the entire return value.
+       * 
+       * Uses valueKey from options if provided, otherwise uses PUBLISH_SWC_APP_MESSAGE_METADATA_KEY.
+       */
+      const extractValue = (v: any) => {
+        const keyToUse = options?.valueKey ?? PUBLISH_SWC_APP_MESSAGE_METADATA_KEY;
+        if (v && typeof v === 'object' && keyToUse in v) {
+          return v[keyToUse];
+        }
+        return v;
+      };
+
+      const publishMessage = (data: any) => {
+        // appHost 찾아서 메시지 발행
+        const appHost = SwcUtils.getAppHost(this as HTMLElement);
+        if (appHost) {
+          appHost.publishMessage({
+            publisher: this,
+            data,
+            type: messageType
+          });
+        }
+      };
       
       // Promise 체크
       if (result instanceof Promise) {
         result.then((data) => {
-          // appHost 찾아서 메시지 발행
-          const appHost = SwcUtils.getAppHost(this as HTMLElement);
-          if (appHost) {
-            appHost.publishMessage({
-              publisher: this,
-              data,
-              type: messageType
-            });
-          }
+          const extracted = extractValue(data);
+          publishMessage(extracted);
         }).catch((err) => {
           console.warn('publishSwcAppMessage async error:', err);
         });
       } else {
         // 동기 호출 - 바로 메시지 발행
-        const appHost = SwcUtils.getAppHost(this as HTMLElement);
-        if (appHost) {
-          appHost.publishMessage({
-            publisher: this,
-            data: result,
-            type: messageType
-          });
-        }
+        const extracted = extractValue(result);
+        publishMessage(extracted);
       }
       
       return result;
@@ -71,27 +102,40 @@ export function publishSwcAppMessage(target: Object, propertyKey: string | symbo
 // 오버로드 시그니처 - 함수 호출 (괄호 있음)
 export function publishSwcAppMessage(): MethodDecorator;
 export function publishSwcAppMessage(messageType: string): MethodDecorator;
+export function publishSwcAppMessage(messageType: string, options: PublishSwcAppMessageOptions): MethodDecorator;
+export function publishSwcAppMessage(options: PublishSwcAppMessageOptions): MethodDecorator;
 
-export function publishSwcAppMessage(targetOrMessageType?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+export function publishSwcAppMessage(targetOrMessageTypeOrOptions?: any, propertyKeyOrOptions?: string | symbol | PublishSwcAppMessageOptions, descriptor?: PropertyDescriptor): any {
   // 직접 데코레이터로 사용된 경우 (괄호 없음): @publishSwcAppMessage
-  if (targetOrMessageType && typeof targetOrMessageType === 'object' && 
-      propertyKey && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol') &&
+  if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === 'object' && 
+      propertyKeyOrOptions && (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol') &&
       descriptor) {
-    const target = targetOrMessageType;
-    return createPublishSwcAppMessage()(target, propertyKey, descriptor);
+    const target = targetOrMessageTypeOrOptions;
+    return createPublishSwcAppMessage()(target, propertyKeyOrOptions, descriptor);
   }
 
-  // 함수로 호출된 경우 (괄호 있음): @publishSwcAppMessage() / @publishSwcAppMessage('messageType')
+  // 함수로 호출된 경우 (괄호 있음): @publishSwcAppMessage() / @publishSwcAppMessage('messageType') / @publishSwcAppMessage({...})
   let messageType: string | undefined;
+  let options: PublishSwcAppMessageOptions | undefined;
 
-  if (typeof targetOrMessageType === 'string') {
+  if (typeof targetOrMessageTypeOrOptions === 'string') {
     // 메시지 타입 전달: @publishSwcAppMessage('messageType')
-    messageType = targetOrMessageType;
+    messageType = targetOrMessageTypeOrOptions;
+    if (typeof propertyKeyOrOptions === 'object' && propertyKeyOrOptions !== null) {
+      options = propertyKeyOrOptions as PublishSwcAppMessageOptions;
+    }
+  } else if (typeof targetOrMessageTypeOrOptions === 'object' && targetOrMessageTypeOrOptions !== null) {
+    // 옵션 객체 전달: @publishSwcAppMessage({...})
+    options = targetOrMessageTypeOrOptions as PublishSwcAppMessageOptions;
+    messageType = options.messageType;
   }
 
-  return createPublishSwcAppMessage(messageType);
+  return createPublishSwcAppMessage(messageType, options);
 }
 
+// --- Aliases: publish... ---
+export const publish = publishSwcAppMessage;
+
 // Helper function to retrieve publish message metadata
 export const getPublishSwcAppMessageMetadata = (target: any): PublishSwcAppMessageMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -76,7 +76,11 @@ export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any,
 }
 
 // Helper function to retrieve route change subscribers metadata
-export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] | undefined => {
+export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  const results = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+  if (!results) return [];
+  
+  // Sort by order (default 0 if not specified)
+  return [...results].sort((a, b) => (a.options?.order ?? 0) - (b.options?.order ?? 0));
 };

package/src/elements/SwcAppMixin.ts

@@ -81,18 +81,12 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
       try {
         const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
-        if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
+        if (routeChangeSubscribers.length > 0) {
           console.log('[SWC-MIXIN] Route change subscribers found')
           
-          // Sort by order (default 0 if not specified)
-          const sortedSubscribers = [...routeChangeSubscribers].sort((a, b) => {
-            const orderA = a.options?.order ?? 0;
-            const orderB = b.options?.order ?? 0;
-            return orderA - orderB;
-          });
-          
+          // Subscribers are already sorted by order from getSubscribeSwcAppRouteChangeWhileConnectedMetadata
           // Execute subscribers in order, stop if one returns a value
-          for (const metadata of sortedSubscribers) {
+          for (const metadata of routeChangeSubscribers) {
             const methodName = metadata.propertyKey;
             let pathPattern = metadata.options?.path as any;
             const filter = metadata.options?.filter;
@@ -156,9 +150,9 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
         }
         this._swc_connected_instance.add(instance);
 
-        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY) ?? [];
+        const connectedSwcAppCallBacks = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);
         for (let connectedSwcAppCallBack of connectedSwcAppCallBacks) {
-          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack);
+          await (instance as any)?._invokeLifecycleMethod?.(connectedSwcAppCallBack.propertyKey);
         }
 
         if (this._childrenConnectedDoneInterval) {