From aa74d0367f734890453b22b3eab4493c60a3bace Mon Sep 17 00:00:00 2001
From: Grigory <techuila.sunset@gmail.com>
Date: Sun, 18 Jan 2026 12:58:24 +0500
Subject: [PATCH] fix(demo): migrate to Svelte 5

---
 demo/Index.svelte  | 81 +++++++++++++++++++++++-----------------------
 demo/detections.js |  4 ++-
 demo/index.js      |  4 ++-
 3 files changed, 47 insertions(+), 42 deletions(-)

diff --git a/demo/Index.svelte b/demo/Index.svelte
index 4a5e5495..eb0f8dd6 100644
--- a/demo/Index.svelte
+++ b/demo/Index.svelte
@@ -7,55 +7,56 @@
 	const urlParameter = new URLSearchParams(location.search);
 	const parsedUrlParameter = parseUrl(urlParameter.get('url'), 'https://github.com').href;
 	// Parse partial URL in the parameter so that it's shown as full URL in the field
-	let urlField = parsedUrlParameter || '';
+	let urlField = $state(parsedUrlParameter || '');
 
 	const allUrls = [...getAllUrls()].sort();
 
-	let parsedUrl;
 	// Do not use ?? because it should work on empty strings
-	$: parsedUrl = parseUrl(urlField || defaultUrl);
+	let parsedUrl = $derived(parseUrl(urlField || defaultUrl));
 
-	let detections = [];
-	$: {
-		if (parsedUrl) {
-			if (urlField) {
-				urlParameter.set('url', urlField.replace('https://github.com', ''));
-				history.replaceState(null, '', `?${urlParameter}`);
-			} else {
-				history.replaceState(null, '', location.pathname);
-			}
-			detections = Object.entries(urlDetection)
-				.map(([name, detect]) => {
-					if (typeof detect !== 'function') {
-						return;
-					}
+	let detections = $derived(
+		parsedUrl ? Object.entries(urlDetection)
+			.map(([name, detect]) => {
+				if (typeof detect !== 'function') {
+					return;
+				}
 
-					if (!String(detect).startsWith('()')) {
-						return {
-							name,
-							detect,
-							result: detect(parsedUrl)
-						};
-					} else {
-						return {name};
-					}
-				})
-				.filter(Boolean)
-				.sort((a, b) => {
-					// Pull true values to the top
-					if (a.result || b.result) {
-						return a.result ? b.result ? 0 : -1 : 1;
-					}
+				if (!String(detect).startsWith('()')) {
+					return {
+						name,
+						detect,
+						result: detect(parsedUrl)
+					};
+				} else {
+					return {name};
+				}
+			})
+			.filter(Boolean)
+			.sort((a, b) => {
+				// Pull true values to the top
+				if (a.result || b.result) {
+					return a.result ? b.result ? 0 : -1 : 1;
+				}
 
-					// Push false values to the top
-					if (a.detect || b.detect) {
-						return a.detect ? b.detect ? 0 : 1 : -1;
-					}
+				// Push false values to the top
+				if (a.detect || b.detect) {
+					return a.detect ? b.detect ? 0 : 1 : -1;
+				}
 
-					// DOM-based detections should be in the middle
-				});
+				// DOM-based detections should be in the middle
+			}) : []
+	);
+
+	$effect(() => {
+		if (!parsedUrl) return;
+
+		if (urlField) {
+			urlParameter.set('url', urlField.replace('https://github.com', ''));
+			history.replaceState(null, '', `?${urlParameter}`);
+		} else {
+			history.replaceState(null, '', location.pathname);
 		}
-	}
+	});
 </script>
 
 <style>
diff --git a/demo/detections.js b/demo/detections.js
index 475163bd..f5f524f5 100644
--- a/demo/detections.js
+++ b/demo/detections.js
@@ -1,6 +1,8 @@
+import { mount } from 'svelte';
+
 import Detections from './Detections.svelte';
 
-const app = new Detections({
+const app = mount(Detections, {
 	target: document.querySelector('main'),
 });
 
diff --git a/demo/index.js b/demo/index.js
index e2b4780e..ef61a0bb 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -1,6 +1,8 @@
+import { mount } from 'svelte';
+
 import Index from './Index.svelte';
 
-const app = new Index({
+const app = mount(Index, {
 	target: document.querySelector('main'),
 });