deps: upgrade to svelte 5 (#328)

* deps: upgrade to svelte 5 * fix: broken ActionButton * fix: toggle favorite from result * fix: clear timeout var type
Bellisario · Dec 3, 2024 · 7bbe470 · 7bbe470
1 parent 82fed51
commit 7bbe470
Show file tree

Hide file tree

Showing 33 changed files with 1,477 additions and 2,038 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,19 +10,19 @@
     "check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^5.0.1",
     "@tsconfig/svelte": "^5.0.4",
     "@ungap/promise-any": "^1.1.1",
     "just-truncate": "^2.2.0",
     "postcss": "^8.4.49",
     "postcss-logical": "^8.0.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.5.0",
     "svelte-check": "^4.1.0",
     "svelte-hash": "^1.0.1",
     "svelte-preprocess": "^6.0.3",
     "tslib": "^2.8.1",
     "typescript": "^5.7.2",
-    "vite": "^5.4.11",
+    "vite": "^6.0.2",
     "vite-plugin-pwa": "^0.21.1"
   }
 }
diff --git a/src/App.svelte b/src/App.svelte
@@ -23,19 +23,16 @@
 
   const DOCUMENT_ORIGINAL_TITLE = document.title;
 
-  let loading = true;
-  let loadingHiding = false;
+  let loading = $state(true);
+  let loadingHiding = $state(false);
 
-  let mobileModal = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-  let isOnline = navigator.onLine;
-  $: isOnline = navigator.onLine;
+  let mobileModal = $state(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent));
+  let isOnline = $derived(navigator.onLine);
+  $effect(() => {
+    $query = $hash.search || ''
+  })
 
-  $: $hash.search, setTitle();
-  $: $musicTitle, setTitle();
-  $: $paused, setTitle();
-  $: $query = $hash.search || '';
-
-  function setTitle() {
+  $effect(() => {
     if ($musicTitle && !$paused) {
       document.title = `${$musicTitle} | Musicale`;
       return;
@@ -48,7 +45,7 @@
       document.title = `"${$hash.search}" on Musicale`;
       return;
     }
-  }
+  })
 
   onMount(() => {
     (
@@ -65,11 +62,6 @@
   }, 1000);
 </script>
 
-<svelte:window
-  on:online={() => (isOnline = true)}
-  on:offline={() => (isOnline = false)}
-/>
-
 <main>
   {#if loading}
     <div class="loading-screen" class:hiding={loadingHiding}>
@@ -78,38 +70,45 @@
   {/if}
   <!-- modal displayed on load for mobile devices -->
   <Modal closed={!mobileModal}>
-    <div slot="title">Mobile device detected</div>
+    {#snippet title()}
+        <div >Mobile device detected</div>
+      {/snippet}
     <p>
       Musicale is not optimized for mobile devices.<br />You can still use it,
       but it's really suggested to get a computer to enjoy the full experience.
     </p>
-    <div slot="content__bottom">
-      <ActionButton
-        title="Close"
-        backgroundColor="var(--back-color)"
-        scale="0.8"
-        on:click={() => {
-          mobileModal = false;
-        }}
-      />
-    </div>
+    {#snippet content__bottom()}
+        <div >
+        <ActionButton
+          title="Close"
+          backgroundColor="var(--back-color)"
+          scale="0.8"
+          onclick={() => {
+            mobileModal = false;
+          }}
+        />
+      </div>
+      {/snippet}
   </Modal>
   <Modal closed={isOnline}>
-    <div slot="title">No Internet connection</div>
+    {#snippet title()}
+        <div >No Internet connection</div>
+      {/snippet}
     <p>
       Musicale needs an Internet connection to work.<br />Please check your
       connection and try again.
     </p>
-    <div slot="content__bottom_small">
-      This popup will automatically disappear as soon as the connection is back
-      again.
-    </div>
+    {#snippet content__bottom_small()}
+        <div >
+        This popup will automatically disappear as soon as the connection is back
+        again.
+      </div>
+      {/snippet}
   </Modal>
   <SwManager />
   <AudioPlayer />
   <Toolbar
-    on:submit
-    on:home={() => {
+    onHome={() => {
       hash.set({});
 
       $favoritesActive = false;

diff --git a/src/components/AlbumView.svelte b/src/components/AlbumView.svelte
@@ -3,18 +3,19 @@
   import { fade } from 'svelte/transition';
   import Footer from './Footer.svelte';
   import ResultsItem from './ResultsView/ResultsItem.svelte';
-  import {
-    playNextList,
-    albumsAddedToPlayNext,
-  } from '$store';
+  import { playNextList, albumsAddedToPlayNext } from '$store';
   import ActionButton from '$lib/ActionButton.svelte';
   import type { Result } from '$types/Results';
   import urlToId from '$lib/urlToId';
   import focusable from '../lib/focuser/focusable';
   import { lazyLoad } from '$lib/lazyLoad';
   import { shuffle } from '$lib/shuffle';
 
-  export let id: string;
+  interface Props {
+    id: string;
+  }
+
+  let { id }: Props = $props();
 
   async function fetchPlaylist(id: string): Promise<Album> {
     // fetch https://pipedapi.kavin.rocks/playlists/:id
@@ -83,8 +84,9 @@
       <div class="album" in:fade|global>
         <button
           class="back-button"
-          on:click={() => window.history.back()}
+          onclick={() => window.history.back()}
           use:focusable
+          aria-label="Go Back"
         >
           <svg class="back__icon">
             <use xlink:href="#back" />
@@ -112,14 +114,14 @@
           <div class="buttons">
             <ActionButton
               title="Play All"
-              on:click={() => playAll(album.relatedStreams)}
+              onclick={() => playAll(album.relatedStreams)}
               active={$albumsAddedToPlayNext[id] === 0}
               disabled={$albumsAddedToPlayNext[id] === 1}
               scale="0.9"
             />
             <ActionButton
               title="Shuffle"
-              on:click={() => playShuffleAll(album.relatedStreams)}
+              onclick={() => playShuffleAll(album.relatedStreams)}
               active={$albumsAddedToPlayNext[id] === 1}
               disabled={$albumsAddedToPlayNext[id] === 0}
               scale="0.9"

diff --git a/src/components/ContextMenu.svelte b/src/components/ContextMenu.svelte
@@ -5,23 +5,28 @@
 
   import { type MenuEntry } from '$types/MenuEntry';
 
-  export let entries: MenuEntry[];
+  interface Props {
+    entries: MenuEntry[];
+  }
+
+  let { entries = $bindable() }: Props = $props();
 
   const callDiscardActions = () =>
     entries.forEach((entry) => entry.discardAction?.());
 
-  let position = {
+  let position = $state({
     x: 0,
     y: 0,
-  };
+  });
 
-  let menuEl: HTMLDivElement;
-  let showMenu = false;
+  let menuEl: HTMLDivElement = $state() as HTMLDivElement;
+  let showMenu = $state(false);
 
-  async function contextMenuAction(event: MouseEvent) {
+  async function contextMenuAction(e: MouseEvent) {
+    e.preventDefault();
     if (entries.length === 0) return;
 
-    const { clientX, clientY } = event;
+    const { clientX, clientY } = e;
 
     showMenu = true;
 
@@ -50,31 +55,34 @@
   }
 </script>
 
-<svelte:window on:scroll={() => closeMenu(callDiscardActions)} />
-<svelte:body on:contextmenu|preventDefault={contextMenuAction} />
+<svelte:window onscroll={() => closeMenu(callDiscardActions)} />
+<svelte:body oncontextmenu={contextMenuAction} />
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 {#if showMenu}
-  <div class="transparent-back" on:contextmenu|stopPropagation={() => {}} />
+  <div
+    class="transparent-back"
+    oncontextmenu={(e) => e.stopPropagation()}
+  ></div>
   <div
     class="menu translucent"
     bind:this={menuEl}
     use:clickOutside={() => closeMenu(callDiscardActions)}
-    on:contextmenu|stopPropagation={() => {}}
+    oncontextmenu={(e) => e.stopPropagation()}
     out:fade|global={{ duration: 250 }}
     style="--x: {position.x}; --y: {position.y}"
   >
     {#each entries as entry}
       <div
         class="menu-item"
         class:disabled={entry.disabled}
-        on:click={() => (entry.disabled ? null : closeMenu(entry.action))}
+        onclick={() => (entry.disabled ? null : closeMenu(entry.action))}
       >
         {entry.title}
       </div>
       {#if entry.breakAfter}
-        <div class="break-item" />
+        <div class="break-item"></div>
       {/if}
     {/each}
   </div>

diff --git a/src/components/FavoritesView/FavoritesItem.svelte b/src/components/FavoritesView/FavoritesItem.svelte
@@ -10,28 +10,29 @@
   import truncate from 'just-truncate';
   import binIcon from '$assets/bin.svg?raw';
 
-  export let item: FavoriteStore;
-  export let dragEl: boolean = false;
+  interface Props {
+    item: FavoriteStore;
+    dragEl?: boolean;
+  }
 
-  let hovering = false;
+  let { item, dragEl = false }: Props = $props();
 
-  let removing = false;
-  let removingCancelTimeout: NodeJS.Timeout;
+  let hovering = $state(false);
 
-  let currentItem: HTMLDivElement;
+  let removing = $state(false);
+  let removingCancelTimeout: number | undefined = $state();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
   in:fade|global
   class="result"
   class:selected={$currentID === item.id}
-  on:click={() => wantPlay(item)}
-  on:pointerover={() => (hovering = true)}
-  on:pointerout={() => (hovering = false)}
-  bind:this={currentItem}
-  on:contextmenu={() =>
+  onclick={() => wantPlay(item)}
+  onpointerover={() => (hovering = true)}
+  onpointerout={() => (hovering = false)}
+  oncontextmenu={() =>
     ($menuEntries = [
       {
         title: 'Play',
@@ -55,13 +56,15 @@
 >
   <div class="result__grid1" style="--img: url('{item.poster}')">
     {#if !dragEl}
-      <IntersectionObserver let:intersecting top={150} once={true}>
-        <img
-          src={intersecting ? item.poster : ''}
-          alt={item.title}
-          class="result__img"
-          use:lazyLoad
-        />
+      <IntersectionObserver top={150} once={true}>
+        {#snippet children({ intersecting })}
+          <img
+            src={intersecting ? item.poster : ''}
+            alt={item.title}
+            class="result__img"
+            use:lazyLoad
+          />
+        {/snippet}
       </IntersectionObserver>
     {:else}
       <img src={item.poster} alt={item.title} class="result__img loaded" />
@@ -76,7 +79,8 @@
         <div
           class="result__remove"
           transition:fade
-          on:click|stopPropagation={() => {
+          onclick={(e) => {
+            e.stopPropagation();
             clearTimeout(removingCancelTimeout);
             if (removing)
               $favorites = $favorites.filter((a) => a.id !== item.id);
@@ -137,7 +141,9 @@
     height: 0.1rem;
     background-color: var(--theme-color);
     opacity: 0;
-    transition: opacity 300ms, transform 300ms;
+    transition:
+      opacity 300ms,
+      transform 300ms;
   }
   .result.selected .result__title > h2::after {
     transform: translate3d(-100%, 0, 0);