@dooboostore/simple-web-component 1.0.47 → 1.0.49

package/src/decorators/elementDefine.ts

@@ -1,20 +1,25 @@
-import {ActionExpression, FunctionUtils, ReflectUtils, Subject} from '@dooboostore/core';
-import {debounceTime, distinctUntilChanged, throttleTime} from '@dooboostore/core/message/operators';
-import {getAddEventListenerMetadata} from './addEventListener';
+import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
+import {EventListenerLifeCycler} from './addEventListener';
+import {MutationObserverLifeCycler} from './mutationObserver';
+import {ResizeObserverLifeCycler} from './resizeObserver';
+import {IntersectionObserverLifeCycler} from './intersectionObserver';
 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';
-import {getEmitCustomEventMetadataList} from './emitCustomEvent';
-import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttribute';
-import {findAllAttributeApplyMetadata, findAllAttributeMetadata, getAttributeValue} from './applyAttribute';
-import {getQueryMetadata} from './query';
-import {getQueryAllMetadata} from './queryAll';
+import {EmitCustomEventLifeCycler} from './emitCustomEvent';
+import {ChangedAttributeLifeCycler} from './changedAttribute';
+import {findAllAttributeApplyMetadata, findAllAttributeMetadata} from './applyAttribute';
+import {getQueryMetadata, getQueryAllMetadata} from './query';
 import {SwcUtils} from '../utils/Utils';
 import {DOM_EVENT_NAMES, HTML_TAG_ENTRIES} from '../config/config';
 import {SituationTypeContainer, SituationTypeContainers} from '@dooboostore/simple-boot/decorators/inject/Inject';
-import {HelperHostSet, HostSet, InjectSituationType} from '../types';
+import {ElementDefineLifeCycler, HelperHostSet, HostSet, InjectSituationType, IntersectionObserverSet, MutationObserverSet, OnConnectedResult, ResizeObserverSet, ResizeObserverSetEntry, SwcRootType} from '../types';
 import {ConvertUtils, ElementApply} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
 import {findAllStateMetadata} from "./state";
 import {findAllPropertyMetadata} from "./applyProperty";
+import {MessageSubscribeLifeCycler} from "./subscribeSwcAppMessageWhileConnected";
+import {RouteSubscribeLifeCycler} from "./subscribeSwcAppRouteChangeWhileConnected";
+import {SetIntervalLifeCycler} from "./setInterval";
+import {SetTimeoutLifeCycler} from "./setTimeout";
 
 // --- Core Interfaces & Types ---
 
@@ -42,7 +47,6 @@ export const ensureInit = (inst: any) => { // HTMLElement
   if (!inst.__swc_initialized) {
     inst._swcId = inst?.getAttribute?.('swc-use-ssr') ?? 's' + Math.random().toString(36).substring(2, 11).toLowerCase();
     inst._emitHandlers = new Map();
-    inst._boundListeners = [];
     inst.__swc_initialized = true;
     // const attributeList = findAllQ(inst);
     // attributeList.forEach(meta => {
@@ -318,8 +322,8 @@ const setupPrototype = (proto: any, win: Window) => {
 export const elementDefine =
   (name: string, config: Partial<ElementConfig> = {}): ClassDecorator =>
     (constructor: any) => {
-      const {win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS} = buildEnv(config.window);
-      const metadata: ElementMetadata = {...config, name, window: win};
+      const { win, doc, builtInTagMap: BUILT_IN_TAG_MAP, domHelpers: SWC_DOM_HELPERS } = buildEnv(config.window);
+      const metadata: ElementMetadata = { ...config, name, window: win };
 
       if (!metadata.window) {
         throw new Error('window is required');
@@ -337,10 +341,6 @@ export const elementDefine =
         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);
 
@@ -353,24 +353,256 @@ export const elementDefine =
       const hostAttributes = attributeList.filter(it => it.selector === '$this').map(it => it.propertyKey || String(it.propertyKey));
       // Get original static observedAttributes before they're overwritten by Object.defineProperty
       const originalStaticObservedAttributes = (constructor.observedAttributes ?? []) as string[];
-      const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...attrChangeMap.keys(), ...attributeApplyNames, ...hostAttributes, ...emitHostCustomEventList.map(it => (it.options as any).attributeName).filter(Boolean), ...swcLifecycleAttributes, ...swcOnEvents])];
-      // const connectedInnerHtmlList = getOnConnectedInnerHtmlMetadata(constructor) || [];
 
       const proto = constructor.prototype;
       setupPrototype(proto, win);
 
       // 값을 기대하지않는다.
       let helperHostSet: HelperHostSet | null = null;
+      // ── cyclers: 데코레이터별 라이프사이클 위임 클래스 (elementDefine 시 1회 생성, 계속 재사용) ──
+      const eventCycler = new EventListenerLifeCycler();
+      const cyclers: ElementDefineLifeCycler[] = [
+        eventCycler,
+        new ChangedAttributeLifeCycler(),
+        new EmitCustomEventLifeCycler(),
+        new ResizeObserverLifeCycler(),
+        new IntersectionObserverLifeCycler(),
+        new MutationObserverLifeCycler(),
+        new MessageSubscribeLifeCycler(),
+        new RouteSubscribeLifeCycler(),
+        new SetIntervalLifeCycler(),
+        new SetTimeoutLifeCycler(),
+      ];
+
+      // observedAttributes 기여 cycler (define-time, constructor 기반)
+      const cyclerObservedAttributes = cyclers.flatMap(c => c.getObservedAttributeNames?.(constructor) ?? []);
+      const mergedObservedAttributes = [...new Set([...(metadata.observedAttributes ?? []), ...originalStaticObservedAttributes, ...cyclerObservedAttributes, ...attributeApplyNames, ...hostAttributes, ...swcLifecycleAttributes, ...swcOnEvents])];
+
+      // 렌더 후 모든 시클러 onConnected 호출 → Set 수집 후 observer 생성
+      const buildObservers = async (helperHostSet: HelperHostSet): Promise<void> => {
+        const inst = helperHostSet.$this;
+        const observers: Array<MutationObserver | ResizeObserver | IntersectionObserver> = [];
+        let resizeObserverSet: ResizeObserverSet = [];
+        let mutationObserverSet: MutationObserverSet = [];
+        let intersectionObserverSet: IntersectionObserverSet = [];
+
+        // delegate 추적 root 해석: shadow/light/auto/all → 실제 root 목록
+        const resolveDelegateRoots = (delegateRoot: SwcRootType | undefined): (HTMLElement | ShadowRoot)[] => {
+          const r = delegateRoot || 'auto';
+          const roots: (HTMLElement | ShadowRoot)[] = [];
+          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;
+        };
+
+        // 1. 모든 시클러 onConnected → observer Set 수집 (여러 시클러가 반환한 Set 을 전부 누적)
+        for (const c of cyclers) {
+          const result = (await c.onConnected?.(helperHostSet, resizeObserverSet)) as OnConnectedResult | void;
+          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];
+        }
+
+        // 2. 타입별로 observer 생성
+        // ResizeObserver 먼저: mutation callback 이 observe/unobserve 를 주입받아야 함
+        // observeTargets 중 delegate 항목은 셀렉터 문자열이라 초기 observe 하지 않는다 (동적 추적 전용).
+        // 동적 observe/unobserve 는 중복 호출을 막기 위해 observe 대상 WeakSet 으로 추적한다.
+        const resizeDelegates = (resizeObserverSet ?? []).filter(t => t.delegate && typeof t.target === 'string') as Array<ResizeObserverSetEntry & { target: string }>;
+        let resizeObserve: ((el: Element, opts?: ResizeObserverOptions) => void) | undefined;
+        let resizeUnobserve: ((el: Element) => void) | undefined;
+        const resizeObserved = new WeakSet<Element>();
+        if (resizeObserverSet?.length) {
+          const roCallbacks = [...new Set(resizeObserverSet.map(e => e.callback))];
+          const ro = new (win as any).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') {
+              // 문자열(non-delegate)이면 root 에서 검색된 요소들을 observe 대상으로 추가한다.
+              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 as Element, 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);
+        }
+
+        // IntersectionObserver: 옵션 그룹별로 1개씩 생성.
+        // delegate 항목은 동적 추적용 셀렉터이므로 observe/unobserve 함수를 MutationObserver 콜백에 넘긴다.
+        // 동적 observe/unobserve 중복 방지를 위해 그룹별 WeakSet 으로 추적한다.
+        const intersectionDelegates: Array<{ target: string; delegateRoot?: SwcRootType; observe: (el: Element) => void; unobserve: (el: Element) => void }> = [];
+        for (const group of intersectionObserverSet) {
+          const ioCallbacks = [...new Set(group.observeTargets.map(e => e.callback))];
+          const io = new (win as any).IntersectionObserver((entries, obs) => {
+            for (const cb of ioCallbacks) cb(entries, obs);
+          }, group.options);
+          const ioObserved = new WeakSet<Element>();
+          for (const e of group.observeTargets) {
+            if (e.delegate) {
+              const target = e.target as string;
+              const observe = (el: Element) => {
+                if (ioObserved.has(el)) return;
+                io.observe(el);
+                ioObserved.add(el);
+              };
+              const unobserve = (el: Element) => {
+                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') {
+              // 문자열(non-delegate)이면 root 에서 검색된 요소들을 observe 대상으로 추가한다.
+              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 as Element);
+            if (e.target instanceof Element) ioObserved.add(e.target);
+          }
+          observers.push(io);
+        }
+
+        // resize/intersection delegate 동적 추적 — MutationObserver 콜백에서 추가/제거된 요소를 observe/unobserve 한다.
+        const handleResizeDelegate = (n: Node, observe: boolean) => {
+          if (!resizeObserve || !resizeUnobserve || n.nodeType !== 1) return;
+          const el = n as HTMLElement;
+          for (const d of resizeDelegates) {
+            const isThis = d.target === '$this' || d.target === '';
+            const matchesSel = (node: any) => {
+              if (!node || node.nodeType !== 1) return false;
+              if (isThis) return true;
+              return (node as HTMLElement).matches?.(d.target) || !!(node as HTMLElement).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 as HTMLElement, d.options)
+                         : resizeUnobserve(sub as HTMLElement);
+              });
+            }
+          }
+        };
+        const handleIntersectionDelegate = (n: Node, observe: boolean) => {
+          if (n.nodeType !== 1) return;
+          const el = n as HTMLElement;
+          for (const d of intersectionDelegates) {
+            const isThis = d.target === '$this' || d.target === '';
+            const matchesSel = (node: any) => {
+              if (!node || node.nodeType !== 1) return false;
+              if (isThis) return true;
+              return (node as HTMLElement).matches?.(d.target) || !!(node as HTMLElement).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 as HTMLElement) : d.unobserve(sub as HTMLElement);
+              });
+            }
+          }
+        };
+
+        if (mutationObserverSet?.length || resizeDelegates.length > 0 || intersectionDelegates.length > 0) {
+          // 하나의 MutationObserver 로 resize/intersection delegate 동적 추적 + mutation 콜백을 함께 처리
+          const callbacks = [...new Set((mutationObserverSet ?? []).map(e => e.callback))];
+          const mo = new (win as any).MutationObserver((mutations, obs) => {
+            for (const mut of mutations) {
+              Array.from(mut.addedNodes   || []).forEach(n => { handleResizeDelegate(n as Node, true); handleIntersectionDelegate(n as Node, true); });
+              Array.from(mut.removedNodes || []).forEach(n => { handleResizeDelegate(n as Node, false); handleIntersectionDelegate(n as Node, false); });
+            }
+            for (const cb of callbacks) cb(mutations, obs);
+          });
+
+          // observe 대상 전체(엔트리 + delegate 추적 root)를 하나로 모아 중복 observe 를 제거한다.
+          // 같은 target 이 여러 소스에서 지정되면 MutationObserverInit 을 합집합(최대 감지범위)으로 병합한다.
+          const moObserveTargets = new Map<Element | ShadowRoot, MutationObserverInit>();
+          const mergeMutationInit = (existing: MutationObserverInit | undefined, next: MutationObserverInit): MutationObserverInit => {
+            if (!existing) return next;
+            const mergedFilter = existing.attributeFilter || next.attributeFilter
+              ? [...new Set([...(existing.attributeFilter ?? []), ...(next.attributeFilter ?? [])])]
+              : undefined;
+            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: Element | ShadowRoot, options: MutationObserverInit) => {
+            moObserveTargets.set(target, mergeMutationInit(moObserveTargets.get(target), options));
+          };
+
+          // 1) mutationObserverSet 엔트리
+          for (const e of mutationObserverSet ?? []) {
+            if (e.delegate) continue;
+            const init = e.options ?? { childList: true };
+            if (typeof e.target === 'string') {
+              // 문자열(non-delegate)이면 root 에서 검색된 요소들을 observe 대상으로 추가한다.
+              const scope = resolveDelegateRoots(e.delegateRoot);
+              for (const sr of scope) {
+                sr.querySelectorAll(e.target).forEach(el => addObserveTarget(el, init));
+              }
+              continue;
+            }
+            addObserveTarget(e.target, init);
+          }
+
+          // 2) delegate 추적 root: shadow/light/all/auto 로 해석해 전부 observe
+          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);
-        // connected 됐을시 최신화
+        // 재연결 시 누적 방지 — cycler 내부 리소스 초기화
         helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
         const appHost = helperHostSet.$appHost;
         const useSsr = isSSR(this);
-        // console.log('isSsr', useSsr, this);
-        // console.log('----helperHostSet--->', this, helperHostSet, useSsr)
-        // let connectedApp: SwcAppInterface |undefined;
         try {
           if (appHost && typeof (appHost as any)._connected === 'function') {
             await (appHost as any)._connected(this);
@@ -379,56 +611,42 @@ export const elementDefine =
             (appHost as any)._connected_safari_and_standby.push(this);
           }
 
-          // const hostSet = SwcUtils.getHostSet(this as any);
           const conf = getElementConfig(this);
           const currentWin = (this as any)._resolveWindow(conf);
 
-          const bMethods = findAllOnConnectedBeforeMetadata(this);//.filter(it => useSsr ? !it.options.ssrFirst : true);
-          // console.log('beforeConnected', bMethods)
-          for (const m of bMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          // before-connected 라이프사이클 메서드 (@onConnectedBefore)
+          for (const m of findAllOnConnectedBeforeMetadata(this)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
 
-          // console.log('vvvvvvvvvvvvvvvu-seSsr-vvvvvvvvvv>', useSsr, this.tagName, this.getAttribute('seq'))
-          //   // ssr 처리라서 이미 내려준거그대로 상요하면된다 따라서 호출안한다
-          // const targetConnectedList = findAllOnConnectedMetadata(constructor).filter(it => useSsr ? !it.options.ssrFirst : true);
+          // ── 렌더 (@onConnected / @onConnectedBody*) — elementDefine 책임 ──
           const targetConnectedList = useSsr ? [] : findAllOnConnectedMetadata(constructor);
           const shadowMode = conf?.useShadow || targetConnectedList.find(it => it.options.useShadow)?.options.useShadow;
-          // console.log('--------->', this.tagName, shadowMode && !this.shadowRoot)
           if (shadowMode && !this.shadowRoot) {
             const mode = shadowMode === true ? 'open' : shadowMode;
-            console.log('tagName=', this.tagName, 'mode', mode, this.shadowRoot);
-            // if (this.tagName!=='INDEX-ROUTER') {
-              this.attachShadow({mode: mode as ShadowRootMode});
-            // }
+            this.attachShadow({ mode: mode as ShadowRootMode });
           }
 
-          const stateContext: any = {...helperHostSet};
+          const stateContext: any = { ...helperHostSet };
           findAllStateMetadata(this).forEach(it => {
-            stateContext[it.name] = this[it.propertyKey]
-          })
+            stateContext[it.name] = this[it.propertyKey];
+          });
 
           const shadowChildren: Node[] = [];
           const lightChildren: Node[] = [];
 
-          console.log('targetConnectList', this.tagName, targetConnectedList.length)
           if (targetConnectedList.length > 0) {
-            // let sContent = '',
-            //   lContent = '';
             for (const meta of targetConnectedList) {
-              // const res = (this as any)[meta.propertyKey]();
               let res = await (this as any)._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
-              // res = SwcUtils.projectProcessHtml(this, res);
               if (typeof res === 'string') {
                 const htmlTemplateElement = doc.createElement('template');
-                htmlTemplateElement.innerHTML = res;//SwcUtils.projectProcessHtml(this._swcId, res, doc);
+                htmlTemplateElement.innerHTML = res;
                 res = htmlTemplateElement.content;
               }
-
               if (res) {
                 const nodes = Array.isArray(res) ? res : [res];
                 if (meta.options.useShadow || conf?.useShadow) {
                   shadowChildren.push(...nodes);
-                }else {
+                } else {
                   lightChildren.push(...nodes);
                 }
               }
@@ -436,23 +654,22 @@ export const elementDefine =
             try {
               if (this.shadowRoot) {
                 const applyShadowChildren = SwcUtils.projectProcessHtml(this._swcId, shadowChildren, doc);
-                this.shadowRoot.replaceChildren(...applyShadowChildren)
+                this.shadowRoot.replaceChildren(...applyShadowChildren);
               }
               if (lightChildren.length) {
                 const applyLightChildren = SwcUtils.projectProcessHtml(this._swcId, lightChildren, doc);
-                this.replaceChildren(...applyLightChildren)
+                this.replaceChildren(...applyLightChildren);
               }
-
             } catch (e) {
               console.error('[ElementDefine] innerHTML setting error:', e);
             }
-            new ElementApply(this, {id: this._swcId}).apply({context: stateContext, bind: this});
+            new ElementApply(this, { id: this._swcId }).apply({ context: stateContext, bind: this });
           } else {
-            new ElementApply(this, {id: this._swcId}).apply({exclude: {html: true, text: true, attribute: true}, context: stateContext, bind: this});
+            new ElementApply(this, { id: this._swcId }).apply({ exclude: { html: true, text: true, attribute: true }, context: stateContext, bind: this });
           }
 
           // global delegate event
-          const root = this.getRootNode()
+          const root = this.getRootNode();
           if (!globalDelegatedRoots.has(root)) {
             DOM_EVENT_NAMES.forEach(type => {
               root.addEventListener(type, handleGlobalSwcEvent);
@@ -460,271 +677,51 @@ export const elementDefine =
             globalDelegatedRoots.add(root);
           }
 
+          // ── cycler 실행 (렌더 후): 모든 시클러 onConnected → observer Set 수집 → observer 생성 ──
+          // helperHostSet 은 클로저 변수라 async 흐름에서 다른 인스턴스로 덮어써질 수 있다.
+          // 반드시 현재 인스턴스(this)로 재계산한 값을 사용한다.
+          await buildObservers(SwcUtils.getHelperAndHostSet(win, this as any));
 
-          // Separate delegate and non-delegate listeners
-          const delegateListeners: typeof addEventListenerList = [];
-          const nonDelegateListeners: typeof addEventListenerList = [];
-
-          addEventListenerList.forEach(meta => {
-            // Function-based selectors cannot be used with delegate listeners
-            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 = new Map<string, any[]>();
-          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: (HTMLElement | ShadowRoot)[] = [];
-            if (r === 'auto') bindRoots.push(this.shadowRoot || (this as any));
-            else if (r === 'light') bindRoots.push(this as any);
-            else if (r === 'shadow' && this.shadowRoot) bindRoots.push(this.shadowRoot);
-            else if (r === 'all') {
-              bindRoots.push(this as any);
-              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: Event) => {
-                for (const meta of sortedMetaList) {
-                  const {selector, options} = meta;
-                  const matchedEl = (event.target as HTMLElement)?.closest(selector);
-                  if (matchedEl && (br as any).contains(matchedEl)) {
-                    // Apply filter if specified
-                    if (options.filter) {
-                      const helper = SwcUtils.getHelperAndHostSet(currentWin, matchedEl);
-                      if (!options.filter(event, helper)) {
-                        continue; // Skip this listener if filter returns false
-                      }
-                    }
-                    if (options.stopPropagation) event.stopPropagation();
-                    if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-                    if (options.preventDefault) event.preventDefault();
-                    const currentHostSet = SwcUtils.getHostSet(this as any);
-                    const args = {event, ...currentHostSet, $el: matchedEl, $root: br};
-                    await (this as any)[meta.propertyKey](event, {...currentHostSet, $matchedElement: matchedEl}, args);
-                    if ((event as any).cancelBubble) break;
-                  }
-                }
-              };
-              br.addEventListener(type, unifiedHandler, opts);
-              (this as any)._boundListeners.push({target: br, type, handler: unifiedHandler, options: opts});
-            });
-          });
+          if (originalConnected) await originalConnected.apply(this);
 
-          nonDelegateListeners.forEach(meta => {
-            const {selector, type, options} = meta;
-            const opts = {capture: options.capture, once: options.once, passive: options.passive};
-            const bindTargets: EventTarget[] = [];
-            const r = options.root || 'auto';
-            
-            // Resolve selector if it's a function
-            let resolvedSelector: string | null = 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 as EventTarget);
-              } else if (result instanceof currentWin.NodeList) {
-                bindTargets.push(...Array.from(result as EventTarget[]));
-              } else if (Array.isArray(result)) {
-                bindTargets.push(...(result as EventTarget[]));
-              }
-            } else {
-              resolvedSelector = selector;
-            }
-            
-            const applyRootOption = (target: any) => {
-              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: (HTMLElement | ShadowRoot)[] = [];
-                if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-                else if (r === 'light') searchRoots.push(this as any);
-                else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-                else if (r === 'all') {
-                  searchRoots.push(this as any);
-                  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: Event) => {
-                // Apply filter if specified
-                if (options.filter) {
-                  const helper = SwcUtils.getHelperAndHostSet(currentWin, t as HTMLElement);
-                  if (!options.filter(event, {currentThis: this, helper})) {
-                    return; // Skip if filter returns false
-                  }
-                }
-                if (options.stopPropagation) event.stopPropagation();
-                if (options.stopImmediatePropagation) event.stopImmediatePropagation();
-                if (options.preventDefault) event.preventDefault();
-                const currentHostSet = SwcUtils.getHostSet(this as any);
-                const args = {event, ...currentHostSet, $el: t, $root: t};
-                await (this as any)[meta.propertyKey](event, {currentHostSet, $matchedElement: event.currentTarget}, args);
-              };
-              
-              // Create event stream with Observable-based operators
-              const eventSubject = new Subject<Event>();
-              let eventStream = eventSubject as any;
-              
-              // Apply operators from @dooboostore/core/operators
-              if (options.debounceTime !== undefined && options.debounceTime > 0) {
-                eventStream = eventStream.pipe(debounceTime(options.debounceTime));
-              }
-              
-              if (options.throttleTime !== undefined && options.throttleTime > 0) {
-                eventStream = eventStream.pipe(throttleTime(options.throttleTime));
-              }
-              
-              if (options.distinctUntilChanged !== undefined && options.distinctUntilChanged !== false) {
-                if (typeof options.distinctUntilChanged === 'function') {
-                  eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
-                } else {
-                  eventStream = eventStream.pipe(distinctUntilChanged());
-                }
-              }
-              
-              // Subscribe to the event stream
-              const subscription = eventStream.subscribe({
-                next: (event: Event) => {
-                  handler(event).catch((err: any) => console.error('Event handler error:', err));
-                },
-                error: (err: any) => console.error('Event stream error:', err)
-              });
-              
-              // Create wrapper handler that emits to the subject
-              const wrappedHandler = (event: Event) => {
-                eventSubject.next(event);
-              };
-              
-              t.addEventListener(type, wrappedHandler, opts);
-              (this as any)._boundListeners.push({target: t, type, handler: wrappedHandler, options: opts, subscription});
-            });
-          });
-
-          if (originalConnected) await (originalConnected.apply(this));
-
-          const aMethods = findAllOnConnectedAfterMetadata(this); //.filter(it => { return useSsr ? !it.options.ssrFirst : true; });
-          // console.log('afterConnected', this.tagName, aMethods,  getOnConnectedAfterMetadata(this))
-          for (const m of aMethods) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          // after-connected 라이프사이클 메서드 (@onConnectedAfter)
+          for (const m of findAllOnConnectedAfterMetadata(this)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
           (this as any).__swc_connected = true;
-
-          // Trigger @changedAttributeThis with while: 'connected'
-          for (let [name, metaList] of Array.from(attrChangeMap)) {
-            for (const meta of metaList) {
-              if (meta.options.while === 'connected') {
-                const val = getAttributeValue(this, name, {type: meta.options.type});
-                if (val !== null) {
-                  await ((this as any)[meta.propertyKey](val, null, name, helperHostSet));
-                }
-              }
-            }
-          }
         } finally {
-          for (let m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) {
-            await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-          }
+          for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
           if (appHost && typeof (appHost as any)._connectedDone === 'function') {
             await (appHost as any)._connectedDone(this);
           }
         }
       };
 
+      /////////////////////////////////////////////////
+      // disconnectedCallback
+      ////////////////////////////////////////////////
       const originalDisconnected = proto.disconnectedCallback;
       proto.disconnectedCallback = function () {
-        // const helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
-        // Remove from appHost LAST when disconnected
-        // console.log('disconnnnnnnnnnnnnnnnnnn', helperHostSet, this)
-        const appHost = helperHostSet.$appHost;
+        const appHost = helperHostSet?.$appHost;
         if (appHost && typeof (appHost as any)._disconnected === 'function') {
           (appHost as any)._disconnected(this);
         }
 
         (this as any)._executeSwcScript('swc-on-before-disconnected', helperHostSet);
-        const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY);
-        for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
-
-        if ((this as any)._boundListeners) {
-          (this as any)._boundListeners.forEach((l: any) => {
-            l.target.removeEventListener(l.type, l.handler, l.options);
-            // Cleanup Observable subscription if present
-            if (l.subscription && typeof l.subscription.unsubscribe === 'function') {
-              l.subscription.unsubscribe();
-            }
-          });
-          (this as any)._boundListeners = [];
-        }
+        for (const m of findAllLifecycleMetadata(this, ON_BEFORE_DISCONNECTED_METADATA_KEY)) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        for (const c of cyclers) c.onDisconnected?.(helperHostSet!);
 
-        new ElementApply(this, {id: this._swcId}).removeAllEventListener();
+        for (const o of (this as any).__swc_observers ?? []) {
+          try { (o as any)?.disconnect?.(); } catch (e) { console.error('[SWC] observer disconnect error:', e); }
+        }
+        (this as any).__swc_observers = [];
 
-        // globalDelegatedRoots remove
-        // const roots = [this, this.getRootNode()];
-        // if (this.shadowRoot) {
-        //   roots.push(this.shadowRoot);
-        // }
-        // roots.forEach(root => {
-        //     DOM_EVENT_NAMES.forEach(type => {
-        //       root.removeEventListener(type, handleGlobalSwcEvent);
-        //     });
-        //   }
-        // )
+        // elementApply event listener 정리
+        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 as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+        for (const m of findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY)) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
         (this as any)._executeSwcScript('swc-on-disconnected', helperHostSet);
         (this as any)._executeSwcScript('swc-on-after-disconnected', helperHostSet);
         (this as any).__swc_connected = false;
@@ -734,13 +731,12 @@ export const elementDefine =
       proto.adoptedCallback = function () {
         const hostSet = SwcUtils.getHostSet(this as any);
         (this as any)._executeSwcScript('swc-on-before-adopted', hostSet);
-        const bMethods = findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY);
-        for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, hostSet);
+        for (const m of findAllLifecycleMetadata(this, ON_BEFORE_ADOPTED_METADATA_KEY)) (this as any)._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 as any)._invokeLifecycleMethod(m.propertyKey, hostSet);
+        for (const m of findAllLifecycleMetadata(this, ON_AFTER_ADOPTED_METADATA_KEY)) (this as any)._invokeLifecycleMethod(m.propertyKey, hostSet);
         (this as any)._executeSwcScript('swc-on-adopted', hostSet);
         (this as any)._executeSwcScript('swc-on-after-adopted', hostSet);
       };
@@ -749,7 +745,9 @@ export const elementDefine =
       proto.attributeChangedCallback = function (name: string, old: string | null, newVal: string | null) {
         if (originalAttributeChanged) originalAttributeChanged.apply(this, [name, old, newVal]);
 
-        const hSet = SwcUtils.getHostSet(this as any);
+        // attributeChangedCallback 은 connected 이전에도 호출될 수 있으므로
+        // 클로저의 helperHostSet(null 가능) 대신 이 시점에 새로 계산한다.
+        const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
 
         // Process expression directive before passing to handlers
         let processedVal: any = newVal;
@@ -758,18 +756,17 @@ export const elementDefine =
           const expr = ae.getFirstExpression('callReturn');
           if (expr) {
             const win = (this as any)._resolveWindow?.() || ((typeof window !== 'undefined' ? window : undefined) as any);
-            const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
+            const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
             const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
             try {
               const result = FunctionUtils.executeReturn({
                 script: script,
                 context: this,
-                args: helperAndHostSet
+                args: exprHelperAndHostSet
               });
-              // Pass the result object directly without serialization
               processedVal = result;
             } catch (e) {
-              console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}: ${helperAndHostSet}`, e);
+              console.error(`[SWC] Failed to execute directive {{= ${expr.script} }} on attribute ${name}: ${exprHelperAndHostSet}`, e);
               processedVal = newVal;
             }
           }
@@ -782,21 +779,8 @@ export const elementDefine =
           }
         }
 
-        const hostCustomEventMeta = emitHostCustomEventList.find(it => (it.options as any).attributeName === name);
-        if (hostCustomEventMeta && newVal !== null) {
-          (this as any)._bindAttributeEvent(this as any, name, newVal, hostCustomEventMeta.type);
-        }
-
-        const metaList = attrChangeMap.get(name);
-        if (metaList && Array.isArray(metaList)) {
-          for (const meta of metaList) {
-            if (meta.options.while === 'connected' && !(this as any).__swc_connected) {
-              continue;
-            }
-            const convertedVal = convertAttributeValue(processedVal, meta.options.type);
-            (this as any)[meta.propertyKey](convertedVal, old, name, hSet);
-          }
-        }
+        // cycler 위임: attribute 옵저빙(@emitCustomEvent(attributeName) / @changedAttribute 등)
+        for (const c of cyclers) c.onAttributeChanged?.(helperAndHostSet, name, old, processedVal);
       };
 
       Object.defineProperty(constructor, 'observedAttributes', {
@@ -807,7 +791,7 @@ export const elementDefine =
       ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, metadata, constructor);
       const registry = metadata.customElementRegistry || (win as any)?.customElements;
       if (registry && !registry.get(metadata.name)) {
-        registry.define(metadata.name, constructor as any, metadata.extends ? {extends: metadata.extends} : undefined);
+        registry.define(metadata.name, constructor as any, metadata.extends ? { extends: metadata.extends } : undefined);
       }
       return constructor;
     };