@dooboostore/simple-web-component 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dooboostore/simple-web-component",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "license": "MIT",
   "type": "module",
   "main": "./dist/cjs/index.js",
@@ -92,10 +92,10 @@
     "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^5.2.0",
-    "@dooboostore/core-node": "1.0.12",
-    "@dooboostore/core-web": "1.0.10",
     "@dooboostore/core": "1.0.30",
-    "@dooboostore/simple-boot": "1.0.54"
+    "@dooboostore/simple-boot": "1.0.54",
+    "@dooboostore/core-web": "1.0.10",
+    "@dooboostore/core-node": "1.0.12"
   },
   "scripts": {
     "clean": "rm -rf dist",

package/src/decorators/attribute.ts

@@ -92,6 +92,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
 
     const applySetAttribute = (inst: any, targets: HTMLElement[], attrName: string, nv: any) => {
       targets.forEach(it => {
+        // console.log('sssssssssssss', it, attrName, nv);
         if (it && typeof (it as any).setAttribute === 'function') {
           if (nv === null) {
             (it as any).removeAttribute(attrName);
@@ -112,6 +113,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
       
       Object.defineProperty(target, propertyKey, {
         get(this: any) {
+          // console.log('------>??gettttt', this,  propertyKey);
           // try {
             const attrName = options.name || String(propertyKey);
             const conf = getElementConfig(this);
@@ -136,7 +138,9 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
               return null;
             }
 
-            return convertValue(this[privateKey], targetType);
+            const data =  convertValue(this[privateKey], targetType);
+          // console.log('get rrr', data);
+            return data;
           // } catch (err) {
           //   console.error('Error in getter:', err);
           //   throw err;
@@ -144,6 +148,7 @@ export function attribute(selector: string, options: AttributeFieldOptions = {})
         },
         set(this: any, nv: any) {
           // this[propertyKey] = nv;
+          // console.log('------>??settttt', this, nv, propertyKey);
           const attrName = options.name || String(propertyKey);
           const conf = getElementConfig(this);
           const currentWin = this._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as any);

package/src/decorators/elementDefine.ts

@@ -91,6 +91,7 @@ export const ensureInit = (inst: any) => {
 
     // Call constructor script if present
     const hostSet = SwcUtils.getHostSet(inst);
+    const appHosts = SwcUtils.findAllParentAppHostsDirect(inst);
     inst._executeSwcScript?.('swc-on-constructor', hostSet);
 
     // Call @onInitialize lifecycle methods
@@ -172,14 +173,15 @@ const setupPrototype = (proto: any) => {
     return (typeof window !== 'undefined' ? window : undefined) as Window;
   };
 
-  proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet: HostSet, extraArgs: any[] = []) {
+  proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
-    const app = hostSet.$appHost?.simpleApplication;
-
+    const useHostSet = hostSet ?? SwcUtils.getHostSet(this);
+    const app = useHostSet?.$appHost.simpleApplication;
+    // console.log('---->hh',app, this, methodName);
     if (app) {
       const otherStorage = new Map<any, any>();
-      const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: hostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: hostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: hostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: hostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: hostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: hostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: hostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: hostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: hostSet.$lastAppHost })]);
+      const situations = new SituationTypeContainers([new SituationTypeContainer({ situationType: InjectSituationType.HOST_SET, data: useHostSet }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new SituationTypeContainer({ situationType: InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new SituationTypeContainer({ situationType: InjectSituationType.HOST, data: useHostSet.$host }), new SituationTypeContainer({ situationType: InjectSituationType.HOSTS, data: useHostSet.$hosts }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new SituationTypeContainer({ situationType: InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new SituationTypeContainer({ situationType: InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
       otherStorage.set(SituationTypeContainers, situations);
 
       return app.simstanceManager.executeBindParameterSimPromise(
@@ -493,8 +495,14 @@ export const elementDefine =
       (this as any).__swc_connected = true;
 
       // Register to appHost LAST when all lifecycle completed
+      // console.log('!!!!!!!!!!!!!!', this, appHost)
+      const appHostss = SwcUtils.findAllParentAppHostsDirect(this)
+      // const nAppHostSet = SwcUtils.getHostSet(this as any);
       if (appHost && typeof (appHost as any)._connected === 'function') {
         (appHost as any)._connected(this);
+      } else if (appHost && typeof (appHost as any)) {
+        (appHost as any)._connected_safari ??= [];
+        (appHost as any)._connected_safari.push(this);
       }
     };
 

package/src/decorators/emitCustomEvent.ts

@@ -52,6 +52,7 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
       const hostSet = SwcUtils.getHostSet(this as any);
       const conf = getElementConfig(this);
       const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+      // console.log('emitEEEEEEEEEEE', hostSet);
 
       const eventTargets: EventTarget[] = [];
       if (selectorOrTarget === ':window') eventTargets.push(currentWin);

package/src/decorators/index.ts

@@ -10,4 +10,5 @@ export * from './queryAll';
 export * from './applyClass';
 export * from './applyStyle';
 export * from './applyAttribute';
+export * from './setProperty';
 export * from './subscribeSwcAppRouteChange';

package/src/decorators/lifecycles.ts

@@ -8,6 +8,7 @@ export const ON_AFTER_DISCONNECTED_METADATA_KEY = Symbol.for('simple-web-compone
 export const ON_BEFORE_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-before-adopted');
 export const ON_AFTER_ADOPTED_METADATA_KEY = Symbol.for('simple-web-component:on-after-adopted');
 export const ON_ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:on-add-event-listener');
+export const ON_CONNECTED_SWC_APP_METADATA_KEY = Symbol.for('simple-web-component:on-connected-swc-app');
 export const INNER_HTML_METADATA_KEY = Symbol.for('simple-web-component:inner-html');
 
 export const ATTRIBUTE_CHANGED_WILDCARD = '*';
@@ -48,6 +49,8 @@ export const onAdopted = onAfterAdopted;
 
 export const onAddEventListener = createLifecycleDecorator(ON_ADD_EVENT_LISTENER_METADATA_KEY);
 
+export const onConnectedSwcApp = createLifecycleDecorator(ON_CONNECTED_SWC_APP_METADATA_KEY);
+
 /**
  * @onConnectedInnerHtml decorator to define the initial HTML content when connected.
  */

package/src/decorators/setProperty.ts

@@ -0,0 +1,97 @@
+import { ReflectUtils } from '@dooboostore/core';
+import { ensureInit } from './elementDefine';
+import { SwcUtils } from '../utils/Utils';
+import { SwcQueryOptions } from '../types';
+
+export interface PropertySetOptions extends SwcQueryOptions {
+  name?: string;
+}
+
+export interface PropertySetMetadata {
+  propertyKey: string | symbol;
+  selector: string;
+  options: PropertySetOptions;
+}
+
+export const PROPERTY_SET_METADATA_KEY = Symbol.for('simple-web-component:property-set');
+
+export const setProperty = (selector: string, propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
+  return (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
+    const constructor = target.constructor;
+    let metaList = ReflectUtils.getOwnMetadata(PROPERTY_SET_METADATA_KEY, constructor) as Map<string | symbol, PropertySetMetadata>;
+    if (!metaList) {
+      metaList = new Map<string | symbol, PropertySetMetadata>();
+      ReflectUtils.defineMetadata(PROPERTY_SET_METADATA_KEY, metaList, constructor);
+    }
+
+    let propertyName = typeof propertyNameOrOptions === 'string' ? propertyNameOrOptions : undefined;
+    let finalOptions = options;
+    
+    if (typeof propertyNameOrOptions === 'object' && propertyNameOrOptions !== null) {
+      finalOptions = propertyNameOrOptions as PropertySetOptions;
+    }
+
+    metaList.set(propertyKey, { 
+      propertyKey, 
+      selector, 
+      options: { ...finalOptions, name: propertyName } 
+    });
+
+    const original = descriptor.value;
+    descriptor.value = async function (...args: any[]) {
+      ensureInit(this);
+      const res = await (original as any).apply(this, args);
+      if (res !== undefined) {
+        const win = (this as any).ownerDocument?.defaultView || window;
+        const host = this as unknown as HTMLElement;
+        const hostSet = { ...SwcUtils.getHelperAndHostSet(win, host), $this: this };
+        const r = finalOptions.root || 'auto';
+        const targetEls: HTMLElement[] = [];
+
+        const applyRoot = (t: any) => {
+          if (!t || !(t instanceof win.HTMLElement)) return;
+          targetEls.push(t);
+        };
+
+        if (selector === ':parentHost') applyRoot(hostSet.$parentHost);
+        else if (selector === ':appHost') applyRoot(hostSet.$appHost);
+        else if (selector === ':firstHost') applyRoot(hostSet.$firstHost);
+        else if (selector === ':lastHost') applyRoot(hostSet.$lastHost);
+        else if (selector === ':firstAppHost') applyRoot(hostSet.$firstAppHost);
+        else if (selector === ':lastAppHost') applyRoot(hostSet.$lastAppHost);
+        else if (selector === ':hosts') hostSet.$hosts.forEach(applyRoot);
+        else if (selector === ':appHosts') hostSet.$appHosts.forEach(applyRoot);
+        else if (selector === ':host' || !selector) applyRoot(host);
+        else {
+          const targetRoot = r === 'auto' ? (host.shadowRoot || host) : (r === 'shadow' ? host.shadowRoot : host);
+          if (targetRoot) {
+            const found = targetRoot.querySelectorAll(selector);
+            if (found) targetEls.push(...(Array.from(found) as HTMLElement[]));
+          }
+        }
+
+        targetEls.forEach(targetEl => {
+          const resolvedRes = typeof res === 'function' ? (res as any)(targetEl, hostSet) : res;
+
+          if (propertyName) {
+            // Case: @setProperty(selector, 'propertyName')
+            (targetEl as any)[propertyName] = resolvedRes;
+          } else if (typeof resolvedRes === 'object' && resolvedRes !== null && !Array.isArray(resolvedRes)) {
+            // Case: @setProperty(selector) with Object return - assign multiple properties
+            Object.entries(resolvedRes as any).forEach(([prop, val]) => {
+              const finalVal = typeof val === 'function' ? val(targetEl, hostSet) : val;
+              (targetEl as any)[prop] = finalVal;
+            });
+          } else {
+            // Simple value - assign to 'value' property by default
+            (targetEl as any).value = resolvedRes;
+          }
+        });
+      }
+    };
+  };
+};
+
+export const setPropertyHost = (propertyNameOrOptions?: string | PropertySetOptions, options: PropertySetOptions = {}): MethodDecorator => {
+  return setProperty(':host', propertyNameOrOptions, options);
+};

package/src/elements/SwcAppEngine.ts

@@ -42,11 +42,11 @@ export class SwcAppEngine {
 
       // Router Selection
       if (this._config.routeType === 'path') {
-        this.router = new PathRouter({ window: this._config.window, firstUrl: this._config.path });
+        this.router = new PathRouter({ window: this._config.window });
       } else if (this._config.routeType === 'hash') {
-        this.router = new HashRouter({ window: this._config.window, firstUrl: this._config.path });
+        this.router = new HashRouter({ window: this._config.window });
       } else if (this._config.routeType === 'element') {
-        this.router = new ElementRouter({ window: this._config.window, firstUrl: this._config.path });
+        this.router = new ElementRouter({ window: this._config.window });
       }
 
       // console.log('vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv', this.router)

package/src/elements/SwcAppMixin.ts

@@ -2,16 +2,25 @@ import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEng
 import { SwcAppInterface } from '../types';
 import { SwcUtils } from '../utils/Utils';
 import { FunctionUtils, Subscription } from '@dooboostore/core';
-import { RouterEventType } from '@dooboostore/core-web';
+import { Router, RouterEventType } from '@dooboostore/core-web';
+import { ON_CONNECTED_SWC_APP_METADATA_KEY, findAllLifecycleMetadata } from '../decorators/lifecycles';
 import { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';
 
 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>();
     _routerSubscription?: Subscription;
     _lastRouterEvent?: RouterEventType;
 
+    /*
+      사파리 is 일경우
+    <script src="https://unpkg.com/@ungap/custom-elements"></script>
+    이걸사용하는데 is 대응하는거다 그런데 이때 처리되는 순서가  크롬이나 표준에서는 부모부터 만들어지고 자식들이 만들어지는데
+     저 polyfill에서는 자식부터 만들어지고 부모가 만들어진다 is일때 아 .. 이문제때문에 자식이 _connected_safari 에 강제로 자기자식넣어준다
+     */
+    _connected_safari = [];
     get simpleApplication() {
       return this.__swc_engine.simpleApplication;
     }
@@ -19,6 +28,11 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
       return this.__swc_engine.router;
     }
 
+    // constructor() {
+    //   super();
+    //   console.log('cccccccccccccccccccccc');
+    // }
+
     _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {
       const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);
       if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {
@@ -56,20 +70,22 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
 
           // Invoke method if conditions pass
           if (pathMatched && filterPassed) {
-            instance[methodName]?.(re, pathData || {});
+            instance[methodName]?.({...re, pathData: pathData});
           }
         });
       }
     }
 
     _connected(instance: any) {
-      // console.log('------------------>', instance);
+      // console.log('appmixin--> connected', this, instance);
       if (instance) {
         this._swc_connected_instance.add(instance);
-
-        // Notify current route subscribers immediately after connection
-        if (this.router && this._lastRouterEvent) {
-          this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+        if (this.simpleApplication) {
+          this._invokeOnConnectedSwcAppStarted(instance);
+          // Notify current route subscribers immediately after connection
+          if (this.router && this._lastRouterEvent) {
+            this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);
+          }
         }
       }
     }
@@ -127,19 +143,54 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
         }
       }
 
-      // console.log('vvvvvvv222222', this.router);
+      // 사파리일떄 예외이다 is 일때 polyfill되는데 이떄 부모부터 만들어지는게 아니라 자식부터 만들어진다 그래서 부모가 만들어질때 자식들이 이미 만들어져있어서 부모가 자식들을 등록해주는 형태로 강제로 등록해준다
+      this._connected_safari.forEach((instance: any) => {
+        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);
+      });
+
+      // Safari fix: Manually scan DOM tree and register any SWC components that couldn't find parent
+      // This handles the case where is="" elements get upgraded in child-first order
+      // const allElements = (this as any).querySelectorAll('*');
+      // for (const el of allElements) {
+      //   const isConnected = (el as any).__swc_connected;
+      //   if (!isConnected && typeof (el as any)._resolveWindow === 'function') {
+      //     // Element is an SWC component but hasn't registered with app yet
+      //     try {
+      //       this._connected(el);
+      //       if ((el as any)._invokeOnConnectedSwcAppStarted) {
+      //         this._invokeOnConnectedSwcAppStarted(el);
+      //       }
+      //     } catch (e) {
+      //       console.warn('[SWC] Error registering discovered element:', el.tagName, e);
+      //     }
+      //   }
+      // }
+
       // Subscribe to router changes after connect
       if (!this._routerSubscription && this.router) {
         this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {
           // console.log('Route changed:', route);
           this._handleRouteChange(route);
         });
-
         // Navigate to initial path if specified
-        // const config = this.__swc_engine.config;
-        // if (config?.path) {
-        //   this.router.go(config.path);
-        // }
+        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);
+        }
       }
     }
 
@@ -177,7 +228,19 @@ export function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Bas
     }
 
     async routing(path: string) {
-      await this.__swc_engine.router?.go(path);
+      await this.router?.go(path);
+    }
+
+    back(): void {
+      this.router?.back();
+    }
+
+    forward(): void {
+      this.router?.forward();
+    }
+
+    reload(): void {
+      this.router?.reload();
     }
   };
 }

package/src/elements/SwcAsync.ts

@@ -31,7 +31,10 @@ export class SwcAsync extends HTMLTemplateElement {
   @changedAttributeHost('on-get-value')
   private refresh() {
     const script = this.getAttribute('on-get-value');
-    if (!script) return;
+    if (!script) {
+      this.render('default');
+      return;
+    }
     const win = this.ownerDocument?.defaultView || window;
     const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
 
@@ -85,6 +88,7 @@ export class SwcAsync extends HTMLTemplateElement {
   }
 
   connectedCallback() {
+    console.log('[SwcAsync] connectedCallback called');
     this.refresh();
   }
   disconnectedCallback() {

package/src/elements/SwcChoose.ts

@@ -5,6 +5,7 @@ import { FunctionUtils } from '@dooboostore/core';
 export class SwcChoose extends HTMLTemplateElement {
   private _nodes: Node[] = [];
   private _value: any = null;
+  private _previousTemplate: HTMLTemplateElement | null = null;
 
   get value(): any {
     return this._value;
@@ -14,76 +15,114 @@ export class SwcChoose extends HTMLTemplateElement {
     this.render();
   }
 
-  private _resolvePortal(): Element | null {
-    const portalScript = this.getAttribute('on-get-portal');
-    if (!portalScript) return this.parentElement;
-
-    const win = this.ownerDocument?.defaultView || window;
-    const res = FunctionUtils.executeReturn({
-      script: portalScript,
-      context: this,
-      args: SwcUtils.getHelperAndHostSet(win, this)
-    });
-
-    if (res instanceof HTMLElement) return res;
-    if (typeof res === 'string') return win.document.querySelector(res);
-    return this.parentElement;
-  }
-
   private _executeCloneCallback(attr: string, args: any) {
     const script = this.getAttribute(attr);
     if (!script) return;
     FunctionUtils.execute({ script, context: this, args });
   }
 
-  @changedAttributeHost('on-get-value')
-  private refresh() {
-    const script = this.getAttribute('on-get-value');
-    if (!script) {
+  @changedAttributeHost('value')
+  private refresh(valueAttr?: string | null) {
+    valueAttr ??= this.getAttribute('value');
+    if (valueAttr === null) {
       this.value = null;
       return;
     }
-    const win = this.ownerDocument?.defaultView || window;
-    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
-    this.value = result;
+
+    // {{ }} 브레이스로 감싸진 값은 스크립트 실행
+    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {
+      const script = valueAttr.slice(2, -2).trim();
+      const win = this.ownerDocument?.defaultView || window;
+      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
+      this.value = result;
+    } else {
+      // 일반 문자열 값
+      this.value = valueAttr;
+    }
   }
 
   private render() {
-    this.cleanup();
-    const portal = this._resolvePortal();
-    if (!portal) return;
-
     const win = this.ownerDocument?.defaultView || window;
     const helperSet = SwcUtils.getHelperAndHostSet(win, this);
-
     const templates = Array.from(this.content.querySelectorAll('template'));
     let selected: HTMLTemplateElement | null = null;
+
     for (const t of templates) {
-      if (t.getAttribute('is') === 'swc-when' && String(t.getAttribute('value')) === String(this._value)) {
-        selected = t;
-        break;
+      if (t.getAttribute('is') === 'swc-when') {
+        let matches = false;
+        const value = t.getAttribute('value') || '';
+
+        // {{ }} 브레이스로 감싸진 값은 스크립트 실행
+        if (value.startsWith('{{') && value.endsWith('}}')) {
+          const script = value.slice(2, -2).trim();
+          const result = FunctionUtils.executeReturn({
+            script,
+            context: t,
+            args: { ...helperSet, $value: this._value }
+          });
+          // console.log('rrrrrrrrrrrrrr', result);
+          matches = result === true;
+        } else {
+          // 일반 문자열 비교 (기존 방식)
+          matches = String(value) === String(this._value);
+        }
+
+        if (matches) {
+          selected = t;
+          break;
+        }
       }
     }
+
     const target = selected || (this.content.querySelector('template[is="swc-otherwise"]') as HTMLTemplateElement);
 
+    // skip-if-same attribute가 있고 이전과 같은 template이면 렌더링 스킵
+    // 최상위 skip-if-same 또는 각 when/otherwise의 skip-if-same 체크
+    const targetHasSkipIfSame = target?.hasAttribute('skip-if-same');
+    const shouldSkip = (this.hasAttribute('skip-if-same') || targetHasSkipIfSame) && this._previousTemplate === target;
+    if (shouldSkip) {
+      return;
+    }
+
+    this.cleanup();
+    this._previousTemplate = target;
+
     if (target) {
       const clone = target.content.cloneNode(true) as DocumentFragment;
       this._nodes = Array.from(clone.childNodes);
       const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];
       const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
 
+      // 복제된 최상위 요소들은 SwcChoose의 직접 자식이 될 것이므로 __swc_host 설정 안 함
       this._nodes.forEach((n, nodeIdx) => {
-        if (n instanceof HTMLElement) (n as any).__swc_host = this;
+        // if (n instanceof HTMLElement) (n as any).__swc_host = this;  // 제거: 부모 체인 유지
         this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+
+        // Attribute {{ }} 치환 - HTML string 차원에서 동적 치환
+        if (n instanceof HTMLElement) {
+          Array.from(n.attributes).forEach(attr => {
+            const value = attr.value || '';
+            if (value.startsWith('{{') && value.endsWith('}}')) {
+              const script = value.slice(2, -2).trim();
+              const result = FunctionUtils.executeReturn({
+                script,
+                context: n,
+                args: { ...groupArgs, $value: this._value }
+              });
+              n.setAttribute(attr.name, String(result));
+            }
+          });
+        }
       });
 
       this._executeCloneCallback('on-clone-nodes', groupArgs);
 
-      if (portal === this.parentElement) {
-        portal.insertBefore(clone, this.nextSibling);
-      } else {
-        portal.appendChild(clone);
-      }
+      this.parentElement?.insertBefore(clone, this.nextSibling);
+      // if (portal === this.parentElement) {
+      //   portal.insertBefore(clone, this.nextSibling);
+      // } else {
+      //   portal.appendChild(clone);
+      // }
     }
   }