🌌 Migrate app to svelte-5

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>