[Bug] Show Code doesn't work when using Svelte-native format and <Template/> tags

[kyleshepherd]

Describe the bug

If you use a Svelte-native format for a story, and use the <Template/> tags along with args to reduce boilerplate, the Show Code option on the docs page doesn't display the actual code for the component.

Example:

// Container.stories.svelte
<script lang="ts">
  import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
  import Container from "./Container.svelte";
</script>

<style lang="scss">
  .block {
    background-color: $dark;
    height: 100vh;
    width: 100%;
  }
</style>

<Meta title="Components/Container" component={Container} />

<Template let:args>
  <Container {...args}>
    <div class="block" />
  </Container>
</Template>

<Story name="Default" />

Results in this:

Steps to reproduce the behavior

1. Create a Svelte-native story using Template tags (and using Vite Builder, maybe this is the issue)
2. View Story Docs
3. Click "Show Code"
4. See error

Expected behavior

Viewing the code should display the component code the same way it does when not using Templates such as

<Story name="Default">
    <Container>
        <div class="block"/>
    </Container>
</Story>

Environment

• OS: MacOS 13.1
• Node.js version: v16.17.0
• NPM version: 8.15.0

[kyleshepherd]

bumping this after the holiday break :)

[kyleshepherd]

is there anyone maintaining this repo?

on top of the mentioned issue, you can't create your own DocsPage (or even hide the default one) for some reason

The following doesn't work:

<Meta
  title="Components/SpriteIcon"
  component={SpriteIcon}
  argTypes={{
    icon: { control: "text" },
    iconPath: { control: "text" },
    width: { control: "number" },
    height: { control: "number" },
    color: { control: "color" },
  }}
  parameters={{
    docs: {
      page: null
    },
  }}
/>

[MilesWellsSVT]

I had the same bug crop up when upgrading from Storybook 6 to 7 while also swapping over from Webpack to Vite. Switching back to Webpack while still on Storybook 7 I get the expected code format:

However, when spreading args for controls like so:

<Story let:args>
	<Alert {...args}>Alert</Alert>
</Story>

I get this behavior for events (the Alert component here dispatches a "hide" event via the createEventDispatcher):

I don't know if this is related, but I did not see this behavior when on SB 6 with version 2.0.10 of this plugin. Now I'm on SB 7 and plugin version 3.0.2.

[crisward]

Also using svelte on 7. If I setup the story with no args, I get the correct code block

<Story name="Primary Extra Small">
  <Button mode="primary" size="xs">Button</Button>
</Story>

However with args or template block, I get

npm ls (if it helps)

├── @babel/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @sveltejs/[email protected]
├── @sveltejs/[email protected]
├── @testing-library/[email protected]
├── @web/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

[j3rem1e]

Closing this issue because the generation of Svelte snippets are not done by this addon but is the responsibility of the core Storybook/svelte and there is already issues about this bug.

[giamir]

@j3rem1e Since this issue is now closed could you link here which issue in Storybook/svelte we should follow? Thank you.

[j3rem1e]

At least this one : storybookjs/storybook#24008