feat: debounce connection suspension

package-lock.json

@@ -28,6 +28,7 @@
         "@types/dom-view-transitions": "^1.0.1",
         "@types/flexsearch": "^0.7.3",
         "@types/w3c-web-serial": "^1.0.3",
+        "@types/w3c-web-usb": "^1.0.10",
         "@vite-pwa/sveltekit": "^0.2.7",
         "autoprefixer": "^10.4.15",
         "codemirror": "^6.0.1",
@@ -3348,6 +3349,12 @@
       "integrity": "sha512-R4J/OjqKAUFQoXVIkaUTfzb/sl6hLh/ZhDTfowJTRMa7LhgEmI/jXV4zsL1u8HpNa853BxwNmDIr0pauizzwSQ==",
       "dev": true
     },
+    "node_modules/@types/w3c-web-usb": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/@types/w3c-web-usb/-/w3c-web-usb-1.0.10.tgz",
+      "integrity": "sha512-CHgUI5kTc/QLMP8hODUHhge0D4vx+9UiAwIGiT0sTy/B2XpdX1U5rJt6JSISgr6ikRT7vxV9EVAFeYZqUnl1gQ==",
+      "dev": true
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.0.tgz",

package.json

@@ -48,6 +48,7 @@
     "@types/dom-view-transitions": "^1.0.1",
     "@types/flexsearch": "^0.7.3",
     "@types/w3c-web-serial": "^1.0.3",
+    "@types/w3c-web-usb": "^1.0.10",
     "@vite-pwa/sveltekit": "^0.2.7",
     "autoprefixer": "^10.4.15",
     "codemirror": "^6.0.1",

src/lib/serial/device.ts

@@ -16,7 +16,7 @@ const KEY_COUNTS = {
   ONE: 90,
   LITE: 67,
   X: 256,
-}
+} as const
 
 if (browser && navigator.serial === undefined && import.meta.env.TAURI_FAMILY !== undefined) {
   await import("./tauri-serial")
@@ -51,12 +51,19 @@ export class CharaDevice {
 
   private lock?: Promise<true>
 
+  private readonly suspendDebounce = 100
+  private suspendDebounceId?: number
+
   version!: SemVer
   company!: "CHARACHORDER"
   device!: "ONE" | "LITE" | "X"
   chipset!: "M0" | "S2"
   keyCount!: 90 | 67 | 256
 
+  get portInfo() {
+    return this.port.getInfo()
+  }
+
   constructor(private readonly baudRate = 115200) {}
 
   async init(manual = false) {
@@ -165,10 +172,18 @@ export class CharaDevice {
     const exec = new Promise<T>(async resolve => {
       let result!: T
       try {
-        await this.wake()
+        if (this.suspendDebounceId) {
+          clearTimeout(this.suspendDebounceId)
+        } else {
+          await this.wake()
+        }
         result = await callback(send, read)
       } finally {
-        await this.suspend()
+        this.suspendDebounceId = setTimeout(() => {
+          // cannot be locked here as all the code until clearTimeout is sync
+          console.assert(this.lock === undefined)
+          this.lock = this.suspend().then(() => true)
+        }, this.suspendDebounce) as any
         this.lock = undefined
         resolve(result)
       }

src/lib/serial/updater.ts

@@ -0,0 +1,12 @@
+export async function updateDevice(port: SerialPort) {
+  await port.open({
+    baudRate: 115200,
+    dataBits: 8,
+    stopBits: 1,
+    parity: "none",
+    bufferSize: 255,;
+  })
+
+  const writer = port.writable!.getWriter()
+  const reader = port.readable!.getReader()
+}

src/routes/ConnectionPopup.svelte

@@ -21,6 +21,13 @@
     powerDialog = false
   }
 
+  async function updateFirmware() {
+    const {usbVendorId: vendorId, usbProductId: productId} = $serialPort!.portInfo
+    $serialPort!.bootloader()
+    await new Promise(resolve => setTimeout(resolve, 1000))
+    console.log(await navigator.usb.requestDevice({filters: [{vendorId, productId}]}))
+  }
+
   let rebootInfo = false
   let terminal = false
   let powerDialog = false
@@ -44,6 +51,7 @@
       <br />
       Version {$serialPort.version}
     </p>
+    <!--<button on:click={updateFirmware}>Update</button>-->
   {/if}
 
   {#if browser}