chore: update to svelte 5, improve some backend errors (#129)

server/src/core/recipe.rs

@@ -1,3 +1,5 @@
+use anyhow::Context;
+
 use crate::{
     core::Error,
     datastore::{self, Pool, RecipeDocument},
@@ -114,20 +116,20 @@ pub async fn list(
             .await
             .map_err(|err| Error::Other(err.into()))?;
 
-        let recipes = futures::future::try_join_all(recipe_ids.into_iter().map(|id| async {
+        let recipes = futures::future::try_join_all(recipe_ids.into_iter().map(|id| async move {
             let recipe = datastore
-                .get_recipe(id.into())
+                .get_recipe(id.clone().into())
                 .await
-                .map_err(|err| Error::Other(err.into()))?;
+                .context(format!("get recipe: {id}"))?;
 
-            Ok(ListedRecipe {
+            Ok::<ListedRecipe, Error>(ListedRecipe {
                 id: recipe.id,
                 title: recipe.title,
                 image_id: recipe.image_id,
             })
         }))
         .await
-        .map_err(|err: Error| Error::Other(err.into()))?;
+        .context("recipes/list: get searched recipes")?;
 
         Ok(domain::page::Recipe {
             items: recipes,

ui/package.json

@@ -19,8 +19,8 @@
     "@melt-ui/pp": "0.3.2",
     "@melt-ui/svelte": "0.86.0",
     "@sveltejs/adapter-static": "3.0.6",
-    "@sveltejs/kit": "2.7.4",
-    "@sveltejs/vite-plugin-svelte": "3.1.2",
+    "@sveltejs/kit": "2.8.0",
+    "@sveltejs/vite-plugin-svelte": "4.0.0",
     "@tanstack/svelte-query": "5.59.17",
     "autoprefixer": "10.4.20",
     "eslint": "9.14.0",
@@ -31,7 +31,7 @@
     "prettier": "3.3.3",
     "prettier-plugin-svelte": "3.2.7",
     "rollup-plugin-license": "3.5.3",
-    "svelte": "4.2.19",
+    "svelte": "5.1.13",
     "svelte-check": "4.0.5",
     "sveltekit-superforms": "2.20.0",
     "tailwindcss": "3.4.14",

ui/src/lib/auth.svelte.ts

@@ -0,0 +1,3 @@
+export const auth: { unauthenticated: boolean } = $state({
+  unauthenticated: false,
+});

ui/src/lib/components/Button.svelte

@@ -1,23 +1,40 @@
 <script lang="ts">
   import IconLoading from '~icons/mdi/loading';
+  import type { Snippet } from 'svelte';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
 
-  export let isLoading = false;
-  export let isDisabled = false;
+  type Props = {
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    class?: string;
+    leftIcon?: Snippet;
+    children?: Snippet;
+    rightIcon?: Snippet;
+  } & HTMLButtonAttributes;
 
-  let className = '';
-  export { className as class };
+  let {
+    isLoading = false,
+    isDisabled = false,
+    class: className = '',
+    leftIcon,
+    children,
+    rightIcon,
+    ...rest
+  }: Props = $props();
+
+  const children_render = $derived(children);
 </script>
 
-<button class={`${className ?? ''}`} {...$$restProps} disabled={isDisabled || isLoading}>
+<button class={`${className ?? ''}`} {...rest} disabled={isDisabled || isLoading}>
   <span class="flex gap-2 justify-center items-center">
-    {#if $$slots.leftIcon}
-      <slot name="leftIcon" />
+    {#if leftIcon}
+      {@render leftIcon?.()}
     {/if}
 
-    <slot />
+    {@render children_render?.()}
 
-    {#if $$slots.rightIcon && !isLoading}
-      <slot name="rightIcon" />
+    {#if rightIcon && !isLoading}
+      {@render rightIcon?.()}
     {/if}
 
     {#if isLoading}

ui/src/lib/components/LightSwitch.svelte

@@ -3,12 +3,12 @@
   import IconDark from '~icons/mdi/moon-and-stars';
   import { setTheme, isThemeDark } from '$lib/theme-switch';
 
-  let isDark = isThemeDark();
+  let isDark = $state(isThemeDark());
 </script>
 
 <button
   class="w-8 h-8 bg-base-500 shadow rounded-full flex items-center justify-center"
-  on:click={() => {
+  onclick={() => {
     setTheme(!isDark);
     isDark = !isDark;
   }}

ui/src/lib/components/LoginIfUnauthenticated.svelte

@@ -1,12 +1,17 @@
 <script lang="ts">
-  import { useAuth } from '$lib/auth-context';
   import PageReauthenticateState from './page-states/PageReauthenticateState.svelte';
+  import type { Snippet } from 'svelte';
+  import { auth } from '$lib/auth.svelte';
 
-  const auth = useAuth();
+  type Props = {
+    children: Snippet;
+  };
+
+  let { children }: Props = $props();
 </script>
 
-{#if $auth.unauthenticated}
+{#if auth.unauthenticated}
   <PageReauthenticateState />
 {:else}
-  <slot />
+  {@render children?.()}
 {/if}

ui/src/lib/components/PrefetchLink.svelte

@@ -1,19 +1,23 @@
 <script lang="ts">
   import { goto } from '$app/navigation';
-  import { useNavigating } from '$lib/navigating-context';
+  import { navigating } from '$lib/navigating.svelte';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
 
-  export let href: string;
-  export let prefetch: () => Promise<void>;
+  type Props = {
+    href: string;
+    prefetch: () => Promise<void>;
+    children?: Snippet<[{ isLoading: boolean }]>;
+  } & HTMLAnchorAttributes;
 
-  const navigating = useNavigating();
+  let { href, prefetch, children, ...rest }: Props = $props();
 
-  let isLoading = false;
+  const isLoading = $derived(navigating.to === href);
 
   async function onClick(e: MouseEvent) {
     e.preventDefault();
 
-    isLoading = true;
-    $navigating.to = href;
+    navigating.to = href;
 
     try {
       await prefetch();
@@ -23,20 +27,13 @@
     }
 
     // only navigate if another navigation hasn't triggered
-    if ($navigating.to === href) {
+    if (navigating.to === href) {
       await goto(href);
-      $navigating.to = undefined;
+      navigating.to = undefined;
     }
-
-    isLoading = false;
-  }
-
-  // the navigation is not going to proceed if another navigation has started
-  $: if ($navigating.to !== undefined && $navigating.to !== href) {
-    isLoading = false;
   }
 </script>
 
-<a {href} on:click={onClick} data-loading={isLoading ? true : undefined} {...$$restProps}
-  ><slot {isLoading} /></a
+<a {href} onclick={onClick} data-loading={isLoading ? true : undefined} {...rest}
+  >{@render children?.({ isLoading })}</a
 >

ui/src/lib/components/RecipeImage.svelte

@@ -25,7 +25,11 @@
 
   const iconsMap = [Icon1, Icon2, Icon3, Icon4, Icon5, Icon6, Icon7, Icon8, Icon9, Icon10];
 
-  export let title: string;
+  interface Props {
+    title: string;
+  }
+
+  const { title }: Props = $props();
 
   function hashTitle(title: string): number {
     let hash = 0;
@@ -41,11 +45,13 @@
     return [hash % 10, (hash >> 3) % 10];
   }
 
-  $: indexes = randomIndexes(hashTitle(title));
+  const indexes = $derived(randomIndexes(hashTitle(title)));
+
+  const SvelteComponent = $derived(iconsMap[indexes[1]]);
 </script>
 
 <div
   class={`w-full h-full ${colorsMap[indexes[0]]} flex items-center justify-center text-[rgba(255,255,255,0.72)]`}
 >
-  <svelte:component this={iconsMap[indexes[1]]} />
+  <SvelteComponent />
 </div>

ui/src/lib/components/SingleTag.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
+  import type { MouseEventHandler } from 'svelte/elements';
   import DeleteIcon from '~icons/mdi/close';
 
-  export let canDelete: boolean;
-  export let name: string;
+  type Props = {
+    canDelete: boolean;
+    name: string;
+    onclick?: MouseEventHandler<HTMLButtonElement>;
+  };
+
+  let { canDelete, name, onclick }: Props = $props();
 </script>
 
 <li
@@ -16,7 +22,7 @@
       class="ml-2 px-2 border-l border-tag-divider"
       aria-label={`Delete tag ${name}`}
       type="button"
-      on:click
+      {onclick}
     >
       <DeleteIcon />
     </button>

ui/src/lib/components/StreamedError.svelte

@@ -1,19 +1,22 @@
 <script lang="ts">
-  import { useAuth } from '$lib/auth-context';
+  import { auth } from '$lib/auth.svelte';
   import type { MaybeError } from '$lib/types/error';
-  import { onMount } from 'svelte';
+  import { onMount, type Snippet } from 'svelte';
 
-  export let error: MaybeError;
+  type Props = {
+    error: MaybeError;
+    children?: Snippet;
+  };
 
-  const auth = useAuth();
+  const { error, children }: Props = $props();
 
   onMount(() => {
     console.error('streamed error: ', error);
 
     if (error?.status === 401) {
-      $auth.unauthenticated = true;
+      auth.unauthenticated = true;
     }
   });
 </script>
 
-<slot />
+{@render children?.()}

ui/src/lib/components/TagPicker.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import type { Tag } from '$lib/types/tag';
   import { createDropdownMenu, melt } from '@melt-ui/svelte';
-  import { createEventDispatcher } from 'svelte';
   import TagModal from './recipes/form/TagModal.svelte';
 
-  export let tags: Array<Tag>;
-  export let canCreate: boolean = false;
+  type Props = {
+    tags: Array<Tag>;
+    canCreate?: boolean;
+    onselect: (event: { tagID: string }) => void;
+  };
 
-  const dispatch = createEventDispatcher();
+  let { tags, onselect, canCreate = false }: Props = $props();
 
   const {
     elements: { trigger, menu, item, separator },
@@ -17,7 +19,7 @@
   });
 
   function onSelect(id: string) {
-    dispatch('select', { tagID: id });
+    onselect({ tagID: id });
   }
 </script>
 
@@ -38,7 +40,7 @@
       <button
         class="pl-3 data-[highlighted]:bg-base-primaryHover py-1 text-left"
         use:melt={$item}
-        on:m-click={() => {
+        onclick={() => {
           onSelect(tag.id);
         }}
       >
@@ -49,7 +51,7 @@
     {/each}
 
     {#if canCreate}
-      <div class="h-px shrink-0 bg-divider-default my-2" use:melt={$separator} />
+      <div class="h-px shrink-0 bg-divider-default my-2" use:melt={$separator}></div>
 
       <TagModal element={item} />
     {/if}

ui/src/lib/components/page-states/PageErrorState.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
-  import { useAuth } from '$lib/auth-context';
+  import { auth } from '$lib/auth.svelte';
   import type { MaybeError } from '$lib/types/error';
   import IconChef from '~icons/mdi/chef-hat';
 
-  export let error: MaybeError;
+  interface Props {
+    error: MaybeError;
+  }
 
-  const auth = useAuth();
+  let { error }: Props = $props();
 
   if (error?.status === 401) {
-    $auth.unauthenticated = true;
+    auth.unauthenticated = true;
   }
 </script>
 
@@ -20,7 +22,7 @@
 
     <button
       class="btn-link"
-      on:click={() => {
+      onclick={() => {
         window.location.reload();
       }}>Click here to try again.</button
     >