@dooboostore/simple-web-component 1.0.33 → 1.0.35

package/src/elements/SwcAppMixin.ts

@@ -1,19 +1,24 @@
-import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEngine';
-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 { getSubscribeSwcAppRouteChangeWhileConnectedMetadata } from '../decorators/subscribeSwcAppRouteChangeWhileConnected';
-import { getSubscribeSwcAppMessageWhileConnectedMetadata } from '../decorators/subscribeSwcAppMessageWhileConnected';
-
-export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {
+import {SwcAppEngine, SwcAttributeConfigType, SwcConfigType} from './SwcAppEngine';
+import {SwcAppInterface, SwcAppMessage} from '../types';
+import {SwcUtils} from '../utils/Utils';
+import {debounceTimeIntervalLock, FunctionUtils, Subscription} from '@dooboostore/core';
+import {RouterEventType} from '@dooboostore/core-web';
+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_notified_routes = new WeakMap<any, RouterEventType>();
     _routerSubscription?: Subscription;
     _lastRouterEvent?: RouterEventType;
+    _routeChangeInvocations = 0;
+    _connectedInvocations = 0;
+
+    _childrenRouteChangedInterval: any;
+    _childrenConnectedDoneInterval: any;
 
     /*
       사파리 is 일경우
@@ -22,92 +27,166 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
      저 polyfill에서는 자식부터 만들어지고 부모가 만들어진다 is일때 아 .. 이문제때문에 자식이 _connected_safari 에 강제로 자기자식넣어준다
      */
     _connected_safari = [];
+
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
     }
+
+    get config() {
+      return this.__swc_engine?.config;
+    }
+
     get router() {
-      return this.__swc_engine.router;
+      return this.__swc_engine?.router;
     }
 
-    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
-      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
-      if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
-        routeChangeSubscribers.forEach((metadata: any) => {
-          const methodName = metadata.propertyKey || metadata;
-          const pathPattern = metadata.pathPattern;
-          const filter = metadata.filter;
+    async _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
+      if (instance.isConnected === false) return;
+
+      this._routeChangeInvocations++;
 
-          // Path pattern matching (support both string and array)
-          let pathMatched = false;
-          let pathData: any = null;
-
-          if (!pathPattern) {
-            // pathPattern이 없으면 모든 경로 매칭 (와일드카드)
-            pathMatched = true;
-            pathData = {};
-          } else if (Array.isArray(pathPattern)) {
-            // 배열: 하나라도 매칭되면 OK
-            for (const pattern of pathPattern) {
-              const data = SwcUtils.parsePathPattern(pattern, re.path || '/');
-              if (data !== null) {
-                pathMatched = true;
-                pathData = data;
-                break;
+      if (this._childrenRouteChangedInterval) {
+        clearInterval(this._childrenRouteChangedInterval);
+      }
+      this._childrenRouteChangedInterval = debounceTimeIntervalLock(
+        () => this._routeChangeInvocations === 0,
+        () => {
+          this._childrenRouteChangedInterval = null;
+          this.config.onChildrenRouteChanged(re, this)
+        },
+        this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
+        {setInterval: window.setInterval, clearInterval: window.clearInterval}
+        // {setInterval: window.setInterval, clearInterval: window.clearInterval}
+      );
+
+
+      // debounceTimeIntervalLock({
+      //   unlockChecker: () => this._routeChangeInvocations === 0,
+      //   unlocked: () => this.config.onChildrenRouteChanged(re, this)
+      // }, {
+      //   intervalId: this._childrenRouteChangedInterval,
+      //   setIntervalId: (id) => this._childrenRouteChangedInterval = id,
+      //   intervalTime: this.config?.childrenRouteChangedCheckIntervalTime ?? 30
+      // }, {
+      //   setInterval: window.setInterval,
+      //   clearInterval: window.clearInterval
+      // });
+
+      try {
+        // 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)) {
+          const ps = routeChangeSubscribers.map(async metadata => {
+            const methodName = metadata.propertyKey;
+            let pathPattern = metadata.options?.path as any;
+            const filter = metadata.options?.filter;
+
+            if (typeof pathPattern === 'function') {
+              pathPattern = (pathPattern as Function)(instance);
+            }
+
+            let pathMatched = false;
+            let pathData: any = null;
+
+            if (!pathPattern) {
+              pathMatched = true;
+              pathData = {};
+            } else if (Array.isArray(pathPattern)) {
+              for (const pattern of pathPattern) {
+                const data = SwcUtils.parsePathPattern(pattern, re.path || '/');
+                if (data !== null) {
+                  pathMatched = true;
+                  pathData = data;
+                  break;
+                }
               }
+            } else {
+              pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');
+              pathMatched = pathData !== null;
             }
-          } else {
-            // 문자열
-            pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');
-            pathMatched = pathData !== null;
-          }
 
-          // 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});
+            }
+          });
+          await Promise.allSettled(ps);
+        }
+      } finally {
+        this._routeChangeInvocations--;
       }
     }
 
-    _connected(instance: any) {
-      // console.log('appmixin--> connected', this, instance);
+    async _connected(instance: any) {
       if (instance) {
+        this._connectedInvocations++;
         this._swc_connected_instance.add(instance);
+
+        if (this._childrenConnectedDoneInterval) {
+          clearInterval(this._childrenConnectedDoneInterval);
+        }
+        this._childrenConnectedDoneInterval = debounceTimeIntervalLock(
+          () => this._connectedInvocations === 0,
+          () => {
+            this._childrenConnectedDoneInterval = null;
+            this.config.onChildrenConnectedDone(this)
+          },
+          this.config?.childrenConnectedDoneCheckIntervalTime ?? 30,
+          {setInterval: window.setInterval, clearInterval: window.clearInterval}
+        );
+
+
         if (this.simpleApplication) {
-          this._invokeOnConnectedSwcAppStarted(instance);
-          // Notify current route subscribers immediately after connection
-          if (this.router && this._lastRouterEvent) {
-            this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+          try {
+            // await this._invokeOnConnectedSwcAppStarted(instance);
+
+            if (this.router && this._lastRouterEvent) {
+              await this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent!);
+            }
+          } catch (e) {
+            throw e;
           }
         }
       }
     }
 
+    async _connectedDone(instance: any) {
+      try {
+        // 내부 연결 처리 로직이 있다면 여기에 추가
+      } finally {
+        this._connectedInvocations--;
+      }
+    }
+
     _disconnected(instance: any) {
+      // console.log('_disconnected', instance);
       if (instance) {
         this._swc_connected_instance.delete(instance);
+        // this._swc_notified_routes.delete(instance);
       }
     }
 
-    _handleRouteChange(route: RouterEventType) {
-      if (route.triggerPoint === 'end') {
-        // Iterate through all connected component instances
-        this._swc_connected_instance.forEach((instance: any) => {
-          this._invokeRouteChangeSubscribers(instance, route);
-        });
-      }
-
+    async _handleRouteChange(route: RouterEventType) {
       // Save last router event
       this._lastRouterEvent = route;
+      // if (route.triggerPoint === 'end') {
+      // Iterate through all connected component instances
+      const swcConnectedInstance = Array.from(this._swc_connected_instance);
+      // console.log('routing handle-->', swcConnectedInstance)
+      const ps = swcConnectedInstance.map((instance: any) => this._invokeRouteChangeSubscribers(instance, route));
+      await Promise.allSettled(ps);
+      // }
     }
 
     async connect(config?: SwcAttributeConfigType) {
       const swcConfig = {
         routeType: 'element',
-        window: config.window,
+        window: config?.window,
         ...config
       } as SwcConfigType;
 
@@ -116,65 +195,98 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       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;
         }
       }
 
       // 사파리일떄 예외이다 is 일때 polyfill되는데 이떄 부모부터 만들어지는게 아니라 자식부터 만들어진다 그래서 부모가 만들어질때 자식들이 이미 만들어져있어서 부모가 자식들을 등록해주는 형태로 강제로 등록해준다
       this._connected_safari.forEach((instance: any) => {
-        this._swc_connected_instance.add(instance);
+        // console.log('safari!!!!!!!!!!', instance)
+        this._connected(instance);
+        // this._swc_connected_instance.add(instance);
       });
       // 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) {
-        this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
-          //@ts-ignore
-          // console.log('Route changed:', route, this._swcId);
-          this._handleRouteChange(route);
-        });
-        // Navigate to initial path if specified
         const config = this.__swc_engine.config;
-        // if (config?.path) {
-        //   this.router.go(config.path);
-        // }
-      }
-    }
 
-    _invokeOnConnectedSwcAppStarted(instance: any) {
-      const startedMethods = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);
-      if (startedMethods) {
-        for (const m of startedMethods) {
-          instance._invokeLifecycleMethod(m);
+        this._routerSubscription = this.router.observable.subscribe(async (route: RouterEventType) => {
+          // console.log('[SWC] Router event received:', route.triggerPoint);
+          if (route.triggerPoint === 'end') {
+            // 1. 모든 기존 연결된 자식들에게 라우트 이벤트 알림
+            await this._handleRouteChange(route);
+          }
+        });
+
+        // Navigate to initial path if specified
+        if (config?.path) {
+          // console.log('[DEBUG] Navigating to initial path:', config.path);
+          this.router.go(config.path);
         }
       }
     }
 
+    // async _invokeOnConnectedSwcAppStarted(instance: any) {
+    //   this._swcAppStartedInvocations++;
+    //   try {
+    //     // 이미 시작된 인스턴스라면 스킵 (비동기 병렬 중복 호출 방지)
+    //     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) {
+    //       const ps = startedMethods.map(m => instance._invokeLifecycleMethod(m));
+    //       await Promise.allSettled(ps);
+    //     }
+    //   } finally {
+    //     this._swcAppStartedInvocations--;
+    //   }
+    // }
+
     connectedCallback() {
+      // this.innerHTML='';
       // @ts-ignore
       if (super.connectedCallback) super.connectedCallback();
 
@@ -233,7 +345,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 +362,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/SwcAsync.ts

@@ -7,11 +7,10 @@ import { attributeHost } from '../decorators';
 class SwcAsync extends HTMLTemplateElement {
   @attributeHost('value')
   _value: any;
-
-  @attributeHost('replace-wrap')
-  _replaceWrap: string | null;
-
-  resultValue?: any;
+  @attributeHost('replace-wrap-start')
+  _replaceWrapStart: string | null;
+  @attributeHost('replace-wrap-end')
+  _replaceWrapEnd: string | null;  resultValue?: any;
 
   get value(): boolean {
     return this._value;
@@ -28,10 +27,10 @@ class SwcAsync extends HTMLTemplateElement {
     this.executeAsync(this._value);
   }
 
-  @changedAttributeHost('replace-wrap')
-  private setReplaceWrap() {
-    this.executeAsync(this._value);
-  }
+  // @changedAttributeHost('replace-wrap')
+  // private setReplaceWrap() {
+  //   this.executeAsync(this._value);
+  // }
 
   private executeAsync(result: any = this._value) {
     if (result === undefined || result === null) {
@@ -57,14 +56,22 @@ class SwcAsync extends HTMLTemplateElement {
     }
   }
 
-  private replaceExpressions(html: string, groupArgs: any, context: any, wrap?: string | null): string {
-    const config = wrap ? { wrapExpression: wrap } : undefined;
+  private replaceExpressions(html: string, groupArgs: any, context: any, wrap: {start: string, end: string}): string {
+    let config: any = undefined;
+    if (wrap) {
+      config = {
+        expression: {
+          replace: { start: `${wrap.start}`, end: `${wrap.end}` },
+          callReturn: { start: `${wrap.start}=`, end: `${wrap.end}` },
+          call: { start: `${wrap.start}@`, end: `${wrap.end}` }
+        }
+      };
+    }
     const ae = new ActionExpression(html, config);
-    const filterOptions = wrap ? { type: 'replace' as const, wrap } : 'replace';
     const win = this.ownerDocument?.defaultView || window;
 
     // @ts-ignore
-    for (const expr of ae.getExpressions(filterOptions)) {
+    for (const expr of ae.getExpressions('replace')) {
       try {
         const value = FunctionUtils.executeReturn({
           script: ConvertUtils.decodeHtmlEntity(expr.script, win.document),
@@ -80,9 +87,9 @@ class SwcAsync extends HTMLTemplateElement {
   }
 
   refresh(state: string = 'default') {
-    console.log('rrrrrrrrrrrrrrrrr', state);
+    // console.log('rrrrrrrrrrrrrrrrr', state);
     this.cleanup();
-    const portal = this.parentElement;
+    const portal = SwcUtils.getParentContainer(this);
     if (!portal) return;
 
     const win = this.ownerDocument?.defaultView || window;
@@ -91,15 +98,19 @@ class SwcAsync extends HTMLTemplateElement {
     const t = this.content.querySelector(`template[is="swc-${state}"]`) as HTMLTemplateElement;
     if (t) {
       let htmlString = t.innerHTML;
-      const groupArgs = { ...helperSet, $value: this._value, $state: state };
+      const groupArgs = { ...helperSet, $value: this._value, $state: state, $templateHost: this };
 
-      htmlString = this.replaceExpressions(htmlString, groupArgs, this, this._replaceWrap);
+      htmlString = this.replaceExpressions(htmlString, groupArgs, this, {start:this._replaceWrapStart ?? '{#{', end: this._replaceWrapEnd ?? '}#}'});
 
       const temp = this.ownerDocument?.createElement('template') || document.createElement('template');
       temp.innerHTML = htmlString;
       const content = temp.content;
 
       this._nodes = Array.from(content.childNodes);
+      this._nodes.forEach((node: any) => {
+        if (node instanceof HTMLElement)  (node as any).__template_swc_host = this;
+      });
+
       portal.insertBefore(content, this.nextSibling);
     }
   }