From c2c3b1d91b0b9a0f4eb659c12a529b71c52ba7e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcin=20Wi=C5=9Bniowski?= <shfx@shfx.pl>
Date: Sat, 15 Feb 2025 17:22:49 +0100
Subject: [PATCH] refactor: update components to svelte5 in ct-svelte-vite
 package

---
 .../ct-svelte-vite/src/components/Button.svelte      | 10 ++++------
 .../ct-svelte-vite/src/components/Counter.svelte     | 12 +++++-------
 .../ct-svelte-vite/src/components/DefaultSlot.svelte |  6 +++++-
 .../ct-svelte-vite/src/components/NamedSlots.svelte  | 12 +++++++++---
 tests/components/ct-svelte-vite/tests/slots.spec.ts  |  2 +-
 5 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/tests/components/ct-svelte-vite/src/components/Button.svelte b/tests/components/ct-svelte-vite/src/components/Button.svelte
index 2011c48b6b..9e8d2ac890 100644
--- a/tests/components/ct-svelte-vite/src/components/Button.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Button.svelte
@@ -1,7 +1,5 @@
-<script lang="ts">
-  import { createEventDispatcher } from "svelte";
-  export let title: string;
-  const dispatch = createEventDispatcher();
+<script>
+const { title, onsubmit } = $props();
 </script>
- 
-<button on:click={() => dispatch('submit', 'hello')}>{title}</button>
+
+<button onclick={() => onsubmit('hello')}>{title}</button>
diff --git a/tests/components/ct-svelte-vite/src/components/Counter.svelte b/tests/components/ct-svelte-vite/src/components/Counter.svelte
index 0362e2ac53..76cace9a5b 100644
--- a/tests/components/ct-svelte-vite/src/components/Counter.svelte
+++ b/tests/components/ct-svelte-vite/src/components/Counter.svelte
@@ -1,14 +1,12 @@
-<script lang="ts">
+<script>
 import { update, remountCount } from '../store'
-import { createEventDispatcher } from "svelte";
-export let count: number;
-const dispatch = createEventDispatcher();
+const { count, onsubmit, main, children } = $props()
 update();
 </script>
 
-<button on:click={() => dispatch('submit', 'hello')}>
+<button onclick={() => onsubmit?.('hello')}>
   <span data-testid="props">{count}</span>
   <span data-testid="remount-count">{remountCount}</span>
-  <slot name="main" />
-  <slot />
+  {@render main?.()}
+  {@render children?.()}
 </button>
diff --git a/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte b/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
index 201dda6ce3..be05b7924f 100644
--- a/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
+++ b/tests/components/ct-svelte-vite/src/components/DefaultSlot.svelte
@@ -1,7 +1,11 @@
+<script>
+const {children} = $props()
+</script>
+
 <div>
   <h1>Welcome!</h1>
   <main>
-    <slot />
+    {@render children?.()}
   </main>
   <footer>
     Thanks for visiting.
diff --git a/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte b/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
index 5f0d988af5..ec0f01d150 100644
--- a/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
+++ b/tests/components/ct-svelte-vite/src/components/NamedSlots.svelte
@@ -1,11 +1,17 @@
+<script>
+  const {header, main, footer} = $props()
+
+  console.log({header, main, footer});
+</script>
+
 <div>
   <header>
-    <slot name="header" />
+    {@render header?.()}
   </header>
   <main>
-    <slot name="main" />
+    {@render main?.()}
   </main>
   <footer>
-    <slot name="footer" />
+    {@render footer?.()}
   </footer>
 </div>
diff --git a/tests/components/ct-svelte-vite/tests/slots.spec.ts b/tests/components/ct-svelte-vite/tests/slots.spec.ts
index 4d6823abe7..4d0385faea 100644
--- a/tests/components/ct-svelte-vite/tests/slots.spec.ts
+++ b/tests/components/ct-svelte-vite/tests/slots.spec.ts
@@ -5,7 +5,7 @@ import NamedSlots from '@/components/NamedSlots.svelte';
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
     slots: {
-      default: 'Main Content',
+      children: 'Main Content',
     },
   });
   await expect(component).toContainText('Main Content');