@adcops/autocore-react 3.0.39 → 3.0.40

package/src/core/EventEmitterContext.tsx

@@ -2,14 +2,21 @@
  * 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-08-30 06:54:17
  * Modified By: ADC
  * -----
- * 
+ *
  */
 
-
-import React, { createContext, ReactNode, useState, useMemo, useCallback } from 'react';
+import React, {
+  createContext,
+  ReactNode,
+  useState,
+  useMemo,
+  useCallback,
+  useRef,
+  useEffect,
+} from "react";
 import { createHub, Hub } from "../hub";
 import { CommandMessageResult } from "../hub/CommandMessage";
 
@@ -19,26 +26,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 +53,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,64 +90,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;
 
 /**
@@ -153,7 +159,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 +167,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 +193,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 +225,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 +256,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 +312,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 +333,120 @@ 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(), []);
+
+  // <-- New: the source of truth for subscriptions lives in a ref
+  const subsRef = useRef<Record<string, Subscription[]>>({});
+
+  // Keep the ref in sync for debugging / external reads
+  useEffect(() => {
+    subsRef.current = state.subscriptions;
+  }, [state.subscriptions]);
+
+  const dispatch = useCallback((action: Action) => {
+    const { topic, payload } = action;
+
+    // Read once, outside setState, so it can't be double-invoked by StrictMode
+    const listeners = subsRef.current[topic]?.slice() ?? [];
+    for (const sub of listeners) {
+      try {
+        sub.callback(payload);
+      } catch (e) {
+        console.error("[EventBus] listener error", e);
+      }
+    }
+
+    // Optional: keep last payload in state (pure)
+    setState((prev) => ({ ...prev, eventData: payload }));
+  }, []);
+
+  const subscribe = useCallback(
+    (topic: string, callback: React.Dispatch<any>): number => {
+      const id = ++globalSubscriptionId;
+
+      // Mutate ref
+      const prev = subsRef.current[topic] ?? [];
+      const next = [...prev, { id, callback }];
+      subsRef.current[topic] = next;
+
+      // Reflect in state (for debugging/inspection)
+      setState((prevState) => ({
+        ...prevState,
+        subscriptions: { ...prevState.subscriptions, [topic]: next },
+        nextSubscriptionId: globalSubscriptionId + 1,
+      }));
+
+      return id;
+    },
+    []
+  );
+
+  const unsubscribe = useCallback((subscriptionId: number) => {
+    const map = subsRef.current;
+    for (const t of Object.keys(map)) {
+      const next = map[t].filter((s) => s.id !== subscriptionId);
+      if (next.length) map[t] = next;
+      else delete map[t];
+    }
+
+    setState((prev) => ({ ...prev, subscriptions: { ...map } }));
+  }, []);
+
+  // (Nice-to-have) 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 = {};
+    });
+  }
+
+//   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: (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>
+  );
 };