@dooboostore/simple-web-component 1.0.43 → 1.0.45

package/src/decorators/queryAll.ts

@@ -1,165 +1,183 @@
 import { ReflectUtils } from '@dooboostore/core';
 import { getElementConfig, ensureInit } from './elementDefine';
 import { SwcUtils } from '../utils/Utils';
-import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
+import { SwcQueryOptions, HelperHostSet } from '../types';
+
+export interface QueryAllOptions extends SwcQueryOptions {
+  /**
+   * Filter function to determine whether to include the element.
+   * If it returns false, the element is skipped.
+   */
+  filter?: (target: HTMLElement, meta: { currentThis: any, helper: HelperHostSet }) => boolean;
+}
 
 export interface QueryAllMetadata {
   propertyKey: string | symbol;
-  selector: string;
-  options: SwcQueryOptions;
+  selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+  options: QueryAllOptions;
 }
 
 export const QUERY_ALL_METADATA_KEY = Symbol.for('simple-web-component:query-all');
 
-export function queryAll(target: SpecialSelector): PropertyDecorator;
-export function queryAll(selector: string, options?: SwcQueryOptions): PropertyDecorator;
+export function queryAll(target: Object, propertyKey: string | symbol, descriptor?: PropertyDescriptor): PropertyDescriptor | void;
+export function queryAll(selector: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null), options?: QueryAllOptions): PropertyDecorator;
+export function queryAll(options?: QueryAllOptions): PropertyDecorator;
 /**
  * @queryAll decorator to inject a list of elements into a class property.
+ * 
+ * Supports both string selectors and function-based selectors:
+ * - String selector: @queryAll('.item')
+ * - Function selector: @queryAll((currentThis, helper) => currentThis.shadowRoot?.querySelectorAll('.item'))
+ * 
+ * Supports filtering:
+ * - @queryAll('.item', { filter: (target, meta) => target.hasAttribute('active') })
  */
-export function queryAll(selectorOrTarget: string, options: any = {}): PropertyDecorator {
-  return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
-    if (descriptor !== undefined) {
-      throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
-    }
-
-    const constructor = targetObj.constructor;
-    let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
-    if (!queries) {
-      queries = [];
-      ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
-    }
-    queries.push({ propertyKey, selector: selectorOrTarget, options });
+export function queryAll(selectorOrTarget?: string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null) | Object, optionsOrPropertyKey?: QueryAllOptions | string | symbol, descriptor?: PropertyDescriptor): any {
+  // Bare decorator: @queryAll
+  if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
+    throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(optionsOrPropertyKey)})`);
+  }
+  // With selector
+  if (typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') {
+    return (targetObj: Object, propertyKey: string | symbol, descriptor?: never): void => {
+      if (descriptor !== undefined) {
+        throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+      }
 
-    Object.defineProperty(targetObj, propertyKey, {
-      get(this: HTMLElement) {
-        ensureInit(this);
-        const selector = selectorOrTarget;
+      const constructor = targetObj.constructor;
+      let queries = ReflectUtils.getMetadata<QueryAllMetadata[]>(QUERY_ALL_METADATA_KEY, constructor);
+      if (!queries) {
+        queries = [];
+        ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
+      }
+      queries.push({ propertyKey, selector: selectorOrTarget as any, options: optionsOrPropertyKey as QueryAllOptions || {} });
 
-        const r = options.root || 'auto';
-        const applyRoot = (t: any): any[] => {
-          if (!t) return [];
-          const items = Array.isArray(t) ? t : [t];
-          const results: any[] = [];
-          items.forEach(it => {
-            if (!(it instanceof HTMLElement)) {
-              results.push(it);
-              return;
+      Object.defineProperty(targetObj, propertyKey, {
+        get(this: HTMLElement) {
+          ensureInit(this);
+          const config = getElementConfig(this);
+          const win = config?.window || window;
+          const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+          
+          // Resolve selector - can be string or function
+          let resolvedSelector: string;
+          let resolvedElements: HTMLElement[] = [];
+          
+          if (typeof selectorOrTarget === 'function') {
+            const result = (selectorOrTarget as any)(this, hostSet);
+            // If function returns NodeList or Element[], convert to array
+            if (result instanceof win.NodeList) {
+              resolvedElements = Array.from(result).filter(el => el instanceof win.HTMLElement) as HTMLElement[];
+            } else if (Array.isArray(result)) {
+              resolvedElements = result.filter(el => el instanceof win.HTMLElement) as HTMLElement[];
             }
-            if (r === 'auto') results.push(it.shadowRoot || it);
-            else {
-              if (r === 'light' || r === 'all') results.push(it);
-              if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);
-            }
-          });
-          return results;
-        };
-
-        // --- Special Selectors: HostSet ---
-        const hostSet = SwcUtils.getHostSet(this);
-        if (selector === '$hosts') return applyRoot(hostSet.$hosts);
-        if (selector === '$appHosts') return applyRoot(hostSet.$appHosts);
-        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];
-        if (selector === '$this') return applyRoot(this);
+          } else {
+            resolvedSelector = selectorOrTarget;
 
-        // --- Standard Selectors ---
-        if (r === 'shadow') return this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-        if (r === 'light') return Array.from(this.querySelectorAll(selector));
-        if (r === 'all') {
-          const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-          const lNodes = Array.from(this.querySelectorAll(selector));
-          return [...sNodes, ...lNodes];
-        }
-        const root = this.shadowRoot || this;
-        return Array.from(root.querySelectorAll(selector));
-      },
-      set(this: HTMLElement, nv: any) {
-        ensureInit(this);
-        if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
-          const selector = selectorOrTarget;
-          if (selector.startsWith('$') && selector !== '$this') return;
+            const r = (optionsOrPropertyKey as QueryAllOptions)?.root || 'auto';
+            const applyRoot = (t: any): any[] => {
+              if (!t) return [];
+              const items = Array.isArray(t) ? t : [t];
+              const results: any[] = [];
+              items.forEach(it => {
+                if (!(it instanceof HTMLElement)) {
+                  results.push(it);
+                  return;
+                }
+                if (r === 'auto') results.push(it.shadowRoot || it);
+                else {
+                  if (r === 'light' || r === 'all') results.push(it);
+                  if ((r === 'shadow' || r === 'all') && it.shadowRoot) results.push(it.shadowRoot);
+                }
+              });
+              return results;
+            };
 
-          const r = options.root || 'auto';
-          let targets: (Element | Node)[] = [];
-          if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-          else if (r === 'light') targets = Array.from(this.querySelectorAll(selector));
-          else if (r === 'all') {
-            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
-            const lNodes = Array.from(this.querySelectorAll(selector));
-            targets = [...sNodes, ...lNodes];
-          } else {
-            targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+            // --- Special Selectors: HostSet ---
+            if (resolvedSelector === '$hosts') resolvedElements = applyRoot(hostSet.$hosts).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$appHosts') resolvedElements = applyRoot(hostSet.$appHosts).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$host') resolvedElements = applyRoot(hostSet.$host).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$parentHost') resolvedElements = applyRoot(hostSet.$parentHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$appHost') resolvedElements = applyRoot(hostSet.$appHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$firstHost') resolvedElements = applyRoot(hostSet.$firstHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$lastHost') resolvedElements = applyRoot(hostSet.$lastHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$firstAppHost') resolvedElements = applyRoot(hostSet.$firstAppHost).filter(el => el instanceof HTMLElement);
+            else if (resolvedSelector === '$lastAppHost') resolvedElements = applyRoot(hostSet.$lastAppHost).filter(el => el instanceof HTMLElement);
+            // --- Special Selectors: Env ---
+            else if (resolvedSelector === '$window') return [win];
+            else if (resolvedSelector === '$document') return [win.document];
+            else if (resolvedSelector === '$this') resolvedElements = applyRoot(this).filter(el => el instanceof HTMLElement);
+            // --- Standard Selectors ---
+            else {
+              if (r === 'shadow') resolvedElements = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];
+              else if (r === 'light') resolvedElements = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];
+              else if (r === 'all') {
+                const sNodes = this.shadowRoot ? (Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) as HTMLElement[]) : [];
+                const lNodes = Array.from(this.querySelectorAll(resolvedSelector)) as HTMLElement[];
+                resolvedElements = [...sNodes, ...lNodes];
+              }
+              else resolvedElements = (Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector)) as HTMLElement[]);
+            }
           }
-          targets.forEach(t => (t as Element).remove());
-        }
-      },
-      enumerable: true,
-      configurable: true
-    });
-  };
-}
 
-/**
- * @queryAllThis decorator - simplified version of @queryAll for $this selector
- */
-export function queryAllThis(target: Object, propertyKey: string | symbol): void;
-export function queryAllThis(): PropertyDecorator;
-export function queryAllThis(options: SwcQueryOptions): PropertyDecorator;
-export function queryAllThis(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll('$this', {})(targetOrOptions, propertyKey);
-  }
-
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll('$this', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll('$this', {});
-  }
-}
+          // Apply filter if provided
+          if ((optionsOrPropertyKey as QueryAllOptions)?.filter) {
+            resolvedElements = resolvedElements.filter(el => {
+              if (!(el instanceof win.HTMLElement)) return true;
+              return (optionsOrPropertyKey as QueryAllOptions).filter!(el, { currentThis: this, helper: hostSet });
+            });
+          }
 
-/**
- * @allParentHost - Query all parent SWC components
- */
-export function allParentHost(target: Object, propertyKey: string | symbol): void;
-export function allParentHost(): PropertyDecorator;
-export function allParentHost(options: SwcQueryOptions): PropertyDecorator;
-export function allParentHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll('$host', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll('$host', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll('$host', {});
-  }
-}
+          return resolvedElements;
+        },
+        set(this: HTMLElement, nv: any) {
+          ensureInit(this);
+          if (nv === null || nv === undefined || (Array.isArray(nv) && nv.length === 0)) {
+            const config = getElementConfig(this);
+            const win = config?.window || window;
+            const hostSet = SwcUtils.getHelperAndHostSet(win, this);
+            
+            // Resolve selector - can be string or function
+            if (typeof selectorOrTarget === 'function') {
+              // Get elements from function and remove them
+              const result = (selectorOrTarget as any)(this, hostSet);
+              if (result instanceof win.NodeList) {
+                Array.from(result).forEach(el => {
+                  if (el instanceof win.Element) (el as Element).remove();
+                });
+              } else if (Array.isArray(result)) {
+                result.forEach(el => {
+                  if (el instanceof win.Element) (el as Element).remove();
+                });
+              }
+              return;
+            }
+            
+            const resolvedSelector = selectorOrTarget;
+            
+            if (resolvedSelector.startsWith('$') && resolvedSelector !== '$this') return;
 
-/**
- * @allAppHost - Query all $appHost (All <swc-app> instances)
- */
-export function allAppHost(target: Object, propertyKey: string | symbol): void;
-export function allAppHost(): PropertyDecorator;
-export function allAppHost(options: SwcQueryOptions): PropertyDecorator;
-export function allAppHost(targetOrOptions?: any, propertyKey?: string | symbol): any {
-  if (propertyKey !== undefined && (typeof propertyKey === 'string' || typeof propertyKey === 'symbol')) {
-    return queryAll('$appHost', {})(targetOrOptions, propertyKey);
-  }
-  if (typeof targetOrOptions === 'object' && targetOrOptions !== null) {
-    return queryAll('$appHost', targetOrOptions as SwcQueryOptions);
-  } else {
-    return queryAll('$appHost', {});
+            const r = (optionsOrPropertyKey as SwcQueryOptions)?.root || 'auto';
+            let targets: (Element | Node)[] = [];
+            if (r === 'shadow') targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+            else if (r === 'light') targets = Array.from(this.querySelectorAll(resolvedSelector));
+            else if (r === 'all') {
+              const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(resolvedSelector)) : [];
+              const lNodes = Array.from(this.querySelectorAll(resolvedSelector));
+              targets = [...sNodes, ...lNodes];
+            } else {
+              targets = Array.from((this.shadowRoot || this).querySelectorAll(resolvedSelector));
+            }
+            targets.forEach(t => (t as Element).remove());
+          }
+        },
+        enumerable: true,
+        configurable: true
+      });
+    };
   }
+  // Without selector (defaults to $this)
+  return queryAll('$this', selectorOrTarget as SwcQueryOptions);
 }
 
 export const getQueryAllMetadata = (target: any): QueryAllMetadata[] | undefined => {

package/src/decorators/subscribeSwcAppMessageWhileConnected.ts

@@ -66,6 +66,7 @@ export function subscribeSwcAppMessageWhileConnected(targetOrMessageTypeOrOption
   return createSubscribeSwcAppMessageWhileConnected(options, messageType);
 }
 
+export const receiveMessage = subscribeSwcAppMessageWhileConnected;
 // Helper function to retrieve message subscribers metadata
 export const getSubscribeSwcAppMessageWhileConnectedMetadata = (target: any): SwcAppMessageSubscriberMetadata[] | undefined => {
   const constructor = target instanceof Function ? target : target.constructor;

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -13,8 +13,9 @@ export interface SwcAppRouteChangeSubscriberMetadata {
 
 export interface SwcAppRouteChangeOptions {
   path?: RoutePathType;
-  filter?: (router: Router, meta: {currentThis: any, helper: HelperHostSet}) => boolean;
+  filter?: (router: Router, meta: { currentThis: any; helper: HelperHostSet }) => boolean;
   order?: number;
+  valueKey?: symbol | string;
 }
 
 function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {
@@ -74,6 +75,7 @@ export function subscribeSwcAppRouteChangeWhileConnected(targetOrOptions?: any,
 
   return createSubscribeSwcAppRouteChangeWhileConnected(options);
 }
+export const changedRoute = subscribeSwcAppRouteChangeWhileConnected;
 
 // Helper function to retrieve route change subscribers metadata
 export const getSubscribeSwcAppRouteChangeWhileConnectedMetadata = (target: any): SwcAppRouteChangeSubscriberMetadata[] => {

package/src/elements/SwcAppMixin.ts

@@ -1,30 +1,30 @@
-import {SwcAppInterface, SwcAppMessage} from "../types";
-import {findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata, ON_CONNECTED_SWC_APP_METADATA_KEY} from "../decorators";
-import {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from "../SwcAppEngine";
-import {debounceTimeIntervalLock, FunctionUtils, Subscription} from "@dooboostore/core";
-import {RouterEventType} from "@dooboostore/core-web";
-import {SwcUtils} from "../utils/Utils";
+import { SwcAppInterface, SwcAppMessage } from '../types';
+import { APPLY_NODE_METADATA_KEY, findAllLifecycleMetadata, getSubscribeSwcAppMessageWhileConnectedMetadata, getSubscribeSwcAppRouteChangeWhileConnectedMetadata, ON_CONNECTED_SWC_APP_METADATA_KEY, SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY } from '../decorators';
+import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from '../SwcAppEngine';
+import { debounceTimeIntervalLock, FunctionUtils, Subscription } from '@dooboostore/core';
+import { RouterEventType } from '@dooboostore/core-web';
+import { SwcUtils } from '../utils/Utils';
 
 export const isSSR = (i: HTMLElement) => {
   return i.hasAttribute('swc-use-ssr');
-}
+};
 export const setSSRAttribute = (i: HTMLElement) => {
   i.setAttribute('swc-use-ssr', (i as any)._swcId ?? '');
-}
+};
 export const removeSSRAttribute = (i: HTMLElement) => {
   i.removeAttribute('swc-use-ssr');
-}
+};
 
 /**
  * SwcAppMixin: SwcApp 기능을 모든 HTMLElement에 추가할 수 있는 Mixin
- * 
+ *
  * 사용 예:
  * @elementDefine('custom-app', { window: w })
  * class CustomApp extends SwcAppMixin(w.HTMLElement) implements SwcAppInterface {
  *   // 추가 기능 구현
  * }
  */
-export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base: T) {
+export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
   return class SwcAppMixinClass extends Base implements SwcAppInterface {
     __swc_engine = new SwcAppEngine(this as any);
     _swc_connected_instance = new Set<any>();
@@ -45,7 +45,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
     constructor(...args: any[]) {
       super(...args);
-      console.log('[SWC-APP-MIXIN] constructor')
+      console.log('[SWC-APP-MIXIN] constructor');
     }
 
     get simpleApplication() {
@@ -68,12 +68,12 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       if (this._childrenRouteChangedInterval) {
         this.config.window.clearInterval(this._childrenRouteChangedInterval);
       }
-      const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};
+      const intervalConfig = { setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window) };
       this._childrenRouteChangedInterval = debounceTimeIntervalLock(
         () => this._routeChangeInvocations === 0,
         () => {
           this._childrenRouteChangedInterval = null;
-          this.config.onChildrenRouteChanged?.(re, this)
+          this.config.onChildrenRouteChanged?.(re, this);
         },
         this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
         intervalConfig
@@ -81,15 +81,23 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
       try {
         const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
+
         if (routeChangeSubscribers.length > 0) {
-          console.log('[SWC-MIXIN] Route change subscribers found')
-          
+          console.log('[SWC-MIXIN] Route change subscribers found');
+
           // Subscribers are already sorted by order from getSubscribeSwcAppRouteChangeWhileConnectedMetadata
           // Execute subscribers in order, stop if one returns a value
           for (const metadata of routeChangeSubscribers) {
             const methodName = metadata.propertyKey;
             let pathPattern = metadata.options?.path as any;
             const filter = metadata.options?.filter;
+            const extractValue = (v: any) => {
+              const keyToUse = metadata.options?.valueKey ?? SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY;
+              if (v && typeof v === 'object' && keyToUse in v) {
+                return v[keyToUse];
+              }
+              return v;
+            };
 
             if (typeof pathPattern === 'function') {
               pathPattern = (pathPattern as Function)(instance);
@@ -116,10 +124,11 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
             }
 
             const hostSet = SwcUtils.getHelperAndHostSet(this.config.window, this);
-            const filterPassed = !filter || filter(this.router!, {helper:hostSet, currentThis:instance});
+            const filterPassed = !filter || filter(this.router!, { helper: hostSet, currentThis: instance });
 
             if (pathMatched && filterPassed && instance[methodName]) {
-              const result = await instance[methodName]({...re, pathData: pathData});
+              const result = extractValue(await instance[methodName]({ ...re, pathData: pathData }));
+              // if (typeof result === 'object'
               // If handler returns a value, stop propagation to next handlers
               if (result !== undefined && result !== null) {
                 break;
@@ -158,12 +167,12 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
         if (this._childrenConnectedDoneInterval) {
           this.config.window.clearInterval(this._childrenConnectedDoneInterval);
         }
-        const intervalConfig = {setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window)};
+        const intervalConfig = { setInterval: this.config.window.setInterval.bind(this.config.window), clearInterval: this.config.window.clearInterval.bind(this.config.window) };
         this._childrenConnectedDoneInterval = debounceTimeIntervalLock(
           () => this._connectedInvocations === 0,
           () => {
             this._childrenConnectedDoneInterval = null;
-            this.config.onChildrenConnectedDone?.(this)
+            this.config.onChildrenConnectedDone?.(this);
           },
           this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
           intervalConfig
@@ -213,7 +222,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
     }
 
     async connect(config?: SwcAttributeConfigType) {
-      console.log('[SWC-MIXIN] connect')
+      console.log('[SWC-MIXIN] connect');
       const swcConfig = {
         routeType: 'element',
         window: config?.window,
@@ -224,7 +233,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
 
       // Safari is 속성 처리
       this._connected_safari_and_standby.forEach((instance: any) => {
-        this._connected(instance, {noIncrements: true});
+        this._connected(instance, { noIncrements: true });
       });
 
       // 라우터 변경 구독
@@ -258,7 +267,17 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
             context: this,
             args: SwcUtils.getHelperAndHostSet(win, this)
           });
-          this.connect(userConfig);
+          if (userConfig instanceof Promise) {
+            userConfig
+              .then(resolvedConfig => {
+                this.connect(resolvedConfig);
+              })
+              .catch(e => {
+                console.error('[SWC-MIXIN] Script execution failed:', e);
+              });
+          } else {
+            this.connect(userConfig);
+          }
         } catch (e) {
           console.error('[SWC-MIXIN] Script execution failed:', e);
         }
@@ -273,7 +292,7 @@ export function SwcAppMixin<T extends { new(...args: any[]): HTMLElement }>(Base
       // 부모 클래스의 disconnectedCallback 호출
       // @ts-ignore
       super.disconnectedCallback?.();
-      
+
       this._routerSubscription?.unsubscribe();
       this._routerSubscription = undefined;
       this._lastRouterEvent = undefined;