@dooboostore/simple-web-component 1.0.16 → 1.0.18

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,35 +1188,73 @@ 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
+// src/decorators/onConnectedInnerHtml.ts
 var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
-function innerHtml(arg1, arg2, arg3) {
+function onConnectedInnerHtml(arg1, arg2, arg3) {
   const decorator = (options, target, propertyKey) => {
     const constructor = target.constructor;
     let list = ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
@@ -1241,7 +1271,7 @@ function innerHtml(arg1, arg2, arg3) {
     decorator(arg1 || {}, target, propertyKey);
   };
 }
-var getInnerHtmlMetadataList = (target) => {
+var getOnConnectedInnerHtmlMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return ReflectUtils.getMetadata(INNER_HTML_METADATA_KEY, constructor);
 };
@@ -1378,10 +1408,81 @@ var findAllSetAttributeMetadata = (target) => {
   return result;
 };
 
+// src/decorators/replaceChildren.ts
+var REPLACE_CHILDREN_METADATA_KEY = Symbol("simple-web-component:replace-children");
+function replaceChildren(selector) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(REPLACE_CHILDREN_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, selector);
+  };
+}
+var getReplaceChildrenMetadata = (target) => {
+  const constructor = target instanceof Function ? target : target.constructor;
+  return ReflectUtils.getMetadata(REPLACE_CHILDREN_METADATA_KEY, constructor);
+};
+var findAllReplaceChildrenMetadata = (target) => {
+  const result = /* @__PURE__ */ new Map();
+  const maps = ReflectUtils.findAllMetadata(REPLACE_CHILDREN_METADATA_KEY, target);
+  maps.forEach((map) => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
+// src/decorators/appendChild.ts
+var APPEND_CHILD_METADATA_KEY = Symbol("simple-web-component:append-child");
+function appendChild(selector, options = { position: "lastChild" }) {
+  return (target, propertyKey) => {
+    const constructor = target.constructor;
+    let meta = ReflectUtils.getOwnMetadata(APPEND_CHILD_METADATA_KEY, constructor);
+    if (!meta) {
+      meta = /* @__PURE__ */ new Map();
+      ReflectUtils.defineMetadata(APPEND_CHILD_METADATA_KEY, meta, constructor);
+    }
+    meta.set(propertyKey, { propertyKey, selector, options });
+  };
+}
+var findAllAppendChildMetadata = (target) => {
+  const result = /* @__PURE__ */ new Map();
+  const maps = ReflectUtils.findAllMetadata(APPEND_CHILD_METADATA_KEY, target);
+  maps.forEach((map) => {
+    if (map instanceof Map) {
+      map.forEach((v, k) => result.set(k, v));
+    }
+  });
+  return result;
+};
+
 // 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 +1491,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 +1563,11 @@ var SwcUtils = class {
       $appHost,
       $appHosts,
       $firstAppHost,
-      $lastAppHost: $appHost
+      $lastAppHost: $appHost,
+      ...loopContext
     };
-  }
-};
+  };
+})(SwcUtils || (SwcUtils = {}));
 
 // src/config/config.ts
 var HTML_TAG_ENTRIES = [
@@ -1571,6 +1690,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 +1699,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 +1711,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;
@@ -1614,19 +1726,19 @@ var elementDefine = (inConfig) => (constructor) => {
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const setAttrMap = findAllSetAttributeMetadata(constructor);
+  const replaceChildrenMap = findAllReplaceChildrenMetadata(constructor);
+  const appendChildMap = findAllAppendChildMetadata(constructor);
   const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
   const swcOnEvents = DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
   const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...config.observedAttributes ?? [], ...attrChangeMap.keys(), ...setAttrMap.keys(), ...emitCustomEventList.map((it) => it.options.attributeName), ...swcLifecycleAttributes, ...swcOnEvents])];
-  const innerHtmlList = getInnerHtmlMetadataList(constructor) || [];
+  const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
   const NewClass = class extends constructor {
     _executeSwcScript(attrName, hostSet, extraArgs = {}) {
       const script = this.getAttribute(attrName);
       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 +1780,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,9 +1795,10 @@ 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) {
+      if (connectedInnerHtmlList.some((it) => it.options.useShadow === true) && !this.shadowRoot) {
         this.attachShadow({ mode: "open" });
       }
     }
@@ -1689,6 +1806,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);
@@ -1698,9 +1818,9 @@ var elementDefine = (inConfig) => (constructor) => {
       }
       if (typeof this.initCore === "function")
         this.initCore();
-      if (innerHtmlList.length > 0) {
+      if (connectedInnerHtmlList.length > 0) {
         let sContent = "", lContent = "";
-        for (const meta of innerHtmlList) {
+        for (const meta of connectedInnerHtmlList) {
           const res = await this[meta.propertyKey]();
           if (res !== void 0) {
             if (meta.options.useShadow)
@@ -1714,17 +1834,88 @@ 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) => {
+        const handler = createDelegationHandler(this);
+        this.addEventListener(type, handler);
+        this._boundListeners.push({ target: this, type, handler });
+      });
+      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 +1923,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 +1995,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);
@@ -1876,6 +2068,79 @@ var elementDefine = (inConfig) => (constructor) => {
       };
     }
   });
+  replaceChildrenMap.forEach((selector, methodName) => {
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            targetEl.replaceChildren(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
+  appendChildMap.forEach((meta, methodName) => {
+    const { selector, options } = meta;
+    const original = NewClass.prototype[methodName];
+    if (typeof original === "function") {
+      NewClass.prototype[methodName] = function(...args) {
+        const res = original.apply(this, args);
+        if (res !== void 0) {
+          const conf = getElementConfig(this);
+          const currentWin = conf?.window || window;
+          const currentDoc = currentWin.document;
+          let targetEl = null;
+          if (selector === ":host" || !selector) {
+            targetEl = this;
+          } else {
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          }
+          if (targetEl) {
+            const nodes = Array.isArray(res) ? res : [res];
+            const normalizedNodes = nodes.map((n) => {
+              if (typeof n === "string") {
+                const t = currentDoc.createElement("template");
+                t.innerHTML = n;
+                return t.content;
+              }
+              return n;
+            });
+            const pos = options.position || "lastChild";
+            if (pos === "lastChild")
+              targetEl.append(...normalizedNodes);
+            else if (pos === "firstChild")
+              targetEl.prepend(...normalizedNodes);
+            else if (pos === "nextSibling")
+              targetEl.after(...normalizedNodes);
+            else if (pos === "previousSibling")
+              targetEl.before(...normalizedNodes);
+          }
+        }
+        return res;
+      };
+    }
+  });
   const originalProto = constructor.prototype;
   const newProto = NewClass.prototype;
   Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -1913,6 +2178,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";
@@ -1927,6 +2212,22 @@ function query(selector, options = {}) {
         }
         return (this.shadowRoot || this).querySelector(selector);
       },
+      set(nv) {
+        if (nv === null || nv === void 0) {
+          const r = options.root || "auto";
+          let targetEl = null;
+          if (r === "shadow")
+            targetEl = this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          else if (r === "light")
+            targetEl = this.querySelector(selector);
+          else if (r === "all")
+            targetEl = this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+          else
+            targetEl = (this.shadowRoot || this).querySelector(selector);
+          if (targetEl)
+            targetEl.remove();
+        }
+      },
       enumerable: true,
       configurable: true
     });
@@ -1953,6 +2254,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";
@@ -1970,6 +2283,24 @@ function queryAll(selector, options = {}) {
         const root = this.shadowRoot || this;
         return root.querySelectorAll(selector);
       },
+      set(nv) {
+        if (nv === null || nv === void 0 || Array.isArray(nv) && nv.length === 0) {
+          const r = options.root || "auto";
+          let targets = [];
+          if (r === "shadow")
+            targets = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+          else if (r === "light")
+            targets = Array.from(this.querySelectorAll(selector));
+          else if (r === "all") {
+            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            const lNodes = Array.from(this.querySelectorAll(selector));
+            targets = [...sNodes, ...lNodes];
+          } else {
+            targets = Array.from((this.shadowRoot || this).querySelectorAll(selector));
+          }
+          targets.forEach((t) => t.remove());
+        }
+      },
       enumerable: true,
       configurable: true
     });
@@ -7597,7 +7928,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,8 +9792,735 @@ 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,
+  APPEND_CHILD_METADATA_KEY,
   ATTRIBUTE_CHANGED_WILDCARD,
   ELEMENT_CONFIG_KEY,
   EMIT_CUSTOM_EVENT_METADATA_KEY,
@@ -9478,8 +10536,10 @@ export {
   ON_BEFORE_DISCONNECTED_METADATA_KEY,
   QUERY_ALL_METADATA_KEY,
   QUERY_METADATA_KEY,
+  REPLACE_CHILDREN_METADATA_KEY,
   SET_ATTRIBUTE_METADATA_KEY,
   SWC_NOT_FOUND,
+  SwcApp,
   SwcAppAnchor,
   SwcAppArea,
   SwcAppAudio,
@@ -9494,6 +10554,7 @@ export {
   SwcAppDiv,
   SwcAppDl,
   SwcAppEmbed,
+  SwcAppEngine,
   SwcAppFieldSet,
   SwcAppForm,
   SwcAppHeading,
@@ -9537,23 +10598,37 @@ export {
   SwcAppTrack,
   SwcAppUl,
   SwcAppVideo,
+  SwcAsync,
+  SwcChoose,
+  SwcDefault,
+  SwcError,
+  SwcIf,
+  SwcLoading,
+  SwcLoop,
+  SwcOtherwise,
+  SwcSuccess,
   SwcUtils,
+  SwcWhen,
   addEventListener,
+  appendChild,
   changedAttribute,
   elementDefine,
   emitCustomEvent,
+  findAllAppendChildMetadata,
   findAllAttributeChangedMetadata,
   findAllLifecycleMetadata,
+  findAllReplaceChildrenMetadata,
   findAllSetAttributeMetadata,
   getAddEventListenerMetadata,
   getChangedAttributeMetadata,
   getElementConfig,
   getEmitCustomEventMetadataList,
-  getInnerHtmlMetadataList,
+  getOnConnectedInnerHtmlMetadata,
   getQueryAllMetadata,
   getQueryMetadata,
+  getReplaceChildrenMetadata,
   getSetAttributeMetadata,
-  innerHtml,
+  onConnectedInnerHtml as innerHtml,
   onAddEventListener,
   onAdopted,
   onAfterAdopted,
@@ -9563,9 +10638,11 @@ export {
   onBeforeConnected,
   onBeforeDisconnected,
   onConnected,
+  onConnectedInnerHtml,
   onDisconnected,
   query,
   queryAll,
+  replaceChildren,
   setAttribute
 };
 /*! Bundled license information: