@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/dist/esm/decorators/elementDefine.js

@@ -1,12 +1,13 @@
-import { ActionExpression, FunctionUtils, ReflectUtils, Subject } from "@dooboostore/core";
-import { debounceTime, distinctUntilChanged, throttleTime } from "@dooboostore/core/message/operators";
-import { getAddEventListenerMetadata } from "./addEventListener.js";
+import { ActionExpression, FunctionUtils, ReflectUtils } from "@dooboostore/core";
+import { EventListenerLifeCycler } from "./addEventListener.js";
+import { MutationObserverLifeCycler } from "./mutationObserver.js";
+import { ResizeObserverLifeCycler } from "./resizeObserver.js";
+import { IntersectionObserverLifeCycler } from "./intersectionObserver.js";
 import { findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY } from "./lifecycles.js";
-import { getEmitCustomEventMetadataList } from "./emitCustomEvent.js";
-import { convertAttributeValue, findAllAttributeChangedMetadata } from "./changedAttribute.js";
-import { findAllAttributeApplyMetadata, findAllAttributeMetadata, getAttributeValue } from "./applyAttribute.js";
-import { getQueryMetadata } from "./query.js";
-import { getQueryAllMetadata } from "./queryAll.js";
+import { EmitCustomEventLifeCycler } from "./emitCustomEvent.js";
+import { ChangedAttributeLifeCycler } from "./changedAttribute.js";
+import { findAllAttributeApplyMetadata, findAllAttributeMetadata } from "./applyAttribute.js";
+import { getQueryMetadata, getQueryAllMetadata } from "./query.js";
 import { SwcUtils } from "../utils/Utils.js";
 import { DOM_EVENT_NAMES, HTML_TAG_ENTRIES } from "../config/config.js";
 import { SituationTypeContainer, SituationTypeContainers } from "@dooboostore/simple-boot/decorators/inject/Inject";
@@ -15,6 +16,10 @@ import { ConvertUtils, ElementApply } from "@dooboostore/core-web";
 import { isSSR } from "../elements/SwcAppMixin.js";
 import { findAllStateMetadata } from "./state.js";
 import { findAllPropertyMetadata } from "./applyProperty.js";
+import { MessageSubscribeLifeCycler } from "./subscribeSwcAppMessageWhileConnected.js";
+import { RouteSubscribeLifeCycler } from "./subscribeSwcAppRouteChangeWhileConnected.js";
+import { SetIntervalLifeCycler } from "./setInterval.js";
+import { SetTimeoutLifeCycler } from "./setTimeout.js";
 const ELEMENT_CONFIG_KEY = Symbol.for("simple-web-component:element-config");
 const getElementConfig = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
@@ -24,7 +29,6 @@ const ensureInit = (inst) => {
   if (!inst.__swc_initialized) {
     inst._swcId = inst?.getAttribute?.("swc-use-ssr") ?? "s" + Math.random().toString(36).substring(2, 11).toLowerCase();
     inst._emitHandlers = /* @__PURE__ */ new Map();
-    inst._boundListeners = [];
     inst.__swc_initialized = true;
     const target = inst instanceof Function ? inst : inst.constructor;
     const attributeAllList = findAllAttributeMetadata(target).filter((it) => it.type === "property");
@@ -223,10 +227,6 @@ const elementDefine = (name, config = {}) => (constructor) => {
     }
     metadata.extends = extendsTagName;
   }
-  const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
-  const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
-  const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
-  const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const attributeList = findAllAttributeMetadata(constructor);
   const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
   const swcLifecycleAttributes = ["swc-on-constructor", "swc-on-connected", "swc-on-disconnected", "swc-on-before-connected", "swc-on-after-connected", "swc-on-before-disconnected", "swc-on-after-disconnected", "swc-on-before-adopted", "swc-on-after-adopted", "swc-on-attribute-changed"];
@@ -234,10 +234,222 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const attributeApplyNames = Array.from(applyAttributeMap.values()).map((it) => it.targetAttributeName).filter(Boolean);
   const hostAttributes = attributeList.filter((it) => it.selector === "$this").map((it) => it.propertyKey || String(it.propertyKey));
   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 proto = constructor.prototype;
   setupPrototype(proto, win);
   let helperHostSet = null;
+  const eventCycler = new EventListenerLifeCycler();
+  const cyclers = [
+    eventCycler,
+    new ChangedAttributeLifeCycler(),
+    new EmitCustomEventLifeCycler(),
+    new ResizeObserverLifeCycler(),
+    new IntersectionObserverLifeCycler(),
+    new MutationObserverLifeCycler(),
+    new MessageSubscribeLifeCycler(),
+    new RouteSubscribeLifeCycler(),
+    new SetIntervalLifeCycler(),
+    new SetTimeoutLifeCycler()
+  ];
+  const cyclerObservedAttributes = cyclers.flatMap((c) => c.getObservedAttributeNames?.(constructor) ?? []);
+  const mergedObservedAttributes = [.../* @__PURE__ */ new Set([...metadata.observedAttributes ?? [], ...originalStaticObservedAttributes, ...cyclerObservedAttributes, ...attributeApplyNames, ...hostAttributes, ...swcLifecycleAttributes, ...swcOnEvents])];
+  const buildObservers = async (helperHostSet2) => {
+    const inst = helperHostSet2.$this;
+    const observers = [];
+    let resizeObserverSet = [];
+    let mutationObserverSet = [];
+    let intersectionObserverSet = [];
+    const resolveDelegateRoots = (delegateRoot) => {
+      const r = delegateRoot || "auto";
+      const roots = [];
+      if (r === "auto") roots.push(inst.shadowRoot || inst);
+      else if (r === "light") roots.push(inst);
+      else if (r === "shadow" && inst.shadowRoot) roots.push(inst.shadowRoot);
+      else if (r === "all") {
+        roots.push(inst);
+        if (inst.shadowRoot) roots.push(inst.shadowRoot);
+      }
+      return roots;
+    };
+    for (const c of cyclers) {
+      const result = await c.onConnected?.(helperHostSet2, resizeObserverSet);
+      if (!result) continue;
+      if (result.resizeObserverSet?.length) resizeObserverSet = [...resizeObserverSet, ...result.resizeObserverSet];
+      if (result.mutationObserverSet?.length) mutationObserverSet = [...mutationObserverSet, ...result.mutationObserverSet];
+      if (result.intersectionObserverSet?.length) intersectionObserverSet = [...intersectionObserverSet, ...result.intersectionObserverSet];
+    }
+    const resizeDelegates = (resizeObserverSet ?? []).filter((t) => t.delegate && typeof t.target === "string");
+    let resizeObserve;
+    let resizeUnobserve;
+    const resizeObserved = /* @__PURE__ */ new WeakSet();
+    if (resizeObserverSet?.length) {
+      const roCallbacks = [...new Set(resizeObserverSet.map((e) => e.callback))];
+      const ro = new win.ResizeObserver((entries, obs) => {
+        for (const cb of roCallbacks) cb(entries, obs);
+      });
+      for (const e of resizeObserverSet) {
+        if (e.delegate) continue;
+        if (typeof e.target === "string") {
+          const scope = resolveDelegateRoots(e.delegateRoot);
+          for (const sr of scope) {
+            sr.querySelectorAll(e.target).forEach((el) => {
+              if (!resizeObserved.has(el)) {
+                ro.observe(el, e.options);
+                resizeObserved.add(el);
+              }
+            });
+          }
+          continue;
+        }
+        ro.observe(e.target, e.options);
+        if (e.target instanceof Element) resizeObserved.add(e.target);
+      }
+      resizeObserve = (el, opts) => {
+        if (resizeObserved.has(el)) return;
+        ro.observe(el, opts);
+        resizeObserved.add(el);
+      };
+      resizeUnobserve = (el) => {
+        if (!resizeObserved.has(el)) return;
+        ro.unobserve(el);
+        resizeObserved.delete(el);
+      };
+      observers.push(ro);
+    }
+    const intersectionDelegates = [];
+    for (const group of intersectionObserverSet) {
+      const ioCallbacks = [...new Set(group.observeTargets.map((e) => e.callback))];
+      const io = new win.IntersectionObserver((entries, obs) => {
+        for (const cb of ioCallbacks) cb(entries, obs);
+      }, group.options);
+      const ioObserved = /* @__PURE__ */ new WeakSet();
+      for (const e of group.observeTargets) {
+        if (e.delegate) {
+          const target = e.target;
+          const observe = (el) => {
+            if (ioObserved.has(el)) return;
+            io.observe(el);
+            ioObserved.add(el);
+          };
+          const unobserve = (el) => {
+            if (!ioObserved.has(el)) return;
+            io.unobserve(el);
+            ioObserved.delete(el);
+          };
+          intersectionDelegates.push({ target, delegateRoot: e.delegateRoot, observe, unobserve });
+          continue;
+        }
+        if (typeof e.target === "string") {
+          const scope = resolveDelegateRoots(e.delegateRoot);
+          for (const sr of scope) {
+            sr.querySelectorAll(e.target).forEach((el) => {
+              if (!ioObserved.has(el)) {
+                io.observe(el);
+                ioObserved.add(el);
+              }
+            });
+          }
+          continue;
+        }
+        io.observe(e.target);
+        if (e.target instanceof Element) ioObserved.add(e.target);
+      }
+      observers.push(io);
+    }
+    const handleResizeDelegate = (n, observe) => {
+      if (!resizeObserve || !resizeUnobserve || n.nodeType !== 1) return;
+      const el = n;
+      for (const d of resizeDelegates) {
+        const isThis = d.target === "$this" || d.target === "";
+        const matchesSel = (node) => {
+          if (!node || node.nodeType !== 1) return false;
+          if (isThis) return true;
+          return node.matches?.(d.target) || !!node.closest?.(d.target);
+        };
+        if (matchesSel(el)) {
+          observe ? resizeObserve(el, d.options) : resizeUnobserve(el);
+        } else if (!isThis) {
+          el.querySelectorAll(d.target).forEach((sub) => {
+            observe ? resizeObserve(sub, d.options) : resizeUnobserve(sub);
+          });
+        }
+      }
+    };
+    const handleIntersectionDelegate = (n, observe) => {
+      if (n.nodeType !== 1) return;
+      const el = n;
+      for (const d of intersectionDelegates) {
+        const isThis = d.target === "$this" || d.target === "";
+        const matchesSel = (node) => {
+          if (!node || node.nodeType !== 1) return false;
+          if (isThis) return true;
+          return node.matches?.(d.target) || !!node.closest?.(d.target);
+        };
+        if (matchesSel(el)) {
+          observe ? d.observe(el) : d.unobserve(el);
+        } else if (!isThis) {
+          el.querySelectorAll(d.target).forEach((sub) => {
+            observe ? d.observe(sub) : d.unobserve(sub);
+          });
+        }
+      }
+    };
+    if (mutationObserverSet?.length || resizeDelegates.length > 0 || intersectionDelegates.length > 0) {
+      const callbacks = [...new Set((mutationObserverSet ?? []).map((e) => e.callback))];
+      const mo = new win.MutationObserver((mutations, obs) => {
+        for (const mut of mutations) {
+          Array.from(mut.addedNodes || []).forEach((n) => {
+            handleResizeDelegate(n, true);
+            handleIntersectionDelegate(n, true);
+          });
+          Array.from(mut.removedNodes || []).forEach((n) => {
+            handleResizeDelegate(n, false);
+            handleIntersectionDelegate(n, false);
+          });
+        }
+        for (const cb of callbacks) cb(mutations, obs);
+      });
+      const moObserveTargets = /* @__PURE__ */ new Map();
+      const mergeMutationInit = (existing, next) => {
+        if (!existing) return next;
+        const mergedFilter = existing.attributeFilter || next.attributeFilter ? [.../* @__PURE__ */ new Set([...existing.attributeFilter ?? [], ...next.attributeFilter ?? []])] : void 0;
+        return {
+          childList: existing.childList || next.childList,
+          attributes: existing.attributes || next.attributes,
+          characterData: existing.characterData || next.characterData,
+          subtree: existing.subtree || next.subtree,
+          attributeOldValue: existing.attributeOldValue || next.attributeOldValue,
+          characterDataOldValue: existing.characterDataOldValue || next.characterDataOldValue,
+          attributeFilter: mergedFilter
+        };
+      };
+      const addObserveTarget = (target, options) => {
+        moObserveTargets.set(target, mergeMutationInit(moObserveTargets.get(target), options));
+      };
+      for (const e of mutationObserverSet ?? []) {
+        if (e.delegate) continue;
+        const init = e.options ?? { childList: true };
+        if (typeof e.target === "string") {
+          const scope = resolveDelegateRoots(e.delegateRoot);
+          for (const sr of scope) {
+            sr.querySelectorAll(e.target).forEach((el) => addObserveTarget(el, init));
+          }
+          continue;
+        }
+        addObserveTarget(e.target, init);
+      }
+      for (const d of resizeDelegates) {
+        for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
+      }
+      for (const d of intersectionDelegates) {
+        for (const r of resolveDelegateRoots(d.delegateRoot)) addObserveTarget(r, { childList: true, subtree: true });
+      }
+      for (const [target, options] of moObserveTargets) {
+        mo.observe(target, options);
+      }
+      observers.push(mo);
+    }
+    inst.__swc_observers = observers;
+  };
   const originalConnected = proto.connectedCallback;
   proto.connectedCallback = async function() {
     ensureInit(this);
@@ -253,14 +465,12 @@ const elementDefine = (name, config = {}) => (constructor) => {
       }
       const conf = getElementConfig(this);
       const currentWin = this._resolveWindow(conf);
-      const bMethods = findAllOnConnectedBeforeMetadata(this);
-      for (const m of bMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      for (const m of findAllOnConnectedBeforeMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       this._executeSwcScript("swc-on-before-connected", helperHostSet);
       const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
       const shadowMode = conf?.useShadow || targetConnectedList.find((it) => it.options.useShadow)?.options.useShadow;
       if (shadowMode && !this.shadowRoot) {
         const mode = shadowMode === true ? "open" : shadowMode;
-        console.log("tagName=", this.tagName, "mode", mode, this.shadowRoot);
         this.attachShadow({ mode });
       }
       const stateContext = { ...helperHostSet };
@@ -269,7 +479,6 @@ const elementDefine = (name, config = {}) => (constructor) => {
       });
       const shadowChildren = [];
       const lightChildren = [];
-      console.log("targetConnectList", this.tagName, targetConnectedList.length);
       if (targetConnectedList.length > 0) {
         for (const meta of targetConnectedList) {
           let res = await this._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
@@ -310,188 +519,14 @@ const elementDefine = (name, config = {}) => (constructor) => {
         });
         globalDelegatedRoots.add(root);
       }
-      const delegateListeners = [];
-      const nonDelegateListeners = [];
-      addEventListenerList.forEach((meta) => {
-        const isStringSelector = typeof meta.selector === "string";
-        if (meta.options.delegate && isStringSelector && meta.selector !== "$window" && meta.selector !== "$document" && meta.selector !== "$host" && meta.selector !== "$appHost" && meta.selector !== "$firstHost" && meta.selector !== "$lastHost" && meta.selector !== "$firstAppHost" && meta.selector !== "$lastAppHost" && meta.selector !== "$hosts" && meta.selector !== "$appHosts" && meta.selector !== "$this" && 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 = 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 = SwcUtils.getHostSet(this);
-                const args = { event, ...currentHostSet, $el: matchedEl, $root: br };
-                await this[meta.propertyKey](event, { ...currentHostSet, $matchedElement: 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";
-        let resolvedSelector = null;
-        if (typeof selector === "function") {
-          const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
-          const result = selector(this, hostSet);
-          if (typeof result === "string") {
-            resolvedSelector = result;
-          } else if (result instanceof currentWin.Element) {
-            bindTargets.push(result);
-          } else if (result instanceof currentWin.NodeList) {
-            bindTargets.push(...Array.from(result));
-          } else if (Array.isArray(result)) {
-            bindTargets.push(...result);
-          }
-        } else {
-          resolvedSelector = selector;
-        }
-        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 (resolvedSelector) {
-          if (resolvedSelector === "$window") bindTargets.push(currentWin);
-          else if (resolvedSelector === "$document") bindTargets.push(currentWin.document);
-          else if (resolvedSelector === "$host") applyRootOption(helperHostSet.$host);
-          else if (resolvedSelector === "$parentHost") applyRootOption(helperHostSet.$parentHost);
-          else if (resolvedSelector === "$appHost") applyRootOption(helperHostSet.$appHost);
-          else if (resolvedSelector === "$firstHost") applyRootOption(helperHostSet.$firstHost);
-          else if (resolvedSelector === "$lastHost") applyRootOption(helperHostSet.$lastHost);
-          else if (resolvedSelector === "$firstAppHost") applyRootOption(helperHostSet.$firstAppHost);
-          else if (resolvedSelector === "$lastAppHost") applyRootOption(helperHostSet.$lastAppHost);
-          else if (resolvedSelector === "$hosts") helperHostSet.$hosts.forEach(applyRootOption);
-          else if (resolvedSelector === "$appHosts") helperHostSet.$appHosts.forEach(applyRootOption);
-          else if (resolvedSelector === "$this" || !resolvedSelector) 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(resolvedSelector).forEach((el) => bindTargets.push(el));
-            });
-          }
-        }
-        bindTargets.forEach((t) => {
-          const handler = async (event) => {
-            if (options.filter) {
-              const helper = 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 = SwcUtils.getHostSet(this);
-            const args = { event, ...currentHostSet, $el: t, $root: t };
-            await this[meta.propertyKey](event, { currentHostSet, $matchedElement: event.currentTarget }, args);
-          };
-          const eventSubject = new Subject();
-          let eventStream = eventSubject;
-          if (options.debounceTime !== void 0 && options.debounceTime > 0) {
-            eventStream = eventStream.pipe(debounceTime(options.debounceTime));
-          }
-          if (options.throttleTime !== void 0 && options.throttleTime > 0) {
-            eventStream = eventStream.pipe(throttleTime(options.throttleTime));
-          }
-          if (options.distinctUntilChanged !== void 0 && options.distinctUntilChanged !== false) {
-            if (typeof options.distinctUntilChanged === "function") {
-              eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
-            } else {
-              eventStream = eventStream.pipe(distinctUntilChanged());
-            }
-          }
-          const subscription = eventStream.subscribe({
-            next: (event) => {
-              handler(event).catch((err) => console.error("Event handler error:", err));
-            },
-            error: (err) => console.error("Event stream error:", err)
-          });
-          const wrappedHandler = (event) => {
-            eventSubject.next(event);
-          };
-          t.addEventListener(type, wrappedHandler, opts);
-          this._boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription });
-        });
-      });
+      await buildObservers(SwcUtils.getHelperAndHostSet(win, this));
       if (originalConnected) await originalConnected.apply(this);
-      const aMethods = findAllOnConnectedAfterMetadata(this);
-      for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+      for (const m of findAllOnConnectedAfterMetadata(this)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       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 = getAttributeValue(this, name2, { type: meta.options.type });
-            if (val !== null) {
-              await this[meta.propertyKey](val, null, name2, helperHostSet);
-            }
-          }
-        }
-      }
     } finally {
-      for (let m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
-        await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-      }
+      for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
       if (appHost && typeof appHost._connectedDone === "function") {
         await appHost._connectedDone(this);
       }
@@ -499,26 +534,24 @@ const elementDefine = (name, config = {}) => (constructor) => {
   };
   const originalDisconnected = proto.disconnectedCallback;
   proto.disconnectedCallback = function() {
-    const appHost = helperHostSet.$appHost;
+    const appHost = helperHostSet?.$appHost;
     if (appHost && typeof appHost._disconnected === "function") {
       appHost._disconnected(this);
     }
     this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
-    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-    for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-    if (this._boundListeners) {
-      this._boundListeners.forEach((l) => {
-        l.target.removeEventListener(l.type, l.handler, l.options);
-        if (l.subscription && typeof l.subscription.unsubscribe === "function") {
-          l.subscription.unsubscribe();
-        }
-      });
-      this._boundListeners = [];
+    for (const m of findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+    for (const c of cyclers) c.onDisconnected?.(helperHostSet);
+    for (const o of this.__swc_observers ?? []) {
+      try {
+        o?.disconnect?.();
+      } catch (e) {
+        console.error("[SWC] observer disconnect error:", e);
+      }
     }
+    this.__swc_observers = [];
     new ElementApply(this, { id: this._swcId }).removeAllEventListener();
     if (originalDisconnected) originalDisconnected.apply(this);
-    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);
-    for (const m of aMethods) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+    for (const m of findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
     this._executeSwcScript("swc-on-disconnected", helperHostSet);
     this._executeSwcScript("swc-on-after-disconnected", helperHostSet);
     this.__swc_connected = false;
@@ -527,35 +560,34 @@ const elementDefine = (name, config = {}) => (constructor) => {
   proto.adoptedCallback = function() {
     const hostSet = SwcUtils.getHostSet(this);
     this._executeSwcScript("swc-on-before-adopted", hostSet);
-    const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-    for (const m of bMethods) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+    for (const m of findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+    for (const c of cyclers) c.onAdopted?.(helperHostSet);
     if (originalAdopted) originalAdopted.apply(this);
-    const aMethods = findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY);
-    for (const m of aMethods) this._invokeLifecycleMethod(m.propertyKey, hostSet);
+    for (const m of findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY)) this._invokeLifecycleMethod(m.propertyKey, hostSet);
     this._executeSwcScript("swc-on-adopted", hostSet);
     this._executeSwcScript("swc-on-after-adopted", hostSet);
   };
   const originalAttributeChanged = proto.attributeChangedCallback;
   proto.attributeChangedCallback = function(name2, old, newVal) {
     if (originalAttributeChanged) originalAttributeChanged.apply(this, [name2, old, newVal]);
-    const hSet = SwcUtils.getHostSet(this);
+    const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this);
     let processedVal = newVal;
     if (newVal !== null) {
       const ae = new ActionExpression(newVal);
       const expr = ae.getFirstExpression("callReturn");
       if (expr) {
         const win2 = this._resolveWindow?.() || (typeof window !== "undefined" ? window : void 0);
-        const helperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
+        const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(win2, this);
         const script = ConvertUtils.decodeHtmlEntity(expr.script, win2.document);
         try {
           const result = FunctionUtils.executeReturn({
             script,
             context: this,
-            args: helperAndHostSet
+            args: exprHelperAndHostSet
           });
           processedVal = result;
         } catch (e) {
-          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${helperAndHostSet}`, e);
+          console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name2}: ${exprHelperAndHostSet}`, e);
           processedVal = newVal;
         }
       }
@@ -566,20 +598,7 @@ const elementDefine = (name, config = {}) => (constructor) => {
         this._bindAttributeEvent(this, name2, newVal, eventName);
       }
     }
-    const hostCustomEventMeta = emitHostCustomEventList.find((it) => it.options.attributeName === name2);
-    if (hostCustomEventMeta && newVal !== null) {
-      this._bindAttributeEvent(this, name2, newVal, hostCustomEventMeta.type);
-    }
-    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 = convertAttributeValue(processedVal, meta.options.type);
-        this[meta.propertyKey](convertedVal, old, name2, hSet);
-      }
-    }
+    for (const c of cyclers) c.onAttributeChanged?.(helperAndHostSet, name2, old, processedVal);
   };
   Object.defineProperty(constructor, "observedAttributes", {
     get: () => mergedObservedAttributes,