@dooboostore/simple-web-component 1.0.43 → 1.0.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (144) hide show
  1. package/README.md +298 -49
  2. package/dist/cjs/SwcAppEngine.js +3 -1
  3. package/dist/cjs/SwcAppEngine.js.map +2 -2
  4. package/dist/cjs/decorators/addEventListener.js.map +2 -2
  5. package/dist/cjs/decorators/applyAttribute.js +30 -28
  6. package/dist/cjs/decorators/applyAttribute.js.map +2 -2
  7. package/dist/cjs/decorators/applyClass.js +57 -21
  8. package/dist/cjs/decorators/applyClass.js.map +3 -3
  9. package/dist/cjs/decorators/applyNode.js +165 -105
  10. package/dist/cjs/decorators/applyNode.js.map +2 -2
  11. package/dist/cjs/decorators/applyProperty.js +11 -28
  12. package/dist/cjs/decorators/applyProperty.js.map +2 -2
  13. package/dist/cjs/decorators/applyStyle.js +39 -15
  14. package/dist/cjs/decorators/applyStyle.js.map +3 -3
  15. package/dist/cjs/decorators/{changedAttributeThis.js → changedAttribute.js} +6 -6
  16. package/dist/cjs/decorators/changedAttribute.js.map +7 -0
  17. package/dist/cjs/decorators/elementDefine.js +37 -6
  18. package/dist/cjs/decorators/elementDefine.js.map +3 -3
  19. package/dist/cjs/decorators/emitCustomEvent.js +56 -42
  20. package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
  21. package/dist/cjs/decorators/index.js +1 -1
  22. package/dist/cjs/decorators/index.js.map +2 -2
  23. package/dist/cjs/decorators/publishSwcAppMessage.js +5 -5
  24. package/dist/cjs/decorators/publishSwcAppMessage.js.map +3 -3
  25. package/dist/cjs/decorators/query.js +96 -145
  26. package/dist/cjs/decorators/query.js.map +3 -3
  27. package/dist/cjs/decorators/queryAll.js +104 -131
  28. package/dist/cjs/decorators/queryAll.js.map +3 -3
  29. package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
  30. package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
  31. package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
  32. package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
  33. package/dist/cjs/elements/SwcAppMixin.js +17 -2
  34. package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
  35. package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
  36. package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
  37. package/dist/cjs/index.js +1 -0
  38. package/dist/cjs/index.js.map +2 -2
  39. package/dist/cjs/router/ElementRouter.js +4 -0
  40. package/dist/cjs/router/ElementRouter.js.map +2 -2
  41. package/dist/esm/SwcAppEngine.js +3 -1
  42. package/dist/esm/SwcAppEngine.js.map +2 -2
  43. package/dist/esm/decorators/addEventListener.js.map +2 -2
  44. package/dist/esm/decorators/applyAttribute.js +30 -28
  45. package/dist/esm/decorators/applyAttribute.js.map +2 -2
  46. package/dist/esm/decorators/applyClass.js +57 -21
  47. package/dist/esm/decorators/applyClass.js.map +3 -3
  48. package/dist/esm/decorators/applyNode.js +165 -105
  49. package/dist/esm/decorators/applyNode.js.map +2 -2
  50. package/dist/esm/decorators/applyProperty.js +11 -28
  51. package/dist/esm/decorators/applyProperty.js.map +2 -2
  52. package/dist/esm/decorators/applyStyle.js +39 -15
  53. package/dist/esm/decorators/applyStyle.js.map +3 -3
  54. package/dist/esm/decorators/{changedAttributeThis.js → changedAttribute.js} +3 -3
  55. package/dist/esm/decorators/changedAttribute.js.map +7 -0
  56. package/dist/esm/decorators/elementDefine.js +35 -4
  57. package/dist/esm/decorators/elementDefine.js.map +2 -2
  58. package/dist/esm/decorators/emitCustomEvent.js +56 -42
  59. package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
  60. package/dist/esm/decorators/index.js +1 -1
  61. package/dist/esm/decorators/index.js.map +1 -1
  62. package/dist/esm/decorators/publishSwcAppMessage.js +5 -5
  63. package/dist/esm/decorators/publishSwcAppMessage.js.map +3 -3
  64. package/dist/esm/decorators/query.js +96 -145
  65. package/dist/esm/decorators/query.js.map +3 -3
  66. package/dist/esm/decorators/queryAll.js +104 -131
  67. package/dist/esm/decorators/queryAll.js.map +3 -3
  68. package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
  69. package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
  70. package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
  71. package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
  72. package/dist/esm/elements/SwcAppMixin.js +18 -3
  73. package/dist/esm/elements/SwcAppMixin.js.map +2 -2
  74. package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
  75. package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
  76. package/dist/esm/index.js +1 -0
  77. package/dist/esm/index.js.map +2 -2
  78. package/dist/esm/router/ElementRouter.js +4 -0
  79. package/dist/esm/router/ElementRouter.js.map +2 -2
  80. package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +759 -512
  81. package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
  82. package/dist/types/SwcAppEngine.d.ts.map +1 -1
  83. package/dist/types/decorators/addEventListener.d.ts +17 -14
  84. package/dist/types/decorators/addEventListener.d.ts.map +1 -1
  85. package/dist/types/decorators/applyAttribute.d.ts +35 -20
  86. package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
  87. package/dist/types/decorators/applyClass.d.ts +16 -36
  88. package/dist/types/decorators/applyClass.d.ts.map +1 -1
  89. package/dist/types/decorators/applyNode.d.ts +172 -30
  90. package/dist/types/decorators/applyNode.d.ts.map +1 -1
  91. package/dist/types/decorators/applyProperty.d.ts +27 -18
  92. package/dist/types/decorators/applyProperty.d.ts.map +1 -1
  93. package/dist/types/decorators/applyStyle.d.ts +7 -7
  94. package/dist/types/decorators/applyStyle.d.ts.map +1 -1
  95. package/dist/types/decorators/{changedAttributeThis.d.ts → changedAttribute.d.ts} +2 -2
  96. package/dist/types/decorators/changedAttribute.d.ts.map +1 -0
  97. package/dist/types/decorators/elementDefine.d.ts.map +1 -1
  98. package/dist/types/decorators/emitCustomEvent.d.ts +3 -10
  99. package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
  100. package/dist/types/decorators/index.d.ts +1 -1
  101. package/dist/types/decorators/index.d.ts.map +1 -1
  102. package/dist/types/decorators/publishSwcAppMessage.d.ts +1 -1
  103. package/dist/types/decorators/publishSwcAppMessage.d.ts.map +1 -1
  104. package/dist/types/decorators/query.d.ts +3 -26
  105. package/dist/types/decorators/query.d.ts.map +1 -1
  106. package/dist/types/decorators/queryAll.d.ts +3 -20
  107. package/dist/types/decorators/queryAll.d.ts.map +1 -1
  108. package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +1 -0
  109. package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
  110. package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +2 -0
  111. package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
  112. package/dist/types/elements/SwcAppMixin.d.ts +4 -4
  113. package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
  114. package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
  115. package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
  116. package/dist/types/index.d.ts +1 -0
  117. package/dist/types/index.d.ts.map +1 -1
  118. package/dist/types/router/ElementRouter.d.ts.map +1 -1
  119. package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +759 -512
  120. package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
  121. package/package.json +3 -3
  122. package/src/SwcAppEngine.ts +3 -1
  123. package/src/decorators/addEventListener.ts +28 -24
  124. package/src/decorators/applyAttribute.ts +109 -63
  125. package/src/decorators/applyClass.ts +89 -15
  126. package/src/decorators/applyNode.ts +357 -100
  127. package/src/decorators/applyProperty.ts +42 -63
  128. package/src/decorators/applyStyle.ts +59 -11
  129. package/src/decorators/{changedAttributeThis.ts → changedAttribute.ts} +1 -1
  130. package/src/decorators/elementDefine.ts +47 -4
  131. package/src/decorators/emitCustomEvent.ts +44 -36
  132. package/src/decorators/index.ts +1 -1
  133. package/src/decorators/publishSwcAppMessage.ts +1 -1
  134. package/src/decorators/query.ts +90 -159
  135. package/src/decorators/queryAll.ts +92 -134
  136. package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +1 -0
  137. package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +3 -1
  138. package/src/elements/SwcAppMixin.ts +43 -24
  139. package/src/examples/RxJSOperatorsExample.ts +279 -0
  140. package/src/index.ts +2 -0
  141. package/src/router/ElementRouter.ts +4 -0
  142. package/dist/cjs/decorators/changedAttributeThis.js.map +0 -7
  143. package/dist/esm/decorators/changedAttributeThis.js.map +0 -7
  144. package/dist/types/decorators/changedAttributeThis.d.ts.map +0 -1
@@ -260,81 +260,60 @@ export function applyProperty(selector: string, targetPropertyKeyOrOptions?: str
260
260
  // ============================================
261
261
 
262
262
  /**
263
- * @property - Alias for @applyProperty
264
- */
265
- export function property(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
266
- export function property(selector: string, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
267
- export function property(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator & PropertyDecorator {
268
- return applyProperty(selector, targetPropertyKeyOrOptions as any, options);
269
- }
270
-
271
- /**
272
- * @propertyThis - Apply property on $this element
273
- * Can be used as: @propertyThis or @propertyThis('propertyName') or @propertyThis({ name: 'propertyName' })
263
+ * @property - Field decorator for binding element properties (read/write)
264
+ *
265
+ * Usage:
266
+ * - @property('selector', 'propertyName') - Bind to specific property
267
+ * - @property('selector') - Use field name as property name
268
+ * - @property('selector', options) - Bind with options
269
+ * - @property - Bare decorator (binds to $this with field name)
270
+ *
271
+ * Note: This decorator is for FIELDS ONLY. For methods, use @setProperty.
274
272
  */
275
- export function propertyThis(target: Object, propertyKey: string | symbol): void;
276
- export function propertyThis(targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator & PropertyDecorator;
277
- export function propertyThis(options?: PropertyOptions): MethodDecorator & PropertyDecorator;
278
- export function propertyThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
279
- // Direct decorator usage: @propertyThis
280
- if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
281
- (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
282
- // Called as @propertyThis (target, propertyKey)
283
- return applyProperty('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
273
+ export function property(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
274
+ export function property(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): PropertyDecorator;
275
+ export function property(selector: string, options?: PropertyOptions): PropertyDecorator;
276
+ export function property(selectorOrTarget?: string | Object, targetPropertyKeyOrOptions?: any, optionsOrDescriptor?: any): any {
277
+ // Bare decorator: @property
278
+ if (optionsOrDescriptor !== undefined && (typeof targetPropertyKeyOrOptions === 'string' || typeof targetPropertyKeyOrOptions === 'symbol')) {
279
+ return applyProperty('$this', undefined as any, {})(selectorOrTarget as Object, targetPropertyKeyOrOptions, optionsOrDescriptor as PropertyDescriptor);
284
280
  }
285
-
286
- // Called with parameters
287
- if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'symbol') {
288
- // @propertyThis('propertyName', options?)
289
- return applyProperty('$this', targetOrOptions, propertyKeyOrOptions);
290
- } else if (targetOrOptions && typeof targetOrOptions === 'object') {
291
- // @propertyThis({ name: 'propertyName' })
292
- return applyProperty('$this', undefined as any, targetOrOptions);
293
- } else {
294
- // @propertyThis() or @propertyThis
295
- return applyProperty('$this', undefined as any, {});
281
+ // With selector
282
+ if (typeof selectorOrTarget === 'string') {
283
+ return applyProperty(selectorOrTarget, targetPropertyKeyOrOptions as any, optionsOrDescriptor as PropertyOptions);
296
284
  }
285
+ // Without selector (defaults to $this)
286
+ return applyProperty('$this', undefined as any, selectorOrTarget as PropertyOptions);
297
287
  }
298
288
 
299
289
  /**
300
- * @setProperty - Alias for @applyProperty (method-decorator semantics)
290
+ * @setProperty - Method decorator for setting element properties from method return value
291
+ *
292
+ * Usage:
293
+ * - @setProperty('selector', 'propertyName') - Set specific property
294
+ * - @setProperty('selector') - Use method name as property name
295
+ * - @setProperty('selector', options) - Set with options
296
+ * - @setProperty - Bare decorator (sets on $this with method name)
297
+ *
298
+ * Note: This decorator is for METHODS ONLY. For fields, use @property.
299
+ *
300
+ * Example:
301
+ * @setProperty('selector', 'disabled')
302
+ * disableElement() {
303
+ * return true;
304
+ * }
301
305
  */
302
306
  export function setProperty(selector: string, targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
303
307
  export function setProperty(selector: string, options?: PropertyOptions): MethodDecorator;
304
- export function setProperty(selector: string, targetPropertyKeyOrOptions?: string | symbol | PropertyOptions, options?: PropertyOptions): MethodDecorator {
305
- return applyProperty(selector, targetPropertyKeyOrOptions as any, options) as MethodDecorator;
306
- }
307
-
308
- /**
309
- * @setPropertyThis - Set property on $this element
310
- * Can be used as: @setPropertyThis or @setPropertyThis('propertyName') or @setPropertyThis({ name: 'propertyName' })
311
- */
312
- export function setPropertyThis(target: Object, propertyKey: string | symbol): void;
313
- export function setPropertyThis(targetPropertyKey: string | symbol, options?: PropertyOptions): MethodDecorator;
314
- export function setPropertyThis(options?: PropertyOptions): MethodDecorator;
315
- export function setPropertyThis(targetOrOptions?: any, propertyKeyOrOptions?: any, descriptor?: PropertyDescriptor): any {
316
- // Direct decorator usage: @setPropertyThis
317
- if (typeof targetOrOptions === 'object' && targetOrOptions !== null && !Array.isArray(targetOrOptions) &&
318
- (typeof propertyKeyOrOptions === 'string' || typeof propertyKeyOrOptions === 'symbol')) {
319
- // Called as @setPropertyThis (target, propertyKey)
320
- return applyProperty('$this', undefined as any, {})(targetOrOptions, propertyKeyOrOptions, descriptor);
321
- }
322
-
323
- // Called with parameters
324
- if (typeof targetOrOptions === 'string' || typeof targetOrOptions === 'symbol') {
325
- // @setPropertyThis('propertyName', options?)
326
- return applyProperty('$this', targetOrOptions, propertyKeyOrOptions) as MethodDecorator;
327
- } else if (targetOrOptions && typeof targetOrOptions === 'object') {
328
- // @setPropertyThis({ name: 'propertyName' })
329
- return applyProperty('$this', undefined as any, targetOrOptions) as MethodDecorator;
330
- } else {
331
- // @setPropertyThis() or @setPropertyThis
332
- return applyProperty('$this', undefined as any, {}) as MethodDecorator;
308
+ export function setProperty(selectorOrOptions?: string | PropertyOptions, targetPropertyKeyOrOptions?: any, optionsOrUndefined?: PropertyOptions): MethodDecorator {
309
+ // With selector
310
+ if (typeof selectorOrOptions === 'string') {
311
+ return applyProperty(selectorOrOptions, targetPropertyKeyOrOptions as any, optionsOrUndefined as PropertyOptions) as MethodDecorator;
333
312
  }
313
+ // Without selector (defaults to $this)
314
+ return applyProperty('$this', undefined as any, selectorOrOptions as PropertyOptions) as MethodDecorator;
334
315
  }
335
316
 
336
-
337
-
338
317
  // ============================================
339
318
  // Metadata Helpers
340
319
  // ============================================
@@ -137,21 +137,69 @@ function createStyleDecorator(action: StyleAction) {
137
137
  };
138
138
  }
139
139
 
140
- export function applyStyle(selector: string, action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
141
- return createStyleDecorator(action)(selector, options);
140
+ export function applyStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
141
+ export function applyStyle(selector: string, action?: StyleAction, options?: StyleApplyOptions): MethodDecorator;
142
+ export function applyStyle(selectorOrTarget?: any, actionOrPropertyKey?: any, optionsOrDescriptor?: any): any {
143
+ // Bare decorator: @applyStyle
144
+ if (optionsOrDescriptor !== undefined && (typeof actionOrPropertyKey === 'string' || typeof actionOrPropertyKey === 'symbol')) {
145
+ return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, actionOrPropertyKey, optionsOrDescriptor as PropertyDescriptor);
146
+ }
147
+ // With selector
148
+ if (typeof selectorOrTarget === 'string') {
149
+ const action = (typeof actionOrPropertyKey === 'string' ? actionOrPropertyKey : 'update') as StyleAction;
150
+ const options = (typeof actionOrPropertyKey === 'object' ? actionOrPropertyKey : optionsOrDescriptor) as StyleApplyOptions | undefined;
151
+ return createStyleDecorator(action)(selectorOrTarget, options);
152
+ }
153
+ // Without selector (defaults to $this)
154
+ const action = (typeof selectorOrTarget === 'string' ? selectorOrTarget : 'update') as StyleAction;
155
+ const options = (typeof selectorOrTarget === 'object' ? selectorOrTarget : actionOrPropertyKey) as StyleApplyOptions | undefined;
156
+ return createStyleDecorator(action)('$this', options);
142
157
  }
143
158
 
144
- export const setStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('set')(selector, options);
145
- export const updateStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('update')(selector, options);
146
- export const removeStyle = (selector: string, options: StyleApplyOptions = {}) => createStyleDecorator('remove')(selector, options);
159
+ export function setStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
160
+ export function setStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
161
+ export function setStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
162
+ // Bare decorator: @setStyle
163
+ if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
164
+ return createStyleDecorator('set')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
165
+ }
166
+ // With selector
167
+ if (typeof selectorOrTarget === 'string') {
168
+ return createStyleDecorator('set')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
169
+ }
170
+ // Without selector (defaults to $this)
171
+ return createStyleDecorator('set')('$this', selectorOrTarget as StyleApplyOptions);
172
+ }
147
173
 
148
- // This versions
149
- export function applyStyleThis(action: StyleAction = 'update', options: StyleApplyOptions = {}): MethodDecorator {
150
- return createStyleDecorator(action)('$this', options);
174
+ export function updateStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
175
+ export function updateStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
176
+ export function updateStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
177
+ // Bare decorator: @updateStyle
178
+ if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
179
+ return createStyleDecorator('update')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
180
+ }
181
+ // With selector
182
+ if (typeof selectorOrTarget === 'string') {
183
+ return createStyleDecorator('update')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
184
+ }
185
+ // Without selector (defaults to $this)
186
+ return createStyleDecorator('update')('$this', selectorOrTarget as StyleApplyOptions);
187
+ }
188
+
189
+ export function removeStyle(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
190
+ export function removeStyle(selector: string, options?: StyleApplyOptions): MethodDecorator;
191
+ export function removeStyle(selectorOrTarget?: any, optionsOrPropertyKey?: any, descriptor?: any): any {
192
+ // Bare decorator: @removeStyle
193
+ if (descriptor !== undefined && (typeof optionsOrPropertyKey === 'string' || typeof optionsOrPropertyKey === 'symbol')) {
194
+ return createStyleDecorator('remove')('$this', {})(selectorOrTarget as Object, optionsOrPropertyKey, descriptor as PropertyDescriptor);
195
+ }
196
+ // With selector
197
+ if (typeof selectorOrTarget === 'string') {
198
+ return createStyleDecorator('remove')(selectorOrTarget, optionsOrPropertyKey as StyleApplyOptions);
199
+ }
200
+ // Without selector (defaults to $this)
201
+ return createStyleDecorator('remove')('$this', selectorOrTarget as StyleApplyOptions);
151
202
  }
152
- export const setStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('set')('$this', options);
153
- export const updateStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('update')('$this', options);
154
- export const removeStyleThis = (options: StyleApplyOptions = {}) => createStyleDecorator('remove')('$this', options);
155
203
 
156
204
  export const findAllStyleMetadata = (target: any): Map<string | symbol, StyleApplyMetadata> => {
157
205
  const result = new Map<string | symbol, StyleApplyMetadata>();
@@ -23,7 +23,7 @@ const convertValue = (val: any, type: any): any => {
23
23
  /**
24
24
  * @changedAttributeThis decorator - fires when any attribute on $this changes
25
25
  */
26
- export function changedAttributeThis(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
26
+ export function changedAttribute(attributeName?: string, options: ChangedAttributeThisOptions = {}): MethodDecorator {
27
27
  return (target: Object, propertyKey: string | symbol) => {
28
28
  const constructor = target.constructor;
29
29
  let metaList = ReflectUtils.getOwnMetadata(ON_ATTRIBUTE_CHANGED_METADATA_KEY, constructor) as ChangedAttributeThisMetadata[];
@@ -1,8 +1,10 @@
1
1
  import {ActionExpression, FunctionUtils, ReflectUtils} from '@dooboostore/core';
2
+ import {Observable, Subject} from '@dooboostore/core';
3
+ import {debounceTime, throttleTime, distinctUntilChanged} from '@dooboostore/core/message/operators';
2
4
  import {getAddEventListenerMetadata} from './addEventListener';
3
5
  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';
4
6
  import {getEmitCustomEventMetadataList} from './emitCustomEvent';
5
- import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttributeThis';
7
+ import {convertAttributeValue, findAllAttributeChangedMetadata} from './changedAttribute';
6
8
  import {findAllAttributeApplyMetadata, findAllAttributeMetadata, getAttributeValue} from './applyAttribute';
7
9
  import {getQueryMetadata} from './query';
8
10
  import {getQueryAllMetadata} from './queryAll';
@@ -588,8 +590,43 @@ export const elementDefine =
588
590
  const args = {event, ...currentHostSet, $el: t, $root: t};
589
591
  await (this as any)[meta.propertyKey](event, {currentHostSet, $$matchedElement: event.currentTarget}, args);
590
592
  };
591
- t.addEventListener(type, handler, opts);
592
- (this as any)._boundListeners.push({target: t, type, handler, options: opts});
593
+
594
+ // Create event stream with Observable-based operators
595
+ const eventSubject = new Subject<Event>();
596
+ let eventStream = eventSubject as any;
597
+
598
+ // Apply operators from @dooboostore/core/operators
599
+ if (options.debounceTime !== undefined && options.debounceTime > 0) {
600
+ eventStream = eventStream.pipe(debounceTime(options.debounceTime));
601
+ }
602
+
603
+ if (options.throttleTime !== undefined && options.throttleTime > 0) {
604
+ eventStream = eventStream.pipe(throttleTime(options.throttleTime));
605
+ }
606
+
607
+ if (options.distinctUntilChanged !== undefined && options.distinctUntilChanged !== false) {
608
+ if (typeof options.distinctUntilChanged === 'function') {
609
+ eventStream = eventStream.pipe(distinctUntilChanged(options.distinctUntilChanged));
610
+ } else {
611
+ eventStream = eventStream.pipe(distinctUntilChanged());
612
+ }
613
+ }
614
+
615
+ // Subscribe to the event stream
616
+ const subscription = eventStream.subscribe({
617
+ next: (event: Event) => {
618
+ handler(event).catch((err: any) => console.error('Event handler error:', err));
619
+ },
620
+ error: (err: any) => console.error('Event stream error:', err)
621
+ });
622
+
623
+ // Create wrapper handler that emits to the subject
624
+ const wrappedHandler = (event: Event) => {
625
+ eventSubject.next(event);
626
+ };
627
+
628
+ t.addEventListener(type, wrappedHandler, opts);
629
+ (this as any)._boundListeners.push({target: t, type, handler: wrappedHandler, options: opts, subscription});
593
630
  });
594
631
  });
595
632
 
@@ -640,7 +677,13 @@ export const elementDefine =
640
677
  for (const m of bMethods) (this as any)._invokeLifecycleMethod(m.propertyKey, helperHostSet);
641
678
 
642
679
  if ((this as any)._boundListeners) {
643
- (this as any)._boundListeners.forEach((l: any) => l.target.removeEventListener(l.type, l.handler, l.options));
680
+ (this as any)._boundListeners.forEach((l: any) => {
681
+ l.target.removeEventListener(l.type, l.handler, l.options);
682
+ // Cleanup Observable subscription if present
683
+ if (l.subscription && typeof l.subscription.unsubscribe === 'function') {
684
+ l.subscription.unsubscribe();
685
+ }
686
+ });
644
687
  (this as any)._boundListeners = [];
645
688
  }
646
689
 
@@ -37,16 +37,43 @@ export interface EmitCustomEventMetadata {
37
37
 
38
38
  export const EMIT_CUSTOM_EVENT_METADATA_KEY = Symbol.for('simple-web-component:emit-custom-event');
39
39
 
40
- export function emitCustomEvent(target: SpecialSelector, type: string, options?: Options): MethodDecorator;
40
+ export function emitCustomEvent(target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor): PropertyDescriptor | void;
41
41
  export function emitCustomEvent(selector: string, type: string, options?: Options): MethodDecorator;
42
+ export function emitCustomEvent(type: string, options?: Options): MethodDecorator;
42
43
  /**
43
44
  * @emitCustomEvent decorator to dispatch custom events to a target.
45
+ *
46
+ * Usage:
47
+ * - @emitCustomEvent('$this', 'event-name', options) - Emit from $this
48
+ * - @emitCustomEvent('$appHost', 'event-name', options) - Emit from $appHost
49
+ * - @emitCustomEvent('event-name', options) - Emit from $this (defaults to $this)
50
+ * - @emitCustomEvent('event-name') - Emit from $this with no options
44
51
  */
45
- export function emitCustomEvent(selectorOrTarget: string, type: string, options: any = {}): MethodDecorator {
52
+ export function emitCustomEvent(selectorOrTarget: any, typeOrPropertyKey?: any, optionsOrDescriptor?: any): any {
53
+ // Case 1: Bare decorator on property
54
+ if (typeof selectorOrTarget === 'object' && typeof typeOrPropertyKey === 'string' && typeof optionsOrDescriptor === 'object' && 'value' in optionsOrDescriptor) {
55
+ throw new Error(`@emitCustomEvent decorator cannot be used on properties. (Property: ${String(typeOrPropertyKey)})`);
56
+ }
57
+
58
+ // Case 2: With selector and type - @emitCustomEvent('selector', 'event-name', options)
59
+ if (typeof selectorOrTarget === 'string' && typeof typeOrPropertyKey === 'string') {
60
+ return createEmitDecorator(selectorOrTarget, typeOrPropertyKey, optionsOrDescriptor as Options);
61
+ }
62
+
63
+ // Case 3: Without selector (type only) - @emitCustomEvent('event-name', options)
64
+ if (typeof selectorOrTarget === 'string' && typeOrPropertyKey !== 'string') {
65
+ return createEmitDecorator('$this', selectorOrTarget, typeOrPropertyKey as Options);
66
+ }
67
+
68
+ // Fallback
69
+ throw new Error('Invalid @emitCustomEvent usage');
70
+ }
71
+
72
+ function createEmitDecorator(selector: string, type: string, options?: Options) {
46
73
  return (targetObj: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
47
74
  const constructor = targetObj.constructor;
48
75
 
49
- const fullOptions: any = {...options, type};
76
+ const fullOptions: any = {...(options || {}), type};
50
77
 
51
78
  if (fullOptions.bubbles === undefined) fullOptions.bubbles = true;
52
79
  if (fullOptions.composed === undefined) fullOptions.composed = true;
@@ -56,7 +83,7 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
56
83
  list = [];
57
84
  ReflectUtils.defineMetadata(EMIT_CUSTOM_EVENT_METADATA_KEY, list, constructor);
58
85
  }
59
- list.push({propertyKey, selector: selectorOrTarget, type, options: fullOptions});
86
+ list.push({propertyKey, selector, type, options: fullOptions});
60
87
 
61
88
  const original = descriptor.value;
62
89
  descriptor.value = function (...args: any[]) {
@@ -76,27 +103,27 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
76
103
  const currentWin = (this as any)._resolveWindow?.(conf) || ((typeof window !== 'undefined' ? window : undefined) as Window);
77
104
 
78
105
  const eventTargets: EventTarget[] = [];
79
- if (selectorOrTarget === '$window') eventTargets.push(currentWin);
80
- else if (selectorOrTarget === '$document') eventTargets.push(currentWin.document);
81
- else if (selectorOrTarget === '$host') {
106
+ if (selector === '$window') eventTargets.push(currentWin);
107
+ else if (selector === '$document') eventTargets.push(currentWin.document);
108
+ else if (selector === '$host') {
82
109
  if (hostSet.$host) eventTargets.push(hostSet.$host);
83
- } else if (selectorOrTarget === '$parentHost') {
110
+ } else if (selector === '$parentHost') {
84
111
  if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
85
- } else if (selectorOrTarget === '$appHost') {
112
+ } else if (selector === '$appHost') {
86
113
  if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
87
- } else if (selectorOrTarget === '$firstHost') {
114
+ } else if (selector === '$firstHost') {
88
115
  if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
89
- } else if (selectorOrTarget === '$lastHost') {
116
+ } else if (selector === '$lastHost') {
90
117
  if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
91
- } else if (selectorOrTarget === '$firstAppHost') {
118
+ } else if (selector === '$firstAppHost') {
92
119
  if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
93
- } else if (selectorOrTarget === '$lastAppHost') {
120
+ } else if (selector === '$lastAppHost') {
94
121
  if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
95
- } else if (selectorOrTarget === '$hosts') {
122
+ } else if (selector === '$hosts') {
96
123
  hostSet.$hosts.forEach(h => eventTargets.push(h));
97
- } else if (selectorOrTarget === '$appHosts') {
124
+ } else if (selector === '$appHosts') {
98
125
  hostSet.$appHosts.forEach(h => eventTargets.push(h));
99
- } else if (selectorOrTarget === '$this' || !selectorOrTarget) {
126
+ } else if (selector === '$this' || !selector) {
100
127
  eventTargets.push(this as any);
101
128
  } else {
102
129
  const r = fullOptions.root || 'auto';
@@ -110,7 +137,7 @@ export function emitCustomEvent(selectorOrTarget: string, type: string, options:
110
137
  }
111
138
 
112
139
  searchRoots.forEach(sr => {
113
- sr.querySelectorAll(selectorOrTarget).forEach(el => eventTargets.push(el));
140
+ sr.querySelectorAll(selector).forEach(el => eventTargets.push(el));
114
141
  });
115
142
  }
116
143
 
@@ -140,22 +167,3 @@ export const getEmitCustomEventMetadataList = (target: any): EmitCustomEventMeta
140
167
 
141
168
  // --- Aliases: emit... ---
142
169
  export const emit = emitCustomEvent;
143
-
144
- /**
145
- * @emitCustomEventThis decorator - simplified version of @emitCustomEvent for $this selector
146
- */
147
- export function emitCustomEventThis(type: string, options: EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string }): MethodDecorator ;
148
- export function emitCustomEventThis(type: string, attributeName: string): MethodDecorator ;
149
- export function emitCustomEventThis(type: string): MethodDecorator;
150
- export function emitCustomEventThis(type: string, optionsOrAttributeaName?: string | (EmitCustomEventBaseOptions & SwcQueryOptions & { attributeName?: string })): MethodDecorator {
151
- if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'string') {
152
- return emitCustomEventThis(type, {attributeName: optionsOrAttributeaName});
153
- } else if (optionsOrAttributeaName && typeof optionsOrAttributeaName === 'object') {
154
- if (!optionsOrAttributeaName.attributeName) {
155
- optionsOrAttributeaName.attributeName = `on-emit-${type}`;
156
- }
157
- return emitCustomEvent('$this', type, optionsOrAttributeaName);
158
- } else {
159
- return emitCustomEvent('$this', type, {attributeName: `on-emit-${type}`});
160
- }
161
- }
@@ -1,7 +1,7 @@
1
1
  export * from './addEventListener';
2
2
  export * from './applyAttribute';
3
3
  export * from './elementDefine';
4
- export * from './changedAttributeThis';
4
+ export * from './changedAttribute';
5
5
  export * from './emitCustomEvent';
6
6
  export * from './applyNode';
7
7
  export * from './lifecycles';
@@ -134,7 +134,7 @@ export function publishSwcAppMessage(targetOrMessageTypeOrOptions?: any, propert
134
134
  }
135
135
 
136
136
  // --- Aliases: publish... ---
137
- export const publish = publishSwcAppMessage;
137
+ export const publishMessage = publishSwcAppMessage;
138
138
 
139
139
  // Helper function to retrieve publish message metadata
140
140
  export const getPublishSwcAppMessageMetadata = (target: any): PublishSwcAppMessageMetadata[] | undefined => {