ota-hub-reactjs 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,102 @@
+# OTA Hub ReactJS
+
+**ReactJS tools for interacting with MCUs such as ESP32 over OTA.**  
+
+`ota-hub-reactjs` provides a set of React-friendly utilities to:
+
+- Flash firmware to microcontrollers (ESP32 and similar)
+- Read from multiple MCUs over serial **in parallel**
+- Connect to MCUs via wireless transport stacks such as WebSockets for real-time streaming
+- Handle Protobuf and other message layer wrappers 
+
+
+## Installation
+
+```bash
+npm install ota-hub-reactjs
+# or
+yarn add ota-hub-reactjs
+```
+
+Peer dependencies:
+
+```bash
+npm install react react-dom
+```
+
+# Features
+
+## Transport layers
+
+- All transport layers are designed to support multiple connections (thus devices) in parallel
+- You can mix and match tranport layers within your applications
+- All ConnectionStates are extendible, e.g.
+    ```ts
+    export type EnhancedSerialConnectionState = SerialConnectionState & {
+        dataPoints: DataPoint[];
+        isRecording: boolean;
+        edgeModelVersion: string;
+        wifiSignal: number;
+        wifiSSID: string;
+        batteryLevel: number;
+    };
+    ```
+
+### Serial Communication
+Read and write to multiple MCUs concurrently over serial connections.
+
+```tsx
+import { SerialMultiDeviceWhisperer, SerialConnectionState } from "ota-hub-reactjs";
+
+const serialDeviceWhisperer = new SerialMultiDeviceWhisperer<EnhancedSerialConnectionState>();
+serialDeviceWhisperer.addConnection(); // Web browser will prompt for which Serial COM to use.
+
+<YourLoggingComponent logs={
+    serialDeviceWhisperer.connections.map(
+        (c) => c..logs || []
+    )
+}/>
+```
+
+## WebSocket Streaming
+Connect to MCUs that expose WebSocket interfaces for live data streaming.<br />
+_Currently this is for a server that allows multiple devices as clients to connect through, rather than one device as a server itself_
+
+```tsx
+import { WebsocketMultiDeviceWhisperer } from "ota-hub-reactjs";
+
+const websocketDeviceWhisperer = new WebsocketMultiDeviceWhisperer<EnhancedWebsocketConnectionState>("ws://192.168.1.100:8080");
+
+// then as Serial
+```
+
+## Flash Firmware
+Flash multiple MCUs with firmware images using esptool-js under the hood. - Currently only implemented in Serial, more to come!
+
+```ts
+await Promise.all(
+    serialDeviceWhisperer.connections
+      .map(c => serialDeviceWhisperer.handleFlashFirmware({ uuid: c.uuid, firmwareBlob: blobToFlash! }))
+);
+```
+
+# Message Layer Wrappers
+Supports Protobuf and other custom message layers for structured communication.
+
+```ts
+import { ProtobufMultiDeviceWhisperer } from "ota-hub-reactjs";
+
+
+const protobufSerialDeviceWhisperer = ProtobufMultiDeviceWhisperer<EnhancedSerialConnectionState, TXType, TXFromESP, RXToESP>({
+  transportLayer: serialDeviceWhisperer,
+  encodeRX: (msg) => RXToESP.encode(msg).finish(),
+  decodeTX: (bytes) => TXFromESP.decode(bytes),
+  messageTypeField: "txType",
+  rxTopicHandlerMap: logHandlerMap
+});
+```
+# Contributing
+Contributions are welcome! Please submit issues or pull requests via the GitHub repository.
+
+# License
+MIT License © 2025 OTA Hub

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from "@/base/device-whisperer.js";
-export * from "@/message_layers/protobuf-wrapper.js";
-export * from "@/transport_layers/serial-device-whisperer.js";
-export * from "@/transport_layers/websocket-device-whisperer.js";
+export * from "./base/device-whisperer.js";
+export * from "./message_layers/protobuf-wrapper.js";
+export * from "./transport_layers/serial-device-whisperer.js";
+export * from "./transport_layers/websocket-device-whisperer.js";

package/dist/index.js

@@ -1,7 +1,7 @@
 // Re-export core types/classes
-export * from "@/base/device-whisperer.js";
+export * from "./base/device-whisperer.js";
 // Message layer exports
-export * from "@/message_layers/protobuf-wrapper.js";
+export * from "./message_layers/protobuf-wrapper.js";
 // Transport layers
-export * from "@/transport_layers/serial-device-whisperer.js";
-export * from "@/transport_layers/websocket-device-whisperer.js";
+export * from "./transport_layers/serial-device-whisperer.js";
+export * from "./transport_layers/websocket-device-whisperer.js";

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

@@ -1,4 +1,4 @@
-import { AddConnectionProps, DeviceConnectionState, MultiDeviceWhisperer } from "@/base/device-whisperer.js";
+import { AddConnectionProps, DeviceConnectionState, MultiDeviceWhisperer } from "../base/device-whisperer.js";
 export type TopicHandlerContext<AppLayer extends DeviceConnectionState> = {
     base: ReturnType<typeof MultiDeviceWhisperer<AppLayer>>;
     uuid: string;
@@ -27,5 +27,5 @@ export declare function ProtobufMultiDeviceWhisperer<AppLayer extends DeviceConn
     updateConnection: (uuid: string, updater: (c: AppLayer) => AppLayer) => void;
     reconnectAll: () => void;
     updateConnectionName: (uuid: string, name: string) => void;
-    appendLog: (uuid: string, log: import("@/base/device-whisperer.js").LogLine) => void;
+    appendLog: (uuid: string, log: import("../base/device-whisperer.js").LogLine) => void;
 };

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

@@ -1,5 +1,5 @@
 import { FlashOptions, Transport } from "esptool-js";
-import { DeviceConnectionState, AddConnectionProps } from "@/base/device-whisperer.js";
+import { DeviceConnectionState, AddConnectionProps } from "../base/device-whisperer.js";
 export type SerialConnectionState = DeviceConnectionState & {
     port?: SerialPort;
     baudrate?: number;
@@ -27,5 +27,5 @@ export declare function SerialMultiDeviceWhisperer<AppOrMessageLayer extends Ser
     connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
-    appendLog: (uuid: string, log: import("@/base/device-whisperer.js").LogLine) => void;
+    appendLog: (uuid: string, log: import("../base/device-whisperer.js").LogLine) => void;
 };

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

@@ -1,5 +1,5 @@
 import { ESPLoader, Transport } from "esptool-js";
-import { MultiDeviceWhisperer } from "@/base/device-whisperer.js";
+import { MultiDeviceWhisperer } from "../base/device-whisperer.js";
 export function SerialMultiDeviceWhisperer({ ...props } = {}) {
     const base = MultiDeviceWhisperer(props);
     const defaultOnReceive = (uuid, data) => {

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

@@ -1,4 +1,4 @@
-import { DeviceConnectionState, AddConnectionProps } from "@/base/device-whisperer.js";
+import { DeviceConnectionState, AddConnectionProps } from "../base/device-whisperer.js";
 export type WebsocketConnectionState = DeviceConnectionState & {
     ws?: WebSocket;
 };
@@ -20,5 +20,5 @@ export declare function WebsocketMultiDeviceWhisperer<AppOrMessageLayer extends
     connectionsRef: import("react").RefObject<AppOrMessageLayer[]>;
     updateConnection: (uuid: string, updater: (c: AppOrMessageLayer) => AppOrMessageLayer) => void;
     updateConnectionName: (uuid: string, name: string) => void;
-    appendLog: (uuid: string, log: import("@/base/device-whisperer.js").LogLine) => void;
+    appendLog: (uuid: string, log: import("../base/device-whisperer.js").LogLine) => void;
 };

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

@@ -1,4 +1,4 @@
-import { MultiDeviceWhisperer } from "@/base/device-whisperer.js";
+import { MultiDeviceWhisperer } from "../base/device-whisperer.js";
 export function WebsocketMultiDeviceWhisperer(server_url, server_port, { ...props } = {}) {
     const defaultOnReceive = (uuid, data) => {
         const conn = base.connectionsRef.current.find((c) => c.uuid === uuid);

package/package.json

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