From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/lib/scraper/components/SelectorButton.svelte | 10 +++++-----
 frontend/src/lib/scraper/components/SelectorGroup.svelte  | 13 +++++++++----
 frontend/src/lib/scraper/components/SelectorItem.svelte   |  5 ++---
 3 files changed, 16 insertions(+), 12 deletions(-)

(limited to 'frontend/src/lib/scraper/components')

diff --git a/frontend/src/lib/scraper/components/SelectorButton.svelte b/frontend/src/lib/scraper/components/SelectorButton.svelte
index b786f89..e976f91 100644
--- a/frontend/src/lib/scraper/components/SelectorButton.svelte
+++ b/frontend/src/lib/scraper/components/SelectorButton.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-	import { Selector } from '$lib/Scraper';
+	import { Selector } from '../Scraper.svelte';
 
-	export let selector: Selector<string>;
+	let { selector }: { selector: Selector<string> } = $props();
 </script>
 
 <button
 	type="button"
 	class="ml-1 flex rounded-sm border-slate-700 bg-slate-900 hover:brightness-110"
-	on:click={() => (selector.keep = !selector.keep)}
+	onclick={selector.toggle}
 >
 	<div class="flex self-center pl-1">
 		{#if selector.keep}
-			<span class="icon-base icon-[material-symbols--check] text-green-400" />
+			<span class="icon-base icon-[material-symbols--check] text-green-400"></span>
 		{:else}
-			<span class="icon-base icon-[material-symbols--close] text-red-400" />
+			<span class="icon-base icon-[material-symbols--close] text-red-400"></span>
 		{/if}
 	</div>
 	<p class:opacity-50={!selector.keep} class="p-1 text-left">
diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte
index 1fdb8f2..11489b1 100644
--- a/frontend/src/lib/scraper/components/SelectorGroup.svelte
+++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-	import { Selector } from '$lib/Scraper';
+	import { Selector } from '../Scraper.svelte';
 	import SelectorButton from './SelectorButton.svelte';
 
-	export let title: string;
-	export let selectors: Selector<string>[];
+	interface Props {
+		title: string;
+		selectors: Selector<string>[];
+	}
+
+	let { title, selectors = $bindable() }: Props = $props();
 
 	function invert() {
 		for (let selector of selectors) {
@@ -20,8 +24,9 @@
 			<button
 				type="button"
 				class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100"
-				on:click={invert}
+				onclick={invert}
 				title="Invert selection"
+				aria-label="Invert selection"
 			>
 				<span class="icon-xs icon-[material-symbols--compare-arrows]"></span>
 			</button>
diff --git a/frontend/src/lib/scraper/components/SelectorItem.svelte b/frontend/src/lib/scraper/components/SelectorItem.svelte
index dd3f5b4..5beba50 100644
--- a/frontend/src/lib/scraper/components/SelectorItem.svelte
+++ b/frontend/src/lib/scraper/components/SelectorItem.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { Selector } from '$lib/Scraper';
+	import { Selector } from '../Scraper.svelte';
 	import SelectorButton from './SelectorButton.svelte';
 
-	export let title: string;
-	export let selector: Selector<string> | undefined;
+	let { title, selector }: { title: string; selector?: Selector<string> } = $props();
 </script>
 
 {#if selector}
-- 
cgit v1.2.3-2-gb3c3