Update to svelte 5

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",
@@ -31,22 +31,22 @@
     "@types/md5": "^2.3.5",
     "@types/node": "^20.14.12",
     "@types/wait-on": "^5.3.4",
-    "@typescript-eslint/parser": "^8.7.0",
+    "@typescript-eslint/parser": "^8.10.0",
     "chalk": "^5.3.0",
     "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",
+    "prettier-plugin-svelte": "^3.2.7",
+    "svelte-check": "^4.0.5",
+    "svelte-eslint-parser": "^0.42.0",
     "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0",
+    "typescript-eslint": "^8.10.0",
     "vite": "^5.4.7",
     "vite-plugin-virtual": "^0.3.0",
     "vitest": "^2.1.1",
@@ -73,7 +73,7 @@
     "marked-katex-extension": "^5.1.2",
     "marked-linkify-it": "^3.1.11",
     "md5": "^2.3.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.0.3",
     "twemoji": "^14.0.2",
     "zod": "^3.23.8"
   }

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

@@ -47,7 +47,7 @@
           on:click={() => storeTheme("light")}>
           <Icon name="sun" />
         </Button>
-        <div class="global-spacer" />
+        <div class="global-spacer"></div>
         <Button
           ariaLabel="Dark Mode"
           styleBorderRadius="0"
@@ -72,7 +72,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,5 +1,5 @@
 <script lang="ts">
-  import { SvelteComponent } from "svelte";
+  import type { SvelteComponent } from "svelte";
 
   import Clipboard from "@app/components/Clipboard.svelte";
 

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { Embed } from "@http-client";
+  import type { Component, ComponentProps } from "svelte";
 
   import dompurify from "dompurify";
   import matter from "@radicle/gray-matter";
@@ -43,7 +44,7 @@
       );
     } catch (error) {
       if (error instanceof Error) {
-        modal.show({
+        modal.show<Component<ComponentProps<ErrorModal>>>({
           component: ErrorModal,
           props: {
             title: "Not able to parse frontmatter",
@@ -471,12 +472,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 { ComponentProps, Component } 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,15 @@ export function hide(): void {
   store.set(undefined);
 }
 
-interface ShowArgs<T extends SvelteComponent> {
-  component: ComponentType<T>;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interface ShowArgs<T extends Component<any>> {
+  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 +59,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

@@ -314,7 +314,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">