@dooboostore/simple-web-component 1.0.16 → 1.0.17

package/dist/esm-bundle/dooboostore-simple-web-component.esm.js

@@ -1116,32 +1116,33 @@ var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
 var import_reflect_metadata = __toESM(require_Reflect(), 1);
 
 // ../core/dist/esm/reflect/ReflectUtils.js
-var ReflectUtils = {
-  getParameterTypes: (target, propertyKey) => {
+var ReflectUtils;
+((ReflectUtils2) => {
+  ReflectUtils2.getParameterTypes = (target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata("design:paramtypes", target, propertyKey) || [];
     } else {
       return Reflect.getMetadata("design:paramtypes", target) || [];
     }
-  },
-  getReturnType: (target, propertyKey) => {
+  };
+  ReflectUtils2.getReturnType = (target, propertyKey) => {
     return Reflect.getMetadata("design:returntype", target, propertyKey);
-  },
-  getType: (target, propertyKey) => {
+  };
+  ReflectUtils2.getType = (target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata("design:type", target, propertyKey);
     } else {
       return Reflect.getMetadata("design:type", target);
     }
-  },
-  getMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.getMetadata = (metadataKey, target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getMetadata(metadataKey, target, propertyKey);
     } else {
       return Reflect.getMetadata(metadataKey, target);
     }
-  },
-  findMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findMetadata = (metadataKey, target, propertyKey) => {
     if (target == null) return void 0;
     let searchTarget = typeof target === "object" && typeof target !== "function" ? target.constructor : target;
     while (searchTarget && searchTarget !== Object) {
@@ -1152,11 +1153,8 @@ var ReflectUtils = {
       if (searchTarget === target) break;
     }
     return void 0;
-  },
-  /**
-   * 프로토타입 체인의 모든 메타데이터를 수집하여 리스트로 반환합니다. (부모 -> 자식 순)
-   */
-  findAllMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findAllMetadata = (metadataKey, target, propertyKey) => {
     const results = [];
     if (target == null) return results;
     let searchTarget = typeof target === "object" && typeof target !== "function" ? target.constructor : target;
@@ -1168,24 +1166,18 @@ var ReflectUtils = {
       if (searchTarget === target) break;
     }
     return results;
-  },
-  /**
-   * 모든 메타데이터(배열 형태)를 수집하여 하나의 배열로 합칩니다. (부모 -> 자식 순)
-   */
-  findAllMetadataFlatten: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.findAllMetadataFlatten = (metadataKey, target, propertyKey) => {
     const results = [];
-    const metaList = ReflectUtils.findAllMetadata(metadataKey, target, propertyKey);
+    const metaList = (0, ReflectUtils2.findAllMetadata)(metadataKey, target, propertyKey);
     metaList.forEach((data) => {
       if (Array.isArray(data)) results.push(...data);
     });
     return [...new Set(results)];
-  },
-  /**
-   * 프로토타입 체인의 모든 메타데이터(맵 형태)를 수집하여 합칩니다. (부모 -> 자식 순)
-   */
-  findAllMapMetadata: (metadataKey, target) => {
+  };
+  ReflectUtils2.findAllMapMetadata = (metadataKey, target) => {
     const finalMap = /* @__PURE__ */ new Map();
-    const metaList = ReflectUtils.findAllMetadata(metadataKey, target);
+    const metaList = (0, ReflectUtils2.findAllMetadata)(metadataKey, target);
     metaList.forEach((data) => {
       if (data instanceof Map) {
         data.forEach((values, key) => {
@@ -1196,31 +1188,69 @@ var ReflectUtils = {
       }
     });
     return finalMap;
-  },
-  getMetadataKeys: (target) => {
+  };
+  ReflectUtils2.getMetadataKeys = (target) => {
     return Reflect.getMetadataKeys(target);
-  },
-  getOwnMetadata: (metadataKey, target, propertyKey) => {
+  };
+  ReflectUtils2.getOwnMetadata = (metadataKey, target, propertyKey) => {
     if (propertyKey) {
       return Reflect.getOwnMetadata(metadataKey, target, propertyKey);
     } else {
       return Reflect.getOwnMetadata(metadataKey, target);
     }
-  },
-  getMetadatas: (target) => {
-    return ReflectUtils.getMetadataKeys(target).map((it) => ReflectUtils.getMetadata(it, target));
-  },
-  metadata: (metadataKey, data) => {
+  };
+  ReflectUtils2.getMetadatas = (target) => {
+    return (0, ReflectUtils2.getMetadataKeys)(target).map((it) => (0, ReflectUtils2.getMetadata)(it, target));
+  };
+  ReflectUtils2.metadata = (metadataKey, data) => {
     return Reflect.metadata(metadataKey, data);
-  },
-  defineMetadata: (metadataKey, value, target, propertyKey) => {
+  };
+  ReflectUtils2.defineMetadata = (metadataKey, value, target, propertyKey) => {
     if (propertyKey && Reflect.defineMetadata) {
       Reflect.defineMetadata(metadataKey, value, target, propertyKey);
     } else if (Reflect.defineMetadata) {
       Reflect.defineMetadata(metadataKey, value, target);
     }
-  }
-};
+  };
+})(ReflectUtils || (ReflectUtils = {}));
+
+// ../core/dist/esm/function/FunctionUtils.js
+var FunctionUtils;
+((FunctionUtils2) => {
+  FunctionUtils2.getParameterNames = (func, property) => {
+    if (typeof func === "object" && property) {
+      func = func[property];
+    }
+    return new RegExp("(?:" + func.name + "\\s*|^)\\s*\\((.*?)\\)").exec(func.toString().replace(/\n/g, ""))?.[1].replace(/\/\*.*?\*\//g, "").replace(/ /g, "").split(",") ?? [];
+  };
+  FunctionUtils2.evalScript = (script, obj) => {
+    try {
+      if (script && obj) {
+        return Function(`"use strict";
+                    ${script}
+                    `).bind(obj)();
+      } else if (script) {
+        return new Function("return " + script)();
+      } else {
+        return null;
+      }
+    } catch (e) {
+      return null;
+    }
+  };
+  FunctionUtils2.execute = (params) => {
+    const { script, context, args = {} } = params;
+    const argNames = Object.keys(args);
+    const argValues = Object.values(args);
+    return new Function(...argNames, script).apply(context, argValues);
+  };
+  FunctionUtils2.executeReturn = (params) => {
+    const { script, context, args = {} } = params;
+    const argNames = Object.keys(args);
+    const argValues = Object.values(args);
+    return new Function(...argNames, `return ${script}`).apply(context, argValues);
+  };
+})(FunctionUtils || (FunctionUtils = {}));
 
 // src/decorators/innerHtml.ts
 var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
@@ -1380,8 +1410,27 @@ var findAllSetAttributeMetadata = (target) => {
 
 // src/utils/Utils.ts
 var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-var SwcUtils = class {
-  static getValueByPath(obj, path, rootName) {
+var SwcUtils;
+((SwcUtils2) => {
+  SwcUtils2.getHelperSet = (win) => {
+    const doc = win.document;
+    return {
+      $d: doc,
+      $w: win,
+      $q: (sel, root) => (root ?? doc).querySelector(sel),
+      $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
+      $qi: (id, root) => (root ?? doc).getElementById(id)
+    };
+  };
+  SwcUtils2.getHelperAndHostSet = (win, el) => {
+    const helperSet = (0, SwcUtils2.getHelperSet)(win);
+    const hostSet = (0, SwcUtils2.getHostSet)(el);
+    return {
+      ...helperSet,
+      ...hostSet
+    };
+  };
+  SwcUtils2.getValueByPath = (obj, path, rootName) => {
     if (!obj || !path) return SWC_NOT_FOUND;
     const parts = path.split(".");
     let current = obj;
@@ -1390,49 +1439,66 @@ var SwcUtils = class {
       current = current[part];
     }
     return current;
-  }
-  static findNearestSwcHost(el) {
-    let current = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
-    current = current?.parentElement || current?.getRootNode()?.host;
-    while (current) {
+  };
+  SwcUtils2.findNearestSwcHost = (el) => {
+    if (el.__swc_host) return el.__swc_host;
+    let current = el.parentElement || el.getRootNode?.()?.host;
+    while (current && current !== document && current !== window) {
+      if (current.__swc_host) return current.__swc_host;
       if (getElementConfig(current)) return current;
-      current = current.parentElement || current?.getRootNode()?.host;
+      current = current.parentElement || current.getRootNode?.()?.host;
     }
     return void 0;
-  }
-  /**
-   * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
-   */
-  static findAllSwcHosts(el) {
+  };
+  SwcUtils2.findAllSwcHosts = (el) => {
     const hosts = [];
-    let current = this.findNearestSwcHost(el);
+    let current = (0, SwcUtils2.findNearestSwcHost)(el);
     while (current) {
       hosts.push(current);
-      current = this.findNearestSwcHost(current);
+      current = (0, SwcUtils2.findNearestSwcHost)(current);
     }
     return hosts.reverse();
-  }
-  static getHosts(el) {
-    return [...this.findAllSwcHosts(el), el];
-  }
-  static getHost(el) {
-    return el;
-  }
-  static getAppHosts(el) {
-    const hosts = this.getHosts(el);
+  };
+  SwcUtils2.getHosts = (el) => {
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    if (getElementConfig(el)) return [...ancestors, el];
+    return ancestors;
+  };
+  SwcUtils2.getHost = (el) => {
+    if (getElementConfig(el)) return el;
+    return (0, SwcUtils2.findNearestSwcHost)(el);
+  };
+  SwcUtils2.getAppHosts = (el) => {
+    const hosts = (0, SwcUtils2.getHosts)(el);
     return hosts.filter((host) => host.tagName.toLowerCase() === "swc-app" || host.getAttribute("is")?.startsWith("swc-app-"));
-  }
-  static getAppHost(el) {
-    const appHosts = this.getAppHosts(el);
+  };
+  SwcUtils2.getAppHost = (el) => {
+    const appHosts = (0, SwcUtils2.getAppHosts)(el);
     const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
     return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
-  }
-  static getHostSet(el) {
-    const ancestors = this.findAllSwcHosts(el);
-    const $host = el;
-    const $hosts = [...ancestors, $host];
-    const $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
-    const $firstHost = ancestors.length > 0 ? ancestors[0] : null;
+  };
+  SwcUtils2.getHostSet = (el) => {
+    const isSwc = !!getElementConfig(el);
+    const ancestors = (0, SwcUtils2.findAllSwcHosts)(el);
+    let $host;
+    let $parentHost;
+    if (isSwc) {
+      $host = el;
+      $parentHost = ancestors.length > 0 ? ancestors[ancestors.length - 1] : null;
+    } else {
+      $host = ancestors.length > 0 ? ancestors[ancestors.length - 1] : el;
+      $parentHost = ancestors.length > 1 ? ancestors[ancestors.length - 2] : null;
+    }
+    const $hosts = isSwc ? [...ancestors, el] : ancestors;
+    const $firstHost = $hosts.length > 0 ? $hosts[0] : null;
+    const loopContext = {};
+    let curr = el;
+    while (curr && curr !== document.documentElement) {
+      if (curr.__swc_loop_context) {
+        Object.assign(loopContext, curr.__swc_loop_context);
+      }
+      curr = curr.parentElement || curr.getRootNode().host;
+    }
     const $appHosts = $hosts.filter((h) => h.tagName.toLowerCase() === "swc-app" || h.getAttribute("is")?.startsWith("swc-app-"));
     const $appHost = $appHosts.length > 0 ? $appHosts[$appHosts.length - 1] === el ? $appHosts.length > 1 ? $appHosts[$appHosts.length - 2] : null : $appHosts[$appHosts.length - 1] : null;
     const $firstAppHost = $appHosts.length > 0 ? $appHosts[0] : null;
@@ -1445,10 +1511,11 @@ var SwcUtils = class {
       $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost: $appHost
+      $lastAppHost: $appHost,
+      ...loopContext
     };
-  }
-};
+  };
+})(SwcUtils || (SwcUtils = {}));
 
 // src/config/config.ts
 var HTML_TAG_ENTRIES = [
@@ -1571,6 +1638,7 @@ var InjectSituationType = /* @__PURE__ */ ((InjectSituationType2) => {
 
 // src/decorators/elementDefine.ts
 var ELEMENT_CONFIG_KEY = Symbol("simple-web-component:element-config");
+var globalDelegatedRoots = /* @__PURE__ */ new WeakSet();
 function buildEnv(configWindow) {
   const win = configWindow || (typeof window !== "undefined" ? window : void 0);
   const doc = win?.document;
@@ -1579,13 +1647,7 @@ function buildEnv(configWindow) {
     if (win?.[cls])
       builtInTagMap.set(win[cls], tag);
   }
-  const domHelpers = {
-    $d: doc,
-    $w: win,
-    $q: (sel, root) => (root ?? doc).querySelector(sel),
-    $qa: (sel, root) => Array.from((root ?? doc).querySelectorAll(sel)),
-    $qi: (id, root) => (root ?? doc).getElementById(id)
-  };
+  const domHelpers = SwcUtils.getHelperSet(win);
   return { win, doc, builtInTagMap, domHelpers };
 }
 var getHandlers = (inst) => {
@@ -1597,8 +1659,6 @@ var elementDefine = (inConfig) => (constructor) => {
   const config = typeof inConfig === "string" ? { name: inConfig } : inConfig;
   const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
   config.window = win;
-  const SWC_DOM_HELPER_KEYS = Object.keys(SWC_DOM_HELPERS);
-  const SWC_DOM_HELPER_VALS = () => SWC_DOM_HELPER_KEYS.map((k) => SWC_DOM_HELPERS[k]);
   let extendsTagName = config.extends;
   if (!extendsTagName) {
     let proto = constructor;
@@ -1624,9 +1684,7 @@ var elementDefine = (inConfig) => (constructor) => {
       if (script) {
         try {
           const args = { ...hostSet, ...SWC_DOM_HELPERS, ...extraArgs };
-          const argNames = Object.keys(args);
-          const argValues = Object.values(args);
-          new Function(...argNames, script).apply(this, argValues);
+          FunctionUtils.execute({ script, context: this, args });
         } catch (e) {
           console.error(`[SWC] Failed to execute ${attrName}:`, e);
         }
@@ -1668,9 +1726,13 @@ var elementDefine = (inConfig) => (constructor) => {
         el.removeEventListener(eventName, oldHandler);
       const handler = (event) => {
         const hostSet = SwcUtils.getHostSet(el);
-        const argNames = Object.keys(hostSet);
-        const argValues = Object.values(hostSet);
-        new Function("event", "$data", ...argNames, ...SWC_DOM_HELPER_KEYS, script).call(el, event, event.detail, ...argValues, ...SWC_DOM_HELPER_VALS());
+        const args = {
+          event,
+          $data: event.detail,
+          ...hostSet,
+          ...SWC_DOM_HELPERS
+        };
+        FunctionUtils.execute({ script, context: el, args });
       };
       el.addEventListener(eventName, handler);
       handlers.set(attrName, handler);
@@ -1679,6 +1741,7 @@ var elementDefine = (inConfig) => (constructor) => {
       super(...args);
       this._swcId = Math.random().toString(36).substring(2, 11);
       this._emitHandlers = /* @__PURE__ */ new Map();
+      this._boundListeners = [];
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-constructor", hostSet);
       if (innerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
@@ -1689,6 +1752,9 @@ var elementDefine = (inConfig) => (constructor) => {
       return mergedObservedAttributes;
     }
     async connectedCallback() {
+      const conf = getElementConfig(this);
+      const currentWin = conf?.window || window;
+      const currentDoc = currentWin.document;
       const hostSet = SwcUtils.getHostSet(this);
       this._executeSwcScript("swc-on-before-connected", hostSet);
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_CONNECTED_METADATA_KEY);
@@ -1714,17 +1780,87 @@ var elementDefine = (inConfig) => (constructor) => {
         if (lContent)
           this.innerHTML = lContent;
       }
+      const createDelegationHandler = (delegateHost) => (event) => {
+        if (event.__swc_handled)
+          return;
+        const path = event.composedPath();
+        const type = event.type;
+        const attrName = `swc-on-${type}`;
+        for (const node of path) {
+          if (node === delegateHost)
+            break;
+          if (!(node instanceof HTMLElement))
+            continue;
+          const script = node.getAttribute?.(attrName);
+          if (script && !getElementConfig(node)) {
+            const host = SwcUtils.findNearestSwcHost(node);
+            if (host) {
+              const childHostSet = SwcUtils.getHostSet(node);
+              const args = {
+                event,
+                $data: event.detail,
+                ...childHostSet,
+                ...SWC_DOM_HELPERS
+              };
+              FunctionUtils.execute({ script, context: node, args });
+              event.__swc_handled = true;
+              break;
+            }
+          }
+        }
+      };
+      DOM_EVENT_NAMES.forEach((type) => {
+        this.addEventListener(type, createDelegationHandler(this));
+        this._boundListeners.push({ target: this, type, handler: createDelegationHandler(this) });
+      });
+      const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
+      if (!hasParentHost) {
+        const root = this.getRootNode();
+        if (!globalDelegatedRoots.has(root)) {
+          DOM_EVENT_NAMES.forEach((type) => {
+            const handler = createDelegationHandler(root);
+            root.addEventListener(type, handler);
+          });
+          globalDelegatedRoots.add(root);
+        }
+      }
       addEventListenerList.forEach((meta) => {
         const { selector, type, options } = meta;
-        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
-        if (delegate && selector && selector !== ":host") {
+        const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate, removeOnDisconnected } = options;
+        const opts = { capture, once, passive };
+        const bindTargets = [];
+        if (selector === ":window") {
+          bindTargets.push(currentWin);
+        } else if (selector === ":document") {
+          bindTargets.push(currentDoc);
+        } else if (selector === ":parentHost") {
+          if (hostSet.$parentHost)
+            bindTargets.push(hostSet.$parentHost);
+        } else if (selector === ":appHost") {
+          if (hostSet.$appHost)
+            bindTargets.push(hostSet.$appHost);
+        } else if (selector === ":firstHost") {
+          if (hostSet.$firstHost)
+            bindTargets.push(hostSet.$firstHost);
+        } else if (selector === ":lastHost") {
+          if (hostSet.$lastHost)
+            bindTargets.push(hostSet.$lastHost);
+        } else if (selector === ":firstAppHost") {
+          if (hostSet.$firstAppHost)
+            bindTargets.push(hostSet.$firstAppHost);
+        } else if (selector === ":lastAppHost") {
+          if (hostSet.$lastAppHost)
+            bindTargets.push(hostSet.$lastAppHost);
+        } else if (!selector || selector === ":host") {
+          bindTargets.push(this);
+        } else if (delegate) {
           const bindRoots = [];
           const r = root || "auto";
-          if (r === "auto") {
+          if (r === "auto")
             bindRoots.push(this.shadowRoot || this);
-          } else if (r === "light") {
+          else if (r === "light")
             bindRoots.push(this);
-          } else if (r === "shadow") {
+          else if (r === "shadow") {
             if (this.shadowRoot)
               bindRoots.push(this.shadowRoot);
           } else if (r === "all") {
@@ -1732,62 +1868,61 @@ var elementDefine = (inConfig) => (constructor) => {
             if (this.shadowRoot)
               bindRoots.push(this.shadowRoot);
           }
-          bindRoots.forEach((bindRoot) => {
+          bindRoots.forEach((br) => {
             const handler = (event) => {
-              const target = event.target;
-              const matchedEl = target.closest(selector);
-              if (matchedEl && bindRoot.contains(matchedEl)) {
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
                 if (stopPropagation)
                   event.stopPropagation();
                 if (stopImmediatePropagation)
                   event.stopImmediatePropagation();
                 if (preventDefault)
                   event.preventDefault();
-                const hostSet2 = SwcUtils.getHostSet(this);
-                this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2, matchedEl]);
+                const currentHostSet = SwcUtils.getHostSet(this);
+                this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
               }
             };
-            bindRoot.addEventListener(type, handler, { capture, once, passive });
+            br.addEventListener(type, handler, opts);
+            const self2 = this;
+            if (removeOnDisconnected === true || br !== self2 && br !== self2.shadowRoot) {
+              this._boundListeners.push({ target: br, type, handler, options: opts });
+            }
           });
         } else {
-          const targetEls = [];
-          if (!selector || selector === ":host") {
-            targetEls.push(this);
-          } else {
-            const searchRoots = [];
-            const r = root || "auto";
-            if (r === "auto") {
-              searchRoots.push(this.shadowRoot || this);
-            } else if (r === "light") {
-              searchRoots.push(this);
-            } else if (r === "shadow") {
-              if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
-            } else if (r === "all") {
-              searchRoots.push(this);
-              if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
-            }
-            searchRoots.forEach((sr) => {
-              const found = sr.querySelectorAll(selector);
-              found.forEach((el) => targetEls.push(el));
-            });
+          const searchRoots = [];
+          const r = root || "auto";
+          if (r === "auto")
+            searchRoots.push(this.shadowRoot || this);
+          else if (r === "light")
+            searchRoots.push(this);
+          else if (r === "shadow") {
+            if (this.shadowRoot)
+              searchRoots.push(this.shadowRoot);
+          } else if (r === "all") {
+            searchRoots.push(this);
+            if (this.shadowRoot)
+              searchRoots.push(this.shadowRoot);
           }
-          targetEls.forEach((el) => {
-            const handler = (event) => {
-              if (stopPropagation)
-                event.stopPropagation();
-              if (stopImmediatePropagation)
-                event.stopImmediatePropagation();
-              if (preventDefault)
-                event.preventDefault();
-              const hostSet2 = SwcUtils.getHostSet(this);
-              this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
-            };
-            const opts = { capture, once, passive };
-            el.addEventListener(type, handler, opts);
+          searchRoots.forEach((sr) => {
+            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
           });
         }
+        bindTargets.forEach((target) => {
+          const handler = (event) => {
+            if (stopPropagation)
+              event.stopPropagation();
+            if (stopImmediatePropagation)
+              event.stopImmediatePropagation();
+            if (preventDefault)
+              event.preventDefault();
+            const currentHostSet = SwcUtils.getHostSet(this);
+            this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet]);
+          };
+          target.addEventListener(type, handler, opts);
+          if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
+            this._boundListeners.push({ target, type, handler, options: opts });
+          }
+        });
       });
       if (super.connectedCallback)
         await super.connectedCallback();
@@ -1805,6 +1940,8 @@ var elementDefine = (inConfig) => (constructor) => {
       const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
       if (bMethods)
         bMethods.forEach((m) => this._invokeLifecycleMethod(m, hostSet));
+      this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
+      this._boundListeners = [];
       if (super.disconnectedCallback)
         super.disconnectedCallback();
       const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
@@ -1913,6 +2050,26 @@ function query(selector, options = {}) {
     queries.push({ selector, options, propertyKey });
     Object.defineProperty(target, propertyKey, {
       get() {
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ":parentHost")
+          return hostSet.$parentHost;
+        if (selector === ":appHost")
+          return hostSet.$appHost;
+        if (selector === ":firstHost")
+          return hostSet.$firstHost;
+        if (selector === ":lastHost")
+          return hostSet.$lastHost;
+        if (selector === ":firstAppHost")
+          return hostSet.$firstAppHost;
+        if (selector === ":lastAppHost")
+          return hostSet.$lastAppHost;
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+        if (selector === ":window")
+          return win;
+        if (selector === ":document")
+          return doc;
         if (!selector || selector === ":host")
           return this;
         const r = options.root || "auto";
@@ -1953,6 +2110,18 @@ function queryAll(selector, options = {}) {
     queries.push({ selector, options, propertyKey });
     Object.defineProperty(target, propertyKey, {
       get() {
+        const hostSet = SwcUtils.getHostSet(this);
+        if (selector === ":hosts")
+          return hostSet.$hosts;
+        if (selector === ":appHosts")
+          return hostSet.$appHosts;
+        const config = getElementConfig(this);
+        const win = config?.window || window;
+        const doc = win.document;
+        if (selector === ":window")
+          return [win];
+        if (selector === ":document")
+          return [doc];
         if (!selector || selector === ":host")
           return [this];
         const r = options.root || "auto";
@@ -7597,7 +7766,7 @@ var SwcAppEngine = class {
     const configStr = this.host.getAttribute("swc-get-application-config");
     if (!configStr) return;
     try {
-      const userConfig = new Function(`return ${configStr}`).apply(this.host);
+      const userConfig = FunctionUtils.executeReturn({ script: configStr, context: this.host });
       if (userConfig && userConfig.rootRouter) {
         const _config = {
           routeType: "element",
@@ -9461,6 +9630,732 @@ var SwcAppBody = class SwcAppBody2 extends HTMLBodyElement {
 SwcAppBody = __decorate57([
   elementDefine({ name: "swc-app-body", extends: "body" })
 ], SwcAppBody);
+
+// src/elements/SwcSubTemplates.ts
+var __decorate58 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SwcLoading = class SwcLoading2 extends HTMLTemplateElement {
+};
+SwcLoading = __decorate58([
+  elementDefine({ name: "swc-loading", extends: "template" })
+], SwcLoading);
+var SwcError = class SwcError2 extends HTMLTemplateElement {
+};
+SwcError = __decorate58([
+  elementDefine({ name: "swc-error", extends: "template" })
+], SwcError);
+var SwcSuccess = class SwcSuccess2 extends HTMLTemplateElement {
+};
+SwcSuccess = __decorate58([
+  elementDefine({ name: "swc-success", extends: "template" })
+], SwcSuccess);
+var SwcWhen = class SwcWhen2 extends HTMLTemplateElement {
+};
+SwcWhen = __decorate58([
+  elementDefine({ name: "swc-when", extends: "template" })
+], SwcWhen);
+var SwcOtherwise = class SwcOtherwise2 extends HTMLTemplateElement {
+};
+SwcOtherwise = __decorate58([
+  elementDefine({ name: "swc-otherwise", extends: "template" })
+], SwcOtherwise);
+var SwcDefault = class SwcDefault2 extends HTMLTemplateElement {
+};
+SwcDefault = __decorate58([
+  elementDefine({ name: "swc-default", extends: "template" })
+], SwcDefault);
+
+// src/elements/SwcLoop.ts
+var __decorate59 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcLoop = class SwcLoop2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._value = [];
+    this._nodes = [];
+    this._defaultNodes = [];
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = Array.isArray(nv) ? [...nv] : [];
+    this.render();
+  }
+  getNodes(index) {
+    return this._nodes[index] || null;
+  }
+  _getTarget() {
+    const script = this.getAttribute("on-get-portal");
+    if (!script)
+      return null;
+    try {
+      const res = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(window, this)
+      });
+      if (typeof res === "string")
+        return document.querySelector(res);
+      if (res instanceof Node)
+        return res;
+    } catch (e) {
+      console.error("[SwcLoop] Portal target error:", e);
+    }
+    return null;
+  }
+  append(...items) {
+    if (!items.length || !this.parentElement)
+      return;
+    if (this._defaultNodes.length > 0)
+      this._cleanupDefault();
+    const fragment = document.createDocumentFragment();
+    const startIndex = this._value.length;
+    items.forEach((item, i) => {
+      const index = startIndex + i;
+      const nodes = this._createItemNodes(item, index);
+      if (nodes) {
+        this._nodes.push(nodes);
+        nodes.forEach((n) => fragment.appendChild(n));
+        this._value.push(item);
+      } else {
+        this._nodes.push(null);
+        this._value.push(null);
+      }
+    });
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      const lastValidIdx = this._nodes.length - items.length - 1;
+      let refNode = this;
+      for (let i = lastValidIdx; i >= 0; i--) {
+        const group = this._nodes[i];
+        if (group && group.length > 0) {
+          refNode = group[group.length - 1];
+          break;
+        }
+      }
+      this.parentElement.insertBefore(fragment, refNode.nextSibling);
+    }
+  }
+  remove(index) {
+    const targetIdx = index !== void 0 ? index : this._nodes.length - 1;
+    if (targetIdx < 0 || targetIdx >= this._nodes.length)
+      return;
+    const nodes = this._nodes[targetIdx];
+    if (nodes) {
+      nodes.forEach((n) => {
+        if (n.parentElement)
+          n.parentElement.removeChild(n);
+      });
+      this._nodes[targetIdx] = null;
+      this._value[targetIdx] = null;
+    }
+    const activeRows = this._value.filter((v) => v !== null);
+    if (activeRows.length === 0) {
+      this.render();
+    }
+  }
+  _createItemNodes(item, index) {
+    const clone = this.content.cloneNode(true);
+    Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach((t) => t.remove());
+    const nodes = Array.from(clone.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    const groupCtx = {
+      $index: index,
+      $item: item,
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1],
+      $isFirst: index === 0,
+      $isLast: index === this._value.length - 1,
+      $isEven: index % 2 === 0,
+      $isOdd: index % 2 !== 0,
+      $count: this._value.length
+    };
+    this._executeCallback("on-clone-nodes", groupCtx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement)
+        node.__swc_host = this;
+      this._executeCallback("on-clone-node", { ...groupCtx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+    return nodes;
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcLoop] Error in ${attrName}:`, e);
+    }
+  }
+  refreshValue(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = [];
+      return;
+    }
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const res = FunctionUtils.executeReturn({ script, context: this, args: helperHostSet });
+      if (Array.isArray(res)) {
+        this.value = res;
+      }
+    } catch (e) {
+      console.error("[SwcLoop] Failed to get value from on-get-value script:", e);
+      this.value = [];
+    }
+  }
+  render() {
+    this._cleanup();
+    if (!this.parentElement)
+      return;
+    const activeRows = this._value.filter((v) => v !== null);
+    const target = this._getTarget();
+    if (activeRows.length === 0) {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      if (t) {
+        const clone = t.content.cloneNode(true);
+        this._defaultNodes = Array.from(clone.childNodes);
+        this._defaultNodes.forEach((n) => {
+          if (n instanceof HTMLElement)
+            n.__swc_host = this;
+        });
+        if (target)
+          target.appendChild(clone);
+        else
+          this.parentElement.insertBefore(clone, this.nextSibling);
+      }
+      return;
+    }
+    const fragment = document.createDocumentFragment();
+    this._value.forEach((item, index) => {
+      if (item === null) {
+        this._nodes.push(null);
+        return;
+      }
+      const nodes = this._createItemNodes(item, index);
+      this._nodes.push(nodes);
+      nodes.forEach((n) => fragment.appendChild(n));
+    });
+    if (target)
+      target.appendChild(fragment);
+    else
+      this.parentElement.insertBefore(fragment, this.nextSibling);
+  }
+  _cleanup() {
+    this._nodes.forEach((group) => {
+      if (group)
+        group.forEach((node) => node.parentElement?.removeChild(node));
+    });
+    this._nodes = [];
+    this._cleanupDefault();
+  }
+  _cleanupDefault() {
+    this._defaultNodes.forEach((n) => n.parentElement?.removeChild(n));
+    this._defaultNodes = [];
+  }
+  connectedCallback() {
+    this.refreshValue();
+  }
+  disconnectedCallback() {
+    this._cleanup();
+  }
+};
+__decorate59([
+  changedAttribute("on-get-value"),
+  __metadata("design:type", Function),
+  __metadata("design:paramtypes", [String]),
+  __metadata("design:returntype", void 0)
+], SwcLoop.prototype, "refreshValue", null);
+SwcLoop = __decorate59([
+  elementDefine({ name: "swc-loop", extends: "template" })
+], SwcLoop);
+
+// src/elements/SwcIf.ts
+var __decorate60 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata2 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcIf = class SwcIf2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = nv;
+    this.render();
+  }
+  _getTarget() {
+    const script = this.getAttribute("on-get-portal");
+    if (!script)
+      return null;
+    try {
+      const res = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: SwcUtils.getHelperAndHostSet(window, this)
+      });
+      if (typeof res === "string")
+        return document.querySelector(res);
+      if (res instanceof Node)
+        return res;
+    } catch (e) {
+      console.error("[SwcIf] Portal target error:", e);
+    }
+    return null;
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcIf] Error in ${attrName}:`, e);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error("[SwcIf] Error in on-get-value:", e);
+      this.value = null;
+    }
+  }
+  render() {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    let fragment = null;
+    const ctx = { $value: this._value, $nodes: [], $elements: [] };
+    if (this._value) {
+      const clone = this.content.cloneNode(true);
+      Array.from(clone.querySelectorAll('template[is="swc-default"]')).forEach((t) => t.remove());
+      fragment = clone;
+    } else {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      if (t)
+        fragment = t.content.cloneNode(true);
+    }
+    if (fragment) {
+      this.mount(fragment, ctx);
+    }
+  }
+  mount(fragment, ctx) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+    this._executeCallback("on-clone-nodes", ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement)
+        node.__swc_host = this;
+      this._executeCallback("on-clone-node", { ...ctx, $node: node, $nodeIndex: nodeIndex, $isElement: node.nodeType === 1 });
+    });
+    this._nodes = nodes;
+    const target = this._getTarget();
+    if (target) {
+      target.appendChild(fragment);
+    } else {
+      this.parentElement?.insertBefore(fragment, this.nextSibling);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate60([
+  changedAttribute("on-get-value"),
+  __metadata2("design:type", Function),
+  __metadata2("design:paramtypes", [String]),
+  __metadata2("design:returntype", void 0)
+], SwcIf.prototype, "refresh", null);
+SwcIf = __decorate60([
+  elementDefine({ name: "swc-if", extends: "template" })
+], SwcIf);
+
+// src/elements/SwcChoose.ts
+var __decorate61 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata3 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcChoose = class SwcChoose2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    this._value = nv;
+    this.render();
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcChoose] Error in ${attrName}:`, e);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      this.value = result;
+    } catch (e) {
+      console.error("[SwcChoose] Error in on-get-value:", e);
+    }
+  }
+  render() {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    const templates = Array.from(this.content.querySelectorAll("template"));
+    let selected = null;
+    let otherwise = null;
+    let defaultTmp = null;
+    for (const t of templates) {
+      const is = t.getAttribute("is");
+      if (is === "swc-when") {
+        const whenVal = t.getAttribute("value");
+        if (String(whenVal) === String(this._value)) {
+          selected = t;
+          break;
+        }
+      } else if (is === "swc-otherwise") {
+        otherwise = t;
+      } else if (is === "swc-default") {
+        defaultTmp = t;
+      }
+    }
+    const targetTemplate = (this._value == null ? defaultTmp : selected) || otherwise || defaultTmp;
+    if (targetTemplate) {
+      const clone = targetTemplate.content.cloneNode(true);
+      const nodes = Array.from(clone.childNodes);
+      const elements = nodes.filter((n) => n.nodeType === 1);
+      const ctx = {
+        $value: this._value,
+        $nodes: nodes,
+        $elements: elements,
+        $firstNode: nodes[0],
+        $lastNode: nodes[nodes.length - 1],
+        $firstElement: elements[0],
+        $lastElement: elements[elements.length - 1]
+      };
+      this._executeCallback("on-clone-nodes", ctx);
+      nodes.forEach((node, nodeIndex) => {
+        if (node instanceof HTMLElement) {
+          node.__swc_host = this;
+        }
+        this._executeCallback("on-clone-node", {
+          ...ctx,
+          $node: node,
+          $nodeIndex: nodeIndex,
+          $isElement: node.nodeType === 1
+        });
+      });
+      this._nodes = nodes;
+      this.parentElement.insertBefore(clone, this.nextSibling);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate61([
+  changedAttribute("on-get-value"),
+  __metadata3("design:type", Function),
+  __metadata3("design:paramtypes", [String]),
+  __metadata3("design:returntype", void 0)
+], SwcChoose.prototype, "refresh", null);
+SwcChoose = __decorate61([
+  elementDefine({ name: "swc-choose", extends: "template" })
+], SwcChoose);
+
+// src/elements/SwcAsync.ts
+var __decorate62 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata4 = function(k, v) {
+  if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var SwcAsync = class SwcAsync2 extends HTMLTemplateElement {
+  constructor() {
+    super(...arguments);
+    this._nodes = [];
+    this._currentPromise = null;
+    this._value = null;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(nv) {
+    if (nv instanceof Promise) {
+      this.handlePromise(nv);
+    } else {
+      this._value = nv;
+      this.render(nv === null ? "default" : "success", nv);
+    }
+  }
+  refresh(newValue) {
+    const script = newValue !== void 0 ? newValue : this.getAttribute("on-get-value");
+    if (!script) {
+      this.value = null;
+      return;
+    }
+    if (!this.parentElement)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      const result = FunctionUtils.executeReturn({
+        script,
+        context: this,
+        args: helperHostSet
+      });
+      if (result instanceof Promise) {
+        this.handlePromise(result);
+      } else {
+        this.value = result;
+      }
+    } catch (e) {
+      this.render("error", e);
+    }
+  }
+  async handlePromise(promise) {
+    this._currentPromise = promise;
+    this.render("loading");
+    try {
+      const result = await promise;
+      if (this._currentPromise !== promise)
+        return;
+      this._value = result;
+      this.render("success", result);
+    } catch (e) {
+      if (this._currentPromise !== promise)
+        return;
+      this.render("error", e);
+    }
+  }
+  render(state, data) {
+    this.cleanup();
+    if (!this.parentElement)
+      return;
+    let fragment;
+    const ctx = {
+      $nodes: [],
+      $elements: [],
+      $state: state,
+      $value: null,
+      $error: null
+    };
+    if (state === "default") {
+      const t = this.content.querySelector('template[is="swc-default"]');
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else if (state === "loading") {
+      const t = this.content.querySelector('template[is="swc-loading"]');
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else if (state === "error") {
+      const t = this.content.querySelector('template[is="swc-error"]');
+      ctx.$error = data;
+      fragment = t ? t.content.cloneNode(true) : document.createDocumentFragment();
+    } else {
+      const t = this.content.querySelector('template[is="swc-success"]');
+      ctx.$value = data;
+      if (t) {
+        fragment = t.content.cloneNode(true);
+      } else {
+        const clone = this.content.cloneNode(true);
+        Array.from(clone.querySelectorAll('template[is="swc-loading"], template[is="swc-error"], template[is="swc-success"], template[is="swc-default"]')).forEach((tmp) => tmp.remove());
+        fragment = clone;
+      }
+    }
+    this.mount(fragment, ctx);
+  }
+  mount(fragment, ctx) {
+    const nodes = Array.from(fragment.childNodes);
+    const elements = nodes.filter((n) => n.nodeType === 1);
+    Object.assign(ctx, {
+      $nodes: nodes,
+      $elements: elements,
+      $firstNode: nodes[0],
+      $lastNode: nodes[nodes.length - 1],
+      $firstElement: elements[0],
+      $lastElement: elements[elements.length - 1]
+    });
+    this._executeCallback("on-clone-nodes", ctx);
+    nodes.forEach((node, nodeIndex) => {
+      if (node instanceof HTMLElement) {
+        node.__swc_host = this;
+      }
+      this._executeCallback("on-clone-node", {
+        ...ctx,
+        $node: node,
+        $nodeIndex: nodeIndex,
+        $isElement: node.nodeType === 1
+      });
+    });
+    this._nodes = nodes;
+    this.parentElement?.insertBefore(fragment, this.nextSibling);
+  }
+  _executeCallback(attrName, extraArgs) {
+    const script = this.getAttribute(attrName);
+    if (!script)
+      return;
+    const helperHostSet = SwcUtils.getHelperAndHostSet(window, this);
+    try {
+      FunctionUtils.execute({ script, context: this, args: { ...helperHostSet, ...extraArgs } });
+    } catch (e) {
+      console.error(`[SwcAsync] Error in ${attrName}:`, e);
+    }
+  }
+  cleanup() {
+    this._nodes.forEach((n) => {
+      if (n.parentElement)
+        n.parentElement.removeChild(n);
+    });
+    this._nodes = [];
+  }
+  connectedCallback() {
+    this.refresh();
+  }
+  disconnectedCallback() {
+    this.cleanup();
+  }
+};
+__decorate62([
+  changedAttribute("on-get-value"),
+  __metadata4("design:type", Function),
+  __metadata4("design:paramtypes", [String]),
+  __metadata4("design:returntype", void 0)
+], SwcAsync.prototype, "refresh", null);
+SwcAsync = __decorate62([
+  elementDefine({ name: "swc-async", extends: "template" })
+], SwcAsync);
+
+// src/elements/SwcApp.ts
+var __decorate63 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SwcApp = class SwcApp2 extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    this._engine = new SwcAppEngine(this);
+  }
+  get simpleApplication() {
+    return this._engine.simpleApplication;
+  }
+  get router() {
+    return this._engine.router;
+  }
+  connectedCallback() {
+    this._engine.connect();
+  }
+  disconnectedCallback() {
+    this._engine.disconnect();
+  }
+  async routing(path) {
+    await this._engine.router?.go(path);
+  }
+};
+SwcApp = __decorate63([
+  elementDefine({ name: "swc-app", extends: void 0 })
+], SwcApp);
 export {
   ADD_EVENT_LISTENER_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
@@ -9480,6 +10375,7 @@ export {
   QUERY_METADATA_KEY,
   SET_ATTRIBUTE_METADATA_KEY,
   SWC_NOT_FOUND,
+  SwcApp,
   SwcAppAnchor,
   SwcAppArea,
   SwcAppAudio,
@@ -9494,6 +10390,7 @@ export {
   SwcAppDiv,
   SwcAppDl,
   SwcAppEmbed,
+  SwcAppEngine,
   SwcAppFieldSet,
   SwcAppForm,
   SwcAppHeading,
@@ -9537,7 +10434,17 @@ export {
   SwcAppTrack,
   SwcAppUl,
   SwcAppVideo,
+  SwcAsync,
+  SwcChoose,
+  SwcDefault,
+  SwcError,
+  SwcIf,
+  SwcLoading,
+  SwcLoop,
+  SwcOtherwise,
+  SwcSuccess,
   SwcUtils,
+  SwcWhen,
   addEventListener,
   changedAttribute,
   elementDefine,