Update to svelte 5

svelte/src/user_home/dashboard/CardAccount.svelte

@@ -30,7 +30,7 @@ import { logout_user } from "lib/PixeldrainAPI";
 			Filesystem
 		</a>
 	{/if}
-	<button on:click={()=> logout_user("/")}>
+	<button onclick={()=> logout_user("/")}>
 		<i class="icon">logout</i>
 		Log out
 	</button>

svelte/src/user_home/dashboard/CardActivity.svelte

@@ -6,8 +6,8 @@ import { loading_finish, loading_start } from "lib/Loading";
 
 let year = 0
 let month = 0
-let month_str = ""
-let data = []
+let month_str = $state("")
+let data = $state([])
 
 const load_activity = async () => {
 	month_str = year + "-" + ("00"+(month)).slice(-2)

svelte/src/user_home/dashboard/CardPrepaidTransactions.svelte

@@ -7,8 +7,8 @@ import { loading_finish, loading_start } from "lib/Loading";
 
 let year = 0
 let month = 0
-let month_str = ""
-let transactions = {
+let month_str = $state("")
+let transactions = $state({
 	rows: [],
 	total_subscription_charge: 0,
 	total_storage_used: 0,
@@ -20,7 +20,7 @@ let transactions = {
 	total_deducted: 0,
 	balance_start: 0,
 	balance_end: 0,
-}
+})
 
 const load_transactions = async () => {
 	month_str = year + "-" + ("00"+(month)).slice(-2)

svelte/src/user_home/dashboard/CardStatistics.svelte

@@ -1,13 +1,17 @@
-<script>
+<script lang="ts">
 import { onMount } from "svelte";
 import Chart from "util/Chart.svelte";
-import { color_by_name } from "util/Util.svelte";
+import { color_by_name } from "util/Util";
 import { formatDataVolume, formatThousands } from "util/Formatting";
+import { get_endpoint } from "lib/PixeldrainAPI";
 
-export let card_size = 1
-$: chart_height = (80 + (card_size * 60)) + "px"
-let graph_views_downloads = null
-let graph_bandwidth = null
+let { card_size = 1 }: {
+	card_size?: number;
+} = $props();
+
+let chart_height = $derived((80 + (card_size * 60)) + "px")
+let graph_views_downloads = $state(null)
+let graph_bandwidth = $state(null)
 
 let load_graphs = async (minutes, interval) => {
 	let end = new Date()
@@ -15,14 +19,14 @@ let load_graphs = async (minutes, interval) => {
 	start.setMinutes(start.getMinutes() - minutes)
 
 	try {
-		let views = get_graph_data("views", start, end, interval);
-		let downloads = get_graph_data("downloads", start, end, interval);
-		let bandwidth = get_graph_data("bandwidth", start, end, interval);
-		let transfer_paid = get_graph_data("transfer_paid", start, end, interval);
-		views = await views
-		downloads = await downloads
-		bandwidth = await bandwidth
-		transfer_paid = await transfer_paid
+		let views_req = get_graph_data("views", start, end, interval);
+		let downloads_req = get_graph_data("downloads", start, end, interval);
+		let bandwidth_req = get_graph_data("bandwidth", start, end, interval);
+		let transfer_paid_req = get_graph_data("transfer_paid", start, end, interval);
+		let views = await views_req
+		let downloads = await downloads_req
+		let bandwidth = await bandwidth_req
+		let transfer_paid = await transfer_paid_req
 
 		graph_views_downloads.data().labels = views.timestamps;
 		graph_views_downloads.data().datasets[0].data = views.amounts
@@ -39,33 +43,36 @@ let load_graphs = async (minutes, interval) => {
 	}
 }
 
-let total_views = 0
-let total_downloads = 0
-let total_bandwidth = 0
-let total_transfer_paid = 0
+let total_views = $state(0)
+let total_downloads = $state(0)
+let total_bandwidth = $state(0)
+let total_transfer_paid = $state(0)
 
-let get_graph_data = async (stat, start, end, interval) => {
+let get_graph_data = async (stat: string, start: Date, end: Date, interval: number) => {
 	let resp = await fetch(
-		window.api_endpoint + "/user/time_series/" + stat +
+		get_endpoint() + "/user/time_series/" + stat +
 		"?start=" + start.toISOString() +
 		"&end=" + end.toISOString() +
 		"&interval=" + interval
 	)
-	resp = await resp.json()
+	let resp_json: {
+		timestamps: string[]
+		amounts: number[]
+	} = await resp.json()
 
 	// Convert the timestamps to a human-friendly format
-	resp.timestamps.forEach((val, idx) => {
+	resp_json.timestamps.forEach((val, idx) => {
 		let date = new Date(val);
-		let str = date.getFullYear();
+		let str: string = date.getFullYear().toString();
 		str += "-" + ("00" + (date.getMonth() + 1)).slice(-2);
 		str += "-" + ("00" + date.getDate()).slice(-2);
 		str += " " + ("00" + date.getHours()).slice(-2);
 		str += ":" + ("00" + date.getMinutes()).slice(-2);
-		resp.timestamps[idx] = "  " + str + "  "; // Poor man's padding
+		resp_json.timestamps[idx] = "  " + str + "  "; // Poor man's padding
 	});
 
 	// Add up the total amount and save it in the correct place
-	let total = resp.amounts.reduce((acc, cur) => { return acc + cur }, 0)
+	let total = resp_json.amounts.reduce((acc, cur) => { return acc + cur }, 0)
 
 	if (stat == "views") {
 		total_views = total;
@@ -78,10 +85,10 @@ let get_graph_data = async (stat, start, end, interval) => {
 		total_transfer_paid = total;
 	}
 
-	return resp
+	return resp_json
 }
 
-let graph_timespan = 0
+let graph_timespan = $state(0)
 let update_graphs = (minutes, interval) => {
 	graph_timespan = minutes
 	load_graphs(minutes, interval)
@@ -127,37 +134,37 @@ onMount(() => {
 
 <div class="time_buttons">
 	<button
-		on:click={() => update_graphs(1440, 1)}
+		onclick={() => update_graphs(1440, 1)}
 		class:button_highlight={graph_timespan == 1440}
 		class="group_first">
 		Day
 	</button>
 	<button
-		on:click={() => update_graphs(10080, 60)}
+		onclick={() => update_graphs(10080, 60)}
 		class:button_highlight={graph_timespan == 10080}
 		class="group_middle">
 		Week
 	</button>
 	<button
-		on:click={() => update_graphs(43200, 1440)}
+		onclick={() => update_graphs(43200, 1440)}
 		class:button_highlight={graph_timespan == 43200}
 		class="group_middle">
 		Month
 	</button>
 	<button
-		on:click={() => update_graphs(131400, 1440)}
+		onclick={() => update_graphs(131400, 1440)}
 		class:button_highlight={graph_timespan == 131400}
 		class="group_middle">
 		Quarter
 	</button>
 	<button
-		on:click={() => update_graphs(525600, 1440)}
+		onclick={() => update_graphs(525600, 1440)}
 		class:button_highlight={graph_timespan == 525600}
 		class="group_middle">
 		Year
 	</button>
 	<button
-		on:click={() => update_graphs(1051200, 1440)}
+		onclick={() => update_graphs(1051200, 1440)}
 		class:button_highlight={graph_timespan == 1051200}
 		class="group_last">
 		Two Years

svelte/src/user_home/dashboard/CardUsage.svelte

@@ -4,8 +4,8 @@ import HotlinkProgressBar from "user_home/HotlinkProgressBar.svelte";
 import StorageProgressBar from "user_home/StorageProgressBar.svelte";
 import ProgressBar from "util/ProgressBar.svelte";
 
-let transfer_cap = 0
-let transfer_used = 0
+let transfer_cap = $state(0)
+let transfer_used = $state(0)
 let storage_limit = window.user.subscription.storage_space
 let fs_storage_limit = window.user.subscription.filesystem_storage_limit
 let load_direct_bw = () => {

svelte/src/user_home/dashboard/Dashboard.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 import Button from "layout/Button.svelte"
 import { onMount } from "svelte";
 import CardAccount from "./CardAccount.svelte";
@@ -10,7 +10,7 @@ import CardPrepaidTransactions from "./CardPrepaidTransactions.svelte";
 import AddressReputation from "home_page/AddressReputation.svelte";
 import { flip } from "svelte/animate";
 
-let cards = []
+let cards = $state([])
 
 const save = () => {
 	let storage = {
@@ -159,7 +159,7 @@ onMount(() => {
 
 			{#if !card.hidden && card.size > 0}
 				<div class="card_component">
-					<svelte:component this={card.elem} card_size={card.size}/>
+					<card.elem card_size={card.size}/>
 				</div>
 			{/if}
 		</div>

svelte/src/user_home/dashboard/UploadLib.svelte

@@ -1,4 +1,5 @@
 <script>
+import { preventDefault } from 'svelte/legacy';
 import UploadProgressBar from "home_page/UploadProgressBar.svelte"
 import { tick } from "svelte"
 import UploadStats from "home_page/UploadStats.svelte";
@@ -9,7 +10,7 @@ export const pick_files = () => {
 
 // === UPLOAD LOGIC ===
 
-let file_input_field
+let file_input_field = $state()
 const file_input_change = (event) => {
 	// Start uploading the files async
 	upload_files(event.target.files)
@@ -26,9 +27,9 @@ const paste = (e) => {
 }
 
 let active_uploads = 0
-let upload_queue = []
-let state = "idle" // idle, uploading, finished
-let upload_stats
+let upload_queue = $state([])
+let status = $state("idle") // idle, uploading, finished
+let upload_stats = $state()
 
 export const upload_files = async (files) => {
 	if (files.length === 0) {
@@ -77,10 +78,10 @@ const start_upload = () => {
 	}
 
 	if (active_uploads === 0 && finished_count != 0) {
-		state = "finished"
+		status = "finished"
 		upload_stats.finish()
 	} else {
-		state = "uploading"
+		status = "uploading"
 		upload_stats.start()
 	}
 }
@@ -91,7 +92,7 @@ const finish_upload = (file) => {
 }
 
 const leave_confirmation = e => {
-	if (state === "uploading") {
+	if (status === "uploading") {
 		e.preventDefault()
 		e.returnValue = "If you close the page your files will stop uploading. Do you want to continue?"
 		return e.returnValue
@@ -103,7 +104,7 @@ const leave_confirmation = e => {
 // === SHARING BUTTONS ===
 
 let share_link = ""
-let input_album_name = ""
+let input_album_name = $state("")
 
 let btn_create_list
 
@@ -172,19 +173,19 @@ const keydown = (e) => {
 }
 </script>
 
-<svelte:window on:paste={paste} on:keydown={keydown} on:beforeunload={leave_confirmation} />
+<svelte:window onpaste={paste} onkeydown={keydown} onbeforeunload={leave_confirmation} />
 
-<input bind:this={file_input_field} on:change={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
+<input bind:this={file_input_field} onchange={file_input_change} type="file" name="file" multiple="multiple" class="hide"/>
 
 <UploadStats bind:this={upload_stats} upload_queue={upload_queue}/>
 
 {#if upload_queue.length > 1}
 	<div class="album_widget">
 		Create an album<br/>
-		<form class="album_name_form" on:submit|preventDefault={create_album}>
+		<form class="album_name_form" onsubmit={preventDefault(create_album)}>
 			<div>Name:</div>
 			<input bind:value={input_album_name} type="text" placeholder="My album"/>
-			<button type="submit" disabled={state !== "finished"}>
+			<button type="submit" disabled={status !== "finished"}>
 				<i class="icon">create_new_folder</i> Create
 			</button>
 		</form>