chore: update to svelte 5

2025-02-23 01:13:39 +00:00 · 2025-02-05 17:52:14 +00:00 · 2025-02-05 17:52:14 +00:00 · f9fd7d152e
commit f9fd7d152e
parent b59c52d288
22 changed files with 745 additions and 744 deletions
--- a/web/app/package-lock.json
+++ b/web/app/package-lock.json
--- a/web/app/package.json
+++ b/web/app/package.json
@ -12,19 +12,19 @@
  },
  "devDependencies": {
    "@sveltejs/adapter-static": "^3.0.0",
-    "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@sveltejs/kit": "^2.5.27",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "eslint": "^8.28.0",
-    "eslint-plugin-svelte": "^2.30.0",
+    "eslint-plugin-svelte": "^2.45.1",
    "sass": "^1.64.2",
-    "svelte": "^4.0.5",
-    "svelte-check": "^3.4.3",
-    "svelte-tags-input": "^5.0.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-tags-input": "^6.0.2",
    "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "typescript": "^5.5.0",
+    "vite": "^5.4.4"
  },
  "type": "module",
  "dependencies": {
--- a/web/app/src/lib/components/AuthCheck.svelte
+++ b/web/app/src/lib/components/AuthCheck.svelte
@ -1,13 +1,18 @@
-<script>
+<script lang="ts">
    import { token } from "$lib/stores";
    import { isTokenExpired } from "$lib/login-check";
+    interface Props {
+        children?: import('svelte').Snippet;
+    }

-    let loggedIn = false;
+    let { children }: Props = $props();
+
+    let loggedIn = $state(false);
    token.subscribe((value) => {
        loggedIn = !isTokenExpired(value);
    });
 </script>

 {#if loggedIn == true}
-    <slot />
+    {@render children?.()}
 {/if}
--- a/web/app/src/lib/components/EditPostPanel.svelte
+++ b/web/app/src/lib/components/EditPostPanel.svelte
@ -1,20 +1,25 @@
-<script>
+<script lang="ts">
    import Tags from "svelte-tags-input";
    import { onMount } from "svelte";
    import { getPost, postUpdate, getTagAutocomplete } from "$lib/api";

-    export let isActive = false;
-    export let post;
-    export let onSubmit;
+    interface Props {
+        isActive?: boolean;
+        post: any;
+        onSubmit: any;
+    }

-    const toggleEditModal = () => {
+    let { isActive = $bindable(false), post, onSubmit }: Props = $props();
+
+    const toggleEditModal = (e) => {
+        e.preventDefault();
        isActive = !isActive;
    };

-    let form = {
+    let form = $state({
        source_url: "",
        tags: [],
-    };
+    });

    const getData = async () => {
        form.source_url = post.source_url;
@ -30,7 +35,8 @@
        return list;
    };

-    const onFormSubmit = async () => {
+    const onFormSubmit = async (e) => {
+        e.preventDefault();
        const response = await postUpdate(post.id, form);
        toggleEditModal();

@ -42,7 +48,7 @@
    });
 </script>

-<form on:submit|preventDefault={onFormSubmit}>
+<form onsubmit={onFormSubmit}>
    <div class="panel is-warning">
        <p class="panel-heading">Edit Post</p>
        <div class="panel-block column">
@ -105,7 +111,7 @@
        </div>
        <div class="panel-block column">
            <button class="button is-primary" type="submit">Save</button>
-            <button class="button" on:click|preventDefault={toggleEditModal}
+            <button class="button" onclick={toggleEditModal}
                >Cancel</button
            >
        </div>
--- a/web/app/src/lib/components/Navbar.svelte
+++ b/web/app/src/lib/components/Navbar.svelte
@ -2,9 +2,9 @@
    import { token } from "$lib/stores";
    import { isTokenExpired } from "$lib/login-check";

-    let menu_shown = false;
+    let menu_shown = $state(false);
    
-    let loggedIn = false;
+    let loggedIn = $state(false);
    token.subscribe((value) => {
        loggedIn = !isTokenExpired(value);
    });
@ -20,15 +20,15 @@

        <a
            href={"#"}
-            on:click={toggleMenu}
+            onclick={toggleMenu}
            role="button"
            class="navbar-burger"
            aria-label="menu"
            aria-expanded="false"
        >
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
-            <span aria-hidden="true" />
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
        </a>
    </div>

--- a/web/app/src/lib/components/Post/PostGallery.svelte
+++ b/web/app/src/lib/components/Post/PostGallery.svelte
@ -1,7 +1,7 @@
-<script>
+<script lang="ts">
    import { onMount } from "svelte";

-    export let posts = [];
+    let { posts = [] } = $props();
 </script>

 <div class="columns is-multiline">
--- a/web/app/src/lib/components/Tag/EditTagPanel.svelte
+++ b/web/app/src/lib/components/Tag/EditTagPanel.svelte
@ -1,18 +1,20 @@
-<script>
+<script lang="ts">
    import { onMount } from "svelte";

    import { getTagTypes, updateTag } from "$lib/api";

-    export let tag;
-    export let data;
-    export let toggleRenameMenu;
-    export let onSubmit;
+    let {
+        tag,
+        data,
+        toggleRenameMenu,
+        onSubmit
+    } = $props();

-    let tagTypes = [];
-    let form = {
+    let tagTypes = $state([]);
+    let form = $state({
        name: "",
        tagTypeId: 1,
-    };
+    });

    const getData = async () => {
        tagTypes = await getTagTypes();
@ -21,12 +23,12 @@
        form.tagTypeId = tagType[0].id;
    };

-    const onFormSubmit = async () => {
+    const onFormSubmit = async (e) => {
+        e.preventDefault();
        await updateTag(tag, form);

        goto("/tags/" + form.name);

-        toggleRenameMenu();
        onSubmit(form.name);
    };

@ -35,7 +37,7 @@
    });
 </script>

-<form on:submit|preventDefault={onFormSubmit}>
+<form onsubmit={onFormSubmit}>
    <div class="panel is-warning">
        <p class="panel-heading">Edit Tag</p>
        <div class="panel-block column">
@ -85,7 +87,7 @@
        </div>
        <div class="panel-block column">
            <button class="button is-primary" type="submit">Submit</button>
-            <button on:click|preventDefault={toggleRenameMenu} class="button"
+            <button onclick={toggleRenameMenu} class="button"
                >Cancel</button
            >
        </div>
--- a/web/app/src/lib/components/Tag/ViewTagPanel.svelte
+++ b/web/app/src/lib/components/Tag/ViewTagPanel.svelte
@ -1,14 +1,12 @@
-<script>
+<script lang="ts">
    import { onMount } from "svelte";

    import { getRelatedTags } from "$lib/api";
    import AuthCheck from "$lib/components/AuthCheck.svelte";
    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";

-    export let tag;
-    export let data;
-    export let toggleRenameMenu;
-    let related_tags = [];
+    let { tag, data, toggleRenameMenu } = $props();
+    let related_tags = $state([]);
    const getData = async () => {
        related_tags = await getRelatedTags({ tag });
        related_tags = related_tags
@ -65,7 +63,7 @@
    <AuthCheck>
        <div class="panel-block column">
            <button
-                on:click|preventDefault={toggleRenameMenu}
+                onclick={toggleRenameMenu}
                class="button is-primary">Rename</button
            >
        </div>
--- a/web/app/src/lib/components/TagLinkNumbered.svelte
+++ b/web/app/src/lib/components/TagLinkNumbered.svelte
@ -1,6 +1,5 @@
-<script>
-    export let tag;
-    export let num;
+<script lang="ts">
+    let { tag, num } = $props();

    let tagType = tag.split(":")[0] ?? "";
    let tagName = tag.split(":")[1] ?? "";
--- a/web/app/src/lib/components/TagNotes/EditTagNotesPanel.svelte
+++ b/web/app/src/lib/components/TagNotes/EditTagNotesPanel.svelte
@ -1,21 +1,24 @@
-<script>
+<script lang="ts">
    import { onMount } from "svelte";
    import { updateTagNotes } from "$lib/api";

-    export let tag;
-    export let data;
-    export let toggleEditMenu;
-    export let onSubmit;
+    let {
+        tag,
+        data,
+        toggleEditMenu,
+        onSubmit
+    } = $props();

-    let form = {
+    let form = $state({
        note: "",
-    };
+    });

    const getData = async () => {
        form.note = data.tagNote;
    };

-    const onFormSubmit = async () => {
+    const onFormSubmit = async (e) => {
+        e.preventDefault();
        await updateTagNotes(tag, form);
        toggleEditMenu();

@ -27,19 +30,19 @@
    });
 </script>

-<form on:submit|preventDefault={onFormSubmit}>
+<form onsubmit={onFormSubmit}>
    <div class="panel is-warning">
        <p class="panel-heading">Edit Notes</p>
        <div class="panel-block column">
            <textarea
                bind:value={form.note}
                class="textarea has-fixed-size"
-            />
-            <div class="content" />
+></textarea>
+            <div class="content"></div>
        </div>
        <div class="panel-block column">
            <button type="submit" class="button is-primary">Save</button>
-            <button on:click|preventDefault={toggleEditMenu} class="button"
+            <button onclick={toggleEditMenu} class="button"
                >Cancel</button
            >
        </div>
--- a/web/app/src/lib/components/TagNotes/ViewTagNotesPanel.svelte
+++ b/web/app/src/lib/components/TagNotes/ViewTagNotesPanel.svelte
@ -1,8 +1,7 @@
-<script>
+<script lang="ts">
    import AuthCheck from "$lib/components/AuthCheck.svelte";

-    export let data;
-    export let toggleEditMenu;
+    let { data, toggleEditMenu } = $props();
 </script>

 <div class="panel is-info">
@ -15,7 +14,7 @@
    <AuthCheck>
        <div class="panel-block column">
            <button
-                on:click|preventDefault={toggleEditMenu}
+                onclick={toggleEditMenu}
                class="button is-primary">Edit</button
            >
        </div>
--- a/web/app/src/lib/components/ViewPostPanel.svelte
+++ b/web/app/src/lib/components/ViewPostPanel.svelte
@ -1,9 +1,7 @@
-<script>
+<script lang="ts">
    import AuthCheck from "./AuthCheck.svelte";
    import TagLinkNumbered from "./TagLinkNumbered.svelte";
-    export let post;
-    export let toggleEditMenu;
-    export let toggleDeleteMenu;
+    let { post, toggleEditMenu, toggleDeleteMenu } = $props();

    const trimUrl = (str) => {
        if (str.length > 30) {
@ -70,11 +68,11 @@
    <AuthCheck>
        <p class="panel-block column">
            <button
-                on:click|preventDefault={toggleEditMenu}
+                onclick={toggleEditMenu}
                class="button is-primary">Edit</button
            >
            <button
-                on:click|preventDefault={toggleDeleteMenu}
+                onclick={toggleDeleteMenu}
                class="button is-danger">Delete</button
            >
        </p>
--- a/web/app/src/routes/+layout.svelte
+++ b/web/app/src/routes/+layout.svelte
@ -1,6 +1,11 @@
-<script>
+<script lang="ts">
    import "../app.scss";
    import Navbar from "$lib/components/Navbar.svelte";
+    interface Props {
+        children?: import('svelte').Snippet;
+    }
+
+    let { children }: Props = $props();

    export const ssr = false;
 </script>
@ -11,4 +16,4 @@

 <Navbar />

-<slot />
+{@render children?.()}
--- a/web/app/src/routes/+page.svelte
+++ b/web/app/src/routes/+page.svelte
@ -4,7 +4,7 @@

 	import { goto } from '$app/navigation';

-  let searchTerms: string[] = [];
+  let searchTerms: string[] = $state([]);

  const onTagChange = (value) => {
    searchTerms = value.detail.tags;
@ -15,7 +15,8 @@
        return list;
    };

-  const onSearch = (i) => {
+  const onSearch = (e) => {
+    e.preventDefault();
    if (searchTerms.length > 0) {
      goto(`/posts?tags=${searchTerms.join("+")}`);
    } else {
@ -33,7 +34,7 @@
  </div>
  <div class="hero-foot">
    <div class="container has-text-centered">
-      <form on:submit|preventDefault={onSearch}>
+      <form onsubmit={onSearch}>
        <div class="field has-addons">
          <div class="control has-text-left is-expanded">
            <div class="control" id="tags">
--- a/web/app/src/routes/auth/login/+page.svelte
+++ b/web/app/src/routes/auth/login/+page.svelte
@ -2,11 +2,12 @@
    import { login } from "$lib/api";
    import { goto } from "$app/navigation";

-    let username = "";
-    let password = "";
-    let error = "";
+    let username = $state("");
+    let password = $state("");
+    let error = $state("");

-    const doLogin = async () => {
+    const doLogin = async (e) => {
+        e.preventDefault();
        error = "";
        try {
            const tokenData = await login({ username, password });
@ -26,7 +27,7 @@

 <section class="section">
    <div class="container">
-        <form on:submit|preventDefault={doLogin}>
+        <form onsubmit={doLogin}>
            <div class="field">
                <label for="username" class="label">Username</label>
                <div class="control">
--- a/web/app/src/routes/auth/register/+page.svelte
+++ b/web/app/src/routes/auth/register/+page.svelte
@ -2,12 +2,13 @@
    import { register } from "$lib/api";
    import { goto } from "$app/navigation";

-    let username = "";
-    let password = "";
-    let email = "";
+    let username = $state("");
+    let password = $state("");
+    let email = $state("");
    let error = "";

-    const doRegister = async () => {
+    const doRegister = async (e) => {
+        e.preventDefault();
        try {
            const tokenData = await register({ email, username, password });
            goto("/");
@ -24,7 +25,7 @@
 </section>

 <div class="container">
-    <form on:submit|preventDefault={doRegister}>
+    <form onsubmit={doRegister}>
        <div class="field">
            <label for="email" class="label">Email</label>
            <div class="control">
--- a/web/app/src/routes/post/[id]/+page.svelte
+++ b/web/app/src/routes/post/[id]/+page.svelte
@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
    import { onMount } from "svelte";
    import { getPost, postDelete } from "$lib/api";
    import { goto } from "$app/navigation";
@ -8,7 +10,7 @@
    import { page } from "$app/stores";
    const { id } = $page.params;

-    let post: any;
+    let post: any = $state();
    const getData = async () => {
        const data = await getPost({ id });
        post = data;
@ -25,31 +27,34 @@
        getData();
    });

-    let deleteMenuShown = false;
+    let deleteMenuShown = $state(false);

-    const deletePost = async () => {
+    const deletePost = async (e) => {
+        e.preventDefault();
        toggleDeleteMenu();
        const success = await postDelete({ id });
        if (success) {
            goto("/posts");
        }
    };
-    const toggleDeleteMenu = () => {
+    const toggleDeleteMenu = (e) => {
+        e.preventDefault();
        deleteMenuShown = !deleteMenuShown;
    };

-    let editMenuShown = false;
+    let editMenuShown = $state(false);

-    const toggleEditMenu = () => {
+    const toggleEditMenu = (e) => {
+        e.preventDefault();
        editMenuShown = !editMenuShown;
    };

-    let imagePercentage = "0%";
+    let imagePercentage = $state("0%");

-    $: {
+    run(() => {
        if (post)
            imagePercentage = ((1000 * 100) / post.width).toFixed(0) + "%";
-    }
+    });
 </script>

 {#if post}
@ -77,12 +82,12 @@
                            </div>
                            <div class="panel-block column">
                                <button
-                                    on:click|preventDefault={deletePost}
+                                    onclick={deletePost}
                                    class="button is-danger">Delete</button
                                >
                                <button
                                    class="button"
-                                    on:click|preventDefault={toggleDeleteMenu}
+                                    onclick={toggleDeleteMenu}
                                    >Cancel</button
                                >
                            </div>
--- a/web/app/src/routes/posts/+page.svelte
+++ b/web/app/src/routes/posts/+page.svelte
@ -1,4 +1,6 @@
 <script lang="ts">
+    import { run } from 'svelte/legacy';
+
    import { getPostSearchTag, getTag, getTagAutocomplete } from "$lib/api";
    import TagLinkNumbered from "$lib/components/TagLinkNumbered.svelte";
    import PostGallery from "$lib/components/Post/PostGallery.svelte";
@ -8,17 +10,17 @@
    import { beforeNavigate, goto } from "$app/navigation";
    import { page as currentPage } from '$app/stores';

-    $: url = $currentPage.url;
+    let url = $derived($currentPage.url);

-    let searchTerms = [];
+    let searchTerms = $state([]);

-    let page = 1;
-    let totalPages = 1;
-    let pagination = [];
-    let posts = [];
+    let page = $state(1);
+    let totalPages = $state(1);
+    let pagination = $state([]);
+    let posts = $state([]);
    let postCount = 0;
-    let tags = [];
-    let tagInfo = null;
+    let tags = $state([]);
+    let tagInfo = $state(null);
    let categorizedTags = {};

    const getData = async () => {
@ -47,7 +49,7 @@
            tagInfo = await getTag({ tag: searchTerms[0] });
        }
    };
-    let tagQuery;
+    let tagQuery = $state();

    const onTagChange = (value) => {
        searchTerms = value.detail.tags;
@ -58,7 +60,7 @@
        return list;
    };

-    $: {
+    run(() => {
        tagQuery = url.searchParams.get('tags');
        if (tagQuery) {
            searchTerms = tagQuery.split(" ");
@ -69,8 +71,9 @@
        posts = [];
        page = 1;
        getData();
-    }
-    const onSearch = (i) => {
+    });
+    const onSearch = (e) => {
+        e.preventDefault();
        if (searchTerms.length > 0) {
            goto(`/posts?tags=${searchTerms.join("+")}`);
        } else {
@ -92,7 +95,7 @@
            <div class="columns is-multiline">
                <div class="column is-full">
                    <div class="block">
-                        <form on:submit|preventDefault={onSearch}>
+                        <form onsubmit={onSearch}>
                            <div class="field has-addons">
                                <div class="control is-expanded">
                                    <div class="control" id="tags">
@ -173,13 +176,13 @@
                            >
                                <a
                                    href={null}
-                                    on:click={changePage(page - 1)}
+                                    onclick={changePage(page - 1)}
                                    class="pagination-previous"
                                    class:is-disabled={page == 1}>Previous</a
                                >
                                <a
                                    href={null}
-                                    on:click={changePage(page + 1)}
+                                    onclick={changePage(page + 1)}
                                    class="pagination-next"
                                    class:is-disabled={page == totalPages}
                                    >Next</a
@ -197,7 +200,7 @@
                                            <li>
                                                <a
                                                    href={null}
-                                                    on:click={() =>
+                                                    onclick={() =>
                                                        changePage(pageEntry)}
                                                    class="pagination-link"
                                                    class:is-current={page ==
--- a/web/app/src/routes/tags/+page.svelte
+++ b/web/app/src/routes/tags/+page.svelte
@ -1,15 +1,17 @@
 <script>
+    import { run } from 'svelte/legacy';
+
    import { getTags } from "$lib/api";

-    let tags = [];
+    let tags = $state([]);

    const getData = async () => {
        const data = await getTags();
        tags = data;
    };
-    $: {
+    run(() => {
        getData();
-    }
+    });
 </script>


--- a/web/app/src/routes/tags/[tag]/+page.svelte
+++ b/web/app/src/routes/tags/[tag]/+page.svelte
@ -10,10 +10,10 @@


    import { page } from "$app/stores";
-    let { tag } = $page.params;
+    let { tag } = $state($page.params);

-    let data;
-    let posts = [];
+    let data = $state();
+    let posts = $state([]);

    const getData = async () => {
        if (tag) {
@ -28,12 +28,13 @@
        }
    };

-    let renameMenuShown = false;
-    const toggleRenameMenu = () => {
+    let renameMenuShown = $state(false);
+    const toggleRenameMenu = (e) => {
+        e.preventDefault();
        renameMenuShown = !renameMenuShown;
    };

-    let editMenuShown = false;
+    let editMenuShown = $state(false);
    const toggleEditMenu = () => {
        editMenuShown = !editMenuShown;
    };
--- a/web/app/src/routes/upload/+page.svelte
+++ b/web/app/src/routes/upload/+page.svelte
@ -4,16 +4,16 @@
    import Tags from "svelte-tags-input";
    import AuthRequired from "$lib/components/AuthRequired.svelte";

-    let currentProgress = 0;
+    let currentProgress = $state(0);

-    let fileName = "";
-    let similar = [];
+    let fileName = $state("");
+    let similar = $state([]);

-    let form = {
+    let form = $state({
        blob_id: "",
        source_url: "",
        tags: [],
-    };
+    });

    const onProgress = (e) => {
        var percentCompleted = Math.round((e.loaded * 100) / e.total);
@ -43,7 +43,8 @@
        return list;
    };

-    const onSubmit = async () => {
+    const onSubmit = async (e) => {
+        e.preventDefault();
        const response = await postCreate(form);
        goto(`/post/${response.id}`);
    };
@ -54,7 +55,7 @@
 <section class="section">
    <div class="container">
        <h1 class="title">Upload Image</h1>
-        <form on:submit|preventDefault={onSubmit}>
+        <form onsubmit={onSubmit}>
            <div class="field">
                <label for="file" class="label">Image File</label>
                <div class="control">
@ -65,10 +66,10 @@
                                class="file-input"
                                type="file"
                                name="resume"
-                                on:change={onFileChange}
+                                onchange={onFileChange}
                            />
                            <span class="file-cta">
-                                <span class="file-icon" />
+                                <span class="file-icon"></span>
                                <span class="file-label"> Choose a file… </span>
                            </span>
                        </label>
--- a/web/app/src/routes/user/profile/+page.svelte
+++ b/web/app/src/routes/user/profile/+page.svelte
@ -3,7 +3,7 @@
    import { getUserProfile } from "$lib/api";
    import AuthRequired from "$lib/components/AuthRequired.svelte";

-    let user;
+    let user = $state();

    const getData = async () => {
        user = await getUserProfile();