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

bhvngt commented 2 months ago

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

Go to the stackblitz reproduction
Run pnpm build-storybook
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/@storybook+svelte@8.2.9_storybook@8.2.9_svelte@5.0.0-next.244/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/acorn-typescript@1.4.13_acorn@8.12.1/node_modules/acorn-typescript/lib/index.mjs (1:14760): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/acorn-typescript@1.4.13_acorn@8.12.1/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/acorn-typescript@1.4.13_acorn@8.12.1/node_modules/acorn-typescript/lib/index.mjs (1:16416): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/acorn-typescript@1.4.13_acorn@8.12.1/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/acorn-typescript@1.4.13_acorn@8.12.1/node_modules/acorn-typescript/lib/index.mjs (1:22232): A comment

"/*#__PURE__*/"

in "node_modules/.pnpm/acorn-typescript@1.4.13_acorn@8.12.1/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/svelte@5.0.0-next.244/node_modules/svelte/src/compiler/warnings.js11:01:22 [vite-plugin-svelte] node_modules/.pnpm/@storybook+addon-svelte-csf@5.0.0-next.3_@storybook+svelte@8.2.9_@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/@storybook+addon-svelte-csf@5.0.0-next.3_@storybook+svelte@8.2.9_@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/@storybook+addon-svelte-csf@5.0.0-next.3_@storybook+svelte@8.2.9_@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/telejson@7.2.0/node_modules/telejson/dist/index.mjs (1413:15): Use of eval in "node_modules/.pnpm/telejson@7.2.0/node_modules/telejson/dist/index.mjs" is strongly discouraged as it poses security risks and may cause issues with minification.
node_modules/.pnpm/telejson@7.2.0/node_modules/telejson/dist/index.mjs (1416:18): Use of eval in "node_modules/.pnpm/telejson@7.2.0/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 commented 2 months ago

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 commented 2 months ago

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 commented 1 month ago

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?

storybookjs / addon-svelte-csf