feat: complete Svelte 5 migration across entire application
All checks were successful
CI / update (push) Successful in 2m8s

Migrated all components and routes from Svelte 4 to Svelte 5 syntax:

- Converted export let → $props() with generic type syntax
- Replaced createEventDispatcher → callback props
- Migrated $: reactive statements → $derived() and $effect()
- Updated two-way bindings with $bindable()
- Fixed TypeScript syntax: added lang="ts" to script tags
- Converted inline type annotations to generic parameter syntax

- Updated deprecated event directives to Svelte 5 syntax:
  - on:click → onclick
  - on:submit → onsubmit
  - on:change → onchange

- Converted deprecated <slot> elements → {@render children()}
- Updated slot props to Snippet types
- Fixed season/icon selector components with {#snippet} blocks

- Fixed non-reactive state by converting let → $state()
- Fixed infinite loop in EnhancedBalance by converting $effect → $derived
- Fixed Chart.js integration by converting $state proxies to plain arrays
- Updated cospend dashboard and payment pages with proper reactivity

- Migrated 20+ route files from export let data → $props()
- Fixed TypeScript type annotations in page components
- Updated reactive statements in error and cospend routes

- Removed invalid onchange attribute from Toggle component
- Fixed modal ID isolation in CreateIngredientList/CreateStepList
- Fixed dark mode button visibility in TranslationApproval
- Build now succeeds with zero deprecation warnings

All functionality tested and working. No breaking changes to user experience.
This commit is contained in:
2026-01-10 16:20:43 +01:00
parent 8eee15d901
commit 5c8605c690
72 changed files with 1011 additions and 1043 deletions

View File

@@ -1,12 +1,10 @@
<script lang="ts">
import { browser } from '$app/environment';
import { enhance } from '$app/forms';
export let recipeId: string;
export let isFavorite: boolean = false;
export let isLoggedIn: boolean = false;
let isLoading = false;
let { recipeId, isFavorite = $bindable(false), isLoggedIn = false } = $props<{ recipeId: string, isFavorite?: boolean, isLoggedIn?: boolean }>();
let isLoading = $state(false);
async function toggleFavorite(event: Event) {
// If JavaScript is available, prevent form submission and handle client-side
@@ -71,7 +69,7 @@
type="submit"
class="favorite-button"
disabled={isLoading}
on:click={toggleFavorite}
onclick={toggleFavorite}
title={isFavorite ? 'Favorit entfernen' : 'Als Favorit speichern'}
>
{isFavorite ? '❤️' : '🖤'}