@dooboostore/simple-web-component 1.0.46 → 1.0.48

package/dist/esm/decorators/addEventListener.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/decorators/addEventListener.ts"],
-  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions<TEvent extends Event = Event> extends EventListenerOptions {\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  // removeOnDisconnected?: boolean;\n  delegate?: boolean;\n  filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n  // RxJS operator options\n  debounceTime?: number;\n  throttleTime?: number;\n  distinctUntilChanged?: boolean | ((prev: TEvent, curr: TEvent) => boolean);\n}\n\nexport type EventListenerSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);\n\nexport interface AddEventListenerMetadata<TEvent extends Event = Event> {\n  propertyKey: string | symbol;\n  selector: EventListenerSelector;\n  type: string;\n  options: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener<TEvent extends Event = Event>(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator;\nexport function addEventListener<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener<TEvent extends Event = Event>(selectorOrTarget: EventListenerSelector, type: string, options: any = {}): MethodDecorator {\n  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    const constructor = targetObj.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata<TEvent>[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n\n    listeners.push({ propertyKey, selector: selectorOrTarget, type, options });\n  };\n}\n\n\nexport function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'light', delegate: true});\n}\n\nexport function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow', delegate: true});\n}\nexport function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'all', delegate: true});\n}\nexport function addEventListenerDelegate<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'auto', delegate: true});\n}\n\n/**\n * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector\n */\n\n// --- Aliases: event... ---\nexport const event = addEventListener;\nexport const eventDelegateLightDom = addEventListenerDelegateLightDom;\nexport const eventDelegateShadowDom = addEventListenerDelegateShadowDom;\nexport const eventDelegateAllDom = addEventListenerDelegateAllDom;\nexport const eventDelegate = addEventListenerDelegate;\nexport function addEventListenerThis<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$appHost', type, options);\n}\n\nexport function addEventListenerWindow<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$window', type, options);\n}\nexport function addEventListenerDocument<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$document', type, options);\n}\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata<Event>[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
-  "mappings": "AAAA,SAAS,oBAAoB;AA4BtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAO5F,SAAS,iBAA+C,kBAAyC,MAAc,UAAe,CAAC,GAAoB;AACxJ,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,aAAa,YAAgD,iCAAiC,WAAW;AACzH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AAEA,cAAU,KAAK,EAAE,aAAa,UAAU,kBAAkB,MAAM,QAAQ,CAAC;AAAA,EAC3E;AACF;AAGO,SAAS,iCAA+D,UAAiC,MAAc,SAAkF;AAC9M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AAChG;AAEO,SAAS,kCAAgE,UAAiC,MAAc,SAAkF;AAC/M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACjG;AACO,SAAS,+BAA6D,UAAiC,MAAc,SAAkF;AAC5M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AAC9F;AACO,SAAS,yBAAuD,UAAiC,MAAc,SAAkF;AACtM,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAQ,UAAU,KAAI,CAAC;AAC/F;AAOO,MAAM,QAAQ;AACd,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,gBAAgB;AACtB,SAAS,qBAAmD,MAAc,SAAkF;AACjK,SAAO,iBAAyB,SAAS,MAAM,OAAO;AACxD;AAKO,SAAS,wBAAsD,MAAc,SAAkF;AACpK,SAAO,iBAAyB,YAAY,MAAM,OAAO;AAC3D;AAEO,SAAS,uBAAqD,MAAc,SAAkF;AACnK,SAAO,iBAAyB,WAAW,MAAM,OAAO;AAC1D;AACO,SAAS,yBAAuD,MAAc,SAAkF;AACrK,SAAO,iBAAyB,aAAa,MAAM,OAAO;AAC5D;AAEO,MAAM,8BAA8B,CAAC,WAA+D;AACzG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
+  "sourcesContent": ["import { ReflectUtils } from '@dooboostore/core';\nimport { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';\n\nexport interface AddEventListenerBaseOptions<TEvent extends Event = Event> extends EventListenerOptions {\n  capture?: boolean;\n  once?: boolean;\n  passive?: boolean;\n  stopPropagation?: boolean;\n  stopImmediatePropagation?: boolean;\n  preventDefault?: boolean;\n  // removeOnDisconnected?: boolean;\n  delegate?: boolean;\n  filter?: (target: Event | CustomEvent, meta:{currentThis: any, helper: HelperHostSet}) => boolean;\n  // \uB9AC\uC2A4\uB108 \uC81C\uAC70(disconnected \uB610\uB294 unmount) \uC2DC \uD638\uCD9C\uB418\uB294 \uCF5C\uBC31. \uCCAB \uBC88\uC9F8 \uC778\uC790\uB294 \uBC14\uC778\uB529\uB41C \uD0C0\uAC9F element, \uB450 \uBC88\uC9F8\uB294 \uC774 \uC635\uC158\uC774 \uC18D\uD55C \uC804\uCCB4 \uC635\uC158 \uAC1D\uCCB4(Base + SwcQuery + delegate).\n  removeListener?: (target: Element, optionValue: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }) => void;\n  // RxJS operator options\n  debounceTime?: number;\n  throttleTime?: number;\n  distinctUntilChanged?: boolean | ((prev: TEvent, curr: TEvent) => boolean);\n}\n\nexport type EventListenerSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);\n\nexport interface AddEventListenerMetadata<TEvent extends Event = Event> {\n  propertyKey: string | symbol;\n  selector: EventListenerSelector;\n  type: string;\n  options: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean };\n}\n\nexport const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for('simple-web-component:add-event-listener');\n\nexport function addEventListener<TEvent extends Event = Event>(target: SpecialSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator;\nexport function addEventListener<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener(type, options?) \u2014 \uC140\uB809\uD130 \uC0DD\uB7B5 \uC2DC $this(\uCEF4\uD3EC\uB10C\uD2B8 \uC790\uC2E0)\uB85C \uBC14\uC778\uB529\n */\nexport function addEventListener<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator;\n/**\n * @addEventListener decorator to bind events to elements.\n */\nexport function addEventListener<TEvent extends Event = Event>(selectorOrType: EventListenerSelector | string, typeOrOptions?: string | (AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }), maybeOptions?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions & { delegate?: boolean }): MethodDecorator {\n  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {\n    let selector: EventListenerSelector;\n    let type: string;\n    let opts: any = {};\n\n    if (typeof typeOrOptions === 'string') {\n      // (selector, type[, options]) form \u2014 \uAE30\uC874 \uD638\uD658\n      selector = selectorOrType as EventListenerSelector;\n      type = typeOrOptions;\n      opts = maybeOptions ?? {};\n    } else {\n      // (type[, options]) form \u2014 selector \uAE30\uBCF8\uAC12 $this\n      selector = '$this';\n      type = selectorOrType as string;\n      opts = typeOrOptions ?? {};\n    }\n\n    const constructor = targetObj.constructor;\n\n    let listeners = ReflectUtils.getMetadata<AddEventListenerMetadata<TEvent>[]>(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n    if (!listeners) {\n      listeners = [];\n      ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);\n    }\n\n    listeners.push({ propertyKey, selector, type, options: opts });\n  };\n}\n\n\nexport function addEventListenerDelegateLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'light', delegate: true});\n}\n\nexport function addEventListenerDelegateShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow', delegate: true});\n}\nexport function addEventListenerDelegateAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'all', delegate: true});\n}\nexport function addEventListenerDelegate<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: Omit<AddEventListenerBaseOptions<TEvent>, 'delegate'>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'auto', delegate: true});\n}\n\n// \u2500\u2500\u2500 root\uBCC4 \uC77C\uBC18 \uD5EC\uD37C (delegate \uC5C6\uC74C) \u2500\u2500\u2500\n\nexport function addEventListenerLightDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'light'});\n}\n\nexport function addEventListenerShadowDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'shadow'});\n}\n\nexport function addEventListenerAllDom<TEvent extends Event = Event>(selector: EventListenerSelector, type: string, options?: AddEventListenerBaseOptions<TEvent>): MethodDecorator {\n  return addEventListener<TEvent>(selector, type, {...options??{}, root:'all'});\n}\n\n/**\n * @addEventListenerThis decorator - simplified version of @addEventListener for $this selector\n */\nexport function addEventListenerThis<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$this', type, options);\n}\n\n/**\n * @addEventListenerAppHost decorator - simplified version of @addEventListener for $appHost selector\n */\nexport function addEventListenerAppHost<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$appHost', type, options);\n}\n\nexport function addEventListenerWindow<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$window', type, options);\n}\nexport function addEventListenerDocument<TEvent extends Event = Event>(type: string, options?: AddEventListenerBaseOptions<TEvent> & SwcQueryOptions): MethodDecorator {\n  return addEventListener<TEvent>('$document', type, options);\n}\n\n// --- Aliases: event... ---\nexport const event = addEventListener;\nexport const eventDelegateLightDom = addEventListenerDelegateLightDom;\nexport const eventDelegateShadowDom = addEventListenerDelegateShadowDom;\nexport const eventDelegateAllDom = addEventListenerDelegateAllDom;\nexport const eventDelegate = addEventListenerDelegate;\nexport const eventLightDom = addEventListenerLightDom;\nexport const eventShadowDom = addEventListenerShadowDom;\nexport const eventAllDom = addEventListenerAllDom;\nexport const eventAppHost = addEventListenerAppHost;\nexport const eventWindow = addEventListenerWindow;\nexport const eventDocument = addEventListenerDocument;\nexport const eventThis = addEventListenerThis;\n\nexport const getAddEventListenerMetadata = (target: any): AddEventListenerMetadata<Event>[] | undefined => {\n  const constructor = target instanceof Function ? target : target.constructor;\n  return ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);\n};\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AA8BtB,MAAM,kCAAkC,OAAO,IAAI,yCAAyC;AAW5F,SAAS,iBAA+C,gBAAgD,eAA2G,cAAgH;AACxU,SAAO,CAAC,WAAmB,aAA8B,eAAmC;AAC1F,QAAI;AACJ,QAAI;AACJ,QAAI,OAAY,CAAC;AAEjB,QAAI,OAAO,kBAAkB,UAAU;AAErC,iBAAW;AACX,aAAO;AACP,aAAO,gBAAgB,CAAC;AAAA,IAC1B,OAAO;AAEL,iBAAW;AACX,aAAO;AACP,aAAO,iBAAiB,CAAC;AAAA,IAC3B;AAEA,UAAM,cAAc,UAAU;AAE9B,QAAI,YAAY,aAAa,YAAgD,iCAAiC,WAAW;AACzH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,mBAAa,eAAe,iCAAiC,WAAW,WAAW;AAAA,IACrF;AAEA,cAAU,KAAK,EAAE,aAAa,UAAU,MAAM,SAAS,KAAK,CAAC;AAAA,EAC/D;AACF;AAGO,SAAS,iCAA+D,UAAiC,MAAc,SAAkF;AAC9M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAS,UAAU,KAAI,CAAC;AAChG;AAEO,SAAS,kCAAgE,UAAiC,MAAc,SAAkF;AAC/M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,UAAU,UAAU,KAAI,CAAC;AACjG;AACO,SAAS,+BAA6D,UAAiC,MAAc,SAAkF;AAC5M,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,OAAO,UAAU,KAAI,CAAC;AAC9F;AACO,SAAS,yBAAuD,UAAiC,MAAc,SAAkF;AACtM,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAQ,UAAU,KAAI,CAAC;AAC/F;AAIO,SAAS,yBAAuD,UAAiC,MAAc,SAAgE;AACpL,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,QAAO,CAAC;AAChF;AAEO,SAAS,0BAAwD,UAAiC,MAAc,SAAgE;AACrL,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,SAAQ,CAAC;AACjF;AAEO,SAAS,uBAAqD,UAAiC,MAAc,SAAgE;AAClL,SAAO,iBAAyB,UAAU,MAAM,EAAC,GAAG,WAAS,CAAC,GAAG,MAAK,MAAK,CAAC;AAC9E;AAKO,SAAS,qBAAmD,MAAc,SAAkF;AACjK,SAAO,iBAAyB,SAAS,MAAM,OAAO;AACxD;AAKO,SAAS,wBAAsD,MAAc,SAAkF;AACpK,SAAO,iBAAyB,YAAY,MAAM,OAAO;AAC3D;AAEO,SAAS,uBAAqD,MAAc,SAAkF;AACnK,SAAO,iBAAyB,WAAW,MAAM,OAAO;AAC1D;AACO,SAAS,yBAAuD,MAAc,SAAkF;AACrK,SAAO,iBAAyB,aAAa,MAAM,OAAO;AAC5D;AAGO,MAAM,QAAQ;AACd,MAAM,wBAAwB;AAC9B,MAAM,yBAAyB;AAC/B,MAAM,sBAAsB;AAC5B,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AACvB,MAAM,cAAc;AACpB,MAAM,eAAe;AACrB,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,YAAY;AAElB,MAAM,8BAA8B,CAAC,WAA+D;AACzG,QAAM,cAAc,kBAAkB,WAAW,SAAS,OAAO;AACjE,SAAO,aAAa,YAAY,iCAAiC,WAAW;AAC9E;",
   "names": []
 }

package/dist/esm/decorators/elementDefine.js

@@ -1,6 +1,8 @@
 import { ActionExpression, FunctionUtils, ReflectUtils, Subject } from "@dooboostore/core";
 import { debounceTime, distinctUntilChanged, throttleTime } from "@dooboostore/core/message/operators";
 import { getAddEventListenerMetadata } from "./addEventListener.js";
+import { getMutationObserverMetadata } from "./mutationObserver.js";
+import { getResizeObserverMetadata } from "./resizeObserver.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";
@@ -24,7 +26,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");
@@ -226,6 +227,8 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const emitCustomEventList = getEmitCustomEventMetadataList(constructor) || [];
   const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
   const addEventListenerList = getAddEventListenerMetadata(constructor) || [];
+  const mutationObserverList = getMutationObserverMetadata(constructor) || [];
+  const resizeObserverList = getResizeObserverMetadata(constructor) || [];
   const attrChangeMap = findAllAttributeChangedMetadata(constructor);
   const attributeList = findAllAttributeMetadata(constructor);
   const applyAttributeMap = findAllAttributeApplyMetadata(constructor);
@@ -238,9 +241,18 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const proto = constructor.prototype;
   setupPrototype(proto, win);
   let helperHostSet = null;
+  let boundListeners = [];
+  let shadowMutationObserver = null;
+  let lightMutationObserver = null;
+  let resizeObserver = null;
+  let resizeObservers = [];
+  let removeObserverCallbacks = [];
   const originalConnected = proto.connectedCallback;
   proto.connectedCallback = async function() {
     ensureInit(this);
+    boundListeners = [];
+    resizeObservers = [];
+    removeObserverCallbacks = [];
     helperHostSet = SwcUtils.getHelperAndHostSet(win, this);
     const appHost = helperHostSet.$appHost;
     const useSsr = isSSR(this);
@@ -369,7 +381,13 @@ const elementDefine = (name, config = {}) => (constructor) => {
             }
           };
           br.addEventListener(type, unifiedHandler, opts);
-          this._boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts });
+          const onRemoves = [];
+          for (const m of sortedMetaList) {
+            if (m.options.removeListener) {
+              onRemoves.push({ fn: m.options.removeListener, opts: m.options });
+            }
+          }
+          boundListeners.push({ target: br, type, handler: unifiedHandler, options: opts, onRemoves });
         });
       });
       nonDelegateListeners.forEach((meta) => {
@@ -469,9 +487,181 @@ const elementDefine = (name, config = {}) => (constructor) => {
             eventSubject.next(event);
           };
           t.addEventListener(type, wrappedHandler, opts);
-          this._boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription });
+          const onRemoves = options.removeListener ? [{ fn: options.removeListener, opts }] : [];
+          boundListeners.push({ target: t, type, handler: wrappedHandler, options: opts, subscription, onRemoves });
+        });
+      });
+      shadowMutationObserver = null;
+      lightMutationObserver = null;
+      resizeObserver = null;
+      if (resizeObserverList.length > 0) {
+        const root2 = this.shadowRoot || this;
+        resizeObserver = new ResizeObserver((entries, obs) => {
+          for (const m of resizeObserverList) {
+            let matchedEls = [];
+            if (m.options.delegate && typeof m.selector === "string") {
+              const isThis = m.selector === "$this" || m.selector === "";
+              const matchesSel = (node) => {
+                if (!node || node.nodeType !== 1) return false;
+                if (isThis) return true;
+                const el = node;
+                return el.matches?.(m.selector) || !!el.closest?.(m.selector);
+              };
+              matchedEls = entries.map((e) => e.target).filter(matchesSel);
+            } else {
+              matchedEls = entries.map((e) => e.target).filter((t) => t && t.nodeType === 1);
+            }
+            if (matchedEls.length === 0) continue;
+            if (m.options.filter) {
+              const helper = SwcUtils.getHelperAndHostSet(currentWin, this);
+              if (!m.options.filter(matchedEls, { currentThis: this, helper })) continue;
+            }
+            const hostSet = SwcUtils.getHostSet(this);
+            this[m.propertyKey](matchedEls, entries, obs, { ...hostSet, $root: root2 });
+          }
         });
+        resizeObservers.push(resizeObserver);
+        for (const m of resizeObserverList) {
+          if (m.options.removeObserver) {
+            removeObserverCallbacks.push({ fn: m.options.removeObserver, target: root2, opts: m.options });
+          }
+        }
+      }
+      const shadowMetas = mutationObserverList.filter((m) => {
+        const r = m.options.root || "auto";
+        return this.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+      });
+      const lightMetas = mutationObserverList.filter((m) => {
+        const r = m.options.root || "auto";
+        return r === "light" || r === "all" || !this.shadowRoot && r === "auto";
       });
+      const setupMutationObserver = (root2, metas, resizeDelegates = []) => {
+        if (metas.length === 0) return null;
+        const initFrom = (o) => {
+          const init = {
+            childList: o.childList,
+            attributes: o.attributes,
+            characterData: o.characterData,
+            subtree: o.subtree,
+            attributeFilter: o.attributeFilter,
+            attributeOldValue: o.attributeOldValue,
+            characterDataOldValue: o.characterDataOldValue
+          };
+          if (!init.childList && !init.attributes && !init.characterData) init.childList = true;
+          return init;
+        };
+        const observer = new MutationObserver((mutations, obs) => {
+          for (const meta of metas) {
+            const { selector, options } = meta;
+            let matchedEls = [];
+            if (options.delegate && typeof selector === "string") {
+              const isThis = selector === "$this" || selector === "";
+              const matchesSel = (node) => {
+                if (!node || node.nodeType !== 1) return false;
+                if (isThis) return true;
+                const el = node;
+                return el.matches?.(selector) || !!el.closest?.(selector);
+              };
+              matchedEls = mutations.flatMap((m) => {
+                const els = [];
+                if (matchesSel(m.target)) els.push(m.target);
+                Array.from(m.addedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                Array.from(m.removedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                return els;
+              });
+            } else if (typeof selector === "string") {
+              const isThis = selector === "$this" || selector === "";
+              const matchesSel = (node) => {
+                if (!node || node.nodeType !== 1) return false;
+                if (isThis) return true;
+                return node.matches?.(selector);
+              };
+              matchedEls = mutations.flatMap((m) => {
+                const els = [];
+                if (matchesSel(m.target)) els.push(m.target);
+                Array.from(m.addedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                Array.from(m.removedNodes || []).filter(matchesSel).forEach((n) => els.push(n));
+                return els;
+              });
+            } else {
+              matchedEls = mutations.map((m) => m.target).filter((t) => t && t.nodeType === 1);
+            }
+            if (matchedEls.length === 0) continue;
+            if (options.filter) {
+              const helper = SwcUtils.getHelperAndHostSet(currentWin, this);
+              if (!options.filter(matchedEls, { currentThis: this, helper })) continue;
+            }
+            const hostSet = SwcUtils.getHostSet(this);
+            this[meta.propertyKey](matchedEls, mutations, obs, { ...hostSet, $root: root2 });
+          }
+          if (resizeDelegates.length > 0 && resizeObserver) {
+            const handle = (n, observe) => {
+              if (n.nodeType !== 1) return;
+              const el = n;
+              for (const m of resizeDelegates) {
+                if (typeof m.selector !== "string") continue;
+                const isThis = m.selector === "$this" || m.selector === "";
+                const matchesSel = (node) => {
+                  if (!node || node.nodeType !== 1) return false;
+                  if (isThis) return true;
+                  const e = node;
+                  return e.matches?.(m.selector) || !!e.closest?.(m.selector);
+                };
+                if (matchesSel(el)) {
+                  if (observe) resizeObserver.observe(el, m.options.box ? { box: m.options.box } : void 0);
+                  else resizeObserver.unobserve(el);
+                } else if (!isThis) {
+                  el.querySelectorAll(m.selector).forEach((sub) => {
+                    if (observe) resizeObserver.observe(sub, m.options.box ? { box: m.options.box } : void 0);
+                    else resizeObserver.unobserve(sub);
+                  });
+                }
+              }
+            };
+            for (const m of mutations) {
+              Array.from(m.addedNodes || []).forEach((n) => handle(n, true));
+              Array.from(m.removedNodes || []).forEach((n) => handle(n, false));
+            }
+          }
+        });
+        const hasDelegate = metas.some((m) => m.options.delegate) || resizeDelegates.some((m) => m.options.delegate);
+        if (hasDelegate) {
+          observer.observe(root2, { childList: true, subtree: true });
+        }
+        const nonDelegateMetas = metas.filter((m) => !m.options.delegate);
+        for (const m of nonDelegateMetas) {
+          const { selector, options } = m;
+          const mInit = initFrom(options);
+          if (typeof selector === "string") {
+            if (selector === "$this" || selector === "") {
+              observer.observe(root2, mInit);
+            } else {
+              root2.querySelectorAll(selector).forEach((el) => observer.observe(el, mInit));
+            }
+          } else if (typeof selector === "function") {
+            observer.observe(root2, mInit);
+          }
+        }
+        return observer;
+      };
+      const shadowResizeDelegateMetas = resizeObserverList.filter((m) => {
+        if (!m.options.delegate) return false;
+        const r = m.options.root || "auto";
+        return this.shadowRoot && (r === "shadow" || r === "all" || r === "auto");
+      });
+      const lightResizeDelegateMetas = resizeObserverList.filter((m) => {
+        if (!m.options.delegate) return false;
+        const r = m.options.root || "auto";
+        return r === "light" || r === "all" || !this.shadowRoot && r === "auto";
+      });
+      if (this.shadowRoot) shadowMutationObserver = setupMutationObserver(this.shadowRoot, shadowMetas, shadowResizeDelegateMetas);
+      lightMutationObserver = setupMutationObserver(this, lightMetas, lightResizeDelegateMetas);
+      for (const m of mutationObserverList) {
+        if (m.options.removeObserver) {
+          const rootForM = this.shadowRoot && (m.options.root === "shadow" || m.options.root === "all" || m.options.root === "auto" && this.shadowRoot) ? this.shadowRoot : this;
+          removeObserverCallbacks.push({ fn: m.options.removeObserver, target: rootForM, opts: m.options });
+        }
+      }
       if (originalConnected) await originalConnected.apply(this);
       const aMethods = findAllOnConnectedAfterMetadata(this);
       for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
@@ -506,15 +696,44 @@ const elementDefine = (name, config = {}) => (constructor) => {
     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) => {
+    if (boundListeners.length > 0) {
+      boundListeners.forEach((l) => {
         l.target.removeEventListener(l.type, l.handler, l.options);
         if (l.subscription && typeof l.subscription.unsubscribe === "function") {
           l.subscription.unsubscribe();
         }
+        if (Array.isArray(l.onRemoves)) {
+          for (const r of l.onRemoves) {
+            try {
+              r.fn(l.target, r.opts);
+            } catch (e) {
+              console.error("[SWC] removeListener error:", e);
+            }
+          }
+        }
       });
-      this._boundListeners = [];
+      boundListeners = [];
+    }
+    const _obs = [shadowMutationObserver, lightMutationObserver, resizeObserver, ...resizeObservers];
+    for (const o of _obs) {
+      try {
+        o?.disconnect?.();
+      } catch (e) {
+        console.error("[SWC] observer disconnect error:", e);
+      }
+    }
+    shadowMutationObserver = null;
+    lightMutationObserver = null;
+    resizeObserver = null;
+    resizeObservers = [];
+    for (const cb of removeObserverCallbacks) {
+      try {
+        cb.fn(cb.target, cb.opts);
+      } catch (e) {
+        console.error("[SWC] removeObserver error:", e);
+      }
     }
+    removeObserverCallbacks = [];
     new ElementApply(this, { id: this._swcId }).removeAllEventListener();
     if (originalDisconnected) originalDisconnected.apply(this);
     const aMethods = findAllLifecycleMetadata(this, ON_AFTER_DISCONNECTED_METADATA_KEY);