Make all Svelte events type-safe

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

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);

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);
   };

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

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

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>

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>

src/Search.svelte

@@ -135,7 +135,7 @@
   export let wallet: Wallet;
 
   const dispatch = createEventDispatcher<{
-    finished: boolean;
+    finished: never;
     search: { query: string; results: ProjectsAndProfiles };
   }>();
 

src/TextInput.svelte

@@ -17,7 +17,7 @@
   export let validationMessage: string | undefined = undefined;
 
   const dispatch = createEventDispatcher<{
-    submit: boolean;
+    submit: never;
   }>();
 
   let rightContainerWidth: number;

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);
   };

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);

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(

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);
   };

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;

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);
   };

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);
 

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,

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) {

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);
   };

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>

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;