[Bug]: Source snippets clobber each other when you render a story more than once

[tmeasday]

Describe the bug

When you render a story twice on the page (as in autodocs), it is keyed in the SourceProvider by id. This means when you change the primary story's args, the new args show up in the new secondary one.

To Reproduce

1. Go to http://localhost:6006/?path=/docs/example-button--docs (any sandbox)
2. Show code in the Primary story in the Stories block
3. Change args. The story will not change but the code will.

[tmeasday]

@shilman @JReinhold I was looking at this one, and it's not straightforward for the Story block component to communicate with the source decorator. So I had a different idea:

What if we include the rendered value of args in the SNIPPET_RENDERED event? Then the SourceContainer could keep a snippet for each story/args combination.

We could potentially send a hash of the args too, but I'm leaning towards the full values.

[shilman]

Good idea @tmeasday - i guess the only issue is with blobby args, but that's an issue in general. Worth a try!

[JReinhold]

Sounds like a good idea, except it might result in a very leaky memory footprint. Changing a label 10 time would make us store 10 different snippets. Are we flushing the snippets when stories get unmounted?

[tmeasday]

Snippets are like a few 10s of bytes I'm not sure we really need to worry about it @JReinhold

[tmeasday]

Are we flushing the snippets when stories get unmounted?

When you change away from the docs entry, yes.

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.48 containing PR #20915 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease