Add typed ipc

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">

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>

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
   })
 })

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)
 })
 

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) {