refactor: update components to svelte5 in ct-svelte-vite package

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>

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>

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.

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>

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');