From bc43fc4fef1c08ff196c3dc38a2c6ddaa3daa341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Mon, 7 Nov 2022 17:22:29 +0100
Subject: [PATCH] Make all Svelte events type-safe
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/Clipboard.svelte                          |  4 ++--
 src/Dropdown.svelte                           |  4 ++--
 src/ErrorModal.svelte                         |  4 ++--
 src/Form.svelte                               | 23 ++++++++++++++-----
 src/ReactionSelector.svelte                   |  4 ++--
 src/Reactions.svelte                          |  4 ++--
 src/Search.svelte                             |  2 +-
 src/TextInput.svelte                          |  2 +-
 src/base/projects/BranchSelector.svelte       |  4 ++--
 src/base/projects/Commit/CommitTeaser.svelte  |  4 ++--
 src/base/projects/Patch/PatchTabBar.svelte    |  7 ++++--
 src/base/projects/PeerSelector.svelte         |  4 ++--
 .../projects/SourceBrowser/FileDiff.svelte    |  4 ++--
 src/base/projects/Tree.svelte                 |  4 ++--
 src/base/projects/Tree/Folder.svelte          |  4 ++--
 src/base/registrations/Update.svelte          |  4 ++--
 src/base/registrations/View.svelte            | 14 ++++-------
 src/components/Modal/ConnectWallet.svelte     |  4 ++--
 src/components/Modal/SearchResults.svelte     |  4 ++--
 src/ens/SetName.svelte                        |  4 ++--
 20 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/src/Clipboard.svelte b/src/Clipboard.svelte
index 1950ec250..bbf301caf 100644
--- a/src/Clipboard.svelte
+++ b/src/Clipboard.svelte
@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import Icon from "@app/Icon.svelte";
   import { toClipboard } from "@app/utils";
   import { createEventDispatcher } from "svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ copied: never }>();
 
   const copy = () => {
     toClipboard(text);
diff --git a/src/Dropdown.svelte b/src/Dropdown.svelte
index cbbd70727..db05b7706 100644
--- a/src/Dropdown.svelte
+++ b/src/Dropdown.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
   import Badge from "@app/Badge.svelte";
 
@@ -10,7 +10,7 @@
   }[];
   export let selected: string | null = null;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ select: string }>();
   const onSelect = (item: string) => {
     dispatch("select", item);
   };
diff --git a/src/ErrorModal.svelte b/src/ErrorModal.svelte
index 928ee4c3e..1fecc892b 100644
--- a/src/ErrorModal.svelte
+++ b/src/ErrorModal.svelte
@@ -1,11 +1,11 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { Err } from "@app/error";
 
   import { createEventDispatcher } from "svelte";
   import Modal from "@app/Modal.svelte";
   import Button from "@app/Button.svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ close: never }>();
 
   export let error: Err | null = null;
   export let title = "Error";
diff --git a/src/Form.svelte b/src/Form.svelte
index 9690d0c7f..c1534f364 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -1,4 +1,9 @@
 <script context="module" lang="ts">
+  export interface RegistrationRecord {
+    name: string;
+    value: string;
+  }
+
   export interface Field {
     name: string;
     value: string;
@@ -43,7 +48,7 @@
   };
 </script>
 
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { Wallet } from "@app/wallet";
 
   import cloneDeep from "lodash/cloneDeep";
@@ -71,7 +76,7 @@
 
   marked.use({ extensions });
 
-  const check = (event: Event) => {
+  const check = (event: Event): void => {
     const name = (<HTMLInputElement>event.target).name;
     const value = (<HTMLInputElement>event.target).value;
 
@@ -92,20 +97,26 @@
     });
   };
 
-  const cleanup = (fields: Field[]): { name: string; value?: string }[] => {
+  const cleanup = (fields: Field[]): RegistrationRecord[] => {
     return fields
       .filter(field => field.editable)
       .map(field => {
         return {
           name: field.name,
-          // We only allow to have a trueish value or an empty string.
           value: field.value ? field.value.trim() : "",
         };
       });
   };
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    save: RegistrationRecord[];
+    validate: never;
+    cancel: never;
+  }>();
   const save = () => dispatch("save", cleanup(formFields));
-  const validate = (event: Event) => dispatch("validate", check(event));
+  function validate(event: Event) {
+    check(event);
+    dispatch("validate");
+  }
   const cancel = () => {
     formFields = cloneDeep(fields);
     dispatch("cancel");
diff --git a/src/ReactionSelector.svelte b/src/ReactionSelector.svelte
index 3fcc429e7..457585145 100644
--- a/src/ReactionSelector.svelte
+++ b/src/ReactionSelector.svelte
@@ -1,12 +1,12 @@
 <!-- TODO: Once we are able to add reactions, we should allow people to interact with the reaction handler -->
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
   import Icon from "@app/Icon.svelte";
   import config from "@app/config.json";
 
   const showReactions = false;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ select: string }>();
 </script>
 
 <style>
diff --git a/src/Reactions.svelte b/src/Reactions.svelte
index 93fafa372..366736f05 100644
--- a/src/Reactions.svelte
+++ b/src/Reactions.svelte
@@ -1,10 +1,10 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
   import Button from "@app/Button.svelte";
 
   export let reactions: Record<string, number> | null = null;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ click: string }>();
 </script>
 
 <style>
diff --git a/src/Search.svelte b/src/Search.svelte
index 0c4ea12c9..2f4a4bbf0 100644
--- a/src/Search.svelte
+++ b/src/Search.svelte
@@ -135,7 +135,7 @@
   export let wallet: Wallet;
 
   const dispatch = createEventDispatcher<{
-    finished: boolean;
+    finished: never;
     search: { query: string; results: ProjectsAndProfiles };
   }>();
 
diff --git a/src/TextInput.svelte b/src/TextInput.svelte
index 791987874..815ed5d31 100644
--- a/src/TextInput.svelte
+++ b/src/TextInput.svelte
@@ -17,7 +17,7 @@
   export let validationMessage: string | undefined = undefined;
 
   const dispatch = createEventDispatcher<{
-    submit: boolean;
+    submit: never;
   }>();
 
   let rightContainerWidth: number;
diff --git a/src/base/projects/BranchSelector.svelte b/src/base/projects/BranchSelector.svelte
index 9cab7aad0..d9c445ee3 100644
--- a/src/base/projects/BranchSelector.svelte
+++ b/src/base/projects/BranchSelector.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
   import type { ProjectInfo, Branches } from "@app/project";
   import { getOid } from "@app/project";
@@ -10,7 +10,7 @@
   export let project: ProjectInfo;
   export let revision: string;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ branchChanged: string }>();
   const switchBranch = (name: string) => {
     dispatch("branchChanged", name);
   };
diff --git a/src/base/projects/Commit/CommitTeaser.svelte b/src/base/projects/Commit/CommitTeaser.svelte
index 79372e7ca..0b222abbf 100644
--- a/src/base/projects/Commit/CommitTeaser.svelte
+++ b/src/base/projects/Commit/CommitTeaser.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { CommitMetadata } from "@app/commit";
   import { formatCommit } from "@app/utils";
   import { createEventDispatcher } from "svelte";
@@ -9,7 +9,7 @@
 
   export let commit: CommitMetadata;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ browseCommit: string }>();
 
   function browseCommit(commit: string) {
     dispatch("browseCommit", commit);
diff --git a/src/base/projects/Patch/PatchTabBar.svelte b/src/base/projects/Patch/PatchTabBar.svelte
index a2c08113e..7bbc60592 100644
--- a/src/base/projects/Patch/PatchTabBar.svelte
+++ b/src/base/projects/Patch/PatchTabBar.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { ToggleButtonOption } from "@app/ToggleButton.svelte";
 
   import Dropdown from "@app/Dropdown.svelte";
@@ -14,7 +14,10 @@
   export let revisionNumber: number;
   export let activeTab: PatchTab;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    switchTab: PatchTab;
+    revisionChanged: string;
+  }>();
 
   const formatRevisionName = (revision: Revision, index: number) => {
     return `R${index} ${formatCommit(revision.oid)} ${formatTimestamp(
diff --git a/src/base/projects/PeerSelector.svelte b/src/base/projects/PeerSelector.svelte
index 50047d1dd..045588ae5 100644
--- a/src/base/projects/PeerSelector.svelte
+++ b/src/base/projects/PeerSelector.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher, onMount } from "svelte";
   import Icon from "@app/Icon.svelte";
   import Dropdown from "@app/Dropdown.svelte";
@@ -45,7 +45,7 @@
     });
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ peerChanged: string }>();
   const switchPeer = (peer: string) => {
     dispatch("peerChanged", peer);
   };
diff --git a/src/base/projects/SourceBrowser/FileDiff.svelte b/src/base/projects/SourceBrowser/FileDiff.svelte
index 67e3dfad7..e106d17b0 100644
--- a/src/base/projects/SourceBrowser/FileDiff.svelte
+++ b/src/base/projects/SourceBrowser/FileDiff.svelte
@@ -1,11 +1,11 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
   import Icon from "@app/Icon.svelte";
   import { lineNumberL, lineNumberR, lineSign } from "@app/diff";
   import type { FileDiff } from "@app/diff";
   import Badge from "@app/Badge.svelte";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ browse: string }>();
 
   export let file: FileDiff;
   export let mode: string | null = null;
diff --git a/src/base/projects/Tree.svelte b/src/base/projects/Tree.svelte
index 9a6017b8b..ba12ba1da 100644
--- a/src/base/projects/Tree.svelte
+++ b/src/base/projects/Tree.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
 
   import type { Tree } from "@app/project";
@@ -12,7 +12,7 @@
   export let tree: Tree;
   export let loadingPath: string | null = null;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ select: string }>();
   const onSelect = ({ detail: path }: { detail: string }): void => {
     dispatch("select", path);
   };
diff --git a/src/base/projects/Tree/Folder.svelte b/src/base/projects/Tree/Folder.svelte
index 72400990b..10c24e0de 100644
--- a/src/base/projects/Tree/Folder.svelte
+++ b/src/base/projects/Tree/Folder.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { createEventDispatcher } from "svelte";
 
   import Loading from "@app/Loading.svelte";
@@ -16,7 +16,7 @@
   let expanded = currentPath.indexOf(prefix) === 0;
   let tree: Promise<Tree> | null = expanded ? fetchTree(prefix) : null;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ select: string }>();
   const onSelectFile = ({ detail: path }: { detail: string }) =>
     dispatch("select", path);
 
diff --git a/src/base/registrations/Update.svelte b/src/base/registrations/Update.svelte
index f3dbc5960..abbab5dd7 100644
--- a/src/base/registrations/Update.svelte
+++ b/src/base/registrations/Update.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import { onMount, createEventDispatcher } from "svelte";
   import { setRecords } from "./resolver";
   import type { EnsRecord } from "./resolver";
@@ -15,7 +15,7 @@
   export let records: EnsRecord[];
   export let registration: Registration;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ close: never }>();
 
   let state: State = {
     status: Status.Failed,
diff --git a/src/base/registrations/View.svelte b/src/base/registrations/View.svelte
index 6e573a0eb..afd0541e8 100644
--- a/src/base/registrations/View.svelte
+++ b/src/base/registrations/View.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { EnsRecord } from "./resolver";
-  import type { Field } from "@app/Form.svelte";
+  import type { Field, RegistrationRecord } from "@app/Form.svelte";
   import type { Registration } from "./registrar";
   import type { Wallet } from "@app/wallet";
   import type { ethers } from "ethers";
@@ -169,16 +169,12 @@
       });
   });
 
-  const onSave = async (event: {
-    detail: { name: string; value: string | null }[];
-  }) => {
+  const onSave = async (event: { detail: RegistrationRecord[] }) => {
     assert(state.status === Status.Found, "registration must be found");
 
-    updateRecords = event.detail
-      .filter(f => f.value !== null)
-      .map(f => {
-        return { name: f.name, value: f.value as string };
-      });
+    updateRecords = event.detail.map(f => {
+      return { name: f.name, value: f.value };
+    });
   };
 
   $: if (retry && state.status === Status.NotFound && retries > 0) {
diff --git a/src/components/Modal/ConnectWallet.svelte b/src/components/Modal/ConnectWallet.svelte
index 331af0f5b..15ba5e70a 100644
--- a/src/components/Modal/ConnectWallet.svelte
+++ b/src/components/Modal/ConnectWallet.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { Wallet } from "@app/wallet";
 
   import { createEventDispatcher } from "svelte";
@@ -21,7 +21,7 @@
     ecl: "M",
   });
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ close: never }>();
   const onClickConnect = () => {
     state.connectMetamask(wallet);
   };
diff --git a/src/components/Modal/SearchResults.svelte b/src/components/Modal/SearchResults.svelte
index a1a339539..3326fad3b 100644
--- a/src/components/Modal/SearchResults.svelte
+++ b/src/components/Modal/SearchResults.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import Modal from "@app/Modal.svelte";
   import { formatRadicleUrn, getSeedEmoji } from "@app/utils";
   import type { Wallet } from "@app/wallet";
@@ -12,7 +12,7 @@
   export let results: ProjectsAndProfiles;
   export let wallet: Wallet;
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ close: never }>();
 </script>
 
 <style>
diff --git a/src/ens/SetName.svelte b/src/ens/SetName.svelte
index ea7be963e..897009660 100644
--- a/src/ens/SetName.svelte
+++ b/src/ens/SetName.svelte
@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts" strictEvents>
   import type { Wallet } from "@app/wallet";
   import type { User } from "@app/base/users/User";
 
@@ -12,7 +12,7 @@
   import TextInput from "@app/TextInput.svelte";
   import { formatAddress, isAddressEqual } from "@app/utils";
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{ close: never }>();
 
   export let entity: User;
   export let wallet: Wallet;