@dooboostore/simple-web-component 1.0.15 → 1.0.16

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

@@ -1362,16 +1362,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 +1416,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 +1430,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,148 +1494,43 @@ var dooboostoreSimpleWebComponent = (() => {
 
   // src/utils/Utils.ts
   var SWC_NOT_FOUND = Symbol("SWC_NOT_FOUND");
-  var SwcUtils = class _SwcUtils {
+  var SwcUtils = class {
     static 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 (result !== obj && !(result instanceof HTMLElement)) {
-        return result;
+        if (current === null || current === void 0) return SWC_NOT_FOUND;
+        current = current[part];
       }
-      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);
+      return current;
     }
     static findNearestSwcHost(el) {
-      const hosts = this.findAllSwcHosts(el);
-      return hosts.length > 0 ? hosts[hosts.length - 1] : null;
+      let current = el instanceof Node && !(el instanceof HTMLElement) ? el.host : el;
+      current = current?.parentElement || current?.getRootNode()?.host;
+      while (current) {
+        if (getElementConfig(current)) return current;
+        current = current.parentElement || current?.getRootNode()?.host;
+      }
+      return void 0;
     }
+    /**
+     * Returns all SWC ancestors (excluding self) in [root, ..., parent] order.
+     */
     static 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 = this.findNearestSwcHost(el);
+      while (current) {
+        hosts.push(current);
+        current = this.findNearestSwcHost(current);
       }
       return hosts.reverse();
     }
     static getHosts(el) {
-      return this.findAllSwcHosts(el);
+      return [...this.findAllSwcHosts(el), 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;
+      return el;
     }
     static getAppHosts(el) {
       const hosts = this.getHosts(el);
@@ -1656,31 +1538,28 @@ var dooboostoreSimpleWebComponent = (() => {
     }
     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);
+      const appHostsWithoutSelf = appHosts.filter((h) => h !== el);
+      return appHostsWithoutSelf.length > 0 ? appHostsWithoutSelf[appHostsWithoutSelf.length - 1] : void 0;
     }
     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;
+      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;
+      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
       };
     }
   };
@@ -1795,6 +1674,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";
@@ -1883,10 +1763,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);
@@ -1947,44 +1829,79 @@ var dooboostoreSimpleWebComponent = (() => {
             this.innerHTML = lContent;
         }
         addEventListenerList.forEach((meta) => {
-          const { type, query: query2, root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault } = meta.options;
-          const targetEls = [];
-          if (!query2) {
-            targetEls.push(this);
-          } else {
-            const searchRoots = [];
+          const { selector, type, options } = meta;
+          const { root, capture, once, passive, stopPropagation, stopImmediatePropagation, preventDefault, delegate } = options;
+          if (delegate && selector && selector !== ":host") {
+            const bindRoots = [];
             const r = root || "auto";
             if (r === "auto") {
-              searchRoots.push(this.shadowRoot || this);
+              bindRoots.push(this.shadowRoot || this);
             } else if (r === "light") {
-              searchRoots.push(this);
+              bindRoots.push(this);
             } else if (r === "shadow") {
               if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
+                bindRoots.push(this.shadowRoot);
             } else if (r === "all") {
-              searchRoots.push(this);
+              bindRoots.push(this);
               if (this.shadowRoot)
-                searchRoots.push(this.shadowRoot);
+                bindRoots.push(this.shadowRoot);
             }
-            searchRoots.forEach((sr) => {
-              const found = sr.querySelectorAll(query2);
-              found.forEach((el) => targetEls.push(el));
+            bindRoots.forEach((bindRoot) => {
+              const handler = (event) => {
+                const target = event.target;
+                const matchedEl = target.closest(selector);
+                if (matchedEl && bindRoot.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]);
+                }
+              };
+              bindRoot.addEventListener(type, handler, { capture, once, passive });
+            });
+          } 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));
+              });
+            }
+            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);
             });
           }
-          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 options = { capture, once, passive };
-            el.addEventListener(type, handler, options);
-          });
         });
         if (super.connectedCallback)
           await super.connectedCallback();
@@ -2029,7 +1946,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 +1973,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 +2013,37 @@ 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() {
+          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 +2053,40 @@ 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() {
+          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) => {