@dooboostore/simple-web-component 1.0.42 → 1.0.44

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 publishMessage = 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/query.ts

@@ -11,173 +11,104 @@ export interface QueryMetadata {
 
 export const QUERY_METADATA_KEY = Symbol.for('simple-web-component:query');
 
-export function query(target: SpecialSelector): PropertyDecorator;
+export function query(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
 export function query(selector: string, options?: SwcQueryOptions): PropertyDecorator;
+export function query(options?: SwcQueryOptions): PropertyDecorator;
 /**
  * @query decorator to inject a single element into a class property.
  */
-export function query(selectorOrTarget: string, options: any = {}): PropertyDecorator {
-  return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
-    if (descriptor !== undefined) {
-      throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-    }
-
-    const constructor = targetObj.constructor;
-    let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
-    if (!queries) {
-      queries = [];
-      ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
-    }
-    queries.push({ propertyKey, selector: selectorOrTarget, options });
-
-    Object.defineProperty(targetObj, propertyKey, {
-      get(this: HTMLElement) {
-        ensureInit(this);
-        const selector = selectorOrTarget;
-
-        const r = options.root || 'auto';
-        const applyRoot = (t: any) => {
-          if (!t || !(t instanceof HTMLElement)) return t;
-          if (r === 'auto') return t.shadowRoot || t;
-          if (r === 'shadow') return t.shadowRoot;
-          if (r === 'light') return t;
-          if (r === 'all') return t.shadowRoot || t; 
-          return t;
-        };
-
-        // --- Special Selectors: HostSet ---
-        const hostSet = SwcUtils.getHostSet(this);
-        if (selector === '$this') return applyRoot(this);
-        if (selector === '$host') return applyRoot(hostSet.$host);
-        if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
-        if (selector === '$appHost') return applyRoot(hostSet.$appHost);
-        if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
-        if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
-        if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
-        if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
-
-        // --- Special Selectors: Env ---
-        const config = getElementConfig(this);
-        const win = config?.window || window;
-        if (selector === '$window') return win;
-        if (selector === '$document') return win.document;
-
-        // --- Standard Selectors ---
-        if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-        if (r === 'light') return this.querySelector(selector);
-        if (r === 'all') {
-          const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
-          return shadowMatch || this.querySelector(selector);
-        }
-        return (this.shadowRoot || this).querySelector(selector);
-      },
-      set(this: HTMLElement, nv: any) {
-        ensureInit(this);
-        if (nv === null || nv === undefined) {
+export function query(selectorOrTarget?: string | Object, optionsOrPropertyKey?: SwcQueryOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  // Bare decorator: @query
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    throw new Error(`@query decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string') {
+    return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
+      if (descriptor !== undefined) {
+        throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+      }
+
+      const constructor = targetObj.constructor;
+      let queries = ReflectUtils.getMetadata<QueryMetadata[]>(QUERY_METADATA_KEY, constructor);
+      if (!queries) {
+        queries = [];
+        ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
+      }
+      queries.push({ propertyKey, selector: selectorOrTarget, options: optionsOrPropertyKey as SwcQueryOptions || {} });
+
+      Object.defineProperty(targetObj, propertyKey, {
+        get(this: HTMLElement) {
+          ensureInit(this);
           const selector = selectorOrTarget;
-          if (selector.startsWith('$') && selector !== '$this') return;
 
-          const r = options.root || 'auto';
-          const targets: Element[] = [];
-
-          if (r === 'shadow') {
-            if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
-          } else if (r === 'light') {
-            if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
-          } else if (r === 'all') {
-            if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
-            if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
-          } else {
-            const el = (this.shadowRoot || this).querySelector(selector);
-            if (el) targets.push(el);
+          const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof HTMLElement)) return t;
+            if (r === 'auto') return t.shadowRoot || t;
+            if (r === 'shadow') return t.shadowRoot;
+            if (r === 'light') return t;
+            if (r === 'all') return t.shadowRoot || t; 
+            return t;
+          };
+
+          // --- Special Selectors: HostSet ---
+          const hostSet = SwcUtils.getHostSet(this);
+          if (selector === '$this') return applyRoot(this);
+          if (selector === '$host') return applyRoot(hostSet.$host);
+          if (selector === '$parentHost') return applyRoot(hostSet.$parentHost);
+          if (selector === '$appHost') return applyRoot(hostSet.$appHost);
+          if (selector === '$firstHost') return applyRoot(hostSet.$firstHost);
+          if (selector === '$lastHost') return applyRoot(hostSet.$lastHost);
+          if (selector === '$firstAppHost') return applyRoot(hostSet.$firstAppHost);
+          if (selector === '$lastAppHost') return applyRoot(hostSet.$lastAppHost);
+
+          // --- Special Selectors: Env ---
+          const config = getElementConfig(this);
+          const win = config?.window || window;
+          if (selector === '$window') return win;
+          if (selector === '$document') return win.document;
+
+          // --- Standard Selectors ---
+          if (r === 'shadow') return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          if (r === 'light') return this.querySelector(selector);
+          if (r === 'all') {
+            const shadowMatch = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+            return shadowMatch || this.querySelector(selector);
           }
-
-          targets.forEach(t => t.remove());
-        }
-      },
-      enumerable: true,
-      configurable: true
-    });
-  };
-}
-
-/**
- * @queryThis decorator - simplified version of @query for $this selector
- */
-export function queryThis(target: Object, propertyKey: string | symbol): void;
-export function queryThis(): PropertyDecorator;
-export function queryThis(options: SwcQueryOptions): PropertyDecorator;
-export function queryThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query('$this', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query('$this', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query('$this', {});
-  }
-}
-
-
-export function queryWindow(target: Object, propertyKey: string | symbol): void;
-export function queryWindow(): PropertyDecorator;
-export function queryWindow(options: SwcQueryOptions): PropertyDecorator;
-export function queryWindow(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query('$window', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query('$window', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query('$window', {});
-  }
-}
-
-export function queryDocument(target: Object, propertyKey: string | symbol): void;
-export function queryDocument(): PropertyDecorator;
-export function queryDocument(options: SwcQueryOptions): PropertyDecorator;
-export function queryDocument(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query('$document', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query('$document', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query('$document', {});
-  }
-}
-/**
- * @host - Query $host (Direct parent SWC component)
- */
-export function queryHost(target: Object, propertyKey: string | symbol): void;
-export function queryHost(): PropertyDecorator;
-export function queryHost(options: SwcQueryOptions): PropertyDecorator;
-export function queryHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query('$host', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query('$host', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query('$host', {});
-  }
-}
-
-/**
- * @appHost - Query $appHost (Nearest <swc-app>)
- */
-export function queryAppHost(target: Object, propertyKey: string | symbol): void;
-export function queryAppHost(): PropertyDecorator;
-export function queryAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function queryAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return query('$appHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return query('$appHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return query('$appHost', {});
+          return (this.shadowRoot || this).querySelector(selector);
+        },
+        set(this: HTMLElement, nv: any) {
+          ensureInit(this);
+          if (nv === null || nv === undefined) {
+            const selector = selectorOrTarget;
+            if (selector.startsWith('$') && selector !== '$this') return;
+
+            const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
+            const targets: Element[] = [];
+
+            if (r === 'shadow') {
+              if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
+            } else if (r === 'light') {
+              if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+            } else if (r === 'all') {
+              if (this.shadowRoot?.querySelector(selector)) targets.push(this.shadowRoot.querySelector(selector)!);
+              if (this.querySelector(selector)) targets.push(this.querySelector(selector)!);
+            } else {
+              const el = (this.shadowRoot || this).querySelector(selector);
+              if (el) targets.push(el);
+            }
+
+            targets.forEach(t => t.remove());
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    };
   }
+  // Without selector (defaults to $this)
+  return query('$this', selectorOrTarget as SwcQueryOptions);
 }
 
 export const getQueryMetadata = (target: any): QueryMetadata[]  => {