@dooboostore/simple-web-component 1.0.33 → 1.0.35

package/dist/cjs/decorators/changedAttributeHost.js

@@ -19,27 +19,33 @@ var changedAttributeHost_exports = {};
 __export(changedAttributeHost_exports, {
   ON_ATTRIBUTE_CHANGED_METADATA_KEY: () => ON_ATTRIBUTE_CHANGED_METADATA_KEY,
   changedAttributeHost: () => changedAttributeHost,
+  convertAttributeValue: () => convertAttributeValue,
   findAllAttributeChangedMetadata: () => findAllAttributeChangedMetadata,
   getChangedAttributeMetadata: () => getChangedAttributeMetadata
 });
 module.exports = __toCommonJS(changedAttributeHost_exports);
 var import_core = require("@dooboostore/core");
 const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for("simple-web-component:on-attribute-changed");
-function changedAttributeHost(attributeName) {
+const convertValue = (val, type) => {
+  if (val === null || val === void 0) return val;
+  if (type === Number) return Number(val);
+  if (type === Boolean) return val === "false" || val === "0" ? false : true;
+  return val;
+};
+function changedAttributeHost(attributeName, options = {}) {
   return (target, propertyKey) => {
     const constructor = target.constructor;
-    let meta = import_core.ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
-    if (!meta) {
-      meta = /* @__PURE__ */ new Map();
-      import_core.ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);
+    let metaList = import_core.ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
+    if (!metaList) {
+      metaList = [];
+      import_core.ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);
     }
     const name = attributeName || String(propertyKey);
-    let methods = meta.get(name);
-    if (!methods) {
-      methods = [];
-      meta.set(name, methods);
-    }
-    if (!methods.includes(propertyKey)) methods.push(propertyKey);
+    metaList.push({
+      attributeName: name,
+      propertyKey,
+      options
+    });
   };
 }
 const getChangedAttributeMetadata = (target) => {
@@ -47,6 +53,20 @@ const getChangedAttributeMetadata = (target) => {
   return import_core.ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);
 };
 const findAllAttributeChangedMetadata = (target) => {
-  return import_core.ReflectUtils.findAllMapMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, target);
+  const constructor = target instanceof Function ? target : target.constructor;
+  const metaList = import_core.ReflectUtils.findAllMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];
+  const result = /* @__PURE__ */ new Map();
+  metaList.forEach((meta) => {
+    meta.forEach((item) => {
+      if (!result.has(item.attributeName)) {
+        result.set(item.attributeName, []);
+      }
+      result.get(item.attributeName).push(item);
+    });
+  });
+  return result;
+};
+const convertAttributeValue = (val, type) => {
+  return convertValue(val, type);
 };
 //# sourceMappingURL=changedAttributeHost.js.map

package/dist/cjs/decorators/changedAttributeHost.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/changedAttributeHost.ts"],
-  "sourcesContent": ["import {ReflectUtils} from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\n/**\n * @changedAttributeHost decorator - fires when any attribute on :host changes\n * Usage: @changedAttributeHost('data-product-id')\n */\nexport function changedAttributeHost(attributeName?: string): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let meta = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as Map<string, (string | symbol)[]>;\n    if (!meta) {\n      meta = new Map<string, (string | symbol)[]>();\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, meta, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    let methods = meta.get(name);\n    if (!methods) {\n      methods = [];\n      meta.set(name, methods);\n    }\n    if (!methods.includes(propertyKey)) methods.push(propertyKey);\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): Map<string, (string | symbol)[]> | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, (string | symbol)[]> => {\n  return ReflectUtils.findAllMapMetadata<string, string | symbol>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, target);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA2B;AAEpB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAMhG,SAAS,qBAAqB,eAAyC;AAC5E,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,OAAO,yBAAa,eAAe,mCAAmC,WAAW;AACrF,QAAI,CAAC,MAAM;AACT,aAAO,oBAAI,IAAiC;AAC5C,+BAAa,eAAe,mCAAmC,MAAM,WAAW;AAAA,IAClF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,QAAI,UAAU,KAAK,IAAI,IAAI;AAC3B,QAAI,CAAC,SAAS;AACZ,gBAAU,CAAC;AACX,WAAK,IAAI,MAAM,OAAO;AAAA,IACxB;AACA,QAAI,CAAC,QAAQ,SAAS,WAAW,EAAG,SAAQ,KAAK,WAAW;AAAA,EAC9D;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA8D;AACxG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAAkD;AAChG,SAAO,yBAAa,mBAA4C,mCAAmC,MAAM;AAC3G;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\n\nexport const ON_ATTRIBUTE_CHANGED_METADATA_KEY = Symbol.for('simple-web-component:on-attribute-changed');\n\nexport interface ChangedAttributeHostOptions {\n  type?: typeof Number | typeof Boolean | typeof String;\n  while?: 'connected';\n}\n\nexport interface ChangedAttributeHostMetadata {\n  attributeName: string;\n  propertyKey: string | symbol;\n  options: ChangedAttributeHostOptions;\n}\n\nconst convertValue = (val: any, type: any): any => {\n  if (val === null || val === undefined) return val;\n  if (type === Number) return Number(val);\n  if (type === Boolean) return val === 'false' || val === '0' ? false : true;\n  return val;\n};\n\n/**\n * @changedAttributeHost decorator - fires when any attribute on :host changes\n * Usage: @changedAttributeHost('data-product-id')\n *        @changedAttributeHost('count', { type: Number })\n */\nexport function changedAttributeHost(attributeName?: string, options: ChangedAttributeHostOptions = {}): MethodDecorator {\n  return (target: Object, propertyKey: string | symbol) => {\n    const constructor = target.constructor;\n    let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeHostMetadata[];\n    if (!metaList) {\n      metaList = [];\n      ReflectUtils.defineMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, metaList, constructor);\n    }\n\n    const name = attributeName || String(propertyKey);\n    metaList.push({\n      attributeName: name,\n      propertyKey,\n      options\n    });\n  };\n}\n\nexport const getChangedAttributeMetadata = (target: any): ChangedAttributeHostMetadata[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor);\n};\n\nexport const findAllAttributeChangedMetadata = (target: any): Map<string, ChangedAttributeHostMetadata[]> => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  const metaList = ReflectUtils.findAllMetadata<ChangedAttributeHostMetadata[]>(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) || [];\n\n  const result = new Map<string, ChangedAttributeHostMetadata[]>();\n  metaList.forEach(meta => {\n    meta.forEach(item => {\n      if (!result.has(item.attributeName)) {\n        result.set(item.attributeName, []);\n      }\n      result.get(item.attributeName)!.push(item);\n    });\n  });\n  return result;\n};\n\nexport const convertAttributeValue = (val: any, type?: typeof Number | typeof Boolean | typeof String): any => {\n  return convertValue(val, type);\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;AAEtB,MAAM,oCAAoC,OAAO,IAAI,2CAA2C;AAavG,MAAM,eAAe,CAAC,KAAU,SAAmB;AACjD,MAAI,QAAQ,QAAQ,QAAQ,OAAW,QAAO;AAC9C,MAAI,SAAS,OAAQ,QAAO,OAAO,GAAG;AACtC,MAAI,SAAS,QAAS,QAAO,QAAQ,WAAW,QAAQ,MAAM,QAAQ;AACtE,SAAO;AACT;AAOO,SAAS,qBAAqB,eAAwB,UAAuC,CAAC,GAAoB;AACvH,SAAO,CAAC,QAAgB,gBAAiC;AACvD,UAAM,cAAc,OAAO;AAC3B,QAAI,WAAW,yBAAa,eAAe,mCAAmC,WAAW;AACzF,QAAI,CAAC,UAAU;AACb,iBAAW,CAAC;AACZ,+BAAa,eAAe,mCAAmC,UAAU,WAAW;AAAA,IACtF;AAEA,UAAM,OAAO,iBAAiB,OAAO,WAAW;AAChD,aAAS,KAAK;AAAA,MACZ,eAAe;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEO,MAAM,8BAA8B,CAAC,WAA4D;AACtG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,yBAAa,YAAY,mCAAmC,WAAW;AAChF;AAEO,MAAM,kCAAkC,CAAC,WAA6D;AAC3G,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,QAAM,WAAW,yBAAa,gBAAgD,mCAAmC,WAAW,KAAK,CAAC;AAElI,QAAM,SAAS,oBAAI,IAA4C;AAC/D,WAAS,QAAQ,UAAQ;AACvB,SAAK,QAAQ,UAAQ;AACnB,UAAI,CAAC,OAAO,IAAI,KAAK,aAAa,GAAG;AACnC,eAAO,IAAI,KAAK,eAAe,CAAC,CAAC;AAAA,MACnC;AACA,aAAO,IAAI,KAAK,aAAa,EAAG,KAAK,IAAI;AAAA,IAC3C,CAAC;AAAA,EACH,CAAC;AACD,SAAO;AACT;AAEO,MAAM,wBAAwB,CAAC,KAAU,SAA+D;AAC7G,SAAO,aAAa,KAAK,IAAI;AAC/B;",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -94,7 +94,7 @@ const handleGlobalSwcEvent = async (event) => {
   }
 };
 function buildEnv(configWindow) {
-  const win = configWindow || (typeof window !== "undefined" ? window : void 0);
+  const win = configWindow;
   const doc = win?.document;
   const builtInTagMap = /* @__PURE__ */ new Map();
   for (const [cls, tag] of import_config.HTML_TAG_ENTRIES) {
@@ -133,7 +133,7 @@ const setupPrototype = (proto) => {
       const aConf = getElementConfig(ancestors[i]);
       if (aConf?.window) return aConf.window;
     }
-    return typeof window !== "undefined" ? window : void 0;
+    return getElementConfig(this).window ?? (typeof window !== "undefined" ? window : void 0);
   };
   proto._invokeLifecycleMethod = function(methodName, hostSet, extraArgs = []) {
     ensureInit(this);
@@ -142,7 +142,13 @@ const setupPrototype = (proto) => {
     const app = useHostSet?.$appHost?.simpleApplication;
     if (app) {
       const otherStorage = /* @__PURE__ */ new Map();
-      const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST_SET, data: useHostSet }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST, data: useHostSet.$host }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOSTS, data: useHostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_APP_HOST, data: useHostSet.$firstAppHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
+      const situations = new import_Inject.SituationTypeContainers([new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOST_SET, data: useHostSet }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOST, data: useHostSet.$appHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.APP_HOSTS, data: useHostSet.$appHosts }), new import_Inject.SituationTypeContainer({
+        situationType: import_types.InjectSituationType.HOST,
+        data: useHostSet.$host
+      }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.HOSTS, data: useHostSet.$hosts }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.FIRST_HOST, data: useHostSet.$firstHost }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_HOST, data: useHostSet.$lastHost }), new import_Inject.SituationTypeContainer({
+        situationType: import_types.InjectSituationType.FIRST_APP_HOST,
+        data: useHostSet.$firstAppHost
+      }), new import_Inject.SituationTypeContainer({ situationType: import_types.InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost })]);
       otherStorage.set(import_Inject.SituationTypeContainers, situations);
       return app.simstanceManager.executeBindParameterSim(
         {
@@ -235,195 +241,243 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const swcOnEvents = import_config.DOM_EVENT_NAMES.map((e) => `swc-on-${e}`);
   const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.options.name).filter(Boolean);
   const hostAttributes = attributeList.filter((it) => it.selector === ":host").map((it) => it.options.name || String(it.propertyKey));
-  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([
-    ...metadata.observedAttributes ?? [],
-    ...attrChangeMap.keys(),
-    ...attributeApplyNames,
-    ...hostAttributes,
-    ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean),
-    ...swcLifecycleAttributes,
-    ...swcOnEvents
-  ])];
+  const originalStaticObservedAttributes = constructor.observedAttributes ?? [];
+  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map((it) => it.options.attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
   const connectedInnerHtmlList = (0, import_lifecycles.getOnConnectedInnerHtmlMetadata)(constructor) || [];
   const proto = constructor.prototype;
   setupPrototype(proto);
+  let helperHostSet = null;
   const originalConnected = proto.connectedCallback;
-  proto.connectedCallback = function() {
+  proto.connectedCallback = async function() {
     ensureInit(this);
-    const hostSet = import_Utils.SwcUtils.getHostSet(this);
-    const appHost = hostSet.$appHost;
-    const conf = getElementConfig(this);
-    const currentWin = this._resolveWindow(conf);
-    if ((connectedInnerHtmlList.some((it) => it.options.useShadow === true) || conf?.useShadow === true) && !this.shadowRoot) {
-      this.attachShadow({ mode: "open" });
-    }
-    this._executeSwcScript("swc-on-before-connected", hostSet);
-    const bMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_CONNECTED_METADATA_KEY);
-    if (bMethods) {
-      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
-    }
-    if (connectedInnerHtmlList.length > 0) {
-      let sContent = "", lContent = "";
-      for (const meta of connectedInnerHtmlList) {
-        const res = this._invokeLifecycleMethod(meta.propertyKey, hostSet);
-        if (res !== void 0) {
-          if (meta.options.useShadow) sContent += res;
-          else lContent += res;
-        }
+    helperHostSet = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
+    const appHost = helperHostSet.$appHost;
+    try {
+      if (appHost && typeof appHost._connected === "function") {
+        await appHost._connected(this);
+      } else if (appHost && typeof appHost) {
+        appHost._connected_safari ?? (appHost._connected_safari = []);
+        appHost._connected_safari.push(this);
       }
-      if (this.shadowRoot) this.shadowRoot.innerHTML = sContent;
-      if (lContent) this.innerHTML = lContent;
-    }
-    const root = this.getRootNode();
-    if (!globalDelegatedRoots.has(root)) {
-      import_config.DOM_EVENT_NAMES.forEach((type) => {
-        root.addEventListener(type, handleGlobalSwcEvent);
-      });
-      globalDelegatedRoots.add(root);
-    }
-    const delegateListeners = [];
-    const nonDelegateListeners = [];
-    addEventListenerList.forEach((meta) => {
-      if (meta.options.delegate && meta.selector !== ":window" && meta.selector !== ":document" && meta.selector !== ":parentHost" && meta.selector !== ":appHost" && meta.selector !== ":firstHost" && meta.selector !== ":lastHost" && meta.selector !== ":firstAppHost" && meta.selector !== ":lastAppHost" && meta.selector !== ":hosts" && meta.selector !== ":appHosts" && meta.selector !== ":host" && meta.selector !== "") {
-        delegateListeners.push(meta);
-      } else {
-        nonDelegateListeners.push(meta);
+      const conf = getElementConfig(this);
+      const currentWin = this._resolveWindow(conf);
+      const shadowMode = conf?.useShadow || connectedInnerHtmlList.find((it) => it.options.useShadow)?.options.useShadow;
+      if (shadowMode && !this.shadowRoot) {
+        const mode = shadowMode === true ? "open" : shadowMode;
+        this.attachShadow({ mode });
       }
-    });
-    const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
-    delegateListeners.forEach((meta) => {
-      const r = meta.options.root || "auto";
-      const rootKey = `${meta.type}:${r}`;
-      if (!delegatesByTypeAndRoot.has(rootKey)) {
-        delegatesByTypeAndRoot.set(rootKey, []);
+      const bMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_CONNECTED_METADATA_KEY);
+      if (bMethods) {
+        for (const m of bMethods) await this._invokeLifecycleMethod(m, helperHostSet);
       }
-      delegatesByTypeAndRoot.get(rootKey).push(meta);
-    });
-    delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
-      const [type, rStr] = typeRootKey.split(":");
-      const r = rStr === "auto" ? "auto" : rStr;
-      const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
-      const bindRoots = [];
-      if (r === "auto") bindRoots.push(this.shadowRoot || this);
-      else if (r === "light") bindRoots.push(this);
-      else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
-      else if (r === "all") {
-        bindRoots.push(this);
-        if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+      this._executeSwcScript("swc-on-before-connected", helperHostSet);
+      if (connectedInnerHtmlList.length > 0) {
+        let sContent = "", lContent = "";
+        for (const meta of connectedInnerHtmlList) {
+          let res = await this._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
+          const actionExpression = new import_core.ActionExpression(res, {
+            expression: {
+              replace: {
+                start: meta.options.replaceWrap?.start || "{%{",
+                end: meta.options.replaceWrap?.end || "}%}"
+              },
+              callReturn: {
+                start: meta.options.replaceWrap?.start || "{%{=",
+                end: meta.options.replaceWrap?.end || "}%}"
+              },
+              call: {
+                start: meta.options.replaceWrap?.start || "{%{@",
+                end: meta.options.replaceWrap?.end || "}%}"
+              }
+            }
+          });
+          actionExpression.getExpressions().filter((it) => it.type === "replace").forEach((it) => {
+            try {
+              const sr = import_core.FunctionUtils.executeReturn({ script: it.script, context: this, args: helperHostSet });
+              actionExpression.replace(it, sr);
+            } catch (e) {
+              console.error(`[SWC] Failed to execute connectedInnerHTML:`, e);
+            }
+          });
+          res = actionExpression.getUnprocessedTemplate();
+          if (res !== void 0) {
+            if (meta.options.useShadow || conf?.useShadow) sContent += res;
+            else lContent += res;
+          }
+        }
+        try {
+          if (this.shadowRoot) {
+            this.shadowRoot.innerHTML = sContent;
+          }
+          if (lContent) {
+            this.innerHTML = lContent;
+          }
+        } catch (e) {
+          console.error("[ElementDefine] innerHTML setting error:", e);
+        }
       }
-      bindRoots.forEach((br) => {
-        const sortedMetaList = [...metaList].sort((a, b) => {
-          const aStop = a.options.stopPropagation ? 1 : 0;
-          const bStop = b.options.stopPropagation ? 1 : 0;
-          return bStop - aStop;
+      const root = this.getRootNode();
+      if (!globalDelegatedRoots.has(root)) {
+        import_config.DOM_EVENT_NAMES.forEach((type) => {
+          root.addEventListener(type, handleGlobalSwcEvent);
         });
-        const unifiedHandler = async (event) => {
-          for (const meta of sortedMetaList) {
-            const { selector, options } = meta;
-            const matchedEl = event.target.closest(selector);
-            if (matchedEl && br.contains(matchedEl)) {
-              if (options.filter) {
-                const helper = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
-                if (!options.filter(event, helper)) {
-                  continue;
+        globalDelegatedRoots.add(root);
+      }
+      const delegateListeners = [];
+      const nonDelegateListeners = [];
+      addEventListenerList.forEach((meta) => {
+        if (meta.options.delegate && meta.selector !== ":window" && meta.selector !== ":document" && meta.selector !== ":parentHost" && meta.selector !== ":appHost" && meta.selector !== ":firstHost" && meta.selector !== ":lastHost" && meta.selector !== ":firstAppHost" && meta.selector !== ":lastAppHost" && meta.selector !== ":hosts" && meta.selector !== ":appHosts" && meta.selector !== ":host" && meta.selector !== "") {
+          delegateListeners.push(meta);
+        } else {
+          nonDelegateListeners.push(meta);
+        }
+      });
+      const delegatesByTypeAndRoot = /* @__PURE__ */ new Map();
+      delegateListeners.forEach((meta) => {
+        const r = meta.options.root || "auto";
+        const rootKey = `${meta.type}:${r}`;
+        if (!delegatesByTypeAndRoot.has(rootKey)) {
+          delegatesByTypeAndRoot.set(rootKey, []);
+        }
+        delegatesByTypeAndRoot.get(rootKey).push(meta);
+      });
+      delegatesByTypeAndRoot.forEach((metaList, typeRootKey) => {
+        const [type, rStr] = typeRootKey.split(":");
+        const r = rStr === "auto" ? "auto" : rStr;
+        const opts = { capture: metaList[0].options.capture, once: metaList[0].options.once, passive: metaList[0].options.passive };
+        const bindRoots = [];
+        if (r === "auto") bindRoots.push(this.shadowRoot || this);
+        else if (r === "light") bindRoots.push(this);
+        else if (r === "shadow" && this.shadowRoot) bindRoots.push(this.shadowRoot);
+        else if (r === "all") {
+          bindRoots.push(this);
+          if (this.shadowRoot) bindRoots.push(this.shadowRoot);
+        }
+        bindRoots.forEach((br) => {
+          const sortedMetaList = [...metaList].sort((a, b) => {
+            const aStop = a.options.stopPropagation ? 1 : 0;
+            const bStop = b.options.stopPropagation ? 1 : 0;
+            return bStop - aStop;
+          });
+          const unifiedHandler = async (event) => {
+            for (const meta of sortedMetaList) {
+              const { selector, options } = meta;
+              const matchedEl = event.target.closest(selector);
+              if (matchedEl && br.contains(matchedEl)) {
+                if (options.filter) {
+                  const helper = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
+                  if (!options.filter(event, helper)) {
+                    continue;
+                  }
                 }
+                if (options.stopPropagation) event.stopPropagation();
+                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+                if (options.preventDefault) event.preventDefault();
+                const currentHostSet = import_Utils.SwcUtils.getHostSet(this);
+                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
+                await this[meta.propertyKey](event, { ...currentHostSet, $matchedElement: matchedEl }, args);
+                if (event.cancelBubble) break;
               }
-              if (options.stopPropagation) event.stopPropagation();
-              if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-              if (options.preventDefault) event.preventDefault();
-              const currentHostSet = import_Utils.SwcUtils.getHostSet(this);
-              const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-              await this[meta.propertyKey](event, currentHostSet, matchedEl, args);
-              if (event.cancelBubble) break;
             }
+          };
+          br.addEventListener(type, unifiedHandler, opts);
+          this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+        });
+      });
+      nonDelegateListeners.forEach((meta) => {
+        const { selector, type, options } = meta;
+        const opts = { capture: options.capture, once: options.once, passive: options.passive };
+        const bindTargets = [];
+        const r = options.root || "auto";
+        const applyRootOption = (target) => {
+          if (!target) return;
+          if (r === "auto") {
+            bindTargets.push(target.shadowRoot || target);
+          } else {
+            if (r === "light" || r === "all") bindTargets.push(target);
+            if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
           }
         };
-        br.addEventListener(type, unifiedHandler, opts);
-        this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
-      });
-    });
-    nonDelegateListeners.forEach((meta) => {
-      const { selector, type, options } = meta;
-      const opts = { capture: options.capture, once: options.once, passive: options.passive };
-      const bindTargets = [];
-      const r = options.root || "auto";
-      const applyRootOption = (target) => {
-        if (!target) return;
-        if (r === "auto") {
-          bindTargets.push(target.shadowRoot || target);
-        } else {
-          if (r === "light" || r === "all") bindTargets.push(target);
-          if ((r === "shadow" || r === "all") && target.shadowRoot) bindTargets.push(target.shadowRoot);
-        }
-      };
-      if (selector === ":window") bindTargets.push(currentWin);
-      else if (selector === ":document") bindTargets.push(currentWin.document);
-      else if (selector === ":parentHost") applyRootOption(hostSet.$parentHost);
-      else if (selector === ":appHost") applyRootOption(hostSet.$appHost);
-      else if (selector === ":firstHost") applyRootOption(hostSet.$firstHost);
-      else if (selector === ":lastHost") applyRootOption(hostSet.$lastHost);
-      else if (selector === ":firstAppHost") applyRootOption(hostSet.$firstAppHost);
-      else if (selector === ":lastAppHost") applyRootOption(hostSet.$lastAppHost);
-      else if (selector === ":hosts") hostSet.$hosts.forEach(applyRootOption);
-      else if (selector === ":appHosts") hostSet.$appHosts.forEach(applyRootOption);
-      else if (selector === ":host" || !selector) applyRootOption(this);
-      else {
-        const searchRoots = [];
-        if (r === "auto") searchRoots.push(this.shadowRoot || this);
-        else if (r === "light") searchRoots.push(this);
-        else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
-        else if (r === "all") {
-          searchRoots.push(this);
-          if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+        if (selector === ":window") bindTargets.push(currentWin);
+        else if (selector === ":document") bindTargets.push(currentWin.document);
+        else if (selector === ":parentHost") applyRootOption(helperHostSet.$parentHost);
+        else if (selector === ":appHost") applyRootOption(helperHostSet.$appHost);
+        else if (selector === ":firstHost") applyRootOption(helperHostSet.$firstHost);
+        else if (selector === ":lastHost") applyRootOption(helperHostSet.$lastHost);
+        else if (selector === ":firstAppHost") applyRootOption(helperHostSet.$firstAppHost);
+        else if (selector === ":lastAppHost") applyRootOption(helperHostSet.$lastAppHost);
+        else if (selector === ":hosts") helperHostSet.$hosts.forEach(applyRootOption);
+        else if (selector === ":appHosts") helperHostSet.$appHosts.forEach(applyRootOption);
+        else if (selector === ":host" || !selector) applyRootOption(this);
+        else {
+          const searchRoots = [];
+          if (r === "auto") searchRoots.push(this.shadowRoot || this);
+          else if (r === "light") searchRoots.push(this);
+          else if (r === "shadow" && this.shadowRoot) searchRoots.push(this.shadowRoot);
+          else if (r === "all") {
+            searchRoots.push(this);
+            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          }
+          searchRoots.forEach((sr) => {
+            sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
+          });
         }
-        searchRoots.forEach((sr) => {
-          sr.querySelectorAll(selector).forEach((el) => bindTargets.push(el));
+        bindTargets.forEach((t) => {
+          const handler = async (event) => {
+            if (options.filter) {
+              const helper = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, t);
+              if (!options.filter(event, { currentThis: this, helper })) {
+                return;
+              }
+            }
+            if (options.stopPropagation) event.stopPropagation();
+            if (options.stopImmediatePropagation) event.stopImmediatePropagation();
+            if (options.preventDefault) event.preventDefault();
+            const currentHostSet = import_Utils.SwcUtils.getHostSet(this);
+            const args = { event, ...currentHostSet, $el: t, $root: t };
+            await this[meta.propertyKey](event, { currentHostSet, $$matchedElement: event.currentTarget }, args);
+          };
+          t.addEventListener(type, handler, opts);
+          if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
+            this._boundListeners.push({ target: t, type, handler, options: opts });
+          }
         });
+      });
+      if (originalConnected) await originalConnected.apply(this);
+      const aMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_AFTER_CONNECTED_METADATA_KEY);
+      if (aMethods) {
+        for (const m of aMethods) await this._invokeLifecycleMethod(m, helperHostSet);
       }
-      bindTargets.forEach((t) => {
-        const handler = async (event) => {
-          if (options.filter) {
-            const helper = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, t);
-            if (!options.filter(event, helper)) {
-              return;
+      this._executeSwcScript("swc-on-connected", helperHostSet);
+      this._executeSwcScript("swc-on-after-connected", helperHostSet);
+      this.__swc_connected = true;
+      for (let [name2, metaList] of Array.from(attrChangeMap)) {
+        for (const meta of metaList) {
+          if (meta.options.while === "connected") {
+            const val = (0, import_attribute.getAttributeValue)(this, name2, { type: meta.options.type });
+            if (val !== null) {
+              await this[meta.propertyKey](val, null, name2, helperHostSet);
             }
           }
-          if (options.stopPropagation) event.stopPropagation();
-          if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-          if (options.preventDefault) event.preventDefault();
-          const currentHostSet = import_Utils.SwcUtils.getHostSet(this);
-          const args = { event, ...currentHostSet, $el: t, $root: t };
-          await this[meta.propertyKey](event, currentHostSet, args);
-        };
-        t.addEventListener(type, handler, opts);
-        if (options.removeOnDisconnected === true || t === currentWin || t === currentWin.document) {
-          this._boundListeners.push({ target: t, type, handler, options: opts });
         }
-      });
-    });
-    if (originalConnected) originalConnected.apply(this);
-    const aMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_AFTER_CONNECTED_METADATA_KEY);
-    if (aMethods) {
-      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
-    }
-    this._executeSwcScript("swc-on-connected", hostSet);
-    this._executeSwcScript("swc-on-after-connected", hostSet);
-    this.__swc_connected = true;
-    const appHostss = import_Utils.SwcUtils.findAllParentAppHostsDirect(this);
-    if (appHost && typeof appHost._connected === "function") {
-      appHost._connected(this);
-    } else if (appHost && typeof appHost) {
-      appHost._connected_safari ?? (appHost._connected_safari = []);
-      appHost._connected_safari.push(this);
+      }
+    } finally {
+      if (appHost && typeof appHost._connectedDone === "function") {
+        await appHost._connectedDone(this);
+      }
     }
   };
   const originalDisconnected = proto.disconnectedCallback;
   proto.disconnectedCallback = function() {
-    const hostSet = import_Utils.SwcUtils.getHostSet(this);
-    this._executeSwcScript("swc-on-before-disconnected", hostSet);
+    console.log("disconnnnnnnnnnnnnnnnnnn", helperHostSet, this);
+    const appHost = helperHostSet.$appHost;
+    if (appHost && typeof appHost._disconnected === "function") {
+      appHost._disconnected(this);
+    }
+    this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
     const bMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_BEFORE_DISCONNECTED_METADATA_KEY);
     if (bMethods) {
-      for (const m of bMethods) this._invokeLifecycleMethod(m, hostSet);
+      for (const m of bMethods) this._invokeLifecycleMethod(m, helperHostSet);
     }
     if (this._boundListeners) {
       this._boundListeners.forEach((l) => l.target.removeEventListener(l.type, l.handler, l.options));
@@ -432,15 +486,11 @@ const elementDefine = (name, config = {}) => (constructor) => {
     if (originalDisconnected) originalDisconnected.apply(this);
     const aMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_AFTER_DISCONNECTED_METADATA_KEY);
     if (aMethods) {
-      for (const m of aMethods) this._invokeLifecycleMethod(m, hostSet);
+      for (const m of aMethods) this._invokeLifecycleMethod(m, helperHostSet);
     }
-    this._executeSwcScript("swc-on-disconnected", hostSet);
-    this._executeSwcScript("swc-on-after-disconnected", hostSet);
+    this._executeSwcScript("swc-on-disconnected", helperHostSet);
+    this._executeSwcScript("swc-on-after-disconnected", helperHostSet);
     this.__swc_connected = false;
-    const appHost = hostSet.$appHost;
-    if (appHost && typeof appHost._disconnected === "function") {
-      appHost._disconnected(this);
-    }
   };
   const originalAdopted = proto.adoptedCallback;
   proto.adoptedCallback = function() {
@@ -465,18 +515,20 @@ const elementDefine = (name, config = {}) => (constructor) => {
     let processedVal = newVal;
     if (newVal !== null) {
       const ae = new import_core.ActionExpression(newVal);
-      const expr = ae.getFirstExpression("call-return");
+      const expr = ae.getFirstExpression("callReturn");
       if (expr) {
         const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
+        const helperAndHostSet = import_Utils.SwcUtils.getHelperAndHostSet(win2, this);
+        const script = import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win2.document);
         try {
           const result = import_core.FunctionUtils.executeReturn({
-            script: import_core_web.ConvertUtils.decodeHtmlEntity(expr.script, win2.document),
+            script,
             context: this,
-            args: import_Utils.SwcUtils.getHelperAndHostSet(win2, this)
+            args: helperAndHostSet
           });
-          processedVal = String(result);
+          processedVal = result;
         } catch (e) {
-          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}:`, e);
+          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${helperAndHostSet}`, e);
           processedVal = newVal;
         }
       }
@@ -491,9 +543,15 @@ const elementDefine = (name, config = {}) => (constructor) => {
     if (hostCustomEventMeta && newVal !== null) {
       this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
     }
-    const mKeys = attrChangeMap.get(name2);
-    if (mKeys && Array.isArray(mKeys)) {
-      for (const key of mKeys) this[key](processedVal, old, name2, hSet);
+    const metaList = attrChangeMap.get(name2);
+    if (metaList && Array.isArray(metaList)) {
+      for (const meta of metaList) {
+        if (meta.options.while === "connected" && !this.__swc_connected) {
+          continue;
+        }
+        const convertedVal = (0, import_changedAttributeHost.convertAttributeValue)(processedVal, meta.options.type);
+        this[meta.propertyKey](convertedVal, old, name2, hSet);
+      }
     }
   };
   Object.defineProperty(constructor, "observedAttributes", {