run svelte 5 migration

Author: bomgar

src/lib/components/CopyToClipboard.svelte

@@ -2,10 +2,14 @@
   import { delay } from "$lib/delay";
   import ErrorMessage from "./ErrorMessage.svelte";
 
-  export let text: string;
-  export let label: string;
+  interface Props {
+    text: string;
+    label: string;
+  }
+
+  let { text, label }: Props = $props();
 
-  let copied = false;
+  let copied = $state(false);
   let error: string | null = null;
 
   async function copyToClipboard(text: string) {
@@ -21,7 +25,7 @@
   }
 </script>
 
-<button type="button" on:click={() => copyToClipboard(text)}>
+<button type="button" onclick={() => copyToClipboard(text)}>
   {#if copied}
     Copied
   {:else}

src/lib/components/CreateRecipientForm.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import { preventDefault } from "svelte/legacy";
+
   import { publicKeyStore } from "$lib/public_key_store";
 
-  let recipientName = "";
+  let recipientName = $state("");
 
   function createRecipient() {
     publicKeyStore.update((current) => {
@@ -17,7 +19,7 @@
 <article>
   <header>Create recipient</header>
 
-  <form on:submit|preventDefault={createRecipient}>
+  <form onsubmit={preventDefault(createRecipient)}>
     <input name="recipient_name" required placeholder="Recipient name" bind:value={recipientName} />
     <button type="submit">Create</button>
   </form>

src/lib/components/ErrorMessage.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let error: string;
+  interface Props {
+    error: string;
+  }
+
+  let { error }: Props = $props();
 </script>
 
 <article class="error-message">

src/lib/components/ImportPublicKeys.svelte

@@ -3,7 +3,7 @@
   import { publicKeyStore, type PublicKeyStore } from "$lib/public_key_store";
   import { get } from "svelte/store";
 
-  let error: string | null;
+  let error: string | undefined = $state();
 
   interface RepositoryTree {
     tree: GithubFile[];
@@ -24,7 +24,7 @@
   }
 
   async function loadPublicKeys() {
-    error = null;
+    error = undefined;
     const response = await fetch("https://api.github.com/repos/symbiolab/age-public-keys/git/trees/main?recursive=0");
 
     if (!response.ok) {
@@ -75,7 +75,7 @@
 <article>
   <header>Import symbiolab public keys</header>
   <p>Import will overwrite existing symbiolab recipients. Recipients that are not part of symbiolab are left intact.</p>
-  <button on:click={loadPublicKeys}>Import</button>
+  <button onclick={loadPublicKeys}>Import</button>
   {#if error != null}
     <ErrorMessage {error} />
   {/if}

src/lib/components/Message.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-  export let message: string;
+  interface Props {
+    message: string;
+  }
+
+  let { message }: Props = $props();
 </script>
 
 <article>

src/lib/components/PrivateKeyCard.svelte

@@ -1,12 +1,18 @@
 <script lang="ts">
+  import { run } from "svelte/legacy";
+
   import { get_public_key_for_private_key } from "rage-webassembly";
   import ErrorMessage from "./ErrorMessage.svelte";
 
-  export let name: string;
-  export let privateKey: string;
-  export let handleDelete: (name: string) => void;
-  let publicKey: string | null = null;
-  let error: string | null = null;
+  interface Props {
+    name: string;
+    privateKey: string;
+    handleDelete: (name: string) => void;
+  }
+
+  let { name, privateKey, handleDelete }: Props = $props();
+  let publicKey: string | null = $state(null);
+  let error: string | null = $state(null);
 
   function getPublicKeyForPrivateKey(key: string) {
     error = null;
@@ -18,7 +24,9 @@
     }
   }
 
-  $: getPublicKeyForPrivateKey(privateKey);
+  run(() => {
+    getPublicKeyForPrivateKey(privateKey);
+  });
 </script>
 
 <article>
@@ -29,5 +37,5 @@
   {#if error != null}
     <ErrorMessage {error} />
   {/if}
-  <button on:click={() => handleDelete(name)}>Delete</button>
+  <button onclick={() => handleDelete(name)}>Delete</button>
 </article>

src/lib/components/PublicKeyPicker.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import { sortedKeys } from "$lib/public_key_store";
   import { get } from "svelte/store";
-  export let selection: string[] = [];
+  interface Props {
+    selection?: string[];
+  }
+
+  let { selection = $bindable([]) }: Props = $props();
 
   function selectAll() {
     selection = [...get(sortedKeys)];
@@ -23,4 +27,4 @@
   {/each}
 </fieldset>
 
-<button on:click={selectAll} type="button">Select all</button>
+<button onclick={selectAll} type="button">Select all</button>

src/lib/components/RecipientCard.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+  import { preventDefault } from "svelte/legacy";
+
   import { publicKeyStore } from "$lib/public_key_store";
-  export let recipientName: string;
+  interface Props {
+    recipientName: string;
+  }
+
+  let { recipientName }: Props = $props();
 
-  let publicKeyToAdd = "";
+  let publicKeyToAdd = $state("");
 
   function addKey() {
     publicKeyStore.update((current) => {
@@ -43,16 +49,16 @@
     {#each $publicKeyStore[recipientName] as key}
       <div class="key">
         <pre>{key}</pre>
-        <button on:click={() => deletePublicKey(key)} type="button">Delete</button>
+        <button onclick={() => deletePublicKey(key)} type="button">Delete</button>
       </div>
     {/each}
 
     <footer>
-      <form on:submit|preventDefault={addKey} class="add-key-form">
+      <form onsubmit={preventDefault(addKey)} class="add-key-form">
         <input name="public_key" required placeholder="Public key" bind:value={publicKeyToAdd} />
         <button type="submit">add</button>
       </form>
-      <button type="button" on:click={deleteRecipient}>Delete Recipient</button>
+      <button type="button" onclick={deleteRecipient}>Delete Recipient</button>
     </footer>
   </article>
 {/if}

src/routes/+layout.svelte

@@ -2,13 +2,18 @@
   import "@fontsource/fira-sans";
   import "@fontsource/fira-code";
   import "$lib/scss/global.scss";
+  interface Props {
+    children?: import("svelte").Snippet;
+  }
+
+  let { children }: Props = $props();
 </script>
 
 <div class="title">
   <a href="/">fbrage</a>
 </div>
 <main>
-  <slot />
+  {@render children?.()}
 </main>
 
 <style lang="scss">

src/routes/decrypt-file/+page.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+  import { preventDefault } from "svelte/legacy";
+
   import { decrypt_file } from "rage-webassembly";
   import { get } from "svelte/store";
   import ErrorMessage from "$lib/components/ErrorMessage.svelte";
   import { onDestroy } from "svelte";
   import { privateKeyStore } from "$lib/private_key_store";
 
   let file: File | null;
-  let error: string | null = null;
+  let error: string | null = $state(null);
   let objectURL: string | null = null;
 
   onDestroy(() => {
@@ -54,8 +56,8 @@
 
 <p>Available private keys: {Object.keys($privateKeyStore).length}</p>
 
-<form on:submit|preventDefault={handleSubmit}>
-  <input required type="file" on:change={handleChange} />
+<form onsubmit={preventDefault(handleSubmit)}>
+  <input required type="file" onchange={handleChange} />
   <button>Decrypt</button>
 </form>