[Bug] Deprecation warnings for <svelte:component> with latest pre-release of svelte 5

[bhvngt]

Describe the bug

While running pnpm build-storybook multiple deprecation warnings are thrown while using this addon. I understand that svelte 5 is not yet released (it looks near release going by the number of pending open issue), hence some of this are expected. Just thought of filing this as a placeholder once things settle down. Thanks for all the effort taken to product this addon.

Steps to reproduce the behavior

1. Go to the stackblitz reproduction
2. Run pnpm build-storybook
3. See warnings

Expected behavior

Build output without any warnings

Screenshots and/or logs

le` attribute instead
1: <script context="module" lang="ts">
                           ^
2:   import { type Args, defineMeta, setTemplate } from "@storybook/addon-svelte-csf";
3:   import { fn } from "@storybook/test";
transforming (34) src/stories/Configure.mdx11:01:21 [vite-plugin-svelte] node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/svelte/dist/components/SlotDecorator.svelte:6:13 Component has unused export property 'Component'. If it is for external reference only, please consider using `export const Component`
4: 
5:   export let decorator = undefined;
6:   export let Component;
                         ^
7:   export let props = {};
8:   export let on = undefined;
node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs (1:14760): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs (1:16416): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs (1:22232): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/[email protected][email protected]/node_modules/acorn-typescript/lib/index.mjs" contains an annotation that Rollup cannot interpret due to the position of the comment. The comment will be removed to avoid issues.
transforming (190) node_modules/.pnpm/[email protected]/node_modules/svelte/src/compiler/warnings.js11:01:22 [vite-plugin-svelte] node_modules/.pnpm/@[email protected]_@[email protected]_@sveltejs+vite-plugin-svelte_kfnnbhsf2iehc2puisknatdxd4/node_modules/@storybook/addon-svelte-csf/dist/runtime/Story.svelte:97:4 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
 95:     {@render template(renderer.args, renderer.storyContext)}
 96:   {:else if renderer.storyContext.component}
 97:     <svelte:component this={renderer.storyContext.component} {...renderer.args} />
                                                                                       ^
 98:   {:else}
 99:     <p>Warning: no story rendered. improve this message</p>
11:01:22 [vite-plugin-svelte] node_modules/.pnpm/@[email protected]_@[email protected]_@sveltejs+vite-plugin-svelte_kfnnbhsf2iehc2puisknatdxd4/node_modules/@storybook/addon-svelte-csf/dist/runtime/StoriesExtractor.svelte:22:0 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
20: </script>
21: 
22: <svelte:component this={Stories} />
                                       ^
23: 
11:01:22 [vite-plugin-svelte] node_modules/.pnpm/@[email protected]_@[email protected]_@sveltejs+vite-plugin-svelte_kfnnbhsf2iehc2puisknatdxd4/node_modules/@storybook/addon-svelte-csf/dist/runtime/StoryRenderer.svelte:35:0 `<svelte:component>` is deprecated in runes mode — components are dynamic by default
33: </script>
34: 
35: <svelte:component this={Stories} />
                                       ^
36: 
node_modules/.pnpm/[email protected]/node_modules/telejson/dist/index.mjs (1413:15): Use of eval in "node_modules/.pnpm/[email protected]/node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/.pnpm/[email protected]/node_modules/telejson/dist/index.mjs (1416:18): Use of eval in "node_modules/.pnpm/[email protected]/node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 1681 modules transformed.

Environment

• OS: [e.g. iOS] OSX
• Node.js version: [e.g. v12.17.0] v18.2
• NPM version: [e.g. 6.14.4] pnpm 8.15.6
• Browser (if applicable): [e.g. chrome, safari] chrome
• Browser version (if applicable): [e.g. 22] v128
• Device (if applicable): [e.g. iPhone6]

Additional context

There is already an issue #204 filed for <script context="module" deprecation. Som warnings are connected to @storybook/svelte package. Others are connected to this addon.

[JReinhold]

Given @storybook/svelte still has to support Svelte 4 until Storybook 9.0, it might limit us in what we can do with some of the warnings.

Do we know if <svelte:component this={SomeComponent} /> can be replaced with <SomeComponent /> already in Svelte 4?

[bhvngt]

Given @storybook/svelte still has to support Svelte 4 until Storybook 9.0, it might limit us in what we can do with some of the warnings.

make sense.

Going by the documentation, it appears to me that in v4, we can replace <svelte:component this={SomeComponent} /> with <SomeComponent /> provided SomeComponent is not an expression. Here's svelte 4 example as well as an example from their tutorial where it is used for an expression

[xeho91]

The next version of this addon doesn't use <svelte:component> anywhere.
Could we move this issue to https://github.com/storybookjs/storybook since the warnings comes from components inside the @storybook/svelte package?