deprecate mswDecorator

MIGRATION.md

@@ -0,0 +1,30 @@
+<h1>Migration</h1>
+
+- [From 1.x.x to 2.x.x](#from-1xx-to-2xx)
+  - [MSW required version is now ^2.0.0](#msw-required-version-is-now-200)
+  - [mswDecorator is deprecated in favor of mswLoader](#mswdecorator-is-deprecated-in-favor-of-mswloader)
+
+## From 1.x.x to 2.x.x
+
+### MSW required version is now ^2.0.0
+
+The addon now requires your MSW version to be 2.0.0 or higher. This means you will have to change the format of your handlers as well. More info on how to migrate to MSW 2.0.0: https://mswjs.io/docs/migrations/1.x-to-2.x/
+
+### mswDecorator is deprecated in favor of mswLoader
+
+Using MSW in a decorator worked for most scenarios, but there's a slight chance the service worker will not get registered in time. As a result, a story that requests data might actually request real data. Since v1.7.0, this addon provided a `mswLoader` to use instead of the `mswDecorator`. Loaders get executed before a story renders, differently than decorators, which execute as the story renders. Please replace your `mswDecorator` with `mswLoader`, as the `mswDecorator` will be removed in the next major release. It works the same, respecting the parameters you set, so there's no need to change anything else in your codebase.
+
+```diff
+// .storybook/preview.js
+-import { initialize, mswDecorator } from 'msw-storybook-addon'
++import { initialize, mswLoader } from 'msw-storybook-addon'
+
+initialize()
+
+const preview = {
+-  decorators: [mswDecorator]
++  loaders: [mswLoader]
+}
+
+export default preview
+```

packages/msw-addon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw-storybook-addon",
-  "version": "1.6.0",
+  "version": "2.0.0-beta.2",
   "description": "Mock API requests in Storybook with Mock Service Worker.",
   "keywords": [
     "storybook-addon",
@@ -50,6 +50,7 @@
     "@auto-it/released": "^11.1.1",
     "auto": "^11.1.1",
     "msw": "^2.0.9",
+    "ts-dedent": "^2.2.0",
     "tsup": "^8.0.1",
     "typescript": "^5.2.2"
   },

packages/msw-addon/src/decorator.ts

@@ -1,3 +1,4 @@
+import { dedent } from 'ts-dedent'
 import type { RequestHandler } from 'msw'
 import { applyRequestHandlers } from './applyRequestHandlers.js'
 
@@ -13,10 +14,25 @@ export type Context = {
   parameters: MswParameters
 }
 
+let hasBeenCalled = false
+const once = (fn: () => void) => {
+  if (!hasBeenCalled) {
+    hasBeenCalled = true
+    fn()
+  }
+}
+
 export const mswDecorator = <Story extends (...args: any[]) => any>(
   storyFn: Story,
   context: Context
 ) => {
+  once(() => {
+    console.warn(dedent`
+      [msw-storybook-addon] The mswDecorator is deprecated and will be removed in the next release. Please use the mswLoader instead.
+      
+      More info: https://github.com/mswjs/msw-storybook-addon/blob/main/MIGRATION.md#mswdecorator-is-deprecated-in-favor-of-mswloader
+    `)
+  })
   applyRequestHandlers(context.parameters.msw)
   return storyFn()
 }

yarn.lock

@@ -12797,7 +12797,7 @@ tryer@^1.0.1:
   resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
   integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
 
-ts-dedent@^2.0.0:
+ts-dedent@^2.0.0, ts-dedent@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-2.2.0.tgz#39e4bd297cd036292ae2394eb3412be63f563bb5"
   integrity sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==