snice 2.1.2 → 2.1.4

package/components/table/snice-table.ts

@@ -1,6 +1,6 @@
 import { element, on, property, query, request, dispatch, watch } from 'snice';
-import 'snice/input/snice-input';
-import 'snice/select/snice-select';
+import '../input/snice-input';
+import '../select/snice-select';
 import './snice-cell.ts';
 import './snice-cell-text.ts';
 import './snice-cell-number.ts';

package/dist/index.cjs

@@ -1,5 +1,5 @@
 /*!
- * snice v2.1.1
+ * snice v2.1.3
  * 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.
@@ -69,6 +69,8 @@ const OBSERVERS = getSymbol('observers');
 // 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
@@ -115,7 +117,9 @@ function setupEventHandlers(instance, element) {
         instance[CLEANUP] = { events: [], channels: [] };
     }
     for (const handler of handlers) {
-        const originalMethod = handler.method.bind(instance);
+        // Get the current method from the instance (preserves decorator stacking)
+        const currentMethod = instance[handler.method.name];
+        const originalMethod = currentMethod ? currentMethod.bind(instance) : handler.method.bind(instance);
         const handlerOptions = handler.options || {};
         // Parse event name for key modifiers
         const [baseEventName, keyModifier] = handler.eventName.split(':');
@@ -297,12 +301,21 @@ function cleanupEventHandlers(instance) {
  */
 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) => {
@@ -322,21 +335,21 @@ function dispatch(eventName, options) {
             // 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);
                     }
@@ -1428,6 +1441,7 @@ function applyElementFunctionality(constructor) {
                     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) {
@@ -2031,94 +2045,51 @@ function part(partName, options = {}) {
                 });
             }
             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);
             }
         };
     };