🌌 Migrate app to svelte-5

app/src/routes/peripherals/camera/Camera.svelte

@@ -6,8 +6,12 @@
 </script>
 
 <SettingsCard collapsible={false}>
-    <Camera slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    <span slot="title">Camera</span>
+    {#snippet icon()}
+		<Camera  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	{/snippet}
+    {#snippet title()}
+		<span >Camera</span>
+	{/snippet}
     <Stream />
     <CameraSetting />
 </SettingsCard>

app/src/routes/peripherals/camera/CameraSetting.svelte

@@ -2,7 +2,7 @@
 	import { api } from '$lib/api';
 	import Spinner from '$lib/components/Spinner.svelte';
     import type { CameraSettings } from '$lib/types/models';
-    let settings:CameraSettings
+    let settings:CameraSettings = $state()
 
     const getCameraSettings = async () => {
         const result = await api.get<CameraSettings>('/api/camera/settings')
@@ -27,7 +27,7 @@
     <Spinner />
 {:then _} 
     <div class="flex flex-col gap-1">
-        <button class="btn btn-primary" type="button" on:click={updateCameraSettings}>Update camera settings</button>
+        <button class="btn btn-primary" type="button" onclick={updateCameraSettings}>Update camera settings</button>
 
         <label for="brightness">
             Brightness {settings.brightness}

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

@@ -17,7 +17,7 @@
         { address: 119, part_number: 'BMP085', name: 'Temp/Barometric' }
     ];
 
-    let active_devices: I2CDevice[] = [];
+    let active_devices: I2CDevice[] = $state([]);
 
     onMount(() => {
         socket.on('i2cScan', handleScan);
@@ -38,8 +38,12 @@
 </script>
 
 <SettingsCard collapsible={false}>
-    <Connection slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    <span slot="title">I<sup>2</sup>C</span>
+    {#snippet icon()}
+        <Connection  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    {/snippet}
+    {#snippet title()}
+        <span >I<sup>2</sup>C</span>
+    {/snippet}
 
     <div class="grid">
         {#if active_devices.length === 0}

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

@@ -15,13 +15,13 @@
 
     Chart.register(...registerables);
 
-    let angleChartElement: HTMLCanvasElement;
+    let angleChartElement: HTMLCanvasElement = $state();
 	let angleChart: Chart;
 
-    let tempChartElement: HTMLCanvasElement;
+    let tempChartElement: HTMLCanvasElement = $state();
 	let tempChart: Chart;
 
-    let altitudeChartElement: HTMLCanvasElement;
+    let altitudeChartElement: HTMLCanvasElement = $state();
 	let altitudeChart: Chart;
 
     const handleImu = (data: IMU) => {
@@ -272,15 +272,19 @@
 </script>
 
 <SettingsCard collapsible={false}>
-    <Rotate3d slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    <span slot="title">IMU</span>
+    {#snippet icon()}
+		<Rotate3d  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	{/snippet}
+    {#snippet title()}
+		<span >IMU</span>
+	{/snippet}
     {#if $features.imu} 
         <div class="w-full overflow-x-auto">
             <div
             class="flex w-full flex-col space-y-1 h-60"
             transition:slide|local={{ duration: 300, easing: cubicOut }}
             >
-                <canvas bind:this={angleChartElement} />
+                <canvas bind:this={angleChartElement}></canvas>
             </div>
         </div>
     {/if}
@@ -290,7 +294,7 @@
                 class="flex w-full flex-col space-y-1 h-60"
                 transition:slide|local={{ duration: 300, easing: cubicOut }}
             >
-                <canvas bind:this={tempChartElement} />
+                <canvas bind:this={tempChartElement}></canvas>
             </div>
         </div>
         <div class="w-full overflow-x-auto">
@@ -298,7 +302,7 @@
             class="flex w-full flex-col space-y-1 h-60"
             transition:slide|local={{ duration: 300, easing: cubicOut }}
             >
-            <canvas bind:this={altitudeChartElement} />
+            <canvas bind:this={altitudeChartElement}></canvas>
         </div>
     </div>
     {/if}

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

@@ -1,9 +1,13 @@
 <script lang="ts">
     import { api } from '$lib/api';
     import { onMount } from 'svelte';
-    export let data = {
+    interface Props {
+        data?: any;
+    }
+
+    let { data = $bindable({
         servos: []
-    };
+    }) }: Props = $props();
 
     const updateValue = (event, index, key) => {
         data.servos[index][key] = event.target.innerText;
@@ -36,29 +40,29 @@
                 <tr>
                     <td
                         contenteditable="true"
-                        on:blur={syncConfig}
-                        on:input={event => updateValue(event, index, 'center_pwm')}
+                        onblur={syncConfig}
+                        oninput={event => updateValue(event, index, 'center_pwm')}
                     >
                         {servo.center_pwm}
                     </td>
                     <td
                         contenteditable="true"
-                        on:blur={syncConfig}
-                        on:input={event => updateValue(event, index, 'center_angle')}
+                        onblur={syncConfig}
+                        oninput={event => updateValue(event, index, 'center_angle')}
                     >
                         {servo.center_angle}
                     </td>
                     <td
                         contenteditable="true"
-                        on:blur={syncConfig}
-                        on:input={event => updateValue(event, index, 'direction')}
+                        onblur={syncConfig}
+                        oninput={event => updateValue(event, index, 'direction')}
                     >
                         {servo.direction}
                     </td>
                     <td
                         contenteditable="true"
-                        on:blur={syncConfig}
-                        on:input={event => updateValue(event, index, 'conversion')}
+                        onblur={syncConfig}
+                        oninput={event => updateValue(event, index, 'conversion')}
                     >
                         {servo.conversion}
                     </td>

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

@@ -10,9 +10,9 @@
 
     let isLoading = false;
 
-    let active = false;
+    let active = $state(false);
 
-    let servoId = 0;
+    let servoId = $state(0);
 
     const throttler = new Throttler();
 
@@ -29,7 +29,7 @@
         socket.sendEvent('servoState', { active: 0 });
     };
 
-    let pwm = 306;
+    let pwm = $state(306);
 
     const updatePWM = () => {
         throttler.throttle(() => {
@@ -39,15 +39,19 @@
 </script>
 
 <SettingsCard collapsible={false}>
-    <MotorOutline slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-    <span slot="title">Servo</span>
+    {#snippet icon()}
+        <MotorOutline  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+    {/snippet}
+    {#snippet title()}
+        <span >Servo</span>
+    {/snippet}
     {pwm}
     <input
         type="range"
         min="80"
         max="600"
         bind:value={pwm}
-        on:input={updatePWM}
+        oninput={updatePWM}
         class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700"
     />
 
@@ -63,7 +67,7 @@
                     type="checkbox"
                     class="toggle"
                     bind:checked={active}
-                    on:change={active ? activateServo : deactivateServo}
+                    onchange={active ? activateServo : deactivateServo}
                 />
             </span>
         </div>