Add required changes for svelte@4

package.json

@@ -65,7 +65,7 @@
     "md5": "^2.3.0",
     "plausible-tracker": "^0.3.8",
     "sinon": "^15.1.2",
-    "svelte": "^3.59.1",
+    "svelte": "^4.0.0",
     "twemoji": "^14.0.2",
     "zod": "^3.21.4"
   }

src/App/ColorPaletteModal.svelte

@@ -134,6 +134,7 @@
 
 <Modal closeAction={false}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div slot="body">
     <div class="container" on:click={() => (checkers = !checkers)}>
       <div class:checkers>

src/App/Header/Connect.svelte

@@ -128,6 +128,7 @@
         </Link>
 
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
           class="dropdown-button rounded"
           on:click={() => {

src/App/Header/SettingsDropdown.svelte

@@ -92,19 +92,19 @@
     <ThemeToggle />
   </div>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     class="item selector"
     on:click|stopPropagation={() => (showFonts = !showFonts)}>
     <div>Code font</div>
     <Icon name={`chevron-${showFonts ? "down" : "right"}`} />
   </div>
   {#if showFonts}
-    <div
-      class="fonts"
-      transition:slide|local={{ duration: 150, easing: quadIn }}>
+    <div class="fonts" transition:slide={{ duration: 150, easing: quadIn }}>
       {#each codeFonts as font}
         {@const isSelectedFont = $codeFont === font.storedName}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
         <div
           on:click={() => switchFont(font.storedName)}
           class="item font"

src/App/ModalPortal.svelte

@@ -30,6 +30,7 @@
 {#if $modalStore}
   <div class="container">
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
       class="overlay"
       on:click={hide}

src/components/Badge.svelte

@@ -49,6 +49,7 @@
   }
 </style>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
   on:mouseenter
   on:mouseleave

src/components/Clipboard.svelte

@@ -50,6 +50,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <span
   title={tooltip}
   class="clipboard"

src/components/Dropdown/DropdownItem.svelte

@@ -24,6 +24,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="item"
   class:selected

src/components/Floating.svelte

@@ -43,6 +43,7 @@
 
 <div bind:this={thisComponent}>
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     on:click={toggle}
     class="toggle"

src/components/Icon.svelte

@@ -35,6 +35,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <svg
   role="img"
   on:click

src/components/SquareButton.svelte

@@ -63,6 +63,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   {title}
   on:click

src/lib/modal.ts

@@ -1,9 +1,6 @@
+import type { ComponentProps, ComponentType, SvelteComponent } from "svelte";
+
 import { derived, get, writable } from "svelte/store";
-import type {
-  ComponentProps,
-  ComponentType,
-  SvelteComponentTyped,
-} from "svelte";
 
 type HideCallback = () => void;
 
@@ -45,13 +42,13 @@ export function hide(): void {
   store.set(undefined);
 }
 
-interface ShowArgs<T extends SvelteComponentTyped> {
+interface ShowArgs<T extends SvelteComponent> {
   component: ComponentType<T>;
   props: ComponentProps<T>;
   hideCallback?: HideCallback;
 }
 
-export function show<Component extends SvelteComponentTyped>(
+export function show<Component extends SvelteComponent>(
   args: ShowArgs<Component>,
 ): void {
   // Defocus any active input elements, so that we can always close an open
@@ -62,7 +59,7 @@ export function show<Component extends SvelteComponentTyped>(
   store.set(args);
 }
 
-export function toggle<Component extends SvelteComponentTyped>(
+export function toggle<Component extends SvelteComponent>(
   args: ShowArgs<Component>,
 ): void {
   const stored = get(modalStore);

src/views/projects/Blob.svelte

@@ -228,7 +228,7 @@
       </span>
       <div class="right">
         {#if isMarkdown}
-          <div class="toggle">
+          <div title="Toggle render method" class="toggle">
             <SquareButton clickable on:click={toggleMarkdown}>
               {showMarkdown ? "Plain" : "Markdown"}
             </SquareButton>

src/views/projects/Cob/CobStateButton.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" strictEvents>
-  type T = $$Generic;
+  import type { IssueState } from "@httpd-client";
 
   import Button from "@app/components/Button.svelte";
   import Dropdown from "@app/components/Dropdown.svelte";
@@ -11,15 +11,15 @@
   import { createEventDispatcher } from "svelte";
   import { isEqual } from "lodash";
 
-  export let state: T;
-  export let selectedItem: [string, T];
-  export let items: [string, T][];
+  export let state: IssueState;
+  export let selectedItem: [string, IssueState];
+  export let items: [string, IssueState][];
 
   const dispatch = createEventDispatcher<{
-    saveStatus: T;
+    saveStatus: IssueState;
   }>();
 
-  function switchCaption(item: [string, T]) {
+  function switchCaption(item: [string, IssueState]) {
     selectedItem = item;
     closeFocused();
   }

src/views/projects/SourceBrowser/FileDiff.svelte

@@ -153,6 +153,7 @@
 <div id={file.path} class="wrapper">
   <header class="header">
     <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div class="expand-button" on:click={() => (collapsed = !collapsed)}>
       {#if collapsed}
         <Icon name="chevron-right" />

src/views/projects/Tree/Folder.svelte

@@ -68,6 +68,7 @@
 </style>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="folder" on:click={onClick}>
   <span class="folder-name">{name}/</span>
 </div>

tests/e2e/project.spec.ts

@@ -228,12 +228,12 @@ test("markdown files", async ({ page }) => {
 
   // Switch between raw and rendered modes.
   {
-    const plainButton = page.locator('text="Plain"');
-    await plainButton.click();
+    const toggleButton = page.getByTitle("Toggle render method");
+    await expect(toggleButton).toHaveText("Plain");
+    await toggleButton.click();
     await expect(page.locator("text=##### Table of Contents")).toBeVisible();
-
-    const markdownButton = page.locator('text="Markdown"');
-    await markdownButton.click();
+    await expect(toggleButton).toHaveText("Markdown");
+    await toggleButton.click();
   }
 
   // Internal links go to anchor.