@forcecalendar/interface 1.0.15 → 1.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forcecalendar/interface",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "type": "module",
   "description": "Official interface layer for forceCalendar Core - Enterprise calendar components",
   "main": "dist/force-calendar-interface.umd.js",

package/src/components/EventForm.js

@@ -300,16 +300,16 @@ export class EventForm extends BaseComponent {
             if (e.target === this) this.close();
         });
 
-        // Close on Escape key - remove old listener before adding new one
-        if (this._handleKeyDown) {
-            window.removeEventListener('keydown', this._handleKeyDown);
+        // Close on Escape key - only add once to prevent memory leaks
+        if (!this._keydownListenerAdded) {
+            this._handleKeyDown = (e) => {
+                if (e.key === 'Escape' && this.hasAttribute('open')) {
+                    this.close();
+                }
+            };
+            window.addEventListener('keydown', this._handleKeyDown);
+            this._keydownListenerAdded = true;
         }
-        this._handleKeyDown = (e) => {
-            if (e.key === 'Escape' && this.hasAttribute('open')) {
-                this.close();
-            }
-        };
-        window.addEventListener('keydown', this._handleKeyDown);
     }
 
     updateColorSelection() {
@@ -410,7 +410,12 @@ export class EventForm extends BaseComponent {
         if (this._cleanupFocusTrap) {
             this._cleanupFocusTrap();
         }
-        window.removeEventListener('keydown', this._handleKeyDown);
+        // Clean up window listener
+        if (this._handleKeyDown) {
+            window.removeEventListener('keydown', this._handleKeyDown);
+            this._handleKeyDown = null;
+            this._keydownListenerAdded = false;
+        }
     }
 }
 

package/src/core/EventBus.js

@@ -58,6 +58,17 @@ class EventBus {
      * Unsubscribe from an event
      */
     off(eventName, handler) {
+        // Handle wildcard pattern removal
+        if (eventName.includes('*')) {
+            for (const sub of this.wildcardHandlers) {
+                if (sub.pattern === eventName && sub.handler === handler) {
+                    this.wildcardHandlers.delete(sub);
+                    return;
+                }
+            }
+            return;
+        }
+
         if (!this.events.has(eventName)) return;
 
         const handlers = this.events.get(eventName);
@@ -71,6 +82,43 @@ class EventBus {
         }
     }
 
+    /**
+     * Remove all wildcard handlers matching a pattern
+     * @param {string} pattern - Pattern to match (e.g., 'event:*')
+     */
+    offWildcard(pattern) {
+        for (const sub of [...this.wildcardHandlers]) {
+            if (sub.pattern === pattern) {
+                this.wildcardHandlers.delete(sub);
+            }
+        }
+    }
+
+    /**
+     * Remove all handlers (regular and wildcard) for a specific handler function
+     * Useful for cleanup when a component is destroyed
+     * @param {Function} handler - Handler function to remove
+     */
+    offAll(handler) {
+        // Remove from regular events
+        for (const [eventName, handlers] of this.events) {
+            const index = handlers.findIndex(sub => sub.handler === handler);
+            if (index > -1) {
+                handlers.splice(index, 1);
+            }
+            if (handlers.length === 0) {
+                this.events.delete(eventName);
+            }
+        }
+
+        // Remove from wildcard handlers
+        for (const sub of [...this.wildcardHandlers]) {
+            if (sub.handler === handler) {
+                this.wildcardHandlers.delete(sub);
+            }
+        }
+    }
+
     /**
      * Emit an event
      * @param {string} eventName - Event name
@@ -157,6 +205,24 @@ class EventBus {
     getHandlerCount(eventName) {
         return this.events.has(eventName) ? this.events.get(eventName).length : 0;
     }
+
+    /**
+     * Get wildcard handler count
+     */
+    getWildcardHandlerCount() {
+        return this.wildcardHandlers.size;
+    }
+
+    /**
+     * Get total handler count (for debugging/monitoring)
+     */
+    getTotalHandlerCount() {
+        let count = this.wildcardHandlers.size;
+        for (const handlers of this.events.values()) {
+            count += handlers.length;
+        }
+        return count;
+    }
 }
 
 // Create singleton instance

package/src/core/StateManager.js

@@ -39,6 +39,32 @@ class StateManager {
         this.subscribe = this.subscribe.bind(this);
         this.unsubscribe = this.unsubscribe.bind(this);
         this.setState = this.setState.bind(this);
+
+        // Initial sync of events from Core (in case events were pre-loaded)
+        this._syncEventsFromCore({ silent: true });
+    }
+
+    /**
+     * Sync state.events from Core calendar (single source of truth)
+     * This ensures state.events always matches Core's event store
+     */
+    _syncEventsFromCore(options = {}) {
+        const coreEvents = this.calendar.getEvents() || [];
+        // Only update if different to avoid unnecessary re-renders
+        if (this.state.events.length !== coreEvents.length ||
+            !this._eventsMatch(this.state.events, coreEvents)) {
+            this.setState({ events: [...coreEvents] }, options);
+        }
+        return coreEvents;
+    }
+
+    /**
+     * Check if two event arrays have the same events (by id)
+     */
+    _eventsMatch(arr1, arr2) {
+        if (arr1.length !== arr2.length) return false;
+        const ids1 = new Set(arr1.map(e => e.id));
+        return arr2.every(e => ids1.has(e.id));
     }
 
     // State management
@@ -59,13 +85,50 @@ class StateManager {
         return this.state;
     }
 
-    subscribe(callback) {
+    subscribe(callback, subscriberId = null) {
         this.subscribers.add(callback);
-        return () => this.unsubscribe(callback);
+
+        // Track subscriber ID for debugging/cleanup
+        if (subscriberId) {
+            if (!this._subscriberIds) {
+                this._subscriberIds = new Map();
+            }
+            this._subscriberIds.set(subscriberId, callback);
+        }
+
+        return () => this.unsubscribe(callback, subscriberId);
     }
 
-    unsubscribe(callback) {
+    unsubscribe(callback, subscriberId = null) {
         this.subscribers.delete(callback);
+
+        // Clean up ID tracking
+        if (subscriberId && this._subscriberIds) {
+            this._subscriberIds.delete(subscriberId);
+        }
+    }
+
+    /**
+     * Unsubscribe by subscriber ID
+     * @param {string} subscriberId - ID used when subscribing
+     */
+    unsubscribeById(subscriberId) {
+        if (!this._subscriberIds) return false;
+
+        const callback = this._subscriberIds.get(subscriberId);
+        if (callback) {
+            this.subscribers.delete(callback);
+            this._subscriberIds.delete(subscriberId);
+            return true;
+        }
+        return false;
+    }
+
+    /**
+     * Get subscriber count (for debugging/monitoring)
+     */
+    getSubscriberCount() {
+        return this.subscribers.size;
     }
 
     notifySubscribers(oldState, newState) {
@@ -150,14 +213,16 @@ class StateManager {
             eventBus.emit('event:error', { action: 'add', event, error: 'Failed to add event' });
             return null;
         }
-        // Create new array to avoid mutation before setState
-        const newEvents = [...this.state.events, addedEvent];
-        this.setState({ events: newEvents });
+        // Sync from Core to ensure consistency (single source of truth)
+        this._syncEventsFromCore();
         eventBus.emit('event:added', { event: addedEvent });
         return addedEvent;
     }
 
     updateEvent(eventId, updates) {
+        // First, ensure state is in sync with Core (recover from any prior desync)
+        this._syncEventsFromCore({ silent: true });
+
         const event = this.calendar.updateEvent(eventId, updates);
         if (!event) {
             console.error(`Failed to update event: ${eventId}`);
@@ -165,37 +230,39 @@ class StateManager {
             return null;
         }
 
-        const index = this.state.events.findIndex(e => e.id === eventId);
-        if (index === -1) {
-            console.error(`Event ${eventId} not found in state`);
-            eventBus.emit('event:error', { action: 'update', eventId, error: 'Event not found in state' });
-            return null;
-        }
-
-        // Create new array to avoid mutation before setState
-        const newEvents = [...this.state.events];
-        newEvents[index] = event;
-        this.setState({ events: newEvents });
+        // Sync from Core to ensure consistency (single source of truth)
+        this._syncEventsFromCore();
         eventBus.emit('event:updated', { event });
         return event;
     }
 
     deleteEvent(eventId) {
+        // First, ensure state is in sync with Core (recover from any prior desync)
+        this._syncEventsFromCore({ silent: true });
+
         const deleted = this.calendar.removeEvent(eventId);
         if (!deleted) {
             console.error(`Failed to delete event: ${eventId}`);
             eventBus.emit('event:error', { action: 'delete', eventId, error: 'Event not found' });
             return false;
         }
-        // Create new array to avoid mutation before setState
-        const newEvents = this.state.events.filter(e => e.id !== eventId);
-        this.setState({ events: newEvents });
+        // Sync from Core to ensure consistency (single source of truth)
+        this._syncEventsFromCore();
         eventBus.emit('event:deleted', { eventId });
         return true;
     }
 
     getEvents() {
-        return this.calendar.getEvents();
+        // Return from Core (source of truth)
+        return this.calendar.getEvents() || [];
+    }
+
+    /**
+     * Force sync state.events from Core calendar
+     * Use this if you've modified events directly on the Core calendar
+     */
+    syncEvents() {
+        return this._syncEventsFromCore();
     }
 
     getEventsForDate(date) {
@@ -332,6 +399,10 @@ class StateManager {
     // Destroy
     destroy() {
         this.subscribers.clear();
+        if (this._subscriberIds) {
+            this._subscriberIds.clear();
+            this._subscriberIds = null;
+        }
         this.state = null;
         this.calendar = null;
     }