From 6b9f3036f4172fd483a96fb0443a58271351fd7a Mon Sep 17 00:00:00 2001
From: Jon Uhlmann <account@uhlmann.pro>
Date: Wed, 13 Nov 2024 21:45:02 +0100
Subject: [PATCH] Update: Test with Svelte 5

---
 Test/Resources/Private/Svelte.js     |  5 +++--
 Test/Resources/Private/Svelte.svelte | 14 +++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/Test/Resources/Private/Svelte.js b/Test/Resources/Private/Svelte.js
index 633ce68..93d6cd4 100644
--- a/Test/Resources/Private/Svelte.js
+++ b/Test/Resources/Private/Svelte.js
@@ -1,5 +1,6 @@
+import { mount } from 'svelte'
 import App from "./Svelte.svelte";
 
-new App({
-    target: document.body,
+mount(App, {
+    target: document.getElementById('app'),
 });
diff --git a/Test/Resources/Private/Svelte.svelte b/Test/Resources/Private/Svelte.svelte
index 5f0bbf7..02c7aa1 100644
--- a/Test/Resources/Private/Svelte.svelte
+++ b/Test/Resources/Private/Svelte.svelte
@@ -1,19 +1,27 @@
 <script>
-    let name = 'Carbon.Pipeline';
     import './_Svelte.css';
+
+    let name = $state('Carbon.Pipeline');
+    let count = $state(0);
+
+    function increment() {
+		count ++;
+	}
 </script>
 
 <div class="container">
     <input type="text" bind:value={name}>
     <h1>Hello {name}!</h1>
-    <h2>Hello {name}!</h2>
+    <button onclick={increment}>
+        count is {count}
+    </button>
 </div>
 
 <style>
     h1 {
         color:green;
     }
-    :global(h2) {
+    :global(button) {
         color:red;
     }
 </style>