@dooboostore/simple-web-component 1.0.46 → 1.0.48

package/README.md

@@ -181,14 +181,14 @@ class CounterApp extends HTMLElement {
         <!-- Text directive: render as text -->
         <!--[text Count: @count@ ]-->
         
-        <!-- Attribute binding with a: prefix -->
-        <div a:title="'Count is'+@count@"></div>
+        <!-- Attribute binding with a:: prefix -->
+        <div a::title="'Count is'+@count@"></div>
         
-        <!-- Event binding with e: prefix -->
-        <button e:click="@increment@()">Increment (@count@)</button>
+        <!-- Event binding with e:: prefix -->
+        <button e::click="@increment@()">Increment (@count@)</button>
         
         <!-- Conditional rendering -->
-        <div a:style="@isActive@ ? 'color: green' : 'color: red'">
+        <div a::style="@isActive@ ? 'color: green' : 'color: red'">
         </div>
       </div>
     `;
@@ -206,8 +206,8 @@ class CounterApp extends HTMLElement {
 **Template Directives:**
 - `<!--[html @state@ ]-->` - Render state value as HTML
 - `<!--[text @state@ ]-->` - Render state value as text
-- `a:attributeName="@state@"` - Bind state to HTML attributes
-- `e:eventName="@methodName@()"` - Bind events to methods
+- `a::attributeName="@state@"` - Bind state to HTML attributes
+- `e::eventName="@methodName@()"` - Bind events to methods
 
 **How @state Works:**
 1. Declare property with `@state('stateName')`
@@ -236,7 +236,7 @@ increment() {
 <!--[text @count = 5@ ]-->  // This won't work - read-only in templates
 
 // ✅ CORRECT - Call method from template
-<button e:click="@increment@()">Increment</button>
+<button e::click="@increment@()">Increment</button>
 ```
 
 **Advanced Example:**
@@ -260,14 +260,14 @@ class UserProfile extends HTMLElement {
       <div>
         <!-- Display user info -->
         <h2><!--[text @user.name@ ]--></h2>
-        <p a:title="Email: @user.email@">Age: @user.age@</p>
+        <p a::title="Email: @user.email@">Age: @user.age@</p>
         
         <!-- Conditional rendering based on state -->
-        <div a:style="@isEditing@ ? 'border: 1px solid blue' : 'border: none'">
+        <div a::style="@isEditing@ ? 'border: 1px solid blue' : 'border: none'">
           <!--[html @isEditing@ ? '<input type="text" />' : '<span>View Mode</span>' ]-->
         </div>
         
-        <button e:click="toggleEdit"> toggleEdit </button>
+        <button e::click="toggleEdit"> toggleEdit </button>
       </div>
     `;
   }
@@ -613,6 +613,104 @@ class FormHandler extends HTMLElement {
 - `@setProperty('#selector', 'propertyName', options)` - Set property on selector with options
 - `@setProperty` - Bare decorator (uses method name as property on $this)
 
+### 6.6 **DOM Observers (@mutationObserver, @resizeObserver)**
+
+Observe DOM mutations and element size changes declaratively. Both decorators share the same pattern as `@event` — they support optional selector (defaults to `$this`), root-based helpers, and `delegate` mode.
+
+#### @mutationObserver
+Detect DOM changes (child add/remove, attribute changes, text changes) and react automatically.
+
+```typescript
+@elementDefine('list-observer')
+class ListObserver extends HTMLElement {
+  // Observe all changes under this component (light DOM)
+  @mutationObserverLight({ childList: true, attributes: true, subtree: true })
+  onDomChanged(matchedEls: HTMLElement[], mutations: MutationRecord[], observer: MutationObserver) {
+    console.log('DOM changed:', matchedEls.length, mutations);
+  }
+
+  // Observe a specific selector (delegate mode - catches dynamically added nodes too)
+  @mutationObserverDelegateShadow('.item', { childList: true })
+  onItemChanged(matchedEls: HTMLElement[], mutations: MutationRecord[], observer: MutationObserver) {
+    console.log('Item changed:', matchedEls);
+  }
+}
+```
+
+**Callback signature:**
+- `matchedEls: HTMLElement[]` - Elements matching the selector (1st arg)
+- `mutations: MutationRecord[]` - Original mutation records (2nd arg)
+- `observer: MutationObserver` - The observer instance (3rd arg)
+
+**How delegate works:**
+- **delegate=true** - Observes the root with `subtree: true`; dynamically added/removed elements matching the selector are detected in the callback
+- **delegate=false** (default) - Observes only the elements matching the selector at connect time
+
+**@mutationObserver Options:**
+- Standard `MutationObserverInit` options: `childList`, `attributes`, `characterData`, `subtree`, `attributeFilter`, `attributeOldValue`, `characterDataOldValue`
+- `delegate` - Observe root and filter by selector in callback
+- `root` - `'light' | 'shadow' | 'all' | 'auto'`
+- `filter` - Additional callback filter
+- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
+
+**@mutationObserver Decorator Variants:**
+- `mutationObserver(selector?, options?)` - Full form (selector defaults to `$this`)
+- `mutationObserverLight(selector?, options?)` - Observe light DOM
+- `mutationObserverShadow(selector?, options?)` - Observe shadow DOM
+- `mutationObserverAll(selector?, options?)` - Observe both light & shadow
+- `mutationObserverDelegate(selector?, options?)` - Delegate mode (root observe)
+- `mutationObserverDelegateLight(selector?, options?)` - Delegate in light DOM
+- `mutationObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
+- `mutationObserverDelegateAll(selector?, options?)` - Delegate in all DOM
+
+#### @resizeObserver
+Detect element size changes and react automatically.
+
+```typescript
+@elementDefine('chart-widget')
+class ChartWidget extends HTMLElement {
+  // Re-render when component size changes (selector defaults to $this)
+  @resizeObserverLight()
+  onResize(matchedEls: HTMLElement[], entries: ResizeObserverEntry[], observer: ResizeObserver) {
+    this.redraw(entries[0]?.contentRect);
+  }
+
+  // Watch specific elements (delegate mode tracks dynamically added ones)
+  @resizeObserverDelegateShadow('.card')
+  onCardResize(matchedEls: HTMLElement[], entries: ResizeObserverEntry[], observer: ResizeObserver) {
+    console.log('Card resized:', matchedEls[0]?.clientWidth);
+  }
+}
+```
+
+**Callback signature:**
+- `matchedEls: HTMLElement[]` - Elements that were resized (1st arg)
+- `entries: ResizeObserverEntry[]` - Original observer entries (2nd arg)
+- `observer: ResizeObserver` - The observer instance (3rd arg)
+
+**@resizeObserver Options:**
+- `box` - `'content-box' | 'border-box' | 'device-pixel-content-box'`
+- `delegate` - Track dynamically added/removed matching elements
+- `root` - `'light' | 'shadow' | 'all' | 'auto'`
+- `filter` - Additional callback filter
+- `removeObserver` - Cleanup callback called on disconnect `(target, options)`
+
+**@resizeObserver Decorator Variants:**
+- `resizeObserver(selector?, options?)` - Full form (selector defaults to `$this`)
+- `resizeObserverLight(selector?, options?)` - Observe light DOM
+- `resizeObserverShadow(selector?, options?)` - Observe shadow DOM
+- `resizeObserverAll(selector?, options?)` - Observe both light & shadow
+- `resizeObserverDelegate(selector?, options?)` - Delegate mode (root observe)
+- `resizeObserverDelegateLight(selector?, options?)` - Delegate in light DOM
+- `resizeObserverDelegateShadow(selector?, options?)` - Delegate in shadow DOM
+- `resizeObserverDelegateAll(selector?, options?)` - Delegate in all DOM
+
+**Combining with @resizeObserver delegate (dynamic tracking):**
+When `delegate: true`, an internal `MutationObserver` automatically observes the root so that elements matching the selector are tracked even after being dynamically added/removed from the DOM.
+
+**Cleanup:**
+Both observers are automatically disconnected when the component is removed from the DOM. `removeObserver` callbacks (if provided) are invoked during cleanup.
+
 ### 7. **DOM Manipulation with applyNode**
 
 Surgically add, replace, or remove nodes in the DOM with fine-grained control.

package/dist/cjs/bundle-entry.js

@@ -1,7 +1,13 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -11,9 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var bundle_entry_exports = {};
+__export(bundle_entry_exports, {
+  Core: () => Core,
+  CoreWeb: () => CoreWeb,
+  SimpleBoot: () => SimpleBoot
+});
 module.exports = __toCommonJS(bundle_entry_exports);
 var import_reflect_metadata = require("reflect-metadata");
 __reExport(bundle_entry_exports, require("./index"), module.exports);
+var Core = __toESM(require("@dooboostore/core"), 1);
+var CoreWeb = __toESM(require("@dooboostore/core-web"), 1);
+var SimpleBoot = __toESM(require("@dooboostore/simple-boot"), 1);
 //# sourceMappingURL=bundle-entry.js.map

package/dist/cjs/bundle-entry.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/bundle-entry.ts"],
-  "sourcesContent": ["import 'reflect-metadata';\nexport * from './index';\n"],
-  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;AAAA,8BAAO;AACP,iCAAc,oBADd;",
+  "sourcesContent": ["import 'reflect-metadata';\n\n// simple-web-component itself\nexport * from './index';\n\n// Re-export peer dependencies so bundle consumers can access them\n// without separately importing each package\nexport * as Core from '@dooboostore/core';\nexport * as CoreWeb from '@dooboostore/core-web';\nexport * as SimpleBoot from '@dooboostore/simple-boot';\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAO;AAGP,iCAAc,oBAHd;AAOA,WAAsB;AACtB,cAAyB;AACzB,iBAA4B;",
   "names": []
 }

package/dist/cjs/decorators/addEventListener.js

@@ -19,33 +19,55 @@ var addEventListener_exports = {};
 __export(addEventListener_exports, {
   ADD_EVENT_LISTENER_METADATA_KEY: () => ADD_EVENT_LISTENER_METADATA_KEY,
   addEventListener: () => addEventListener,
+  addEventListenerAllDom: () => addEventListenerAllDom,
   addEventListenerAppHost: () => addEventListenerAppHost,
   addEventListenerDelegate: () => addEventListenerDelegate,
   addEventListenerDelegateAllDom: () => addEventListenerDelegateAllDom,
   addEventListenerDelegateLightDom: () => addEventListenerDelegateLightDom,
   addEventListenerDelegateShadowDom: () => addEventListenerDelegateShadowDom,
   addEventListenerDocument: () => addEventListenerDocument,
+  addEventListenerLightDom: () => addEventListenerLightDom,
+  addEventListenerShadowDom: () => addEventListenerShadowDom,
   addEventListenerThis: () => addEventListenerThis,
   addEventListenerWindow: () => addEventListenerWindow,
   event: () => event,
+  eventAllDom: () => eventAllDom,
+  eventAppHost: () => eventAppHost,
   eventDelegate: () => eventDelegate,
   eventDelegateAllDom: () => eventDelegateAllDom,
   eventDelegateLightDom: () => eventDelegateLightDom,
   eventDelegateShadowDom: () => eventDelegateShadowDom,
+  eventDocument: () => eventDocument,
+  eventLightDom: () => eventLightDom,
+  eventShadowDom: () => eventShadowDom,
+  eventThis: () => eventThis,
+  eventWindow: () => eventWindow,
   getAddEventListenerMetadata: () => getAddEventListenerMetadata
 });
 module.exports = __toCommonJS(addEventListener_exports);
 var import_core = require("@dooboostore/core");
 const ADD_EVENT_LISTENER_METADATA_KEY = Symbol.for("simple-web-component:add-event-listener");
-function addEventListener(selectorOrTarget, type, options = {}) {
+function addEventListener(selectorOrType, typeOrOptions, maybeOptions) {
   return (targetObj, propertyKey, descriptor) => {
+    let selector;
+    let type;
+    let opts = {};
+    if (typeof typeOrOptions === "string") {
+      selector = selectorOrType;
+      type = typeOrOptions;
+      opts = maybeOptions ?? {};
+    } else {
+      selector = "$this";
+      type = selectorOrType;
+      opts = typeOrOptions ?? {};
+    }
     const constructor = targetObj.constructor;
     let listeners = import_core.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);
     if (!listeners) {
       listeners = [];
       import_core.ReflectUtils.defineMetadata(ADD_EVENT_LISTENER_METADATA_KEY, listeners, constructor);
     }
-    listeners.push({ propertyKey, selector: selectorOrTarget, type, options });
+    listeners.push({ propertyKey, selector, type, options: opts });
   };
 }
 function addEventListenerDelegateLightDom(selector, type, options) {
@@ -60,11 +82,15 @@ function addEventListenerDelegateAllDom(selector, type, options) {
 function addEventListenerDelegate(selector, type, options) {
   return addEventListener(selector, type, { ...options ?? {}, root: "auto", delegate: true });
 }
-const event = addEventListener;
-const eventDelegateLightDom = addEventListenerDelegateLightDom;
-const eventDelegateShadowDom = addEventListenerDelegateShadowDom;
-const eventDelegateAllDom = addEventListenerDelegateAllDom;
-const eventDelegate = addEventListenerDelegate;
+function addEventListenerLightDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "light" });
+}
+function addEventListenerShadowDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "shadow" });
+}
+function addEventListenerAllDom(selector, type, options) {
+  return addEventListener(selector, type, { ...options ?? {}, root: "all" });
+}
 function addEventListenerThis(type, options) {
   return addEventListener("$this", type, options);
 }
@@ -77,6 +103,18 @@ function addEventListenerWindow(type, options) {
 function addEventListenerDocument(type, options) {
   return addEventListener("$document", type, options);
 }
+const event = addEventListener;
+const eventDelegateLightDom = addEventListenerDelegateLightDom;
+const eventDelegateShadowDom = addEventListenerDelegateShadowDom;
+const eventDelegateAllDom = addEventListenerDelegateAllDom;
+const eventDelegate = addEventListenerDelegate;
+const eventLightDom = addEventListenerLightDom;
+const eventShadowDom = addEventListenerShadowDom;
+const eventAllDom = addEventListenerAllDom;
+const eventAppHost = addEventListenerAppHost;
+const eventWindow = addEventListenerWindow;
+const eventDocument = addEventListenerDocument;
+const eventThis = addEventListenerThis;
 const getAddEventListenerMetadata = (target) => {
   const constructor = target instanceof Function ? target : target.constructor;
   return import_core.ReflectUtils.getMetadata(ADD_EVENT_LISTENER_METADATA_KEY, constructor);

package/dist/cjs/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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA6B;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,yBAAa,YAAgD,iCAAiC,WAAW;AACzH,QAAI,CAAC,WAAW;AACd,kBAAY,CAAC;AACb,+BAAa,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,yBAAa,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": "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",
   "names": []
 }

package/dist/cjs/decorators/elementDefine.js

@@ -26,6 +26,8 @@ module.exports = __toCommonJS(elementDefine_exports);
 var import_core = require("@dooboostore/core");
 var import_operators = require("@dooboostore/core/message/operators");
 var import_addEventListener = require("./addEventListener");
+var import_mutationObserver = require("./mutationObserver");
+var import_resizeObserver = require("./resizeObserver");
 var import_lifecycles = require("./lifecycles");
 var import_emitCustomEvent = require("./emitCustomEvent");
 var import_changedAttribute = require("./changedAttribute");
@@ -49,7 +51,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 = (0, import_applyAttribute.findAllAttributeMetadata)(target).filter((it) => it.type === "property");
@@ -251,6 +252,8 @@ const elementDefine = (name, config = {}) => (constructor) => {
   const emitCustomEventList = (0, import_emitCustomEvent.getEmitCustomEventMetadataList)(constructor) || [];
   const emitHostCustomEventList = emitCustomEventList.filter((meta) => meta.selector === "$this" || meta.selector === "");
   const addEventListenerList = (0, import_addEventListener.getAddEventListenerMetadata)(constructor) || [];
+  const mutationObserverList = (0, import_mutationObserver.getMutationObserverMetadata)(constructor) || [];
+  const resizeObserverList = (0, import_resizeObserver.getResizeObserverMetadata)(constructor) || [];
   const attrChangeMap = (0, import_changedAttribute.findAllAttributeChangedMetadata)(constructor);
   const attributeList = (0, import_applyAttribute.findAllAttributeMetadata)(constructor);
   const applyAttributeMap = (0, import_applyAttribute.findAllAttributeApplyMetadata)(constructor);
@@ -263,9 +266,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 = import_Utils.SwcUtils.getHelperAndHostSet(win, this);
     const appHost = helperHostSet.$appHost;
     const useSsr = (0, import_SwcAppMixin.isSSR)(this);
@@ -394,7 +406,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) => {
@@ -494,9 +512,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 = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, this);
+              if (!m.options.filter(matchedEls, { currentThis: this, helper })) continue;
+            }
+            const hostSet = import_Utils.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 = import_Utils.SwcUtils.getHelperAndHostSet(currentWin, this);
+              if (!options.filter(matchedEls, { currentThis: this, helper })) continue;
+            }
+            const hostSet = import_Utils.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 = (0, import_lifecycles.findAllOnConnectedAfterMetadata)(this);
       for (const m of aMethods) await this._invokeLifecycleMethod(m.propertyKey, helperHostSet);
@@ -531,15 +721,44 @@ const elementDefine = (name, config = {}) => (constructor) => {
     this._executeSwcScript("swc-on-before-disconnected", helperHostSet);
     const bMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.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 import_core_web.ElementApply(this, { id: this._swcId }).removeAllEventListener();
     if (originalDisconnected) originalDisconnected.apply(this);
     const aMethods = (0, import_lifecycles.findAllLifecycleMetadata)(this, import_lifecycles.ON_AFTER_DISCONNECTED_METADATA_KEY);