@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.
- package/README.md +298 -49
- package/dist/cjs/SwcAppEngine.js +3 -1
- package/dist/cjs/SwcAppEngine.js.map +2 -2
- package/dist/cjs/decorators/addEventListener.js.map +2 -2
- package/dist/cjs/decorators/applyAttribute.js +30 -28
- package/dist/cjs/decorators/applyAttribute.js.map +2 -2
- package/dist/cjs/decorators/applyClass.js +57 -21
- package/dist/cjs/decorators/applyClass.js.map +3 -3
- package/dist/cjs/decorators/applyNode.js +165 -105
- package/dist/cjs/decorators/applyNode.js.map +2 -2
- package/dist/cjs/decorators/applyProperty.js +11 -28
- package/dist/cjs/decorators/applyProperty.js.map +2 -2
- package/dist/cjs/decorators/applyStyle.js +39 -15
- package/dist/cjs/decorators/applyStyle.js.map +3 -3
- package/dist/cjs/decorators/{changedAttributeThis.js → changedAttribute.js} +6 -6
- package/dist/cjs/decorators/changedAttribute.js.map +7 -0
- package/dist/cjs/decorators/elementDefine.js +37 -6
- package/dist/cjs/decorators/elementDefine.js.map +3 -3
- package/dist/cjs/decorators/emitCustomEvent.js +56 -42
- package/dist/cjs/decorators/emitCustomEvent.js.map +2 -2
- package/dist/cjs/decorators/index.js +1 -1
- package/dist/cjs/decorators/index.js.map +2 -2
- package/dist/cjs/decorators/publishSwcAppMessage.js +5 -5
- package/dist/cjs/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/cjs/decorators/query.js +96 -145
- package/dist/cjs/decorators/query.js.map +3 -3
- package/dist/cjs/decorators/queryAll.js +104 -131
- package/dist/cjs/decorators/queryAll.js.map +3 -3
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/cjs/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/cjs/elements/SwcAppMixin.js +17 -2
- package/dist/cjs/elements/SwcAppMixin.js.map +2 -2
- package/dist/cjs/examples/RxJSOperatorsExample.js +285 -0
- package/dist/cjs/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/router/ElementRouter.js +4 -0
- package/dist/cjs/router/ElementRouter.js.map +2 -2
- package/dist/esm/SwcAppEngine.js +3 -1
- package/dist/esm/SwcAppEngine.js.map +2 -2
- package/dist/esm/decorators/addEventListener.js.map +2 -2
- package/dist/esm/decorators/applyAttribute.js +30 -28
- package/dist/esm/decorators/applyAttribute.js.map +2 -2
- package/dist/esm/decorators/applyClass.js +57 -21
- package/dist/esm/decorators/applyClass.js.map +3 -3
- package/dist/esm/decorators/applyNode.js +165 -105
- package/dist/esm/decorators/applyNode.js.map +2 -2
- package/dist/esm/decorators/applyProperty.js +11 -28
- package/dist/esm/decorators/applyProperty.js.map +2 -2
- package/dist/esm/decorators/applyStyle.js +39 -15
- package/dist/esm/decorators/applyStyle.js.map +3 -3
- package/dist/esm/decorators/{changedAttributeThis.js → changedAttribute.js} +3 -3
- package/dist/esm/decorators/changedAttribute.js.map +7 -0
- package/dist/esm/decorators/elementDefine.js +35 -4
- package/dist/esm/decorators/elementDefine.js.map +2 -2
- package/dist/esm/decorators/emitCustomEvent.js +56 -42
- package/dist/esm/decorators/emitCustomEvent.js.map +2 -2
- package/dist/esm/decorators/index.js +1 -1
- package/dist/esm/decorators/index.js.map +1 -1
- package/dist/esm/decorators/publishSwcAppMessage.js +5 -5
- package/dist/esm/decorators/publishSwcAppMessage.js.map +3 -3
- package/dist/esm/decorators/query.js +96 -145
- package/dist/esm/decorators/query.js.map +3 -3
- package/dist/esm/decorators/queryAll.js +104 -131
- package/dist/esm/decorators/queryAll.js.map +3 -3
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppMessageWhileConnected.js.map +2 -2
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js +2 -0
- package/dist/esm/decorators/subscribeSwcAppRouteChangeWhileConnected.js.map +2 -2
- package/dist/esm/elements/SwcAppMixin.js +18 -3
- package/dist/esm/elements/SwcAppMixin.js.map +2 -2
- package/dist/esm/examples/RxJSOperatorsExample.js +266 -0
- package/dist/esm/examples/RxJSOperatorsExample.js.map +7 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/router/ElementRouter.js +4 -0
- package/dist/esm/router/ElementRouter.js.map +2 -2
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js +759 -512
- package/dist/esm-bundle/dooboostore-simple-web-component.esm.js.map +4 -4
- package/dist/types/SwcAppEngine.d.ts.map +1 -1
- package/dist/types/decorators/addEventListener.d.ts +17 -14
- package/dist/types/decorators/addEventListener.d.ts.map +1 -1
- package/dist/types/decorators/applyAttribute.d.ts +35 -20
- package/dist/types/decorators/applyAttribute.d.ts.map +1 -1
- package/dist/types/decorators/applyClass.d.ts +16 -36
- package/dist/types/decorators/applyClass.d.ts.map +1 -1
- package/dist/types/decorators/applyNode.d.ts +172 -30
- package/dist/types/decorators/applyNode.d.ts.map +1 -1
- package/dist/types/decorators/applyProperty.d.ts +27 -18
- package/dist/types/decorators/applyProperty.d.ts.map +1 -1
- package/dist/types/decorators/applyStyle.d.ts +7 -7
- package/dist/types/decorators/applyStyle.d.ts.map +1 -1
- package/dist/types/decorators/{changedAttributeThis.d.ts → changedAttribute.d.ts} +2 -2
- package/dist/types/decorators/changedAttribute.d.ts.map +1 -0
- package/dist/types/decorators/elementDefine.d.ts.map +1 -1
- package/dist/types/decorators/emitCustomEvent.d.ts +3 -10
- package/dist/types/decorators/emitCustomEvent.d.ts.map +1 -1
- package/dist/types/decorators/index.d.ts +1 -1
- package/dist/types/decorators/index.d.ts.map +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts +1 -1
- package/dist/types/decorators/publishSwcAppMessage.d.ts.map +1 -1
- package/dist/types/decorators/query.d.ts +3 -26
- package/dist/types/decorators/query.d.ts.map +1 -1
- package/dist/types/decorators/queryAll.d.ts +3 -20
- package/dist/types/decorators/queryAll.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts +1 -0
- package/dist/types/decorators/subscribeSwcAppMessageWhileConnected.d.ts.map +1 -1
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts +2 -0
- package/dist/types/decorators/subscribeSwcAppRouteChangeWhileConnected.d.ts.map +1 -1
- package/dist/types/elements/SwcAppMixin.d.ts +4 -4
- package/dist/types/elements/SwcAppMixin.d.ts.map +1 -1
- package/dist/types/examples/RxJSOperatorsExample.d.ts +94 -0
- package/dist/types/examples/RxJSOperatorsExample.d.ts.map +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/router/ElementRouter.d.ts.map +1 -1
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js +759 -512
- package/dist/umd-bundle/dooboostore-simple-web-component.umd.js.map +4 -4
- package/package.json +3 -3
- package/src/SwcAppEngine.ts +3 -1
- package/src/decorators/addEventListener.ts +28 -24
- package/src/decorators/applyAttribute.ts +109 -63
- package/src/decorators/applyClass.ts +89 -15
- package/src/decorators/applyNode.ts +357 -100
- package/src/decorators/applyProperty.ts +42 -63
- package/src/decorators/applyStyle.ts +59 -11
- package/src/decorators/{changedAttributeThis.ts → changedAttribute.ts} +1 -1
- package/src/decorators/elementDefine.ts +47 -4
- package/src/decorators/emitCustomEvent.ts +44 -36
- package/src/decorators/index.ts +1 -1
- package/src/decorators/publishSwcAppMessage.ts +1 -1
- package/src/decorators/query.ts +90 -159
- package/src/decorators/queryAll.ts +92 -134
- package/src/decorators/subscribeSwcAppMessageWhileConnected.ts +1 -0
- package/src/decorators/subscribeSwcAppRouteChangeWhileConnected.ts +3 -1
- package/src/elements/SwcAppMixin.ts +43 -24
- package/src/examples/RxJSOperatorsExample.ts +279 -0
- package/src/index.ts +2 -0
- package/src/router/ElementRouter.ts +4 -0
- package/dist/cjs/decorators/changedAttributeThis.js.map +0 -7
- package/dist/esm/decorators/changedAttributeThis.js.map +0 -7
- 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 -
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
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
|
|
276
|
-
export function
|
|
277
|
-
export function
|
|
278
|
-
export function
|
|
279
|
-
//
|
|
280
|
-
if (typeof
|
|
281
|
-
|
|
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
|
-
|
|
287
|
-
|
|
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 -
|
|
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(
|
|
305
|
-
|
|
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(
|
|
141
|
-
|
|
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
|
|
145
|
-
export
|
|
146
|
-
export
|
|
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
|
-
|
|
149
|
-
export function
|
|
150
|
-
|
|
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
|
|
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 './
|
|
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
|
-
|
|
592
|
-
|
|
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) =>
|
|
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:
|
|
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:
|
|
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
|
|
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 (
|
|
80
|
-
else if (
|
|
81
|
-
else if (
|
|
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 (
|
|
110
|
+
} else if (selector === '$parentHost') {
|
|
84
111
|
if (hostSet.$parentHost) eventTargets.push(hostSet.$parentHost);
|
|
85
|
-
} else if (
|
|
112
|
+
} else if (selector === '$appHost') {
|
|
86
113
|
if (hostSet.$appHost) eventTargets.push(hostSet.$appHost);
|
|
87
|
-
} else if (
|
|
114
|
+
} else if (selector === '$firstHost') {
|
|
88
115
|
if (hostSet.$firstHost) eventTargets.push(hostSet.$firstHost);
|
|
89
|
-
} else if (
|
|
116
|
+
} else if (selector === '$lastHost') {
|
|
90
117
|
if (hostSet.$lastHost) eventTargets.push(hostSet.$lastHost);
|
|
91
|
-
} else if (
|
|
118
|
+
} else if (selector === '$firstAppHost') {
|
|
92
119
|
if (hostSet.$firstAppHost) eventTargets.push(hostSet.$firstAppHost);
|
|
93
|
-
} else if (
|
|
120
|
+
} else if (selector === '$lastAppHost') {
|
|
94
121
|
if (hostSet.$lastAppHost) eventTargets.push(hostSet.$lastAppHost);
|
|
95
|
-
} else if (
|
|
122
|
+
} else if (selector === '$hosts') {
|
|
96
123
|
hostSet.$hosts.forEach(h => eventTargets.push(h));
|
|
97
|
-
} else if (
|
|
124
|
+
} else if (selector === '$appHosts') {
|
|
98
125
|
hostSet.$appHosts.forEach(h => eventTargets.push(h));
|
|
99
|
-
} else if (
|
|
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(
|
|
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
|
-
}
|
package/src/decorators/index.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * from './addEventListener';
|
|
2
2
|
export * from './applyAttribute';
|
|
3
3
|
export * from './elementDefine';
|
|
4
|
-
export * from './
|
|
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
|
|
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 => {
|