Updated to Svelte 5

frontend/src/routes/quiztivity/create/+page.svelte

@@ -8,13 +8,13 @@ SPDX-License-Identifier: MPL-2.0
 	import type { Data } from '$lib/quiztivity/types';
 	import Editor from '$lib/quiztivity/editor.svelte';
 	import { goto } from '$app/navigation';
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 
-	let title = $page.url.searchParams.get('title');
+	let title = page.url.searchParams.get('title');
 	title ??= '';
 
-	let data: Data = { pages: [], id: undefined, title };
-	let saving = false;
+	let data: Data = $state({ pages: [], id: undefined, title });
+	let saving = $state(false);
 
 	const save_quiztivity = async () => {
 		saving = true;

frontend/src/routes/quiztivity/edit/+page.svelte

@@ -10,12 +10,16 @@ SPDX-License-Identifier: MPL-2.0
 	import SharesPopover from '$lib/quiztivity/shares_popover.svelte';
 	import { goto } from '$app/navigation';
 
-	export let data: PageData;
+	interface Props {
+		data: PageData;
+	}
 
-	let saving = false;
+	let { data }: Props = $props();
 
-	let quiztivity = data.quiztivity;
-	let shares_menu_open = false;
+	let saving = $state(false);
+
+	let quiztivity = $state(data.quiztivity);
+	let shares_menu_open = $state(false);
 
 	const save_quiztivity = async () => {
 		saving = true;

frontend/src/routes/quiztivity/play/+error.svelte

@@ -5,12 +5,12 @@ SPDX-License-Identifier: MPL-2.0
 -->
 
 <script lang="ts">
-	import { navbarVisible } from '$lib/stores';
-	import { page } from '$app/stores';
+	import { navbarVisible} from '$lib/stores.svelte.ts';
+	import { page } from '$app/state';
 	import { getLocalization } from '$lib/i18n';
 
-	navbarVisible.set(true);
-	let status = $page.status;
+	navbarVisible.visible = true;
+	let status = page.status;
 	const { t } = getLocalization();
 </script>
 

frontend/src/routes/quiztivity/play/+page.svelte

@@ -5,37 +5,45 @@ SPDX-License-Identifier: MPL-2.0
 -->
 
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import type { PageData } from './$types';
 	import type { QuizTivityPage } from '$lib/quiztivity/types';
 	import { QuizTivityTypes } from '$lib/quiztivity/types';
 	import NavigationBar from './navigation_bar.svelte';
 
-	export let data: PageData;
-	let quiztivity = data.quiztivity;
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
+	let quiztivity = $state(data.quiztivity);
 	for (let i = 0; i < quiztivity.pages.length; i++) {
 		const id = (Math.random() + 1).toString(36).substring(7);
 		const type: QuizTivityTypes = quiztivity.pages[i].type as QuizTivityTypes;
 		quiztivity.pages[i] = { ...quiztivity.pages[i], id, type };
 	}
 
-	let current_slide_index = 0;
-	let current_slide: QuizTivityPage = quiztivity.pages[current_slide_index];
-	$: current_slide = quiztivity.pages[current_slide_index];
+	let current_slide_index = $state(0);
+	let current_slide: QuizTivityPage = $state(quiztivity.pages[current_slide_index]);
+	run(() => {
+		current_slide = quiztivity.pages[current_slide_index];
+	});
 </script>
 
 <div class="w-full h-full flex flex-col overflow-scroll">
 	<div class="w-full h-full">
 		{#if current_slide.type === QuizTivityTypes.MARKDOWN}
 			{#await import('$lib/quiztivity/components/markdown/play.svelte') then c}
-				<svelte:component this={c.default} data={current_slide.data} />
+				<c.default data={current_slide.data} />
 			{/await}
 		{:else if current_slide.type === QuizTivityTypes.MEMORY}
 			{#await import('$lib/quiztivity/components/memory/play.svelte') then c}
-				<svelte:component this={c.default} data={current_slide.data} />
+				<c.default data={current_slide.data} />
 			{/await}
 		{:else if current_slide.type === QuizTivityTypes.ABCD}
 			{#await import('$lib/quiztivity/components/abcd/play.svelte') then c}
-				<svelte:component this={c.default} data={current_slide.data} />
+				<c.default data={current_slide.data} />
 			{/await}
 		{/if}
 	</div>

frontend/src/routes/quiztivity/play/navigation_bar.svelte

@@ -8,8 +8,12 @@ SPDX-License-Identifier: MPL-2.0
 	import BrownButton from '$lib/components/buttons/brown.svelte';
 	import { getLocalization } from '$lib/i18n';
 
-	export let current_slide_index: number;
-	export let question_count: number;
+	interface Props {
+		current_slide_index: number;
+		question_count: number;
+	}
+
+	let { current_slide_index = $bindable(), question_count }: Props = $props();
 
 	const { t } = getLocalization();
 </script>