@adcops/autocore-react 3.0.39 → 3.1.1

package/src/core/EventEmitterContext.tsx

@@ -2,16 +2,316 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-17 11:45:10
  * -----
- * Last Modified: 2024-04-25 15:24:53
+ * Last Modified: 2025-09-06 14:08:30
  * Modified By: ADC
  * -----
+ *
+ */
+
+/**
+ * @fileoverview EventEmitterContext - Global Event Bus for AutoCore React Applications
+ * 
+ * The EventEmitterContext provides a comprehensive event-driven communication system for React applications,
+ * enabling seamless interaction between components and backend services. It serves as the foundational layer
+ * for AutoCore's real-time data flow and component communication architecture.
+ * 
+ * ## Core Features
+ * 
+ * - **Global Event Bus**: Publish and subscribe to events across all components
+ * - **Backend Integration**: Direct communication with AutoCore server via Hub abstraction
+ * - **Type-Safe Subscriptions**: Strongly-typed event handling with automatic cleanup
+ * - **Connection Management**: Automatic reconnection and state synchronization
+ * - **Development Tools**: Built-in debugging and subscription introspection
+ * 
+ * ## Architecture
+ * 
+ * The system consists of three main components:
+ * 1. **EventEmitterProvider**: React context provider that manages global state
+ * 2. **Hub**: Abstraction layer for backend communication (WebSocket, HTTP, etc.)
+ * 3. **Subscription Manager**: Handles event routing and lifecycle management
+ * 
+ * ## Basic Usage
+ * 
+ * ### 1. Application Setup
+ * 
+ * Wrap your entire application with the EventEmitterProvider:
+ * 
+ * ```tsx
+ * // App.tsx
+ * import React from 'react';
+ * import { EventEmitterProvider } from '@adcops/autocore-react/core/EventEmitterContext';
+ * import { PrimeReactProvider } from 'primereact/api';
+ * import { MainView } from './MainView';
+ * 
+ * export default function App() {
+ *   return (
+ *     <EventEmitterProvider>
+ *       <PrimeReactProvider>
+ *         <MainView />
+ *       </PrimeReactProvider>
+ *     </EventEmitterProvider>
+ *   );
+ * }
+ * ```
+ * 
+ * ### 2. Component Communication
+ * 
+ * Use the context for inter-component communication:
+ * 
+ * ```tsx
+ * // PublisherComponent.tsx
+ * import React, { useContext } from 'react';
+ * import { EventEmitterContext } from '@adcops/autocore-react/core/EventEmitterContext';
+ * import { Button } from 'primereact/button';
+ * 
+ * export const PublisherComponent: React.FC = () => {
+ *   const { dispatch } = useContext(EventEmitterContext);
+ * 
+ *   const handleButtonClick = () => {
+ *     dispatch({
+ *       topic: 'user-action/button-clicked',
+ *       payload: { timestamp: Date.now(), buttonId: 'main-action' }
+ *     });
+ *   };
+ * 
+ *   return <Button label="Trigger Event" onClick={handleButtonClick} />;
+ * };
+ * 
+ * // SubscriberComponent.tsx
+ * import React, { useContext, useEffect, useState } from 'react';
+ * import { EventEmitterContext } from '@adcops/autocore-react/core/EventEmitterContext';
+ * 
+ * export const SubscriberComponent: React.FC = () => {
+ *   const { subscribe, unsubscribe } = useContext(EventEmitterContext);
+ *   const [lastAction, setLastAction] = useState<any>(null);
+ * 
+ *   useEffect(() => {
+ *     const subscriptionId = subscribe('user-action/button-clicked', (payload) => {
+ *       setLastAction(payload);
+ *       console.log('Button clicked at:', payload.timestamp);
+ *     });
+ * 
+ *     return () => unsubscribe(subscriptionId);
+ *   }, [subscribe, unsubscribe]);
+ * 
+ *   return (
+ *     <div>
+ *       {lastAction && (
+ *         <p>Last action: {new Date(lastAction.timestamp).toLocaleTimeString()}</p>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
+ * 
+ * ### 3. Backend Integration
+ * 
+ * Communicate with AutoCore server through the integrated Hub:
+ * 
+ * ```tsx
+ * // ControlPanel.tsx
+ * import React, { useContext, useEffect, useState } from 'react';
+ * import { EventEmitterContext } from '@adcops/autocore-react/core/EventEmitterContext';
+ * import { Button } from 'primereact/button';
+ * import { InputNumber } from 'primereact/inputnumber';
+ * 
+ * export const ControlPanel: React.FC = () => {
+ *   const { invoke, subscribe, unsubscribe, isConnected } = useContext(EventEmitterContext);
+ *   const [motorSpeed, setMotorSpeed] = useState<number>(0);
+ *   const [targetSpeed, setTargetSpeed] = useState<number>(100);
+ *   const [connected, setConnected] = useState<boolean>(false);
+ * 
+ *   // Monitor connection status
+ *   useEffect(() => {
+ *     setConnected(isConnected());
+ *     
+ *     const connectionSub = subscribe('HUB/connected', () => setConnected(true));
+ *     const disconnectionSub = subscribe('HUB/disconnected', () => setConnected(false));
+ * 
+ *     return () => {
+ *       unsubscribe(connectionSub);
+ *       unsubscribe(disconnectionSub);
+ *     };
+ *   }, [subscribe, unsubscribe, isConnected]);
  * 
+ *   // Subscribe to real-time motor speed updates
+ *   useEffect(() => {
+ *     const speedSub = subscribe('ADS/MAIN.motor.speed', (data) => {
+ *       setMotorSpeed(data.value);
+ *     });
+ * 
+ *     return () => unsubscribe(speedSub);
+ *   }, [subscribe, unsubscribe]);
+ * 
+ *   // Send commands to backend
+ *   const handleSpeedChange = async () => {
+ *     try {
+ *       const result = await invoke('ADS', 'write_value', {
+ *         symbol_name: 'MAIN.motor.setpoint',
+ *         value: targetSpeed
+ *       });
+ *       
+ *       if (!result.success) {
+ *         console.error('Failed to set motor speed:', result.error_message);
+ *       }
+ *     } catch (error) {
+ *       console.error('Communication error:', error);
+ *     }
+ *   };
+ * 
+ *   const handleEmergencyStop = async () => {
+ *     try {
+ *       await invoke('ADS', 'emergency_stop', {});
+ *     } catch (error) {
+ *       console.error('Emergency stop failed:', error);
+ *     }
+ *   };
+ * 
+ *   return (
+ *     <div className="control-panel">
+ *       <div className="status">
+ *         Connection: {connected ? '🟢 Connected' : '🔴 Disconnected'}
+ *       </div>
+ *       
+ *       <div className="motor-control">
+ *         <p>Current Speed: {motorSpeed} RPM</p>
+ *         
+ *         <InputNumber
+ *           value={targetSpeed}
+ *           onValueChange={(e) => setTargetSpeed(e.value || 0)}
+ *           min={0}
+ *           max={1000}
+ *           suffix=" RPM"
+ *         />
+ *         
+ *         <Button
+ *           label="Set Speed"
+ *           onClick={handleSpeedChange}
+ *           disabled={!connected}
+ *         />
+ *         
+ *         <Button
+ *           label="Emergency Stop"
+ *           onClick={handleEmergencyStop}
+ *           severity="danger"
+ *           disabled={!connected}
+ *         />
+ *       </div>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * 
+ * ### 4. Advanced Pattern: State Management Hook
+ * 
+ * Create reusable hooks for common patterns:
+ * 
+ * ```tsx
+ * // hooks/useRealtimeValue.ts
+ * import { useContext, useEffect, useState } from 'react';
+ * import { EventEmitterContext } from '@adcops/autocore-react/core/EventEmitterContext';
+ * 
+ * export function useRealtimeValue<T>(topic: string, initialValue?: T) {
+ *   const { subscribe, unsubscribe } = useContext(EventEmitterContext);
+ *   const [value, setValue] = useState<T | undefined>(initialValue);
+ *   const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
+ * 
+ *   useEffect(() => {
+ *     const subscriptionId = subscribe(topic, (data) => {
+ *       setValue(data.value);
+ *       setLastUpdate(new Date());
+ *     });
+ * 
+ *     return () => unsubscribe(subscriptionId);
+ *   }, [topic, subscribe, unsubscribe]);
+ * 
+ *   return { value, lastUpdate };
+ * }
+ * 
+ * // Usage in component
+ * export const SensorDisplay: React.FC = () => {
+ *   const { value: temperature } = useRealtimeValue<number>('ADS/sensors.temperature');
+ *   const { value: pressure } = useRealtimeValue<number>('ADS/sensors.pressure');
+ * 
+ *   return (
+ *     <div>
+ *       <p>Temperature: {temperature?.toFixed(1)}°C</p>
+ *       <p>Pressure: {pressure?.toFixed(2)} bar</p>
+ *     </div>
+ *   );
+ * };
+ * ```
+ * 
+ * ## Integration with AutoCore Systems
+ * 
+ * The EventEmitterContext is designed to work seamlessly with other AutoCore React components:
+ * 
+ * ```tsx
+ * // Complete AutoCore application setup
+ * import React from 'react';
+ * import { EventEmitterProvider } from '@adcops/autocore-react/core/EventEmitterContext';
+ * import { AutoCoreTagProvider } from '@adcops/autocore-react/core/AutoCoreTagContext';
+ * import { PrimeReactProvider } from 'primereact/api';
+ * import { tagSpec } from './config/tags';
+ * import { MainInterface } from './components/MainInterface';
+ * 
+ * export default function App() {
+ *   return (
+ *     <EventEmitterProvider>
+ *       <AutoCoreTagProvider tags={tagSpec} eagerRead>
+ *         <PrimeReactProvider>
+ *           <MainInterface />
+ *         </PrimeReactProvider>
+ *       </AutoCoreTagProvider>
+ *     </EventEmitterProvider>
+ *   );
+ * }
+ * ```
+ * 
+ * ## Best Practices
+ * 
+ * 1. **Always Cleanup Subscriptions**: Use the cleanup function returned by useEffect
+ * 2. **Use Meaningful Topic Names**: Follow a hierarchical naming convention (e.g., 'domain/category/specific')
+ * 3. **Handle Connection States**: Always check connection status before invoking backend functions
+ * 4. **Error Handling**: Wrap invoke calls in try-catch blocks
+ * 5. **Type Safety**: Use TypeScript interfaces for payload structures
+ * 6. **Performance**: Avoid subscribing to high-frequency events in render-heavy components
+ * 
+ * ## Debugging
+ * 
+ * Use the built-in debugging features:
+ * 
+ * ```tsx
+ * const { getSubscriptions, state } = useContext(EventEmitterContext);
+ * 
+ * // View all subscriptions
+ * console.log('All subscriptions:', getSubscriptions());
+ * 
+ * // View subscriptions for specific topic
+ * console.log('Motor subscriptions:', getSubscriptions('ADS/MAIN.motor.speed'));
+ * 
+ * // View current state
+ * console.log('EventEmitter state:', state);
+ * ```
+ * 
+ * @module core/EventEmitterContext
+ * @version 3.0.41
+ * @author Automated Design Corp.
+ * @since 1.0.0
  */
 
+import React, {
+  createContext,
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
 
-import React, { createContext, ReactNode, useState, useMemo, useCallback } from 'react';
+import type {ReactNode} from "react";
 import { createHub, Hub } from "../hub";
-import { CommandMessageResult } from "../hub/CommandMessage";
+import type { CommandMessageResult } from "../hub/CommandMessage";
 
 export { Hub };
 
@@ -19,26 +319,25 @@ export { Hub };
  * Represents an event subsription.
  */
 export interface Subscription {
-    /** ID of the subscription used for unsubscription. */
-    id: number;
-    /** Callback function. */
-    callback: React.Dispatch<any>;
+  /** ID of the subscription used for unsubscription. */
+  id: number;
+  /** Callback function. */
+  callback: React.Dispatch<any>;
 }
 
-
 /**
  * Represents the payload data associated with an event.
  */
 export interface State {
-    /**
-     * The optional data payload of the event.
-     */
-    eventData?: any;
-    /** Callback subscription. A list of callback subscriptions matched to a topic. */
-    subscriptions: Record<string, Subscription[]>;
-
-    /** Tracks the next subscription ID that will be assigned. */
-    nextSubscriptionId: number;
+  /**
+   * The optional data payload of the event.
+   */
+  eventData?: any;
+  /** Callback subscription. A list of callback subscriptions matched to a topic. */
+  subscriptions: Record<string, Subscription[]>;
+
+  /** Tracks the next subscription ID that will be assigned. */
+  nextSubscriptionId: number;
 }
 
 /**
@@ -47,37 +346,35 @@ export interface State {
  * a value of any type.
  */
 export interface Action {
-
-    /**
-     * The topic or identifier of the event.
-     */
-    topic: string;
-
-    /**
-     * The optional data payload associated with the event.
-     */
-    payload?: any;
+  /**
+   * The topic or identifier of the event.
+   */
+  topic: string;
+
+  /**
+   * The optional data payload associated with the event.
+   */
+  payload?: any;
 }
 
-/** 
+/**
  * Type declaration for the EventEmitter dispatch function, which
  * publishes an Action globally throughout the EventEmitterContext.
  */
 export type EmitterDispatchFunction = (action: Action) => void;
 
-/** 
+/**
  * Type declaration for the EventEmitter dispatch function, which
  * receives an Action on a specific topic broadcast through the EventEmitterContext.
  */
 export type EmitterSubscribeFunction = (action: Action) => void;
 
-/** 
+/**
  * Type declaration for the EventEmitter unsubscribe function, which
  * receives an Action on a specific topic broadcast through the EventEmitterContext.
  */
 export type EmitterUnsubscribeFunction = (action: Action) => void;
 
-
 /**
  * Defines the context for an event emitter used throughout a front-end application to manage and dispatch events.
  * This interface includes methods for managing the application's state, handling global actions, communicating with the back end,
@@ -86,66 +383,66 @@ export type EmitterUnsubscribeFunction = (action: Action) => void;
  * components and the back end, as well as among components themselves.
  */
 export interface EventEmitterContextType {
-    /**
-     * The current state of the event emitter, containing the latest event data.
-     */
-    state: State;
-
-    /**
-     * A function to dispatch actions globally throughout the front-end, 
-     * triggering state updates and events.
-     *
-     * @param action The action to dispatch, containing topic and optional payload.
-     */
-    dispatch: (action: Action) => void;
-
-
-    /** 
-     * Invoke/send a message to the back end. 
-     * This does NOT get published to the front end.
-     */
-    invoke(domain: string, fname: string, payload?: object): Promise<CommandMessageResult>;
-
-    /**
-     * Subscribe to events identified by the topic.
-     * @param topic The subscription topic.
-     * @param callback The callback to signal.
-     * @returns number Subscription ID used to unsubscribe later.
-     */
-    subscribe: (topic: string, callback: React.Dispatch<any>) => number;
-
-    /**
-     * Unsubscribe to events.
-     * @param subscriptionId The id of the subscription returned by the subscribe method.
-     * @returns 
-     */
-    unsubscribe: (subscriptionId: number) => void;
-
-
-    /**
-     * Global hub for publishing and receiving events throughout the interface, and for exchanging
-     * data with the backend.
-     */
-    hub: Hub | null;
-
-    /**
-     * Retrieves the current subscriptions. Used for debugging purposes.
-     * @param topic Optional. The topic to retrieve subscriptions for. If omitted, returns all subscriptions.
-     * @returns An object containing the current subscriptions, optionally filtered by topic.
-     */
-    getSubscriptions: (topic?: string) => Record<string, Subscription[]> | Subscription[];
-
-
-    /**
-     * Returns true if the Hub in use is connected to its source.
-     * @returns boolean
-     */
-    isConnected: () => boolean;
+  /**
+   * The current state of the event emitter, containing the latest event data.
+   */
+  state: State;
+
+  /**
+   * A function to dispatch actions globally throughout the front-end,
+   * triggering state updates and events.
+   *
+   * @param action The action to dispatch, containing topic and optional payload.
+   */
+  dispatch: (action: Action) => void;
+
+  /**
+   * Invoke/send a message to the back end.
+   * This does NOT get published to the front end.
+   */
+  invoke(
+    domain: string,
+    fname: string,
+    payload?: object
+  ): Promise<CommandMessageResult>;
+
+  /**
+   * Subscribe to events identified by the topic.
+   * @param topic The subscription topic.
+   * @param callback The callback to signal.
+   * @returns number Subscription ID used to unsubscribe later.
+   */
+  subscribe: (topic: string, callback: React.Dispatch<any>) => number;
+
+  /**
+   * Unsubscribe to events.
+   * @param subscriptionId The id of the subscription returned by the subscribe method.
+   * @returns
+   */
+  unsubscribe: (subscriptionId: number) => void;
+
+  /**
+   * Global hub for publishing and receiving events throughout the interface, and for exchanging
+   * data with the backend.
+   */
+  hub: Hub | null;
+
+  /**
+   * Retrieves the current subscriptions. Used for debugging purposes.
+   * @param topic Optional. The topic to retrieve subscriptions for. If omitted, returns all subscriptions.
+   * @returns An object containing the current subscriptions, optionally filtered by topic.
+   */
+  getSubscriptions: (
+    topic?: string
+  ) => Record<string, Subscription[]> | Subscription[];
+
+  /**
+   * Returns true if the Hub in use is connected to its source.
+   * @returns boolean
+   */
+  isConnected: () => boolean;
 }
 
-
-let globalSubscriptionId = 1;
-
 /**
  * A global context for managing event emission and subscription.
  *
@@ -153,7 +450,7 @@ let globalSubscriptionId = 1;
  * in a React application. It serves as a global event bus that components can subscribe to or emit events, allowing for
  * a loosely coupled architecture. Additionally, it provides a mechanism for invoking backend functions and managing
  * subscriptions, making it easier to integrate React components with backend services.
- * 
+ *
  * The context includes several key functionalities:
  * - `state`: Maintains the current state of subscriptions and their identifiers.
  * - `dispatch`: Allows components to emit events with specific topics and payloads, which can be listened to by other components.
@@ -161,21 +458,21 @@ let globalSubscriptionId = 1;
  * - `unsubscribe`: Provides a way for components to stop listening to events, helping prevent memory leaks and unnecessary updates.
  * - `invoke`: Facilitates calling backend functions with specific arguments and handling their responses asynchronously.
  * - `getSubscriptions`: Offers insight into current active subscriptions, useful for debugging purposes.
- * 
+ *
  * This context is essential for applications that require a high degree of inter-component communication or need to
  * interact with a backend efficiently.
- * 
+ *
  * For more information, see [Additional Documentation](../additional-docs/GlobalEventEmitter.md).
- * 
+ *
  * ## Usage
- * 
+ *
  * The entire application should be wrapped in the EventEmitterProvider.
- * 
+ *
  * App.tsx
  * ```
  * import { EventEmitterProvider } from "@adcops/autocore-react/core/EventEmitterContext.js";
  * function App() {
- * 
+ *
  *      return(
  *          <EventEmitterProvider>
  *              <PrimeReactProvider>
@@ -187,31 +484,31 @@ let globalSubscriptionId = 1;
  *              </PrimeReactProvider>
  *          </EventEmitterProvider>
  *      );
- * 
+ *
  * }
- * 
+ *
  * ```
- * 
+ *
  * ### Catching and receiving events
  * The EventEmitterContext creates an appropriate instance of the hub, which is derived from HubBase.
  * That hub can be used to publish and subscribe to
  * topics globally in the front-end, regardless of being connected to any backend.
  * Usage within a component is simple.
- * 
+ *
  * ```
  * const {dispatch, subscribe, unsubscribe} = useContext(EventEmitterContext);
  * const [controlPower, setControlPower] = useState(false);
  * useEffect(() => {
  *      const unsubscribeControlPower = subscribe('value-simulator-bBit1', (value) => {
  *          setControlPower(value);
- *      });  
+ *      });
  *
  *
  *      return () => {
  *           unsubscribe(unsubscribeControlPower);
  *      }
  * }, [] );
- * 
+ *
  * const onPbPressed = () => {
  *      let count = 1;
  *      dispatch({
@@ -219,30 +516,30 @@ let globalSubscriptionId = 1;
  *          payload: count
  *      });
  * }
- * 
- * ``` 
+ *
+ * ```
  * The hub should also be used for invoking events in the backend.
  * This example will call the function "update_count" in the backend, passing
  * the expected argument "count". Details of the interaction between the Hub and
  * the backend will be handled by the appropriate HubBase sub-class, and should
  * be transparent to the front end.
- * 
+ *
  * ```
  * const {invoke} = useContext(EventEmitterContext);
  * const incrementCount = () => {
  *    count += 1;
- *    invoke('update_count', {"count": count});        
+ *    invoke('update_count', {"count": count});
  * };
- * 
+ *
  * Subscribing to a topic is simple. The type of value received is specific
  * to the topic.
- * 
+ *
  * Example: Listen to an event 'xarm-position':
  * ```
  * const {subscribe, unsubscribe} = useContext(EventEmitterContext);
  * useEffect(() => {
  *         const unsubscripeMp = subscribe('xarm-position', (value) => {
- *            // The publisher sent a JSON object of 3D position values. 
+ *            // The publisher sent a JSON object of 3D position values.
  *            setX(value.x);
  *            setY(value.y);
  *            setZ(value.z);
@@ -250,49 +547,55 @@ let globalSubscriptionId = 1;
  *            setB(value.yaw);
  *            setC(value.pitch);
  *        });
- * 
+ *
  *    return () => {
  *        unsubscribe(unsubscripeMp);
  *    }
- * 
+ *
  * }, [] );
  *
  * ```
- * 
+ *
  * For applications that need to access the instance of the hub, get the current instance
  * from the EventEmitterContext:
- * 
+ *
  * ```
  * const {hub} = useContext(EventEmitterContext);
  *  * ```
- * 
- * 
+ *
+ *
  */
 export const EventEmitterContext = createContext<EventEmitterContextType>({
-    state: { subscriptions: {}, nextSubscriptionId: 1 },
-    dispatch: () => { },
-    subscribe: () => { return 0; }, // Placeholder for subscription logic
-    invoke: async (domain: string, fname: string, payload?: object) => {
-        domain;
-        fname;
-        payload;
-        let ret: CommandMessageResult = {
-            data: {},
-            success: false,
-            error_message: ""
-        };
-        // Placeholder for invoke logic
-        // Implement the logic to send a message to the backend and return a promise
-        return Promise.resolve(ret); // Example placeholder, replace with actual implementation
-    },
-    unsubscribe: (subscriptionId: number) => { subscriptionId; }, // Placeholder for unsubscription logic    
-    hub: null,
-    getSubscriptions: () => { return []; },
-    isConnected: () => { return false }
-
+  state: { subscriptions: {}, nextSubscriptionId: 1 },
+  dispatch: () => {},
+  subscribe: () => {
+    return 0;
+  }, // Placeholder for subscription logic
+  invoke: async (domain: string, fname: string, payload?: object) => {
+    domain;
+    fname;
+    payload;
+    let ret: CommandMessageResult = {
+      data: {},
+      success: false,
+      error_message: "",
+    };
+    // Placeholder for invoke logic
+    // Implement the logic to send a message to the backend and return a promise
+    return Promise.resolve(ret); // Example placeholder, replace with actual implementation
+  },
+  unsubscribe: (subscriptionId: number) => {
+    subscriptionId;
+  }, // Placeholder for unsubscription logic
+  hub: null,
+  getSubscriptions: () => {
+    return [];
+  },
+  isConnected: () => {
+    return false;
+  },
 });
 
-
 /**
  * A React component that provides the EventEmitterContext to its children.
  *
@@ -300,16 +603,16 @@ export const EventEmitterContext = createContext<EventEmitterContextType>({
  * with the event emitter.
  *
  * @param children The child components to be wrapped in the context.
- * 
+ *
  * ## Usage
- * 
+ *
  * The entire application should be wrapped in the EventEmitterProvider.
- * 
+ *
  * App.tsx
  * ```
  * import { EventEmitterProvider } from "@adcops/autocore-react/core/EventEmitterContext.js";
  * function App() {
- * 
+ *
  *      return(
  *          <EventEmitterProvider>
  *              <PrimeReactProvider>
@@ -321,89 +624,143 @@ export const EventEmitterContext = createContext<EventEmitterContextType>({
  *              </PrimeReactProvider>
  *          </EventEmitterProvider>
  *      );
- * 
+ *
  * }
- * 
- * ``` 
+ *
+ * ```
  */
-export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-    const [state, setState] = useState<State>({ subscriptions: {}, nextSubscriptionId: 1 });
-
-    // Memoize the hub instance so it's only created once
-    const hub = useMemo(() => createHub(), []);
-
-    const dispatch = useCallback((action: Action) => {
-        const { topic, payload } = action;
-
-        setState(prevState => {
-            const callbacks = prevState.subscriptions[topic] || [];
-            callbacks.forEach(sub => sub.callback(payload));
-            return { ...prevState, eventData: payload };
-        });
-
-    }, []);
-
-    const subscribe = useCallback((topic: string, callback: React.Dispatch<any>): number => {
-
-        globalSubscriptionId += 1;
-        const subscriptionId = globalSubscriptionId; // state.nextSubscriptionId;
-
-        setState(prevState => ({
-            ...prevState,
-            subscriptions: {
-                ...prevState.subscriptions,
-                [topic]: [...(prevState.subscriptions[topic] || []), { id: subscriptionId, callback }]
-            },
-            nextSubscriptionId: globalSubscriptionId + 1 // prevState.nextSubscriptionId + 1
-        }));
-
-        return subscriptionId;
-    }, []);
-
-
-    const unsubscribe = useCallback((subscriptionId: number) => {
-        setState(prevState => {
-            const newSubscriptions = { ...prevState.subscriptions };
-            Object.keys(newSubscriptions).forEach(topic => {
-                newSubscriptions[topic] = newSubscriptions[topic].filter(sub => sub.id !== subscriptionId);
-                if (newSubscriptions[topic].length === 0) {
-                    delete newSubscriptions[topic];
-                }
-            });
-            return { ...prevState, subscriptions: newSubscriptions };
-        });
-    }, []);
-
-
-    const getSubscriptions = useCallback((topic?: string): Record<string, Subscription[]> | Subscription[] => {
-        if (topic) {
-            // Return subscriptions for the provided topic, or an empty array if the topic doesn't exist
-            return state.subscriptions[topic] || [];
-        } else {
-            // Return all subscriptions
-            return state.subscriptions;
-        }
-    }, []);
-
-    // Provide the memoized hub instance in the context value
-    const contextValue = useMemo(() => ({
-        state,
-        dispatch,
-        subscribe,
-        unsubscribe,
-        invoke: hub.invoke,
-        hub,
-        getSubscriptions,
-        isConnected: hub.isConnected
-    }), [state, hub]);
-
-
-    hub.setContext(contextValue);
-
-    return (
-        <EventEmitterContext.Provider value={contextValue}>
-            {children}
-        </EventEmitterContext.Provider>
-    );
-
-};
+export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [state, setState] = useState<State>({
+    subscriptions: {},
+    nextSubscriptionId: 1,
+  });
+
+  // Memoize the hub instance so it's only created once
+  const hub = useMemo(() => createHub(), []);
+
+  // Use ref for subscription ID management (avoids global state issues)
+  const nextIdRef = useRef(1);
+
+  // Subscription storage - this is the single source of truth
+  const subsRef = useRef<Record<string, Subscription[]>>({});
+
+  // Sync state with ref for debugging/inspection purposes only
+  useEffect(() => {
+    setState(prev => ({
+      ...prev,
+      subscriptions: { ...subsRef.current },
+      nextSubscriptionId: nextIdRef.current
+    }));
+  }, []);
+
+  const dispatch = useCallback((action: Action) => {
+    const { topic, payload } = action;
+
+    // Read from ref (single source of truth) and create a defensive copy
+    const listeners = subsRef.current[topic]?.slice() ?? [];
+    
+    // Execute callbacks synchronously to avoid timing issues
+    for (const sub of listeners) {
+      try {
+        sub.callback(payload);
+      } catch (e) {
+        console.error("[EventBus] listener error", e);
+      }
+    }
+
+    // Update state for debugging/inspection (optional)
+    setState((prev) => ({ ...prev, eventData: payload }));
+  }, []);
+
+  const subscribe = useCallback(
+    (topic: string, callback: React.Dispatch<any>): number => {
+      const id = nextIdRef.current++;
+      
+      // Create new subscription entry
+      const newSub: Subscription = { id, callback };
+      
+      // Atomically update the ref with a complete new structure
+      const currentSubs = subsRef.current[topic] ?? [];
+      const newSubs = [...currentSubs, newSub];
+      
+      subsRef.current = {
+        ...subsRef.current,
+        [topic]: newSubs
+      };
+
+      // Update state for debugging/inspection
+      setState(prevState => ({
+        ...prevState,
+        subscriptions: { ...subsRef.current },
+        nextSubscriptionId: nextIdRef.current,
+      }));
+
+      return id;
+    },
+    []
+  );
+
+  const unsubscribe = useCallback((subscriptionId: number) => {
+    // Create a completely new structure to avoid mutation issues
+    const newSubscriptions: Record<string, Subscription[]> = {};
+    
+    for (const [topic, subs] of Object.entries(subsRef.current)) {
+      const filteredSubs = subs.filter(s => s.id !== subscriptionId);
+      if (filteredSubs.length > 0) {
+        newSubscriptions[topic] = filteredSubs;
+      }
+      // If no subscriptions left for this topic, don't include it
+    }
+    
+    // Atomically replace the entire structure
+    subsRef.current = newSubscriptions;
+
+    // Update state for debugging/inspection
+    setState(prev => ({ 
+      ...prev, 
+      subscriptions: { ...newSubscriptions }
+    }));
+  }, []);
+
+  // Clean up on unmount and handle HMR
+  useEffect(() => {
+    return () => {
+      subsRef.current = {};
+      nextIdRef.current = 1;
+    };
+  }, []);
+
+  // Handle HMR so listeners don't leak across hot updates
+  if (import.meta && (import.meta as any).hot) {
+    (import.meta as any).hot.dispose(() => {
+      subsRef.current = {};
+      nextIdRef.current = 1;
+    });
+  }
+
+  // Provide the memoized hub instance in the context value
+  const contextValue = useMemo(
+    () => ({
+      state,
+      dispatch,
+      subscribe,
+      unsubscribe,
+      invoke: hub.invoke,
+      hub,
+      getSubscriptions: (topic?: string) =>
+        topic ? subsRef.current[topic] ?? [] : subsRef.current,
+      isConnected: hub.isConnected,
+    }),
+    [state, hub, dispatch, subscribe, unsubscribe]
+  );
+
+  hub.setContext(contextValue);
+
+  return (
+    <EventEmitterContext.Provider value={contextValue}>
+      {children}
+    </EventEmitterContext.Provider>
+  );
+};