@forcecalendar/interface 1.0.14 → 1.0.16

package/package.json

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

package/src/components/ForceCalendar.js

@@ -9,6 +9,7 @@ import StateManager from '../core/StateManager.js';
 import eventBus from '../core/EventBus.js';
 import { StyleUtils } from '../utils/StyleUtils.js';
 import { DateUtils } from '../utils/DateUtils.js';
+import { DOMUtils } from '../utils/DOMUtils.js';
 
 // Import view components
 import { MonthView } from './views/MonthView.js';
@@ -38,6 +39,8 @@ export class ForceCalendar extends BaseComponent {
         super();
         this.stateManager = null;
         this.currentView = null;
+        this._hasRendered = false;  // Track if initial render is complete
+        this._cachedStyles = null;  // Cache styles to avoid recreation
     }
 
     initialize() {
@@ -82,13 +85,105 @@ export class ForceCalendar extends BaseComponent {
     }
 
     handleStateChange(newState, oldState) {
+        // If not yet rendered, do nothing (mount will handle initial render)
+        if (!this._hasRendered) {
+            return;
+        }
+
+        // Check what changed
+        const viewChanged = newState.view !== oldState?.view;
+        const dateChanged = newState.currentDate?.getTime() !== oldState?.currentDate?.getTime();
+        const eventsChanged = newState.events !== oldState?.events;
+        const loadingChanged = newState.loading !== oldState?.loading;
+        const errorChanged = newState.error !== oldState?.error;
+
+        // For loading/error state changes, do full re-render (rare)
+        if (loadingChanged || errorChanged) {
+            this.render();
+            return;
+        }
+
         // Update local view reference if needed
-        if (newState.view !== oldState?.view) {
+        if (viewChanged) {
             this.currentView = newState.view;
         }
 
-        // Re-render to update header title, active buttons, and child view
-        this.render();
+        // Targeted updates based on what changed
+        if (viewChanged) {
+            // View changed: update title, buttons, and switch view
+            this._updateTitle();
+            this._updateViewButtons();
+            this._switchView();
+        } else if (dateChanged) {
+            // Date changed: update title and re-render view
+            this._updateTitle();
+            this._updateViewContent();
+        } else if (eventsChanged) {
+            // Events changed: only re-render view content
+            this._updateViewContent();
+        }
+        // Selection changes are handled by the view internally, no action needed here
+    }
+
+    /**
+     * Update only the title text (no DOM recreation)
+     */
+    _updateTitle() {
+        const titleEl = this.$('.fc-title');
+        if (titleEl) {
+            const state = this.stateManager.getState();
+            titleEl.textContent = this.getTitle(state.currentDate, state.view);
+        }
+    }
+
+    /**
+     * Update view button active states (no DOM recreation)
+     */
+    _updateViewButtons() {
+        const state = this.stateManager.getState();
+        this.$$('[data-view]').forEach(button => {
+            const isActive = button.dataset.view === state.view;
+            button.classList.toggle('active', isActive);
+        });
+    }
+
+    /**
+     * Switch to a different view type
+     */
+    _switchView() {
+        const container = this.$('#calendar-view-container');
+        if (!container) return;
+
+        // Clean up previous view
+        if (this._currentViewInstance) {
+            if (this._currentViewInstance.cleanup) {
+                this._currentViewInstance.cleanup();
+            }
+        }
+
+        // Create new view
+        try {
+            const viewRenderer = this._createViewRenderer(this.currentView);
+            if (viewRenderer) {
+                viewRenderer._viewType = this.currentView;
+                this._currentViewInstance = viewRenderer;
+                viewRenderer.stateManager = this.stateManager;
+                viewRenderer.container = container;
+                viewRenderer.render();
+                // Note: No subscription - handleStateChange manages all view updates
+            }
+        } catch (err) {
+            console.error('[ForceCalendar] Error switching view:', err);
+        }
+    }
+
+    /**
+     * Re-render only the view content (not header)
+     */
+    _updateViewContent() {
+        if (this._currentViewInstance && this._currentViewInstance.render) {
+            this._currentViewInstance.render();
+        }
     }
 
     mount() {
@@ -501,7 +596,7 @@ export class ForceCalendar extends BaseComponent {
             return `
                 <div class="force-calendar">
                     <div class="fc-error">
-                        <p><strong>Error:</strong> ${error.message || 'An error occurred'}</p>
+                        <p><strong>Error:</strong> ${DOMUtils.escapeHTML(error.message || 'An error occurred')}</p>
                     </div>
                 </div>
             `;
@@ -570,13 +665,11 @@ export class ForceCalendar extends BaseComponent {
     afterRender() {
         // Manually instantiate and mount view component (bypasses Locker Service)
         const container = this.$('#calendar-view-container');
-        console.log('[ForceCalendar] afterRender - container:', !!container, 'stateManager:', !!this.stateManager, 'currentView:', this.currentView);
 
         // Only create view once per view type change
         if (container && this.stateManager && this.currentView) {
             // Check if container actually has content (render() clears shadow DOM)
             if (this._currentViewInstance && this._currentViewInstance._viewType === this.currentView && container.children.length > 0) {
-                console.log('[ForceCalendar] View already exists with content, skipping creation');
                 return;
             }
 
@@ -591,8 +684,6 @@ export class ForceCalendar extends BaseComponent {
                 }
             }
 
-            console.log('[ForceCalendar] Creating view for:', this.currentView);
-
             // Create a simple view renderer that doesn't use custom elements
             try {
                 const viewRenderer = this._createViewRenderer(this.currentView);
@@ -601,21 +692,9 @@ export class ForceCalendar extends BaseComponent {
                     this._currentViewInstance = viewRenderer;
                     viewRenderer.stateManager = this.stateManager;
                     viewRenderer.container = container;
-
-                    console.log('[ForceCalendar] Calling viewRenderer.render()');
                     viewRenderer.render();
-                    console.log('[ForceCalendar] viewRenderer.render() completed');
-
-                    // Subscribe to state changes (store unsubscribe function)
-                    this._viewUnsubscribe = this.stateManager.subscribe((newState, oldState) => {
-                        // Only re-render on data changes, not view changes
-                        if (newState.events !== oldState?.events ||
-                            newState.currentDate !== oldState?.currentDate) {
-                            if (viewRenderer && viewRenderer.render) {
-                                viewRenderer.render();
-                            }
-                        }
-                    });
+                    // Note: No subscription here - handleStateChange manages all view updates
+                    // via _updateViewContent(), _switchView(), or full re-render
                 }
             } catch (err) {
                 console.error('[ForceCalendar] Error creating/rendering view:', err);
@@ -663,6 +742,9 @@ export class ForceCalendar extends BaseComponent {
                 });
             });
         }
+
+        // Mark initial render as complete for targeted updates
+        this._hasRendered = true;
     }
 
     _createViewRenderer(viewName) {
@@ -677,6 +759,11 @@ export class ForceCalendar extends BaseComponent {
             _listeners: [],
             _scrolled: false,
 
+            _escapeHTML(str) {
+                if (str == null) return '';
+                return DOMUtils.escapeHTML(String(str));
+            },
+
             cleanup() {
                 this._listeners.forEach(({ element, event, handler }) => {
                     element.removeEventListener(event, handler);
@@ -758,8 +845,8 @@ export class ForceCalendar extends BaseComponent {
                                 <div class="fc-day-number" style="font-size: 13px; font-weight: 500; color: ${dayNumColor}; padding: 2px 4px; margin-bottom: 4px; ${todayStyle}">${day.dayOfMonth}</div>
                                 <div class="fc-day-events" style="display: flex; flex-direction: column; gap: 2px;">
                                     ${visibleEvents.map(evt => `
-                                        <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
-                                            ${evt.title}
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 11px; padding: 2px 6px; border-radius: 3px; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;">
+                                            ${this._escapeHTML(evt.title)}
                                         </div>
                                     `).join('')}
                                     ${moreCount > 0 ? `<div class="fc-more-events" style="font-size: 10px; color: #6b7280; padding: 2px 4px; font-weight: 500;">+${moreCount} more</div>` : ''}
@@ -818,8 +905,8 @@ export class ForceCalendar extends BaseComponent {
                             ${processedDays.map(day => `
                                 <div style="border-right: 1px solid #e5e7eb; padding: 4px; display: flex; flex-direction: column; gap: 2px;">
                                     ${day.allDayEvents.map(evt => `
-                                        <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-                                            ${evt.title}
+                                        <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+                                            ${this._escapeHTML(evt.title)}
                                         </div>
                                     `).join('')}
                                 </div>
@@ -919,8 +1006,8 @@ export class ForceCalendar extends BaseComponent {
                             <div style="font-size: 9px; color: #6b7280; display: flex; align-items: center; justify-content: center; border-right: 1px solid #e5e7eb; text-transform: uppercase; font-weight: 700;">All day</div>
                             <div style="padding: 6px 12px; display: flex; flex-wrap: wrap; gap: 4px;">
                                 ${allDayEvents.map(evt => `
-                                    <div class="fc-event" data-event-id="${evt.id}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
-                                        ${evt.title}
+                                    <div class="fc-event" data-event-id="${this._escapeHTML(evt.id)}" style="background-color: ${evt.backgroundColor || '#2563eb'}; font-size: 12px; padding: 4px 8px; border-radius: 4px; color: white; cursor: pointer; font-weight: 500;">
+                                        ${this._escapeHTML(evt.title)}
                                     </div>
                                 `).join('')}
                             </div>
@@ -965,12 +1052,12 @@ export class ForceCalendar extends BaseComponent {
                 const color = event.backgroundColor || '#2563eb';
 
                 return `
-                    <div class="fc-event" data-event-id="${event.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(event.id)}"
                          style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px; left: 2px; right: 2px;
                                 background-color: ${color}; border-radius: 4px; padding: 4px 8px; font-size: 11px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${event.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(event.title)}</div>
                         <div style="font-size: 10px; opacity: 0.9;">${this._formatTime(start)}</div>
                     </div>
                 `;
@@ -984,12 +1071,12 @@ export class ForceCalendar extends BaseComponent {
                 const color = event.backgroundColor || '#2563eb';
 
                 return `
-                    <div class="fc-event" data-event-id="${event.id}"
+                    <div class="fc-event" data-event-id="${this._escapeHTML(event.id)}"
                          style="position: absolute; top: ${startMinutes}px; height: ${durationMinutes}px; left: 12px; right: 24px;
                                 background-color: ${color}; border-radius: 6px; padding: 8px 12px; font-size: 13px;
                                 font-weight: 500; color: white; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                                 cursor: pointer; z-index: 5;">
-                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${event.title}</div>
+                        <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${this._escapeHTML(event.title)}</div>
                         <div style="font-size: 11px; opacity: 0.9;">${this._formatTime(start)} - ${this._formatTime(end)}</div>
                     </div>
                 `;

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
@@ -150,14 +176,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 +193,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) {