svelte 5

5 files changed, 92 insertions, 58 deletions

diff --git a/src/routes/(static)/+layout.svelte b/src/routes/(static)/+layout.svelte
index c9bdc091..44310c97 100644
--- a/src/routes/(static)/+layout.svelte
+++ b/src/routes/(static)/+layout.svelte
@@ -1,13 +1,17 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { SvelteToast } from "@zerodevx/svelte-toast";
   import Footer from "$comp/Footer.svelte";
   import LandingHeader from "$comp/LandingHeader.svelte";
   import { theme as themeStore } from "$lib/store";
 
-  export let data;
-  let { theme } = data;
-  $: ({ user } = data);
-  $: theme = $themeStore;
+  let { data, children } = $props();
+  let { theme } = $state(data);
+  let { user } = $derived(data);
+  run(() => {
+    theme = $themeStore;
+  });
 </script>
 
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
@@ -16,6 +20,6 @@
   class="container flex px-4 md:px-40 mx-auto min-h-[600px]"
   data-theme={theme}
 >
-  <slot />
+  {@render children?.()}
 </main>
 <Footer />
diff --git a/src/routes/(static)/docs/+page.svelte b/src/routes/(static)/docs/+page.svelte
index f83ba8c0..9f724484 100644
--- a/src/routes/(static)/docs/+page.svelte
+++ b/src/routes/(static)/docs/+page.svelte
@@ -5,7 +5,7 @@
   import Code from "$comp/Code.svelte";
   import Icon from "$comp/Icon.svelte";
 
-  export let data;
+  let { data } = $props();
 
   let { user, token } = data;
 
@@ -40,7 +40,7 @@
   <h2 class="text-2xl">API Base URL</h2>
   <div class="bg-primary text-primary-content rounded-lg p-4 flex gap-4">
     <div>{api}</div>
-    <button class="ml-auto my-auto invert opacity-90" on:click={() => copy(api)}
+    <button class="ml-auto my-auto invert opacity-90" onclick={() => copy(api)}
       ><Icon icon="copy" style="w-10 max-w-none" /></button
     >
   </div>
@@ -61,7 +61,7 @@
     <div class="w-full break-all">{tokenSample}</div>
     <button
       class="ml-auto my-auto invert opacity-90"
-      on:click={() => copy(tokenSample)}
+      onclick={() => copy(tokenSample)}
       ><Icon icon="copy" style="w-10 max-w-none" /></button
     >
   </div>
diff --git a/src/routes/(static)/login/+page.svelte b/src/routes/(static)/login/+page.svelte
index f51a24eb..d50e0cdc 100644
--- a/src/routes/(static)/login/+page.svelte
+++ b/src/routes/(static)/login/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { onMount } from "svelte";
   import { applyAction, deserialize } from "$app/forms";
   import { tick } from "svelte";
@@ -23,28 +25,24 @@
     if (lang) document.cookie = `lang=${lang} ;`;
   });
 
-  export let form;
+  let { form } = $props();
 
-  let token, formElement;
+  let token = $state(), formElement;
   let code = [];
   let redirect;
 
   $password = undefined;
 
-  $: need2fa = form?.message === "2fa";
   let cancel = () => (need2fa = false);
-  $: if (form?.message === "2fa" && form.token === token) token = "";
 
-  let username, email, btn;
+  let username = $state(), email, btn = $state();
 
-  $: update(form);
   let update = (form) => form && ({ username, password: $password } = form);
 
-  $: token && token?.length === 6 && tick().then(() => btn.click());
 
-  let revealPassword = false;
+  let revealPassword = $state(false);
 
-  let loading;
+  let loading = $state();
   async function handleSubmit(e) {
     loading = true;
 
@@ -69,6 +67,19 @@
     applyAction(result);
     loading = false;
   }
+  let need2fa;
+  run(() => {
+    need2fa = form?.message === "2fa";
+  });
+  run(() => {
+    if (form?.message === "2fa" && form.token === token) token = "";
+  });
+  run(() => {
+    update(form);
+  });
+  run(() => {
+    token && token?.length === 6 && tick().then(() => btn.click());
+  });
 </script>
 
 {#if need2fa}
@@ -86,7 +97,7 @@
     </div>
   {/if}
 
-  <form class="space-y-5" on:submit|preventDefault={handleSubmit} method="POST">
+  <form class="space-y-5" onsubmit={preventDefault(handleSubmit)} method="POST">
     <input
       type="hidden"
       name="loginRedirect"
@@ -131,10 +142,10 @@
       {/if}
       <iconify-icon
         class="cursor-pointer ml-auto"
-        on:click={() => (revealPassword = !revealPassword)}
+        onclick={() => (revealPassword = !revealPassword)}
         icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
         width="32"
-      />
+></iconify-icon>
     </label>
 
     <div class="flex justify-end items-center">
diff --git a/src/routes/(static)/register/+page.svelte b/src/routes/(static)/register/+page.svelte
index fe9a4aa2..c179552c 100644
--- a/src/routes/(static)/register/+page.svelte
+++ b/src/routes/(static)/register/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import punks from "$lib/punks";
   import { upload } from "$lib/upload";
   import { afterNavigate, invalidateAll } from "$app/navigation";
@@ -23,12 +25,10 @@
     animals,
   } from "unique-names-generator";
 
-  export let form;
-  export let data;
+  let { form = $bindable(), data } = $props();
 
-  $: data && ($avatar = undefined);
-  let username;
-  let { index } = data;
+  let username = $state();
+  let { index } = $state(data);
 
   let cleared;
   let clear = () => {
@@ -64,24 +64,20 @@
     }
   });
 
-  let token, formElement;
+  let token = $state(), formElement;
   let code = [];
   let redirect;
 
-  $: need2fa = form?.message === "2fa";
   let cancel = () => (need2fa = false);
-  $: if (form?.message === "2fa" && form.token === token) token = "";
 
-  let email, btn;
+  let email, btn = $state();
 
-  $: update(form);
   let update = (form) => form && ({ username, password: $password } = form);
 
-  $: token && token?.length === 6 && tick().then(() => btn.click());
 
-  let revealPassword;
+  let revealPassword = $state();
 
-  let loading;
+  let loading = $state();
   async function handleSubmit(e) {
     loading = true;
 
@@ -127,8 +123,7 @@
     loading = false;
   }
 
-  let avatarInput;
-  $: src = `/api/public/${punks[index]}.webp`;
+  let avatarInput = $state();
   let decr = () => (index = index <= 0 ? 63 : index - 1);
   let incr = () => (index = index >= 63 ? 0 : index + 1);
   let selectAvatar = () => avatarInput.click();
@@ -149,6 +144,26 @@
 
     reader.readAsDataURL(file);
   };
+  run(() => {
+    data && ($avatar = undefined);
+  });
+  let need2fa;
+  run(() => {
+    need2fa = form?.message === "2fa";
+  });
+  run(() => {
+    if (form?.message === "2fa" && form.token === token) token = "";
+  });
+  run(() => {
+    update(form);
+  });
+  run(() => {
+    token && token?.length === 6 && tick().then(() => btn.click());
+  });
+  let src;
+  run(() => {
+    src = `/api/public/${punks[index]}.webp`;
+  });
 </script>
 
 {#if need2fa}
@@ -163,17 +178,17 @@
     type="file"
     class="hidden"
     bind:this={avatarInput}
-    on:change={(e) => handleFile(e, "profile")}
+    onchange={(e) => handleFile(e, "profile")}
   />
 
   <div class="relative">
     <button
       class="absolute w-8 h-12 left-12 bg-base-100 rounded top-12"
-      on:click={decr}
+      onclick={decr}
     >
-      <iconify-icon icon="ph:caret-left-bold" width="32" />
+      <iconify-icon icon="ph:caret-left-bold" width="32"></iconify-icon>
     </button>
-    <div class="block relative w-32 mx-auto" on:click={selectAvatar}>
+    <div class="block relative w-32 mx-auto" onclick={selectAvatar}>
       <button
         class="w-32 h-32 rounded-full border-4 border-white overflow-hidden flex mx-auto relative"
       >
@@ -186,14 +201,14 @@
       <button
         class="absolute bg-base-100 rounded-full p-2 mx-auto right-0 bottom-0 z-10 w-12"
       >
-        <iconify-icon icon="ph:upload-simple-bold" width="24" />
+        <iconify-icon icon="ph:upload-simple-bold" width="24"></iconify-icon>
       </button>
     </div>
     <button
       class="absolute w-8 h-12 right-12 bg-base-100 rounded top-12"
-      on:click={incr}
+      onclick={incr}
     >
-      <iconify-icon icon="ph:caret-right-bold" width="32" />
+      <iconify-icon icon="ph:caret-right-bold" width="32"></iconify-icon>
     </button>
   </div>
 
@@ -203,7 +218,7 @@
     </div>
   {/if}
 
-  <form class="space-y-5" on:submit|preventDefault={handleSubmit} method="POST">
+  <form class="space-y-5" onsubmit={preventDefault(handleSubmit)} method="POST">
     <input
       type="hidden"
       name="loginRedirect"
@@ -222,17 +237,17 @@
         type="text"
         required
         bind:value={username}
-        on:focus={clear}
+        onfocus={clear}
         autocapitalize="none"
         placeholder={$t("login.username")}
       />
       <iconify-icon
         class="cursor-pointer"
         tabindex="-1"
-        on:click={refresh}
+        onclick={refresh}
         icon="ph:dice-three-bold"
         width="32"
-      />
+></iconify-icon>
     </label>
 
     <label
@@ -257,17 +272,17 @@
           required
           bind:value={$password}
           autocapitalize="none"
-          on:focus={clear}
+          onfocus={clear}
           placeholder={$t("login.password")}
         />
       {/if}
       <iconify-icon
         tabindex="-1"
         class="cursor-pointer"
-        on:click={() => (revealPassword = !revealPassword)}
+        onclick={() => (revealPassword = !revealPassword)}
         icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
         width="32"
-      />
+></iconify-icon>
     </label>
 
     <button type="submit" class="btn" disabled={loading} bind:this={btn}>
diff --git a/src/routes/(static)/support/+page.svelte b/src/routes/(static)/support/+page.svelte
index 062f552b..b47c5c1a 100644
--- a/src/routes/(static)/support/+page.svelte
+++ b/src/routes/(static)/support/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { browser } from "$app/environment";
   import { onDestroy } from "svelte";
   import { fail, success, post } from "$lib/utils";
@@ -6,16 +8,18 @@
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 
-  export let data;
+  let { data = $bindable() } = $props();
 
   let { user } = data;
-  $: if (user) {
-    data.subject = { ...user };
-  }
+  run(() => {
+    if (user) {
+      data.subject = { ...user };
+    }
+  });
 
-  let email;
-  let message;
-  let sent;
+  let email = $state();
+  let message = $state();
+  let sent = $state();
   let recaptchaSiteKey = "6LfCd8YkAAAAANmVJgzN3SQY3n3fv1RhiS5PgMYM";
 
   let submit = (e) => {
@@ -80,7 +84,7 @@
       > and we'll do our best to get back to you in a timely manner.
     </p>
 
-    <form on:submit={submit}>
+    <form onsubmit={submit}>
       <div class="mb-4">
         <label for="account" class="font-semibold"
           >{$t("user.support.accountName")}</label
@@ -110,7 +114,7 @@
           name="message"
           bind:value={message}
           required
-        />
+></textarea>
       </div>
 
       <button