Add Svelte code snippet for decorators contexts

[rChaoz]

What I did

Add code snippets for contexts in decorators for Svelte.

The ability to use contexts in decorators was not documented/mentioned everywhere, but I found in this PR that it is possible, and I tested that it works.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Just run the frontpage site to check the snipper appears correctly.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[BrianIto]

This Code Snippet fixes a problem I was having when using decorators in another Svelte Component.

Let's look the following situation:

<script>
   //MockContext.svelte
   import { setContext } from 'svelte';

   setContext("getDataFromServer", mockGetDataFromServer)
</script>

<slot />

and calling it like

export default {
    // ...Meta params
    decorators: [() => MockSvelte]
}

This snippet is in the official documentation.

This works great...
until you have some actions.

My actions stopped working. No action was called and I had a lot of tests in the play param.

When doing this snippet way, all of them started working again.

PS: thanks, I've spent 2 hours of researching on the deeps of internet

[kasperpeulen]

I actually think that this code might be better in a beforeEach.
WDYT @JReinhold?

https://storybook.js.org/docs/writing-stories/mocking-modules#setting-up-and-cleaning-up

[JReinhold]

I think this should work just fine in beforeEach too - as long as your side effect is in the decorator function like this added snippet, and not in a Svelte component file.

There's a more holistic question though, if you should make the docs change from decorators -> beforeEach across all docs in one go instead of starting with a random Svelte snippet.