support Storybook 7

.github/workflows/release.yml

@@ -31,5 +31,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        with:
-          working_directory: ./packages/msw-addon
+        working-directory: ./packages/msw-addon

packages/docs/.storybook/main.js

@@ -7,4 +7,15 @@ module.exports = {
     '@storybook/preset-create-react-app',
     '@storybook/addon-storysource',
   ],
-};
+  webpackFinal: async (config) => {
+    config.resolve = config.resolve || {}
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      'msw-storybook-addon': require.resolve('../../msw-addon/dist'),
+    }
+    return config
+  },
+  core: {
+    builder: 'webpack5',
+  },
+}

packages/docs/package.json

@@ -46,27 +46,29 @@
     "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "graphql": "^15.4.0",
-    "msw-storybook-addon": "link:../msw-addon",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-query": "^3.5.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.1",
+    "react-scripts": "^5.0.1",
     "urql": "^1.11.4",
     "web-vitals": "^0.2.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^6.1.11",
-    "@storybook/addon-actions": "^6.1.11",
-    "@storybook/addon-essentials": "^6.1.11",
-    "@storybook/addon-links": "^6.1.11",
-    "@storybook/addon-storysource": "^6.1.11",
-    "@storybook/node-logger": "^6.1.11",
-    "@storybook/preset-create-react-app": "^3.1.5",
-    "@storybook/react": "^6.1.11",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/addon-storysource": "^6.5.16",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/node-logger": "^6.5.16",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.16",
     "chromatic": "^5.5.0",
-    "msw": "^0.35.0"
+    "msw": "^0.35.0",
+    "webpack": "5"
   },
   "msw": {
     "workerDirectory": "public"

packages/msw-addon/package.json

@@ -34,7 +34,6 @@
   "homepage": "https://msw-sb.vercel.app/",
   "license": "MIT",
   "dependencies": {
-    "@storybook/addons": "^6.0.0",
     "is-node-process": "^1.0.1"
   },
   "devDependencies": {

packages/msw-addon/src/mswDecorator.ts

@@ -1,9 +1,4 @@
 import { isNodeProcess } from 'is-node-process'
-import type {
-  DecoratorFunction,
-  LoaderFunction,
-  StoryContext,
-} from '@storybook/addons'
 import type { SetupWorkerApi, RequestHandler } from 'msw'
 import type { SetupServerApi } from 'msw/node'
 
@@ -18,17 +13,13 @@ export type MswParameters = {
     | { handlers: RequestHandler[] | Record<string, RequestHandler> }
 }
 
-export interface DecoratorContext extends StoryContext {
-  parameters: StoryContext['parameters'] & MswParameters
-}
-
-export interface LoaderContext extends StoryContext {
-  parameters: StoryContext['parameters'] & MswParameters
+type Context = {
+  parameters: MswParameters
 }
 
 const IS_BROWSER = !isNodeProcess()
 let api: SetupApi
-let workerPromise: Promise<unknown>;
+let workerPromise: Promise<unknown>
 
 export function initialize(options?: InitializeOptions): SetupApi {
   if (IS_BROWSER) {
@@ -47,13 +38,13 @@ export function initialize(options?: InitializeOptions): SetupApi {
      * to globalThis so it works correctly when running in node.
      * @see https://github.com/webpack/webpack/issues/8826#issuecomment-660594260
      */
-    const nodeVer = typeof process !== "undefined" && process.versions?.node;
+    const nodeVer = typeof process !== 'undefined' && process.versions?.node
     const nodeRequire = nodeVer
-      ? typeof __webpack_require__ === "function"
+      ? typeof __webpack_require__ === 'function'
         ? __non_webpack_require__
         : require
-      : undefined;
-     
+      : undefined
+
     const { setupServer } = nodeRequire('msw/node')
     const server = setupServer()
     workerPromise = server.listen(options)
@@ -80,9 +71,9 @@ export function getWorker(): SetupApi {
   return api
 }
 
-export const mswDecorator: DecoratorFunction = (
-  storyFn,
-  context: DecoratorContext
+export const mswDecorator = <Story extends (...args: any[]) => any>(
+  storyFn: Story,
+  context: Context
 ) => {
   const {
     parameters: { msw },
@@ -115,7 +106,7 @@ export const mswDecorator: DecoratorFunction = (
   return storyFn()
 }
 
-export const mswLoader: LoaderFunction = async (context: LoaderContext) => {
+export const mswLoader = async (context: Context) => {
   const {
     parameters: { msw },
   } = context
@@ -144,7 +135,9 @@ export const mswLoader: LoaderFunction = async (context: LoaderContext) => {
     }
   }
 
-  await (workerPromise || Promise.resolve());
+  if (workerPromise) {
+    await workerPromise
+  }
 
   return {}
 }

packages/msw-addon/tsconfig.json

@@ -3,6 +3,7 @@
     "outDir": "./dist/",
     "noImplicitAny": true,
     "module": "CommonJS",
+    "skipLibCheck": true,
     "target": "es5",
     "strict": true,
     "allowJs": true,