storybookjs/storybook
View on GitHub[Bug]: Storybook treats context="module" exports in Svelte components as props and creates controls for them
Open
#21,818 opened on Mar 29, 2023
argtypesbughelp wantedsev:S3svelte
Repository metrics
- Stars
- (89,909 stars)
- PR merge metrics
- (Avg merge 7d 22h) (184 merged PRs in 30d)
Description
Describe the bug
In the following component, there is one prop prop and one module export moduleExport:
<script lang="ts" context="module">
export const moduleExport = "this is a variable exported from the module";
</script>
<script lang="ts">
export let prop = "this is a prop of the component"
</script>
<span>{prop}</span>
The problem is, Storybook shows moduleExport as a prop and creates controls for it. These controls are confusing and don't actually do anything.
To Reproduce
-
$ npx sb@next sandbox -
Select
Svelte Kit (TS) -
Enter a directory name such as
storybook-repro -
$ cd storybook-repro -
Add the following lines to the beginning of
src/stories/Button.svelte:<script lang="ts" context="module"> export const moduleExport = "module export"; </script> -
$ yarn -
$ yarn run storybook -
Go to any of the stories under
Example/Buttonin Storybook and see thatmoduleExportis listed as a prop
System
Environment Info:
System:
OS: macOS 13.2.1
CPU: (8) arm64 Apple M1 Pro
Binaries:
Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
Browsers:
Chrome: 111.0.5563.146
Firefox: 111.0.1
Safari: 16.3
npmPackages:
@storybook/addon-essentials: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/addon-interactions: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/addon-links: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/blocks: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/svelte: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/sveltekit: ^7.0.0-rc.8 => 7.0.0-rc.10
@storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1
Additional context
No response