@dooboostore/simple-web-component 1.0.28 → 1.0.30

package/dist/esm/elements/SwcAppMixin.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcAppMixin.ts"],
-  "sourcesContent": ["import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEngine';\nimport { SwcAppInterface } from '../types';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, Subscription } from '@dooboostore/core';\nimport { RouterEventType } from '@dooboostore/core-web';\nimport { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';\n\nexport function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {\n  return class extends Base implements SwcAppInterface {\n    __swc_engine = new SwcAppEngine(this as any);\n    _swc_connected_instance = new Set<any>();\n    _routerSubscription?: Subscription;\n    _lastRouterEvent?: RouterEventType;\n\n    get simpleApplication() {\n      return this.__swc_engine.simpleApplication;\n    }\n    get router() {\n      return this.__swc_engine.router;\n    }\n\n    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {\n      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);\n      if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {\n        routeChangeSubscribers.forEach((metadata: any) => {\n          const methodName = metadata.propertyKey || metadata;\n          const pathPattern = metadata.pathPattern;\n          const filter = metadata.filter;\n\n          // Path pattern matching (support both string and array)\n          let pathMatched = false;\n          let pathData: any = null;\n\n          if (!pathPattern) {\n            // pathPattern\uC774 \uC5C6\uC73C\uBA74 \uBAA8\uB4E0 \uACBD\uB85C \uB9E4\uCE6D (\uC640\uC77C\uB4DC\uCE74\uB4DC)\n            pathMatched = true;\n            pathData = {};\n          } else if (Array.isArray(pathPattern)) {\n            // \uBC30\uC5F4: \uD558\uB098\uB77C\uB3C4 \uB9E4\uCE6D\uB418\uBA74 OK\n            for (const pattern of pathPattern) {\n              const data = SwcUtils.parsePathPattern(pattern, re.path || '/');\n              if (data !== null) {\n                pathMatched = true;\n                pathData = data;\n                break;\n              }\n            }\n          } else {\n            // \uBB38\uC790\uC5F4\n            pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');\n            pathMatched = pathData !== null;\n          }\n\n          // Filter validation\n          const filterPassed = !filter || filter(this.router!);\n\n          // Invoke method if conditions pass\n          if (pathMatched && filterPassed) {\n            instance[methodName]?.(re, pathData || {});\n          }\n        });\n      }\n    }\n\n    _connected(instance: any) {\n      // console.log('------------------>', instance);\n      if (instance) {\n        this._swc_connected_instance.add(instance);\n\n        // Notify current route subscribers immediately after connection\n        if (this.router && this._lastRouterEvent) {\n          this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);\n        }\n      }\n    }\n\n    _disconnected(instance: any) {\n      if (instance) {\n        this._swc_connected_instance.delete(instance);\n      }\n    }\n\n    _handleRouteChange(route: RouterEventType) {\n      if (route.triggerPoint === 'end') {\n        // Iterate through all connected component instances\n        this._swc_connected_instance.forEach((instance: any) => {\n          this._invokeRouteChangeSubscribers(instance, route);\n        });\n      }\n\n      // Save last router event\n      this._lastRouterEvent = route;\n    }\n\n    async connect(config?: SwcAttributeConfigType) {\n      const swcConfig = {\n        routeType: 'element',\n        window: config.window,\n        ...config\n      } as SwcConfigType;\n\n      const mode = config?.connectMode || 'direct';\n\n      if (mode === 'direct') {\n        await this.__swc_engine.connect(swcConfig);\n        this.setAttribute('swc-connect-mode', 'direct');\n      } else if (mode === 'swap' && !this.parentNode) {\n        await this.__swc_engine.connect(swcConfig);\n        this.setAttribute('swc-connect-mode', 'direct');\n\n        const clonedApp = this.cloneNode(true) as any;\n        clonedApp.style.display = 'none';\n        this.parentNode.insertBefore(clonedApp, this.nextSibling);\n\n        try {\n          await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });\n          if (this.parentNode) {\n            this.parentNode.removeChild(this);\n          }\n          clonedApp.setAttribute('swc-connect-mode', 'swap');\n          clonedApp.style.display = '';\n        } catch (e) {\n          if (clonedApp.parentNode) {\n            clonedApp.parentNode.removeChild(clonedApp);\n          }\n          throw e;\n        }\n      }\n\n      // console.log('vvvvvvv222222', this.router);\n      // Subscribe to router changes after connect\n      if (!this._routerSubscription && this.router) {\n        this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {\n          // console.log('Route changed:', route);\n          this._handleRouteChange(route);\n        });\n\n        // Navigate to initial path if specified\n        // const config = this.__swc_engine.config;\n        // if (config?.path) {\n        //   this.router.go(config.path);\n        // }\n      }\n    }\n\n    connectedCallback() {\n      // @ts-ignore\n      if (super.connectedCallback) super.connectedCallback();\n\n      const configStr = this.getAttribute('swc-get-application-config');\n      const win = this.ownerDocument?.defaultView || window;\n      if (configStr && win) {\n        try {\n          // console.log('vvvvvvvvvvvvvvvv->>>>', SwcUtils.findNearestSwcHost(this.host), SwcUtils.getHostSet(this.host))\n          const userConfig = FunctionUtils.executeReturn({\n            script: configStr,\n            context: this,\n            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this))\n          });\n          this.connect(userConfig);\n        } catch (e) {\n          console.error('[SWC-APP-ENGINE] Script execution failed:', e);\n        }\n      }\n\n      this.__swc_engine?.config?.onConnected?.(this);\n    }\n\n    disconnectedCallback() {\n      // @ts-ignore\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._routerSubscription?.unsubscribe();\n      this._routerSubscription = undefined;\n      this._lastRouterEvent = undefined;\n      this.__swc_engine.disconnect();\n      this.__swc_engine?.config?.onDisconnected?.(this);\n    }\n\n    async routing(path: string) {\n      await this.__swc_engine.router?.go(path);\n    }\n  };\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import { SwcAppEngine, SwcAttributeConfigType, SwcConfigType } from './SwcAppEngine';\nimport { SwcAppInterface } from '../types';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils, Subscription } from '@dooboostore/core';\nimport { Router, RouterEventType } from '@dooboostore/core-web';\nimport { ON_CONNECTED_SWC_APP_METADATA_KEY, findAllLifecycleMetadata } from '../decorators/lifecycles';\nimport { getSubscribeSwcAppRouteChangeMetadata } from '../decorators/subscribeSwcAppRouteChange';\n\nexport function SwcAppMixin<T extends { new (...args: any[]): HTMLElement }>(Base: T) {\n  //@ts-ignore\n  return class extends Base implements SwcAppInterface {\n    __swc_engine = new SwcAppEngine(this as any);\n    _swc_connected_instance = new Set<any>();\n    _routerSubscription?: Subscription;\n    _lastRouterEvent?: RouterEventType;\n\n    /*\n      사파리 is 일경우\n    <script src=\"https://unpkg.com/@ungap/custom-elements\"></script>\n    이걸사용하는데 is 대응하는거다 그런데 이때 처리되는 순서가  크롬이나 표준에서는 부모부터 만들어지고 자식들이 만들어지는데\n     저 polyfill에서는 자식부터 만들어지고 부모가 만들어진다 is일때 아 .. 이문제때문에 자식이 _connected_safari 에 강제로 자기자식넣어준다\n     */\n    _connected_safari = [];\n    get simpleApplication() {\n      return this.__swc_engine.simpleApplication;\n    }\n    get router() {\n      return this.__swc_engine.router;\n    }\n\n    // constructor() {\n    //   super();\n    //   console.log('cccccccccccccccccccccc');\n    // }\n\n    _invokeRouteChangeSubscribers(instance: any, re: RouterEventType) {\n      const routeChangeSubscribers = getSubscribeSwcAppRouteChangeMetadata(instance);\n      if (routeChangeSubscribers && Array.isArray(routeChangeSubscribers)) {\n        routeChangeSubscribers.forEach((metadata: any) => {\n          const methodName = metadata.propertyKey || metadata;\n          const pathPattern = metadata.pathPattern;\n          const filter = metadata.filter;\n\n          // Path pattern matching (support both string and array)\n          let pathMatched = false;\n          let pathData: any = null;\n\n          if (!pathPattern) {\n            // pathPattern이 없으면 모든 경로 매칭 (와일드카드)\n            pathMatched = true;\n            pathData = {};\n          } else if (Array.isArray(pathPattern)) {\n            // 배열: 하나라도 매칭되면 OK\n            for (const pattern of pathPattern) {\n              const data = SwcUtils.parsePathPattern(pattern, re.path || '/');\n              if (data !== null) {\n                pathMatched = true;\n                pathData = data;\n                break;\n              }\n            }\n          } else {\n            // 문자열\n            pathData = SwcUtils.parsePathPattern(pathPattern, re.path || '/');\n            pathMatched = pathData !== null;\n          }\n\n          // Filter validation\n          const filterPassed = !filter || filter(this.router!);\n\n          // Invoke method if conditions pass\n          if (pathMatched && filterPassed) {\n            instance[methodName]?.({...re, pathData: pathData});\n          }\n        });\n      }\n    }\n\n    _connected(instance: any) {\n      // console.log('appmixin--> connected', this, instance);\n      if (instance) {\n        this._swc_connected_instance.add(instance);\n        if (this.simpleApplication) {\n          this._invokeOnConnectedSwcAppStarted(instance);\n          // Notify current route subscribers immediately after connection\n          if (this.router && this._lastRouterEvent) {\n            this._invokeRouteChangeSubscribers(instance, this._lastRouterEvent);\n          }\n        }\n      }\n    }\n\n    _disconnected(instance: any) {\n      if (instance) {\n        this._swc_connected_instance.delete(instance);\n      }\n    }\n\n    _handleRouteChange(route: RouterEventType) {\n      if (route.triggerPoint === 'end') {\n        // Iterate through all connected component instances\n        this._swc_connected_instance.forEach((instance: any) => {\n          this._invokeRouteChangeSubscribers(instance, route);\n        });\n      }\n\n      // Save last router event\n      this._lastRouterEvent = route;\n    }\n\n    async connect(config?: SwcAttributeConfigType) {\n      const swcConfig = {\n        routeType: 'element',\n        window: config.window,\n        ...config\n      } as SwcConfigType;\n\n      const mode = config?.connectMode || 'direct';\n\n      if (mode === 'direct') {\n        await this.__swc_engine.connect(swcConfig);\n        this.setAttribute('swc-connect-mode', 'direct');\n      } else if (mode === 'swap' && !this.parentNode) {\n        await this.__swc_engine.connect(swcConfig);\n        this.setAttribute('swc-connect-mode', 'direct');\n\n        const clonedApp = this.cloneNode(true) as any;\n        clonedApp.style.display = 'none';\n        this.parentNode.insertBefore(clonedApp, this.nextSibling);\n\n        try {\n          await clonedApp.connect({ ...(config || {}), connectMode: 'direct' });\n          if (this.parentNode) {\n            this.parentNode.removeChild(this);\n          }\n          clonedApp.setAttribute('swc-connect-mode', 'swap');\n          clonedApp.style.display = '';\n        } catch (e) {\n          if (clonedApp.parentNode) {\n            clonedApp.parentNode.removeChild(clonedApp);\n          }\n          throw e;\n        }\n      }\n\n      // 사파리일떄 예외이다 is 일때 polyfill되는데 이떄 부모부터 만들어지는게 아니라 자식부터 만들어진다 그래서 부모가 만들어질때 자식들이 이미 만들어져있어서 부모가 자식들을 등록해주는 형태로 강제로 등록해준다\n      this._connected_safari.forEach((instance: any) => {\n        this._swc_connected_instance.add(instance);\n      });\n      // Invoke @onConnectedSwcApp lifecycle methods on all connected component instances\n      // const hostSet = SwcUtils.getHostSet(this as any);\n      this._swc_connected_instance.forEach((instance: any) => {\n        this._invokeOnConnectedSwcAppStarted(instance);\n      });\n\n      // Safari fix: Manually scan DOM tree and register any SWC components that couldn't find parent\n      // This handles the case where is=\"\" elements get upgraded in child-first order\n      // const allElements = (this as any).querySelectorAll('*');\n      // for (const el of allElements) {\n      //   const isConnected = (el as any).__swc_connected;\n      //   if (!isConnected && typeof (el as any)._resolveWindow === 'function') {\n      //     // Element is an SWC component but hasn't registered with app yet\n      //     try {\n      //       this._connected(el);\n      //       if ((el as any)._invokeOnConnectedSwcAppStarted) {\n      //         this._invokeOnConnectedSwcAppStarted(el);\n      //       }\n      //     } catch (e) {\n      //       console.warn('[SWC] Error registering discovered element:', el.tagName, e);\n      //     }\n      //   }\n      // }\n\n      // Subscribe to router changes after connect\n      if (!this._routerSubscription && this.router) {\n        this._routerSubscription = this.router.observable.subscribe((route: RouterEventType) => {\n          // console.log('Route changed:', route);\n          this._handleRouteChange(route);\n        });\n        // Navigate to initial path if specified\n        const config = this.__swc_engine.config;\n        if (config?.path) {\n          this.router.go(config.path);\n        }\n      }\n    }\n\n    _invokeOnConnectedSwcAppStarted(instance: any) {\n      const startedMethods = findAllLifecycleMetadata(instance, ON_CONNECTED_SWC_APP_METADATA_KEY);\n      if (startedMethods) {\n        for (const m of startedMethods) {\n          instance._invokeLifecycleMethod(m);\n        }\n      }\n    }\n\n    connectedCallback() {\n      // @ts-ignore\n      if (super.connectedCallback) super.connectedCallback();\n\n      const configStr = this.getAttribute('swc-get-application-config');\n      const win = this.ownerDocument?.defaultView || window;\n      if (configStr && win) {\n        try {\n          // console.log('vvvvvvvvvvvvvvvv->>>>', SwcUtils.findNearestSwcHost(this.host), SwcUtils.getHostSet(this.host))\n          const userConfig = FunctionUtils.executeReturn({\n            script: configStr,\n            context: this,\n            args: SwcUtils.getHelperAndHostSet(win, SwcUtils.findNearestSwcHost(this))\n          });\n          this.connect(userConfig);\n        } catch (e) {\n          console.error('[SWC-APP-ENGINE] Script execution failed:', e);\n        }\n      }\n\n      this.__swc_engine?.config?.onConnected?.(this);\n    }\n\n    disconnectedCallback() {\n      // @ts-ignore\n      if (super.disconnectedCallback) super.disconnectedCallback();\n      this._routerSubscription?.unsubscribe();\n      this._routerSubscription = undefined;\n      this._lastRouterEvent = undefined;\n      this.__swc_engine.disconnect();\n      this.__swc_engine?.config?.onDisconnected?.(this);\n    }\n\n    async routing(path: string) {\n      await this.router?.go(path);\n    }\n\n    back(): void {\n      this.router?.back();\n    }\n\n    forward(): void {\n      this.router?.forward();\n    }\n\n    reload(): void {\n      this.router?.reload();\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["config"]
 }

package/dist/esm/elements/SwcAsync.js

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

package/dist/esm/elements/SwcAsync.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcAsync.ts"],
-  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcAsync extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refresh() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) return;\n    const win = this.ownerDocument?.defaultView || window;\n    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n\n    if (result instanceof Promise) {\n      this.render('loading');\n      result\n        .then(v => {\n          this._value = v;\n          this.render('success');\n        })\n        .catch(e => this.render('error'));\n    } else {\n      this._value = result;\n      this.render('success');\n    }\n  }\n\n  private render(state: string) {\n    this.cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    const t = this.content.querySelector(`template[is=\"swc-${state}\"]`) as HTMLTemplateElement;\n    if (t) {\n      const clone = t.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0], $state: state };\n\n      this._nodes.forEach((n, nodeIdx) => {\n        if (n instanceof HTMLElement) (n as any).__swc_host = this;\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      if (portal === this.parentElement) {\n        portal.insertBefore(clone, this.nextSibling);\n      } else {\n        portal.appendChild(clone);\n      }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAExB,MAAO,iBAAiB,oBAAmB;EAAjD,cAAA;;AACU,SAAA,SAAiB,CAAA;AACjB,SAAA,SAAc;EAsFxB;EApFU,iBAAc;AACpB,UAAM,eAAe,KAAK,aAAa,eAAe;AACtD,QAAI,CAAC;AAAc,aAAO,KAAK;AAE/B,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,MAAM,cAAc,cAAc;MACtC,QAAQ;MACR,SAAS;MACT,MAAM,SAAS,oBAAoB,KAAK,IAAI;KAC7C;AAED,QAAI,eAAe;AAAa,aAAO;AACvC,QAAI,OAAO,QAAQ;AAAU,aAAO,IAAI,SAAS,cAAc,GAAG;AAClE,WAAO,KAAK;EACd;EAEQ,sBAAsB,MAAc,MAAS;AACnD,UAAM,SAAS,KAAK,aAAa,IAAI;AACrC,QAAI,CAAC;AAAQ;AACb,kBAAc,QAAQ,EAAE,QAAQ,SAAS,MAAM,KAAI,CAAE;EACvD;EAGQ,UAAO;AACb,UAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,QAAI,CAAC;AAAQ;AACb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,SAAS,cAAc,cAAc,EAAE,QAAQ,SAAS,MAAM,MAAM,SAAS,oBAAoB,KAAK,IAAI,EAAC,CAAE;AAEnH,QAAI,kBAAkB,SAAS;AAC7B,WAAK,OAAO,SAAS;AACrB,aACG,KAAK,OAAI;AACR,aAAK,SAAS;AACd,aAAK,OAAO,SAAS;MACvB,CAAC,EACA,MAAM,OAAK,KAAK,OAAO,OAAO,CAAC;IACpC,OAAO;AACL,WAAK,SAAS;AACd,WAAK,OAAO,SAAS;IACvB;EACF;EAEQ,OAAO,OAAa;AAC1B,SAAK,QAAO;AACZ,UAAM,SAAS,KAAK,eAAc;AAClC,QAAI,CAAC;AAAQ;AAEb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,UAAM,IAAI,KAAK,QAAQ,cAAc,oBAAoB,KAAK,IAAI;AAClE,QAAI,GAAG;AACL,YAAM,QAAQ,EAAE,QAAQ,UAAU,IAAI;AACtC,WAAK,SAAS,MAAM,KAAK,MAAM,UAAU;AACzC,YAAM,WAAW,KAAK,OAAO,OAAO,OAAK,EAAE,aAAa,CAAC;AACzD,YAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ,WAAW,UAAU,eAAe,SAAS,CAAC,GAAG,QAAQ,MAAK;AAE1I,WAAK,OAAO,QAAQ,CAAC,GAAG,YAAW;AACjC,YAAI,aAAa;AAAc,YAAU,aAAa;AACtD,aAAK,sBAAsB,iBAAiB,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,SAAS,YAAY,EAAE,aAAa,EAAC,CAAE;MAC3H,CAAC;AAED,WAAK,sBAAsB,kBAAkB,SAAS;AAEtD,UAAI,WAAW,KAAK,eAAe;AACjC,eAAO,aAAa,OAAO,KAAK,WAAW;MAC7C,OAAO;AACL,eAAO,YAAY,KAAK;MAC1B;IACF;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,oBAAiB;AACf,SAAK,QAAO;EACd;EACA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA5DQ,WAAA;EADP,qBAAqB,cAAc;;;;;",
+  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcAsync extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refresh() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) {\n      this.render('default');\n      return;\n    }\n    const win = this.ownerDocument?.defaultView || window;\n    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n\n    if (result instanceof Promise) {\n      this.render('loading');\n      result\n        .then(v => {\n          this._value = v;\n          this.render('success');\n        })\n        .catch(e => this.render('error'));\n    } else {\n      this._value = result;\n      this.render('success');\n    }\n  }\n\n  private render(state: string) {\n    this.cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    const t = this.content.querySelector(`template[is=\"swc-${state}\"]`) as HTMLTemplateElement;\n    if (t) {\n      const clone = t.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0], $state: state };\n\n      this._nodes.forEach((n, nodeIdx) => {\n        if (n instanceof HTMLElement) (n as any).__swc_host = this;\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      if (portal === this.parentElement) {\n        portal.insertBefore(clone, this.nextSibling);\n      } else {\n        portal.appendChild(clone);\n      }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    console.log('[SwcAsync] connectedCallback called');\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
+  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAExB,MAAO,iBAAiB,oBAAmB;EAAjD,cAAA;;AACU,SAAA,SAAiB,CAAA;AACjB,SAAA,SAAc;EA0FxB;EAxFU,iBAAc;AACpB,UAAM,eAAe,KAAK,aAAa,eAAe;AACtD,QAAI,CAAC;AAAc,aAAO,KAAK;AAE/B,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,MAAM,cAAc,cAAc;MACtC,QAAQ;MACR,SAAS;MACT,MAAM,SAAS,oBAAoB,KAAK,IAAI;KAC7C;AAED,QAAI,eAAe;AAAa,aAAO;AACvC,QAAI,OAAO,QAAQ;AAAU,aAAO,IAAI,SAAS,cAAc,GAAG;AAClE,WAAO,KAAK;EACd;EAEQ,sBAAsB,MAAc,MAAS;AACnD,UAAM,SAAS,KAAK,aAAa,IAAI;AACrC,QAAI,CAAC;AAAQ;AACb,kBAAc,QAAQ,EAAE,QAAQ,SAAS,MAAM,KAAI,CAAE;EACvD;EAGQ,UAAO;AACb,UAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,QAAI,CAAC,QAAQ;AACX,WAAK,OAAO,SAAS;AACrB;IACF;AACA,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,SAAS,cAAc,cAAc,EAAE,QAAQ,SAAS,MAAM,MAAM,SAAS,oBAAoB,KAAK,IAAI,EAAC,CAAE;AAEnH,QAAI,kBAAkB,SAAS;AAC7B,WAAK,OAAO,SAAS;AACrB,aACG,KAAK,OAAI;AACR,aAAK,SAAS;AACd,aAAK,OAAO,SAAS;MACvB,CAAC,EACA,MAAM,OAAK,KAAK,OAAO,OAAO,CAAC;IACpC,OAAO;AACL,WAAK,SAAS;AACd,WAAK,OAAO,SAAS;IACvB;EACF;EAEQ,OAAO,OAAa;AAC1B,SAAK,QAAO;AACZ,UAAM,SAAS,KAAK,eAAc;AAClC,QAAI,CAAC;AAAQ;AAEb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,UAAM,IAAI,KAAK,QAAQ,cAAc,oBAAoB,KAAK,IAAI;AAClE,QAAI,GAAG;AACL,YAAM,QAAQ,EAAE,QAAQ,UAAU,IAAI;AACtC,WAAK,SAAS,MAAM,KAAK,MAAM,UAAU;AACzC,YAAM,WAAW,KAAK,OAAO,OAAO,OAAK,EAAE,aAAa,CAAC;AACzD,YAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ,WAAW,UAAU,eAAe,SAAS,CAAC,GAAG,QAAQ,MAAK;AAE1I,WAAK,OAAO,QAAQ,CAAC,GAAG,YAAW;AACjC,YAAI,aAAa;AAAc,YAAU,aAAa;AACtD,aAAK,sBAAsB,iBAAiB,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,SAAS,YAAY,EAAE,aAAa,EAAC,CAAE;MAC3H,CAAC;AAED,WAAK,sBAAsB,kBAAkB,SAAS;AAEtD,UAAI,WAAW,KAAK,eAAe;AACjC,eAAO,aAAa,OAAO,KAAK,WAAW;MAC7C,OAAO;AACL,eAAO,YAAY,KAAK;MAC1B;IACF;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,oBAAiB;AACf,YAAQ,IAAI,qCAAqC;AACjD,SAAK,QAAO;EACd;EACA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AAhEQ,WAAA;EADP,qBAAqB,cAAc;;;;;",
   "names": []
 }

package/dist/esm/elements/SwcChoose.js

@@ -15,6 +15,7 @@ class SwcChoose extends HTMLTemplateElement {
     super(...arguments);
     this._nodes = [];
     this._value = null;
+    this._previousTemplate = null;
   }
   get value() {
     return this._value;
@@ -23,70 +24,85 @@ class SwcChoose extends HTMLTemplateElement {
     this._value = nv;
     this.render();
   }
-  _resolvePortal() {
-    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;
-  }
   _executeCloneCallback(attr, args) {
     const script = this.getAttribute(attr);
     if (!script)
       return;
     FunctionUtils.execute({ script, context: this, args });
   }
-  refresh() {
-    const script = this.getAttribute("on-get-value");
-    if (!script) {
+  refresh(valueAttr) {
+    valueAttr ?? (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;
+    }
   }
   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 = 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 }
+          });
+          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"]');
+    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);
       this._nodes = Array.from(clone.childNodes);
       const elements = this._nodes.filter((n) => n.nodeType === 1);
       const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
       this._nodes.forEach((n, nodeIdx) => {
-        if (n instanceof HTMLElement)
-          n.__swc_host = this;
         this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+        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);
     }
   }
   cleanup() {
@@ -101,9 +117,9 @@ class SwcChoose extends HTMLTemplateElement {
   }
 }
 __decorate([
-  changedAttributeHost("on-get-value"),
+  changedAttributeHost("value"),
   __metadata("design:type", Function),
-  __metadata("design:paramtypes", []),
+  __metadata("design:paramtypes", [String]),
   __metadata("design:returntype", void 0)
 ], SwcChoose.prototype, "refresh", null);
 export {

package/dist/esm/elements/SwcChoose.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/elements/SwcChoose.ts"],
-  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcChoose extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n\n  get value(): any {\n    return this._value;\n  }\n  set value(nv: any) {\n    this._value = nv;\n    this.render();\n  }\n\n  private _resolvePortal(): Element | null {\n    const portalScript = this.getAttribute('on-get-portal');\n    if (!portalScript) return this.parentElement;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const res = FunctionUtils.executeReturn({\n      script: portalScript,\n      context: this,\n      args: SwcUtils.getHelperAndHostSet(win, this)\n    });\n\n    if (res instanceof HTMLElement) return res;\n    if (typeof res === 'string') return win.document.querySelector(res);\n    return this.parentElement;\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('on-get-value')\n  private refresh() {\n    const script = this.getAttribute('on-get-value');\n    if (!script) {\n      this.value = null;\n      return;\n    }\n    const win = this.ownerDocument?.defaultView || window;\n    const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n    this.value = result;\n  }\n\n  private render() {\n    this.cleanup();\n    const portal = this._resolvePortal();\n    if (!portal) return;\n\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when' && String(t.getAttribute('value')) === String(this._value)) {\n        selected = t;\n        break;\n      }\n    }\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    if (target) {\n      const clone = target.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };\n\n      this._nodes.forEach((n, nodeIdx) => {\n        if (n instanceof HTMLElement) (n as any).__swc_host = this;\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      if (portal === this.parentElement) {\n        portal.insertBefore(clone, this.nextSibling);\n      } else {\n        portal.appendChild(clone);\n      }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
-  "mappings": ";;;;;;;;;AAAA,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,SAAS,qBAAqB;AAExB,MAAO,kBAAkB,oBAAmB;EAAlD,cAAA;;AACU,SAAA,SAAiB,CAAA;AACjB,SAAA,SAAc;EA8FxB;EA5FE,IAAI,QAAK;AACP,WAAO,KAAK;EACd;EACA,IAAI,MAAM,IAAO;AACf,SAAK,SAAS;AACd,SAAK,OAAM;EACb;EAEQ,iBAAc;AACpB,UAAM,eAAe,KAAK,aAAa,eAAe;AACtD,QAAI,CAAC;AAAc,aAAO,KAAK;AAE/B,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,MAAM,cAAc,cAAc;MACtC,QAAQ;MACR,SAAS;MACT,MAAM,SAAS,oBAAoB,KAAK,IAAI;KAC7C;AAED,QAAI,eAAe;AAAa,aAAO;AACvC,QAAI,OAAO,QAAQ;AAAU,aAAO,IAAI,SAAS,cAAc,GAAG;AAClE,WAAO,KAAK;EACd;EAEQ,sBAAsB,MAAc,MAAS;AACnD,UAAM,SAAS,KAAK,aAAa,IAAI;AACrC,QAAI,CAAC;AAAQ;AACb,kBAAc,QAAQ,EAAE,QAAQ,SAAS,MAAM,KAAI,CAAE;EACvD;EAGQ,UAAO;AACb,UAAM,SAAS,KAAK,aAAa,cAAc;AAC/C,QAAI,CAAC,QAAQ;AACX,WAAK,QAAQ;AACb;IACF;AACA,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,SAAS,cAAc,cAAc,EAAE,QAAQ,SAAS,MAAM,MAAM,SAAS,oBAAoB,KAAK,IAAI,EAAC,CAAE;AACnH,SAAK,QAAQ;EACf;EAEQ,SAAM;AACZ,SAAK,QAAO;AACZ,UAAM,SAAS,KAAK,eAAc;AAClC,QAAI,CAAC;AAAQ;AAEb,UAAM,MAAM,KAAK,eAAe,eAAe;AAC/C,UAAM,YAAY,SAAS,oBAAoB,KAAK,IAAI;AAExD,UAAM,YAAY,MAAM,KAAK,KAAK,QAAQ,iBAAiB,UAAU,CAAC;AACtE,QAAI,WAAuC;AAC3C,eAAW,KAAK,WAAW;AACzB,UAAI,EAAE,aAAa,IAAI,MAAM,cAAc,OAAO,EAAE,aAAa,OAAO,CAAC,MAAM,OAAO,KAAK,MAAM,GAAG;AAClG,mBAAW;AACX;MACF;IACF;AACA,UAAM,SAAS,YAAa,KAAK,QAAQ,cAAc,8BAA8B;AAErF,QAAI,QAAQ;AACV,YAAM,QAAQ,OAAO,QAAQ,UAAU,IAAI;AAC3C,WAAK,SAAS,MAAM,KAAK,MAAM,UAAU;AACzC,YAAM,WAAW,KAAK,OAAO,OAAO,OAAK,EAAE,aAAa,CAAC;AACzD,YAAM,YAAY,EAAE,GAAG,WAAW,QAAQ,KAAK,QAAQ,QAAQ,KAAK,QAAQ,WAAW,UAAU,eAAe,SAAS,CAAC,EAAC;AAE3H,WAAK,OAAO,QAAQ,CAAC,GAAG,YAAW;AACjC,YAAI,aAAa;AAAc,YAAU,aAAa;AACtD,aAAK,sBAAsB,iBAAiB,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,SAAS,YAAY,EAAE,aAAa,EAAC,CAAE;MAC3H,CAAC;AAED,WAAK,sBAAsB,kBAAkB,SAAS;AAEtD,UAAI,WAAW,KAAK,eAAe;AACjC,eAAO,aAAa,OAAO,KAAK,WAAW;MAC7C,OAAO;AACL,eAAO,YAAY,KAAK;MAC1B;IACF;EACF;EAEQ,UAAO;AACb,SAAK,OAAO,QAAQ,OAAK,EAAE,eAAe,YAAY,CAAC,CAAC;AACxD,SAAK,SAAS,CAAA;EAChB;EAEA,oBAAiB;AACf,SAAK,QAAO;EACd;EACA,uBAAoB;AAClB,SAAK,QAAO;EACd;;AA5DQ,WAAA;EADP,qBAAqB,cAAc;;;;;",
+  "sourcesContent": ["import { changedAttributeHost } from '../decorators/changedAttributeHost';\nimport { SwcUtils } from '../utils/Utils';\nimport { FunctionUtils } from '@dooboostore/core';\n\nexport class SwcChoose extends HTMLTemplateElement {\n  private _nodes: Node[] = [];\n  private _value: any = null;\n  private _previousTemplate: HTMLTemplateElement | null = null;\n\n  get value(): any {\n    return this._value;\n  }\n  set value(nv: any) {\n    this._value = nv;\n    this.render();\n  }\n\n  private _executeCloneCallback(attr: string, args: any) {\n    const script = this.getAttribute(attr);\n    if (!script) return;\n    FunctionUtils.execute({ script, context: this, args });\n  }\n\n  @changedAttributeHost('value')\n  private refresh(valueAttr?: string | null) {\n    valueAttr ??= this.getAttribute('value');\n    if (valueAttr === null) {\n      this.value = null;\n      return;\n    }\n\n    // {{ }} 브레이스로 감싸진 값은 스크립트 실행\n    if (valueAttr.startsWith('{{') && valueAttr.endsWith('}}')) {\n      const script = valueAttr.slice(2, -2).trim();\n      const win = this.ownerDocument?.defaultView || window;\n      const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });\n      this.value = result;\n    } else {\n      // 일반 문자열 값\n      this.value = valueAttr;\n    }\n  }\n\n  private render() {\n    const win = this.ownerDocument?.defaultView || window;\n    const helperSet = SwcUtils.getHelperAndHostSet(win, this);\n    const templates = Array.from(this.content.querySelectorAll('template'));\n    let selected: HTMLTemplateElement | null = null;\n\n    for (const t of templates) {\n      if (t.getAttribute('is') === 'swc-when') {\n        let matches = false;\n        const value = t.getAttribute('value') || '';\n\n        // {{ }} 브레이스로 감싸진 값은 스크립트 실행\n        if (value.startsWith('{{') && value.endsWith('}}')) {\n          const script = value.slice(2, -2).trim();\n          const result = FunctionUtils.executeReturn({\n            script,\n            context: t,\n            args: { ...helperSet, $value: this._value }\n          });\n          // console.log('rrrrrrrrrrrrrr', result);\n          matches = result === true;\n        } else {\n          // 일반 문자열 비교 (기존 방식)\n          matches = String(value) === String(this._value);\n        }\n\n        if (matches) {\n          selected = t;\n          break;\n        }\n      }\n    }\n\n    const target = selected || (this.content.querySelector('template[is=\"swc-otherwise\"]') as HTMLTemplateElement);\n\n    // skip-if-same attribute가 있고 이전과 같은 template이면 렌더링 스킵\n    // 최상위 skip-if-same 또는 각 when/otherwise의 skip-if-same 체크\n    const targetHasSkipIfSame = target?.hasAttribute('skip-if-same');\n    const shouldSkip = (this.hasAttribute('skip-if-same') || targetHasSkipIfSame) && this._previousTemplate === target;\n    if (shouldSkip) {\n      return;\n    }\n\n    this.cleanup();\n    this._previousTemplate = target;\n\n    if (target) {\n      const clone = target.content.cloneNode(true) as DocumentFragment;\n      this._nodes = Array.from(clone.childNodes);\n      const elements = this._nodes.filter(n => n.nodeType === 1) as HTMLElement[];\n      const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };\n\n      // 복제된 최상위 요소들은 SwcChoose의 직접 자식이 될 것이므로 __swc_host 설정 안 함\n      this._nodes.forEach((n, nodeIdx) => {\n        // if (n instanceof HTMLElement) (n as any).__swc_host = this;  // 제거: 부모 체인 유지\n        this._executeCloneCallback('on-clone-node', { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });\n\n        // Attribute {{ }} 치환 - HTML string 차원에서 동적 치환\n        if (n instanceof HTMLElement) {\n          Array.from(n.attributes).forEach(attr => {\n            const value = attr.value || '';\n            if (value.startsWith('{{') && value.endsWith('}}')) {\n              const script = value.slice(2, -2).trim();\n              const result = FunctionUtils.executeReturn({\n                script,\n                context: n,\n                args: { ...groupArgs, $value: this._value }\n              });\n              n.setAttribute(attr.name, String(result));\n            }\n          });\n        }\n      });\n\n      this._executeCloneCallback('on-clone-nodes', groupArgs);\n\n      this.parentElement?.insertBefore(clone, this.nextSibling);\n      // if (portal === this.parentElement) {\n      //   portal.insertBefore(clone, this.nextSibling);\n      // } else {\n      //   portal.appendChild(clone);\n      // }\n    }\n  }\n\n  private cleanup() {\n    this._nodes.forEach(n => n.parentElement?.removeChild(n));\n    this._nodes = [];\n  }\n\n  connectedCallback() {\n    this.refresh();\n  }\n  disconnectedCallback() {\n    this.cleanup();\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/elements/register.js

@@ -335,6 +335,7 @@ const registerAllElements = (w) => {
       super(...arguments);
       this._nodes = [];
       this._value = null;
+      this._previousTemplate = null;
     }
     get value() {
       return this._value;
@@ -343,70 +344,85 @@ const registerAllElements = (w) => {
       this._value = nv;
       this.render();
     }
-    _resolvePortal() {
-      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;
-    }
     _executeCloneCallback(attr, args) {
       const script = this.getAttribute(attr);
       if (!script)
         return;
       FunctionUtils.execute({ script, context: this, args });
     }
-    refresh() {
-      const script = this.getAttribute("on-get-value");
-      if (!script) {
+    refresh(valueAttr) {
+      valueAttr ?? (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;
+      }
     }
     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 = 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 }
+            });
+            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"]');
+      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);
         this._nodes = Array.from(clone.childNodes);
         const elements = this._nodes.filter((n) => n.nodeType === 1);
         const groupArgs = { ...helperSet, $value: this._value, $nodes: this._nodes, $elements: elements, $firstElement: elements[0] };
         this._nodes.forEach((n, nodeIdx) => {
-          if (n instanceof HTMLElement)
-            n.__swc_host = this;
           this._executeCloneCallback("on-clone-node", { ...groupArgs, $node: n, $nodeIndex: nodeIdx, $isElement: n.nodeType === 1 });
+          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);
       }
     }
     cleanup() {
@@ -421,9 +437,9 @@ const registerAllElements = (w) => {
     }
   };
   __decorate([
-    changedAttributeHost("on-get-value"),
+    changedAttributeHost("value"),
     __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
+    __metadata("design:paramtypes", [String]),
     __metadata("design:returntype", void 0)
   ], SwcChoose.prototype, "refresh", null);
   SwcChoose = __decorate([
@@ -459,8 +475,10 @@ const registerAllElements = (w) => {
     }
     refresh() {
       const script = this.getAttribute("on-get-value");
-      if (!script)
+      if (!script) {
+        this.render("default");
         return;
+      }
       const win = this.ownerDocument?.defaultView || window;
       const result = FunctionUtils.executeReturn({ script, context: this, args: SwcUtils.getHelperAndHostSet(win, this) });
       if (result instanceof Promise) {
@@ -505,6 +523,7 @@ const registerAllElements = (w) => {
       this._nodes = [];
     }
     connectedCallback() {
+      console.log("[SwcAsync] connectedCallback called");
       this.refresh();
     }
     disconnectedCallback() {
@@ -805,6 +824,79 @@ const registerAllElements = (w) => {
   SwcAppBody = __decorate([
     elementDefine("swc-app-body", { extends: "body", window: w })
   ], SwcAppBody);
+  return {
+    // Sub Templates
+    SwcLoading,
+    SwcError,
+    SwcSuccess,
+    SwcWhen,
+    SwcOtherwise,
+    SwcDefault,
+    // Core Elements
+    SwcApp,
+    SwcIf,
+    SwcLoop,
+    SwcChoose,
+    SwcAsync,
+    // App Elements
+    SwcAppAnchor,
+    SwcAppArea,
+    SwcAppAudio,
+    SwcAppBase,
+    SwcAppButton,
+    SwcAppCanvas,
+    SwcAppData,
+    SwcAppDataList,
+    SwcAppDetails,
+    SwcAppDialog,
+    SwcAppDiv,
+    SwcAppDList,
+    SwcAppEmbed,
+    SwcAppFieldSet,
+    SwcAppForm,
+    SwcAppHR,
+    SwcAppIFrame,
+    SwcAppImage,
+    SwcAppInput,
+    SwcAppLabel,
+    SwcAppLegend,
+    SwcAppLI,
+    SwcAppLink,
+    SwcAppMap,
+    SwcAppMeta,
+    SwcAppMeter,
+    SwcAppMod,
+    SwcAppObject,
+    SwcAppOList,
+    SwcAppOptGroup,
+    SwcAppOption,
+    SwcAppOutput,
+    SwcAppParagraph,
+    SwcAppParam,
+    SwcAppPicture,
+    SwcAppPre,
+    SwcAppProgress,
+    SwcAppQuote,
+    SwcAppScript,
+    SwcAppSelect,
+    SwcAppSlot,
+    SwcAppSource,
+    SwcAppSpan,
+    SwcAppStyle,
+    SwcAppTable,
+    SwcAppTableSection,
+    SwcAppTableCell,
+    SwcAppTemplate,
+    SwcAppTextArea,
+    SwcAppTime,
+    SwcAppTitle,
+    SwcAppTableRow,
+    SwcAppTrack,
+    SwcAppUList,
+    SwcAppVideo,
+    SwcAppHeading,
+    SwcAppBody
+  };
 };
 export {
   registerAllElements