migration to Svelte 5

ui/src/routes/musiks/gongs/+layout.svelte

@@ -8,6 +8,8 @@
  } from '@sveltestrap/sveltestrap';
 
  import GongsList from '$lib/components/GongsList.svelte';
+
+ let { children } = $props();
 </script>
 
 <div class="d-flex flex-fill flex-column">
@@ -22,7 +24,7 @@
             <GongsList edit flush />
             </Col>
             <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
             </Col>
         </Row>
     </Container>

ui/src/routes/musiks/gongs/[gid]/+page.svelte

@@ -22,7 +22,7 @@
      })
  }
 
- let confirmDeletion = false;
+ let confirmDeletion = $state(false);
 </script>
 
 {#await getGong($page.params.gid)}

ui/src/routes/musiks/gongs/new/+page.svelte

@@ -15,7 +15,9 @@
  import { gongs } from '$lib/stores/gongs';
  import { uploadGong } from '$lib/gong';
 
- function submitGong() {
+ function submitGong(e) {
+     e.preventDefault();
+
      if (files.length == 0) {
          alert("Vous n'avez sélectionné aucun fichier !")
          return false;
@@ -27,7 +29,7 @@
      })
  }
 
- export let files = [];
+ let { files = $bindable([]) } = $props();
 </script>
 
 <Container>
@@ -35,7 +37,7 @@
         Nouveau gong
     </h2>
 
-    <form on:submit|preventDefault={submitGong}>
+    <form onsubmit={submitGong}>
         <Input type="file" bind:files />
 
         <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>

ui/src/routes/musiks/tracks/+layout.svelte

@@ -8,6 +8,8 @@
  } from '@sveltestrap/sveltestrap';
 
  import TrackList from '$lib/components/TrackList.svelte';
+
+ let { children } = $props();
 </script>
 
 <div class="d-flex flex-fill flex-column">
@@ -22,7 +24,7 @@
             <TrackList edit flush />
             </Col>
             <Col md={9} class="d-flex py-2">
-            <slot></slot>
+            {@render children?.()}
             </Col>
         </Row>
     </Container>

ui/src/routes/musiks/tracks/[tid]/+page.svelte

@@ -28,7 +28,7 @@
      })
  }
 
- let confirmDeletion = false;
+ let confirmDeletion = $state(false);
 </script>
 
 {#await getTrack($page.params.tid)}

ui/src/routes/musiks/tracks/new/+page.svelte

@@ -15,7 +15,9 @@
  import { tracks } from '$lib/stores/tracks';
  import { uploadTrack } from '$lib/track';
 
- function submitTrack() {
+ function submitTrack(e) {
+     e.preventDefault();
+
      if (files.length == 0) {
          alert("Vous n'avez sélectionné aucun fichier !")
          return false;
@@ -27,7 +29,7 @@
      })
  }
 
- export let files = [];
+ let { files = $bindable([]) } = $props();
 </script>
 
 <Container>
@@ -35,7 +37,7 @@
         Nouvelle musique
     </h2>
 
-    <form on:submit|preventDefault={submitTrack}>
+    <form onsubmit={submitTrack}>
         <Input type="file" bind:files />
 
         <Button type="submit" color="primary" class="mt-2" disabled={files.length == 0}>