Reactive state value declared in stories.svelte file does not trigger re-render of component on change: am I missing something?

[awforsythe]

I'm using Storybook v8.4.7 and Svelte v5.14.2, with @storybook/addon-svelte-csf at version 5.0.0-next.15.

I have a simple component defined in MyComponent.svelte. It accepts two props: a value and a callback. It displays the passed-in value alongside a button, and when the button is clicked, it generates a new string and passes it to onChange:

<script lang="ts">
  interface Props {
    value: string;
    onChange: (v: string) => void;
  }
  const { value, onChange }: Props = $props();

  function getRandomString(): string {
    const xs = ['alpha', 'bravo', 'charlie', 'delta', 'echo', 'foxtrot', 'golf', 'hotel'];
    return xs[Math.floor(Math.random() * xs.length)];
  }

  function handleChange() {
    const newValue = getRandomString();
    console.log(`MyComponent calling onChange('${newValue}')`);
    onChange(newValue);
  }
</script>

<ul>
  <li><b>value:</b> {value}</li>
  <li>
    <button onclick={handleChange}>Change</button>
  </li>
</ul>

Alongside that component file, I've defined a story in MyComponent.stories.svelte:

<script module lang="ts">
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import MyComponent from './MyComponent.svelte';

  let value = $state('hello');

  const onChange = (s: string) => {
    console.log(`onChange callback assigning '${s}' to value`);
    value = s;
  };

  const { Story } = defineMeta({
    title: 'Components/MyComponent',
    component: MyComponent
  });
</script>

<Story name="String Value" args={{ value, onChange }} />

Here we use the $state rune to define the value for our component, and we define an onChange handler that assigns our new string directly to that state value.

If I load up this story in the Storybook UI, my component is rendered as expected: the initial value of hello appears next to the "Change" button, like so:

• value: hello
• [ Change ]

If I click the Change button, then the console output confirms that a new value is propagated up to our stories.svelte file as expected, e.g.:

MyComponent calling onChange('charlie')
onChange callback assigning 'charlie' to value

...but the component itself doesn't re-render: it still displays the initial value of hello.

However, if I just drop an instance of MyComponent into my Svelte app and pass it a $state value in the same way, it behaves as expected: every time I click the "Change" button, the new value is instantly reflected on the page.

Since it works in the app but not in Storybook, I'm assuming that I'm somehow using @storybook/addon-svelte-csf incorrectly, and that value isn't being passed to the Storybook-rendered instance of MyComponent in a way that preserves reactivity.

It doesn't seem to make a difference if I change to legacy mode (i.e. just declaring let state = 'hello' without Svelte 5 runes) or if I use a store (const value = writable('hello'), passing the value arg as $value)- I get the same result.

This seems like a simple example that should work intuitively, but it just plain doesn't behave as I'd expect. What am I doing wrong, or where can I start digging into this handful of packages (svelte, storybook, addon-svelte-csf, et al.) to better understand what's not working?

[xeho91]

Hmm... That's an interesting study case. I need to give myself time to study better why your pattern doesn't work. I'm not yet sure if the issue is on your side. Or we're internally breaking something. Or we hit some limitation. Right now, @JReinhold has a better understanding of the runtime part of this addon. But I suspect we might also need @paoloricciuti's help to explain Svelte 5 reactivity for this case.

---

Regardless, I'll share what will work for your case:

<script module lang="ts">
  import { defineMeta } from '@storybook/addon-svelte-csf';
  import { fn } from '@storybook/test';
  // 👆 Let's give ourselves a better debugging experience
  import MyComponent from './components/Example.svelte';

  let value = $state('hello');

  const onChange = (s: string) => {
    console.log(`onChange callback assigning '${s}' to value`);
    value = s;
  };

  const { Story } = defineMeta({
    title: 'Components/MyComponent',
    component: MyComponent,
    args: {
      //        👇 This will allow us to see the output in the Actions tab
      onChange: fn(onChange),
      // 👆 We can define it "globally". You can also pass it directly down to `<MyComponent />` - up to you
    },
  });
</script>

<Story name="String Value">
  {#snippet children(args)}
    <!--             👆 onChange is inside, from `defineMeta` -->
    <MyComponent {...args} {value} />
    <!--                   👆 pass the value directly to MyComponent -->
  {/snippet}
</Story>

[JReinhold]

I suspect this is a problem internally in @storybook/svelte, where the way args are internally passed around and transformed, causes them to lose reactivity. We had this problem once with Solidjs's proxies too.

The workaround suggested here makes sense, passing the reactive value directly to the component, instead of through args.

[paoloricciuti]

I suspect this is the same problem we fixed for the play function: since the addon mounts the component "heartlessly" to get the props you are invoking a different onChange function and setting a different atateful variable.

[awforsythe]

That gives me some valuable insight- thanks, all. @xeho91's workaround does indeed work for me.

(For posterity: I actually have to render the component as <MyComponent {value} onChange={args.onChange!} /> or something similar, since TypeScript infers the type of args.onChange as possibly undefined, but that's entirely tangential to this issue.)