Upgrade remaining components to Svelte 5 syntax

eslint.config.js

@@ -48,7 +48,7 @@ export default ts.config(
         rules: {
             // Override or add rule settings here, such as:
             // 'svelte/rule-name': 'error'
-            'svelte/no-navigation-without-base': 'error', // Necessary since hash-based navigation.
+            // 'svelte/no-navigation-without-base': 'error', // Necessary since hash-based navigation. Edit: removed in favor of resolve
             'svelte/no-dupe-style-properties': 'off', // Height is duplicated with dvh and vh for compatibility.
             'svelte/require-each-key': 'off', // Most each-blocks in this app do not have keys, and do not seem to need them.
             'svelte/no-unused-svelte-ignore': 'off', // Svelte ignores that are unused by eslint may be used by LSP.

src/lib/components/AudioPlaybackSpeed.svelte

@@ -41,7 +41,7 @@
                         type="radio"
                         name="speed"
                         {value}
-                        on:click={(e) => setPlaySpeed(e.currentTarget.value)}
+                        onclick={(e) => setPlaySpeed(e.currentTarget.value)}
                         checked={$userSettings['audio-speed'] === value}
                     />
                     {label}

src/lib/components/ContentCarousel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
     import type { ContentItem, FeatureConfig } from '$config';
     import { contentsFontSize, language } from '$lib/data/stores';
     import { onMount } from 'svelte';
@@ -145,7 +145,7 @@
                 >
                     {#if child.imageFilename}
                         <img
-                            src="{base}/{imageFolder}/{child.imageFilename}"
+                            src={asset(`/${imageFolder}/${child.imageFilename}`)}
                             alt={child.imageFilename}
                             draggable="false"
                         />

src/lib/components/ContentGrid.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
     import type { ContentItem, FeatureConfig } from '$config';
     import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
 
@@ -55,7 +55,7 @@
             >
                 {#if child.imageFilename}
                     <img
-                        src="{base}/{imageFolder}/{child.imageFilename}"
+                        src={asset(`/${imageFolder}/${child.imageFilename}`)}
                         alt={child.imageFilename}
                     />
                 {/if}

src/lib/components/ContentHeading.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
     import type { ContentItem, FeatureConfig, FeatureValue } from '$config';
     import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
 
@@ -38,7 +38,7 @@
             <img
                 class="contents-image"
                 style={convertStyle($s?.['div.contents-image'])}
-                src="{base}/{imageFolder}/{item.imageFilename}"
+                src={asset(`/${imageFolder}/${item.imageFilename}`)}
                 alt={item.imageFilename}
             />
         </div>

src/lib/components/ContentSingle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
     import type { ContentItem, FeatureConfig, FeatureValue } from '$config';
     import { contentsFontSize, convertStyle, language, s } from '$lib/data/stores';
 
@@ -54,7 +54,7 @@
             <img
                 class="contents-image"
                 style={convertStyle($s?.['div.contents-image'])}
-                src="{base}/{imageFolder}/{item.imageFilename}"
+                src={asset(`/${imageFolder}/${item.imageFilename}`)}
                 alt={item.imageFilename}
             />
         </div>

src/lib/components/FontList.svelte

@@ -2,41 +2,32 @@
 @component
 Font list component.
 -->
-<svelte:options accessors />
 
 <script lang="ts">
     import config from '$assets/config';
     import { fontChoices, monoIconColor, themeColors } from '$lib/data/stores';
-    import { createEventDispatcher } from 'svelte';
 
-    const dispatch = createEventDispatcher();
-    export let selectedFont: string;
-
-    function handleClick(font: string) {
-        selectedFont = font;
-        dispatch('menuaction', {
-            font: font
-        });
+    interface Props {
+        selectedFont?: string;
     }
+
+    let { selectedFont = $bindable() }: Props = $props();
 </script>
 
 <ul class="dy-menu">
     {#each $fontChoices as font}
-        <!-- svelte-ignore a11y-missing-attribute -->
         <li style:font-family={font} style:font-size="large">
-            <!-- svelte-ignore a11y-click-events-have-key-events -->
-            <!-- svelte-ignore a11y-interactive-supports-focus -->
-            <a
-                on:click={() => handleClick(font)}
+            <button
+                onclick={() => (selectedFont = font)}
                 style:background-color={font === selectedFont
                     ? $themeColors['ButtonSelectedColor']
                     : ''}
                 style:color={$monoIconColor}
                 style:font-family={font}
-                role="button"
+                type="button"
             >
                 {config.fonts?.find((x) => x.family === font)?.name}
-            </a>
+            </button>
         </li>
     {/each}
 </ul>

src/lib/components/FontSelector.svelte

@@ -9,25 +9,25 @@ Font Selector component.
 
     const modalId = 'fontSelector';
     let modal: Modal;
-    let fontList: FontList;
 
     export function showModal() {
-        if ($currentFont) {
-            fontList.selectedFont = $currentFont;
-        }
         modal.showModal();
     }
 
     function handleOk() {
         currentFonts.update((fonts) => {
-            fonts[$refs.collection] = fontList.selectedFont;
+            if (selectedFont) {
+                fonts[$refs.collection] = selectedFont;
+            }
             return fonts;
         });
     }
+
+    let selectedFont = $state($currentFont);
 </script>
 
 <Modal bind:this={modal} id={modalId}>
-    <FontList bind:this={fontList} selectedFont={$currentFont ?? ''} />
+    <FontList bind:selectedFont />
     <div class="flex w-full justify-between dy-modal-action">
         <button
             style={convertStyle($s?.['ui.dialog.button'])}
@@ -36,7 +36,7 @@ Font Selector component.
         <button
             style={convertStyle($s?.['ui.dialog.button'])}
             class="dy-btn dy-btn-sm dy-btn-ghost no-animation"
-            on:click={() => handleOk()}>{$t['Button_OK']}</button
+            onclick={() => handleOk()}>{$t['Button_OK']}</button
         >
     </div>
 </Modal>

src/lib/components/HistoryCard.svelte

@@ -6,30 +6,37 @@ TODO:
 -->
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import config, { scriptureConfig } from '$assets/config';
+    import { scriptureConfig } from '$assets/config';
     import type { HistoryItem } from '$lib/data/history';
     import { refs } from '$lib/data/stores';
     import { gotoRoute } from '$lib/navigate';
     import { formatDateAndTime } from '$lib/scripts/dateUtils';
 
-    export let history: HistoryItem;
+    interface Props {
+        history: HistoryItem;
+    }
+
+    let { history }: Props = $props();
 
-    $: bc = scriptureConfig.bookCollections?.find((x) => x.id === history.collection);
-    $: docSet = bc && bc.languageCode + '_' + bc.id;
-    $: bcName = scriptureConfig.bookCollections?.length == 1 ? null : bc?.collectionName;
-    $: bookName = bc?.books.find((x) => x.id === history.book)?.name;
-    $: chapterVerseSeparator = bc?.features['ref-chapter-verse-separator'];
-    $: reference = history.verse
-        ? history.chapter + chapterVerseSeparator + history.verse
-        : history.chapter;
-    $: dateFormat = formatDateAndTime(new Date(history.date));
-    $: textDirection = bc?.style?.textDirection;
+    const bc = $derived(scriptureConfig.bookCollections?.find((x) => x.id === history.collection));
+    const docSet = $derived(bc && bc.languageCode + '_' + bc.id);
+    const bcName = $derived(
+        scriptureConfig.bookCollections?.length == 1 ? null : bc?.collectionName
+    );
+    const bookName = $derived(bc?.books.find((x) => x.id === history.book)?.name);
+    const chapterVerseSeparator = $derived(bc?.features['ref-chapter-verse-separator']);
+    const reference = $derived(
+        history.verse ? history.chapter + chapterVerseSeparator + history.verse : history.chapter
+    );
+    const dateFormat = $derived(formatDateAndTime(new Date(history.date)));
+    const textDirection = $derived(bc?.style?.textDirection);
 
     function onHistoryClick() {
         if (history.url) {
-            // eslint-disable-next-line svelte/no-navigation-without-base, svelte/no-navigation-without-resolve
+            // the url should have the full path??
+            // eslint-disable-next-line svelte/no-navigation-without-resolve
             goto(history.url);
-        } else {
+        } else if (docSet) {
             refs.set({
                 docSet,
                 book: history.book,
@@ -43,9 +50,9 @@ TODO:
 
 <!-- history cards are alway LTR with the reference following the text direction -->
 <div class="history-item-block dy-card w-100 bg-base-100 shadow-lg my-4" style:direction="ltr">
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div style="text-decoration:none;" on:click={onHistoryClick}>
+    <!-- svelte-ignore a11y_click_events_have_key_events -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div style="text-decorationnone;" onclick={onHistoryClick}>
         <div
             class="history-card grid grid-cols-1"
             class:grid-rows-2={!bcName}

src/lib/components/HtmlBookView.svelte

@@ -15,7 +15,7 @@ Display an HTML Book.
 </script>
 
 <script lang="ts">
-    import { base } from '$app/paths';
+    import { asset } from '$app/paths';
     import { scriptureConfig } from '$assets/config';
 
     let { references, bodyLineHeight, bodyFontSize, fetch }: Props = $props();
@@ -35,7 +35,7 @@ Display an HTML Book.
 
         if (book) {
             const result = await fetch(
-                `${base}/collections/${references.collection}/${book.hashedFileName ?? book.file}`
+                asset(`/collections/${references.collection}/${book.hashedFileName ?? book.file}`)
             );
 
             if (result.ok) {

src/lib/components/IconCard.svelte

@@ -5,8 +5,8 @@ TODO:
 - handle the book and collection specific styles
 -->
 <script lang="ts">
-    import { base } from '$app/paths';
-    import config, { scriptureConfig } from '$assets/config';
+    import { resolve } from '$app/paths';
+    import { scriptureConfig } from '$assets/config';
     import { direction, refs } from '$lib/data/stores';
     import CardMenu from './CardMenu.svelte';
 
@@ -24,7 +24,7 @@ TODO:
         alt = '',
         icon,
         menuaction,
-        href = `${base}/#/text`
+        href = resolve(`/#/text`)
     } = $props();
 
     const bc = scriptureConfig.bookCollections?.find((x) => x.id === collection);

src/lib/components/PlayButton.svelte

@@ -21,7 +21,7 @@
     }
     let { color = 'black', state, onclick }: Props = $props();
 
-    const size = String(config.mainFeatures['audio-play-button-size'] === 'normal' ? 24 : 48);
+    const size = config.mainFeatures['audio-play-button-size'] === 'normal' ? 24 : 48;
     const style = config.mainFeatures['audio-play-button-style'] as keyof typeof icons;
     const icon_style = icons[style];
     const Icon = $derived(icon_style[state]);

src/lib/components/Sidebar.svelte

@@ -137,7 +137,6 @@ The sidebar/drawer.
             style:direction={$direction}
         >
             <!-- Sidebar content here -->
-            <!-- eslint-disable-next-line svelte/no-navigation-without-base -->
             <a class="fill" href={resolve('/')}>
                 <picture>
                     <source srcset="{nav_drawer_2x} 2x" />
@@ -253,14 +252,13 @@ The sidebar/drawer.
             {#if menuItems}
                 {#each menuItems as item}
                     <li>
-                        <!-- eslint-disable svelte/no-navigation-without-base, svelte/no-navigation-without-resolve -->
+                        <!-- eslint-disable svelte/no-navigation-without-resolve (this route should be external) -->
                         <a
                             href={item.link?.['default']}
                             style:color={textColor}
                             target="_blank"
                             rel="noreferrer"
                         >
-                            <!-- eslint-enable svelte/no-navigation-without-base -->
                             <picture class:invert={$theme === 'Dark'}>
                                 {#if (item.images?.length ?? 0) > 1}
                                     <source srcset={imageSrcSet(item.images)} />

src/lib/components/Slider.svelte

@@ -6,12 +6,17 @@ A simple slider component.
 <script lang="ts">
     import { direction } from '$lib/data/stores';
 
-    export let barColor;
-    export let progressColor;
-    export let value: number;
-    export let min;
-    export let max;
-    $: linePercent = ((value - min) * 100) / (max - min) + '% 100%';
+    interface Props {
+        barColor: string;
+        progressColor: string;
+        value: number;
+        min: number;
+        max: number;
+    }
+
+    let { barColor, progressColor, value = $bindable(), min, max }: Props = $props();
+
+    const linePercent = $derived(((value - min) * 100) / (max - min) + '% 100%');
 </script>
 
 <input