ota-hub-reactjs 0.0.16 → 0.0.18

package/dist/base/device-whisperer.d.ts

@@ -13,6 +13,10 @@ export type DeviceConnectionState = {
     uuid: string;
     deviceMac?: string;
     name: string;
+    /**
+     * Default device send helper.
+     * This is a utility function which may better be replaced with transport specific send functions (e.g. MQTT has publish, Serial has write etc.)
+     */
     send: (data: string | Uint8Array) => void | Promise<void>;
     onReceive?: (data: string | Uint8Array) => void;
     onConnect?: () => void | Promise<void>;
@@ -29,6 +33,8 @@ export type DeviceWhispererProps<T extends DeviceConnectionState> = {
     createInitialConnectionState?: (uuid: string) => Partial<T>;
 };
 export declare function MultiDeviceWhisperer<T extends DeviceConnectionState>({ createInitialConnectionState, }?: DeviceWhispererProps<T>): {
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: T[];
     addConnection: ({ uuid, propCreator }: AddConnectionProps<T>) => Promise<string>;
     removeConnection: (uuid: string) => void;

package/dist/base/device-whisperer.js

@@ -21,6 +21,7 @@ export function MultiDeviceWhisperer({ createInitialConnectionState = createDefa
     const [connections, setConnections] = useState([]);
     const connectionsRef = useRef(new Map());
     const [isReady, setIsReady] = useState(false);
+    const [focussedConnection, setFocussedConnection] = useState();
     // ---------- GET ----------
     const getConnection = (uuid) => connectionsRef.current.get(uuid);
     // ---------- UPDATE ----------
@@ -67,6 +68,8 @@ export function MultiDeviceWhisperer({ createInitialConnectionState = createDefa
         setConnections(Array.from(connectionsRef.current.values()));
     }, []);
     return {
+        focussedConnection,
+        setFocussedConnection,
         connections,
         addConnection,
         removeConnection,

package/dist/message_layers/protobuf-wrapper.d.ts

@@ -19,6 +19,8 @@ export declare function ProtobufMultiDeviceWhisperer<AppLayer extends DeviceConn
     addConnection: ({ uuid, propCreator }: AddConnectionProps<AppLayer>) => Promise<string>;
     sendProtobuf: (uuid: string, message: MessageTX) => void;
     protoBufOnReceiveHandler: (uuid: string, data: string | Uint8Array) => void;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppLayer[];
     removeConnection: (uuid: string) => void;
     connect: (_uuid: string) => void;

package/dist/transport_layers/esp32-device-whisperer.d.ts

@@ -27,6 +27,8 @@ export declare function ESP32MultiDeviceWhisperer<AppOrMessageLayer extends ESP3
         blob: Blob;
         address: number;
     }[]) => Promise<void>;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppOrMessageLayer[];
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;

package/dist/transport_layers/mqtt-device-whisperer.d.ts

@@ -1,5 +1,15 @@
 import { DeviceConnectionState, AddConnectionProps, DeviceWhispererProps } from "../base/device-whisperer.js";
+type MQTTPayload = string | Uint8Array | ArrayBuffer;
+type MQTTTopicCallback = (payload: MQTTPayload, topic: string) => void;
 export type MQTTConnectionState = DeviceConnectionState & {
+    /**
+     * Publishes a payload to any explicit MQTT topic.
+     */
+    publish?: (topic: string, payload: MQTTPayload) => void | Promise<void>;
+    /**
+     * Subscribes a callback for a specific topic. Returns an unsubscribe function.
+     */
+    subscribeCallbackToTopic?: (topic: string, callback: MQTTTopicCallback) => () => void;
     pingFunction?: (props?: any) => void;
     touchHeartbeat?: () => void;
 };
@@ -21,6 +31,8 @@ export declare function MQTTMultiDeviceWhisperer<AppOrMessageLayer extends MQTTC
     disconnect: (uuid: string) => Promise<void>;
     reconnectAll: () => Promise<void>;
     connectToMQTTServer: () => (() => void) | undefined;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppOrMessageLayer[];
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
@@ -30,3 +42,4 @@ export declare function MQTTMultiDeviceWhisperer<AppOrMessageLayer extends MQTTC
     setIsReady: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     createInitialConnectionState: (uuid: string) => Partial<AppOrMessageLayer>;
 };
+export {};

package/dist/transport_layers/mqtt-device-whisperer.js

@@ -7,6 +7,83 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
     const isUnmountedRef = useRef(false);
     const watchdogTimers = useRef({});
     const addingConnections = useRef(new Set());
+    const topicCallbacksRef = useRef(new Map());
+    const hasCallbackForTopic = (topic) => {
+        const callbacks = topicCallbacksRef.current.get(topic);
+        return !!callbacks && callbacks.size > 0;
+    };
+    const hasOtherConnectionUsingTopic = (topic, excludingUuid) => {
+        return base.connections.some((connection) => {
+            if (excludingUuid && connection.uuid === excludingUuid)
+                return false;
+            const connectionTopic = subTopicFromUuid?.(connection.uuid) ?? connection.uuid;
+            return connectionTopic === topic;
+        });
+    };
+    const normalizePayload = (payload) => {
+        if (typeof payload === "string") {
+            return new TextEncoder().encode(payload);
+        }
+        if (payload instanceof ArrayBuffer) {
+            return new Uint8Array(payload);
+        }
+        return payload;
+    };
+    const publish = async (topic, payload, uuidForLogs) => {
+        const client = clientRef.current;
+        if (!client || isUnmountedRef.current)
+            return;
+        const bytes = normalizePayload(payload);
+        if (uuidForLogs) {
+            base.appendLog(uuidForLogs, {
+                level: 5,
+                message: bytes,
+            });
+        }
+        await new Promise((resolve, reject) => {
+            client.publish(topic, bytes, { qos: 1 }, (err) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+                resolve();
+            });
+        });
+    };
+    const subscribeCallbackToTopic = (topic, callback) => {
+        if (!topic)
+            return () => { };
+        const topicCallbacks = topicCallbacksRef.current.get(topic) ?? new Set();
+        const topicAlreadyRegistered = topicCallbacksRef.current.has(topic);
+        topicCallbacks.add(callback);
+        topicCallbacksRef.current.set(topic, topicCallbacks);
+        const client = clientRef.current;
+        if (client?.connected && !client.disconnecting && !topicAlreadyRegistered) {
+            client.subscribe(topic, { qos: 1 }, (err) => {
+                if (err)
+                    console.error("Topic callback subscribe failed:", err);
+            });
+        }
+        return () => {
+            const currentCallbacks = topicCallbacksRef.current.get(topic);
+            if (!currentCallbacks)
+                return;
+            currentCallbacks.delete(callback);
+            if (currentCallbacks.size > 0)
+                return;
+            topicCallbacksRef.current.delete(topic);
+            // Keep topic subscribed when at least one managed connection still uses it.
+            if (hasOtherConnectionUsingTopic(topic))
+                return;
+            const latestClient = clientRef.current;
+            if (latestClient?.connected && !latestClient.disconnecting) {
+                latestClient.unsubscribe(topic, (err) => {
+                    if (err)
+                        console.error("Topic callback unsubscribe failed:", err);
+                });
+            }
+        };
+    };
     const connectToMQTTServer = () => {
         isUnmountedRef.current = false;
         if (clientRef.current) {
@@ -29,6 +106,13 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
             new_client.on("connect", () => {
                 console.log("MQTT Whisperer Connected");
                 base.setIsReady(true);
+                // Re-subscribe custom topic callbacks after reconnect.
+                topicCallbacksRef.current.forEach((_callbacks, topic) => {
+                    new_client.subscribe(topic, { qos: 1 }, (err) => {
+                        if (err)
+                            console.error("Topic callback subscribe failed:", err);
+                    });
+                });
             });
             new_client.on("reconnect", () => {
                 console.log("MQTT Whisperer Reconnecting...");
@@ -47,6 +131,15 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
                     return;
                 const uuid = uuidFromMessage(topic, payload);
                 const bytes = payload instanceof Uint8Array ? payload : new Uint8Array(payload);
+                const topicCallbacks = topicCallbacksRef.current.get(topic);
+                topicCallbacks?.forEach((cb) => {
+                    try {
+                        cb(bytes, topic);
+                    }
+                    catch (err) {
+                        console.error("Topic callback failed:", err);
+                    }
+                });
                 if (!uuid)
                     return;
                 const conn = base.getConnection(uuid);
@@ -75,6 +168,7 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
                 }
             });
             watchdogTimers.current = {};
+            topicCallbacksRef.current.clear();
             if (clientRef.current) {
                 clientRef.current.removeAllListeners();
                 clientRef.current.end(true);
@@ -105,6 +199,10 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
         if (!clientRef.current || isUnmountedRef.current)
             return;
         const topic = subTopicFromUuid?.(uuid) ?? uuid;
+        // Keep topic subscribed if callbacks or other device-connections still depend on it.
+        if (hasCallbackForTopic(topic) || hasOtherConnectionUsingTopic(topic, uuid)) {
+            return;
+        }
         if (clientRef.current.connected && !clientRef.current.disconnecting) {
             clientRef.current.unsubscribe(topic, async (err) => {
                 if (err)
@@ -173,14 +271,8 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
         const conn = base.getConnection(uuid);
         if (!conn)
             return;
-        const payload = typeof data === 'string'
-            ? new TextEncoder().encode(data)
-            : data;
-        base.appendLog(uuid, {
-            level: 5,
-            message: payload,
-        });
-        clientRef.current?.publish(pubTopicFromUuid?.(uuid) ?? uuid, payload); // TS is wrong here!
+        const topic = pubTopicFromUuid?.(uuid) ?? subTopicFromUuid?.(uuid) ?? uuid;
+        await publish(topic, data, uuid);
     };
     const addConnection = async ({ uuid, propCreator }) => {
         if (!clientRef.current || isUnmountedRef.current)
@@ -199,6 +291,8 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
                 return {
                     // Defaults, may be overridden by props
                     send: (d) => defaultSend(id, d),
+                    publish: (topic, payload) => publish(topic, payload, id),
+                    subscribeCallbackToTopic,
                     onReceive: (d) => defaultOnReceive(id, d),
                     touchHeartbeat: () => touchHeartbeat(id),
                     // Initial connection state

package/dist/transport_layers/serial-device-whisperer.d.ts

@@ -46,6 +46,8 @@ export declare function SerialMultiDeviceWhisperer<AppOrMessageLayer extends Ser
     reconnectAll: (...connectionProps: any) => Promise<void>;
     releasePortByDefault: boolean;
     setReleasePortByDefault: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppOrMessageLayer[];
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;

package/dist/transport_layers/websocket-device-whisperer.d.ts

@@ -19,6 +19,8 @@ export declare function WebsocketMultiDeviceWhisperer<AppOrMessageLayer extends
     disconnect: (uuid: string) => Promise<void>;
     checkForNewDevices: () => Promise<DeviceObjectResponse[]>;
     reconnectAll: (...connectionProps: any) => Promise<void>;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppOrMessageLayer[];
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ota-hub-reactjs",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "ReactJS tools for building web apps to flash MCU devices such as esp32, brought to you by OTA Hub.",
   "type": "module",
   "main": "dist/index.js",