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

@@ -0,0 +1,88 @@
<script>
import Prayer from './Prayer.svelte';
import AveMaria from './AveMaria.svelte';
</script>
<Prayer>
<!-- First Versicle and Response -->
<p>
<v lang="la"><i>℣.</i> Angelus Domini nuntiavit Mariae.</v>
<v lang="de"><i>℣.</i> Der Engel des Herrn brachte Maria die Botschaft</v>
<v lang="en"><i>℣.</i> The Angel of the Lord declared unto Mary.</v>
<v lang="la"><i>℟.</i> Et concepit de Spiritu Sancto.</v>
<v lang="de"><i>℟.</i> und sie empfing vom Heiligen Geist.</v>
<v lang="en"><i>℟.</i> And she conceived of the Holy Spirit.</v>
</p>
</Prayer>
<!-- First Hail Mary -->
<AveMaria />
<Prayer>
<!-- Second Versicle and Response -->
<p>
<v lang="la"><i>℣.</i> Ecce ancilla Domini,</v>
<v lang="de"><i>℣.</i> Maria sprach: Siehe, ich bin die Magd des Herrn</v>
<v lang="en"><i>℣.</i> Behold the handmaid of the Lord.</v>
<v lang="la"><i>℟.</i> Fiat mihi secundum verbum tuum.</v>
<v lang="de"><i>℟.</i> mir geschehe nach Deinem Wort.</v>
<v lang="en"><i>℟.</i> Be it done unto me according to thy word.</v>
</p>
</Prayer>
<!-- Second Hail Mary -->
<AveMaria />
<Prayer>
<!-- Third Versicle and Response -->
<p>
<v lang="la"><i>℣.</i> Et Verbum caro factum est,</v>
<v lang="de"><i>℣.</i> Und das Wort ist Fleisch geworden</v>
<v lang="en"><i>℣.</i> And the Word was made flesh.</v>
<v lang="la"><i>℟.</i> Et habitavit in nobis.</v>
<v lang="de"><i>℟.</i> und hat unter uns gewohnt.</v>
<v lang="en"><i>℟.</i> And dwelt among us.</v>
</p>
</Prayer>
<!-- Third Hail Mary -->
<AveMaria />
<Prayer>
<!-- Fourth Versicle and Response -->
<p>
<v lang="la"><i>℣.</i> Ora pro nobis, sancta Dei Genetrix,</v>
<v lang="de"><i>℣.</i> Bitte für uns Heilige Gottesmutter</v>
<v lang="en"><i>℣.</i> Pray for us, O holy Mother of God.</v>
<v lang="la"><i>℟.</i> Ut digni efficiamur promissionibus Christi.</v>
<v lang="de"><i>℟.</i> auf dass wir würdig werden der Verheißungen Christi.</v>
<v lang="en"><i>℟.</i> That we may be made worthy of the promises of Christ.</v>
</p>
<!-- Closing Prayer -->
<p>
<v lang="la"><i>℣.</i> Oremus.</v>
<v lang="de"><i>℣.</i> Lasset uns beten.</v>
<v lang="en"><i>℣.</i> Let us pray:</v>
</p>
<p>
<v lang="la">
Gratiam tuam, quaesumus, Domine, mentibus nostris infunde; ut qui, Angelo nuntiante,
Christi Filii tui incarnationem cognovimus, per passionem eius et crucem ad
resurrectionis gloriam perducamur. Per eumdem Christum Dominum nostrum. Amen.
</v>
<v lang="de">
Allmächtiger Gott, gieße deine Gnade in unsere Herzen ein. Durch die Botschaft des
Engels haben wir die Menschwerdung Christi, deines Sohnes, erkannt. Lass uns durch
sein Leiden und Kreuz zur Herrlichkeit der Auferstehung gelangen. Darum bitten wir
durch Christus, unseren Herrn. Amen.
</v>
<v lang="en">
Pour forth, we beseech Thee, O Lord, Thy grace into our hearts, that we to whom the
Incarnation of Christ Thy Son was made known by the message of an angel, may by His
Passion and Cross be brought to the glory of His Resurrection. Through the same Christ
Our Lord. Amen.
</v>
</p>
</Prayer>

View File

@@ -1,8 +1,7 @@
<script>
<script lang="ts">
import Prayer from './Prayer.svelte';
export let mystery = ""; // For rosary mysteries (German)
export let mysteryLatin = ""; // For rosary mysteries (Latin)
let { mystery = "", mysteryLatin = "" } = $props<{ mystery?: string, mysteryLatin?: string }>();
</script>
<Prayer>

View File

@@ -1,7 +1,8 @@
<script>
<script lang="ts">
import type { Snippet } from 'svelte';
import { getLanguageContext } from '$lib/contexts/languageContext.js';
export let latinPrimary = true; // Controls which language is shown prominently
let { latinPrimary = true, children } = $props<{ latinPrimary?: boolean, children?: Snippet }>();
// Get context if available (graceful fallback for standalone usage)
let showLatinStore;
@@ -12,7 +13,7 @@
showLatinStore = null;
}
$: showLatin = showLatinStore ? $showLatinStore : true;
let showLatin = $derived(showLatinStore ? $showLatinStore : true);
</script>
<style>
@@ -123,5 +124,5 @@
</style>
<div class="prayer-wrapper" class:german-primary={!latinPrimary} class:monolingual={!showLatin}>
<slot></slot>
{@render children?.()}
</div>