[Bug] HMR of *.stories.svelte causes all template args to be overwritten by the last story

[rory-orennia]

Describe the bug

If you use a <Template let:args> for your story, and you make a change to the *.stories.svelte file, your Docs view will overwrite all args for all stories with whatever the last story is

Steps to reproduce the behavior

Test.svelte

<script lang="ts">
  export let text: string;
</script>
<div>
  {text}
</div>

Test.stories.svelte

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

  import Test from './Test.svelte'
</script>

<Meta title="Inputs/Test" component={Test} />

<Template let:args>
  <Test {...args} />
</Template>

<Story name="Story1" args={{ text: 'Story1' }} />
<Story name="Story2" args={{ text: 'Story2' }} />
<Story name="Story3" args={{ text: 'Story3' }} />

1. pnpm storybook
2. open the Docs view
3. Change any code in Test.stories.svelte and save
4. page refreshes with this

Expected behavior

Stories should retain their proper args

Environment

• OS: MacOS
• Node.js version: 19.7.0
• pNPM version: 8.6.9

[benmccann]

I did see some HMR issues were fixed https://github.com/storybookjs/storybook/issues/21053. Does this still happen with the latest versions of storybook and the plugins?

[benmccann]

I don't know what you mean by "open the Docs view". Do you need to setup @storybook/addon-docs. I've done that, but am not seeing anything new. Where's that button? It would really be helpful if you could share a repository that reproduces this issue

[rory-orennia]

Sorry Ben, just got back from vacation and haven't had a chance to update our repo with the latest versions and test out if its fixed.

as for docs view, that's just what I thought the default "view" was when you clicked on a storybook in the left-nav: Here's what I was using in my repo:

    "@storybook/addon-essentials": "7.2.1",
    "@storybook/addon-interactions": "7.2.1",
    "@storybook/addon-links": "7.2.1",
    "@storybook/addon-styling": "^1.3.5",
    "@storybook/addon-svelte-csf": "^3.0.7",
    "@storybook/blocks": "7.2.1",
    "@storybook/svelte": "7.2.1",
    "@storybook/sveltekit": "7.2.1",
    "@storybook/testing-library": "0.2.0",

I'll try to see if the new version fixes things today or tomorrow. Thanks!

[rory-orennia]

Just updated to these versions and the bug still exists.

    "@storybook/addon-essentials": "7.4.2",
    "@storybook/addon-interactions": "7.4.2",
    "@storybook/addon-links": "7.4.2",
    "@storybook/addon-styling": "^1.3.7",
    "@storybook/addon-svelte-csf": "^4.0.7",
    "@storybook/blocks": "7.4.2",
    "@storybook/svelte": "7.4.2",
    "@storybook/sveltekit": "7.4.2",
    "@storybook/testing-library": "0.2.0",

I might have found something that could help find the cause:

1. Open the Test.stories.svelte storybook in your browser, see the top "Story1" and down below Story1,2,3
2. Change the "text" property to something else. Only the top updates as expected
3. Open Test.stories.svelte in your IDE, change the first stories text to "Story11"
4. browser refreshes with the HMR update, now all of the stories read "Story3"
5. Change the "text" property at the top to something else. All stories now update to the this new value instead of just the top one

So it seems like the HMR is messing up the IDs or event listeners or something and causes all the stories to be bound to the same value. Let me know if there's anything else I can do to help

[benmccann]

If you could share a repository that reproduces the issue that would help a lot.

[rory-orennia]

https://github.com/rory-orennia/addon-svelte-csf-114 I even updated the stories to use export const meta instead of the old <Meta> tag and it still breaks

[shilman]

:rocket: Issue was released in v4.0.9 :rocket: