@dooboostore/simple-web-component 1.0.16 → 1.0.18

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

@@ -1119,6 +1119,7 @@ var dooboostoreSimpleWebComponent = (() => {
   var bundle_entry_exports = {};
   __export(bundle_entry_exports, {
     ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
+    APPEND_CHILD_METADATA_KEY: () => APPEND_CHILD_METADATA_KEY,
     ATTRIBUTE_CHANGED_WILDCARD: () => ATTRIBUTE_CHANGED_WILDCARD,
     ELEMENT_CONFIG_KEY: () => ELEMENT_CONFIG_KEY,
     EMIT_CUSTOM_EVENT_METADATA_KEY: () => EMIT_CUSTOM_EVENT_METADATA_KEY,
@@ -1134,8 +1135,10 @@ var dooboostoreSimpleWebComponent = (() => {
     ON_BEFORE_DISCONNECTED_METADATA_KEY: () => ON_BEFORE_DISCONNECTED_METADATA_KEY,
     QUERY_ALL_METADATA_KEY: () => QUERY_ALL_METADATA_KEY,
     QUERY_METADATA_KEY: () => QUERY_METADATA_KEY,
+    REPLACE_CHILDREN_METADATA_KEY: () => REPLACE_CHILDREN_METADATA_KEY,
     SET_ATTRIBUTE_METADATA_KEY: () => SET_ATTRIBUTE_METADATA_KEY,
     SWC_NOT_FOUND: () => SWC_NOT_FOUND,
+    SwcApp: () => SwcApp,
     SwcAppAnchor: () => SwcAppAnchor,
     SwcAppArea: () => SwcAppArea,
     SwcAppAudio: () => SwcAppAudio,
@@ -1150,6 +1153,7 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcAppDiv: () => SwcAppDiv,
     SwcAppDl: () => SwcAppDl,
     SwcAppEmbed: () => SwcAppEmbed,
+    SwcAppEngine: () => SwcAppEngine,
     SwcAppFieldSet: () => SwcAppFieldSet,
     SwcAppForm: () => SwcAppForm,
     SwcAppHeading: () => SwcAppHeading,
@@ -1193,23 +1197,37 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcAppTrack: () => SwcAppTrack,
     SwcAppUl: () => SwcAppUl,
     SwcAppVideo: () => SwcAppVideo,
+    SwcAsync: () => SwcAsync,
+    SwcChoose: () => SwcChoose,
+    SwcDefault: () => SwcDefault,
+    SwcError: () => SwcError,
+    SwcIf: () => SwcIf,
+    SwcLoading: () => SwcLoading,
+    SwcLoop: () => SwcLoop,
+    SwcOtherwise: () => SwcOtherwise,
+    SwcSuccess: () => SwcSuccess,
     SwcUtils: () => SwcUtils,
+    SwcWhen: () => SwcWhen,
     addEventListener: () => addEventListener,
+    appendChild: () => appendChild,
     changedAttribute: () => changedAttribute,
     elementDefine: () => elementDefine,
     emitCustomEvent: () => emitCustomEvent,
+    findAllAppendChildMetadata: () => findAllAppendChildMetadata,
     findAllAttributeChangedMetadata: () => findAllAttributeChangedMetadata,
     findAllLifecycleMetadata: () => findAllLifecycleMetadata,
+    findAllReplaceChildrenMetadata: () => findAllReplaceChildrenMetadata,
     findAllSetAttributeMetadata: () => findAllSetAttributeMetadata,
     getAddEventListenerMetadata: () => getAddEventListenerMetadata,
     getChangedAttributeMetadata: () => getChangedAttributeMetadata,
     getElementConfig: () => getElementConfig,
     getEmitCustomEventMetadataList: () => getEmitCustomEventMetadataList,
-    getInnerHtmlMetadataList: () => getInnerHtmlMetadataList,
+    getOnConnectedInnerHtmlMetadata: () => getOnConnectedInnerHtmlMetadata,
     getQueryAllMetadata: () => getQueryAllMetadata,
     getQueryMetadata: () => getQueryMetadata,
+    getReplaceChildrenMetadata: () => getReplaceChildrenMetadata,
     getSetAttributeMetadata: () => getSetAttributeMetadata,
-    innerHtml: () => innerHtml,
+    innerHtml: () => onConnectedInnerHtml,
     onAddEventListener: () => onAddEventListener,
     onAdopted: () => onAdopted,
     onAfterAdopted: () => onAfterAdopted,
@@ -1219,9 +1237,11 @@ var dooboostoreSimpleWebComponent = (() => {
     onBeforeConnected: () => onBeforeConnected,
     onBeforeDisconnected: () => onBeforeDisconnected,
     onConnected: () => onConnected,
+    onConnectedInnerHtml: () => onConnectedInnerHtml,
     onDisconnected: () => onDisconnected,
     query: () => query,
     queryAll: () => queryAll,
+    replaceChildren: () => replaceChildren,
     setAttribute: () => setAttribute
   });
   var import_reflect_metadata2 = __toESM(require_Reflect(), 1);
@@ -1230,32 +1250,33 @@ var dooboostoreSimpleWebComponent = (() => {
   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) {
@@ -1266,11 +1287,8 @@ var dooboostoreSimpleWebComponent = (() => {
         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;
@@ -1282,24 +1300,18 @@ var dooboostoreSimpleWebComponent = (() => {
         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) => {
@@ -1310,35 +1322,73 @@ var dooboostoreSimpleWebComponent = (() => {
         }
       });
       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);
@@ -1355,7 +1405,7 @@ var dooboostoreSimpleWebComponent = (() => {
       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);
   };
@@ -1492,10 +1542,81 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -1504,49 +1625,66 @@ var dooboostoreSimpleWebComponent = (() => {
         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;
@@ -1559,10 +1697,11 @@ var dooboostoreSimpleWebComponent = (() => {
         $appHost,
         $appHosts,
         $firstAppHost,
-        $lastAppHost: $appHost
+        $lastAppHost: $appHost,
+        ...loopContext
       };
-    }
-  };
+    };
+  })(SwcUtils || (SwcUtils = {}));
 
   // src/config/config.ts
   var HTML_TAG_ENTRIES = [
@@ -1685,6 +1824,7 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // 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;
@@ -1693,13 +1833,7 @@ var dooboostoreSimpleWebComponent = (() => {
       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) => {
@@ -1711,8 +1845,6 @@ var dooboostoreSimpleWebComponent = (() => {
     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;
@@ -1728,19 +1860,19 @@ var dooboostoreSimpleWebComponent = (() => {
     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);
           }
@@ -1782,9 +1914,13 @@ var dooboostoreSimpleWebComponent = (() => {
           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);
@@ -1793,9 +1929,10 @@ var dooboostoreSimpleWebComponent = (() => {
         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" });
         }
       }
@@ -1803,6 +1940,9 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
@@ -1812,9 +1952,9 @@ var dooboostoreSimpleWebComponent = (() => {
         }
         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)
@@ -1828,17 +1968,88 @@ var dooboostoreSimpleWebComponent = (() => {
           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") {
@@ -1846,62 +2057,61 @@ var dooboostoreSimpleWebComponent = (() => {
               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();
@@ -1919,6 +2129,8 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
@@ -1990,6 +2202,79 @@ var dooboostoreSimpleWebComponent = (() => {
         };
       }
     });
+    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) => {
@@ -2027,6 +2312,26 @@ var dooboostoreSimpleWebComponent = (() => {
       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";
@@ -2041,6 +2346,22 @@ var dooboostoreSimpleWebComponent = (() => {
           }
           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
       });
@@ -2067,6 +2388,18 @@ var dooboostoreSimpleWebComponent = (() => {
       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";
@@ -2084,6 +2417,24 @@ var dooboostoreSimpleWebComponent = (() => {
           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
       });
@@ -7711,7 +8062,7 @@ var dooboostoreSimpleWebComponent = (() => {
       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",
@@ -9575,6 +9926,732 @@ var dooboostoreSimpleWebComponent = (() => {
   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);
   return __toCommonJS(bundle_entry_exports);
 })();
 /*! Bundled license information: