snice 2.1.1 → 2.1.3

package/components/login/snice-login.ts

@@ -162,7 +162,6 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
 
   @on('click', 'snice-button')
   async handleButtonClick(event: Event) {
-    console.log('Button clicked'); // Debug
     event.preventDefault();
     // Trigger form submit
     if (this.form) {
@@ -173,15 +172,12 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
   @on('submit', '.login__form')
   @dispatch('@snice/login-attempt', { bubbles: true, composed: true })
   async handleSubmit(event: Event) {
-    console.log('Submit handler called'); // Debug
     event.preventDefault();
     
     if (this.loading || this.disabled) {
-      console.log('Submit blocked - loading or disabled'); // Debug
       return;
     }
 
-    console.log('Clearing error and setting loading...'); // Debug
     this.clearAlert();
     this.loading = true;
     this.updateLoadingState();
@@ -191,10 +187,8 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
     
     try {
       const credentials = this.getFormData();
-      console.log('Final credentials for login:', credentials); // Debug log
       
       if (!credentials.username || !credentials.password) {
-        console.log('Missing credentials detected'); // Debug
         this.showAlert('Username and password are required', 'error');
         return;
       }
@@ -210,7 +204,6 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
       }
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Login failed';
-      console.log('Login error:', errorMessage); // Debug
       this.showAlert(errorMessage, 'error');
       this.dispatchLoginError(errorMessage);
     } finally {
@@ -243,11 +236,7 @@ export class SniceLogin extends HTMLElement implements SniceLoginElement {
 
   @dispatch('@snice/login-success', { bubbles: true, composed: true })
   private dispatchLoginSuccess(result: LoginResult) {
-    return {
-      user: result.user,
-      token: result.token,
-      timestamp: new Date().toISOString()
-    };
+    return { timestamp: new Date().toISOString() };
   }
 
   @dispatch('@snice/login-error', { bubbles: true, composed: true })

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.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.
@@ -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
@@ -297,12 +299,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 +333,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 +1439,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 +2043,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);
             }
         };
     };