fix: add 'disconnect' event for the webHID device

packages/webhid-demo/src/app.ts

@@ -16,6 +16,14 @@ async function openDevice(device: HIDDevice): Promise<void> {
 
 	appendLog(`Connected to "${xkeys.info.name}"`)
 
+	xkeys.on('disconnected', () => {
+		appendLog(`${xkeys.info.name} was disconnected`)
+		// Clean up stuff:
+		xkeys.removeAllListeners()
+	})
+	xkeys.on('error', (...errs) => {
+		appendLog('X-keys error:' + errs.join(','))
+	})
 	xkeys.on('down', (keyIndex: number) => {
 		appendLog(`Button ${keyIndex} down`)
 		xkeys.setBacklight(keyIndex, 'blue')

packages/webhid/src/globalDisconnectListener.ts

@@ -0,0 +1,34 @@
+export class GlobalDisconnectListener {
+	private static listeners = new Map<HIDDevice, () => void>()
+	private static isSetup = false
+
+	/** Add listener for disconnect event, for a HIDDevice. The callback will be fired once. */
+	static listenForDisconnect(device: HIDDevice, callback: () => void) {
+		this.setup()
+		this.listeners.set(device, callback)
+	}
+
+	private static setup() {
+		if (this.isSetup) return
+		navigator.hid.addEventListener('disconnect', this.handleDisconnect)
+		this.isSetup = true
+	}
+	private static handleDisconnect = (ev: HIDConnectionEvent) => {
+		this.listeners.forEach((callback, device) => {
+			if (device === ev.device) {
+				callback()
+				// Also remove the listener:
+				this.listeners.delete(device)
+			}
+		})
+		if (this.listeners.size === 0) {
+			// If there are not listeners, we can teardown the global listener:
+			this.teardown()
+		}
+	}
+	private static teardown() {
+		navigator.hid.removeEventListener('disconnect', this.handleDisconnect)
+		this.listeners.clear()
+		this.isSetup = false
+	}
+}

packages/webhid/src/methods.ts

@@ -1,5 +1,6 @@
 import { XKeys, XKEYS_VENDOR_ID } from '@xkeys-lib/core'
 import { WebHIDDevice } from './web-hid-wrapper'
+import { GlobalDisconnectListener } from './globalDisconnectListener'
 
 /** Prompts the user for which X-keys panel to select */
 export async function requestXkeysPanels(): Promise<HIDDevice[]> {
@@ -58,6 +59,11 @@ export async function setupXkeysPanel(browserDevice: HIDDevice): Promise<XKeys>
 		undefined
 	)
 
+	// Setup listener for disconnect:
+	GlobalDisconnectListener.listenForDisconnect(browserDevice, () => {
+		xkeys._handleDeviceDisconnected()
+	})
+
 	// Wait for the device to initialize:
 	try {
 		await xkeys.init()