Add required changes for svelte@4

Signed-off-by: Sebastian Martinez <[email protected]>

Author: sebastinez

package-lock.json

@@ -28,24 +28,24 @@
     "@types/lodash": "^4.14.195",
     "@types/marked": "^5.0.0",
     "@types/md5": "^2.3.2",
-    "@types/node": "^18.16.12",
+    "@types/node": "^18.16.16",
     "@types/sinon": "^10.0.15",
     "@types/sinonjs__fake-timers": "^8.1.2",
     "@types/wait-on": "^5.3.1",
     "@typescript-eslint/eslint-plugin": "^5.59.8",
     "chalk": "^5.2.0",
-    "eslint": "^8.41.0",
-    "eslint-plugin-svelte": "^2.29.0",
+    "eslint": "^8.42.0",
+    "eslint-plugin-svelte": "^2.30.0",
     "execa": "^7.1.1",
     "exit-hook": "^3.2.0",
-    "get-port": "^6.1.2",
+    "get-port": "^7.0.0",
     "happy-dom": "^9.20.3",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte-check": "^3.4.3",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.3",
     "vite": "^4.3.9",
-    "vitest": "^0.31.2",
+    "vitest": "^0.31.4",
     "wait-on": "^7.0.1"
   },
   "dependencies": {
@@ -64,7 +64,7 @@
     "md5": "^2.3.0",
     "plausible-tracker": "^0.3.8",
     "sinon": "^15.1.0",
-    "svelte": "^3.59.1",
+    "svelte": "^4.0.0-next.0",
     "twemoji": "^14.0.2",
     "zod": "^3.21.4"
   }

package.json

@@ -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/ColorPaletteModal.svelte

@@ -120,6 +120,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/Connect.svelte

@@ -92,6 +92,7 @@
     <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)}>
@@ -101,10 +102,11 @@
   {#if showFonts}
     <div
       class="fonts"
-      transition:slide|local={{ duration: 150, easing: quadIn }}>
+      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/Header/SettingsDropdown.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/App/ModalPortal.svelte

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

src/components/Badge.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/Clipboard.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/Dropdown/DropdownItem.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/Floating.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/Icon.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/components/SquareButton.svelte

@@ -2,7 +2,7 @@ import { derived, get, writable } from "svelte/store";
 import type {
   ComponentProps,
   ComponentType,
-  SvelteComponentTyped,
+  SvelteComponent,
 } from "svelte";
 
 type HideCallback = () => void;
@@ -45,13 +45,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 +62,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/lib/modal.ts

@@ -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/SourceBrowser/FileDiff.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>