@dooboostore/simple-web-component 1.0.15 → 1.0.17

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

@@ -1136,6 +1136,7 @@ var dooboostoreSimpleWebComponent = (() => {
     QUERY_METADATA_KEY: () => QUERY_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 +1151,7 @@ var dooboostoreSimpleWebComponent = (() => {
     SwcAppDiv: () => SwcAppDiv,
     SwcAppDl: () => SwcAppDl,
     SwcAppEmbed: () => SwcAppEmbed,
+    SwcAppEngine: () => SwcAppEngine,
     SwcAppFieldSet: () => SwcAppFieldSet,
     SwcAppForm: () => SwcAppForm,
     SwcAppHeading: () => SwcAppHeading,
@@ -1193,7 +1195,17 @@ 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,
     changedAttribute: () => changedAttribute,
     elementDefine: () => elementDefine,
@@ -1230,32 +1242,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 +1279,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 +1292,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,31 +1314,69 @@ 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
   var INNER_HTML_METADATA_KEY = Symbol("simple-web-component:inner-html");
@@ -1362,16 +1404,15 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/addEventListener.ts
   var ADD_EVENT_LISTENER_METADATA_KEY = Symbol("simple-web-component:add-event-listener");
-  function addEventListener(arg1, arg2) {
+  function addEventListener(selector, type, options = {}) {
     return (target, propertyKey, descriptor) => {
       const constructor = target.constructor;
-      const options = typeof arg1 === "string" ? { type: arg1, query: arg2 } : arg1;
       let listeners = ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
       if (!listeners) {
         listeners = [];
         ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
       }
-      listeners.push({ options, propertyKey });
+      listeners.push({ selector, type, options, propertyKey });
     };
   }
   var getAddEventListenerMetadata = (target) => {
@@ -1417,11 +1458,11 @@ var dooboostoreSimpleWebComponent = (() => {
   // src/decorators/emitCustomEvent.ts
   var EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol("simple-web-component:emit-custom-event");
   function emitCustomEvent(typeOrOptions) {
-    return (target, propertyKey, descriptor) => {
+    return (target, propertyKey) => {
       const constructor = target.constructor;
       const options = typeof typeOrOptions === "string" ? { type: typeOrOptions } : typeOrOptions;
       if (!options.attributeName) {
-        options.attributeName = `on${options.type}`;
+        options.attributeName = `swc-on-${options.type}`;
       }
       if (options.bubbles === void 0) options.bubbles = true;
       if (options.composed === void 0) options.composed = true;
@@ -1431,18 +1472,6 @@ var dooboostoreSimpleWebComponent = (() => {
         ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
       }
       list.push({ propertyKey, options });
-      const originalMethod = descriptor.value;
-      descriptor.value = function(...args) {
-        const detail = originalMethod.apply(this, args);
-        const event = new CustomEvent(options.type, {
-          detail,
-          bubbles: options.bubbles,
-          composed: options.composed,
-          cancelable: options.cancelable
-        });
-        this.dispatchEvent(event);
-        return detail;
-      };
     };
   }
   var getEmitCustomEventMetadataList = (target) => {
@@ -1507,183 +1536,112 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/utils/Utils.ts
   var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-  var SwcUtils = class _SwcUtils {
-    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(".");
-      if (parts[0] === rootName && parts.length > 1) {
-        const subParts = parts.slice(1);
-        let subResult = obj;
-        for (const part of subParts) {
-          if (subResult === null || typeof subResult !== "object" || !(part in subResult)) return SWC_NOT_FOUND;
-          subResult = subResult[part];
-        }
-        return subResult;
-      }
-      let result = obj;
+      let current = obj;
       for (const part of parts) {
-        if (result === null || typeof result !== "object" || !(part in result)) {
-          return SWC_NOT_FOUND;
-        }
-        result = result[part];
+        if (current === null || current === void 0) return SWC_NOT_FOUND;
+        current = current[part];
       }
-      if (result !== obj && !(result instanceof HTMLElement)) {
-        return result;
+      return 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;
       }
-      return SWC_NOT_FOUND;
-    }
-    static evalExpression(expr, context) {
-      try {
-        const keys = Object.keys(context);
-        const values = Object.values(context);
-        return new Function(...keys, `return (${expr})`).apply(null, values);
-      } catch {
-        return SWC_NOT_FOUND;
-      }
-    }
-    static applyData(node, data, options) {
-      const { asKey, asIndexKey, index, hostContext } = options;
-      const context = {};
-      if (index !== void 0) {
-        context[asIndexKey] = index;
-      }
-      if (data !== null && data !== void 0) {
-        context[asKey] = data;
-        context["value"] = data;
-      }
-      const fullContext = { ...hostContext || {}, ...context };
-      const resolveExpr = (expr, match) => {
-        expr = expr.trim();
-        const simpleVal = _SwcUtils.getValueByPath(data, expr, asKey);
-        if (simpleVal !== SWC_NOT_FOUND && typeof simpleVal !== "symbol") {
-          return simpleVal === null || simpleVal === void 0 ? "" : String(simpleVal);
-        }
-        const exprVal = _SwcUtils.evalExpression(expr, fullContext);
-        if (exprVal !== SWC_NOT_FOUND && typeof exprVal !== "symbol") {
-          return exprVal === null || exprVal === void 0 ? "" : String(exprVal);
-        }
-        return match;
-      };
-      const walk = (n) => {
-        if (n.nodeType === Node.TEXT_NODE) {
-          if (!n._original) n._original = n.textContent;
-          let text = n._original;
-          text = text.replace(/{{(.*?)}}/g, (match, path) => {
-            return resolveExpr(path, match);
-          });
-          if (n.textContent !== text) n.textContent = text;
-        } else if (n.nodeType === Node.ELEMENT_NODE) {
-          const el = n;
-          Array.from(el.attributes).forEach((a) => {
-            if (!a._original) a._original = a.value;
-            let val = a._original;
-            val = val.replace(/{{(.*?)}}/g, (match, path) => {
-              return resolveExpr(path, match);
-            });
-            if (a.value !== val) a.value = val;
-          });
-          el.childNodes.forEach(walk);
-        }
-      };
-      walk(node);
-    }
-    static createReactiveProxy(target, onChange, onIndexChange) {
-      const makeRecursiveProxy = (obj) => {
-        if (typeof obj !== "object" || obj === null || obj instanceof Node) return obj;
-        if (obj.__swc_is_proxy) return obj;
-        const IS_PROXY_KEY = "__swc_is_proxy";
-        const proxy = new Proxy(obj, {
-          get: (t, prop) => {
-            if (prop === IS_PROXY_KEY) return true;
-            if (typeof prop === "symbol") return t[prop];
-            return t[prop];
-          },
-          set: (t, prop, val) => {
-            if (prop === IS_PROXY_KEY) return true;
-            if (typeof prop === "symbol") {
-              t[prop] = val;
-              return true;
-            }
-            const oldVal = t[prop];
-            if (oldVal === val) return true;
-            t[prop] = makeRecursiveProxy(val);
-            const isIndex = !isNaN(Number(prop)) && Array.isArray(t);
-            if (isIndex && onIndexChange) {
-              onIndexChange(Number(prop), val);
-            } else {
-              onChange();
-            }
-            return true;
-          },
-          deleteProperty: (t, prop) => {
-            delete t[prop];
-            onChange();
-            return true;
-          }
-        });
-        return proxy;
-      };
-      return makeRecursiveProxy(target);
-    }
-    static findNearestSwcHost(el) {
-      const hosts = this.findAllSwcHosts(el);
-      return hosts.length > 0 ? hosts[hosts.length - 1] : null;
-    }
-    static findAllSwcHosts(el) {
+      return void 0;
+    };
+    SwcUtils2.findAllSwcHosts = (el) => {
       const hosts = [];
-      let curr = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
-      curr = curr?.parentElement || curr?.getRootNode()?.host;
-      while (curr) {
-        if (curr._swcId) hosts.push(curr);
-        curr = curr.parentElement || curr?.getRootNode()?.host;
+      let current = (0, SwcUtils2.findNearestSwcHost)(el);
+      while (current) {
+        hosts.push(current);
+        current = (0, SwcUtils2.findNearestSwcHost)(current);
       }
       return hosts.reverse();
-    }
-    static getHosts(el) {
-      return this.findAllSwcHosts(el);
-    }
-    static getHost(el) {
-      const hosts = this.getHosts(el);
-      return hosts.length > 0 ? hosts[hosts.length - 1] : void 0;
-    }
-    static getFirstHost(el) {
-      const hosts = this.getHosts(el);
-      return hosts.length > 0 ? hosts[0] : void 0;
-    }
-    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);
-      return appHosts.length > 0 ? appHosts[appHosts.length - 1] : void 0;
-    }
-    static getFirstAppHost(el) {
-      const appHosts = this.getAppHosts(el);
-      return appHosts.length > 0 ? appHosts[0] : void 0;
-    }
-    static getLastAppHost(el) {
-      return this.getAppHost(el);
-    }
-    static getHostSet(el) {
-      const $hosts = this.getHosts(el);
-      const $appHosts = this.getAppHosts(el);
-      const $firstHost = $hosts[0] || null;
-      const $lastHost = $hosts[$hosts.length - 1] || null;
-      const $firstAppHost = $appHosts[0] || null;
-      const $lastAppHost = $appHosts[$appHosts.length - 1] || null;
+    };
+    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;
+    };
+    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;
       return {
-        $host: $lastHost,
+        $host,
+        $parentHost,
         $hosts,
         $firstHost,
-        $lastHost,
-        $appHost: $lastAppHost,
+        $lastHost: $parentHost,
+        $appHost,
         $appHosts,
         $firstAppHost,
-        $lastAppHost
+        $lastAppHost: $appHost,
+        ...loopContext
       };
-    }
-  };
+    };
+  })(SwcUtils || (SwcUtils = {}));
 
   // src/config/config.ts
   var HTML_TAG_ENTRIES = [
@@ -1795,6 +1753,7 @@ var dooboostoreSimpleWebComponent = (() => {
     InjectSituationType2["APP_HOST"] = "SIMPLE_WEB_COMPONENT://APPHOST";
     InjectSituationType2["APP_HOSTS"] = "SIMPLE_WEB_COMPONENT://APPHOSTS";
     InjectSituationType2["HOST"] = "SIMPLE_WEB_COMPONENT://HOST";
+    InjectSituationType2["PARENT_HOST"] = "SIMPLE_WEB_COMPONENT://PARENTHOST";
     InjectSituationType2["HOSTS"] = "SIMPLE_WEB_COMPONENT://HOSTS";
     InjectSituationType2["FIRST_HOST"] = "SIMPLE_WEB_COMPONENT://FIRSTHOST";
     InjectSituationType2["LAST_HOST"] = "SIMPLE_WEB_COMPONENT://LASTHOST";
@@ -1805,6 +1764,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;
@@ -1813,13 +1773,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) => {
@@ -1831,8 +1785,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;
@@ -1858,9 +1810,7 @@ var dooboostoreSimpleWebComponent = (() => {
         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);
           }
@@ -1883,10 +1833,12 @@ var dooboostoreSimpleWebComponent = (() => {
           return this[methodName](...extraArgs);
         }
       }
-      _bindAttributeEvent(el, attrName, script) {
-        if (!attrName.startsWith("swc-on-"))
-          return;
-        const eventName = attrName.substring(7);
+      _bindAttributeEvent(el, attrName, script, eventName) {
+        if (!eventName) {
+          if (!attrName.startsWith("swc-on-"))
+            return;
+          eventName = attrName.substring(7);
+        }
         if (swcLifecycleAttributes.includes(attrName))
           return;
         const elHandlers = getHandlers(this);
@@ -1900,9 +1852,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);
@@ -1911,6 +1867,7 @@ 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) {
@@ -1921,6 +1878,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);
@@ -1946,19 +1906,122 @@ 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) => {
+          this.addEventListener(type, createDelegationHandler(this));
+          this._boundListeners.push({ target: this, type, handler: createDelegationHandler(this) });
+        });
+        const hasParentHost = SwcUtils.findAllSwcHosts(this).length > 0;
+        if (!hasParentHost) {
+          const root = this.getRootNode();
+          if (!globalDelegatedRoots.has(root)) {
+            DOM_EVENT_NAMES.forEach((type) => {
+              const handler = createDelegationHandler(root);
+              root.addEventListener(type, handler);
+            });
+            globalDelegatedRoots.add(root);
+          }
+        }
         addEventListenerList.forEach((meta) => {
-          const { type, query: query2, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-          const targetEls = [];
-          if (!query2) {
-            targetEls.push(this);
+          const { selector, type, options } = meta;
+          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")
+              bindRoots.push(this.shadowRoot || this);
+            else if (r === "light")
+              bindRoots.push(this);
+            else if (r === "shadow") {
+              if (this.shadowRoot)
+                bindRoots.push(this.shadowRoot);
+            } else if (r === "all") {
+              bindRoots.push(this);
+              if (this.shadowRoot)
+                bindRoots.push(this.shadowRoot);
+            }
+            bindRoots.forEach((br) => {
+              const handler = (event) => {
+                const matchedEl = event.target.closest(selector);
+                if (matchedEl && br.contains(matchedEl)) {
+                  if (stopPropagation)
+                    event.stopPropagation();
+                  if (stopImmediatePropagation)
+                    event.stopImmediatePropagation();
+                  if (preventDefault)
+                    event.preventDefault();
+                  const currentHostSet = SwcUtils.getHostSet(this);
+                  this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet, matchedEl]);
+                }
+              };
+              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 searchRoots = [];
             const r = root || "auto";
-            if (r === "auto") {
+            if (r === "auto")
               searchRoots.push(this.shadowRoot || this);
-            } else if (r === "light") {
+            else if (r === "light")
               searchRoots.push(this);
-            } else if (r === "shadow") {
+            else if (r === "shadow") {
               if (this.shadowRoot)
                 searchRoots.push(this.shadowRoot);
             } else if (r === "all") {
@@ -1967,11 +2030,10 @@ var dooboostoreSimpleWebComponent = (() => {
                 searchRoots.push(this.shadowRoot);
             }
             searchRoots.forEach((sr) => {
-              const found = sr.querySelectorAll(query2);
-              found.forEach((el) => targetEls.push(el));
+              sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
             });
           }
-          targetEls.forEach((el) => {
+          bindTargets.forEach((target) => {
             const handler = (event) => {
               if (stopPropagation)
                 event.stopPropagation();
@@ -1979,11 +2041,13 @@ var dooboostoreSimpleWebComponent = (() => {
                 event.stopImmediatePropagation();
               if (preventDefault)
                 event.preventDefault();
-              const hostSet2 = SwcUtils.getHostSet(this);
-              this._invokeLifecycleMethod(meta.propertyKey, hostSet2, [event, hostSet2]);
+              const currentHostSet = SwcUtils.getHostSet(this);
+              this._invokeLifecycleMethod(meta.propertyKey, currentHostSet, [event, currentHostSet]);
             };
-            const options = { capture, once, passive };
-            el.addEventListener(type, handler, options);
+            target.addEventListener(type, handler, opts);
+            if (removeOnDisconnected === true || target === currentWin || target === currentDoc) {
+              this._boundListeners.push({ target, type, handler, options: opts });
+            }
           });
         });
         if (super.connectedCallback)
@@ -2002,6 +2066,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);
@@ -2029,7 +2095,9 @@ var dooboostoreSimpleWebComponent = (() => {
           super.attributeChangedCallback(name, old, newVal);
         if (name.startsWith("swc-on-") && !swcLifecycleAttributes.includes(name)) {
           if (newVal !== null) {
-            this._bindAttributeEvent(this, name, newVal);
+            const customEventMeta = emitCustomEventList.find((it) => it.options.attributeName === name);
+            const eventName = customEventMeta ? customEventMeta.options.type : name.substring(7);
+            this._bindAttributeEvent(this, name, newVal, eventName);
           }
         }
         const mKeys = attrChangeMap.get(name);
@@ -2054,6 +2122,23 @@ var dooboostoreSimpleWebComponent = (() => {
         };
       }
     });
+    emitCustomEventList.forEach((meta) => {
+      const { propertyKey, options } = meta;
+      const original = NewClass.prototype[propertyKey];
+      if (typeof original === "function") {
+        NewClass.prototype[propertyKey] = function(...args) {
+          const detail = original.apply(this, args);
+          const event = new CustomEvent(options.type, {
+            detail,
+            bubbles: options.bubbles,
+            composed: options.composed,
+            cancelable: options.cancelable
+          });
+          this.dispatchEvent(event);
+          return detail;
+        };
+      }
+    });
     const originalProto = constructor.prototype;
     const newProto = NewClass.prototype;
     Object.getOwnPropertyNames(originalProto).forEach((name) => {
@@ -2077,48 +2162,57 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/query.ts
   var QUERY_METADATA_KEY = Symbol("simple-web-component:query");
-  function query(arg1, arg2) {
-    const decorator = (selector, options, target, propertyKey, descriptor) => {
-      const isMethod = !!descriptor;
+  function query(selector, options = {}) {
+    return (target, propertyKey, descriptor) => {
+      if (descriptor !== void 0) {
+        throw new Error(`@query decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+      }
       const constructor = target.constructor;
       let queries = ReflectUtils.getMetadata(QUERY_METADATA_KEY, constructor);
       if (!queries) {
         queries = [];
         ReflectUtils.defineMetadata(QUERY_METADATA_KEY, queries, constructor);
       }
-      queries.push({ selector, options, propertyKey, isMethod });
-      if (!isMethod) {
-        Object.defineProperty(target, propertyKey, {
-          get() {
-            if (!selector)
-              return this;
-            let searchRoot = this;
-            if (options.root === "shadow")
-              searchRoot = this.shadowRoot || this;
-            else if (options.root === "light")
-              searchRoot = this;
-            else
-              searchRoot = this.shadowRoot || this;
-            return searchRoot.querySelector(selector);
-          },
-          enumerable: true,
-          configurable: true
-        });
-      }
-    };
-    if (arg1 && typeof arg2 === "string") {
-      return decorator("", {}, arg1, arg2);
-    }
-    return (target, propertyKey, descriptor) => {
-      let selector = "";
-      let options = {};
-      if (typeof arg1 === "string") {
-        selector = arg1;
-      } else if (typeof arg1 === "object") {
-        options = arg1;
-        selector = options.selector || "";
-      }
-      decorator(selector, options, target, propertyKey, descriptor);
+      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";
+          if (r === "shadow") {
+            return this.shadowRoot ? this.shadowRoot.querySelector(selector) : null;
+          }
+          if (r === "light") {
+            return this.querySelector(selector);
+          }
+          if (r === "all") {
+            return this.shadowRoot?.querySelector(selector) || this.querySelector(selector);
+          }
+          return (this.shadowRoot || this).querySelector(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
     };
   }
   var getQueryMetadata = (target) => {
@@ -2128,48 +2222,52 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/decorators/queryAll.ts
   var QUERY_ALL_METADATA_KEY = Symbol("simple-web-component:query-all");
-  function queryAll(arg1, arg2) {
-    const decorator = (selector, options, target, propertyKey, descriptor) => {
-      const isMethod = !!descriptor;
+  function queryAll(selector, options = {}) {
+    return (target, propertyKey, descriptor) => {
+      if (descriptor !== void 0) {
+        throw new Error(`@queryAll decorator cannot be used on methods. (Method: ${String(propertyKey)})`);
+      }
       const constructor = target.constructor;
       let queries = ReflectUtils.getMetadata(QUERY_ALL_METADATA_KEY, constructor);
       if (!queries) {
         queries = [];
         ReflectUtils.defineMetadata(QUERY_ALL_METADATA_KEY, queries, constructor);
       }
-      queries.push({ selector, options, propertyKey, isMethod });
-      if (!isMethod) {
-        Object.defineProperty(target, propertyKey, {
-          get() {
-            if (!selector)
-              return [this];
-            let searchRoot = this;
-            if (options.root === "shadow")
-              searchRoot = this.shadowRoot || this;
-            else if (options.root === "light")
-              searchRoot = this;
-            else
-              searchRoot = this.shadowRoot || this;
-            return searchRoot.querySelectorAll(selector);
-          },
-          enumerable: true,
-          configurable: true
-        });
-      }
-    };
-    if (arg1 && typeof arg2 === "string") {
-      return decorator("", {}, arg1, arg2);
-    }
-    return (target, propertyKey, descriptor) => {
-      let selector = "";
-      let options = {};
-      if (typeof arg1 === "string") {
-        selector = arg1;
-      } else if (typeof arg1 === "object") {
-        options = arg1;
-        selector = options.selector || "";
-      }
-      decorator(selector, options, target, propertyKey, descriptor);
+      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";
+          if (r === "shadow") {
+            return this.shadowRoot ? this.shadowRoot.querySelectorAll(selector) : [];
+          }
+          if (r === "light") {
+            return this.querySelectorAll(selector);
+          }
+          if (r === "all") {
+            const sNodes = this.shadowRoot ? Array.from(this.shadowRoot.querySelectorAll(selector)) : [];
+            const lNodes = Array.from(this.querySelectorAll(selector));
+            return [...sNodes, ...lNodes];
+          }
+          const root = this.shadowRoot || this;
+          return root.querySelectorAll(selector);
+        },
+        enumerable: true,
+        configurable: true
+      });
     };
   }
   var getQueryAllMetadata = (target) => {
@@ -7794,7 +7892,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",
@@ -9658,6 +9756,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: