@dooboostore/simple-web-component 1.0.43 → 1.0.45

package/src/decorators/elementDefine.ts

@@ -1,8 +1,10 @@
 import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
+import {Observable, Subject} from '@dooboostore/core';
+import {debounceTime, throttleTime, distinctUntilChanged} from '@dooboostore/core/message/operators';
 import {getAddEventListenerMetadata} from './addEventListener';
 import {findAllLifecycleMetadata, findAllOnConnectedAfterMetadata, findAllOnConnectedBeforeMetadata, findAllOnConnectedMetadata, ON_AFTER_ADOPTED_METADATA_KEY, ON_AFTER_DISCONNECTED_METADATA_KEY, ON_BEFORE_ADOPTED_METADATA_KEY, ON_BEFORE_DISCONNECTED_METADATA_KEY, ON_CONNECTED_COMPLETED_METADATA_KEY, ON_INITIALIZE_METADATA_KEY} from './lifecycles';
 import {getEmitCustomEventMetadataList} from './emitCustomEvent';
-import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttributeThis';
+import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttribute';
 import {findAllAttributeApplyMetadata, findAllAttributeMetadata, getAttributeValue} from './applyAttribute';
 import {getQueryMetadata} from './query';
 import {getQueryAllMetadata} from './queryAll';
@@ -465,7 +467,9 @@ export const elementDefine =
           const nonDelegateListeners: typeof addEventListenerList = [];
 
           addEventListenerList.forEach(meta => {
-            if (meta.options.delegate && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
+            // Function-based selectors cannot be used with delegate listeners
+            const isStringSelector = typeof meta.selector === 'string';
+            if (meta.options.delegate && isStringSelector && meta.selector !== '$window' && meta.selector !== '$document' && meta.selector !== '$host' && meta.selector !== '$appHost' && meta.selector !== '$firstHost' && meta.selector !== '$lastHost' && meta.selector !== '$firstAppHost' && meta.selector !== '$lastAppHost' && meta.selector !== '$hosts' && meta.selector !== '$appHosts' && meta.selector !== '$this' && meta.selector !== '') {
               delegateListeners.push(meta);
             } else {
               nonDelegateListeners.push(meta);
@@ -535,6 +539,25 @@ export const elementDefine =
             const opts = {capture: options.capture, once: options.once, passive: options.passive};
             const bindTargets: EventTarget[] = [];
             const r = options.root || 'auto';
+            
+            // Resolve selector if it's a function
+            let resolvedSelector: string | null = null;
+            if (typeof selector === 'function') {
+              const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this);
+              const result = selector(this, hostSet);
+              if (typeof result === 'string') {
+                resolvedSelector = result;
+              } else if (result instanceof currentWin.Element) {
+                bindTargets.push(result as EventTarget);
+              } else if (result instanceof currentWin.NodeList) {
+                bindTargets.push(...Array.from(result as EventTarget[]));
+              } else if (Array.isArray(result)) {
+                bindTargets.push(...(result as EventTarget[]));
+              }
+            } else {
+              resolvedSelector = selector;
+            }
+            
             const applyRootOption = (target: any) => {
               if (!target) return;
               if (r === 'auto') {
@@ -545,31 +568,33 @@ export const elementDefine =
               }
             };
 
-            if (selector === '$window') bindTargets.push(currentWin);
-            else if (selector === '$document') bindTargets.push(currentWin.document);
-            else if (selector === '$host') applyRootOption(helperHostSet.$host);
-            else if (selector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
-            else if (selector === '$appHost') applyRootOption(helperHostSet.$appHost);
-            else if (selector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
-            else if (selector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
-            else if (selector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
-            else if (selector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
-            else if (selector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
-            else if (selector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
-            else if (selector === '$this' || !selector) applyRootOption(this);
-            else {
-              const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-              if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-              else if (r === 'light') searchRoots.push(this as any);
-              else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-              else if (r === 'all') {
-                searchRoots.push(this as any);
-                if (this.shadowRoot) searchRoots.push(this.shadowRoot);
-              }
+            if (resolvedSelector) {
+              if (resolvedSelector === '$window') bindTargets.push(currentWin);
+              else if (resolvedSelector === '$document') bindTargets.push(currentWin.document);
+              else if (resolvedSelector === '$host') applyRootOption(helperHostSet.$host);
+              else if (resolvedSelector === '$parentHost') applyRootOption(helperHostSet.$parentHost);
+              else if (resolvedSelector === '$appHost') applyRootOption(helperHostSet.$appHost);
+              else if (resolvedSelector === '$firstHost') applyRootOption(helperHostSet.$firstHost);
+              else if (resolvedSelector === '$lastHost') applyRootOption(helperHostSet.$lastHost);
+              else if (resolvedSelector === '$firstAppHost') applyRootOption(helperHostSet.$firstAppHost);
+              else if (resolvedSelector === '$lastAppHost') applyRootOption(helperHostSet.$lastAppHost);
+              else if (resolvedSelector === '$hosts') helperHostSet.$hosts.forEach(applyRootOption);
+              else if (resolvedSelector === '$appHosts') helperHostSet.$appHosts.forEach(applyRootOption);
+              else if (resolvedSelector === '$this' || !resolvedSelector) applyRootOption(this);
+              else {
+                const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+                if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+                else if (r === 'light') searchRoots.push(this as any);
+                else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+                else if (r === 'all') {
+                  searchRoots.push(this as any);
+                  if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+                }
 
-              searchRoots.forEach(sr => {
-                sr.querySelectorAll(selector).forEach(el => bindTargets.push(el));
-              });
+                searchRoots.forEach(sr => {
+                  sr.querySelectorAll(resolvedSelector).forEach(el => bindTargets.push(el));
+                });
+              }
             }
 
             bindTargets.forEach(t => {
@@ -586,10 +611,45 @@ export const elementDefine =
                 if (options.preventDefault) event.preventDefault();
                 const currentHostSet = SwcUtils.getHostSet(this as any);
                 const args = {event, ...currentHostSet, $el: t, $root: t};
-                await (this as any)[meta.propertyKey](event, {currentHostSet, $$matchedElement: event.currentTarget}, args);
+                await (this as any)[meta.propertyKey](event, {currentHostSet, $matchedElement: event.currentTarget}, args);
               };
-              t.addEventListener(type, handler, opts);
-              (this as any)._boundListeners.push({target: t, type, handler, options: opts});
+              
+              // Create event stream with Observable-based operators
+              const eventSubject = new Subject<Event>();
+              let eventStream = eventSubject as any;
+              
+              // Apply operators from @dooboostore/core/operators
+              if (options.debounceTime !== undefined && options.debounceTime > 0) {
+                eventStream = eventStream.pipe(debounceTime(options.debounceTime));
+              }
+              
+              if (options.throttleTime !== undefined && options.throttleTime > 0) {
+                eventStream = eventStream.pipe(throttleTime(options.throttleTime));
+              }
+              
+              if (options.distinctUntilChanged !== undefined && options.distinctUntilChanged !== false) {
+                if (typeof options.distinctUntilChanged === 'function') {
+                  eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
+                } else {
+                  eventStream = eventStream.pipe(distinctUntilChanged());
+                }
+              }
+              
+              // Subscribe to the event stream
+              const subscription = eventStream.subscribe({
+                next: (event: Event) => {
+                  handler(event).catch((err: any) => console.error('Event handler error:', err));
+                },
+                error: (err: any) => console.error('Event stream error:', err)
+              });
+              
+              // Create wrapper handler that emits to the subject
+              const wrappedHandler = (event: Event) => {
+                eventSubject.next(event);
+              };
+              
+              t.addEventListener(type, wrappedHandler, opts);
+              (this as any)._boundListeners.push({target: t, type, handler: wrappedHandler, options: opts, subscription});
             });
           });
 
@@ -640,7 +700,13 @@ export const elementDefine =
         for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
 
         if ((this as any)._boundListeners) {
-          (this as any)._boundListeners.forEach((l: any) => l.target.removeEventListener(l.type, l.handler, l.options));
+          (this as any)._boundListeners.forEach((l: any) => {
+            l.target.removeEventListener(l.type, l.handler, l.options);
+            // Cleanup Observable subscription if present
+            if (l.subscription && typeof l.subscription.unsubscribe === 'function') {
+              l.subscription.unsubscribe();
+            }
+          });
           (this as any)._boundListeners = [];
         }
 

package/src/decorators/emitCustomEvent.ts

@@ -3,6 +3,8 @@ import { SpecialSelector, SwcQueryOptions, HelperHostSet } from '../types';
 import {ensureInit, getElementConfig} from './elementDefine';
 import {SwcUtils} from '../utils/Utils';
 
+export type EmitCustomEventSelector = string | ((currentThis: any, helper: HelperHostSet) => NodeList | Element | Element[] | null);
+
 export interface EmitCustomEventBaseOptions {
   bubbles?: boolean;
   composed?: boolean;
@@ -30,23 +32,51 @@ type Options = (EmitCustomEventBaseOptions & SwcQueryOptions) | (EmitCustomEvent
 
 export interface EmitCustomEventMetadata {
   propertyKey: string | symbol;
-  selector: string;
+  selector: EmitCustomEventSelector;
   type: string;
   options: Options;
 }
 
 export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
 
-export function emitCustomEvent(target: SpecialSelector, type: string, options?: Options): MethodDecorator;
-export function emitCustomEvent(selector: string, type: string, options?: Options): MethodDecorator;
+export function emitCustomEvent(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
+export function emitCustomEvent(selector: EmitCustomEventSelector, type: string, options?: Options): MethodDecorator;
+export function emitCustomEvent(type: string, options?: Options): MethodDecorator;
 /**
  * @emitCustomEvent decorator to dispatch custom events to a target.
+ * 
+ * Usage:
+ * - @emitCustomEvent('$this', 'event-name', options) - Emit from $this
+ * - @emitCustomEvent('$appHost', 'event-name', options) - Emit from $appHost
+ * - @emitCustomEvent((this, helper) => '.button', 'event-name', options) - Function-based selector
+ * - @emitCustomEvent('event-name', options) - Emit from $this (defaults to $this)
+ * - @emitCustomEvent('event-name') - Emit from $this with no options
  */
-export function emitCustomEvent(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
+export function emitCustomEvent(selectorOrTarget: any, typeOrPropertyKey?: any, optionsOrDescriptor?: any): any {
+  // Case 1: Bare decorator on property
+  if (typeof selectorOrTarget === 'object' && typeof typeOrPropertyKey === 'string' && typeof optionsOrDescriptor === 'object' && 'value' in optionsOrDescriptor) {
+    throw new Error(`@emitCustomEvent decorator cannot be used on properties. (Property: ${String(typeOrPropertyKey)})`);
+  }
+
+  // Case 2: With selector and type - @emitCustomEvent('selector', 'event-name', options)
+  if ((typeof selectorOrTarget === 'string' || typeof selectorOrTarget === 'function') && typeof typeOrPropertyKey === 'string') {
+    return createEmitDecorator(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor as Options);
+  }
+
+  // Case 3: Without selector (type only) - @emitCustomEvent('event-name', options)
+  if (typeof selectorOrTarget === 'string' && typeOrPropertyKey !== 'string') {
+    return createEmitDecorator('$this', selectorOrTarget, typeOrPropertyKey as Options);
+  }
+
+  // Fallback
+  throw new Error('Invalid @emitCustomEvent usage');
+}
+
+function createEmitDecorator(selector: EmitCustomEventSelector, type: string, options?: Options) {
   return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
     const constructor = targetObj.constructor;
 
-    const fullOptions: any = {...options, type};
+    const fullOptions: any = {...(options || {}), type};
 
     if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
     if (fullOptions.composed === undefined) fullOptions.composed = true;
@@ -56,7 +86,7 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
       list = [];
       ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
     }
-    list.push({propertyKey, selector: selectorOrTarget, type, options: fullOptions});
+    list.push({propertyKey, selector, type, options: fullOptions});
 
     const original = descriptor.value;
     descriptor.value = function (...args: any[]) {
@@ -71,47 +101,68 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
           cancelable: fullOptions.cancelable
         });
 
-        const hostSet = SwcUtils.getHostSet(this as any);
         const conf = getElementConfig(this);
         const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
+        const hostSet = SwcUtils.getHelperAndHostSet(currentWin, this as any);
 
         const eventTargets: EventTarget[] = [];
-        if (selectorOrTarget === '$window') eventTargets.push(currentWin);
-        else if (selectorOrTarget === '$document') eventTargets.push(currentWin.document);
-        else if (selectorOrTarget === '$host') {
-          if (hostSet.$host) eventTargets.push(hostSet.$host);
-        } else if (selectorOrTarget === '$parentHost') {
-          if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
-        } else if (selectorOrTarget === '$appHost') {
-          if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
-        } else if (selectorOrTarget === '$firstHost') {
-          if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
-        } else if (selectorOrTarget === '$lastHost') {
-          if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
-        } else if (selectorOrTarget === '$firstAppHost') {
-          if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
-        } else if (selectorOrTarget === '$lastAppHost') {
-          if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
-        } else if (selectorOrTarget === '$hosts') {
-          hostSet.$hosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === '$appHosts') {
-          hostSet.$appHosts.forEach(h => eventTargets.push(h));
-        } else if (selectorOrTarget === '$this' || !selectorOrTarget) {
-          eventTargets.push(this as any);
+        
+        // Resolve selector if it's a function
+        let resolvedSelector: string | Element | NodeList | Element[] | null = selector as any;
+        if (typeof selector === 'function') {
+          resolvedSelector = selector(this, hostSet);
+        }
+
+        // If selector function returned elements directly, use them
+        if (resolvedSelector instanceof currentWin.Element) {
+          eventTargets.push(resolvedSelector as EventTarget);
+        } else if (resolvedSelector instanceof currentWin.NodeList) {
+          eventTargets.push(...Array.from(resolvedSelector as EventTarget[]));
+        } else if (Array.isArray(resolvedSelector)) {
+          eventTargets.push(...(resolvedSelector as EventTarget[]));
+        } else if (resolvedSelector === null) {
+          // No targets
         } else {
-          const r = fullOptions.root || 'auto';
-          const searchRoots: (HTMLElement | ShadowRoot)[] = [];
-          if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
-          else if (r === 'light') searchRoots.push(this as any);
-          else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
-          else if (r === 'all') {
-            searchRoots.push(this as any);
-            if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+          // Handle string selector
+          const stringSelector = resolvedSelector as string;
+          
+          if (stringSelector === '$window') eventTargets.push(currentWin);
+          else if (stringSelector === '$document') eventTargets.push(currentWin.document);
+          else if (stringSelector === '$host') {
+            if (hostSet.$host) eventTargets.push(hostSet.$host);
+          } else if (stringSelector === '$parentHost') {
+            if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
+          } else if (stringSelector === '$appHost') {
+            if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
+          } else if (stringSelector === '$firstHost') {
+            if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
+          } else if (stringSelector === '$lastHost') {
+            if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
+          } else if (stringSelector === '$firstAppHost') {
+            if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
+          } else if (stringSelector === '$lastAppHost') {
+            if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
+          } else if (stringSelector === '$hosts') {
+            hostSet.$hosts.forEach(h => eventTargets.push(h));
+          } else if (stringSelector === '$appHosts') {
+            hostSet.$appHosts.forEach(h => eventTargets.push(h));
+          } else if (stringSelector === '$this' || !stringSelector) {
+            eventTargets.push(this as any);
+          } else {
+            const r = fullOptions.root || 'auto';
+            const searchRoots: (HTMLElement | ShadowRoot)[] = [];
+            if (r === 'auto') searchRoots.push(this.shadowRoot || (this as any));
+            else if (r === 'light') searchRoots.push(this as any);
+            else if (r === 'shadow' && this.shadowRoot) searchRoots.push(this.shadowRoot);
+            else if (r === 'all') {
+              searchRoots.push(this as any);
+              if (this.shadowRoot) searchRoots.push(this.shadowRoot);
+            }
+
+            searchRoots.forEach(sr => {
+              sr.querySelectorAll(stringSelector).forEach(el => eventTargets.push(el));
+            });
           }
-
-          searchRoots.forEach(sr => {
-            sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
-          });
         }
 
         eventTargets.forEach(t => {
@@ -140,22 +191,3 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
 
 // --- Aliases: emit... ---
 export const emit = emitCustomEvent;
-
-/**
- * @emitCustomEventThis decorator - simplified version of @emitCustomEvent for $this selector
- */
-export function emitCustomEventThis(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
-export function emitCustomEventThis(type: string, attributeName: string): MethodDecorator ;
-export function emitCustomEventThis(type: string): MethodDecorator;
-export function emitCustomEventThis(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
-  if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'string') {
-    return emitCustomEventThis(type, {attributeName: optionsOrAttributeaName});
-  } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'object') {
-    if (!optionsOrAttributeaName.attributeName) {
-      optionsOrAttributeaName.attributeName = `on-emit-${type}`;
-    }
-    return emitCustomEvent('$this', type, optionsOrAttributeaName);
-  } else {
-    return emitCustomEvent('$this', type, {attributeName: `on-emit-${type}`});
-  }
-}

package/src/decorators/index.ts

@@ -1,7 +1,7 @@
 export * from './addEventListener';
 export * from './applyAttribute';
 export * from './elementDefine';
-export * from './changedAttributeThis';
+export * from './changedAttribute';
 export * from './emitCustomEvent';
 export * from './applyNode';
 export * from './lifecycles';

package/src/decorators/publishSwcAppMessage.ts

@@ -134,7 +134,7 @@ export function publishSwcAppMessage(targetOrMessageTypeOrOptions?: any, propert
 }
 
 // --- Aliases: publish... ---
-export const publish = publishSwcAppMessage;
+export const publishMessage = publishSwcAppMessage;
 
 // Helper function to retrieve publish message metadata
 export const getPublishSwcAppMessageMetadata = (target: any): PublishSwcAppMessageMetadata[] | undefined => {