Update syntax to Svelte 5

[mzdunek93]

There are still some svelte/legacy imports that should be removed, but that can be finished later.

[netlify]

👷 Deploy request for pauseai pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	3907f4c

[anthonybailey]

Linking https://svelte.dev/docs/svelte/v5-migration-guide as a courtesy. Michael you might describe any interesting choices you made relative to that?

[mzdunek93]

@anthonybailey The vast majority of the modifications were done by the migration script, and consists of prop migrations (declaring the interface type and destructuring the $props variable), rewriting variables into using $state or $derived, etc. Sometimes I compressed a variable declaration and modification in effect to a single $derived declaration, like in Banner.svelte with dismissed. Sometimes I had to initialize a variable that was not initialized, like with type in Link.svelte, since otherwise there would be an error with passing undefined to a $bindable() with fallback. LinkWithoutIcon.svelte changed a bit, since I converted the smoothScroll action into an attachment. In order to avoid svelte/legacy imports, I changed event handlers to invoke event.preventDefault() or event.stopPropagation() in places like chat/+page.svelte. In some places like CommunitiesList.svelte, I wasn't sure if a const is supposed to be reactive, but I made it $derived, since otherwise I got a warning. I also added some API response type declarations in uk-mp-contact-status.ts‎ and uk-postcode-to-mp.ts in order to suppress some eslint warnings, which is not really relevant to the purpose of this PR, but it let me pass the checks.

[mzdunek93]

@anthonybailey Also in TallyEmbed.svelte I used $derived.by for urlParams instead of $effect to make sure the variable is properly initialized in SSR.

[Wituareard]

We could create a svelte5 branch with the result of the script to get a diff with the manual adjustments (I personally can't atm) but not sure if that's necessary

[mzdunek93]

@Wituareard Good idea. I ran the migration script on a recent version of main and uploaded it without changing anything. Here's the diff with the current version of this branch. It's much shorter (+338/-364 instead of +1203/-740) so should be easier to read.

[Wituareard]

Thanks! Are you sure about $derived in Banner.svelte? Iiuc it makes dismissed = true temporary, the same goes for hasImageError in NewsCard.svelte. The rest looks good to me, but I have yet to do proper testing

[mzdunek93]

@Wituareard You are right about Banner.svelte, I misinterpreted how it's supposed to work. In NewsCard.svelte, that variable is supposed to become false every time an image link is passed, but then might be changed to true if NetlifyImage fails. So it's supposed to be temporary. But I reversed the value of the variable by mistake. The current diff is here.