@dooboostore/simple-web-component 1.0.33 → 1.0.34

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -6,12 +6,12 @@ export const SUBSCRIBE_SWC_APP_ROUTE_CHANGE_WHILE_CONNECTED_METADATA_KEY = Symbo
 export interface SwcAppRouteChangeSubscriberMetadata {
   propertyKey: string | symbol;
   pathPattern?: string | string[];
-  filter?: (router: Router) => boolean;
+  filter?: (router: Router, currentThis: any) => boolean;
 }
 
 export interface SwcAppRouteChangeOptions {
   path?: string | string[];
-  filter?: (router: Router) => boolean;
+  filter?: (router: Router, currentThis: any) => boolean;
 }
 
 function createSubscribeSwcAppRouteChangeWhileConnected(options?: SwcAppRouteChangeOptions): MethodDecorator {

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

@@ -12,6 +12,8 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
   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;
 
@@ -29,11 +31,15 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
-    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
+    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;
 
@@ -62,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);
       }
     }
 
@@ -89,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) {
@@ -113,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);
-
-        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);
+      } 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 {
+            // 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;
         }
       }
 
@@ -145,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);
+        // }
       }
     }
 
@@ -233,7 +265,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     _invokeMessageSubscribers(instance: any, message: SwcAppMessage) {
       const messageSubscribers = getSubscribeSwcAppMessageWhileConnectedMetadata(instance);
       if (messageSubscribers && Array.isArray(messageSubscribers)) {
-        messageSubscribers.forEach((metadata: any) => {
+        messageSubscribers.forEach(metadata => {
           const methodName = metadata.propertyKey;
           const messageType = metadata.messageType;
           const filter = metadata.filter;
@@ -250,7 +282,7 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           // 필터 적용
           let filterMatched = true;
           if (filter && typeMatched) {
-            filterMatched = filter(message);
+            filterMatched = filter(message, instance);
           }
 
           // 조건을 만족하면 메서드 호출

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 };
 

package/src/elements/register.ts

@@ -1,4 +1,4 @@
-import { elementDefine, attributeHost, changedAttributeHost } from '../decorators';
+import { getElementConfig, elementDefine, attributeHost, changedAttributeHost, getAttributeValue } from '../decorators';
 import { SwcAppMixin } from './SwcAppMixin';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils,ActionExpression } from '@dooboostore/core';
@@ -318,7 +318,9 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
 
     @elementDefine('swc-choose', { extends: 'template', window: w })
   class SwcChoose extends HTMLTemplateElement {
-  @attributeHost('value')
+  // @attributeHost('value')
+  // fetchValue: any;
+
   _value: any;
 
   @attributeHost('replace-wrap')
@@ -332,12 +334,29 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
   }
 
   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')
@@ -367,11 +386,13 @@ export const registerAllElements = (w: any): Record<string, Constructor<HTMLElem
     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 };
 

package/src/utils/Utils.ts

@@ -249,8 +249,10 @@ export namespace SwcUtils {
   };
 
   export const getAppHosts = (el: HTMLElement): SwcAppInterface[] => {
-    const hosts = getHosts(el);
-    return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
+    // const hosts = getHosts(el);
+    // return hosts.filter(host => host.tagName.toLowerCase() === 'swc-app' || host.getAttribute('is')?.startsWith('swc-app-')) as SwcAppInterface[];
+    const hosts = SwcUtils.findAllParentAppHostsDirect(el);
+    return hosts;
   };
 
   export const getAppHost = (el: HTMLElement): SwcAppInterface | undefined => {
@@ -277,7 +279,15 @@ export namespace SwcUtils {
    */
   export const findAllParentAppHostsDirect = (el: HTMLElement): SwcAppInterface[] => {
     const appHosts: SwcAppInterface[] = [];
-    
+
+    const w = el.ownerDocument?.defaultView || ((typeof window !== 'undefined' ? window : undefined) as any);
+
+    // Guard against SSR environment where window might be undefined
+    if (!w) {
+      return appHosts;
+    }
+
+    // console.log('------?',w.ShadowRoot);
     // el 자체부터 시작 (el이 app host일 수도 있음)
     let current: HTMLElement | null = el;
 
@@ -296,9 +306,9 @@ export namespace SwcUtils {
       } else {
         // parentElement가 없음 = Shadow root의 직접 자식일 수 있음
         const root = current.getRootNode();
-        if (root instanceof ShadowRoot) {
+        if (w.ShadowRoot && root instanceof w.ShadowRoot) {
           // Shadow host로 올라가기
-          current = root.host as HTMLElement;
+          current = (root as ShadowRoot).host as HTMLElement;
         } else {
           // Document root 도달
           break;