@dooboostore/simple-web-component 1.0.51 → 1.0.53

package/README.md

@@ -1048,15 +1048,14 @@ onSecond() { }
 
 Declaratively schedule work tied to the component. Every timer the decorator starts is cleared automatically on disconnect. There are two modes (`type` option):
 
-- `type: 'returnValue'` (**default**) - nothing starts automatically. When you call the method, its return value (a function, or the function under `valueKey`) becomes the repeating/delayed callback, called with `(id: number)`. The original return value passes through.
-- `type: 'onConnected'` - starts on connect and calls the decorated method itself on every tick/fire.
+- `type: 'onConnected'` (**default**) - starts on connect and calls the decorated method itself on every tick/fire.
+- `type: 'returnValue'` - nothing starts automatically. When you call the method, its return value (a function, or the function under `valueKey`) becomes the repeating/delayed callback, called with `(id: number)`. The original return value passes through. Aliases: `@setIntervalReturnValue`, `@setTimeoutReturnValue`, `@requestAnimationFrameReturnValue`.
 
 ```typescript
 @elementDefine('live-clock')
 class LiveClock extends HTMLElement {
   // Auto-start on connect
   @setInterval(1000, {
-    type: 'onConnected',
     parameter: (set) => [Date.now()],
     created: (set, id) => console.log('interval started, timer id:', id)
   })
@@ -1065,13 +1064,13 @@ class LiveClock extends HTMLElement {
   }
 
   // Fires once, 3 seconds after connect
-  @setTimeout(3000, { type: 'onConnected' })
+  @setTimeout(3000)
   onceAfter3s() {
     console.log('3 seconds have passed');
   }
 
-  // Default 'returnValue': starts when you call startPolling()
-  @setInterval(900)
+  // 'returnValue': starts when you call startPolling()
+  @setIntervalReturnValue(900)
   startPolling() {
     return (id: number) => console.log('interval', id, 'ticked');
   }
@@ -1080,7 +1079,7 @@ class LiveClock extends HTMLElement {
 
 **`@setInterval(interval, options?)` / `@setTimeout(delay, options?)`:**
 - `interval` / `delay` - milliseconds. `setInterval` repeats; `setTimeout` fires once.
-- `type` - `'returnValue'` (default) | `'onConnected'`
+- `type` - `'onConnected'` (default) | `'returnValue'`
 - `parameter?: (set: HelperHostSet) => any[]` - (`onConnected`) arguments for each tick/fire; omitted → no arguments.
 - `created?: (set: HelperHostSet, id: number) => void` - called once right after the timer is armed. For logging only; cleanup is automatic.
 - `filter` / `before` / `finally` - (`onConnected`) per-tick hooks; `before` result → `@setIntervalBeforeReturn` / `@setTimeoutBeforeReturn`.
@@ -1089,7 +1088,7 @@ class LiveClock extends HTMLElement {
 **`@requestAnimationFrame(options?)`** (bare form also works) - same two modes. The frame callback is `(timestamp, prevValue) => any`: return `undefined`/`null` to stop the loop, anything else is passed as `prevValue` to the next frame. Options: `type`, `created`, `valueKey`.
 
 ```typescript
-@requestAnimationFrame
+@requestAnimationFrameReturnValue   // starts when you call animate()
 animate() {
   return (ts: number, prev = 0) => (prev < 100 ? prev + 1 : null); // stops at 100
 }

package/dist/cjs/decorators/addEventListener.js

@@ -2044,7 +2044,9 @@ class EventListenerLifeCycler {
     const currentWin = helperHostSet.$w;
     const { type, options } = meta;
     const opts = { capture: options.capture, once: options.once, passive: options.passive };
+    const matchedTargets = /* @__PURE__ */ new WeakMap();
     const handler = async (event2) => {
+      const matchedElement = matchedTargets.get(event2) ?? event2.currentTarget;
       const helper = options.filter || options.before || options.finally ? import_Utils.SwcUtils.getHelperAndHostSet(target, currentWin) : void 0;
       if (options.filter) {
         if (!await options.filter(event2, { currentThis: inst, helper })) return;
@@ -2053,12 +2055,12 @@ class EventListenerLifeCycler {
       if (options.stopImmediatePropagation) event2.stopImmediatePropagation();
       if (options.preventDefault) event2.preventDefault();
       const currentHostSet = import_Utils.SwcUtils.getHostSet(inst);
-      const legacyArgs = [event2, { currentHostSet, $matchedElement: event2.currentTarget }, { event: event2, ...currentHostSet, $el: target, $root: target }];
+      const legacyArgs = [event2, { currentHostSet, $matchedElement: matchedElement }, { event: event2, ...currentHostSet, $el: target, $root: target }];
       const currentHelperSet = import_Utils.SwcUtils.getHelperSet(currentWin);
       const currentHelperHostSet = { ...currentHelperSet, ...currentHostSet, $this: inst };
       const buildArgs = (beforeReturn) => (0, import_parameter.buildSwcParameterArgs)(inst, meta.propertyKey, {
         eventObject: event2,
-        matchedElement: event2.currentTarget,
+        matchedElement,
         hostSet: currentHostSet,
         helperHostSet: currentHelperHostSet,
         helperSet: currentHelperSet,
@@ -2092,7 +2094,10 @@ class EventListenerLifeCycler {
       next: (e) => handler(e).catch((err) => console.error("Event handler error:", err)),
       error: (err) => console.error("Event stream error:", err)
     });
-    const wrappedHandler = (event2) => eventSubject.next(event2);
+    const wrappedHandler = (event2) => {
+      matchedTargets.set(event2, event2.currentTarget);
+      eventSubject.next(event2);
+    };
     target.addEventListener(type, wrappedHandler, opts);
     const onRemoves = options.removeListener ? [{ fn: options.removeListener, opts: options }] : [];
     this.getBoundListeners(inst).push({ target, type, handler: wrappedHandler, options: opts, subscription, onRemoves, meta });