@dooboostore/simple-web-component 1.0.32 → 1.0.34

package/src/decorators/setProperty.ts

@@ -1,10 +1,11 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SwcQueryOptions } from '../types';
+import { HelperHostSet, SwcQueryOptions } from '../types';
 
 export interface PropertySetOptions extends SwcQueryOptions {
   name?: string;
+  filter?: (target: HTMLElement, value: any, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
 }
 
 export interface PropertySetMetadata {
@@ -38,55 +39,68 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
     });
 
     const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
+    descriptor.value = function (...args: any[]) {
       ensureInit(this);
-      const res = await (original as any).apply(this, args);
-      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 r = finalOptions.root || 'auto';
-        const targetEls: HTMLElement[] = [];
+      const res = (original as any).apply(this, args);
 
-        const applyRoot = (t: any) => {
-          if (!t || !(t instanceof win.HTMLElement)) return;
-          targetEls.push(t);
-        };
+      const handleResult = (resolvedValue: any) => {
+        if (resolvedValue !== 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 r = finalOptions.root || 'auto';
+          const targetEls: HTMLElement[] = [];
 
-        if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
-        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
-        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
-        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
-        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
-        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
-        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
-        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
-        else if (selector === ':host' || !selector) applyRoot(host);
-        else {
-          const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
-          if (targetRoot) {
-            const found = targetRoot.querySelectorAll(selector);
-            if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+          const applyRoot = (t: any) => {
+            if (!t || !(t instanceof win.HTMLElement)) return;
+            targetEls.push(t);
+          };
+
+          if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+          else if (selector === ':appHost') applyRoot(hostSet.$appHost);
+          else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+          else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+          else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
+          else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
+          else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
+          else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
+          else if (selector === ':host' || !selector) applyRoot(host);
+          else {
+            const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+            if (targetRoot) {
+              const found = targetRoot.querySelectorAll(selector);
+              if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+            }
           }
-        }
 
-        targetEls.forEach(targetEl => {
-          const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
+          targetEls.forEach(targetEl => {
+            if (finalOptions.filter && !finalOptions.filter(targetEl, resolvedValue, {currentThis: this, helper: hostSet})) {
+              return;
+            }
+            const resolvedRes = typeof resolvedValue === 'function' ? (resolvedValue as any)(targetEl, hostSet) : resolvedValue;
 
-          if (propertyName) {
-            // Case: @setProperty(selector, 'propertyName')
-            (targetEl as any)[propertyName] = resolvedRes;
-          } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
-            // Case: @setProperty(selector) with Object return - assign multiple properties
-            Object.entries(resolvedRes as any).forEach(([prop, val]) => {
-              const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
-              (targetEl as any)[prop] = finalVal;
-            });
-          } else {
-            // Simple value - assign to 'value' property by default
-            (targetEl as any).value = resolvedRes;
-          }
-        });
+            if (propertyName) {
+              // Case: @setProperty(selector, 'propertyName')
+              (targetEl as any)[propertyName] = resolvedRes;
+            } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+              // Case: @setProperty(selector) with Object return - assign multiple properties
+              Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+                const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+                (targetEl as any)[prop] = finalVal;
+              });
+            } else {
+              // Simple value - assign to 'value' property by default
+              (targetEl as any).value = resolvedRes;
+            }
+          });
+        }
+        return resolvedValue;
+      };
+
+      if (res instanceof Promise) {
+        return res.then(handleResult);
+      } else {
+        return handleResult(res);
       }
     };
   };

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, currentThis: any) => boolean;
+}
+
+export interface SwcAppMessageOptions {
+  filter?: (message: SwcAppMessage, currentThis: any) => 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/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -0,0 +1,71 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { Router } from '@dooboostore/core-web';
+
+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;
+  pathPattern?: string | string[];
+  filter?: (router: Router, currentThis: any) => boolean;
+}
+
+export interface SwcAppRouteChangeOptions {
+  path?: string | string[];
+  filter?: (router: Router, currentThis: any) => boolean;
+}
+
+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_WHILE_CONNECTED_METADATA_KEY, constructor) as SwcAppRouteChangeSubscriberMetadata[];
+    if (!list) {
+      list = [];
+      ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
+    }
+    list.push({ propertyKey, pathPattern, filter });
+    
+    return descriptor;
+  };
+}
+
+// 오버로드 시그니처 - 직접 사용 (괄호 없음)
+export function subscribeSwcAppRouteChangeWhileConnected(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+// 오버로드 시그니처 - 함수 호출 (괄호 있음)
+export function subscribeSwcAppRouteChangeWhileConnected(): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(pathPattern: string): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(pathPatterns: string[]): MethodDecorator;
+export function subscribeSwcAppRouteChangeWhileConnected(options: SwcAppRouteChangeOptions): MethodDecorator;
+
+// 실제 구현 (이중 모드)
+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 createSubscribeSwcAppRouteChangeWhileConnected({})(targetOrOptions, propertyKey, descriptor);
+  }
+  
+  // 함수로 호출된 경우 (괄호 있음): @subscribeSwcAppRouteChangeWhileConnected() / @subscribeSwcAppRouteChangeWhileConnected('/path')
+  let options: SwcAppRouteChangeOptions = {};
+
+  if (Array.isArray(targetOrOptions)) {
+    // 배열: @subscribeSwcAppRouteChangeWhileConnected(['/path1', '/path2'])
+    options.path = targetOrOptions;
+  } else if (typeof targetOrOptions === 'string') {
+    // 문자열: @subscribeSwcAppRouteChangeWhileConnected('/path')
+    options.path = targetOrOptions;
+  } else if (targetOrOptions && typeof targetOrOptions === 'object') {
+    // 객체: @subscribeSwcAppRouteChangeWhileConnected({ path: '/path', filter: ... })
+    options = targetOrOptions;
+  }
+
+  return createSubscribeSwcAppRouteChangeWhileConnected(options);
+}
+
+// Helper function to retrieve route change subscribers metadata
+export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] | undefined => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getOwnMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, constructor);
+};

package/src/elements/SwcAppEngine.ts

@@ -1,26 +1,23 @@
 import { SimpleApplication } from '@dooboostore/simple-boot/SimpleApplication';
-import { PathRouter } from '@dooboostore/core-web';
-import { HashRouter } from '@dooboostore/core-web';
+import { HashRouter, PathRouter, Router, RouterEventType } from '@dooboostore/core-web';
 import { ElementRouter } from '../router/ElementRouter';
 import { SimOption } from '@dooboostore/simple-boot/SimOption';
-import { Router, RouterEventType } from '@dooboostore/core-web';
-import { Subscription } from '@dooboostore/core';
-import { ConstructorType, OptionalType } from '@dooboostore/core';
-import { FunctionUtils } from '@dooboostore/core';
-import { SwcUtils } from '../utils/Utils';
+import { ConstructorType, OptionalType, Subscription } from '@dooboostore/core';
 
 import { SwcAppInterface } from '../types';
-import {Intent} from "@dooboostore/simple-boot";
+import { SimConfig } from '@dooboostore/simple-boot';
 
 export type SwcConfigType = {
   routeType: 'path' | 'hash' | 'element';
-  connectMode?: 'direct' | 'swap';
+  connectMode?: 'direct' | 'swap' | 'clear-swap';
   container?: symbol;
+  otherInstanceSim?: Map<ConstructorType<any> | Function | SimConfig | symbol, any>;
   path?: string;
   window: Window;
   onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => void;
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
+  onRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;
 };
 
 export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
@@ -52,15 +49,17 @@ export class SwcAppEngine {
       // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)
 
       // App start
-      const containerSymbol = this._config.container || (this.host as any).getContainerSymbol?.();
       this.simpleApplication = new SimpleApplication(
         new SimOption({
           excludeProxys: [Node],
-          container: containerSymbol
+          container: this._config.container
         })
       );
 
       const otherInstanceSim = new Map<any, any>();
+      this.config.otherInstanceSim?.forEach((v, k) => {
+        otherInstanceSim.set(k, v);
+      });
       if (this.router) otherInstanceSim.set(Router, this.router);
       this.simpleApplication.run(otherInstanceSim);
 
@@ -68,7 +67,7 @@ export class SwcAppEngine {
         this._config.onEngineStarted(this.simpleApplication, this.host as unknown as SwcAppInterface);
       }
     } catch (e) {
-      console.error('[SWC-APP-ENGINE] Init failed:', e);
+      console.error('[SWC-APP-ENGINE] Init failed:', e, this._config);
     }
   }
 

package/src/elements/SwcAppMixin.ts

@@ -1,16 +1,19 @@
 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
   return class extends Base implements SwcAppInterface {
     __swc_engine = new SwcAppEngine(this as any);
     _swc_connected_instance = new Set<any>();
+    _swc_started_instances = new WeakSet<any>();
+    _swc_notified_routes = new WeakMap<any, RouterEventType>();
     _routerSubscription?: Subscription;
     _lastRouterEvent?: RouterEventType;
 
@@ -28,11 +31,15 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
-    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
-      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
+    async _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
+      // 이미 이 라우트 이벤트에 대해 처리된 인스턴스라면 스킵 (동시성/중복 방지)
+      if (this._swc_notified_routes.get(instance) === re) return;
+      this._swc_notified_routes.set(instance, re);
+
+      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
       if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
-        routeChangeSubscribers.forEach((metadata: any) => {
-          const methodName = metadata.propertyKey || metadata;
+        const ps = routeChangeSubscribers.map(async metadata => {
+          const methodName = metadata.propertyKey;
           const pathPattern = metadata.pathPattern;
           const filter = metadata.filter;
 
@@ -61,13 +68,14 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           }
 
           // Filter validation
-          const filterPassed = !filter || filter(this.router!);
+          const filterPassed = !filter || filter(this.router!, instance);
 
           // Invoke method if conditions pass
-          if (pathMatched && filterPassed) {
-            instance[methodName]?.({...re, pathData: pathData});
+          if (pathMatched && filterPassed && instance[methodName]) {
+            await instance[methodName]({ ...re, pathData: pathData });
           }
         });
+        return await Promise.allSettled(ps);
       }
     }
 
@@ -88,19 +96,20 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     _disconnected(instance: any) {
       if (instance) {
         this._swc_connected_instance.delete(instance);
+        this._swc_started_instances.delete(instance);
+        this._swc_notified_routes.delete(instance);
       }
     }
 
-    _handleRouteChange(route: RouterEventType) {
+    async _handleRouteChange(route: RouterEventType) {
+      // Save last router event
+      this._lastRouterEvent = route;
       if (route.triggerPoint === 'end') {
         // Iterate through all connected component instances
-        this._swc_connected_instance.forEach((instance: any) => {
-          this._invokeRouteChangeSubscribers(instance, route);
-        });
+        const swcConnectedInstance = Array.from(this._swc_connected_instance);
+        const ps = swcConnectedInstance.map((instance: any) => this._invokeRouteChangeSubscribers(instance, route));
+        await Promise.allSettled(ps);
       }
-
-      // Save last router event
-      this._lastRouterEvent = route;
     }
 
     async connect(config?: SwcAttributeConfigType) {
@@ -112,29 +121,44 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
 
       const mode = config?.connectMode || 'direct';
 
+      // console.log('-------mode', mode);
       if (mode === 'direct') {
         await this.__swc_engine.connect(swcConfig);
         this.setAttribute('swc-connect-mode', 'direct');
-      } else if (mode === 'swap' && !this.parentNode) {
-        await this.__swc_engine.connect(swcConfig);
-        this.setAttribute('swc-connect-mode', 'direct');
-
-        const clonedApp = this.cloneNode(true) as any;
-        clonedApp.style.display = 'none';
-        this.parentNode.insertBefore(clonedApp, this.nextSibling);
+      } else if (mode === 'swap' || mode === 'clear-swap') {
+        if (!this.parentNode) {
+          // 부모가 없으면 swap을 할 수 없으므로 direct로 폴백합니다.
+          await this.__swc_engine.connect(swcConfig);
+          this.setAttribute('swc-connect-mode', 'direct');
+        } else {
+          // 1. 현재 SSR 상태(화면)를 그대로 유지한 채로, 백그라운드용 클론을 만듭니다.
+          const clonedApp = this.cloneNode(mode === 'swap') as any; // clear-swap 모드면 자식 노드를 클론하지 않음(false)
+          clonedApp.style.display = 'none';
+          
+          // 2. DOM에 클론을 몰래 붙입니다.
+          this.parentNode.insertBefore(clonedApp, this.nextSibling);
 
-        try {
-          await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
-          if (this.parentNode) {
-            this.parentNode.removeChild(this);
-          }
-          clonedApp.setAttribute('swc-connect-mode', 'swap');
-          clonedApp.style.display = '';
-        } catch (e) {
-          if (clonedApp.parentNode) {
-            clonedApp.parentNode.removeChild(clonedApp);
+          try {
+            // 3. 클론을 direct 모드로 연결(초기화/렌더링) 시킵니다.
+            await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });
+            
+            // 4. 클론의 렌더링이 완전히 끝나면, 기존 SSR 화면(this)을 지우고 클론을 보여줍니다.
+            if (this.parentNode) {
+              this.parentNode.removeChild(this);
+            }
+            clonedApp.style.display = '';
+            clonedApp.setAttribute('swc-connect-mode', mode);
+            
+            // ★ 매우 중요: 교체가 완료되었으므로 기존 앱(this)은 여기서 즉시 종료하여 불필요한 라우터/이벤트 구독을 막아야 합니다!
+            return;
+          } catch (e) {
+            // 실패 시 클론을 지우고 원본을 direct로 강제 연결합니다.
+            if (clonedApp.parentNode) {
+              clonedApp.parentNode.removeChild(clonedApp);
+            }
+            await this.__swc_engine.connect(swcConfig);
+            this.setAttribute('swc-connect-mode', 'direct');
           }
-          throw e;
         }
       }
 
@@ -144,32 +168,41 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       });
       // Invoke @onConnectedSwcApp lifecycle methods on all connected component instances
       // const hostSet = SwcUtils.getHostSet(this as any);
-      this._swc_connected_instance.forEach((instance: any) => {
-        this._invokeOnConnectedSwcAppStarted(instance);
-      });
-
+      const scis = Array.from(this._swc_connected_instance);
+      await Promise.allSettled(scis.map(instance => this._invokeOnConnectedSwcAppStarted(instance)));
+      // this._swc_connected_instance.forEach((instance: any) => {
+      //   this._invokeOnConnectedSwcAppStarted(instance);
+      // });
 
       // Subscribe to router changes after connect
       if (!this._routerSubscription && this.router) {
+        const config = this.__swc_engine.config;
         this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
           //@ts-ignore
           // console.log('Route changed:', route, this._swcId);
-          this._handleRouteChange(route);
+          this._handleRouteChange(route).then(it => {
+            config?.onRouteChanged?.(route, this);
+          });
         });
         // Navigate to initial path if specified
-        const config = this.__swc_engine.config;
         // if (config?.path) {
         //   this.router.go(config.path);
         // }
       }
     }
 
-    _invokeOnConnectedSwcAppStarted(instance: any) {
+    async _invokeOnConnectedSwcAppStarted(instance: any) {
+      // 이미 시작된 인스턴스라면 스킵 (비동기 병렬 중복 호출 방지)
+      if (this._swc_started_instances.has(instance)) return;
+      this._swc_started_instances.add(instance);
+
       const startedMethods = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);
       if (startedMethods) {
-        for (const m of startedMethods) {
-          instance._invokeLifecycleMethod(m);
-        }
+        const ps = startedMethods.map(m => instance._invokeLifecycleMethod(m));
+        return await Promise.allSettled(ps)
+        // for (const m of startedMethods) {
+        //   instance._invokeLifecycleMethod(m);
+        // }
       }
     }
 
@@ -221,5 +254,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 => {
+          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, instance);
+          }
+
+          // 조건을 만족하면 메서드 호출
+          if (typeMatched && filterMatched && typeof instance[methodName] === 'function') {
+            instance[methodName](message);
+          }
+        });
+      }
+    }
   };
 }

package/src/elements/SwcChoose.ts

@@ -3,10 +3,12 @@ import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { ConvertUtils } from '@dooboostore/core-web';
 import { SwcChooseInterface } from '../types';
-import { attributeHost } from '../decorators';
+import { attributeHost, getAttributeValue, getElementConfig } from '../decorators';
 
 class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
-  @attributeHost('value')
+  // @attributeHost('value')
+  // fetchValue: any;
+
   _value: any;
 
   @attributeHost('replace-wrap')
@@ -20,12 +22,29 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
   }
 
   set value(nv: any) {
-    this.refresh(nv);
+    this._value = nv;
+    this.refresh(this._value);
+  }
+
+  constructor() {
+    super();
+    // console.log('swc chooooooooooooooooooooooooose constructor called!');
+    // console.log('swc cccccccss', this.getAttribute('value'));
+  }
+
+  // static get observedAttributes() {
+  //   return ['value'];
+  // }
+
+  attributeChangedCallback(na, o, n) {
+    // console.log('-----------------choooooooose attr origin', na, o, n);
   }
 
   @changedAttributeHost('value')
-  private setValue() {
-    this.refresh();
+  private setValue(value: any, o: string, n: string) {
+    // console.log('-----------------choooooooose attr setValue', value, o, n);
+    this._value = value;
+    this.refresh(this._value);
   }
 
   @changedAttributeHost('replace-wrap')
@@ -55,11 +74,13 @@ class SwcChoose extends HTMLTemplateElement implements SwcChooseInterface {
     return ae.getUnprocessedTemplate();
   }
 
-  refresh(value = this._value) {
+  refresh(value?: any) {
+    value = getAttributeValue(this, 'value') ?? this._value;
+    // console.log('chooooooooo refresh->', value);
     const portal = this.parentElement;
     if (!portal) return;
 
-    const win = this.ownerDocument?.defaultView || window;
+    const win = (getElementConfig(this).window ?? this.ownerDocument?.defaultView) || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
     const groupArgs = { ...helperSet, $value: value };