@dooboostore/simple-web-component 1.0.49 → 1.0.51

package/src/decorators/elementDefine.ts

@@ -11,15 +11,21 @@ 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 {ElementDefineLifeCycler, HelperHostSet, HostSet, InjectSituationType, IntersectionObserverSet, MutationObserverSet, OnConnectedResult, ResizeObserverSet, ResizeObserverSetEntry, SwcRootType} from '../types';
+import {FirstCheckMaker} from '@dooboostore/simple-boot';
+import {buildSwcParameterArgs, getParameterMetadata} from './parameter';
+import {ElementDefineLifeCycler, HelperHostSet, HostSet, InjectSituationType, IntersectionObserverSet, MutationObserverSet, MutationObserverSetEntry, ObserverScope, OnConnectedResult, ResizeObserverSet, ResizeObserverSetEntry, SwcRootType} from '../types';
 import {ConvertUtils, ElementApply} from '@dooboostore/core-web';
 import {isSSR} from "../elements/SwcAppMixin";
 import {findAllStateMetadata} from "./state";
+import {findAllAroundMetadata} from "./around";
 import {findAllPropertyMetadata} from "./applyProperty";
-import {MessageSubscribeLifeCycler} from "./subscribeSwcAppMessageWhileConnected";
-import {RouteSubscribeLifeCycler} from "./subscribeSwcAppRouteChangeWhileConnected";
+import {MessageSubscribeLifeCycler} from "./subscribeSwcAppMessage";
+import {RouteSubscribeLifeCycler} from "./subscribeSwcAppRouteChange";
 import {SetIntervalLifeCycler} from "./setInterval";
 import {SetTimeoutLifeCycler} from "./setTimeout";
+import {RequestAnimationFrameLifeCycler} from "./requestAnimationFrame";
+import {EventMediaLifeCycler} from "./eventMedia";
+import {FetchLifeCycler} from "./fetch";
 
 // --- Core Interfaces & Types ---
 
@@ -39,7 +45,7 @@ export interface ElementMetadata extends Omit<ElementConfig, 'window'> {
 }
 
 export const getElementConfig = (target: any): ElementMetadata | undefined => {
-  const constructor = target instanceof Function ? target : target.constructor;
+  const constructor = typeof target === 'function' ? target : target.constructor;
   return ReflectUtils.getMetadata(ELEMENT_CONFIG_KEY, constructor);
 };
 
@@ -53,7 +59,7 @@ export const ensureInit = (inst: any) => { // HTMLElement
     //   delete (inst as any)[meta.propertyKey];
     // });
 
-    const target = inst instanceof Function ? inst : inst.constructor;
+    const target = typeof inst === 'function' ? inst : inst.constructor;
 
     // ╔════════════════════════════════════════════════════════════════════════════════╗
     // ║ decorator 필드의 own property 삭제                                              ║
@@ -112,6 +118,19 @@ export const ensureInit = (inst: any) => { // HTMLElement
     const propertyAllList = findAllPropertyMetadata(target).filter(it => it.type === 'property');
     if (propertyAllList) {
       propertyAllList.forEach(meta => {
+        // getter가 없으면(순수 필드: declare·하이드레이션 값 등) 지우지 않음.
+        // getter가 있을 때만 own 값을 지워 getter가 DOM을 새로 읽게 한다.
+        let proto = Object.getPrototypeOf(inst);
+        let hasGetter = false;
+        while (proto && proto !== Object.prototype) {
+          const d = Object.getOwnPropertyDescriptor(proto, meta.propertyKey);
+          if (d) {
+            hasGetter = typeof d.get === 'function';
+            break;
+          }
+          proto = Object.getPrototypeOf(proto);
+        }
+        if (!hasGetter) return;
         delete (inst as any)[meta.propertyKey];
       });
     }
@@ -119,9 +138,31 @@ export const ensureInit = (inst: any) => { // HTMLElement
     const stateAllList = findAllStateMetadata(target);
     if (stateAllList) {
       stateAllList.forEach(meta => {
-        const initUserData = (inst as any)[meta.propertyKey];
-        delete (inst as any)[meta.propertyKey];
-        (inst as any)[meta.propertyKey] = initUserData;
+        // getter로 읽으면 안 됨 — own이 남아있을 때 getter가 이주까지 해버려
+        // setter 재대입과 합치면 DOM 동기화가 중복 실행됨. descriptor에서 raw를 꺼낸다.
+        // own이 없으면(이미 정리됨) 스킵.
+        const own = Object.getOwnPropertyDescriptor(inst, meta.propertyKey);
+        if (own && 'value' in own) {
+          const initUserData = own.value;
+          delete (inst as any)[meta.propertyKey];
+          (inst as any)[meta.propertyKey] = initUserData;
+        }
+      });
+    }
+
+    // @around 필드의 own property 정리 → setter 경유로 재대입 (초기값에 set() 적용).
+    // attribute/query처럼 plain delete하면 초기값이 날아간다 — 반드시 살려서 setter로 넣는다.
+    // getter로 읽으면 안 됨(before 변환값이 섞임) — descriptor에서 raw를 꺼낸다.
+    // own이 없으면(이미 정리됨) 스킵 — 그래야 중복 변환이 안 생긴다.
+    const aroundAllList = findAllAroundMetadata(target);
+    if (aroundAllList) {
+      aroundAllList.forEach(meta => {
+        const own = Object.getOwnPropertyDescriptor(inst, meta.propertyKey);
+        if (own && 'value' in own) {
+          const initUserData = own.value;
+          delete (inst as any)[meta.propertyKey];
+          (inst as any)[meta.propertyKey] = initUserData;
+        }
       });
     }
 
@@ -151,7 +192,7 @@ const handleGlobalSwcEvent = async (event: Event) => {
     if (!(node instanceof HTMLElement)) continue;
     const script = node.getAttribute?.(attrName);
     if (script && !getElementConfig(node)) {
-      const host: any = SwcUtils.findNearestSwcHostIncludingSelf(node);
+      const host: any = SwcUtils.findNearestSwcAncestorHost(node);
       if (host && host.isConnected && typeof host.__swc_executeAttributeEvent === 'function') {
         await host.__swc_executeAttributeEvent(node, attrName, script, event);
         (event as any).__swc_handled = true;
@@ -209,8 +250,7 @@ const setupPrototype = (proto: any, win: Window) => {
     const script = this.getAttribute(attrName);
     if (script) {
       try {
-        const conf = getElementConfig(this);
-        const currentWin = (this as any)._resolveWindow(conf);
+        const currentWin = SwcUtils.resolveWindow(this);
         const helpers = SwcUtils.getHelperSet(currentWin);
         const args = {...hostSet, ...helpers, ...extraArgs, $el: this, $root: this.getRootNode()};
         FunctionUtils.execute({script, context: this, args});
@@ -220,22 +260,18 @@ const setupPrototype = (proto: any, win: Window) => {
     }
   };
 
-  proto._resolveWindow = function (localConfig?: ElementConfig): Window {
-    ensureInit(this);
-    if (localConfig?.window) return localConfig.window;
-    const ancestors = SwcUtils.findAllSwcHostsIncludingSelf(this as any);
-    for (let i = ancestors.length - 1; i >= 0; i--) {
-      const aConf = getElementConfig(ancestors[i]);
-      if (aConf?.window) return aConf.window;
-    }
-    return getElementConfig(this).window ?? ((typeof window !== 'undefined' ? window : undefined) as Window);
-  };
-
   proto._invokeLifecycleMethod = function (methodName: string | symbol, hostSet?: HostSet, extraArgs: any[] = []) {
     ensureInit(this);
     if (typeof (this as any)[methodName] !== 'function') return;
-    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(win, this);
+    const useHostSet = hostSet ?? SwcUtils.getHelperAndHostSet(this);
     const app = useHostSet?.$appHost?.simpleApplication;
+
+    // @hostSet/@helperHostSet/@helperSet(parameter.ts)를 위한 값. lifecycle 메서드는
+    // event/matched 개념이 없으므로 이 세 가지만 채운다.
+    const helperSetValue = SwcUtils.getHelperSet(win);
+    const helperHostSetValue = {...helperSetValue, ...useHostSet, $this: this};
+    const kindValues = {hostSet: useHostSet, helperHostSet: helperHostSetValue, helperSet: helperSetValue};
+
     // console.log('---->hh',app, this, methodName);
     if (app) {
       const otherStorage = new Map<any, any>();
@@ -248,16 +284,33 @@ const setupPrototype = (proto: any, win: Window) => {
       }), new SituationTypeContainer({situationType: InjectSituationType.LAST_APP_HOST, data: useHostSet.$lastAppHost})]);
       otherStorage.set(SituationTypeContainers, situations);
 
+      // @hostSet/@helperHostSet/@helperSet가 붙은 파라미터는 @Inject/situationType 기반
+      // 해석보다 먼저 처리되고(firstCheckMaker), 그 외 파라미터는 기존처럼 @Inject/타입
+      // 기반으로 정상 해석된다 — 같은 메서드에서 두 방식을 섞어 써도 된다.
+      // swc 파라미터 데코레이터가 붙은 자리는 DI 로 넘기지 않는다. lifecycle 이 못 채우는 kind
+      // (예: @fetchSettled — @fetch 가 나중에 채움)는 null. undefined 를 돌려주면
+      // "처리 안 함"으로 보고 DI 가 파라미터 타입(Object 등)을 resolve 하려다 SimNoSuch 로 죽는다.
+      const firstCheckMaker: FirstCheckMaker = ({target, targetKey}, token, idx) => {
+        const saves = getParameterMetadata(target, targetKey!);
+        const found = saves.find(s => s.index === idx);
+        return found ? ((kindValues as any)[found.kind] ?? null) : undefined;
+      };
+
       return app.simstanceManager.executeBindParameterSim(
         {
           target: this,
           targetKey: methodName,
-          inputParameters: extraArgs
+          inputParameters: extraArgs,
+          firstCheckMaker: [firstCheckMaker]
         },
         otherStorage
       );
     } else {
-      return (this as any)[methodName](...extraArgs);
+      // SimpleApplication(DI 컨테이너)이 없는 standalone 사용 시에도 @hostSet/@helperHostSet/
+      // @helperSet만큼은 buildSwcParameterArgs로 주입해준다 — 해당 데코레이터가 하나도 없으면
+      // extraArgs를 그대로 반환하므로(기존 동작 그대로) 하위호환 깨지지 않는다.
+      const args = buildSwcParameterArgs(this, methodName, kindValues, extraArgs);
+      return (this as any)[methodName](...args);
     }
   };
 
@@ -279,8 +332,7 @@ const setupPrototype = (proto: any, win: Window) => {
 
     const handler = async (event: any) => {
       const hostSet = SwcUtils.getHostSet(el);
-      const conf = getElementConfig(this);
-      const currentWin = (this as any)._resolveWindow(conf);
+      const currentWin = SwcUtils.resolveWindow(this);
       const helpers = SwcUtils.getHelperSet(currentWin);
       const args = {
         event,
@@ -301,8 +353,7 @@ const setupPrototype = (proto: any, win: Window) => {
     ensureInit(this);
 
     const hostSet = SwcUtils.getHostSet(el);
-    const conf = getElementConfig(this);
-    const currentWin = (this as any)._resolveWindow(conf);
+    const currentWin = SwcUtils.resolveWindow(this);
     const currentHelpers = SwcUtils.getHelperSet(currentWin);
     const detail = (event as CustomEvent).detail;
     const args = {
@@ -319,6 +370,11 @@ const setupPrototype = (proto: any, win: Window) => {
   };
 };
 
+// 부모 클래스도 elementDefine 됐으면 proto.xxxCallback 은 부모의 swc 래퍼다 — 그걸 원래 함수로 부르면 라이프사이클이 두 번 돈다.
+// 래퍼에 기억해 둔 사용자 원래 함수(없으면 undefined)를 쓴다.
+const SWC_ORIGINAL_CALLBACK = Symbol.for('simple-web-component:original-callback');
+const userCallback = (fn: any) => (typeof fn === 'function' && SWC_ORIGINAL_CALLBACK in fn ? fn[SWC_ORIGINAL_CALLBACK] : fn);
+
 export const elementDefine =
   (name: string, config: Partial<ElementConfig> = {}): ClassDecorator =>
     (constructor: any) => {
@@ -357,34 +413,87 @@ export const elementDefine =
       const proto = constructor.prototype;
       setupPrototype(proto, win);
 
-      // 값을 기대하지않는다.
-      let helperHostSet: HelperHostSet | null = null;
+      // helperHostSet 은 인스턴스마다 다르다 — 클래스 단위 변수로 두면 다른 인스턴스의 connect 가 덮어써서
+      // disconnect 때 엉뚱한 인스턴스가 정리된다. connect 시점 값을 인스턴스에 저장해 disconnect/adopt 에서 쓴다.
+      const connectedHelperHostSet = (inst: any): HelperHostSet => inst.__swc_helperHostSet ?? SwcUtils.getHelperAndHostSet(inst);
       // ── cyclers: 데코레이터별 라이프사이클 위임 클래스 (elementDefine 시 1회 생성, 계속 재사용) ──
       const eventCycler = new EventListenerLifeCycler();
+      const resizeCycler = new ResizeObserverLifeCycler();
+      const intersectionCycler = new IntersectionObserverLifeCycler();
+      const mutationCycler = new MutationObserverLifeCycler();
       const cyclers: ElementDefineLifeCycler[] = [
         eventCycler,
         new ChangedAttributeLifeCycler(),
         new EmitCustomEventLifeCycler(),
-        new ResizeObserverLifeCycler(),
-        new IntersectionObserverLifeCycler(),
-        new MutationObserverLifeCycler(),
+        resizeCycler,
+        intersectionCycler,
+        mutationCycler,
         new MessageSubscribeLifeCycler(),
         new RouteSubscribeLifeCycler(),
         new SetIntervalLifeCycler(),
         new SetTimeoutLifeCycler(),
+        new RequestAnimationFrameLifeCycler(),
+        new EventMediaLifeCycler(),
+        new FetchLifeCycler(),
       ];
 
       // 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> => {
+      // ── observer 빌드 (connect 1회당 상태 1개) ──
+      // MutationObserver·ResizeObserver 는 인스턴스당 1개씩만 만들고 모든 데코레이터가 공유한다 (delegate 추적 포함).
+      // 'self'(렌더 전): 자기 자신 대상 mutation/resize 만 붙여 첫 렌더부터 본다.
+      // 'rest'(렌더 후): 나머지 전부를 같은 옵저버에 덧붙인다.
+      // 시클러가 scope 별로 자기 메타만 담은 콜백을 주고, 메타는 자기 대상 레코드/엔트리만 받으므로 따로 나눌 필요가 없다.
+      // IntersectionObserver 는 옵션 그룹별로 1개 ('rest' 전용).
+      type IntersectionDelegate = { target: string; delegateRoot?: SwcRootType; observe: (el: Element) => void; unobserve: (el: Element) => void };
+      interface ObserverState {
+        observers: Array<MutationObserver | ResizeObserver | IntersectionObserver>;
+        ro?: ResizeObserver;
+        roCallbacks: Set<ResizeObserverSetEntry['callback']>;
+        roObserved: WeakSet<Element>;
+        resizeDelegates: Array<ResizeObserverSetEntry & { target: string }>;
+        intersectionDelegates: IntersectionDelegate[];
+        mo?: MutationObserver;
+        moCallbacks: Set<MutationObserverSetEntry['callback']>;
+        moTargets: Map<Element | ShadowRoot, MutationObserverInit>;
+      }
+      const newObserverState = (): ObserverState => ({
+        observers: [], roCallbacks: new Set(), roObserved: new WeakSet(), resizeDelegates: [], intersectionDelegates: [],
+        moCallbacks: new Set(), moTargets: new Map(),
+      });
+
+      // 같은 target 이 여러 소스에서 지정되면 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,
+        };
+      };
+
+      // delegate 셀렉터에 맞는 요소(자신 또는 하위)를 찾아 observe/unobserve — MutationObserver 콜백에서 동적 추적용
+      const forDelegateMatches = (n: Node, selector: string, fn: (el: Element) => void) => {
+        if (n.nodeType !== 1) return;
+        const el = n as HTMLElement;
+        const isThis = selector === '$this' || selector === '';
+        if (isThis || el.matches?.(selector) || el.closest?.(selector)) fn(el);
+        else el.querySelectorAll(selector).forEach(fn);
+      };
+
+      const buildObservers = async (helperHostSet: HelperHostSet, scope: ObserverScope, st: ObserverState, alive: () => boolean): Promise<void> => {
         const inst = helperHostSet.$this;
-        const observers: Array<MutationObserver | ResizeObserver | IntersectionObserver> = [];
-        let resizeObserverSet: ResizeObserverSet = [];
-        let mutationObserverSet: MutationObserverSet = [];
-        let intersectionObserverSet: IntersectionObserverSet = [];
+        // 'self' 는 순수 수집기(observer 시클러)만 돌린다 — 리스너·타이머 등 부작용 시클러는 'rest' 에서 한 번만.
+        const activeCyclers = scope === 'self' ? [resizeCycler, mutationCycler] : cyclers;
 
         // delegate 추적 root 해석: shadow/light/auto/all → 실제 root 목록
         const resolveDelegateRoots = (delegateRoot: SwcRootType | undefined): (HTMLElement | ShadowRoot)[] => {
@@ -397,225 +506,143 @@ export const elementDefine =
           return roots;
         };
 
-        // 1. 모든 시클러 onConnected → observer Set 수집 (여러 시클러가 반환한 Set 을 전부 누적)
-        for (const c of cyclers) {
-          const result = (await c.onConnected?.(helperHostSet, resizeObserverSet)) as OnConnectedResult | void;
+        // 1. 시클러 onConnected → observer Set 수집 (여러 시클러가 반환한 Set 을 전부 누적)
+        let resizeObserverSet: ResizeObserverSet = [];
+        let mutationObserverSet: MutationObserverSet = [];
+        let intersectionObserverSet: IntersectionObserverSet = [];
+        for (const c of activeCyclers) {
+          const result = (await c.onConnected?.(helperHostSet, resizeObserverSet, scope)) as OnConnectedResult | void;
+          // await 사이에 떼어졌으면(새 연결이 차례를 가져갔으면) 여기서 멈춘다 — 옵저버를 만들면 아무도 disconnect 하지 않아 샌다.
+          if (!alive()) return;
           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);
-          });
+        // 2. ResizeObserver (1개). delegate 항목은 셀렉터 문자열이라 초기 observe 하지 않고 MutationObserver 로 동적 추적한다.
+        const resizeObserve = (el: Element, opts?: ResizeObserverOptions) => {
+          if (!st.ro || st.roObserved.has(el)) return;
+          st.ro.observe(el, opts);
+          st.roObserved.add(el);
+        };
+        const resizeUnobserve = (el: Element) => {
+          if (!st.ro || !st.roObserved.has(el)) return;
+          st.ro.unobserve(el);
+          st.roObserved.delete(el);
+        };
+        const newResizeDelegates: ObserverState['resizeDelegates'] = [];
+        if (resizeObserverSet.length) {
+          if (!st.ro) {
+            st.ro = new win.ResizeObserver((entries, obs) => { for (const cb of st.roCallbacks) cb(entries, obs); });
+            st.observers.push(st.ro);
+          }
           for (const e of resizeObserverSet) {
-            if (e.delegate) continue;
+            st.roCallbacks.add(e.callback);
+            if (e.delegate) {
+              if (typeof e.target === 'string') newResizeDelegates.push(e as ResizeObserverSetEntry & { target: string });
+              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); }
-                });
-              }
+              for (const r of resolveDelegateRoots(e.delegateRoot)) r.querySelectorAll(e.target).forEach(el => resizeObserve(el, e.options));
               continue;
             }
-            ro.observe(e.target as Element, e.options);
-            if (e.target instanceof Element) resizeObserved.add(e.target);
+            st.ro.observe(e.target as Element, e.options);
+            if (e.target instanceof Element) st.roObserved.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);
+          st.resizeDelegates.push(...newResizeDelegates);
         }
 
-        // IntersectionObserver: 옵션 그룹별로 1개씩 생성.
-        // delegate 항목은 동적 추적용 셀렉터이므로 observe/unobserve 함수를 MutationObserver 콜백에 넘긴다.
-        // 동적 observe/unobserve 중복 방지를 위해 그룹별 WeakSet 으로 추적한다.
-        const intersectionDelegates: Array<{ target: string; delegateRoot?: SwcRootType; observe: (el: Element) => void; unobserve: (el: Element) => void }> = [];
+        // 3. IntersectionObserver: 옵션 그룹별로 1개. delegate 항목은 MutationObserver 로 동적 추적한다.
+        const newIntersectionDelegates: IntersectionDelegate[] = [];
         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 io = new win.IntersectionObserver((entries, obs) => { for (const cb of ioCallbacks) cb(entries, obs); }, group.options);
           const ioObserved = new WeakSet<Element>();
+          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); };
           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 (e.delegate) { newIntersectionDelegates.push({ target: e.target as string, 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); }
-                });
-              }
+              for (const r of resolveDelegateRoots(e.delegateRoot)) r.querySelectorAll(e.target).forEach(observe);
               continue;
             }
-            io.observe(e.target as Element);
-            if (e.target instanceof Element) ioObserved.add(e.target);
+            observe(e.target as Element);
           }
-          observers.push(io);
+          st.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);
-              });
-            }
+        st.intersectionDelegates.push(...newIntersectionDelegates);
+
+        // 4. MutationObserver (1개): mutation 콜백 + resize/intersection delegate 동적 추적을 함께 처리한다.
+        if (mutationObserverSet.length || newResizeDelegates.length || newIntersectionDelegates.length) {
+          if (!st.mo) {
+            st.mo = new win.MutationObserver((mutations, obs) => {
+              for (const mut of mutations) {
+                for (const [nodes, on] of [[mut.addedNodes, true], [mut.removedNodes, false]] as const) {
+                  for (const n of Array.from(nodes)) {
+                    for (const d of st.resizeDelegates) forDelegateMatches(n, d.target, el => on ? resizeObserve(el, d.options) : resizeUnobserve(el));
+                    for (const d of st.intersectionDelegates) forDelegateMatches(n, d.target, el => on ? d.observe(el) : d.unobserve(el));
+                  }
+                }
+              }
+              for (const cb of st.moCallbacks) cb(mutations, obs);
+            });
+            st.observers.push(st.mo);
           }
-        };
-
-        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));
+            st.moTargets.set(target, mergeMutationInit(st.moTargets.get(target), options));
           };
-
-          // 1) mutationObserverSet 엔트리
-          for (const e of mutationObserverSet ?? []) {
+          for (const e of mutationObserverSet) {
+            st.moCallbacks.add(e.callback);
             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));
-              }
+              for (const r of resolveDelegateRoots(e.delegateRoot)) r.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 d of [...newResizeDelegates, ...newIntersectionDelegates]) {
             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);
+          // 같은 노드를 다시 observe 하면 옵션만 교체된다 (등록·전달 중복 없음) → 'self' 분과 합쳐진 옵션으로 갱신
+          for (const [target, options] of st.moTargets) st.mo.observe(target, options);
         }
 
-        inst.__swc_observers = observers;
+        inst.__swc_observers = st.observers;
       };
 
-      const originalConnected = proto.connectedCallback;
+      const originalConnected = userCallback(proto.connectedCallback);
       proto.connectedCallback = async function () {
         ensureInit(this);
         // 재연결 시 누적 방지 — cycler 내부 리소스 초기화
-        helperHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
+        const helperHostSet = SwcUtils.getHelperAndHostSet(this as any);
+        (this as any).__swc_helperHostSet = helperHostSet;
         const appHost = helperHostSet.$appHost;
         const useSsr = isSSR(this);
+        // 연결 처리는 await 를 거친다. 그 사이 떨어지거나 다시 붙으면(disconnect / 새 connect 가 차례 번호를 올리면) 이 연결은 멈춘다 —
+        // 안 그러면 떼어진 뒤에 리스너·타이머가 등록돼 새고, 다시 붙은 연결과 겹쳐 두 번씩 돈다.
+        // (isConnected 는 보지 않는다 — 직접 호출이나 SSR 처럼 붙어 있지 않아도 라이프사이클은 돌아야 한다)
+        const gen = ((this as any).__swc_connectGen = ((this as any).__swc_connectGen ?? 0) + 1);
+        const alive = () => (this as any).__swc_connectGen === gen;
+        const obsState = newObserverState();
         try {
           if (appHost && typeof (appHost as any)._connected === 'function') {
             await (appHost as any)._connected(this);
+            if (!alive()) return;
           } else if (appHost && typeof (appHost as any)) {
             (appHost as any)._connected_safari_and_standby ??= [];
             (appHost as any)._connected_safari_and_standby.push(this);
           }
 
           const conf = getElementConfig(this);
-          const currentWin = (this as any)._resolveWindow(conf);
 
           // before-connected 라이프사이클 메서드 (@onConnectedBefore)
-          for (const m of findAllOnConnectedBeforeMetadata(this)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          for (const m of findAllOnConnectedBeforeMetadata(this)) {
+            await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+            if (!alive()) return;
+          }
           (this as any)._executeSwcScript('swc-on-before-connected', helperHostSet);
 
           // ── 렌더 (@onConnected / @onConnectedBody*) — elementDefine 책임 ──
@@ -626,6 +653,10 @@ export const elementDefine =
             this.attachShadow({ mode: mode as ShadowRootMode });
           }
 
+          // 자기 자신 대상 mutation/resize 는 렌더 전에 붙여 첫 렌더부터 본다 (shadow root 가 생긴 뒤라 $this 가 맞는 root 를 잡는다)
+          await buildObservers(helperHostSet, 'self', obsState, alive);
+          if (!alive()) return;
+
           const stateContext: any = { ...helperHostSet };
           findAllStateMetadata(this).forEach(it => {
             stateContext[it.name] = this[it.propertyKey];
@@ -635,8 +666,40 @@ export const elementDefine =
           const lightChildren: Node[] = [];
 
           if (targetConnectedList.length > 0) {
+            const toNodes = (value: any): Node[] => {
+              if (!value) return [];
+              if (typeof value === 'string') {
+                const htmlTemplateElement = doc.createElement('template');
+                htmlTemplateElement.innerHTML = value;
+                return Array.from(htmlTemplateElement.content.childNodes);
+              }
+              if (Array.isArray(value)) return value;
+              return [value];
+            };
+            // fallback: 비동기 렌더 대기 중에 먼저 보여준다. 결과는 모든 렌더 메서드가 끝난 뒤 한 번에 들어가므로
+            // 그때 같이 걷어낸다 (메서드별로 걷으면 다음 메서드를 기다리는 동안 빈 화면이 된다).
+            const shownFallbacks: Node[] = [];
+            const removeFallbacks = () => shownFallbacks.splice(0).forEach(n => (n as ChildNode).remove());
             for (const meta of targetConnectedList) {
+              const useShadowRoot = meta.options.useShadow || conf?.useShadow;
+              if (meta.options.fallback) {
+                const fb = typeof meta.options.fallback === 'function'
+                  ? (meta.options.fallback as any)(helperHostSet)
+                  : meta.options.fallback;
+                const fallbackNodes = toNodes(fb);
+                const parent = useShadowRoot ? this.shadowRoot : this;
+                if (fallbackNodes.length && parent) {
+                  try {
+                    const processed = SwcUtils.projectProcessHtml(this._swcId, fallbackNodes, doc);
+                    parent.append(...processed);
+                    shownFallbacks.push(...processed);
+                  } catch (e) {
+                    console.error('[ElementDefine] fallback setting error:', e);
+                  }
+                }
+              }
               let res = await (this as any)._invokeLifecycleMethod(meta.propertyKey, helperHostSet);
+              if (!alive()) { removeFallbacks(); return; }
               if (typeof res === 'string') {
                 const htmlTemplateElement = doc.createElement('template');
                 htmlTemplateElement.innerHTML = res;
@@ -651,6 +714,7 @@ export const elementDefine =
                 }
               }
             }
+            removeFallbacks();
             try {
               if (this.shadowRoot) {
                 const applyShadowChildren = SwcUtils.projectProcessHtml(this._swcId, shadowChildren, doc);
@@ -677,22 +741,27 @@ export const elementDefine =
             globalDelegatedRoots.add(root);
           }
 
-          // ── cycler 실행 (렌더 후): 모든 시클러 onConnected → observer Set 수집 → observer 생성 ──
-          // helperHostSet 은 클로저 변수라 async 흐름에서 다른 인스턴스로 덮어써질 수 있다.
-          // 반드시 현재 인스턴스(this)로 재계산한 값을 사용한다.
-          await buildObservers(SwcUtils.getHelperAndHostSet(win, this as any));
+          // ── cycler 실행 (렌더 후): 나머지 시클러 onConnected → observer Set 수집 → 같은 옵저버에 덧붙임 ──
+          await buildObservers(helperHostSet, 'rest', obsState, alive);
+          if (!alive()) return;
 
           if (originalConnected) await originalConnected.apply(this);
+          if (!alive()) return;
 
           // after-connected 라이프사이클 메서드 (@onConnectedAfter)
-          for (const m of findAllOnConnectedAfterMetadata(this)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          for (const m of findAllOnConnectedAfterMetadata(this)) {
+            await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+            if (!alive()) return;
+          }
           (this as any)._executeSwcScript('swc-on-connected', helperHostSet);
           (this as any)._executeSwcScript('swc-on-after-connected', helperHostSet);
           (this as any).__swc_connected = true;
         } finally {
-          for (const m of findAllLifecycleMetadata(this, ON_CONNECTED_COMPLETED_METADATA_KEY)) await (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
+          // 멈춘 연결은 완료 훅을 부르지 않고, 앱 host 에는 중단만 알린다 (자식 연결 수만 맞추고 재생은 안 함)
+          const aborted = !alive();
+          if (!aborted) 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);
+            await (appHost as any)._connectedDone(this, { aborted });
           }
         }
       };
@@ -700,16 +769,19 @@ export const elementDefine =
       /////////////////////////////////////////////////
       // disconnectedCallback
       ////////////////////////////////////////////////
-      const originalDisconnected = proto.disconnectedCallback;
+      const originalDisconnected = userCallback(proto.disconnectedCallback);
       proto.disconnectedCallback = function () {
-        const appHost = helperHostSet?.$appHost;
+        (this as any).__swc_connectGen = ((this as any).__swc_connectGen ?? 0) + 1; // 진행 중인 연결은 멈춘다
+        // 떨어진 뒤라 DOM 으로는 $appHost 를 다시 못 찾는다 → connect 때 저장한 이 인스턴스의 값
+        const helperHostSet = connectedHelperHostSet(this);
+        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);
         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!);
+        for (const c of cyclers) c.onDisconnected?.(helperHostSet);
 
         for (const o of (this as any).__swc_observers ?? []) {
           try { (o as any)?.disconnect?.(); } catch (e) { console.error('[SWC] observer disconnect error:', e); }
@@ -727,12 +799,12 @@ export const elementDefine =
         (this as any).__swc_connected = false;
       };
 
-      const originalAdopted = proto.adoptedCallback;
+      const originalAdopted = userCallback(proto.adoptedCallback);
       proto.adoptedCallback = function () {
         const hostSet = SwcUtils.getHostSet(this as any);
         (this as any)._executeSwcScript('swc-on-before-adopted', 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!);
+        for (const c of cyclers) c.onAdopted?.(connectedHelperHostSet(this));
 
         if (originalAdopted) originalAdopted.apply(this);
 
@@ -741,13 +813,13 @@ export const elementDefine =
         (this as any)._executeSwcScript('swc-on-after-adopted', hostSet);
       };
 
-      const originalAttributeChanged = proto.attributeChangedCallback;
+      const originalAttributeChanged = userCallback(proto.attributeChangedCallback);
       proto.attributeChangedCallback = function (name: string, old: string | null, newVal: string | null) {
         if (originalAttributeChanged) originalAttributeChanged.apply(this, [name, old, newVal]);
 
         // attributeChangedCallback 은 connected 이전에도 호출될 수 있으므로
         // 클로저의 helperHostSet(null 가능) 대신 이 시점에 새로 계산한다.
-        const helperAndHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
+        const helperAndHostSet = SwcUtils.getHelperAndHostSet(this as any);
 
         // Process expression directive before passing to handlers
         let processedVal: any = newVal;
@@ -755,8 +827,8 @@ export const elementDefine =
           const ae = new ActionExpression(newVal);
           const expr = ae.getFirstExpression('callReturn');
           if (expr) {
-            const win = (this as any)._resolveWindow?.() || ((typeof window !== 'undefined' ? window : undefined) as any);
-            const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(win, this as any);
+            const win = SwcUtils.resolveWindow(this);
+            const exprHelperAndHostSet = SwcUtils.getHelperAndHostSet(this as any);
             const script = ConvertUtils.decodeHtmlEntity(expr.script, win.document);
             try {
               const result = FunctionUtils.executeReturn({
@@ -788,6 +860,12 @@ export const elementDefine =
         configurable: true
       });
 
+      // 이 클래스를 다시 상속해 elementDefine 하면 자식이 이 래퍼 대신 원래 사용자 함수를 부르도록 기억해 둔다
+      proto.connectedCallback[SWC_ORIGINAL_CALLBACK] = originalConnected;
+      proto.disconnectedCallback[SWC_ORIGINAL_CALLBACK] = originalDisconnected;
+      proto.adoptedCallback[SWC_ORIGINAL_CALLBACK] = originalAdopted;
+      proto.attributeChangedCallback[SWC_ORIGINAL_CALLBACK] = originalAttributeChanged;
+
       ReflectUtils.defineMetadata(ELEMENT_CONFIG_KEY, metadata, constructor);
       const registry = metadata.customElementRegistry || (win as any)?.customElements;
       if (registry && !registry.get(metadata.name)) {