@dooboostore/simple-web-component 1.0.34 → 1.0.36

package/src/decorators/setProperty.ts

@@ -56,15 +56,16 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
             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);
+          if (selector === '$this' || !selector) applyRoot(host);
+          else if (selector === '$host') applyRoot(hostSet.$host);
+          else 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 {
             const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
             if (targetRoot) {
@@ -106,6 +107,6 @@ export const setProperty = (selector: string, propertyNameOrOptions?: string | P
   };
 };
 
-export const setPropertyHost = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
-  return setProperty(':host', propertyNameOrOptions, options);
+export const setPropertyThis = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
+  return setProperty('$this', propertyNameOrOptions, options);
 };

package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts

@@ -3,14 +3,15 @@ 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, currentThis: any) => boolean;
+  options?: SwcAppRouteChangeOptions;
 }
 
 export interface SwcAppRouteChangeOptions {
-  path?: string | string[];
+  path?: RoutePathType;
   filter?: (router: Router, currentThis: any) => boolean;
 }
 
@@ -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

@@ -17,7 +17,13 @@ export type SwcConfigType = {
   onEngineStarted?: (sp: SimpleApplication, app: SwcAppInterface) => void;
   onConnected?: (app: SwcAppInterface) => void;
   onDisconnected?: (app: SwcAppInterface) => void;
-  onRouteChanged?: (event: RouterEventType, 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'>;
@@ -33,6 +39,7 @@ export class SwcAppEngine {
   get config() {
     return this._config;
   }
+
   async connect(config: SwcConfigType) {
     try {
       this._config = config;
@@ -51,13 +58,13 @@ export class SwcAppEngine {
       // App start
       this.simpleApplication = new SimpleApplication(
         new SimOption({
-          excludeProxys: [Node],
+          excludeProxys: [(this._config.window as any).Node],
           container: this._config.container
         })
       );
 
       const otherInstanceSim = new Map<any, any>();
-      this.config.otherInstanceSim?.forEach((v, k) => {
+      this.config?.otherInstanceSim?.forEach((v, k) => {
         otherInstanceSim.set(k, v);
       });
       if (this.router) otherInstanceSim.set(Router, this.router);

package/src/elements/SwcAppMixin.ts

@@ -1,21 +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_started_instances = new WeakSet<any>();
-    _swc_notified_routes = new WeakMap<any, RouterEventType>();
+    // _swc_notified_routes = new WeakMap<any, RouterEventType>();
     _routerSubscription?: Subscription;
     _lastRouterEvent?: RouterEventType;
+    _routeChangeInvocations = 0;
+    _connectedInvocations = 0;
+
+    _childrenRouteChangedInterval: any;
+    _childrenConnectedDoneInterval: any;
 
     /*
       사파리 is 일경우
@@ -24,104 +27,171 @@ 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;
     }
 
     async _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
-      // 이미 이 라우트 이벤트에 대해 처리된 인스턴스라면 스킵 (동시성/중복 방지)
-      if (this._swc_notified_routes.get(instance) === re) return;
-      this._swc_notified_routes.set(instance, re);
+      if (instance.isConnected === false) return;
 
-      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeWhileConnectedMetadata(instance);
-      if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
-        const ps = routeChangeSubscribers.map(async metadata => {
-          const methodName = metadata.propertyKey;
-          const pathPattern = metadata.pathPattern;
-          const filter = metadata.filter;
+      this._routeChangeInvocations++;
+
+      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);
 
-          // 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;
+        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!, instance);
+            const filterPassed = !filter || filter(this.router!, instance);
 
-          // Invoke method if conditions pass
-          if (pathMatched && filterPassed && instance[methodName]) {
-            await instance[methodName]({ ...re, pathData: pathData });
-          }
-        });
-        return await Promise.allSettled(ps);
+            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_started_instances.delete(instance);
-        this._swc_notified_routes.delete(instance);
+        // this._swc_notified_routes.delete(instance);
       }
     }
 
     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);
-        const ps = swcConnectedInstance.map((instance: any) => this._invokeRouteChangeSubscribers(instance, route));
-        await Promise.allSettled(ps);
-      }
+      // 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;
 
       const mode = config?.connectMode || 'direct';
 
-      // console.log('-------mode', mode);
       if (mode === 'direct') {
         await this.__swc_engine.connect(swcConfig);
         this.setAttribute('swc-connect-mode', 'direct');
@@ -134,21 +204,21 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
           // 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' });
-            
+            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) {
@@ -164,12 +234,16 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
 
       // 사파리일떄 예외이다 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);
-      const scis = Array.from(this._swc_connected_instance);
-      await Promise.allSettled(scis.map(instance => 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);
       // });
@@ -177,36 +251,42 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       // 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).then(it => {
-            config?.onRouteChanged?.(route, this);
-          });
+
+        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) {
-        //   this.router.go(config.path);
-        // }
+        if (config?.path) {
+          // console.log('[DEBUG] Navigating to initial path:', config.path);
+          this.router.go(config.path);
+        }
       }
     }
 
-    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) {
-        const ps = startedMethods.map(m => instance._invokeLifecycleMethod(m));
-        return await Promise.allSettled(ps)
-        // for (const m of startedMethods) {
-        //   instance._invokeLifecycleMethod(m);
-        // }
-      }
-    }
+    // 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();
 

package/src/elements/SwcAsync.ts

@@ -1,17 +1,16 @@
-import { changedAttributeHost } from '../decorators/changedAttributeHost';
+import { changedAttributeThis } from '../decorators/changedAttributeThis';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, ActionExpression } from '@dooboostore/core';
 import { ConvertUtils } from '@dooboostore/core-web';
-import { attributeHost } from '../decorators';
+import { attributeThis } from '../decorators';
 
 class SwcAsync extends HTMLTemplateElement {
-  @attributeHost('value')
+  @attributeThis('value')
   _value: any;
-
-  @attributeHost('replace-wrap')
-  _replaceWrap: string | null;
-
-  resultValue?: any;
+  @attributeThis('replace-wrap-start')
+  _replaceWrapStart: string | null;
+  @attributeThis('replace-wrap-end')
+  _replaceWrapEnd: string | null;  resultValue?: any;
 
   get value(): boolean {
     return this._value;
@@ -23,15 +22,15 @@ class SwcAsync extends HTMLTemplateElement {
 
   private _nodes: Node[] = [];
 
-  @changedAttributeHost('value')
+  @changedAttributeThis('value')
   private setValue(valueAttr?: string | null) {
     this.executeAsync(this._value);
   }
 
-  @changedAttributeHost('replace-wrap')
-  private setReplaceWrap() {
-    this.executeAsync(this._value);
-  }
+  // @changedAttributeThis('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);
     }
   }