@dooboostore/simple-web-component 1.0.33 → 1.0.35

package/src/decorators/emitCustomEvent.ts

@@ -1,24 +1,28 @@
-import { ReflectUtils } from '@dooboostore/core';
-import { SpecialSelector, SwcQueryOptions } from '../types';
-import { ensureInit, getElementConfig } from './elementDefine';
-import { SwcUtils } from '../utils/Utils';
+import {ReflectUtils} from '@dooboostore/core';
+import {SpecialSelector, SwcQueryOptions, HelperHostSet} from '../types';
+import {ensureInit, getElementConfig} from './elementDefine';
+import {SwcUtils} from '../utils/Utils';
 
 export interface EmitCustomEventBaseOptions {
   bubbles?: boolean;
   composed?: boolean;
   cancelable?: boolean;
+  filter?: (target: EventTarget, detail: any, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
 }
 
+type Options = (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
+
 export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
   selector: string;
   type: string;
-  options: (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string });
+  options: Options;
 }
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
-export function emitCustomEvent(target: SpecialSelector, type: string, options?: EmitCustomEventBaseOptions): MethodDecorator;
-export function emitCustomEvent(selector: string, type: string, options?: EmitCustomEventBaseOptions & SwcQueryOptions): MethodDecorator;
+
+export function emitCustomEvent(target: SpecialSelector, type: string, options?: Options): MethodDecorator;
+export function emitCustomEvent(selector: string, type: string, options?: Options): MethodDecorator;
 /**
  * @emitCustomEvent decorator to dispatch custom events to a target.
  */
@@ -26,7 +30,7 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
 
-    const fullOptions: any = { ...options, type };
+    const fullOptions: any = {...options, type};
 
     if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
     if (fullOptions.composed === undefined) fullOptions.composed = true;
@@ -36,62 +40,77 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
       list = [];
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
-    list.push({ propertyKey, selector: selectorOrTarget, type, options: fullOptions });
+    list.push({propertyKey, selector: selectorOrTarget, type, options: fullOptions});
 
     const original = descriptor.value;
-    descriptor.value = async function (...args: any[]) {
+    descriptor.value = function (...args: any[]) {
       ensureInit(this);
-      const detail = await original.apply(this, args);
-      const event = new CustomEvent(type, {
-        detail,
-        bubbles: fullOptions.bubbles,
-        composed: fullOptions.composed,
-        cancelable: fullOptions.cancelable
-      });
-
-      const hostSet = SwcUtils.getHostSet(this as any);
-      const conf = getElementConfig(this);
-      const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
-      // console.log('emitEEEEEEEEEEE', hostSet);
-
-      const eventTargets: EventTarget[] = [];
-      if (selectorOrTarget === ':window') eventTargets.push(currentWin);
-      else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
-      else if (selectorOrTarget === ':parentHost') {
-        if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-      } else if (selectorOrTarget === ':appHost') {
-        if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-      } else if (selectorOrTarget === ':firstHost') {
-        if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-      } else if (selectorOrTarget === ':lastHost') {
-        if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-      } else if (selectorOrTarget === ':firstAppHost') {
-        if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-      } else if (selectorOrTarget === ':lastAppHost') {
-        if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-      } else if (selectorOrTarget === ':hosts') {
-        hostSet.$hosts.forEach(h => eventTargets.push(h));
-      } else if (selectorOrTarget === ':appHosts') {
-        hostSet.$appHosts.forEach(h => eventTargets.push(h));
-      } else if (selectorOrTarget === ':host' || !selectorOrTarget) eventTargets.push(this as any);
-      else {
-        const r = fullOptions.root || 'auto';
-        const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-        if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-        else if (r === 'light') searchRoots.push(this as any);
-        else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-        else if (r === 'all') {
-          searchRoots.push(this as any);
-          if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+      const res = original.apply(this, args);
+
+      const handleResult = (detail: any) => {
+        const event = new CustomEvent(type, {
+          detail,
+          bubbles: fullOptions.bubbles,
+          composed: fullOptions.composed,
+          cancelable: fullOptions.cancelable
+        });
+
+        const hostSet = SwcUtils.getHostSet(this as any);
+        const conf = getElementConfig(this);
+        const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+
+        const eventTargets: EventTarget[] = [];
+        if (selectorOrTarget === ':window') eventTargets.push(currentWin);
+        else if (selectorOrTarget === ':document') eventTargets.push(currentWin.document);
+        else if (selectorOrTarget === ':parentHost') {
+          if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+        } else if (selectorOrTarget === ':appHost') {
+          if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+        } else if (selectorOrTarget === ':firstHost') {
+          if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+        } else if (selectorOrTarget === ':lastHost') {
+          if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+        } else if (selectorOrTarget === ':firstAppHost') {
+          if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+        } else if (selectorOrTarget === ':lastAppHost') {
+          if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+        } else if (selectorOrTarget === ':hosts') {
+          hostSet.$hosts.forEach(h => eventTargets.push(h));
+        } else if (selectorOrTarget === ':appHosts') {
+          hostSet.$appHosts.forEach(h => eventTargets.push(h));
+        } else if (selectorOrTarget === ':host' || !selectorOrTarget) {
+          eventTargets.push(this as any);
+        } else {
+          const r = fullOptions.root || 'auto';
+          const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+          if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+          else if (r === 'light') searchRoots.push(this as any);
+          else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+          else if (r === 'all') {
+            searchRoots.push(this as any);
+            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          }
+
+          searchRoots.forEach(sr => {
+            sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
+          });
         }
 
-        searchRoots.forEach(sr => {
-          sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
+        eventTargets.forEach(t => {
+          if (fullOptions.filter && !fullOptions.filter(t, detail, {currentThis: this, helper: hostSet})) {
+            return;
+          }
+          t.dispatchEvent(event);
         });
-      }
 
-      eventTargets.forEach(t => t.dispatchEvent(event));
-      return detail;
+        return detail;
+      };
+
+      if (res instanceof Promise) {
+        return res.then(handleResult);
+      } else {
+        return handleResult(res);
+      }
     };
   };
 }
@@ -105,13 +124,24 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
  * @emitCustomEventHost decorator - simplified version of @emitCustomEvent for :host selector
  * Usage: @emitCustomEventHost('navigate') // default attributeName: 'on-emit-navigate'
  * Usage: @emitCustomEventHost('navigate', { attributeName: 'on-navigate' })
- * 
+ *
  * The attributeName option is used to automatically observe attributes for this event.
  * For example, { attributeName: 'on-navigate' } will add 'on-navigate' to observedAttributes.
  */
-export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string } = {}): MethodDecorator {
-  if (!options.attributeName) {
-    options.attributeName = `on-emit-${type}`;
+export function emitCustomEventHost(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
+export function emitCustomEventHost(type: string, attributeName: string): MethodDecorator ;
+export function emitCustomEventHost(type: string): MethodDecorator;
+export function emitCustomEventHost(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
+  if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'string') {
+    return emitCustomEventHost(type, {attributeName: optionsOrAttributeaName});
+  } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'object') {
+    if (!optionsOrAttributeaName.attributeName) {
+      optionsOrAttributeaName.attributeName = `on-emit-${type}`;
+    }
+    return emitCustomEvent(':host', type, optionsOrAttributeaName);
+  } else {
+    return emitCustomEvent(':host', type, {attributeName: `on-emit-${type}`});
   }
-  return emitCustomEvent(':host', type, options);
+
+
 }

package/src/decorators/lifecycles.ts

@@ -14,6 +14,7 @@ export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-ht
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
 
 export interface InnerHtmlOptions {
+  replaceWrap?:{ start: string, end:string},
   useShadow?: boolean;
 }
 
@@ -35,21 +36,21 @@ function createLifecycleDecorator(metadataKey: symbol): MethodDecorator {
 }
 
 export const onInitialize = createLifecycleDecorator(ON_INITIALIZE_METADATA_KEY);
-export const onBeforeConnected = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
-export const onAfterConnected = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
-export const onConnected = onAfterConnected;
+export const onConnectedBefore = createLifecycleDecorator(ON_BEFORE_CONNECTED_METADATA_KEY);
+export const onConnectedAfter = createLifecycleDecorator(ON_AFTER_CONNECTED_METADATA_KEY);
+export const onConnected = onConnectedAfter;
 
-export const onBeforeDisconnected = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
-export const onAfterDisconnected = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
-export const onDisconnected = onAfterDisconnected;
+export const onDisconnectedBefore = createLifecycleDecorator(ON_BEFORE_DISCONNECTED_METADATA_KEY);
+export const onDisconnectedAfter = createLifecycleDecorator(ON_AFTER_DISCONNECTED_METADATA_KEY);
+export const onDisconnected = onDisconnectedAfter;
 
-export const onBeforeAdopted = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
-export const onAfterAdopted = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
-export const onAdopted = onAfterAdopted;
+export const onAdoptedBefore = createLifecycleDecorator(ON_BEFORE_ADOPTED_METADATA_KEY);
+export const onAdoptedAfter = createLifecycleDecorator(ON_AFTER_ADOPTED_METADATA_KEY);
+export const onAdopted = onAdoptedAfter;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
-export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+// export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
 
 /**
  * @onConnectedInnerHtml decorator to define the initial HTML content when connected.

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

@@ -6,11 +6,11 @@ export const SUBSCRIBE_SWC_APP_MESSAGE_WHILE_CONNECTED_METADATA_KEY = Symbol.for
 export interface SwcAppMessageSubscriberMetadata {
   propertyKey: string | symbol;
   messageType?: string;
-  filter?: (message: SwcAppMessage) => boolean;
+  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
 }
 
 export interface SwcAppMessageOptions {
-  filter?: (message: SwcAppMessage) => boolean;
+  filter?: (message: SwcAppMessage, currentThis: any) => boolean;
 }
 
 function createSubscribeSwcAppMessageWhileConnected(options?: SwcAppMessageOptions, messageType?: string): MethodDecorator {

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -3,15 +3,16 @@ 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 type RoutePathType = string | string[] | ((currentThis: any) => string | string[]);
+
 export interface SwcAppRouteChangeSubscriberMetadata {
   propertyKey: string | symbol;
-  pathPattern?: string | string[];
-  filter?: (router: Router) => boolean;
+  options?: SwcAppRouteChangeOptions;
 }
 
 export interface SwcAppRouteChangeOptions {
-  path?: string | string[];
-  filter?: (router: Router) => boolean;
+  path?: RoutePathType;
+  filter?: (router: Router, currentThis: any) => boolean;
 }
 
 function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {
@@ -25,8 +26,8 @@ function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteCha
       list = [];
       ReflectUtils.defineMetadata(SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY, list, constructor);
     }
-    list.push({ propertyKey, pathPattern, filter });
-    
+    list.push({ propertyKey, options });
+
     return descriptor;
   };
 }
@@ -35,8 +36,7 @@ function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteCha
 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(pathPattern: RoutePathType): MethodDecorator;
 export function subscribeSwcAppRouteChangeWhileConnected(options: SwcAppRouteChangeOptions): MethodDecorator;
 
 // 실제 구현 (이중 모드)
@@ -46,15 +46,15 @@ export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any,
   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')
+  } else if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'function') {
+    // 문자열 또는 함수: @subscribeSwcAppRouteChangeWhileConnected('/path')
     options.path = targetOrOptions;
   } else if (targetOrOptions && typeof targetOrOptions === 'object') {
     // 객체: @subscribeSwcAppRouteChangeWhileConnected({ path: '/path', filter: ... })

package/src/elements/SwcAppEngine.ts

@@ -1,26 +1,29 @@
 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;
+
+  onChildrenConnectedDone?: (app: SwcAppInterface) => void;
+  // onChildrenSwcAppStartedDone?: (app: SwcAppInterface) => void;
+  // childrenSwcAppStartedDoneCheckIntervalTime?: number;
+  onChildrenRouteChanged?: (event: RouterEventType, app: SwcAppInterface) => void;
+  childrenRouteChangedCheckIntervalTime?: number; // 자식 연결 완료 이벤트 디바운스 타임 (ms)
+  childrenConnectedDoneCheckIntervalTime?: number;
 };
 
 export type SwcAttributeConfigType = OptionalType<SwcConfigType, 'routeType' | 'window'>;
@@ -36,6 +39,7 @@ export class SwcAppEngine {
   get config() {
     return this._config;
   }
+
   async connect(config: SwcConfigType) {
     try {
       this._config = config;
@@ -52,15 +56,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
+          excludeProxys: [(this._config.window as any).Node],
+          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 +74,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);
     }
   }