snice 2.1.1 → 2.1.3

package/dist/index.iife.js

@@ -1,5 +1,5 @@
 /*!
- * snice v2.1.0
+ * snice v2.1.2
  * Imperative TypeScript framework for building vanilla web components with decorators, routing, and controllers. No virtual DOM, no build complexity.
  * (c) 2024
  * Released under the MIT License.
@@ -70,6 +70,8 @@ var Snice = (function (exports) {
     // Part symbols
     const PARTS = getSymbol('parts');
     const PART_TIMERS = getSymbol('part-timers');
+    // Dispatch timing symbols
+    const DISPATCH_TIMERS = getSymbol('dispatch-timers');
 
     function on(eventName, selectorOrOptions, options) {
         // Handle overloaded parameters
@@ -298,12 +300,21 @@ var Snice = (function (exports) {
      */
     function dispatch(eventName, options) {
         return function (originalMethod, _context) {
-            // Create timing wrappers for dispatch
-            let debounceTimeout;
-            let throttleLastCall = 0;
-            let throttleTimeout;
             return function (...args) {
-                // Call the original method
+                // Create timing wrappers for dispatch (per-instance)
+                if (!this[DISPATCH_TIMERS]) {
+                    this[DISPATCH_TIMERS] = new Map();
+                }
+                const timerKey = `${eventName}_${_context.name}`;
+                if (!this[DISPATCH_TIMERS].has(timerKey)) {
+                    this[DISPATCH_TIMERS].set(timerKey, {
+                        debounceTimeout: null,
+                        throttleLastCall: 0,
+                        throttleTimeout: null
+                    });
+                }
+                const timers = this[DISPATCH_TIMERS].get(timerKey);
+                // Call the original method with preserved this context
                 const result = originalMethod.apply(this, args);
                 // Helper to dispatch the event
                 const doDispatch = (detail) => {
@@ -323,21 +334,21 @@ var Snice = (function (exports) {
                 // Helper to handle timed dispatch
                 const timedDispatch = (detail) => {
                     if (options?.debounce) {
-                        clearTimeout(debounceTimeout);
-                        debounceTimeout = setTimeout(() => doDispatch(detail), options.debounce);
+                        clearTimeout(timers.debounceTimeout);
+                        timers.debounceTimeout = setTimeout(() => doDispatch(detail), options.debounce);
                     }
                     else if (options?.throttle) {
                         const now = Date.now();
-                        const remaining = options.throttle - (now - throttleLastCall);
+                        const remaining = options.throttle - (now - timers.throttleLastCall);
                         if (remaining <= 0) {
-                            clearTimeout(throttleTimeout);
-                            throttleLastCall = now;
+                            clearTimeout(timers.throttleTimeout);
+                            timers.throttleLastCall = now;
                             doDispatch(detail);
                         }
-                        else if (!throttleTimeout) {
-                            throttleTimeout = setTimeout(() => {
-                                throttleLastCall = Date.now();
-                                throttleTimeout = null;
+                        else if (!timers.throttleTimeout) {
+                            timers.throttleTimeout = setTimeout(() => {
+                                timers.throttleLastCall = Date.now();
+                                timers.throttleTimeout = null;
                                 doDispatch(detail);
                             }, remaining);
                         }
@@ -1429,6 +1440,7 @@ var Snice = (function (exports) {
                         try {
                             const partElement = this.shadowRoot.querySelector(`[part="${partName}"]`);
                             if (partElement) {
+                                // For initial render, call original method directly to avoid timing restrictions
                                 const partResult = partHandler.method.call(this);
                                 const partContent = partResult instanceof Promise ? await partResult : partResult;
                                 if (partContent !== undefined) {
@@ -2032,94 +2044,51 @@ var Snice = (function (exports) {
                     });
                 }
                 const timers = this[PART_TIMERS].get(partName);
-                // Call the original method first to get its result
-                const result = originalMethod.apply(this, args);
-                // Helper function to update DOM
-                const updateDOM = (content) => {
-                    if (this.shadowRoot && content !== undefined) {
-                        const partElement = this.shadowRoot.querySelector(`[part="${partName}"]`);
-                        if (partElement) {
-                            partElement.innerHTML = content;
+                // Helper function to execute method and update DOM
+                const executeAndUpdate = (...methodArgs) => {
+                    const result = originalMethod.apply(this, methodArgs);
+                    const updateDOM = (content) => {
+                        const hasContent = content !== undefined;
+                        const hasElement = this.shadowRoot?.querySelector(`[part="${partName}"]`);
+                        if (hasContent && hasElement) {
+                            hasElement.innerHTML = content;
                         }
-                    }
+                    };
+                    const isPromise = result instanceof Promise;
+                    return isPromise
+                        ? result.then(content => { updateDOM(content); return content; })
+                        : (updateDOM(result), result);
                 };
-                // Check if result is a Promise (async method)
-                if (result instanceof Promise) {
-                    // Handle async method
-                    if (options.debounce !== undefined && options.debounce > 0) {
-                        // Debounce: defer DOM update, return original Promise
-                        if (timers.debounceTimer) {
-                            clearTimeout(timers.debounceTimer);
-                        }
-                        timers.debounceTimer = setTimeout(async () => {
-                            const content = await result;
-                            updateDOM(content);
-                        }, options.debounce);
-                        return result;
+                const hasDebounce = options.debounce !== undefined && options.debounce > 0;
+                const hasThrottle = options.throttle !== undefined && options.throttle > 0;
+                // Handle timing based on priority: debounce > throttle > immediate
+                switch (true) {
+                    case hasDebounce: {
+                        clearTimeout(timers.debounceTimer);
+                        timers.debounceTimer = setTimeout(() => executeAndUpdate(...args), options.debounce);
+                        return undefined;
                     }
-                    if (options.throttle !== undefined && options.throttle > 0) {
-                        // Throttle: handle timing but return original Promise
+                    case hasThrottle: {
+                        const throttleMs = options.throttle;
                         const now = Date.now();
-                        if (timers.lastThrottleCall === 0 || now - timers.lastThrottleCall >= options.throttle) {
+                        const canExecuteImmediately = timers.lastThrottleCall === 0 || now - timers.lastThrottleCall >= throttleMs;
+                        if (canExecuteImmediately) {
                             timers.lastThrottleCall = now;
-                            return result.then(content => {
-                                updateDOM(content);
-                                return content;
-                            });
+                            return executeAndUpdate(...args);
                         }
-                        else {
-                            if (!timers.throttleTimer) {
-                                const remainingTime = options.throttle - (now - timers.lastThrottleCall);
-                                timers.throttleTimer = setTimeout(async () => {
-                                    timers.throttleTimer = null;
-                                    timers.lastThrottleCall = Date.now();
-                                    const content = await result;
-                                    updateDOM(content);
-                                }, remainingTime);
-                            }
-                            return result;
+                        const hasScheduledTimer = !!timers.throttleTimer;
+                        if (!hasScheduledTimer) {
+                            const remainingTime = throttleMs - (now - timers.lastThrottleCall);
+                            timers.throttleTimer = setTimeout(() => {
+                                timers.throttleTimer = null;
+                                timers.lastThrottleCall = Date.now();
+                                executeAndUpdate(...args);
+                            }, remainingTime);
                         }
+                        return undefined;
                     }
-                    // No timing: update DOM after Promise resolves
-                    return result.then(content => {
-                        updateDOM(content);
-                        return content;
-                    });
-                }
-                else {
-                    // Handle sync method
-                    if (options.debounce !== undefined && options.debounce > 0) {
-                        // Debounce: defer DOM update, return result immediately
-                        if (timers.debounceTimer) {
-                            clearTimeout(timers.debounceTimer);
-                        }
-                        timers.debounceTimer = setTimeout(() => {
-                            updateDOM(result);
-                        }, options.debounce);
-                        return result;
-                    }
-                    if (options.throttle !== undefined && options.throttle > 0) {
-                        // Throttle: handle timing for DOM updates
-                        const now = Date.now();
-                        if (timers.lastThrottleCall === 0 || now - timers.lastThrottleCall >= options.throttle) {
-                            timers.lastThrottleCall = now;
-                            updateDOM(result);
-                        }
-                        else {
-                            if (!timers.throttleTimer) {
-                                const remainingTime = options.throttle - (now - timers.lastThrottleCall);
-                                timers.throttleTimer = setTimeout(() => {
-                                    timers.throttleTimer = null;
-                                    timers.lastThrottleCall = Date.now();
-                                    updateDOM(result);
-                                }, remainingTime);
-                            }
-                        }
-                        return result;
-                    }
-                    // No timing: update DOM immediately
-                    updateDOM(result);
-                    return result;
+                    default:
+                        return executeAndUpdate(...args);
                 }
             };
         };