Svelte5

Alia5 · May 8, 2024 · db695d8 · db695d8
1 parent cb98405
commit db695d8
Show file tree

Hide file tree

Showing 16 changed files with 266 additions and 250 deletions.
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
@@ -47,7 +47,7 @@ export default tseslint.config(
                 sourceType: 'module',
                 ecmaVersion: 2020,
                 project: './tsconfig.json',
-                extraFileExtensions: ['.svelte'],
+                extraFileExtensions: ['.svelte', '.svelte.ts'],
             },
         },
         rules: {
@@ -181,7 +181,7 @@ export default tseslint.config(
         },
     },
     {
-        files: ['*.svelte', '**/*.svelte'],
+        files: ['*.svelte', '**/*.svelte', "**/*.svelte.ts"],
         languageOptions: {
             parser: svelteEslintParser,
             parserOptions: {

diff --git a/frontend/package.json b/frontend/package.json
@@ -38,20 +38,20 @@
         "@sveltejs/adapter-node": "^5.0.1",
         "@sveltejs/adapter-static": "^3.0.1",
         "@sveltejs/kit": "^2.5.7",
-        "@sveltejs/vite-plugin-svelte": "^3.1.0",
+        "@sveltejs/vite-plugin-svelte": "3.0.0-next.3",
         "@types/cookie": "^0.6.0",
         "@types/mime-types": "^2.1.4",
         "eslint": "^9.2.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-formatter-compact": "^8.40.0",
         "eslint-plugin-prettier": "^5.1.3",
-        "eslint-plugin-svelte": "^2.38.0",
+        "eslint-plugin-svelte": "2.36.0-next.13",
         "eslint-plugin-unused-imports": "^3.2.0",
         "globals": "^15.1.0",
         "postcss-preset-env": "^9.5.11",
         "prettier": "^3.2.5",
         "prettier-plugin-svelte": "^3.2.3",
-        "svelte": "^4.2.16",
+        "svelte": "5.0.0-next.123",
         "svelte-check": "^3.7.1",
         "tslib": "^2.6.2",
         "typescript": "^5.4.5",

diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,12 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+
+    <!-- TODO: svelte-head is currenly broken, insert links from unplugin-fonts statically for now... -->
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous" class="svelte-1254uh8">
+    <link rel="stylesheet" as="style" onload="this.rel='stylesheet'"
+        href="https://fonts.googleapis.com/css2?family=Noto Color Emoji&amp;display=swap" class="svelte-1254uh8">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Noto Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap"
+        class="svelte-1254uh8">
+
+    %sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+</body>
+
+</html>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 import { onNavigate } from '$app/navigation';
+import type { Snippet } from 'svelte';
 import type { LayoutData } from './$types';
 import Header from './Header.svelte';
 import './styles.pcss';
 import 'unfonts.css';
 import { links } from 'unplugin-fonts/head';
 
-export let data: LayoutData;
+const { data, children }: { data: LayoutData; children: Snippet } = $props();
 
 onNavigate((navigation) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -20,12 +21,15 @@ onNavigate((navigation) => {
         });
     });
 });
+
+$inspect(links);
 </script>
 
 <svelte:head>
-    {#each links as link (link)}
+    <!-- TODO: Fix after  https://github.com/sveltejs/kit/issues/10089 is fixed -->
+    <!-- {#each links as link (link)}
         <link {...link?.attrs || {}} />
-    {/each}
+    {/each} -->
     <title>index of {data.host}</title>
 </svelte:head>
 <div class="app">
@@ -44,7 +48,7 @@ onNavigate((navigation) => {
     </noscript>
     <Header host="{data.host}" path="{data.path}" />
     <main>
-        <slot />
+        {@render children()}
     </main>
 </div>
 

diff --git a/frontend/src/routes/Header.svelte b/frontend/src/routes/Header.svelte
@@ -3,14 +3,14 @@ import { browser } from '$app/environment';
 import { onMount } from 'svelte';
 import IconMenu from '~icons/material-symbols/menu';
 
-export let host: string;
-export let path: string;
+const { host, path }: { host: string; path: string } = $props();
 
 const defaultDarkMode = !browser
     ? false
     : window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-let darkMode = defaultDarkMode;
+let darkMode = $state(defaultDarkMode);
+
 const toggleTheme = () => {
     const body = document.querySelector('body');
     const hasTheme = body?.classList.contains('theme-dark') || body?.classList.contains('theme-light');
@@ -57,7 +57,7 @@ onMount(() => {
         type="checkbox"
         class="toggle"
         checked="{!darkMode}"
-        on:change="{() => toggleTheme()}" />
+        onchange="{() => toggleTheme()}" />
     <div no-js-shown class="no-js-hint">
         <span>Works best with Javascript enabled</span>
     </div>

diff --git a/frontend/src/routes/LoadingSpinner.svelte b/frontend/src/routes/LoadingSpinner.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
-export let strokeWidth: number | string = 4;
-export let color = 'var(--textColor)';
+const {
+    strokeWidth = 4,
+    color = 'var(--textColor)'
+}: {
+    strokeWidth?: number | string;
+    color?: string;
+} = $props();
 </script>
 
 <svg class="circular">

diff --git a/frontend/src/routes/[...catchAll]/+page.server.ts b/frontend/src/routes/[...catchAll]/+page.server.ts
@@ -7,7 +7,7 @@ export const load: ServerLoad|undefined = import.meta.env.INSVEX_BUILDCONFIG_SPA
         const locals = event.locals as { dirList: Promise<PagedDirList>}|undefined;
 
         return {
-            dirList: locals?.dirList || undefined,
+            dirList: await locals?.dirList || undefined,
             currentPath: event.url.pathname
         };
     };
diff --git a/frontend/src/routes/[...catchAll]/+page.svelte b/frontend/src/routes/[...catchAll]/+page.svelte
@@ -11,47 +11,56 @@ import ItemCard from './ItemCard.svelte';
 import { mimeAdditions } from './mime-patches';
 import type { DirList } from '$lib/api/fetchDirListOrFile';
 
-export let data: PageData;
+const { data }: { data: PageData } = $props();
+
 const apiHost = env.INSVEX_PUBLIC_HOST || import.meta.env.INSVEX_PUBLIC_HOST;
 const apiPort = env.INSVEX_PUBLIC_PORT || import.meta.env.INSVEX_PUBLIC_PORT;
 
 // in SPA mode thumbs need to be fetched from api
 // in SSR more, internal url-handling handles api-fetching
-let thumbHost = '';
-if (import.meta.env.INSVEX_BUILDCONFIG_SPA) {
-    thumbHost = `${!apiHost || apiHost?.startsWith('http') ? '' : 'http://'}${apiHost}${
-        apiPort ? ':' : ''
-    }${apiPort}`;
-}
+/* eslint-disable prettier/prettier */
+const thumbHost = $state(
+    import.meta.env.INSVEX_BUILDCONFIG_SPA
+        ? (
+            `${!apiHost || apiHost?.startsWith('http') ? '' : 'http://'}${apiHost}${
+                apiPort ? ':' : ''
+            }${apiPort}`
+        )
+        : ''
+);
+/* eslint-enable prettier/prettier */
 
-$: thumbPrefixPath = `${thumbHost}${data.currentPath === '/' ? '' : data.currentPath}`;
+const thumbPrefixPath = $derived(`${thumbHost}${data.currentPath === '/' ? '' : data.currentPath}`);
 
-let files: DirList = data.dirList.files || [];
-let path: string | undefined = data.currentPath;
-let page = data.dirList.page;
-$: {
+let files: DirList = $state(data.dirList.files || []);
+let path: string | undefined = $state(data.currentPath);
+let page = $state(data.dirList.page);
+$effect(() => {
     if (path === data.currentPath) {
         if (page > data.dirList.page) {
             files = data.dirList.files;
             files = files;
         }
-        files.push(...data.dirList.files.filter((file) => !files.includes(file)));
+        files.push(...(data.dirList.files || []).filter((file) => !files.includes(file)));
         files = files;
     } else {
         files = data.dirList.files;
         path = data.currentPath;
     }
     page = data.dirList.page;
-}
-if (browser) {
-    if (files.length <= 100 && data.dirList.page > 1) {
-        void goto('?page=1', {
-            replaceState: true,
-            invalidateAll: true
-        });
+});
+
+onMount(() => {
+    if (browser) {
+        if (files.length <= 100 && data.dirList.page > 1) {
+            void goto('?page=1', {
+                replaceState: true,
+                invalidateAll: true
+            });
+        }
     }
-}
-let loadingMore = false;
+});
+let loadingMore = $state(false);
 
 const handleInfScroll = (e: Event) => {
     const tgt = e.target as HTMLElement;
@@ -73,9 +82,9 @@ const getMime = (file: string) => {
     return addition || lookup(file.split('.')?.pop() || '');
 };
 
-let currentFile: string | undefined;
+let currentFile: string | undefined = $state();
 
-let isScrolling = false;
+let isScrolling = $state(false);
 onMount(() => {
     window.onscroll = () => (isScrolling = true);
 
@@ -91,7 +100,7 @@ onMount(() => {
     <meta name="description" content="Insvex.http" />
 </svelte:head>
 
-<section on:scroll="{handleInfScroll}">
+<section onscroll="{handleInfScroll}">
     <div class="file-grid">
         {#if data.path !== '/'}
             {#key '..'}
@@ -120,7 +129,7 @@ onMount(() => {
                     isScrolling="{isScrolling}"
                     thumbPrefixPath="{thumbPrefixPath}"
                     currentPath="{data.currentPath}"
-                    on:click="{() => {
+                    onclick="{() => {
                         currentFile = file.path;
                     }}" />
             {/if}
@@ -131,7 +140,7 @@ onMount(() => {
             <!-- <a href="?page={data.dirList.page + 1}">Load more</a> -->
             {#if !loadingMore}
                 <button
-                    on:click="{() => {
+                    onclick="{() => {
                         loadingMore = true;
                         void goto(`?page=${data.dirList.page + 1}`, {
                             replaceState: true,
@@ -164,7 +173,7 @@ onMount(() => {
     <!-- eslint-disable prettier/prettier -->
     <PreviewPopup
         bind:file="{currentFile}"
-        previewableItems="{files
+        previewableItems="{(files || [])
             .filter((f) => !f.isDir && previewSupportsType(getMime(f.path) || ''))
             .map((f) => f.path)
         }" />

diff --git a/frontend/src/routes/[...catchAll]/+page.ts b/frontend/src/routes/[...catchAll]/+page.ts
@@ -71,7 +71,7 @@ export const load: PageLoad = async (event: LoadEvent) => {
     }
 
     return {
-        dirList: dirList ||  {
+        dirList: await dirList ||  {
             page: 1,
             totalPages: 1,
             totalFiles: 0,

diff --git a/frontend/src/routes/[...catchAll]/ItemCard.svelte b/frontend/src/routes/[...catchAll]/ItemCard.svelte
@@ -2,15 +2,24 @@
 import { page } from '$app/stores';
 import type { DirList } from '$lib/api/fetchDirListOrFile';
 import Thumb from './Thumb.svelte';
-import { createEventDispatcher } from 'svelte';
-const dispatch = createEventDispatcher();
 
-export let link = false;
-export let file: DirList[number];
-export let isScrolling = false;
-export let thumbPrefixPath: string;
+page;
 
-export let currentPath: string;
+const {
+    link = false,
+    file,
+    isScrolling = false,
+    thumbPrefixPath,
+    currentPath,
+    onclick
+}: {
+    link?: boolean;
+    file: DirList[number];
+    isScrolling?: boolean;
+    thumbPrefixPath: string;
+    currentPath: string;
+    onclick?: () => void;
+} = $props();
 </script>
 
 {#if link}
@@ -30,8 +39,8 @@ export let currentPath: string;
         no-js-hidden
         class="item-card"
         style="{isScrolling ? 'pointer-events: none' : ''}"
-        on:click="{() => {
-            dispatch('click', { file });
+        onclick="{() => {
+            onclick?.();
         }}">
         <Thumb file="{file.path}" prefixPath="{thumbPrefixPath}" />
         <span>{file.path}</span>