update to svelte 5

src/lib/components/AccountComponent.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { Account } from '$lib/mastodon/response';
 
-  export let account: Account;
+  interface Props {
+    account: Account;
+  }
+
+  let { account }: Props = $props();
 </script>
 
 <a href={account.url} target="_blank">{account.display_name} @{account.acct}</a>

src/lib/components/AvatarComponent.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
   import type { Account } from '$lib/mastodon/response';
 
-  export let account: Account;
-  let avatarDescription: string;
-  let sourceSetHtml: string;
-  $: avatarDescription = `Avatar for ${account.acct}`;
-  $: {
+  interface Props {
+    account: Account;
+  }
+
+  let { account }: Props = $props();
+  let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
+  let sourceSetHtml: string = $derived.by(() => {
     // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
     // We need the best format to be first
     const formatPriority = new Map<string, number>([
@@ -33,8 +35,8 @@
       const srcset = entry[1].join(', ');
       html += `<source srcset="${srcset}" type="${entry[0]}" />`;
     }
-    sourceSetHtml = html;
-  }
+    return html;
+  });
 </script>
 
 <picture>

src/lib/components/LoadMoreComponent.svelte

@@ -1,33 +1,34 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
-  export let moreAvailable = false;
-  export let isLoading = false;
-  let displayText = '';
-  let title = '';
-  let disabled: boolean;
-
-  $: if (isLoading) {
-    displayText = 'Loading...';
-  } else if (!moreAvailable) {
-    displayText = 'You reached the end';
-  } else {
-    displayText = 'Load More';
+  interface Props {
+    moreAvailable?: boolean;
+    isLoading?: boolean;
+    loadOlderPosts: any;
   }
-  $: disabled = !moreAvailable || isLoading;
-  $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
-  const dispatch = createEventDispatcher<{
-    loadOlderPosts: string;
-  }>();
+  let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
+  let displayText = $derived.by(() => {
+    if (isLoading) {
+      return 'Loading...';
+    } else if (!moreAvailable) {
+      return 'You reached the end';
+    }
+    return 'Load More';
+  });
+  let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
+  let disabled: boolean = $derived(!moreAvailable || isLoading);
 
-  function loadOlderPosts() {
-    dispatch('loadOlderPosts');
-  }
+  /*const dispatch = createEventDispatcher<{
+  loadOlderPosts: string;
+}>();
+
+function loadOlderPosts() {
+  dispatch('loadOlderPosts');
+}*/
 </script>
 
-<button on:click={loadOlderPosts} {disabled} {title}>
+<button onclick={() => loadOlderPosts()} {disabled} {title}>
   <div class="loading" class:collapsed={!isLoading}>
     <LoadingSpinnerComponent size="0.5em" thickness="6px" />
   </div>

src/lib/components/LoadingSpinnerComponent.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  export let size = '64px';
-  export let thickness = '6px';
+  interface Props {
+    size?: string;
+    thickness?: string;
+  }
+
+  let { size = '64px', thickness = '6px' }: Props = $props();
 </script>
 
-<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
+<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
 
 <style>
   .lds-dual-ring {

src/lib/components/PostComponent.svelte

@@ -6,15 +6,21 @@
   import { secondsSince, relativeTime } from '$lib/relativeTime';
   import { onMount } from 'svelte';
 
-  export let post: Post;
-  let displayRelativeTime = false;
-  const absoluteDate = new Date(post.created_at).toLocaleString();
-  let dateCreated = absoluteDate;
-  const timePassed = secondsSince(new Date(post.created_at));
-  $: if (displayRelativeTime) {
-    dateCreated = relativeTime($timePassed) ?? absoluteDate;
+  interface Props {
+    post: Post;
   }
 
+  let { post }: Props = $props();
+  let displayRelativeTime = $state(false);
+  const absoluteDate = new Date(post.created_at).toLocaleString();
+  const timePassed = secondsSince(new Date(post.created_at));
+  let dateCreated = $derived.by(() => {
+    if (displayRelativeTime) {
+      return relativeTime($timePassed) ?? absoluteDate;
+    }
+    return absoluteDate;
+  });
+
   const songs = filterDuplicates(post.songs ?? []);
 
   function filterDuplicates(songs: SongInfo[]): SongInfo[] {