ota-hub-reactjs 0.0.19 → 0.1.2

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,8 @@ export type ESP32ConnectionState = DeviceConnectionState & {
     baudrate?: number;
     transport?: Transport;
     esp?: ESPLoader;
+    debugLogging?: false;
+    reader?: AsyncGenerator<Uint8Array>;
     slipReadWrite?: boolean;
     isFlashing: boolean;
     flashProgress: number;
@@ -15,7 +17,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);
@@ -160,6 +178,7 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                 transport,
                 baudrate: use_baudrate,
                 enableTracing: false,
+                debugLogging: !!conn.debugLogging,
             });
             try {
                 await esploader.main();
@@ -182,6 +201,7 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
             base.updateConnection(uuid, (c) => ({
                 ...c,
                 transport,
+                esp: esploader,
                 baudrate: use_baudrate,
                 isConnected: true,
                 isConnecting: false,
@@ -191,7 +211,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,9 +230,29 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
     };
     const disconnect = async (uuid, timeout = 2000) => {
         const conn = base.getConnection(uuid);
+        // 1. Politely kill our high-level generator
+        if (conn?.reader && typeof conn.reader.return === "function") {
+            try {
+                // @ts-ignore
+                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
+                // 2. AGGRESSIVE LOCK REMOVAL (The Fix)
+                // Dig into esptool-js's internal state and force the native reader to release.
+                // If we don't do this, transport.disconnect() will hang and fail to close the port.
+                const internalReader = conn.transport.reader;
+                if (internalReader) {
+                    await internalReader.cancel().catch(() => { });
+                    if (typeof internalReader.releaseLock === "function") {
+                        internalReader.releaseLock();
+                    }
+                }
+                // 3. Now that locks are cleared, attempt standard disconnect
                 await Promise.race([
                     conn.transport.disconnect(),
                     new Promise((resolve) => setTimeout(resolve, timeout)),
@@ -220,11 +262,28 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                 console.warn(`[${uuid}] Serial Disconnect error:`, e);
             }
         }
-        // Always clear the transport and reset connection state
+        // 4. NATIVE SAFETY NET
+        // Guarantee the port is closed natively just in case the transport failed
+        if (conn?.port) {
+            try {
+                if (conn.port.readable?.locked) {
+                    await conn.port.readable.cancel().catch(() => { });
+                }
+                if (conn.port.writable?.locked) {
+                    await conn.port.writable.abort().catch(() => { });
+                }
+                await conn.port.close().catch(() => { });
+            }
+            catch (e) {
+                // It will throw if already closed, which is perfectly fine.
+            }
+        }
+        // 5. 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,
@@ -298,31 +357,35 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
     };
     // This function now handles an entire device flashing session
     const handleFlashFirmware = async (uuid, assetsToFlash) => {
+        // Capture the original connection and port reference before disconnect
         const conn = base.getConnection(uuid);
+        // 1. Bail if we don't have the required state
         if (!conn || !conn.port || assetsToFlash.length === 0)
             return;
+        // Gracefully cancel reader and completely drop the transport natively
         await disconnect(uuid);
+        await new Promise((resolve) => setTimeout(resolve, 400));
         base.updateConnection(uuid, (c) => ({
             ...c,
+            port: conn.port, // Restore the port into state in case disconnect wiped it
             isFlashing: true,
             flashProgress: 0,
             flashError: undefined,
         }));
+        // Declare outside the try block (Fixes variable shadowing)
+        let transport;
+        let esploader;
         try {
             // --- Connect ONCE ---
-            const transport = new Transport(conn.port, true);
-            const esploader = new ESPLoader({
+            transport = new Transport(conn.port, true);
+            esploader = new ESPLoader({
                 transport,
                 baudrate: 921600,
                 enableTracing: false,
+                // debugLogging: !!conn.debugLogging,
             });
-            try {
-                await esploader.main();
-            }
-            catch (e) {
-                console.log("failed to esploader.main()", e);
-                return;
-            }
+            // This may fail, that'll bubble the failure up to the upper try/catch
+            await esploader.main();
             // --- Prepare an ARRAY of files for the library ---
             const fileArray = await Promise.all(assetsToFlash.map(async ({ blob, address }) => {
                 const arrayBuffer = await blob.arrayBuffer();
@@ -331,32 +394,34 @@ export function ESP32MultiDeviceWhisperer({ releasePortByDefault, ...props } = {
                     .join("");
                 return { data: binaryString, address };
             }));
+            let lastRenderTime = 0;
             const flashOptions = {
-                fileArray, // Pass the whole array here
+                fileArray,
                 flashSize: "keep",
                 flashMode: "qio",
                 flashFreq: "80m",
                 eraseAll: fileArray.length > 1, // Writing more than 1 thing, so likely writing partitions.
                 compress: true,
                 reportProgress: (fileIndex, written, total) => {
-                    // You can enhance progress reporting to show which file is being flashed
                     const progress = (written / total) * 100;
-                    console.log(`Flashing file ${fileIndex + 1}/${fileArray.length}: ${progress.toFixed(1)}%`);
-                    base.updateConnection(uuid, (c) => ({
-                        ...c,
-                        flashProgress: progress,
-                    }));
+                    const now = performance.now();
+                    // Throttle UI updates to at most once every 100ms (~10 FPS),
+                    // but ALWAYS ensure the final 100% tick renders.
+                    if (now - lastRenderTime > 100 || written === total) {
+                        lastRenderTime = now;
+                        // Optional: Only log every 100ms as well to prevent console spam
+                        console.log(`Flashing file ${fileIndex + 1}/${fileArray.length}: ${progress.toFixed(1)}%`);
+                        base.updateConnection(uuid, (c) => ({
+                            ...c,
+                            flashProgress: progress,
+                        }));
+                    }
                 },
             };
             // --- Call writeFlash ONCE with all files ---
-            try {
-                base.updateConnection(uuid, (c) => ({ ...c, flashProgress: -1 }));
-                await esploader.writeFlash(flashOptions);
-            }
-            catch (e) {
-                console.log("failed to esploader.writeFlash", e);
-            }
-            // --- Disconnect ---
+            base.updateConnection(uuid, (c) => ({ ...c, flashProgress: -1 }));
+            await esploader.writeFlash(flashOptions);
+            // --- Disconnect cleanly ---
             await esploader.after();
             try {
                 await transport.disconnect();
@@ -372,6 +437,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 +447,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.2",
   "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",