Add typed ipc

2024-03-02 18:09:16 +01:00
parent bee6ab1076
commit 43b384dfef
8 changed files with 89 additions and 103 deletions
--- a/src/main/backend/nanodevices.ts
+++ b/src/main/backend/nanodevices.ts
@@ -9,7 +9,7 @@ const NANO_BAUD_RATE = 115200

 class NanoDevices extends EventEmitter {
  all_nano_devices: { [key: string]: PortInfo } = {}
-  connected_nano_devices: { [key: string]: { port: SerialPort; data: string } } = {}
+  connected_nano_devices: { [key: string]: { port: SerialPort } } = {}

  _list() {
    return new Promise((resolve, reject) => {
@@ -105,7 +105,7 @@ class NanoDevices extends EventEmitter {
        })
        port.on('open', () => {
          resolve(nano_device.serialNumber)
-          this.connected_nano_devices[nano_device.serialNumber!] = { port: port, data: '' }
+          this.connected_nano_devices[nano_device.serialNumber!] = { port: port }
          this.emit('nanodevices:connected', nano_device.serialNumber)
        })
        port.on('data', (data) => {
--- a/src/preload/index.d.ts
+++ b/src/preload/index.d.ts
@@ -1,8 +1,31 @@
-import { ElectronAPI } from '@electron-toolkit/preload'
+export interface INanoDevicesAPI {
+  list_devices(): Promise<string[]>
+  connect(deviceid: string): Promise<string>
+  disconnect(deviceid: string): Promise<string>
+  on_event(
+    eventid_filter: string,
+    callback: (eventid: string, deviceid: string, data: any) => void
+  ): void
+  send(deviceid: string, jsonstr: string): Promise<void>
+}
+
+export interface IElectronAPI {
+  platform: NodeJS.Platform
+  isDevelopment: boolean
+  minimizeWindow: () => void
+  toggleMaximizeWindow: () => void
+  closeWindow: () => void
+  openExternal: (url: string) => void
+  onMaximized: (callback: () => void) => void
+  onUnmaximized: (callback: () => void) => void
+  onMenu: (callback: (key: string) => void) => void
+  openDevTools: () => void
+  reload: () => void
+}

 declare global {
  interface Window {
-    electron: ElectronAPI
-    api: unknown
+    nanoDevicesAPI: INanoDevicesAPI
+    electronAPI: IElectronAPI
  }
 }
--- a/src/preload/index.ts
+++ b/src/preload/index.ts
@@ -1,61 +1,43 @@
 import { contextBridge, ipcRenderer } from 'electron'
-import { electronAPI } from '@electron-toolkit/preload'

-// Custom APIs for renderer
-const api = {}
-
-// Use `contextBridge` APIs to expose Electron APIs to
-// renderer only if context isolation is enabled, otherwise
-// just add to the DOM global.
-if (process.contextIsolated) {
-  try {
-    // expose an API to choose available devices
-    contextBridge.exposeInMainWorld('nanodevices', {
-      list_devices() {
-        return ipcRenderer.invoke('nanodevices:list_devices')
-      },
-      connect(deviceid) {
-        return ipcRenderer.invoke('nanodevices:connect', deviceid)
-      },
-      disconnect(deviceid) {
-        return ipcRenderer.invoke('nanodevices:disconnect', deviceid)
-      },
-      on_event(eventid_filter, callback) {
-        console.log('attaching filter for ', eventid_filter)
-        ipcRenderer.on('nanodevices:event', (_event, eventid, deviceid, ...data) => {
-          console.log('Event in ipcRenderer ', eventid, deviceid, data)
-          if (eventid_filter == '*' || eventid_filter == eventid) {
-            callback(eventid, deviceid, ...data)
-          }
-        })
-      },
-      send(deviceid, jsonstr) {
-        return ipcRenderer.invoke('nanodevices:send', deviceid, jsonstr)
+// expose an API to choose available devices
+contextBridge.exposeInMainWorld('nanoDevicesAPI', {
+  list_devices() {
+    return ipcRenderer.invoke('nanodevices:list_devices')
+  },
+  connect(deviceid) {
+    return ipcRenderer.invoke('nanodevices:connect', deviceid)
+  },
+  disconnect(deviceid) {
+    return ipcRenderer.invoke('nanodevices:disconnect', deviceid)
+  },
+  on_event(eventid_filter, callback) {
+    console.log('attaching filter for ', eventid_filter)
+    ipcRenderer.on('nanodevices:event', (_event, eventid, deviceid, ...data) => {
+      console.log('Event in ipcRenderer ', eventid, deviceid, data)
+      if (eventid_filter == '*' || eventid_filter == eventid) {
+        callback(eventid, deviceid, ...data)
      }
    })
-
-    contextBridge.exposeInMainWorld('electron', {
-      platform: process.platform,
-      isDevelopment: process.env.NODE_ENV !== 'production',
-      minimizeWindow: () => ipcRenderer.send('electron:minimizeWindow'),
-      toggleMaximizeWindow: () => ipcRenderer.send('electron:toggleMaximizeWindow'),
-      closeWindow: () => ipcRenderer.send('electron:closeWindow'),
-      openExternal: (url) => ipcRenderer.send('electron:openExternal', url),
-      onMaximized: (callback) => ipcRenderer.on('electron:maximized', callback),
-      onUnmaximized: (callback) => ipcRenderer.on('electron:unmaximized', callback),
-      onMenu: (callback) =>
-        ipcRenderer.on('electron:menu', (event, key) => {
-          callback(key)
-        }),
-      openDevTools: () => ipcRenderer.send('electron:openDevTools'),
-      reload: () => ipcRenderer.send('electron:reload')
-    })
-  } catch (error) {
-    console.error(error)
+  },
+  send(deviceid, jsonstr) {
+    return ipcRenderer.invoke('nanodevices:send', deviceid, jsonstr)
  }
-} else {
-  // @ts-ignore (define in dts)
-  window.electron = electronAPI
-  // @ts-ignore (define in dts)
-  window.api = api
-}
+})
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  platform: process.platform,
+  isDevelopment: process.env.NODE_ENV !== 'production',
+  minimizeWindow: () => ipcRenderer.send('electron:minimizeWindow'),
+  toggleMaximizeWindow: () => ipcRenderer.send('electron:toggleMaximizeWindow'),
+  closeWindow: () => ipcRenderer.send('electron:closeWindow'),
+  openExternal: (url) => ipcRenderer.send('electron:openExternal', url),
+  onMaximized: (callback) => ipcRenderer.on('electron:maximized', callback),
+  onUnmaximized: (callback) => ipcRenderer.on('electron:unmaximized', callback),
+  onMenu: (callback) =>
+    ipcRenderer.on('electron:menu', (event, key) => {
+      callback(key)
+    }),
+  openDevTools: () => ipcRenderer.send('electron:openDevTools'),
+  reload: () => ipcRenderer.send('electron:reload')
+})
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -6,7 +6,7 @@ import Navbar from '@renderer/components/navbar/Navbar.vue'
 import { useStore } from '@renderer/store'
 import { useMessageHandlers } from '@renderer/device'

-const { electron } = window
+const { electronAPI, nanoDevicesAPI } = window
 const store = useStore()

 const menuActions = {
@@ -15,7 +15,7 @@ const menuActions = {
  skin: () => store.switchPreviewDeviceModel()
 }

-electron?.onMenu((key) => {
+electronAPI.onMenu((key) => {
  console.log('menu', key)
  if (menuActions[key]) {
    menuActions[key]()
@@ -26,24 +26,20 @@ store.fetchProfiles() // TODO remove me!

 // handle device events
 const handlers = useMessageHandlers(store)
-window.nanodevices.on_event('device-attached', (evt, deviceid, data) =>
-  store.device_attached(deviceid)
-)
-window.nanodevices.on_event('device-detached', (evt, deviceid, data) =>
-  store.device_detached(deviceid)
-)
-window.nanodevices.on_event('device-error', (evt, deviceid, data) => {
+nanoDevicesAPI.on_event('device-attached', (evt, deviceid, data) => store.device_attached(deviceid))
+nanoDevicesAPI.on_event('device-detached', (evt, deviceid, data) => store.device_detached(deviceid))
+nanoDevicesAPI.on_event('device-error', (evt, deviceid, data) => {
  /* TODO handle connection errors */
 })
-window.nanodevices.on_event('connected', (evt, deviceid, data) => store.device_connected(deviceid))
-window.nanodevices.on_event('disconnected', (evt, deviceid, data) =>
+nanoDevicesAPI.on_event('connected', (evt, deviceid, data) => store.device_connected(deviceid))
+nanoDevicesAPI.on_event('disconnected', (evt, deviceid, data) =>
  store.device_disconnected(deviceid)
 )
-window.nanodevices.on_event('update', (evt, deviceid, data) => {
+nanoDevicesAPI.on_event('update', (evt, deviceid, data) => {
  handlers.handle_message(data)
 })
 // get list of the currently attached devices
-window.nanodevices.list_devices().then((devs) => store.init_devices(devs))
+nanoDevicesAPI.list_devices().then((devs) => store.init_devices(devs))
 </script>
 <template>
  <main class="flex h-screen w-screen select-none flex-col">
--- a/src/renderer/src/components/Versions.vue
+++ b/src/renderer/src/components/Versions.vue
@@ -1,13 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue'
-
-const versions = reactive({ ...window.electron.process.versions })
-</script>
-
-<template>
-  <ul class="versions">
-    <li class="electron-version">Electron v{{ versions.electron }}</li>
-    <li class="chrome-version">Chromium v{{ versions.chrome }}</li>
-    <li class="node-version">Node v{{ versions.node }}</li>
-  </ul>
-</template>
--- a/src/renderer/src/components/navbar/Navbar.vue
+++ b/src/renderer/src/components/navbar/Navbar.vue
@@ -86,7 +86,7 @@
        </MenubarMenu>
        <MenubarButton
          class="app-titlebar-button"
-          @click="electron?.openExternal('https://discord.gg/jgRd77YN5T')"
+          @click="electronAPI.openExternal('https://discord.gg/jgRd77YN5T')"
        >
          Community
        </MenubarButton>
@@ -104,10 +104,10 @@
              <p>v0.1</p>
            </MenubarItem>
            <MenubarItem>Contact Support</MenubarItem>
-            <template v-if="electron?.isDevelopment">
+            <template v-if="electronAPI.isDevelopment">
              <MenubarSeparator />
-              <MenubarItem @click="electron?.openDevTools">Developer Tools</MenubarItem>
-              <MenubarItem @click="electron?.reload">Reload</MenubarItem>
+              <MenubarItem @click="electronAPI.openDevTools">Developer Tools</MenubarItem>
+              <MenubarItem @click="electronAPI.reload">Reload</MenubarItem>
            </template>
          </MenubarContent>
        </MenubarMenu>
@@ -124,21 +124,21 @@
        <button
          v-if="minimizable"
          class="app-titlebar-button flex grow items-center justify-center px-2 hover:text-white"
-          @click="electron?.minimizeWindow"
+          @click="electronAPI.minimizeWindow"
        >
          <Minus class="size-5" />
        </button>
        <button
          v-if="maximizable"
          class="app-titlebar-button flex grow items-center justify-center px-2 hover:text-white"
-          @click="electron?.toggleMaximizeWindow"
+          @click="electronAPI.toggleMaximizeWindow"
        >
          <Copy v-if="isMaximized" class="size-4" />
          <Square v-else class="mr-0.5 size-3.5" />
        </button>
        <button
          class="app-titlebar-button flex grow items-center justify-center px-2 hover:text-white"
-          @click="electron?.closeWindow"
+          @click="electronAPI.closeWindow"
        >
          <X class="mr-0.5 size-5" />
        </button>
@@ -171,9 +171,9 @@ const showDisconnectButton = ref(false)

 const isMaximized = ref(false)

-const { electron } = window
+const { electronAPI } = window

-const isMacOS = electron?.platform === 'darwin'
+const isMacOS = electronAPI.platform === 'darwin'
 const zoomFactor = ref(1)

 const previewDeviceNames = ref({
@@ -185,12 +185,12 @@ onMounted(() => {
  window.addEventListener('resize', () => {
    zoomFactor.value = window.outerWidth / window.innerWidth
  })
-  electron?.onMaximized((maximized) => {
+  electronAPI.onMaximized((maximized) => {
    console.log(maximized)
    isMaximized.value = true
  })

-  electron?.onUnmaximized(() => {
+  electronAPI.onUnmaximized(() => {
    isMaximized.value = false
  })
 })
--- a/src/renderer/src/main.ts
+++ b/src/renderer/src/main.ts
@@ -20,10 +20,8 @@ const app = createApp(App)
 app.use(pinia)
 app.use(i18n)

-app.config.globalProperties.window = window
-
 // TODO remove this
-window.nanodevices.on_event('*', (eventid, deviceid, ...data) => {
+window.nanoDevicesAPI.on_event('*', (eventid, deviceid, ...data) => {
  console.log('Event on window ', eventid, deviceid, data)
 })

--- a/src/renderer/src/store.ts
+++ b/src/renderer/src/store.ts
@@ -211,7 +211,7 @@ export const useStore = defineStore('main', {
        // TODO auto-connect to the device
        const deviceid = Object.keys(this.devices)[0]
        console.log('Auto-connecting to device ', deviceid)
-        window.nanodevices.connect(deviceid)
+        window.nanoDevicesAPI.connect(deviceid)
      }
    },
    update_devices(deviceid, attached) {
@@ -227,7 +227,7 @@ export const useStore = defineStore('main', {
      if (Object.keys(this.devices).length == 1) {
        // TODO auto-connect to the device
        console.log('Auto-connecting to device ', deviceid)
-        window.nanodevices.connect(deviceid)
+        window.nanoDevicesAPI.connect(deviceid)
      }
    },
    device_detached(deviceid) {