Feat/svelte v5

package.json

@@ -14,8 +14,8 @@
 	"devDependencies": {
 		"@resvg/resvg-js": "^2.6.2",
 		"@sveltejs/adapter-netlify": "^4.4.0",
-		"@sveltejs/kit": "^2.15.2",
-		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@sveltejs/kit": "^2.17.2",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/d3-geo": "^3.1.0",
 		"@types/dompurify": "^3.2.0",
 		"@types/geojson": "^7946.0.15",
@@ -29,27 +29,27 @@
 		"autoprefixer": "^10.4.20",
 		"eslint": "8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.39.0",
+		"eslint-plugin-svelte": "^2.45.1",
 		"postcss": "^8.5.1",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.9",
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
-		"svelte": "4.2.18",
-		"svelte-check": "^3.7.1",
-		"svelte-preprocess": "^5.1.4",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"svelte-preprocess": "^6.0.0",
 		"tailwindcss": "^3.4.17",
 		"tslib": "^2.8.1",
 		"typescript": "5.7.3",
-		"vite": "^5.2.11"
+		"vite": "^6.1.1"
 	},
 	"type": "module",
 	"dependencies": {
 		"@fortawesome/fontawesome-free": "^6.7.2",
 		"@mapbox/geojson-rewind": "^0.5.2",
 		"@tanstack/match-sorter-utils": "^8.19.4",
-		"@tanstack/svelte-table": "^8.20.5",
+		"@tanstack/svelte-table": "^8.21.2",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"axios": "1.7.9",
 		"axios-retry": "^4.5.0",
@@ -65,8 +65,8 @@
 		"localforage": "^1.10.0",
 		"marked": "^15.0.6",
 		"qrcode": "^1.5.4",
-		"svelte-outclick": "^3.7.1",
-		"svelte-time": "^0.9.0",
+		"svelte-outclick": "^4.1.1",
+		"svelte-time": "^2.0.0",
 		"svg-captcha": "^1.4.0",
 		"tippy.js": "^6.3.7"
 	},

src/components/AboutCommunity.svelte

@@ -1,23 +1,31 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import type { Area } from '$lib/types';
 	import tippy from 'tippy.js';
 
-	export let community: Area;
+	interface Props {
+		community: Area;
+	}
+
+	let { community }: Props = $props();
 
-	let communityTooltip: HTMLAnchorElement;
+	let communityTooltip: HTMLAnchorElement = $state();
 
-	$: communityTooltip &&
-		tippy([communityTooltip], {
-			content: community.tags.name
-		});
+	run(() => {
+		communityTooltip &&
+			tippy([communityTooltip], {
+				content: community.tags.name
+			});
+	});
 </script>
 
 <a bind:this={communityTooltip} href="/community/{community.id}">
 	<img
 		src={`https://btcmap.org/.netlify/images?url=${community.tags['icon:square']}&fit=cover&w=256&h=256`}
 		alt="avatar"
 		class="h-24 w-24 rounded-full object-cover"
-		on:error={function () {
+		onerror={function () {
 			this.src = '/images/bitcoin.svg';
 		}}
 	/>

src/components/AboutContributor.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let contributor: { url: string; name: string; file: string; title: string };
+	interface Props {
+		contributor: { url: string; name: string; file: string; title: string };
+	}
+
+	let { contributor }: Props = $props();
 </script>
 
 <a
@@ -12,7 +16,7 @@
 		src="/images/contributors/{contributor.name}.{contributor.file}"
 		alt="avatar"
 		class="mx-auto h-24 w-24 rounded-full object-cover"
-		on:error={function () {
+		onerror={function () {
 			this.src = '/images/satoshi-nakamoto.png';
 		}}
 	/>

src/components/AboutCore.svelte

@@ -1,20 +1,24 @@
 <script lang="ts">
-	export let member: {
+
+	import { Icon } from '$lib/comp';
+	interface Props {
+		member: {
 		avatar: string;
 		name: string;
 		title: string;
 		socials: { url: string; name: string }[];
 	};
+	}
 
-	import { Icon } from '$lib/comp';
+	let { member }: Props = $props();
 </script>
 
 <div class="space-y-2 text-center">
 	<img
 		src="/images/team/{member.avatar}.jpg"
 		alt="avatar"
 		class="mx-auto h-28 w-28 rounded-full object-cover"
-		on:error={function () {
+		onerror={function () {
 			this.src = '/images/satoshi-nakamoto.png';
 		}}
 	/>

src/components/AboutIntegration.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
-	export let integration: { url: string; icon: string; name: string };
+	interface Props {
+		integration: { url: string; icon: string; name: string };
+	}
+
+	let { integration }: Props = $props();
 </script>
 
 <div class="space-y-2">
@@ -16,7 +20,7 @@
 				: '.jpg'}"
 			alt="logo"
 			class="mx-auto h-24 w-24 rounded-full object-cover"
-			on:error={function () {
+			onerror={function () {
 				this.src = '/images/bitcoin.svg';
 			}}
 		/>

src/components/AboutMerchant.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Icon } from '$lib/comp';
 	import tippy from 'tippy.js';
 
-	export let id: string;
-	export let icon: string;
-	export let tooltip: string | undefined;
+	interface Props {
+		id: string;
+		icon: string;
+		tooltip: string | undefined;
+	}
+
+	let { id, icon, tooltip }: Props = $props();
 
-	let merchantTooltip: HTMLAnchorElement;
+	let merchantTooltip: HTMLAnchorElement = $state();
 
-	$: merchantTooltip &&
-		tooltip &&
-		tooltip.length &&
-		tippy([merchantTooltip], {
-			content: tooltip
-		});
+	run(() => {
+		merchantTooltip &&
+			tooltip &&
+			tooltip.length &&
+			tippy([merchantTooltip], {
+				content: tooltip
+			});
+	});
 </script>
 
 <a

src/components/AboutPlus.svelte

@@ -1,6 +1,6 @@
 <div class="space-y-2">
 	<div class="mx-auto flex h-24 w-24 items-center justify-center rounded-full bg-link">
-		<i class="fa-solid fa-circle-plus h-10 w-10 text-white" />
+		<i class="fa-solid fa-circle-plus h-10 w-10 text-white"></i>
 	</div>
 
 	<p class="text-center font-semibold">More!</p>

src/components/AboutTagger.svelte

@@ -1,22 +1,30 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import tippy from 'tippy.js';
 
-	export let tagger: { id: number; avatar: string; username: string };
+	interface Props {
+		tagger: { id: number; avatar: string; username: string };
+	}
+
+	let { tagger }: Props = $props();
 
-	let taggerTooltip: HTMLAnchorElement;
+	let taggerTooltip: HTMLAnchorElement = $state();
 
-	$: taggerTooltip &&
-		tippy([taggerTooltip], {
-			content: tagger.username
-		});
+	run(() => {
+		taggerTooltip &&
+			tippy([taggerTooltip], {
+				content: tagger.username
+			});
+	});
 </script>
 
 <a bind:this={taggerTooltip} href="/tagger/{tagger.id}">
 	<img
 		src={tagger.avatar}
 		alt="avatar"
 		class="h-24 w-24 rounded-full bg-black object-cover"
-		on:error={function () {
+		onerror={function () {
 			this.src = '/images/satoshi-nakamoto.png';
 		}}
 	/>

src/components/AppCard.svelte

@@ -1,10 +1,19 @@
 <script lang="ts">
-	export let image: string;
-	export let text: string;
-	export let desc: string;
-	export let link: string;
 
 	import { Icon } from '$lib/comp';
+	interface Props {
+		image: string;
+		text: string;
+		desc: string;
+		link: string;
+	}
+
+	let {
+		image,
+		text,
+		desc,
+		link
+	}: Props = $props();
 </script>
 
 <div>
@@ -27,7 +36,7 @@
 		<div
 			class="mb-5 flex h-60 items-center justify-center rounded-2xl bg-offwhite text-link opacity-50 dark:bg-white/[0.15]"
 		>
-			<i class="{image} h-28 w-28" />
+			<i class="{image} h-28 w-28"></i>
 		</div>
 		<p class="text-2xl font-semibold text-link opacity-50">{text}</p>
 		<p class="text-xl text-link opacity-50">Soon!</p>

src/components/AreaActivity.svelte

@@ -2,21 +2,31 @@
 	import { LatestTagger, TaggerSkeleton, TopButton } from '$lib/comp';
 	import { type ActivityEvent, type User } from '$lib/types.js';
 
-	export let alias: string;
-	export let name: string;
-	export let dataInitialized: boolean;
-	export let eventElements: ActivityEvent[];
-	export let taggers: User[];
+	interface Props {
+		alias: string;
+		name: string;
+		dataInitialized: boolean;
+		eventElements: ActivityEvent[];
+		taggers: User[];
+	}
 
-	let hideArrow = false;
-	let activityDiv: HTMLDivElement;
+	let {
+		alias,
+		name,
+		dataInitialized,
+		eventElements,
+		taggers
+	}: Props = $props();
 
-	let eventCount = 25;
-	$: eventElementsPaginated = eventElements.slice(0, eventCount);
+	let hideArrow = $state(false);
+	let activityDiv: HTMLDivElement = $state();
 
-	let taggerCount = 25;
-	$: taggersPaginated = taggers.slice(0, taggerCount);
-	let taggerDiv: HTMLDivElement;
+	let eventCount = $state(25);
+	let eventElementsPaginated = $derived(eventElements.slice(0, eventCount));
+
+	let taggerCount = $state(25);
+	let taggersPaginated = $derived(taggers.slice(0, taggerCount));
+	let taggerDiv: HTMLDivElement = $state();
 </script>
 
 <section id="taggers">
@@ -39,7 +49,7 @@
 										: '/images/satoshi-nakamoto.png'}
 									alt="avatar"
 									class="mx-auto h-20 w-20 rounded-full object-cover"
-									on:error={function () {
+									onerror={function () {
 										this.src = '/images/satoshi-nakamoto.png';
 									}}
 								/>
@@ -56,16 +66,16 @@
 				{#if taggersPaginated.length !== taggers.length}
 					<button
 						class="mx-auto !mb-4 block text-xl font-semibold text-link transition-colors hover:text-hover"
-						on:click={() => (taggerCount = taggerCount + 25)}>Load More</button
+						onclick={() => (taggerCount = taggerCount + 25)}>Load More</button
 					>
 				{/if}
 			{:else if !dataInitialized}
 				<div class="flex flex-wrap items-center justify-center">
 					<!-- eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars -->
 					{#each Array(5) as tagger}
 						<div class="m-4 space-y-1 transition-transform hover:scale-110">
-							<p class="mx-auto h-20 w-20 animate-pulse rounded-full bg-link/50" />
-							<p class="mx-auto h-5 w-28 animate-pulse rounded bg-link/50" />
+							<p class="mx-auto h-20 w-20 animate-pulse rounded-full bg-link/50"></p>
+							<p class="mx-auto h-5 w-28 animate-pulse rounded bg-link/50"></p>
 						</div>
 					{/each}
 				</div>
@@ -87,7 +97,7 @@
 		<div
 			bind:this={activityDiv}
 			class="hide-scroll relative max-h-[375px] space-y-2 overflow-y-scroll"
-			on:scroll={() => {
+			onscroll={() => {
 				if (dataInitialized && !hideArrow) {
 					hideArrow = true;
 				}
@@ -108,7 +118,7 @@
 				{#if eventElementsPaginated.length !== eventElements.length}
 					<button
 						class="mx-auto !mb-5 block text-xl font-semibold text-link transition-colors hover:text-hover"
-						on:click={() => (eventCount = eventCount + 25)}>Load More</button
+						onclick={() => (eventCount = eventCount + 25)}>Load More</button
 					>
 				{:else if eventElements.length > 10}
 					<TopButton scroll={activityDiv} style="!mb-5" />
@@ -155,7 +165,7 @@
 				>
 					New Places
 				</a>
-				<i class="fa-solid fa-location-pin ml-1" />
+				<i class="fa-solid fa-location-pin ml-1"></i>
 			</li>
 			<li>
 				<a