Update svelte to v5.0

Only do the minimal changes possible to be able to keep updating
dependencies.

package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@eslint/js": "^9.11.1",
     "@playwright/test": "^1.47.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tsconfig/svelte": "^5.0.4",
     "@types/config": "^3.3.5",
     "@types/dompurify": "^3.0.5",
@@ -36,15 +36,15 @@
     "config": "^3.3.12",
     "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.0",
+    "eslint-plugin-svelte": "^2.45.1",
     "execa": "^9.4.0",
     "get-port": "^7.1.0",
     "globals": "^15.9.0",
     "happy-dom": "^15.7.4",
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "svelte-check": "^4.0.2",
-    "svelte-eslint-parser": "^0.41.1",
+    "svelte-eslint-parser": "^0.42.0",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.7.0",
     "vite": "^5.4.7",
@@ -72,7 +72,7 @@
     "marked-katex-extension": "^5.1.2",
     "marked-linkify-it": "^3.1.11",
     "md5": "^2.3.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.0",
     "twemoji": "^14.0.2",
     "zod": "^3.23.8"
   }

scripts/check

@@ -2,6 +2,6 @@
 set -e
 
 npx tsc --noEmit
-npx svelte-check --tsconfig tsconfig.json --fail-on-warnings --compiler-warnings missing-custom-element-compile-options:ignore
+npx svelte-check --tsconfig tsconfig.json --fail-on-warnings --compiler-warnings options_missing_custom_element:ignore
 npx eslint --cache --cache-location node_modules/.cache/eslint --max-warnings 0 .
 npx prettier "**/*.@(ts|js|svelte|json|css|html|yml)" --ignore-path .gitignore --check --cache

src/App/FullscreenModalPortal.svelte

@@ -35,7 +35,8 @@
       tabindex="0"
       class="overlay"
       on:click={hide}
-      style:cursor={$modalStore.disableHide ? "not-allowed" : "default"} />
+      style:cursor={$modalStore.disableHide ? "not-allowed" : "default"}>
+    </div>
     <div class="content">
       <svelte:component this={$modalStore.component} {...$modalStore.props} />
     </div>

src/App/Help.svelte

@@ -31,7 +31,7 @@
   </div>
 
   {#if !hideShortcuts}
-    <div class="divider" />
+    <div class="divider"></div>
     <div class="item">
       Keyboard shortcuts <KeyHint>?</KeyHint>
     </div>

src/App/LoadingBar.svelte

@@ -23,4 +23,5 @@
   role="progressbar"
   aria-label="Page loading"
   class="loading-bar"
-  class:visible={$isLoading} />
+  class:visible={$isLoading}>
+</div>

src/App/MobileFooter.svelte

@@ -53,7 +53,7 @@
 
       <div slot="popover">
         <Help hideShortcuts />
-        <div class="divider" />
+        <div class="divider"></div>
         <Settings />
       </div>
     </Popover>

src/App/Settings.svelte

@@ -52,7 +52,7 @@
           }}>
           <Icon name="sun" />
         </Button>
-        <div class="global-spacer" />
+        <div class="global-spacer"></div>
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
@@ -65,7 +65,7 @@
           }}>
           <Icon name="moon" />
         </Button>
-        <div class="global-spacer" />
+        <div class="global-spacer"></div>
         <Button
           ariaLabel="System Theme"
           styleBorderRadius="0"
@@ -93,7 +93,7 @@
               : "not-selected"}>
             {font.displayName}
           </Button>
-          <div class="global-spacer" />
+          <div class="global-spacer"></div>
         {/each}
       </Radio>
     </div>

src/components/Button.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" strictEvents>
+<script lang="ts">
   export let ariaLabel: string | undefined = undefined;
   export let title: string | undefined = undefined;
   export let variant:

src/components/Clipboard.svelte

@@ -1,6 +1,6 @@
 <svelte:options customElement="radicle-clipboard" />
 
-<script lang="ts" strictEvents>
+<script lang="ts">
   import debounce from "lodash/debounce";
   import { createEventDispatcher } from "svelte";
 

src/components/Command.svelte

@@ -1,13 +1,11 @@
 <script lang="ts">
-  import { SvelteComponent } from "svelte";
-
   import Clipboard from "@app/components/Clipboard.svelte";
 
   export let command: string;
   export let fullWidth: boolean = false;
   export let showPrompt: boolean = true;
 
-  let clipboard: SvelteComponent;
+  let clipboard: Clipboard;
 </script>
 
 <style>

src/components/Comment.svelte

@@ -51,9 +51,6 @@
     left: -2.5px;
     background-color: var(--color-fill-separator);
   }
-  .icon {
-    color: var(--color-fill-gray);
-  }
   .card-metadata {
     color: var(--color-fill-gray);
     font-size: var(--font-size-small);
@@ -101,10 +98,10 @@
 <div class="card" class:card-empty-body={!body} {id} class:reply={isReply}>
   <div style:position="relative">
     {#if isReply}
-      <div class="reply-dot" />
+      <div class="reply-dot"></div>
     {/if}
     {#if isLastReply}
-      <div class="connector-line" />
+      <div class="connector-line"></div>
     {/if}
     <div class="card-header" class:card-header-no-icon={isReply}>
       <slot class="icon" name="icon" />

src/components/ExpandButton.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" strictEvents>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
 
   import IconButton from "./IconButton.svelte";

src/components/IconButton.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" strictEvent>
+<script lang="ts">
   import { createEventDispatcher } from "svelte";
 
   import Loading from "./Loading.svelte";

src/components/Link.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" strictEvents>
+<script lang="ts">
   import type { Route } from "@app/lib/router/definitions";
 
   import { createEventDispatcher } from "svelte";

src/components/Loading.svelte

@@ -160,10 +160,10 @@
       class:center
       class:margins
       class:condensed>
-      <div class="bounce1" style="" />
+      <div class="bounce1" style=""></div>
       {#if !condensed}
-        <div class="bounce2" />
-        <div class="bounce3" />
+        <div class="bounce2"></div>
+        <div class="bounce3"></div>
       {/if}
     </div>
   </div>

src/components/Markdown.svelte

@@ -482,12 +482,14 @@
 {#if frontMatter && frontMatter.length > 0}
   <div class="front-matter">
     <table>
-      {#each frontMatter as [key, val]}
-        <tr>
-          <td><span class="txt-bold">{key}</span></td>
-          <td>{val}</td>
-        </tr>
-      {/each}
+      <tbody>
+        {#each frontMatter as [key, val]}
+          <tr>
+            <td><span class="txt-bold">{key}</span></td>
+            <td>{val}</td>
+          </tr>
+        {/each}
+      </tbody>
     </table>
   </div>
 {/if}

src/components/RepoCard.svelte

@@ -142,7 +142,7 @@
   }}>
   <div class="repo-card" class:compact>
     <div class="activity">
-      <div class="fadeout-overlay" />
+      <div class="fadeout-overlay"></div>
       <ActivityDiagram
         id={repo.rid}
         viewBoxHeight={200}

src/components/TextInput.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" strictEvents>
+<script lang="ts">
   import debounce from "lodash/debounce";
   import { createEventDispatcher } from "svelte";
   import { onMount } from "svelte";

src/index.ts

@@ -1,6 +1,7 @@
 import App from "@app/App.svelte";
+import { mount } from "svelte";
 
-const app = new App({
+const app = mount(App, {
   target: document.body,
 });
 

src/lib/modal.ts

@@ -1,11 +1,11 @@
-import type { ComponentProps, ComponentType, SvelteComponent } from "svelte";
+import type { Component, ComponentProps } from "svelte";
 
 import { derived, get, writable } from "svelte/store";
 
 type HideCallback = () => void;
 
 type Modal = {
-  component: ComponentType;
+  component: Component;
   props: Record<string, unknown>;
   hideCallback?: HideCallback;
   disableHide?: boolean;
@@ -42,15 +42,14 @@ export function hide(): void {
   store.set(undefined);
 }
 
-interface ShowArgs<T extends SvelteComponent> {
-  component: ComponentType<T>;
+interface ShowArgs<T extends Component> {
+  component: T;
   props: ComponentProps<T>;
   hideCallback?: HideCallback;
 }
 
-export function show<Component extends SvelteComponent>(
-  args: ShowArgs<Component>,
-): void {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function show<T extends Component<any>>(args: ShowArgs<T>): void {
   // Defocus any active input elements, so that we can always close an open
   // modal via the `esc` hotkey.
   if (document.activeElement instanceof HTMLElement) {
@@ -59,9 +58,8 @@ export function show<Component extends SvelteComponent>(
   store.set(args);
 }
 
-export function toggle<Component extends SvelteComponent>(
-  args: ShowArgs<Component>,
-): void {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function toggle<T extends Component<any>>(args: ShowArgs<T>): void {
   const stored = get(modalStore);
 
   if (stored && stored.component === args.component) {

src/modals/ColorPaletteModal.svelte

@@ -143,7 +143,8 @@
                   class:unused={!usedColors.includes(color)}
                   title={color}
                   class="color"
-                  style:background-color={`var(${color})`} />
+                  style:background-color={`var(${color})`}>
+                </div>
               </div>
             {/each}
           </div>

src/views/nodes/View.svelte

@@ -322,7 +322,7 @@
           <PolicyExplainer seedingPolicy={node.config?.seedingPolicy} />
           <div class="sidebar-item">
             <Seeding count={stats.repos.total}>
-              <div style:width="2rem" />
+              <div style:width="2rem"></div>
             </Seeding>
           </div>
           <div class="sidebar-item">