✨ Makes socket messages event typed

app/src/routes/peripherals/i2c/i2c.svelte

@@ -2,7 +2,7 @@
   import SettingsCard from '$lib/components/SettingsCard.svelte'
   import { onMount } from 'svelte'
   import { socket } from '$lib/stores'
-  import type { I2CDevice } from '$lib/types/models'
+  import { Topics, type I2CDevice } from '$lib/types/models'
   import { Connection } from '$lib/components/icons'
   import I2CSetting from './i2cSetting.svelte'
 
@@ -24,9 +24,9 @@
   let isLoading = $state(false)
 
   onMount(() => {
-    socket.on('i2cScan', handleScan)
+    socket.on(Topics.i2cScan, handleScan)
     triggerScan()
-    return () => socket.off('i2cScan', handleScan)
+    return () => socket.off(Topics.i2cScan, handleScan)
   })
 
   const handleScan = (data: any) => {
@@ -43,7 +43,7 @@
 
   const triggerScan = () => {
     isLoading = true
-    socket.sendEvent('i2cScan', '')
+    socket.sendEvent(Topics.i2cScan, '')
   }
 </script>
 

app/src/routes/peripherals/i2c/i2cSetting.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Cancel, Edit, EditOff, Power } from '$lib/components/icons'
   import { socket } from '$lib/stores'
-  import type { PeripheralsConfiguration } from '$lib/types/models'
+  import { Topics, type PeripheralsConfiguration } from '$lib/types/models'
   import { onMount } from 'svelte'
   import { modals } from 'svelte-modals'
   import ConfirmDialog from '$lib/components/ConfirmDialog.svelte'
@@ -10,9 +10,9 @@
   let isEditing = $state(false)
 
   onMount(() => {
-    socket.on('peripheralSettings', handleSettings)
-    socket.sendEvent('peripheralSettings', '')
-    return () => socket.off('peripheralSettings', handleSettings)
+    socket.on(Topics.peripheralSettings, handleSettings)
+    socket.sendEvent(Topics.peripheralSettings, '')
+    return () => socket.off(Topics.peripheralSettings, handleSettings)
   })
 
   const handleSettings = (data: any) => {
@@ -30,7 +30,7 @@
       },
       onConfirm: () => {
         modals.close()
-        socket.sendEvent('peripheralSettings', settings)
+        socket.sendEvent(Topics.peripheralSettings, settings)
       }
     })
   }

app/src/routes/peripherals/imu/imu.svelte

@@ -1,51 +1,51 @@
 <script lang="ts">
-  import SettingsCard from '$lib/components/SettingsCard.svelte';
-  import { imu } from '$lib/stores/imu';
-  import { Chart, registerables } from 'chart.js';
-  import { cubicOut } from 'svelte/easing';
-  import { slide } from 'svelte/transition';
-  import { onDestroy, onMount } from 'svelte';
-  import { socket } from '$lib/stores';
-  import type { IMU } from '$lib/types/models';
-  import { useFeatureFlags } from '$lib/stores/featureFlags';
-  import { Rotate3d } from '$lib/components/icons';
+  import SettingsCard from '$lib/components/SettingsCard.svelte'
+  import { imu } from '$lib/stores/imu'
+  import { Chart, registerables } from 'chart.js'
+  import { cubicOut } from 'svelte/easing'
+  import { slide } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
+  import { socket } from '$lib/stores'
+  import { Topics, type IMU } from '$lib/types/models'
+  import { useFeatureFlags } from '$lib/stores/featureFlags'
+  import { Rotate3d } from '$lib/components/icons'
 
-  Chart.register(...registerables);
+  Chart.register(...registerables)
 
-  const features = useFeatureFlags();
-  let intervalId: ReturnType<typeof setInterval> | number;
+  const features = useFeatureFlags()
+  let intervalId: ReturnType<typeof setInterval> | number
 
-  let angleChartElement: HTMLCanvasElement;
-  let tempChartElement: HTMLCanvasElement;
-  let altitudeChartElement: HTMLCanvasElement;
+  let angleChartElement: HTMLCanvasElement
+  let tempChartElement: HTMLCanvasElement
+  let altitudeChartElement: HTMLCanvasElement
 
-  let angleChart: Chart;
-  let tempChart: Chart;
-  let altitudeChart: Chart;
+  let angleChart: Chart
+  let tempChart: Chart
+  let altitudeChart: Chart
 
   const getChartColors = () => {
-    const style = getComputedStyle(document.body);
+    const style = getComputedStyle(document.body)
     return {
       primary: style.getPropertyValue('--color-primary'),
       secondary: style.getPropertyValue('--color-secondary'),
       accent: style.getPropertyValue('--color-accent'),
-      background: style.getPropertyValue('--color-background'),
-    };
-  };
+      background: style.getPropertyValue('--color-background')
+    }
+  }
 
   const createBaseChartConfig = (bgColor: string) => ({
     maintainAspectRatio: false,
     responsive: true,
     plugins: {
       legend: { display: true },
-      tooltip: { mode: 'index' as const, intersect: false },
+      tooltip: { mode: 'index' as const, intersect: false }
     },
     elements: { point: { radius: 1 } },
     scales: {
       x: {
         grid: { color: bgColor },
         ticks: { color: bgColor },
-        display: false,
+        display: false
       },
       y: {
         type: 'linear' as const,
@@ -54,14 +54,14 @@
         max: 10,
         grid: { color: bgColor },
         ticks: { color: bgColor },
-        border: { color: bgColor },
-      },
-    },
-  });
+        border: { color: bgColor }
+      }
+    }
+  })
 
   const initializeCharts = () => {
-    const colors = getChartColors();
-    const baseConfig = createBaseChartConfig(colors.background);
+    const colors = getChartColors()
+    const baseConfig = createBaseChartConfig(colors.background)
 
     angleChart = new Chart(angleChartElement, {
       type: 'line',
@@ -73,7 +73,7 @@
             backgroundColor: colors.primary,
             borderWidth: 2,
             data: $imu.x,
-            yAxisID: 'y',
+            yAxisID: 'y'
           },
           {
             label: 'y',
@@ -81,7 +81,7 @@
             backgroundColor: colors.secondary,
             borderWidth: 2,
             data: $imu.y,
-            yAxisID: 'y',
+            yAxisID: 'y'
           },
           {
             label: 'z',
@@ -89,9 +89,9 @@
             backgroundColor: colors.accent,
             borderWidth: 2,
             data: $imu.z,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -103,12 +103,12 @@
               display: true,
               text: 'Angle [°]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
 
     tempChart = new Chart(tempChartElement, {
       type: 'line',
@@ -120,9 +120,9 @@
             backgroundColor: colors.secondary,
             borderWidth: 2,
             data: $imu.bmp_temp,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -134,12 +134,12 @@
               display: true,
               text: 'Temperature [C°]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
 
     altitudeChart = new Chart(altitudeChartElement, {
       type: 'line',
@@ -151,9 +151,9 @@
             backgroundColor: colors.primary,
             borderWidth: 2,
             data: $imu.altitude,
-            yAxisID: 'y',
-          },
-        ],
+            yAxisID: 'y'
+          }
+        ]
       },
       options: {
         ...baseConfig,
@@ -165,55 +165,55 @@
               display: true,
               text: 'Altitude [M]',
               color: colors.background,
-              font: { size: 16, weight: 'bold' },
-            },
-          },
-        },
-      },
-    });
-  };
+              font: { size: 16, weight: 'bold' }
+            }
+          }
+        }
+      }
+    })
+  }
 
   const updateChartData = (chart: Chart, data: number[], label: string) => {
-    chart.data.labels = data;
-    chart.data.datasets[0].data = data;
-    chart.options.scales!.y!.min = Math.min(...data) - 1;
-    chart.options.scales!.y!.max = Math.max(...data) + 1;
-    chart.update('none');
-  };
+    chart.data.labels = data
+    chart.data.datasets[0].data = data
+    chart.options.scales!.y!.min = Math.min(...data) - 1
+    chart.options.scales!.y!.max = Math.max(...data) + 1
+    chart.update('none')
+  }
 
   const updateData = () => {
     if ($features.imu) {
-      angleChart.data.labels = $imu.x;
-      angleChart.data.datasets[0].data = $imu.x;
-      angleChart.data.datasets[1].data = $imu.y;
-      angleChart.data.datasets[2].data = $imu.z;
+      angleChart.data.labels = $imu.x
+      angleChart.data.datasets[0].data = $imu.x
+      angleChart.data.datasets[1].data = $imu.y
+      angleChart.data.datasets[2].data = $imu.z
 
-      const allValues = [...$imu.x, ...$imu.y, ...$imu.z];
-      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1;
-      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1;
-      angleChart.update('none');
+      const allValues = [...$imu.x, ...$imu.y, ...$imu.z]
+      angleChart.options.scales!.y!.min = Math.min(...allValues) - 1
+      angleChart.options.scales!.y!.max = Math.max(...allValues) + 1
+      angleChart.update('none')
     }
 
     if ($features.bmp) {
-      updateChartData(tempChart, $imu.bmp_temp, 'Temperature');
-      updateChartData(altitudeChart, $imu.altitude, 'Altitude');
+      updateChartData(tempChart, $imu.bmp_temp, 'Temperature')
+      updateChartData(altitudeChart, $imu.altitude, 'Altitude')
     }
-  };
+  }
 
   onMount(() => {
-    socket.on('imu', (data: IMU) => {
-      console.log(data);
-      imu.addData(data);
-    });
+    socket.on(Topics.imu, (data: IMU) => {
+      console.log(data)
+      imu.addData(data)
+    })
 
-    initializeCharts();
-    intervalId = setInterval(updateData, 200);
-  });
+    initializeCharts()
+    intervalId = setInterval(updateData, 200)
+  })
 
   onDestroy(() => {
-    socket.off('imu');
-    clearInterval(intervalId);
-  });
+    socket.off(Topics.imu)
+    clearInterval(intervalId)
+  })
 </script>
 
 <SettingsCard collapsible={false}>

app/src/routes/peripherals/servo/servos.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { socket } from '$lib/stores'
+  import { Topics } from '$lib/types/models'
   import { throttler as Throttler } from '$lib/utilities'
 
   let { servoId = $bindable(0), pwm = $bindable(306) } = $props()
@@ -11,16 +12,16 @@
   const throttler = new Throttler()
 
   const activateServo = () => {
-    socket.sendEvent('servoState', { active: 1 })
+    socket.sendEvent(Topics.servoState, { active: 1 })
   }
 
   const deactivateServo = () => {
-    socket.sendEvent('servoState', { active: 0 })
+    socket.sendEvent(Topics.servoState, { active: 0 })
   }
 
   const updatePWM = () => {
     throttler.throttle(() => {
-      socket.sendEvent('servoPWM', { servo_id: servoId, pwm })
+      socket.sendEvent(Topics.servoPWM, { servo_id: servoId, pwm })
     }, 10)
   }