svelte 5

2 files changed, 24 insertions, 14 deletions

diff --git a/src/routes/(app)/messages/+page.svelte b/src/routes/(app)/messages/+page.svelte
index 61464770..269a5de3 100644
--- a/src/routes/(app)/messages/+page.svelte
+++ b/src/routes/(app)/messages/+page.svelte
@@ -1,20 +1,21 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import Avatar from "$comp/Avatar.svelte";
   import { event as e, password } from "$lib/store";
   import { browser } from "$app/environment";
   import { decrypt } from "$lib/nostr";
 
-  export let data;
+  let { data } = $props();
 
   let { messages, notes, invoices, sent, received, subject, user, rates } =
-    data;
-  $: refresh(data);
+    $state(data);
   let refresh = (d) =>
     ({ messages, notes, invoices, sent, received, subject, user, rates } = d);
 
   let keys = new Set();
-  let latest = [];
+  let latest = $state([]);
   let ready;
 
   e.subscribe(async (event) => {
@@ -35,7 +36,6 @@
     }
   });
 
-  $: initialize($password);
   let initialize = async (p) => {
     let i = 0;
     ready = false;
@@ -61,6 +61,12 @@
     latest = latest;
     ready = true;
   };
+  run(() => {
+    refresh(data);
+  });
+  run(() => {
+    initialize($password);
+  });
 </script>
 
 <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
diff --git a/src/routes/(app)/messages/[recipient]/+page.svelte b/src/routes/(app)/messages/[recipient]/+page.svelte
index 9b9f6f47..bc1a6383 100644
--- a/src/routes/(app)/messages/[recipient]/+page.svelte
+++ b/src/routes/(app)/messages/[recipient]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { cubicInOut } from "svelte/easing";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
@@ -13,7 +15,7 @@
   import { tick, onMount } from "svelte";
   import { getEventHash } from "nostr-tools";
 
-  export let data;
+  let { data } = $props();
 
   function fadeScale(
     node,
@@ -36,10 +38,9 @@
     };
   }
 
-  let { messages, recipient, user } = data;
-  let input, pane;
+  let { messages, recipient, user } = $state(data);
+  let input, pane = $state();
 
-  $: initialize($password);
   let initialize = async (p) => {
     await Promise.all(
       messages.map(
@@ -61,7 +62,7 @@
     }
   });
 
-  let sent, submitting, message;
+  let sent, submitting, message = $state();
   let submit = async () => {
     submitting = true;
 
@@ -109,6 +110,9 @@
       submit();
     }
   };
+  run(() => {
+    initialize($password);
+  });
 </script>
 
 <div class="container max-w-xl mx-auto px-4 space-y-5">
@@ -116,7 +120,7 @@
     type="button"
     class="hover:opacity-80"
     data-sveltekit-preload-data="false"
-    on:click={back}
+    onclick={back}
   >
     <Icon icon="arrow-left" style="w-10" />
   </button>
@@ -162,7 +166,7 @@
   <form
     method="POST"
     class="w-full border rounded-xl outline-none gap-4 flex p-0 pr-2"
-    on:submit|preventDefault={submit}
+    onsubmit={preventDefault(submit)}
   >
     <input type="hidden" name="requester_id" value={user.id} />
     <input type="hidden" name="recipient" value={recipient.username} />
@@ -172,8 +176,8 @@
       contenteditable
       class="grow break-all py-4 outline-none mt-0 pl-4"
       bind:innerHTML={message}
-      on:keydown={keydown}
-    />
+      onkeydown={keydown}
+></div>
     <button type="submit" class="my-auto shrink-0">
       <Icon icon="send" style="w-8" />
     </button>