@alexgyver/serial 1.0.0 → 1.0.2

package/README.md

@@ -1,4 +1,38 @@
 # Serial.js
-Web Serial API wrapper, [demo](https://gyverlibs.github.io/Serial.js/test/).
+Обёртка на Web Serial API
+- Автоматическое переподключение
+- Сохранение последнего выбранного порта
+- Буферизация отправки
+- Буферизация приёма, разделение текста по разделителю
 
-> npm i @alexgyver/serial
+> npm i @alexgyver/serial
+
+## Дока
+```js
+constructor(params = {});
+config(params = {});
+// eol: /\r?\n/
+// baud: 115200
+// reconnect: 1000
+
+onbin(b);
+ontext(t);
+
+onopen():
+onclose():
+onchange(s):
+onselect(name);
+onerror(e);
+
+static supported();
+opened();
+selected();
+getName();
+
+select();
+open();
+close();
+
+sendBin(data);
+sendText(text);
+```

package/package.json

@@ -1,20 +1,26 @@
 {
   "name": "@alexgyver/serial",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Web Serial API wrapper",
   "main": "./serial.js",
   "module": "./serial.js",
   "types": "./serial.js",
   "scripts": {
-    "build": "webpack --config ./webpack.config.js"
+    "build": "webpack --config ./webpack.config.js",
+    "dev": "webpack serve --config ./webpack.dev.config.js & webpack --config ./webpack.dev.config.js"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/GyverLibs/Serial.js.git"
   },
   "devDependencies": {
-    "webpack": "^5.98.0",
-    "webpack-cli": "^6.0.1"
+    "webpack": "^5.103.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.2",
+    "html-webpack-plugin": "^5.6.5"
+  },
+  "dependencies": {
+    "@alexgyver/utils": "^1.2.3"
   },
   "author": "AlexGyver <alex@alexgyver.ru>",
   "license": "MIT"

package/serial.js

@@ -1,28 +1,56 @@
+import { sleep, ShiftBuffer, StreamSplitter } from "@alexgyver/utils";
+
+const States = {
+    Open: 1,
+    Closing: 2,
+    Closed: 3,
+};
+
 export default class SerialJS {
     //#region handlers
     onbin = null;
     ontext = null;
-    async onopen() { }
-    async onclose() { }
-    async onerror(e) { }
-    async onportchange(selected) { }
+
+    onopen() { }
+    onclose() { }
+    onchange(s) { }
+    onselect(name) { }
+    onerror(e) { }
 
     //#region constructor
-    constructor() {
-        this._ok = 'serial' in navigator;
-        if (this._ok) this._update().then(() => this.onportchange(this.selected()));
-        else this._error('Browser is not supported');
+    constructor(params = {}) {
+        const def = {
+            eol: /\r?\n/,
+            baud: 115200,
+            reconnect: 1000,
+        };
+        this.cfg = { ...def, ...params };
+
+        this._setLastPort().then(() => this.onselect(this.getName()));
+        this.splitter = new StreamSplitter(this.cfg.eol);
+        this.splitter.ontext = (t) => this.ontext(t);
+    }
+
+    config(params = {}) {
+        this.cfg = { ...this.cfg, ...params };
+        this.splitter.eol = this.cfg.eol;
     }
 
     //#region methods
+    static supported() {
+        return 'serial' in navigator;
+    }
+
     opened() {
-        return this._open;
+        return this._state == States.Open;
     }
+
     selected() {
         return !!this._port;
     }
+
     getName() {
-        if (!this._port) return 'None';
+        if (!this._port) return null;
 
         switch (this._port.getInfo().usbProductId) {
             case 0x55d3: return 'CH343';
@@ -36,129 +64,124 @@ export default class SerialJS {
     }
 
     async select() {
-        if (!this._ok) return;
-
         try {
             await this.close();
+            this._port = null;
             let ports = await navigator.serial.getPorts();
             for (let p of ports) await p.forget();
+            await sleep(50);
             await navigator.serial.requestPort();
-            await this._update();
+            await this._setLastPort();
         } catch (e) {
-            this._port = null;
             this._error(e);
         }
-        this.onportchange(this.selected());
+        this.onselect(this.getName());
+        return this.selected();
+    }
+
+    async open() {
+        if (this.cfg.reconnect) this.retry = true;
+        await this._open();
     }
-    async open(baud = 115200) {
-        if (!this._ok) return;
+    async _open() {
+        if (this.opened()) return;
 
         try {
-            await this.close();
-            await this._update();
-            if (!this.selected()) throw "No port";
-            try {
-                await this._port.open({ baudRate: baud });
-                this._open = true;
-                this.onopen();
-                this.reader.reset();
-                await this._readLoop();
-            } finally {
-                await this._port.close();
-                this._open = false;
-                this.onclose();
+            await this._close();
+            await this._setLastPort();
+            await this._port.open({ baudRate: this.cfg.baud });
+            this.writer = this._port.writable.getWriter();
+            this.reader = this._port.readable.getReader();
+            this._buffer.clear();
+            this._state = States.Open;
+            this._change(true);
+
+            while (this._state == States.Open) {
+                const { value, done } = await this.reader.read();
+                if (done) break;
+                if (value) {
+                    if (this.onbin) this.onbin(value);
+                    if (this.ontext) this.splitter.write(this._decoder.decode(value, { stream: true }));
+                }
             }
         } catch (e) {
             this._error(e);
+            if (this.retry) setTimeout(() => this._open(), this.cfg.reconnect);
         }
-    }
-    async close() {
-        if (!this._ok) return;
-        if (!this._open) return;
 
-        this._close = true;
-        if (this._reader) await this._reader.cancel();
+        if (this.reader) this.reader.releaseLock();
+        if (this.writer) this.writer.releaseLock();
+        this.reader = null;
+        this.writer = null;
+        this._state = States.Closed;
 
-        while (this._open) await new Promise(r => setTimeout(r, 10));
+        try {
+            await this._port.close();
+            this._change(false);
+        } catch (e) { }
     }
 
-    async sendBin(data) {
-        if (!this._ok) return;
-        if (!this.opened()) return;
+    async close() {
+        this.retry = false;
+        await this._close();
+    }
+    async _close() {
+        switch (this._state) {
+            case States.Closed: return;
+            case States.Open:
+                if (this.reader) await this.reader.cancel();
+                this._state = States.Closing;
+                break;
+        }
 
-        try {
-            let writer = this._port.writable.getWriter();
-            await writer.write(data);
-            writer.releaseLock();
-        } catch (e) {
-            this._error(e);
+        let i = 0;
+        while (this._state == States.Closing) {
+            await sleep(10);
+            if (++i > 200) {
+                this._error('Close timeout');
+                this._state = States.Closed;
+                break;
+            }
         }
+
     }
+
     async sendText(text) {
         await this.sendBin((new TextEncoder()).encode(text));
     }
 
-    reader = new SplitReader();
+    async sendBin(data) {
+        this._buffer.push(data);
+        this._send();
+    }
 
     //#region private
     _port = null;
-    _open = false;
-    _close = false;
-    _reader = null;
-
-    _error(e) {
-        this.onerror('[SerialJS] ' + e);
-    }
-    async _update() {
-        let ports = await navigator.serial.getPorts();
-        this._port = ports.length ? ports[0] : null;
-    }
-    async _readLoop() {
-        this._close = false;
-        if (this._port.readable) this._reader = this._port.readable.getReader();
-        while (this._port.readable && !this._close) {
+    _state = States.Closed;
+    _buffer = new ShiftBuffer();
+    _decoder = new TextDecoder();
+
+    async _send() {
+        if (this._busy) return;
+        this._busy = true;
+        while (this._buffer.length) {
+            let d = this._buffer.shiftAll();
             try {
-                while (true) {
-                    let read = await this._reader.read();
-                    if (read.done) break;
-                    if (this.onbin) this.onbin(read.value);
-                    if (this.ontext) this.ontext(new TextDecoder().decode(read.value));
-                    if (this.reader.ontext) this.reader._write(new TextDecoder().decode(read.value));
-                }
-            } finally {
-                this._reader.releaseLock();
-                this._reader = null;
-            }
+                if (this.writer) await this.writer.write(d);
+            } catch (e) { }
         }
+        this._busy = false;
     }
-}
-
-class SplitReader {
-    ontext = null;
-
-    setEOL(eol) {
-        this._eol = eol;
-        this.reset();
+    async _setLastPort() {
+        let ports = await navigator.serial.getPorts();
+        this._port = ports.length ? ports[0] : null;
     }
 
-    reset() {
-        this._buf = "";
-        this._skip = true;
+    _error(e) {
+        this.onerror('[SerialJS] ' + e);
     }
-
-    _write(str) {
-        this._buf += str;
-        let t = this._buf.split(this._eol);
-        if (t.length == 1) return;
-
-        if (t[t.length - 1].length) this._buf = t.pop();
-        else this._buf = "", t.pop();
-
-        if (this._skip) t.shift(), this._skip = false;
-        t.map(this.ontext);
+    _change(s) {
+        this.onchange(s);
+        s ? this.onopen() : this.onclose();
     }
-
-    _buf = "";
-    _skip = true;
-    _eol = /\r?\n/;
 }

package/serial.min.js

@@ -1 +1 @@
-var e={d:(t,s)=>{for(var r in s)e.o(s,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:s[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{A:()=>s});class s{onbin=null;ontext=null;async onopen(){}async onclose(){}async onerror(e){}async onportchange(e){}constructor(){this._ok="serial"in navigator,this._ok?this._update().then((()=>this.onportchange(this.selected()))):this._error("Browser is not supported")}opened(){return this._open}selected(){return!!this._port}getName(){if(!this._port)return"None";switch(this._port.getInfo().usbProductId){case 21971:return"CH343";case 30084:return"CH340S";case 29986:case 29987:return"CH340";case 21778:case 21795:case 21892:return"CH341";case 1026:case 1027:case 1028:case 1029:case 24577:case 1538:case 24592:return"FT232";case 38144:case 258:case 1281:case 32937:case 6e4:case 60001:case 60003:return"CP210x"}return"Unknown"}async select(){if(this._ok){try{await this.close();let e=await navigator.serial.getPorts();for(let t of e)await t.forget();await navigator.serial.requestPort(),await this._update()}catch(e){this._port=null,this._error(e)}this.onportchange(this.selected())}}async open(e=115200){if(this._ok)try{if(await this.close(),await this._update(),!this.selected())throw"No port";try{await this._port.open({baudRate:e}),this._open=!0,this.onopen(),this.reader.reset(),await this._readLoop()}finally{await this._port.close(),this._open=!1,this.onclose()}}catch(e){this._error(e)}}async close(){if(this._ok&&this._open)for(this._close=!0,this._reader&&await this._reader.cancel();this._open;)await new Promise((e=>setTimeout(e,10)))}async sendBin(e){if(this._ok&&this.opened())try{let t=this._port.writable.getWriter();await t.write(e),t.releaseLock()}catch(e){this._error(e)}}async sendText(e){await this.sendBin((new TextEncoder).encode(e))}reader=new r;_port=null;_open=!1;_close=!1;_reader=null;_error(e){this.onerror("[SerialJS] "+e)}async _update(){let e=await navigator.serial.getPorts();this._port=e.length?e[0]:null}async _readLoop(){for(this._close=!1,this._port.readable&&(this._reader=this._port.readable.getReader());this._port.readable&&!this._close;)try{for(;;){let e=await this._reader.read();if(e.done)break;this.onbin&&this.onbin(e.value),this.ontext&&this.ontext((new TextDecoder).decode(e.value)),this.reader.ontext&&this.reader._write((new TextDecoder).decode(e.value))}}finally{this._reader.releaseLock(),this._reader=null}}}class r{ontext=null;setEOL(e){this._eol=e,this.reset()}reset(){this._buf="",this._skip=!0}_write(e){this._buf+=e;let t=this._buf.split(this._eol);1!=t.length&&(t[t.length-1].length?this._buf=t.pop():(this._buf="",t.pop()),this._skip&&(t.shift(),this._skip=!1),t.map(this.ontext))}_buf="";_skip=!0;_eol=/\r?\n/}var a=t.A;export{a as default};
+const t=t=>new Promise(e=>setTimeout(e,t));class e{ontext=null;constructor(t=/\r?\n/,e=!1){this.eol=t,this.skip=e}reset(){this._buf=""}write(t){if(!this.ontext)return;if(!this.eol)return void this.ontext(t);this._buf+=t;let e=this._buf.split(this.eol);1!=e.length&&(e[e.length-1].length?this._buf=e.pop():(this._buf="",e.pop()),this.skip&&(e.shift(),this.skip=!1),e.forEach(t=>this.ontext(t)))}_buf=""}class s{constructor(){this.chunks=[],this.length=0}clear(){this.chunks=[]}push(t){return this.chunks.push(t),this.length+=t.length,!0}shift(t){t>this.length&&(t=this.length);const e=new Uint8Array(t);let s=0;for(;t>0;){const i=this.chunks[0];t>=i.length?(e.set(i,s),s+=i.length,t-=i.length,this.chunks.shift(),this.length-=i.length):(e.set(i.subarray(0,t),s),this.chunks[0]=i.subarray(t),this.length-=t,t=0)}return e}shiftAll(){return this.shift(this.length)}}class i{onbin=null;ontext=null;onopen(){}onclose(){}onchange(t){}onselect(t){}onerror(t){}constructor(t={}){this.cfg={eol:/\r?\n/,baud:115200,reconnect:1e3,...t},this._setLastPort().then(()=>this.onselect(this.getName())),this.splitter=new e(this.cfg.eol),this.splitter.ontext=t=>this.ontext(t)}config(t={}){this.cfg={...this.cfg,...t},this.splitter.eol=this.cfg.eol}static supported(){return"serial"in navigator}opened(){return 1==this._state}selected(){return!!this._port}getName(){if(!this._port)return null;switch(this._port.getInfo().usbProductId){case 21971:return"CH343";case 30084:return"CH340S";case 29986:case 29987:return"CH340";case 21778:case 21795:case 21892:return"CH341";case 1026:case 1027:case 1028:case 1029:case 24577:case 1538:case 24592:return"FT232";case 38144:case 258:case 1281:case 32937:case 6e4:case 60001:case 60003:return"CP210x"}return"Unknown"}async select(){try{await this.close(),this._port=null;let e=await navigator.serial.getPorts();for(let t of e)await t.forget();await t(50),await navigator.serial.requestPort(),await this._setLastPort()}catch(t){this._error(t)}return this.onselect(this.getName()),this.selected()}async open(){this.cfg.reconnect&&(this.retry=!0),await this._open()}async _open(){if(!this.opened()){try{for(await this._close(),await this._setLastPort(),await this._port.open({baudRate:this.cfg.baud}),this.writer=this._port.writable.getWriter(),this.reader=this._port.readable.getReader(),this._buffer.clear(),this._state=1,this._change(!0);1==this._state;){const{value:t,done:e}=await this.reader.read();if(e)break;t&&(this.onbin&&this.onbin(t),this.ontext&&this.splitter.write(this._decoder.decode(t,{stream:!0})))}}catch(t){this._error(t),this.retry&&setTimeout(()=>this._open(),this.cfg.reconnect)}this.reader&&this.reader.releaseLock(),this.writer&&this.writer.releaseLock(),this.reader=null,this.writer=null,this._state=3;try{await this._port.close(),this._change(!1)}catch(t){}}}async close(){this.retry=!1,await this._close()}async _close(){switch(this._state){case 3:return;case 1:this.reader&&await this.reader.cancel(),this._state=2}let e=0;for(;2==this._state;)if(await t(10),++e>200){this._error("Close timeout"),this._state=3;break}}async sendText(t){await this.sendBin((new TextEncoder).encode(t))}async sendBin(t){this._buffer.push(t),this._send()}_port=null;_state=3;_buffer=new s;_decoder=new TextDecoder;async _send(){if(!this._busy){for(this._busy=!0;this._buffer.length;){let t=this._buffer.shiftAll();try{this.writer&&await this.writer.write(t)}catch(t){}}this._busy=!1}}async _setLastPort(){let t=await navigator.serial.getPorts();this._port=t.length?t[0]:null}_error(t){this.onerror("[SerialJS] "+t)}_change(t){this.onchange(t),t?this.onopen():this.onclose()}}export{i as default};

package/test/index.html

@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
   <script src="script.js" type="module" defer="defer"></script>
+  <title>Serial test</title>
 </head>
 
 <body>

package/test/script.js

@@ -3,18 +3,16 @@ import SerialJS from "https://gyverlibs.github.io/Serial.js/serial.min.js";
 let i = 0;
 let ser = new SerialJS();
 
+// control
 select_b.onclick = () => ser.select();
 open_b.onclick = () => ser.open();
 close_b.onclick = () => ser.close();
 send_b.onclick = () => ser.sendText('Hello ' + i++);
 
-// split reader
-// ser.reader.setEOL(/\r?\n/);  // default
-ser.reader.ontext = t => console.log(t);
-
-// read raw
+// read
 // ser.onbin = b => console.log(b);
-// ser.ontext = t => console.log(t);
+ser.ontext = t => console.log(t);
+// ser.online = t => console.log(t);
 
 // state
 ser.onopen = () => {
@@ -26,6 +24,6 @@ ser.onclose = () => {
 ser.onerror = e => {
     console.log(e);
 }
-ser.onportchange = () => {
-    console.log('port change', ser.selected(), ser.getName());
+ser.onselect = (port) => {
+    console.log('port change', port);
 }

package/test_arduino/test_arduino.ino

@@ -0,0 +1,12 @@
+#include <Arduino.h>
+
+void setup() {
+    Serial.begin(115200);
+    Serial.setTimeout(10);
+}
+
+void loop() {
+    if (Serial.available()) {
+        Serial.println(Serial.readString());
+    }
+}

package/test_dev/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+  <script src="script.js" type="module" defer="defer"></script>
+  <title>Serial test</title>
+</head>
+
+<body>
+  <button id="select_b">select</button>
+  <button id="open_b">open</button>
+  <button id="close_b">close</button>
+  <button id="send_b">send</button>
+</body>
+
+</html>

package/test_dev/script.js

@@ -0,0 +1,29 @@
+import SerialJS from "../serial";
+
+let i = 0;
+let ser = new SerialJS();
+
+// control
+select_b.onclick = () => ser.select();
+open_b.onclick = () => ser.open();
+close_b.onclick = () => ser.close();
+send_b.onclick = () => ser.sendText('Hello ' + i++);
+
+// read
+// ser.onbin = b => console.log(b);
+ser.ontext = t => console.log(t);
+// ser.online = t => console.log(t);
+
+// state
+ser.onopen = () => {
+    console.log('Opened', ser.getName());
+}
+ser.onclose = () => {
+    console.log('Closed');
+}
+ser.onerror = e => {
+    console.log(e);
+}
+ser.onselect = (port) => {
+    console.log('port change', port);
+}

package/webpack.dev.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const PACKAGE = require('./package.json');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+    entry: {
+        index: './test_dev/script.js',
+    },
+
+    output: {
+        filename: 'script.js',
+        path: path.resolve(__dirname, 'dev'),
+        clean: true,
+    },
+
+    plugins: [
+        new HtmlWebpackPlugin({
+            template: `./test_dev/index.html`,
+            filename: `index.html`,
+            inject: true,
+            minify: false,
+            version: PACKAGE.version,
+            title: PACKAGE.title,
+        }),
+    ],
+
+    devServer: {
+        watchFiles: ['test_dev/*.html'],
+        static: path.resolve(__dirname, './dev'),
+        hot: true,
+        open: true,
+    },
+
+    watchOptions: {
+        poll: 1000,
+    },
+
+    mode: 'development',
+};