@dooboostore/simple-web-component 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.31",
+  "version": "1.0.33",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core": "1.0.30",
-    "@dooboostore/core-node": "1.0.12",
     "@dooboostore/core-web": "1.0.10",
-    "@dooboostore/simple-boot": "1.0.54"
+    "@dooboostore/core": "1.0.30",
+    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-node": "1.0.12"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/applyStyle.ts

@@ -34,7 +34,7 @@ function createStyleDecorator(action: StyleAction) {
         if (res !== undefined) {
           const win = (this as any).ownerDocument?.defaultView || window;
           const host = this as unknown as HTMLElement;
-          const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+          const hostSet = SwcUtils.getHelperAndHostSet(win, host);
           const r = options.root || 'auto';
           const targetEls: HTMLElement[] = [];
 

package/src/decorators/attribute.ts

@@ -1,7 +1,8 @@
-import {ReflectUtils} from '@dooboostore/core';
+import {ReflectUtils, FunctionUtils, ActionExpression} from '@dooboostore/core';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 import {SpecialSelector, SwcQueryOptions} from '../types';
+import { ConvertUtils } from '@dooboostore/core-web';
 export interface AttributeFieldOptions extends SwcQueryOptions {
   name?: string;
   // connectedInitialize?: boolean;
@@ -113,38 +114,42 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       
       Object.defineProperty(target, propertyKey, {
         get(this: any) {
-          // console.log('------>??gettttt', this,  propertyKey);
-          // try {
-            const attrName = options.name || String(propertyKey);
-            const conf = getElementConfig(this);
-            const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
-            const targetType = options.type || designType;
-          //
-            // connectedInitialize: true이면 privateKey 값만 반환 (DOM 무시)
-            // if (options.connectedInitialize === true && (this as any).__swc_syncing_init) {
-            //   console.log('cccccccc2');
-            //   return this[privateKey];
-            //   // return convertValue(this[privateKey], targetType);
-            // }
-
-            const targets = resolveTargetEls(this, selector, options, currentWin);
-            const primaryTarget = targets[0];
-
-            if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
-              if ((primaryTarget as any).hasAttribute(attrName)) {
-                const domVal = (primaryTarget as any).getAttribute(attrName);
-                return convertValue(domVal, targetType);
+          const attrName = options.name || String(propertyKey);
+          const conf = getElementConfig(this);
+          const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);
+          const targetType = options.type || designType;
+
+          const targets = resolveTargetEls(this, selector, options, currentWin);
+          const primaryTarget = targets[0];
+
+          if (primaryTarget && typeof (primaryTarget as any).hasAttribute === 'function') {
+            if ((primaryTarget as any).hasAttribute(attrName)) {
+              let domVal = (primaryTarget as any).getAttribute(attrName);
+              
+              // 표현식 체크
+              const ae = new ActionExpression(domVal);
+              const expr = ae.getFirstExpression('call-return');
+              if (expr) {
+                try {
+                  const result = FunctionUtils.executeReturn({
+                    script: ConvertUtils.decodeHtmlEntity(expr.script, currentWin.document),
+                    context: this,
+                    args: SwcUtils.getHelperAndHostSet(currentWin, this)
+                  });
+                  return convertValue(result, targetType);
+                } catch (e) {
+                  console.error(`[SWC] Failed to execute directive {{= ${expr.script} }}:`, e);
+                  return convertValue(domVal, targetType);
+                }
               }
-              return null;
+              
+              return convertValue(domVal, targetType);
             }
+            return null;
+          }
 
-            const data =  convertValue(this[privateKey], targetType);
-          // console.log('get rrr', data);
-            return data;
-          // } catch (err) {
-          //   console.error('Error in getter:', err);
-          //   throw err;
-          // }
+          const data = convertValue(this[privateKey], targetType);
+          return data;
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;

package/src/decorators/elementDefine.ts

@@ -1,5 +1,4 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { FunctionUtils } from '@dooboostore/core';
+import { ReflectUtils, FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { getAddEventListenerMetadata } from './addEventListener';
 import { ON_INITIALIZE_METADATA_KEY, ON_BEFORE_CONNECTED_METADATA_KEY, ON_AFTER_CONNECTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_AFTER_ADOPTED_METADATA_KEY, findAllLifecycleMetadata, getOnConnectedInnerHtmlMetadata } from './lifecycles';
 import { getEmitCustomEventMetadataList } from './emitCustomEvent';
@@ -12,6 +11,7 @@ import { SwcUtils } from '../utils/Utils';
 import { HTML_TAG_ENTRIES, DOM_EVENT_NAMES } from '../config/config';
 import { SituationTypeContainer, SituationTypeContainers } from '@dooboostore/simple-boot/decorators/inject/Inject';
 import { InjectSituationType, HostSet } from '../types';
+import { ConvertUtils } from '@dooboostore/core-web';
 
 // --- Core Interfaces & Types ---
 
@@ -22,6 +22,7 @@ export interface ElementConfig {
   observedAttributes?: string[];
   customElementRegistry?: any;
   window?: Window;
+  useShadow?: boolean;
 }
 
 export interface ElementMetadata extends Omit<ElementConfig, 'window'> {
@@ -214,8 +215,7 @@ const setupPrototype = (proto: any) => {
     if (oldHandler) el.removeEventListener(eventName, oldHandler);
 
     const handler = async (event: any) => {
-      const parent = SwcUtils.findNearestSwcHost(el);
-      const hostSet = SwcUtils.getHostSet(parent || el);
+      const hostSet = SwcUtils.getHostSet(el);
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
       const helpers = SwcUtils.getHelperSet(currentWin);
@@ -237,8 +237,7 @@ const setupPrototype = (proto: any) => {
   proto.__swc_executeAttributeEvent = async function (el: HTMLElement, attrName: string, script: string, event: Event) {
     ensureInit(this);
 
-    const parent = SwcUtils.findNearestSwcHost(el);
-    const hostSet = SwcUtils.getHostSet(parent || el);
+    const hostSet = SwcUtils.getHostSet(el);
     const conf = getElementConfig(this);
     const currentWin = (this as any)._resolveWindow(conf);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
@@ -318,7 +317,7 @@ export const elementDefine =
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow(conf);
 
-      if (connectedInnerHtmlList.some(it => it.options.useShadow === true) && !this.shadowRoot) {
+      if ((connectedInnerHtmlList.some(it => it.options.useShadow === true) || conf?.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: 'open' });
       }
 
@@ -565,6 +564,27 @@ export const elementDefine =
 
       const hSet = SwcUtils.getHostSet(this as any);
 
+      // Process expression directive before passing to handlers
+      let processedVal = newVal;
+      if (newVal !== null) {
+        const ae = new ActionExpression(newVal);
+        const expr = ae.getFirstExpression('call-return');
+        if (expr) {
+          const win = (this as any)._resolveWindow?.() || ((typeof window !== 'undefined' ? window : undefined) as any);
+          try {
+            const result = FunctionUtils.executeReturn({
+              script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
+              context: this,
+              args: SwcUtils.getHelperAndHostSet(win,this as any)
+            });
+            processedVal = String(result);
+          } catch (e) {
+            console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}:`, e);
+            processedVal = newVal;
+          }
+        }
+      }
+
       if (name.startsWith('swc-on-') && !swcLifecycleAttributes.includes(name)) {
         if (newVal !== null) {
           const eventName = name.substring(7);
@@ -579,7 +599,7 @@ export const elementDefine =
 
       const mKeys = attrChangeMap.get(name);
       if (mKeys && Array.isArray(mKeys)) {
-        for (const key of mKeys) (this as any)[key](newVal, old, name, hSet);
+        for (const key of mKeys) (this as any)[key](processedVal, old, name, hSet);
       }
     };
 

package/src/decorators/index.ts

@@ -11,4 +11,6 @@ export * from './applyClass';
 export * from './applyStyle';
 export * from './applyAttribute';
 export * from './setProperty';
-export * from './subscribeSwcAppRouteChange';
+export * from './subscribeSwcAppRouteChangeWhileConnected';
+export * from './subscribeSwcAppMessageWhileConnected';
+export * from './publishSwcAppMessage';

package/src/decorators/publishSwcAppMessage.ts

@@ -0,0 +1,100 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { SwcAppMessage } from '../types';
+import { SwcUtils } from '../utils/Utils';
+
+export const PUBLISH_SWC_APP_MESSAGE_METADATA_KEY = Symbol.for('simple-web-component:publish-swc-app-message');
+
+export interface PublishSwcAppMessageMetadata {
+  propertyKey: string | symbol;
+  messageType?: string;
+}
+
+export interface PublishSwcAppMessageOptions {
+  messageType?: string;
+}
+
+function createPublishSwcAppMessage(messageType?: string): 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[];
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, messageType });
+    
+    if (!descriptor) {
+      return descriptor;
+    }
+
+    // 메서드 래핑 - 원본 메서드의 반환값을 캡처하여 메시지 발행
+    const originalMethod = descriptor.value;
+    descriptor.value = function (...args: any[]) {
+      // 원본 메서드 실행
+      const result = originalMethod.apply(this, args);
+      
+      // 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
+            });
+          }
+        }).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
+          });
+        }
+      }
+      
+      return result;
+    };
+
+    return descriptor;
+  };
+}
+
+// 오버로드 시그니처 - 직접 사용 (괄호 없음)
+export function publishSwcAppMessage(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+// 오버로드 시그니처 - 함수 호출 (괄호 있음)
+export function publishSwcAppMessage(): MethodDecorator;
+export function publishSwcAppMessage(messageType: string): MethodDecorator;
+
+export function publishSwcAppMessage(targetOrMessageType?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  // 직접 데코레이터로 사용된 경우 (괄호 없음): @publishSwcAppMessage
+  if (targetOrMessageType && typeof targetOrMessageType === 'object' && 
+      propertyKey && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol') &&
+      descriptor) {
+    const target = targetOrMessageType;
+    return createPublishSwcAppMessage()(target, propertyKey, descriptor);
+  }
+
+  // 함수로 호출된 경우 (괄호 있음): @publishSwcAppMessage() / @publishSwcAppMessage('messageType')
+  let messageType: string | undefined;
+
+  if (typeof targetOrMessageType === 'string') {
+    // 메시지 타입 전달: @publishSwcAppMessage('messageType')
+    messageType = targetOrMessageType;
+  }
+
+  return createPublishSwcAppMessage(messageType);
+}
+
+// Helper function to retrieve publish message metadata
+export const getPublishSwcAppMessageMetadata = (target: any): PublishSwcAppMessageMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getOwnMetadata(PUBLISH_SWC_APP_MESSAGE_METADATA_KEY, constructor);
+};

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -0,0 +1,73 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { SwcAppMessage } from '../types';
+
+export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-message-while-connected');
+
+export interface SwcAppMessageSubscriberMetadata {
+  propertyKey: string | symbol;
+  messageType?: string;
+  filter?: (message: SwcAppMessage) => boolean;
+}
+
+export interface SwcAppMessageOptions {
+  filter?: (message: SwcAppMessage) => boolean;
+}
+
+function createSubscribeSwcAppMessageWhileConnected(options?: SwcAppMessageOptions, messageType?: string): MethodDecorator {
+  return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
+    const filter = options?.filter;
+
+    const constructor = target.constructor;
+    let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor) as SwcAppMessageSubscriberMetadata[];
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, messageType, filter });
+    
+    return descriptor;
+  };
+}
+
+// 오버로드 시그니처 - 직접 사용 (괄호 없음)
+export function subscribeSwcAppMessageWhileConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 메시지 타입만
+export function subscribeSwcAppMessageWhileConnected(messageType: string): MethodDecorator;
+// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 옵션만
+export function subscribeSwcAppMessageWhileConnected(options: SwcAppMessageOptions): MethodDecorator;
+// 오버로드 시그니처 - 함수 호출 (괄호 있음) - 메시지 타입 + 옵션
+export function subscribeSwcAppMessageWhileConnected(messageType: string, options: SwcAppMessageOptions): MethodDecorator;
+
+export function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOptions?: any, optionsOrPropertyKey?: any, descriptor?: PropertyDescriptor): any {
+  // 직접 데코레이터로 사용된 경우 (괄호 없음): @subscribeSwcAppMessageWhileConnected
+  if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === 'object' && 
+      optionsOrPropertyKey && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol') &&
+      descriptor) {
+    const target = targetOrMessageTypeOrOptions;
+    const propertyKey = optionsOrPropertyKey;
+    return createSubscribeSwcAppMessageWhileConnected({})(target, propertyKey, descriptor);
+  }
+
+  // 함수로 호출된 경우 (괄호 있음)
+  let messageType: string | undefined;
+  let options: SwcAppMessageOptions = {};
+
+  if (typeof targetOrMessageTypeOrOptions === 'string') {
+    // 메시지 타입 전달: @subscribeSwcAppMessageWhileConnected('messageType') 또는 @subscribeSwcAppMessageWhileConnected('messageType', options)
+    messageType = targetOrMessageTypeOrOptions;
+    if (optionsOrPropertyKey && typeof optionsOrPropertyKey === 'object') {
+      options = optionsOrPropertyKey;
+    }
+  } else if (targetOrMessageTypeOrOptions && typeof targetOrMessageTypeOrOptions === 'object') {
+    // 옵션만 전달: @subscribeSwcAppMessageWhileConnected({ filter: ... })
+    options = targetOrMessageTypeOrOptions;
+  }
+
+  return createSubscribeSwcAppMessageWhileConnected(options, messageType);
+}
+
+// Helper function to retrieve message subscribers metadata
+export const getSubscribeSwcAppMessageWhileConnectedMetadata = (target: any): SwcAppMessageSubscriberMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+};

package/src/decorators/{subscribeSwcAppRouteChange.ts → subscribeSwcAppRouteChangeWhileConnected.ts}

@@ -1,7 +1,7 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { Router } from '@dooboostore/core-web';
 
-export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-route-change');
+export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for('simple-web-component:subscribe-swc-app-route-change-while-connected');
 
 export interface SwcAppRouteChangeSubscriberMetadata {
   propertyKey: string | symbol;
@@ -14,16 +14,16 @@ export interface SwcAppRouteChangeOptions {
   filter?: (router: Router) => boolean;
 }
 
-function createSwcAppRouteChangeSubscriber(options?: SwcAppRouteChangeOptions): MethodDecorator {
+function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {
   return (target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor) => {
     const pathPattern = options?.path;
     const filter = options?.filter;
 
     const constructor = target.constructor;
-    let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, constructor) as SwcAppRouteChangeSubscriberMetadata[];
+    let list = ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor) as SwcAppRouteChangeSubscriberMetadata[];
     if (!list) {
       list = [];
-      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, list, constructor);
+      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
     }
     list.push({ propertyKey, pathPattern, filter });
     
@@ -32,40 +32,40 @@ function createSwcAppRouteChangeSubscriber(options?: SwcAppRouteChangeOptions):
 }
 
 // 오버로드 시그니처 - 직접 사용 (괄호 없음)
-export function subscribeSwcAppRouteChange(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function subscribeSwcAppRouteChangeWhileConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
 // 오버로드 시그니처 - 함수 호출 (괄호 있음)
-export function subscribeSwcAppRouteChange(): MethodDecorator;
-export function subscribeSwcAppRouteChange(pathPattern: string): MethodDecorator;
-export function subscribeSwcAppRouteChange(pathPatterns: string[]): MethodDecorator;
-export function subscribeSwcAppRouteChange(options: SwcAppRouteChangeOptions): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(pathPattern: string): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(pathPatterns: string[]): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(options: SwcAppRouteChangeOptions): MethodDecorator;
 
 // 실제 구현 (이중 모드)
-export function subscribeSwcAppRouteChange(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
-  // 직접 데코레이터로 사용된 경우 (괄호 없음): @subscribeSwcAppRouteChange
+export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any, propertyKey?: string | symbol, descriptor?: PropertyDescriptor): any {
+  // 직접 데코레이터로 사용된 경우 (괄호 없음): @subscribeSwcAppRouteChangeWhileConnected
   // propertyKey가 string | symbol이고 descriptor가 있으면 직접 사용
   if (propertyKey && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return createSwcAppRouteChangeSubscriber({})(targetOrOptions, propertyKey, descriptor);
+    return createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKey, descriptor);
   }
   
-  // 함수로 호출된 경우 (괄호 있음): @subscribeSwcAppRouteChange() / @subscribeSwcAppRouteChange('/path')
+  // 함수로 호출된 경우 (괄호 있음): @subscribeSwcAppRouteChangeWhileConnected() / @subscribeSwcAppRouteChangeWhileConnected('/path')
   let options: SwcAppRouteChangeOptions = {};
 
   if (Array.isArray(targetOrOptions)) {
-    // 배열: @subscribeSwcAppRouteChange(['/path1', '/path2'])
+    // 배열: @subscribeSwcAppRouteChangeWhileConnected(['/path1', '/path2'])
     options.path = targetOrOptions;
   } else if (typeof targetOrOptions === 'string') {
-    // 문자열: @subscribeSwcAppRouteChange('/path')
+    // 문자열: @subscribeSwcAppRouteChangeWhileConnected('/path')
     options.path = targetOrOptions;
   } else if (targetOrOptions && typeof targetOrOptions === 'object') {
-    // 객체: @subscribeSwcAppRouteChange({ path: '/path', filter: ... })
+    // 객체: @subscribeSwcAppRouteChangeWhileConnected({ path: '/path', filter: ... })
     options = targetOrOptions;
   }
 
-  return createSwcAppRouteChangeSubscriber(options);
+  return createSubscribeSwcAppRouteChangeWhileConnected(options);
 }
 
 // Helper function to retrieve route change subscribers metadata
-export const getSubscribeSwcAppRouteChangeMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] | undefined => {
+export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;
-  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_METADATA_KEY, constructor);
+  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
 };

package/src/elements/SwcAppMixin.ts

@@ -1,10 +1,11 @@
 import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEngine';
-import { SwcAppInterface } from '../types';
+import { SwcAppInterface, SwcAppMessage } from '../types';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, Subscription } from '@dooboostore/core';
 import { Router, RouterEventType } from '@dooboostore/core-web';
 import { ON_CONNECTED_SWC_APP_METADATA_KEY, findAllLifecycleMetadata } from '../decorators/lifecycles';
-import { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';
+import { getSubscribeSwcAppRouteChangeWhileConnectedMetadata } from '../decorators/subscribeSwcAppRouteChangeWhileConnected';
+import { getSubscribeSwcAppMessageWhileConnectedMetadata } from '../decorators/subscribeSwcAppMessageWhileConnected';
 
 export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
   //@ts-ignore
@@ -29,7 +30,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
-      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
+      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
       if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
         routeChangeSubscribers.forEach((metadata: any) => {
           const methodName = metadata.propertyKey || metadata;
@@ -185,7 +186,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           const userConfig = FunctionUtils.executeReturn({
             script: configStr,
             context: this,
-            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this))
+            args: SwcUtils.getHelperAndHostSet(win, this)
           });
           this.connect(userConfig);
         } catch (e) {
@@ -221,5 +222,43 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     reload(): void {
       this.router?.reload();
     }
+
+    publishMessage(message: SwcAppMessage): void {
+      // 메시지를 모든 connected component instances로 분배
+      this._swc_connected_instance.forEach((instance: any) => {
+        this._invokeMessageSubscribers(instance, message);
+      });
+    }
+
+    _invokeMessageSubscribers(instance: any, message: SwcAppMessage) {
+      const messageSubscribers = getSubscribeSwcAppMessageWhileConnectedMetadata(instance);
+      if (messageSubscribers && Array.isArray(messageSubscribers)) {
+        messageSubscribers.forEach((metadata: any) => {
+          const methodName = metadata.propertyKey;
+          const messageType = metadata.messageType;
+          const filter = metadata.filter;
+
+          // 메시지 타입 확인
+          let typeMatched = false;
+          if (!messageType) {
+            // messageType이 없으면 모든 메시지 매칭 (와일드카드)
+            typeMatched = true;
+          } else if (message.type === messageType) {
+            typeMatched = true;
+          }
+
+          // 필터 적용
+          let filterMatched = true;
+          if (filter && typeMatched) {
+            filterMatched = filter(message);
+          }
+
+          // 조건을 만족하면 메서드 호출
+          if (typeMatched && filterMatched && typeof instance[methodName] === 'function') {
+            instance[methodName](message);
+          }
+        });
+      }
+    }
   };
 }