ota-hub-reactjs 0.0.15 → 0.0.18

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

@@ -2,7 +2,7 @@ export type LogMessage = string | number | boolean | Record<string, any> | any[]
 export type LogLine = {
     level: number;
     message: LogMessage;
-    timestamp?: string | Date;
+    timestamp?: Date;
 };
 type PropCreatorProps<T> = (uuid: string) => Partial<T> | undefined;
 export interface AddConnectionProps<T> {
@@ -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,8 +33,9 @@ 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[];
-    connectionsRef: import("react").RefObject<T[]>;
     addConnection: ({ uuid, propCreator }: AddConnectionProps<T>) => Promise<string>;
     removeConnection: (uuid: string) => void;
     connect: (_uuid: string) => void;

package/dist/base/device-whisperer.js

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useEffect, useRef, useState } from "react";
-import { uniqueNamesGenerator, animals } from "unique-names-generator";
 ;
 // Initial, generic state for the generic device
 export function createDefaultInitialDeviceState(uuid, props) {
@@ -20,53 +19,58 @@ export function createDefaultInitialDeviceState(uuid, props) {
 */
 export function MultiDeviceWhisperer({ createInitialConnectionState = createDefaultInitialDeviceState, } = {}) {
     const [connections, setConnections] = useState([]);
-    const connectionsRef = useRef(connections);
+    const connectionsRef = useRef(new Map());
     const [isReady, setIsReady] = useState(false);
-    const getConnection = (uuid) => connectionsRef.current.find(c => c.uuid === uuid);
+    const [focussedConnection, setFocussedConnection] = useState();
+    // ---------- GET ----------
+    const getConnection = (uuid) => connectionsRef.current.get(uuid);
+    // ---------- UPDATE ----------
     const updateConnection = (uuid, updater) => {
-        setConnections(prev => {
-            const updated = prev.map((c) => c.uuid === uuid ? updater(c) : c);
-            connectionsRef.current = updated;
-            return updated;
-        });
+        const current = connectionsRef.current.get(uuid);
+        if (!current)
+            return;
+        const next = updater(current);
+        connectionsRef.current.set(uuid, next);
+        setConnections(Array.from(connectionsRef.current.values()));
     };
     const updateConnectionName = (uuid, name) => {
-        setConnections((prev) => prev.map((c) => (c.uuid === uuid ? { ...c, name } : c)));
+        updateConnection(uuid, (c) => ({ ...c, name }));
     };
     const appendLog = (uuid, log) => {
-        if (!log.timestamp) {
+        if (!log.timestamp)
             log.timestamp = new Date();
-        }
         updateConnection(uuid, (c) => ({
             ...c,
             logs: [...c.logs.slice(-199), log],
         }));
     };
+    // ---------- ADD ----------
     const addConnection = async ({ uuid, propCreator }) => {
-        uuid = uuid ?? uniqueNamesGenerator({ dictionaries: [animals] });
+        uuid = uuid ?? `unnamed_device_${connectionsRef.current.size}`;
         const props = propCreator?.(uuid);
         const newConnection = {
             ...createDefaultInitialDeviceState(uuid),
             ...createInitialConnectionState(uuid),
             ...props
         };
-        connectionsRef.current = [...connectionsRef.current, newConnection];
-        setConnections(prev => [...prev, newConnection]);
-        const anyUpdatedConnection = getConnection(uuid);
-        if (!anyUpdatedConnection) {
-            return "";
-        }
+        connectionsRef.current.set(uuid, newConnection);
+        setConnections(Array.from(connectionsRef.current.values()));
         return uuid;
     };
+    // ---------- REMOVE ----------
     const removeConnection = (uuid) => {
-        setConnections((prev) => prev.filter((c) => c.uuid !== uuid));
+        connectionsRef.current.delete(uuid);
+        setConnections(Array.from(connectionsRef.current.values()));
     };
+    // ---------- EFFECT ----------
     useEffect(() => {
-        connectionsRef.current = connections;
-    }, [connections]);
+        // initial snapshot
+        setConnections(Array.from(connectionsRef.current.values()));
+    }, []);
     return {
+        focussedConnection,
+        setFocussedConnection,
         connections,
-        connectionsRef,
         addConnection,
         removeConnection,
         connect: (_uuid) => { },

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

@@ -19,8 +19,9 @@ 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[];
-    connectionsRef: import("react").RefObject<AppLayer[]>;
     removeConnection: (uuid: string) => void;
     connect: (_uuid: string) => void;
     disconnect: (_uuid: string) => void;

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

@@ -1,5 +1,5 @@
 import { ESPLoader, FlashOptions, Transport } from "esptool-js";
-import { AddConnectionProps, DeviceConnectionState } from "../base/device-whisperer.js";
+import { AddConnectionProps, DeviceConnectionState, DeviceWhispererProps } from "../base/device-whisperer.js";
 export type ESP32ConnectionState = DeviceConnectionState & {
     port?: SerialPort;
     baudrate?: number;
@@ -15,7 +15,9 @@ export type FlashFirmwareProps = {
     firmwareBlob?: Blob;
     fileArray?: FlashOptions["fileArray"];
 };
-export declare function ESP32MultiDeviceWhisperer<AppOrMessageLayer extends ESP32ConnectionState>({ ...props }?: {}): {
+export declare function ESP32MultiDeviceWhisperer<AppOrMessageLayer extends ESP32ConnectionState>({ releasePortByDefault, ...props }?: {
+    releasePortByDefault: boolean;
+} & DeviceWhispererProps<AppOrMessageLayer>): {
     addConnection: ({ uuid, propCreator }: AddConnectionProps<AppOrMessageLayer>) => Promise<string>;
     removeConnection: (uuid: string) => Promise<void>;
     connect: (uuid: string, baudrate?: number, restart_on_connect?: boolean) => Promise<void>;
@@ -25,8 +27,9 @@ 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[];
-    connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
     getConnection: (uuid: string) => AppOrMessageLayer | undefined;

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

@@ -1,39 +1,19 @@
 import { useEffect } from "react";
 import { ESPLoader, Transport } from "esptool-js";
 import { MultiDeviceWhisperer } from "../base/device-whisperer.js";
-export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
+export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = { releasePortByDefault: true }) {
     const base = MultiDeviceWhisperer(props);
     const defaultOnReceive = (uuid, data) => {
-        const conn = base.getConnection(uuid);
-        if (!conn)
+        const text = typeof data === "string"
+            ? data
+            : new TextDecoder().decode(data);
+        const trimmed = text.trim();
+        if (!trimmed)
             return;
-        const decoder = new TextDecoder();
-        let bytes;
-        if (typeof data === "string") {
-            bytes = new TextEncoder().encode(data);
-        }
-        else if (data instanceof ArrayBuffer) {
-            bytes = new Uint8Array(data);
-        }
-        else {
-            bytes = data;
-        }
-        const asText = decoder.decode(bytes);
-        const combined = conn.readBufferLeftover + asText;
-        const lines = combined.split("\r\n");
-        base.updateConnection(uuid, (c) => ({
-            ...c,
-            readBufferLeftover: lines.pop() || ""
-        }));
-        for (const line of lines) {
-            const trimmed = line.trim();
-            if (trimmed) {
-                base.appendLog(uuid, {
-                    level: 2,
-                    message: trimmed,
-                });
-            }
-        }
+        base.appendLog(uuid, {
+            level: 2,
+            message: trimmed,
+        });
     };
     const defaultSend = async (uuid, data) => {
         const conn = base.getConnection(uuid);
@@ -52,9 +32,7 @@ export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
         return;
     };
     const readLoop = async (uuid, transport) => {
-        const conn = base.getConnection(uuid);
-        if (!conn)
-            return;
+        const textDecoder = new TextDecoder();
         let readBuffer = ""; // accumulate ASCII/lines
         let slipBuffer = []; // accumulate SLIP frames
         let inSlipFrame = false; // are we inside a SLIP frame?
@@ -62,6 +40,12 @@ export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
         try {
             const reader = transport.rawRead();
             while (true) {
+                const conn = base.getConnection(uuid);
+                if (!conn) {
+                    console.log("Kack!");
+                    return;
+                }
+                ;
                 const { value, done } = await reader.next();
                 if (done || !value)
                     break;
@@ -117,9 +101,8 @@ export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
                         escapeNext = false;
                         continue;
                     }
-                    // treat as normal ASCII text
-                    const char = String.fromCharCode(b);
-                    readBuffer += char;
+                    // treat as normal text (correctly)
+                    readBuffer += textDecoder.decode(new Uint8Array([b]), { stream: true });
                     // check for newline
                     let newlineIndex;
                     while ((newlineIndex = readBuffer.indexOf("\n")) >= 0) {
@@ -244,8 +227,8 @@ export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
         // Always clear the transport and reset connection state
         base.updateConnection(uuid, (c) => ({
             ...c,
-            port: null,
-            transport: null,
+            port: releasePortByDefault ? null : c.port,
+            transport: releasePortByDefault ? null : c.transport,
             isConnected: false,
             isConnecting: false,
             autoConnect: false,
@@ -285,8 +268,11 @@ export function ESP32MultiDeviceWhisperer({ ...props } = {}) {
         base.removeConnection(uuid);
     };
     const reconnectAll = async (...connectionProps) => {
-        const connections = [...base.connectionsRef.current]; // snapshot first
-        await Promise.all(connections.map(async (c) => {
+        const connectionIds = base.connections.map(c => c.uuid);
+        await Promise.all(connectionIds.map(async (id) => {
+            const c = base.getConnection(id);
+            if (!c)
+                return;
             await disconnect(c.uuid);
             await new Promise((res) => setTimeout(res, 250));
             return connect(c.uuid, ...connectionProps);

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,8 +31,9 @@ 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[];
-    connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
     getConnection: (uuid: string) => AppOrMessageLayer | undefined;
@@ -31,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)
@@ -189,7 +281,7 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
             Error("In MQTT you MUST define a UUID otherwise we don't know what device we're connecting to!");
             return;
         }
-        if (base.connectionsRef.current.some(c => c.uuid === uuid) || addingConnections.current.has(uuid)) {
+        if (base.connections.some(c => c.uuid === uuid) || addingConnections.current.has(uuid)) {
             return;
         }
         await base.addConnection({
@@ -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
@@ -221,13 +315,15 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, uuidFromMessage, subTopicF
         base.removeConnection(uuid);
     };
     const reconnectAll = async () => {
-        for (const c of base.connectionsRef.current) {
+        const connectionIds = base.connections.map(c => c.uuid);
+        await Promise.all(connectionIds.map(async (id) => {
+            const c = base.getConnection(id);
+            if (!c)
+                return;
             await disconnect(c.uuid);
             await new Promise((res) => setTimeout(res, 250));
-        }
-        for (const c of base.connectionsRef.current) {
-            await connect(c.uuid);
-        }
+            return connect(c.uuid);
+        }));
     };
     useEffect(() => {
         if (!(serverAutoConnect || serverConnectOn))

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

@@ -1,4 +1,4 @@
-import { DeviceConnectionState, AddConnectionProps } from "../base/device-whisperer.js";
+import { DeviceConnectionState, AddConnectionProps, DeviceWhispererProps } from "../base/device-whisperer.js";
 export declare class UsbTransport {
     device: USBDevice;
     controlInterface: number;
@@ -38,14 +38,17 @@ export type SerialConnectionState = DeviceConnectionState & {
     baudrate?: number;
     slipReadWrite?: boolean;
 };
-export declare function SerialMultiDeviceWhisperer<AppOrMessageLayer extends SerialConnectionState>({ ...props }?: {}): {
+export declare function SerialMultiDeviceWhisperer<AppOrMessageLayer extends SerialConnectionState>({ ...props }?: DeviceWhispererProps<AppOrMessageLayer>): {
     addConnection: ({ uuid, propCreator }: AddConnectionProps<AppOrMessageLayer>) => Promise<string | undefined>;
     removeConnection: (uuid: string) => Promise<void>;
     connect: (uuid: string, baudrate?: number) => Promise<void>;
     disconnect: (uuid: string) => Promise<void>;
-    reconnectAll: () => Promise<void>;
+    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[];
-    connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
     getConnection: (uuid: string) => AppOrMessageLayer | undefined;

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

@@ -1,5 +1,5 @@
 import { MultiDeviceWhisperer } from "../base/device-whisperer.js";
-import { useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 /*
 ┌────────────────────────────────┐
 │   Device Whisperer (Generic)   │ (connect/disconnect, state mgmt) - "Abstraction Layer"
@@ -150,6 +150,11 @@ UsbTransport.SET_LINE_CODING = 0x20;
 UsbTransport.SET_CONTROL_LINE_STATE = 0x22;
 export function SerialMultiDeviceWhisperer({ ...props } = {}) {
     const base = MultiDeviceWhisperer(props);
+    const releasePortByDefaultRef = useRef(false);
+    const [releasePortByDefaultState, setReleasePortByDefaultState] = useState(false);
+    useEffect(() => {
+        releasePortByDefaultRef.current = releasePortByDefaultState;
+    }, [releasePortByDefaultState]);
     // --- Message Processing (Identical logic, just copied over) ---
     const defaultOnReceive = (uuid, data) => {
         const conn = base.getConnection(uuid);
@@ -165,7 +170,7 @@ export function SerialMultiDeviceWhisperer({ ...props } = {}) {
             bytes = data;
         const asText = decoder.decode(bytes);
         const combined = conn.readBufferLeftover + asText;
-        const lines = combined.split("\r\n");
+        const lines = combined.split("\n");
         base.updateConnection(uuid, (c) => ({ ...c, readBufferLeftover: lines.pop() || "" }));
         for (const line of lines) {
             if (line.trim()) {
@@ -306,7 +311,7 @@ export function SerialMultiDeviceWhisperer({ ...props } = {}) {
         }
         base.updateConnection(uuid, c => ({
             ...c,
-            transport: null,
+            transport: releasePortByDefaultRef.current ? null : c.transport,
             isConnected: false,
             isConnecting: false
         }));
@@ -346,7 +351,17 @@ export function SerialMultiDeviceWhisperer({ ...props } = {}) {
         await disconnect(uuid);
         base.removeConnection(uuid);
     };
-    const reconnectAll = async () => { };
+    const reconnectAll = async (...connectionProps) => {
+        const connectionIds = base.connections.map(c => c.uuid);
+        await Promise.all(connectionIds.map(async (id) => {
+            const c = base.getConnection(id);
+            if (!c)
+                return;
+            await disconnect(c.uuid);
+            await new Promise((res) => setTimeout(res, 250));
+            return connect(c.uuid, ...connectionProps);
+        }));
+    };
     useEffect(() => { base.setIsReady(true); }, []);
     return {
         ...base,
@@ -354,6 +369,8 @@ export function SerialMultiDeviceWhisperer({ ...props } = {}) {
         removeConnection,
         connect,
         disconnect,
-        reconnectAll
+        reconnectAll,
+        releasePortByDefault: releasePortByDefaultState,
+        setReleasePortByDefault: setReleasePortByDefaultState
     };
 }

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

@@ -18,9 +18,10 @@ export declare function WebsocketMultiDeviceWhisperer<AppOrMessageLayer extends
     connect: (uuid: string, attempt?: number) => Promise<void>;
     disconnect: (uuid: string) => Promise<void>;
     checkForNewDevices: () => Promise<DeviceObjectResponse[]>;
-    reconnectAll: () => Promise<void>;
+    reconnectAll: (...connectionProps: any) => Promise<void>;
+    focussedConnection: string | undefined;
+    setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: AppOrMessageLayer[];
-    connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
     getConnection: (uuid: string) => AppOrMessageLayer | undefined;

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

@@ -19,7 +19,7 @@ export function WebsocketMultiDeviceWhisperer({ server_url, server_port, ...prop
         }
         const asText = decoder.decode(bytes);
         const combined = conn.readBufferLeftover + asText;
-        const lines = combined.split("\n");
+        const lines = combined.split(/\r?\n/);
         base.updateConnection(uuid, (c) => ({
             ...c,
             readBufferLeftover: lines.pop() || ""
@@ -173,14 +173,16 @@ export function WebsocketMultiDeviceWhisperer({ server_url, server_port, ...prop
             return [];
         }
     };
-    const reconnectAll = async () => {
-        for (const c of base.connectionsRef.current) {
+    const reconnectAll = async (...connectionProps) => {
+        const connectionIds = base.connections.map(c => c.uuid);
+        await Promise.all(connectionIds.map(async (id) => {
+            const c = base.getConnection(id);
+            if (!c)
+                return;
             await disconnect(c.uuid);
             await new Promise((res) => setTimeout(res, 250));
-        }
-        for (const c of base.connectionsRef.current) {
-            await connect(c.uuid);
-        }
+            return connect(c.uuid, ...connectionProps);
+        }));
     };
     useEffect(() => {
         base.setIsReady(true); // Ready on page load by default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ota-hub-reactjs",
-  "version": "0.0.15",
+  "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",
@@ -33,7 +33,6 @@
   "dependencies": {
     "esptool-js": "^0.5.5",
     "mqtt": "^5.14.1",
-    "unique-names-generator": "^4.7.1",
     "uuid": "^11.1.0"
   },
   "peerDependencies": {