@forcecalendar/interface 1.0.41 → 1.0.43

package/package.json

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

package/src/components/ForceCalendar.js

@@ -6,7 +6,6 @@
 
 import { BaseComponent } from '../core/BaseComponent.js';
 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';
@@ -20,6 +19,12 @@ import { DayViewRenderer } from '../renderers/DayViewRenderer.js';
 import './EventForm.js';
 
 export class ForceCalendar extends BaseComponent {
+  static RENDERERS = {
+    month: MonthViewRenderer,
+    week: WeekViewRenderer,
+    day: DayViewRenderer
+  };
+
   static get observedAttributes() {
     return ['view', 'date', 'locale', 'timezone', 'week-starts-on', 'height'];
   }
@@ -57,16 +62,18 @@ export class ForceCalendar extends BaseComponent {
     this._busUnsubscribers.forEach(unsub => unsub());
     this._busUnsubscribers = [];
 
+    const bus = this.stateManager.eventBus;
+
     // Navigation events
     this._busUnsubscribers.push(
-      eventBus.on('navigation:*', (data, event) => {
+      bus.on('navigation:*', (data, event) => {
         this.emit('calendar-navigate', { action: event.split(':')[1], ...data });
       })
     );
 
     // View change events
     this._busUnsubscribers.push(
-      eventBus.on('view:changed', data => {
+      bus.on('view:changed', data => {
         this.emit('calendar-view-change', data);
       })
     );
@@ -77,17 +84,17 @@ export class ForceCalendar extends BaseComponent {
 
     // Event management events (canonical + backward-compatible aliases)
     this._busUnsubscribers.push(
-      eventBus.on('event:add', data => {
+      bus.on('event:add', data => {
         forwardEventAction('add', data);
       })
     );
     this._busUnsubscribers.push(
-      eventBus.on('event:update', data => {
+      bus.on('event:update', data => {
         forwardEventAction('update', data);
       })
     );
     this._busUnsubscribers.push(
-      eventBus.on('event:remove', data => {
+      bus.on('event:remove', data => {
         forwardEventAction('remove', data);
       })
     );
@@ -97,24 +104,24 @@ export class ForceCalendar extends BaseComponent {
     // consumers that care about the distinction can subscribe to it without
     // receiving the generic event a second time.
     this._busUnsubscribers.push(
-      eventBus.on('event:added', data => {
+      bus.on('event:added', data => {
         this.emit('calendar-event-added', data);
       })
     );
     this._busUnsubscribers.push(
-      eventBus.on('event:updated', data => {
+      bus.on('event:updated', data => {
         this.emit('calendar-event-updated', data);
       })
     );
     this._busUnsubscribers.push(
-      eventBus.on('event:deleted', data => {
+      bus.on('event:deleted', data => {
         this.emit('calendar-event-deleted', data);
       })
     );
 
     // Date selection events
     this._busUnsubscribers.push(
-      eventBus.on('date:selected', data => {
+      bus.on('date:selected', data => {
         this.emit('calendar-date-select', data);
       })
     );
@@ -203,13 +210,7 @@ export class ForceCalendar extends BaseComponent {
 
     // Create new view using renderer classes
     try {
-      const renderers = {
-        month: MonthViewRenderer,
-        week: WeekViewRenderer,
-        day: DayViewRenderer
-      };
-
-      const RendererClass = renderers[this.currentView] || MonthViewRenderer;
+      const RendererClass = ForceCalendar.RENDERERS[this.currentView] || MonthViewRenderer;
       const viewRenderer = new RendererClass(container, this.stateManager);
       viewRenderer._viewType = this.currentView;
       this._currentViewInstance = viewRenderer;
@@ -746,13 +747,7 @@ export class ForceCalendar extends BaseComponent {
 
       // Create view renderer using the appropriate renderer class
       try {
-        const renderers = {
-          month: MonthViewRenderer,
-          week: WeekViewRenderer,
-          day: DayViewRenderer
-        };
-
-        const RendererClass = renderers[this.currentView] || MonthViewRenderer;
+        const RendererClass = ForceCalendar.RENDERERS[this.currentView] || MonthViewRenderer;
         const viewRenderer = new RendererClass(container, this.stateManager);
         viewRenderer._viewType = this.currentView;
         this._currentViewInstance = viewRenderer;
@@ -811,23 +806,6 @@ export class ForceCalendar extends BaseComponent {
     this._hasRendered = true;
   }
 
-  /**
-   * Create a view renderer instance for the given view type
-   * Uses pure JavaScript renderer classes for Salesforce Locker Service compatibility
-   * @param {string} viewName - 'month', 'week', or 'day'
-   * @returns {BaseViewRenderer} Renderer instance
-   */
-  _createViewRenderer(viewName) {
-    const renderers = {
-      month: MonthViewRenderer,
-      week: WeekViewRenderer,
-      day: DayViewRenderer
-    };
-
-    const RendererClass = renderers[viewName] || MonthViewRenderer;
-    return new RendererClass(null, null); // Container and stateManager set after creation
-  }
-
   handleNavigation(event) {
     const action = event.currentTarget.dataset.action;
     switch (action) {

package/src/core/StateManager.js

@@ -6,10 +6,14 @@
  */
 
 import { Calendar } from '@forcecalendar/core';
-import eventBus from './EventBus.js';
+import { EventBus } from './EventBus.js';
 
 class StateManager {
   constructor(config = {}) {
+    // Each StateManager gets its own EventBus to prevent cross-instance
+    // contamination when multiple calendars exist on the same page.
+    this.eventBus = new EventBus();
+
     // Initialize Core Calendar instance
     this.calendar = new Calendar({
       view: config.view || 'month',
@@ -162,7 +166,7 @@ class StateManager {
     const changedKeys = Object.keys(newState).filter(key => oldState[key] !== newState[key]);
 
     changedKeys.forEach(key => {
-      eventBus.emit(`state:${key}:changed`, {
+      this.eventBus.emit(`state:${key}:changed`, {
         oldValue: oldState[key],
         newValue: newState[key],
         state: newState
@@ -170,7 +174,7 @@ class StateManager {
     });
 
     if (changedKeys.length > 0) {
-      eventBus.emit('state:changed', { oldState, newState, changedKeys });
+      this.eventBus.emit('state:changed', { oldState, newState, changedKeys });
     }
   }
 
@@ -178,7 +182,7 @@ class StateManager {
   setView(view) {
     this.calendar.setView(view);
     this.setState({ view });
-    eventBus.emit('view:changed', { view });
+    this.eventBus.emit('view:changed', { view });
   }
 
   getView() {
@@ -188,7 +192,7 @@ class StateManager {
   setDate(date) {
     this.calendar.goToDate(date);
     this.setState({ currentDate: this.calendar.getCurrentDate() });
-    eventBus.emit('date:changed', { date: this.state.currentDate });
+    this.eventBus.emit('date:changed', { date: this.state.currentDate });
   }
 
   getCurrentDate() {
@@ -199,25 +203,25 @@ class StateManager {
   next() {
     this.calendar.next();
     this.setState({ currentDate: this.calendar.getCurrentDate() });
-    eventBus.emit('navigation:next', { date: this.state.currentDate });
+    this.eventBus.emit('navigation:next', { date: this.state.currentDate });
   }
 
   previous() {
     this.calendar.previous();
     this.setState({ currentDate: this.calendar.getCurrentDate() });
-    eventBus.emit('navigation:previous', { date: this.state.currentDate });
+    this.eventBus.emit('navigation:previous', { date: this.state.currentDate });
   }
 
   today() {
     this.calendar.today();
     this.setState({ currentDate: this.calendar.getCurrentDate() });
-    eventBus.emit('navigation:today', { date: this.state.currentDate });
+    this.eventBus.emit('navigation:today', { date: this.state.currentDate });
   }
 
   goToDate(date) {
     this.calendar.goToDate(date);
     this.setState({ currentDate: this.calendar.getCurrentDate() });
-    eventBus.emit('navigation:goto', { date: this.state.currentDate });
+    this.eventBus.emit('navigation:goto', { date: this.state.currentDate });
   }
 
   // Event management
@@ -225,13 +229,13 @@ class StateManager {
     const addedEvent = this.calendar.addEvent(event);
     if (!addedEvent) {
       console.error('Failed to add event to calendar');
-      eventBus.emit('event:error', { action: 'add', event, error: 'Failed to add event' });
+      this.eventBus.emit('event:error', { action: 'add', event, error: 'Failed to add event' });
       return null;
     }
     // Sync from Core to ensure consistency (single source of truth)
     this._syncEventsFromCore();
-    eventBus.emit('event:add', { event: addedEvent });
-    eventBus.emit('event:added', { event: addedEvent });
+    this.eventBus.emit('event:add', { event: addedEvent });
+    this.eventBus.emit('event:added', { event: addedEvent });
     return addedEvent;
   }
 
@@ -242,7 +246,7 @@ class StateManager {
     const event = this.calendar.updateEvent(eventId, updates);
     if (!event) {
       console.error(`Failed to update event: ${eventId}`);
-      eventBus.emit('event:error', {
+      this.eventBus.emit('event:error', {
         action: 'update',
         eventId,
         updates,
@@ -254,8 +258,8 @@ class StateManager {
     // Force sync from Core — IDs are unchanged after an update so the
     // ID-only guard in _eventsMatch would otherwise skip the state update
     this._syncEventsFromCore({ force: true });
-    eventBus.emit('event:update', { event });
-    eventBus.emit('event:updated', { event });
+    this.eventBus.emit('event:update', { event });
+    this.eventBus.emit('event:updated', { event });
     return event;
   }
 
@@ -266,13 +270,13 @@ class StateManager {
     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' });
+      this.eventBus.emit('event:error', { action: 'delete', eventId, error: 'Event not found' });
       return false;
     }
     // Sync from Core to ensure consistency (single source of truth)
     this._syncEventsFromCore();
-    eventBus.emit('event:remove', { eventId });
-    eventBus.emit('event:deleted', { eventId });
+    this.eventBus.emit('event:remove', { eventId });
+    this.eventBus.emit('event:deleted', { eventId });
     return true;
   }
 
@@ -350,7 +354,7 @@ class StateManager {
   // Selection management
   selectEvent(event) {
     this.setState({ selectedEvent: event });
-    eventBus.emit('event:selected', { event });
+    this.eventBus.emit('event:selected', { event });
   }
 
   selectEventById(eventId) {
@@ -362,17 +366,17 @@ class StateManager {
 
   deselectEvent() {
     this.setState({ selectedEvent: null });
-    eventBus.emit('event:deselected', {});
+    this.eventBus.emit('event:deselected', {});
   }
 
   selectDate(date) {
     this.setState({ selectedDate: date });
-    eventBus.emit('date:selected', { date });
+    this.eventBus.emit('date:selected', { date });
   }
 
   deselectDate() {
     this.setState({ selectedDate: null });
-    eventBus.emit('date:deselected', {});
+    this.eventBus.emit('date:deselected', {});
   }
 
   // Utility methods
@@ -401,7 +405,7 @@ class StateManager {
   setError(error) {
     this.setState({ error });
     if (error) {
-      eventBus.emit('error', { error });
+      this.eventBus.emit('error', { error });
     }
   }