Update deps

Also update codebase to work with svelte 5 just the strictly needed
ones.

package.json

@@ -20,36 +20,36 @@
     "node": ">=18.17.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@playwright/test": "^1.47.2",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@eslint/js": "^9.15.0",
+    "@playwright/test": "^1.49.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "@tsconfig/svelte": "^5.0.4",
     "@types/config": "^3.3.5",
-    "@types/dompurify": "^3.0.5",
+    "@types/dompurify": "^3.2.0",
     "@types/katex": "^0.16.7",
-    "@types/lodash": "^4.17.9",
+    "@types/lodash": "^4.17.13",
     "@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.15.0",
     "chalk": "^5.3.0",
     "config": "^3.3.12",
-    "eslint": "^9.11.1",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-svelte": "^2.44.0",
-    "execa": "^9.4.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "execa": "^9.5.1",
     "get-port": "^7.1.0",
-    "globals": "^15.9.0",
-    "happy-dom": "^15.7.4",
+    "globals": "^15.12.0",
+    "happy-dom": "^15.11.6",
     "prettier": "^3.3.3",
-    "prettier-plugin-svelte": "^3.2.6",
-    "svelte-check": "^4.0.2",
-    "svelte-eslint-parser": "^0.41.1",
-    "typescript": "^5.6.2",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.7",
+    "prettier-plugin-svelte": "^3.3.2",
+    "svelte-check": "^4.1.0",
+    "svelte-eslint-parser": "^0.43.0",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.15.0",
+    "vite": "^5.4.11",
     "vite-plugin-virtual": "^0.3.0",
-    "vitest": "^2.1.1",
+    "vitest": "^2.1.5",
     "wait-on": "^8.0.1"
   },
   "dependencies": {
@@ -61,19 +61,19 @@
     "bs58": "^6.0.0",
     "buffer": "^6.0.3",
     "compare-versions": "^6.1.1",
-    "dompurify": "^3.1.6",
-    "fuzzysort": "^3.0.2",
+    "dompurify": "^3.2.1",
+    "fuzzysort": "^3.1.0",
     "hast-util-to-dom": "^4.0.0",
     "hast-util-to-html": "^9.0.3",
     "lodash": "^4.17.21",
-    "lru-cache": "^11.0.1",
-    "marked": "^14.1.2",
-    "marked-emoji": "^1.4.2",
+    "lru-cache": "^11.0.2",
+    "marked": "^15.0.2",
+    "marked-emoji": "^1.4.3",
     "marked-footnote": "^1.2.4",
-    "marked-katex-extension": "^5.1.2",
-    "marked-linkify-it": "^3.1.11",
+    "marked-katex-extension": "^5.1.3",
+    "marked-linkify-it": "^3.1.12",
     "md5": "^2.3.0",
-    "svelte": "^4.2.19",
+    "svelte": "^5.2.7",
     "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

@@ -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,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

@@ -478,6 +478,7 @@
   <div class="front-matter">
     <table>
       {#each frontMatter as [key, val]}
+        <!-- svelte-ignore node_invalid_placement_ssr -->
         <tr>
           <td><span class="txt-bold">{key}</span></td>
           <td>{val}</td>

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,8 @@
+import { mount } from "svelte";
+
 import App from "@app/App.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;
@@ -39,18 +39,18 @@ export function hide(): void {
   if (stored.hideCallback) {
     stored.hideCallback();
   }
+
   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 +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/modals/ErrorModal.svelte

@@ -6,10 +6,16 @@
   import IconLarge from "@app/components/IconLarge.svelte";
   import Modal from "@app/components/Modal.svelte";
 
-  export let title: string;
-  export let subtitle: string[];
-  // This is more explicit than the standard error type.
-  export let error: { message: string; stack?: string };
+  const {
+    title,
+    subtitle,
+    error,
+  }: {
+    title: string;
+    subtitle: string[];
+    // This is more explicit than the standard error type.
+    error: { message: string; stack?: string };
+  } = $props();
 </script>
 
 <Modal {title}>

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">

src/views/repos/Changeset/FileDiff.svelte

@@ -453,21 +453,23 @@
       {#if fileDiff.hunks.length > 0 && !preview}
         <table class="diff" data-file-diff-select>
           {#each fileDiff.hunks as hunk, hunkIdx}
+            <!-- svelte-ignore node_invalid_placement_ssr -->
             <tr
               class="diff-line hunk-header"
               class:selected={hunkHeaderSelected(selection, hunkIdx)}>
               <td colspan={2} style:position="relative">
-                <div class="selection-indicator-left" />
+                <div class="selection-indicator-left"></div>
               </td>
               <td
                 colspan={6}
                 class="diff-expand-header"
                 style:position="relative">
                 {hunk.header}
-                <div class="selection-indicator-right" />
+                <div class="selection-indicator-right"></div>
               </td>
             </tr>
             {#each hunk.lines as line, lineIdx}
+              <!-- svelte-ignore node_invalid_placement_ssr -->
               <tr
                 style:position="relative"
                 class={`diff-line type-${line.type}`}
@@ -483,7 +485,7 @@
                   id={[filePath, "H" + hunkIdx, "L" + lineIdx].join("-")}
                   class="diff-line-number left"
                   on:click={e => selectLine(hunkIdx, lineIdx, e)}>
-                  <div class="selection-indicator-left" />
+                  <div class="selection-indicator-left"></div>
                   {lineNumberL(line)}
                 </td>
                 <td
@@ -507,7 +509,7 @@
                     {line.line}
                   {/if}
                 </td>
-                <div class="selection-indicator-right" />
+                <td class="selection-indicator-right"></td>
               </tr>
             {/each}
           {/each}