Svelte: Simplify public types - use modern Component

code/renderers/svelte/package.json

@@ -61,7 +61,6 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^6.2.0",
     "@testing-library/svelte": "^5.2.4",
-    "expect-type": "^1.1.0",
     "svelte": "^5.39.5",
     "svelte-check": "^4.3.2",
     "sveltedoc-parser": "^4.2.1",

code/renderers/svelte/src/__test__/Button.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  interface Props {
+    disabled: boolean;
+    label: string;
+    clicked?: (e: MouseEvent) => void;
+  }
 
-  export let disabled: boolean;
-  export let label: string;
-
-  const dispatch = createEventDispatcher();
+  // When a Svelte 5 component only uses runes, it is typed as a function component.
+  // Others are typed as class components. Hence we need to have tests for both shapes.
+  let { disabled, label, clicked}: Props = $props();
 </script>
 
-<button on:click={(e) => dispatch('clicked', e)} on:dblclick on:mousemove {disabled}>
+<button onclick={clicked} {disabled}>
   {label}
 </button>

code/renderers/svelte/src/__test__/Decorator.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-  export let decoratorArg: string;
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    decoratorArg: string;
+  }
+  let { children, decoratorArg }: Props = $props();
 </script>
 
 <div>
   Decorator: {decoratorArg}
-  <slot />
+  {@render children()}
 </div>

code/renderers/svelte/src/__test__/Decorator2.svelte

@@ -1,8 +1,14 @@
 <script lang="ts">
-  export let decoratorArg2: string;
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    children: Snippet;
+    decoratorArg2: string;
+  }
+  let { children, decoratorArg2 }: Props = $props();
 </script>
 
 <div>
   Decorator: {decoratorArg2}
-  <slot />
+  {@render children()}
 </div>

code/renderers/svelte/src/__test__/composeStories/Button.stories.ts

@@ -53,7 +53,6 @@ const getCaptionForLocale = (locale: string) => {
   }
 };
 
-// @ts-expect-error -- incompatibility with Svelte 5 types and CSF
 export const CSF2StoryWithLocale: CSF2Story<typeof StoryWithLocaleComponent> = (
   args,
   { globals }
@@ -105,7 +104,7 @@ export const CSF3Button: CSF3Story = {
   args: { label: 'foo' },
 };
 
-export const CSF3ButtonWithRender: StoryObj<CustomRenderComponent> = {
+export const CSF3ButtonWithRender: StoryObj<typeof CustomRenderComponent> = {
   args: {
     buttonProps: CSF3Button.args,
   },

code/renderers/svelte/src/__test__/composeStories/CustomRenderComponent.svelte

@@ -2,7 +2,7 @@
   import Button from './Button.svelte';
   import type { ComponentProps } from 'svelte';
 
-  export let buttonProps: ComponentProps<typeof Button>;
+  let { buttonProps }: { buttonProps: ComponentProps<typeof Button> } = $props();
 </script>
 
 <div>

code/renderers/svelte/src/__test__/composeStories/LoaderStoryComponent.svelte

@@ -1,15 +1,16 @@
-<script>
-  export let mockFn;
-  export let loaded;
+<script lang="ts">
+  let {
+    mockFn,
+    loaded,
+  }: {
+    mockFn: (arg: string) => string;
+    loaded: { value: string };
+  } = $props();
 
-  let data;
-
-  $: if (mockFn && loaded) {
-    data = mockFn('render');
-  }
+  let data = $derived(mockFn && loaded && mockFn('render'));
 </script>
 
 <div>
   <div data-testid="loaded-data">{loaded.value}</div>
   <div data-testid="spy-data">{String(data)}</div>
-</div>
+</div>

code/renderers/svelte/src/__test__/composeStories/StoryWithLocaleComponent.svelte

@@ -1,11 +1,16 @@
-<script>
+<script lang="ts">
   import Button from './Button.svelte';
-
-  export let locale;
-  export let label;
+
+  let {
+    locale,
+    label,
+  }: {
+    locale: string;
+    label: string;
+  } = $props();
 </script>
 
 <div>
   <p>locale: {locale}</p>
-  <Button label={label} />
-</div>
+  <Button {label} />
+</div>

code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 /// <reference types="@testing-library/jest-dom" />;
 import { cleanup, render, screen } from '@testing-library/svelte';
-import { afterEach, describe, expect, it, vi } from 'vitest';
+import { afterEach, describe, expect, it } from 'vitest';
 
 // import '@testing-library/svelte/vitest';
 import { expectTypeOf } from 'expect-type';