Update to svelte 5

package.json

@@ -10,28 +10,29 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
-    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
-    "@tauri-apps/api": "^1.5.6"
+    "@tauri-apps/api": "^2.0.3",
+    "@tauri-apps/plugin-shell": "~2"
   },
   "devDependencies": {
     "@skeletonlabs/skeleton": "^2.10.2",
     "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/adapter-auto": "^3.2.1",
+    "@sveltejs/adapter-auto": "^3.3.0",
-    "@sveltejs/adapter-static": "^3.0.1",
+    "@sveltejs/adapter-static": "^3.0.5",
-    "@sveltejs/kit": "2.5.26",
+    "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@tauri-apps/cli": "^1.5.14",
+    "@tauri-apps/cli": "^2.0.4",
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.38",
+    "postcss": "^8.4.47",
     "postcss-load-config": "^5.1.0",
-    "svelte": "5.0.0-next.244",
+    "svelte": "^5.0.5",
-    "svelte-check": "^3.7.1",
+    "svelte-check": "^4.0.0",
-    "svelte-fa": "^4.0.2",
+    "svelte-fa": "^4.0.3",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^3.4.14",
-    "typescript": "^5.4.5",
+    "typescript": "^5.6.3",
-    "vite": "^5.4.3"
+    "vite": "^5.4.10"
   }
 }

src/lib/components/AppSettings.svelte

@@ -2,9 +2,9 @@
     import { RangeSlider, Tab, TabGroup, InputChip, SlideToggle } from '@skeletonlabs/skeleton';
     import { imageGridColumns, postGridPreviewQuality, blacklist, limitImageHeight } from '$lib/settings';
 
-    let tabPos = 0;
+    let tabPos = $state(0);
-    let showApikey = false;
+    let showApikey = $state(false);
-    let apikey = '';
+    let apikey = $state('');
 </script>
 <div class="flex flex-col">
     <h2 class="h2 mb-2 text-dark-token">Settings</h2>
@@ -14,7 +14,8 @@
         <Tab class="text-dark-token" bind:group={tabPos} name="tab3" value={2}>User</Tab>
         <Tab class="text-dark-token" bind:group={tabPos} name="tab4" value={3}>Chats</Tab>
 
-        <svelte:fragment slot="panel">
+        {#snippet panel()}
+            
                 {#if tabPos === 0}
                     <div class="flex flex-col gap-3">
                         <h3 class="h3 text-dark-token font-bold">Image</h3>
@@ -83,6 +84,7 @@
                         </div>
                     </div>
                 {/if}
-        </svelte:fragment>
+            
+            {/snippet}
     </TabGroup>
 </div>

src/lib/components/BackAppRailAnchor.svelte

@@ -3,8 +3,14 @@ import {faArrowLeft} from '@fortawesome/free-solid-svg-icons';
 import {Fa} from 'svelte-fa';
 import {AppRailAnchor} from '@skeletonlabs/skeleton';
 
-export let popCount = 1;
+    /**
-let href;
+     * @typedef {Object} Props
+     * @property {number} [popCount]
+     */
+
+    /** @type {Props} */
+    let { popCount = 1 } = $props();
+let href = $state();
 let pathnameParts = window.location.pathname.split('/');
 
 for(let i = 0; i < popCount; i++) {

src/lib/components/GlobalSearch.svelte

@@ -1,18 +1,20 @@
 <script>
+    import { preventDefault } from 'svelte/legacy';
+
     import { showSearch, loading } from '$lib/stores';
     import { lastSearch } from '$lib/settings';
     import { goto } from '$app/navigation';
 
-    let searchValue = $lastSearch;
+    let searchValue = $state($lastSearch);
 </script>
 
 {#if $showSearch}
     <form class="flex flex-row gap-2"
-          on:submit|preventDefault={() => {
+          onsubmit={preventDefault(() => {
               $loading = true;
               goto('/')
               lastSearch.set(searchValue);
-          }}>
+          })}>
         <input class="input py-1 px-2 w-96" type="text" placeholder="Search" bind:value={searchValue} />
         <button class="btn btn-md variant-filled" type="submit">Submit</button>
     </form>

src/lib/components/ImageGrid.svelte

@@ -2,12 +2,12 @@
     import { showSearch, loading } from '$lib/stores';
     import { postGridPreviewQuality, imageGridColumns } from '$lib/settings';
 
-    export let posts = [];
+    let { posts = [] } = $props();
 </script>
 
 <div class="grid gap-3" style={`grid-template-columns: repeat(${$imageGridColumns}, minmax(0, 1fr))`}>
     {#each posts as post}
-        <a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" on:click={() => {
+        <a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" onclick={() => {
             $loading = true;
             $showSearch = false
         }}>

src/lib/components/PostMedia.svelte

@@ -1,7 +1,13 @@
 <script>
     import { limitImageHeight } from '$lib/settings';
 
-    export let post = null;
+    /**
+     * @typedef {Object} Props
+     * @property {any} [post]
+     */
+
+    /** @type {Props} */
+    let { post = null } = $props();
 </script>
 
 {#if post?.preview?.has}

src/routes/+error.svelte

@@ -1,4 +1,14 @@
+<script>
+    /**
+     * @typedef {Object} Props
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { children } = $props();
+</script>
+
 <div class="container mx-auto">
     <p>Error</p>
-    <slot />
+    {@render children?.()}
 </div>

src/routes/+layout.svelte

@@ -3,6 +3,13 @@
     import { Drawer, initializeStores, Modal, ProgressRadial, Toast } from '@skeletonlabs/skeleton';
     import { loading } from '$lib/stores';
     import { AppSettings } from '$lib/components';
+    /**
+     * @typedef {Object} Props
+     * @property {import('svelte').Snippet} [children]
+     */
+
+    /** @type {Props} */
+    let { children } = $props();
 
     initializeStores();
 </script>
@@ -20,5 +27,5 @@
             <ProgressRadial width="w-8" height="h-8" stroke={120} strokeLinecap="butt"  />
         </div>
     {/if}
-    <slot />
+    {@render children?.()}
 </div>

src/routes/+page.js

@@ -1 +0,0 @@
-export const ssr = false;

src/routes/+page.svelte

@@ -2,7 +2,7 @@
     import { Fa } from 'svelte-fa';
     import { GlobalSearch, ImageGrid, SearchAppRailAnchor} from '$lib/components';
     import { faGear } from '@fortawesome/free-solid-svg-icons';
-    import { invoke } from '@tauri-apps/api/tauri'
+    import { invoke } from '@tauri-apps/api/core'
     import { lastSearch, blacklist } from '$lib/settings';
     import { postSearchResults, loading, showSearch} from '$lib/stores';
     import {
@@ -19,10 +19,10 @@
 
     function onSearch() {
         $loading = true;
-        invoke('get_posts', { query: $lastSearch }).then((resPosts) => {
+        /*invoke('get_posts', { query: $lastSearch }).then((resPosts) => {
             postSearchResults.set(new PostList(resPosts).filterPosts($blacklist).getPosts());
             requestAnimationFrame(() => $loading = false);
-        });
+        });*/
     }
 
 
@@ -38,37 +38,47 @@
 </script>
 
 <AppShell>
-    <svelte:fragment slot="pageHeader">
+    {#snippet pageHeader()}
+    
             {#if $showSearch}
                 <AppBar>
                     <GlobalSearch />
                 </AppBar>
             {/if}
-    </svelte:fragment>
         
-    <svelte:fragment slot="sidebarLeft">
+    {/snippet}
+
+    {#snippet sidebarLeft()}
+    
             <div class="h-dvh">
                 <AppRail>
-                <svelte:fragment slot="lead">
+                    {#snippet lead()}
+                            
                             <SearchAppRailAnchor />
-                </svelte:fragment>
+                        
-                <svelte:fragment slot="trail">
+                            {/snippet}
+                    {#snippet trail()}
+                            
                             <AppRailAnchor on:click={() => drawerStore.open()}>
                                 <div class="flex flex-col gap-2 place-content-center">
                                     <Fa size={'2x'} icon={faGear} />
                                     <p>Settings</p>
                                 </div>
                             </AppRailAnchor>
-                </svelte:fragment>
+                        
+                            {/snippet}
                 </AppRail>
             </div>
-    </svelte:fragment>
         
-    <svelte:fragment>
+    {/snippet}
+
+    {#snippet children()}
+    
             <div class="overflow-scroll p-2">
                 {#if $postSearchResults}
                     <ImageGrid posts={$postSearchResults} />
                 {/if}
             </div>
-    </svelte:fragment>
+        
+    {/snippet}
 </AppShell>

src/routes/posts/[post_id]/+page.js

@@ -1,5 +1,3 @@
-export const ssr = false;
-
 /** @type {import('./$types').PageLoad} */
 export async function load({ params }) {
     return { postId: params.post_id };

src/routes/posts/[post_id]/+page.svelte

@@ -14,15 +14,15 @@
     import { onMount } from 'svelte';
     import { loading, showSearch } from '$lib/stores';
     import { TAG_TYPES } from '$lib/Tags';
-    import { invoke } from '@tauri-apps/api/tauri';
+    import { invoke } from '@tauri-apps/api/core';
 
-    export let data;
+    let { data } = $props();
     const drawerStore = getDrawerStore();
     const tagTypes = Object.entries(TAG_TYPES);
     const toastStore = getToastStore();
 
     /** @type any|null */
-    let post = null;
+    let post = $state(null);
 
     onMount(async () => {
         $loading = true;
@@ -33,15 +33,18 @@
 </script>
 
 <AppShell>
-    <svelte:fragment slot="pageHeader">
+    {#snippet pageHeader()}
+    
             {#if $showSearch}
                 <AppBar>
                     <GlobalSearch />
                 </AppBar>
             {/if}
-    </svelte:fragment>
         
-    <svelte:fragment slot="sidebarRight">
+    {/snippet}
+
+    {#snippet sidebarRight()}
+    
             {#if post}
                 <div class="p-2 h-dvh">
                     {#each tagTypes as [name, label]}
@@ -54,19 +57,24 @@
                     {/each}
                 </div>
             {/if}
-    </svelte:fragment>
         
-    <svelte:fragment slot="sidebarLeft">
+    {/snippet}
+
+    {#snippet sidebarLeft()}
+    
                 <div class="h-dvh">
                     <AppRail>
-                    <svelte:fragment slot="lead">
+                        {#snippet lead()}
+                            
                                 <BackAppRailAnchor popCount={2} />
                                 <SearchAppRailAnchor />
-                    </svelte:fragment>
+                            
-                    <svelte:fragment slot="trail">
+                            {/snippet}
+                        {#snippet trail()}
+                            
                                 {#if post}
                                     <AppRailAnchor>
-                                <button class="w-full flex flex-col gap-2 place-content-center place-items-center" on:click={() => toastStore.trigger({message: 'Copied link'})} use:clipboard={`https://e621.net/posts/${post.id}`}>
+                                        <button class="w-full flex flex-col gap-2 place-content-center place-items-center" onclick={() => toastStore.trigger({message: 'Copied link'})} use:clipboard={`https://e621.net/posts/${post.id}`}>
                                             <Fa size={'2x'} icon={faCopy} />
                                             Copy link
                                         </button>
@@ -78,12 +86,15 @@
                                         Settings
                                     </button>
                                 </AppRailAnchor>
-                    </svelte:fragment>
+                            
+                            {/snippet}
                     </AppRail>
                 </div>
-    </svelte:fragment>
         
-    <svelte:fragment slot="default">
+    {/snippet}
+
+    {#snippet default()}
+    
             <div class="container mx-auto flex flex-col items-center justify-center">
                 {#if post}
                     <div class="card mb-4 flex flex-col">
@@ -131,7 +142,8 @@
                     </div>
                 {/if}
             </div>
-    </svelte:fragment>
+        
+    {/snippet}
 </AppShell>
 
 <style lang="postcss"></style>

svelte.config.js

@@ -7,6 +7,8 @@ export default {
   preprocess: [vitePreprocess({})],
 
   kit: {
-    adapter: adapter(),
+    adapter: adapter({
+        fallback: 'index.html'
+    }),
   },
 };