ota-hub-reactjs 0.0.19 → 0.1.1

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

@@ -31,8 +31,9 @@ export type DeviceConnectionState = {
 export declare function createDefaultInitialDeviceState<T extends DeviceConnectionState>(uuid: string, props?: any): T;
 export type DeviceWhispererProps<T extends DeviceConnectionState> = {
     createInitialConnectionState?: (uuid: string) => Partial<T>;
+    setFocussedConnectionOnAddConnection?: boolean;
 };
-export declare function MultiDeviceWhisperer<T extends DeviceConnectionState>({ createInitialConnectionState, }?: DeviceWhispererProps<T>): {
+export declare function useMultiDeviceWhisperer<T extends DeviceConnectionState>({ createInitialConnectionState, setFocussedConnectionOnAddConnection, }?: DeviceWhispererProps<T>): {
     focussedConnection: string | undefined;
     setFocussedConnection: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;
     connections: T[];

package/dist/base/device-whisperer.js

@@ -16,7 +16,7 @@ export function createDefaultInitialDeviceState(uuid, props) {
 /* One Device Whisperer is used for all like-devices, such as all Serial with Protobuf.
    Any e.g. Serial without Protobuf, or LoRaWAN etc. devices would be handled via a separate device whisperer
 */
-export function MultiDeviceWhisperer({ createInitialConnectionState = createDefaultInitialDeviceState, } = {}) {
+export function useMultiDeviceWhisperer({ createInitialConnectionState = createDefaultInitialDeviceState, setFocussedConnectionOnAddConnection, } = {}) {
     const [connections, setConnections] = useState([]);
     const connectionsRef = useRef(new Map());
     const [isReady, setIsReady] = useState(false);
@@ -54,6 +54,9 @@ export function MultiDeviceWhisperer({ createInitialConnectionState = createDefa
         };
         connectionsRef.current.set(uuid, newConnection);
         setConnections(Array.from(connectionsRef.current.values()));
+        // Automatically set to the latest connection
+        if (!!setFocussedConnectionOnAddConnection)
+            setFocussedConnection(uuid);
         return uuid;
     };
     // ---------- REMOVE ----------

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

@@ -1,13 +1,13 @@
-import { AddConnectionProps, DeviceConnectionState, MultiDeviceWhisperer } from "../base/device-whisperer.js";
+import { AddConnectionProps, DeviceConnectionState, useMultiDeviceWhisperer } from "../base/device-whisperer.js";
 export type TopicHandlerContext<AppLayer extends DeviceConnectionState> = {
-    base: ReturnType<typeof MultiDeviceWhisperer<AppLayer>>;
+    base: ReturnType<typeof useMultiDeviceWhisperer<AppLayer>>;
     uuid: string;
 };
 export type TopicHandlerMap<AppLayer extends DeviceConnectionState, Topic extends string | number, Message = any> = {
     [K in Topic]?: (message: Message, context: TopicHandlerContext<AppLayer>) => void;
 };
 export type ProtobufDeviceWhispererProps<AppLayer extends DeviceConnectionState, Topic extends string | number, MessageRX = any, MessageTX = any> = {
-    transportLayer: ReturnType<typeof MultiDeviceWhisperer<AppLayer>>;
+    transportLayer: ReturnType<typeof useMultiDeviceWhisperer<AppLayer>>;
     encodeRX: (message: MessageTX) => Uint8Array;
     decodeTX: (bytes: Uint8Array) => MessageRX;
     messageTypeField: keyof MessageRX;
@@ -15,7 +15,7 @@ export type ProtobufDeviceWhispererProps<AppLayer extends DeviceConnectionState,
     HEADER?: Uint8Array;
     expectLength?: boolean;
 };
-export declare function ProtobufMultiDeviceWhisperer<AppLayer extends DeviceConnectionState, Topic extends string | number, MessageRX = any, MessageTX = any>({ transportLayer, encodeRX, decodeTX, messageTypeField, rxTopicHandlerMap, HEADER, }: ProtobufDeviceWhispererProps<AppLayer, Topic, MessageRX, MessageTX>): {
+export declare function useProtobufMultiDeviceWhisperer<AppLayer extends DeviceConnectionState, Topic extends string | number, MessageRX = any, MessageTX = any>({ transportLayer, encodeRX, decodeTX, messageTypeField, rxTopicHandlerMap, HEADER, }: ProtobufDeviceWhispererProps<AppLayer, Topic, MessageRX, MessageTX>): {
     addConnection: ({ uuid, propCreator, }: AddConnectionProps<AppLayer>) => Promise<string>;
     sendProtobuf: (uuid: string, message: MessageTX) => void;
     protoBufOnReceiveHandler: (uuid: string, data: string | Uint8Array) => void;

package/dist/message_layers/protobuf-wrapper.js

@@ -1,4 +1,4 @@
-export function ProtobufMultiDeviceWhisperer({ transportLayer, encodeRX, decodeTX, messageTypeField, rxTopicHandlerMap, HEADER = new Uint8Array([]), }) {
+export function useProtobufMultiDeviceWhisperer({ transportLayer, encodeRX, decodeTX, messageTypeField, rxTopicHandlerMap, HEADER = new Uint8Array([]), }) {
     // --- Utils ---
     const concatUint8Arrays = (a, b) => {
         const result = new Uint8Array(a.length + b.length);

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

@@ -5,6 +5,7 @@ export type ESP32ConnectionState = DeviceConnectionState & {
     baudrate?: number;
     transport?: Transport;
     esp?: ESPLoader;
+    reader?: AsyncGenerator<Uint8Array>;
     slipReadWrite?: boolean;
     isFlashing: boolean;
     flashProgress: number;
@@ -15,7 +16,7 @@ export type FlashFirmwareProps = {
     firmwareBlob?: Blob;
     fileArray?: FlashOptions["fileArray"];
 };
-export declare function ESP32MultiDeviceWhisperer<AppOrMessageLayer extends ESP32ConnectionState>({ releasePortByDefault, ...props }?: {
+export declare function useESP32MultiDeviceWhisperer<AppOrMessageLayer extends ESP32ConnectionState>({ releasePortByDefault, ...props }?: {
     releasePortByDefault: boolean;
 } & DeviceWhispererProps<AppOrMessageLayer>): {
     addConnection: ({ uuid, propCreator, }: AddConnectionProps<AppOrMessageLayer>) => Promise<string>;

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

@@ -1,8 +1,8 @@
 import { useEffect } from "react";
 import { ESPLoader, Transport } from "esptool-js";
-import { MultiDeviceWhisperer, } from "../base/device-whisperer.js";
-export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = { releasePortByDefault: true }) {
-    const base = MultiDeviceWhisperer(props);
+import { useMultiDeviceWhisperer, } from "../base/device-whisperer.js";
+export function useESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = { releasePortByDefault: true }) {
+    const base = useMultiDeviceWhisperer(props);
     const defaultOnReceive = (uuid, data) => {
         const text = typeof data === "string" ? data : new TextDecoder().decode(data);
         const trimmed = text.trim();
@@ -35,8 +35,9 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
         let slipBuffer = []; // accumulate SLIP frames
         let inSlipFrame = false; // are we inside a SLIP frame?
         let escapeNext = false;
+        const reader = transport.rawRead();
+        base.updateConnection(uuid, (c) => ({ ...c, reader }));
         try {
-            const reader = transport.rawRead();
             while (true) {
                 const conn = base.getConnection(uuid);
                 if (!conn) {
@@ -121,6 +122,8 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
             });
         }
         finally {
+            // Clear reader state so it's fresh for next connect
+            base.updateConnection(uuid, (c) => ({ ...c, reader: undefined }));
             base.appendLog(uuid, {
                 level: 0,
                 message: "[!] Serial disconnected",
@@ -152,6 +155,21 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
             });
             base.updateConnection(uuid, (c) => ({ ...c, port }));
         }
+        else {
+            try {
+                const oldInfo = port.getInfo();
+                const authorizedPorts = await navigator.serial.getPorts();
+                const freshPort = authorizedPorts.find((p) => p.getInfo().usbVendorId === oldInfo.usbVendorId &&
+                    p.getInfo().usbProductId === oldInfo.usbProductId);
+                if (freshPort) {
+                    port = freshPort; // Swap out the dead pointer
+                    base.updateConnection(uuid, (c) => ({ ...c, port }));
+                }
+            }
+            catch (e) {
+                console.warn(`[${uuid}] Failed to silently heal port reference:`, e);
+            }
+        }
         base.updateConnection(uuid, (c) => ({ ...c, isConnecting: true }));
         const use_baudrate = baudrate ?? conn.baudrate ?? 115200;
         const transport = new Transport(port, false, false);
@@ -182,6 +200,7 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
             base.updateConnection(uuid, (c) => ({
                 ...c,
                 transport,
+                esp: esploader,
                 baudrate: use_baudrate,
                 isConnected: true,
                 isConnecting: false,
@@ -191,7 +210,9 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                 message: "[✓] Serial connected",
             });
             await conn.onConnect?.();
-            await readLoop(uuid, transport);
+            // FIRE AND FORGET
+            // We initiate the read loop but DO NOT await it, returning control immediately.
+            readLoop(uuid, transport).catch((e) => console.error(`[${uuid}] Background read loop failed:`, e));
         }
         catch (err) {
             base.updateConnection(uuid, (c) => ({
@@ -208,6 +229,18 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
     };
     const disconnect = async (uuid, timeout = 2000) => {
         const conn = base.getConnection(uuid);
+        // 1. POLITELY KILL THE READER
+        // If we have an active reader generator in state, call return() to
+        // gracefully resolve the pending reader.next() in the background loop
+        if (conn?.reader && typeof conn.reader.return === "function") {
+            try {
+                // @ts-ignore - The underlying AsyncGenerator handles return gracefully
+                await conn.reader.return();
+            }
+            catch (e) {
+                console.warn(`[${uuid}] Error returning generator lock:`, e);
+            }
+        }
         if (conn?.transport) {
             try {
                 // Attempt disconnect, but don’t hang if the port is crashed
@@ -223,8 +256,9 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
         // Always clear the transport and reset connection state
         base.updateConnection(uuid, (c) => ({
             ...c,
-            port: releasePortByDefault ? null : c.port,
-            transport: releasePortByDefault ? null : c.transport,
+            port: releasePortByDefault ? undefined : c.port,
+            transport: releasePortByDefault ? undefined : c.transport,
+            reader: undefined, // Guarantee reader is cleared out
             isConnected: false,
             isConnecting: false,
             autoConnect: false,
@@ -299,8 +333,14 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
     // This function now handles an entire device flashing session
     const handleFlashFirmware = async (uuid, assetsToFlash) => {
         const conn = base.getConnection(uuid);
-        if (!conn || !conn.port || assetsToFlash.length === 0)
+        // 1. Bail if we don't have the required state
+        if (!conn ||
+            !conn.transport ||
+            !conn.port ||
+            !conn.esp ||
+            assetsToFlash.length === 0)
             return;
+        // Gracefully cancel reader and completely drop the transport natively
         await disconnect(uuid);
         base.updateConnection(uuid, (c) => ({
             ...c,
@@ -372,6 +412,8 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                 isFlashing: false,
                 flashProgress: 100,
             }));
+            // --- Reconnect the standard monitor ---
+            await connect(uuid);
         }
         catch (e) {
             console.error(`[${uuid}] Flashing failed:`, e);
@@ -380,6 +422,8 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                 isFlashing: false,
                 flashError: e?.message ?? "Unknown error",
             }));
+            // Attempt recovery
+            await connect(uuid);
         }
     };
     useEffect(() => {

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

@@ -13,7 +13,7 @@ export type MQTTConnectionState = DeviceConnectionState & {
     pingFunction?: (props?: any) => void;
     touchHeartbeat?: () => void;
 };
-export declare function MQTTMultiDeviceWhisperer<AppOrMessageLayer extends MQTTConnectionState>({ serverUrl, serverUrlFnc, uuidFromMessage, subTopicFromUuid, pubTopicFromUuid, serverPort, clientId, username, password, serverAutoConnect, serverConnectOn, enableWatchdog, ...props }: {
+export declare function useMQTTMultiDeviceWhisperer<AppOrMessageLayer extends MQTTConnectionState>({ serverUrl, serverUrlFnc, uuidFromMessage, subTopicFromUuid, pubTopicFromUuid, serverPort, clientId, username, password, serverAutoConnect, serverConnectOn, enableWatchdog, ...props }: {
     serverUrl?: string;
     serverUrlFnc?: () => Promise<string> | string;
     uuidFromMessage: (topic: string, payload: Buffer<ArrayBufferLike>) => string;

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

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
-import { MultiDeviceWhisperer, } from "../base/device-whisperer.js";
+import { useMultiDeviceWhisperer, } from "../base/device-whisperer.js";
 import mqtt from "mqtt";
-export function MQTTMultiDeviceWhisperer({ serverUrl, serverUrlFnc, uuidFromMessage, subTopicFromUuid = undefined, pubTopicFromUuid = undefined, serverPort = 443, clientId = undefined, username = undefined, password = undefined, serverAutoConnect = true, serverConnectOn = false, enableWatchdog = true, ...props }) {
-    const base = MultiDeviceWhisperer(props);
+export function useMQTTMultiDeviceWhisperer({ serverUrl, serverUrlFnc, uuidFromMessage, subTopicFromUuid = undefined, pubTopicFromUuid = undefined, serverPort = 443, clientId = undefined, username = undefined, password = undefined, serverAutoConnect = true, serverConnectOn = false, enableWatchdog = true, ...props }) {
+    const base = useMultiDeviceWhisperer(props);
     const clientRef = useRef(null);
     const isUnmountedRef = useRef(false);
     // ✨ NEW: Manage our own reconnect timer
@@ -88,7 +88,7 @@ export function MQTTMultiDeviceWhisperer({ serverUrl, serverUrlFnc, uuidFromMess
     };
     const connectToMQTTServer = async () => {
         if (!serverUrl && !serverUrlFnc) {
-            console.error("MQTT MultiDeviceWhisperer requires either serverUrl or serverUrlFnc");
+            console.error("MQTT useMultiDeviceWhisperer requires either serverUrl or serverUrlFnc");
             return;
         }
         if (reconnectTimeoutRef.current)

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

@@ -38,7 +38,7 @@ export type SerialConnectionState = DeviceConnectionState & {
     baudrate?: number;
     slipReadWrite?: boolean;
 };
-export declare function SerialMultiDeviceWhisperer<AppOrMessageLayer extends SerialConnectionState>({ ...props }?: DeviceWhispererProps<AppOrMessageLayer>): {
+export declare function useSerialMultiDeviceWhisperer<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>;

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

@@ -1,4 +1,4 @@
-import { MultiDeviceWhisperer, } from "../base/device-whisperer.js";
+import { useMultiDeviceWhisperer, } from "../base/device-whisperer.js";
 import { useEffect, useRef, useState } from "react";
 /*
 ┌────────────────────────────────┐
@@ -151,8 +151,8 @@ export class UsbTransport {
 // Standard CDC-ACM requests
 UsbTransport.SET_LINE_CODING = 0x20;
 UsbTransport.SET_CONTROL_LINE_STATE = 0x22;
-export function SerialMultiDeviceWhisperer({ ...props } = {}) {
-    const base = MultiDeviceWhisperer(props);
+export function useSerialMultiDeviceWhisperer({ ...props } = {}) {
+    const base = useMultiDeviceWhisperer(props);
     const releasePortByDefaultRef = useRef(false);
     const [releasePortByDefaultState, setReleasePortByDefaultState] = useState(false);
     useEffect(() => {

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

@@ -9,7 +9,7 @@ export type DeviceObjectResponse = {
     deviceConnectedTime: Date | null;
     deviceLastCommTime: Date | null;
 };
-export declare function WebsocketMultiDeviceWhisperer<AppOrMessageLayer extends WebsocketConnectionState>({ server_url, server_port, ...props }: {
+export declare function useWebsocketMultiDeviceWhisperer<AppOrMessageLayer extends WebsocketConnectionState>({ server_url, server_port, ...props }: {
     server_url: string;
     server_port: number;
 }): {

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

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
-import { MultiDeviceWhisperer, } from "../base/device-whisperer.js";
-export function WebsocketMultiDeviceWhisperer({ server_url, server_port, ...props }) {
-    const base = MultiDeviceWhisperer(props);
+import { useMultiDeviceWhisperer, } from "../base/device-whisperer.js";
+export function useWebsocketMultiDeviceWhisperer({ server_url, server_port, ...props }) {
+    const base = useMultiDeviceWhisperer(props);
     const defaultOnReceive = (uuid, data) => {
         const conn = base.getConnection(uuid);
         if (!conn)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ota-hub-reactjs",
-  "version": "0.0.19",
+  "version": "0.1.1",
   "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",