fix: use conditional exports

packages/msw-addon/.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /dist
+/build
 
 # misc
 .DS_Store

packages/msw-addon/package.json

@@ -2,12 +2,17 @@
   "name": "msw-storybook-addon",
   "description": "Mock API requests in Storybook with Mock Service Worker.",
   "version": "1.6.0",
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "main": "./build/index.browser.js",
+  "exports": {
+    "browser": "./build/index.browser.js",
+    "react-native": "./build/index.react-native.js",
+    "node": "./build/index.node.js"
+  },
   "scripts": {
     "dev": "yarn build --watch",
-    "build": "tsc",
-    "prepublishOnly": "yarn build",
+    "clean": "rimraf ./build",
+    "build": "tsup",
+    "prepublishOnly": "yarn clean && yarn build",
     "release": "auto shipit"
   },
   "files": [
@@ -39,8 +44,10 @@
   "devDependencies": {
     "@auto-it/released": "^10.32.2",
     "auto": "^10.32.2",
-    "typescript": "^5.2.2",
-    "msw": "^2.0.9"
+    "msw": "^2.0.9",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "msw": "^2.0.0"

packages/msw-addon/src/decorator.ts

@@ -0,0 +1,49 @@
+import type { RequestHandler } from 'msw'
+import { api } from '@build-time/initialize'
+
+export type MswParameters = {
+  msw?:
+    | RequestHandler[]
+    | {
+        handlers: RequestHandler[] | Record<string, RequestHandler>
+      }
+}
+
+export type Context = {
+  parameters: MswParameters
+}
+
+export const mswDecorator = <Story extends (...args: any[]) => any>(
+  storyFn: Story,
+  context: Context
+) => {
+  const {
+    parameters: { msw },
+  } = context
+
+  if (api) {
+    api.resetHandlers()
+
+    if (msw) {
+      if (Array.isArray(msw) && msw.length > 0) {
+        // Support an Array of request handlers (backwards compatability).
+        api.use(...msw)
+      } else if ('handlers' in msw && msw.handlers) {
+        // Support an Array named request handlers handlers
+        // or an Object of named request handlers with named arrays of handlers
+        const handlers = Object.values(msw.handlers)
+          .filter(Boolean)
+          .reduce<RequestHandler[]>(
+            (handlers, handlersList) => handlers.concat(handlersList),
+            []
+          )
+
+        if (handlers.length > 0) {
+          api.use(...handlers)
+        }
+      }
+    }
+  }
+
+  return storyFn()
+}

packages/msw-addon/src/index.new.ts

@@ -0,0 +1,3 @@
+export { initialize, InitializeOptions } from '@build-time/initialize'
+export * from './decorator'
+export * from './loader'

packages/msw-addon/src/initialize.browser.ts

@@ -0,0 +1,17 @@
+import type { RequestHandler } from 'msw'
+import type { SetupWorker } from 'msw/browser'
+import { setupWorker } from 'msw/browser'
+
+export let api: SetupWorker
+
+export type InitializeOptions = Parameters<SetupWorker['start']>[0]
+
+export function initialize(
+  options?: InitializeOptions,
+  initialHandlers: RequestHandler[] = []
+): SetupWorker {
+  const worker = setupWorker(...initialHandlers)
+  worker.start(options)
+  api = worker
+  return worker
+}

packages/msw-addon/src/initialize.node.ts

@@ -0,0 +1,17 @@
+import type { RequestHandler } from 'msw'
+import type { SetupServer } from 'msw/node'
+import { setupServer } from 'msw/node'
+
+export let api: SetupServer
+
+export type InitializeOptions = Parameters<SetupServer['listen']>[0]
+
+export function initialize(
+  options?: InitializeOptions,
+  initialHandlers: RequestHandler[] = []
+): SetupServer {
+  const server = setupServer(...initialHandlers)
+  server.listen(options)
+  api = server
+  return server
+}

packages/msw-addon/src/initialize.react-native.ts

@@ -0,0 +1,17 @@
+import type { RequestHandler } from 'msw'
+import { SetupServer } from 'msw/node'
+import { setupServer } from 'msw/native'
+
+export let api: SetupServer
+
+export type InitializeOptions = Parameters<SetupServer['listen']>[0]
+
+export function initialize(
+  options?: InitializeOptions,
+  initialHandlers: RequestHandler[] = []
+): SetupServer {
+  const server = setupServer(...initialHandlers)
+  server.listen(options)
+  api = server
+  return server
+}

packages/msw-addon/src/loader.ts

@@ -0,0 +1,45 @@
+import type { RequestHandler } from 'msw'
+import type { Context } from './decorator'
+import { api } from '@build-time/initialize'
+
+export const mswLoader = async (context: Context) => {
+  const {
+    parameters: { msw },
+  } = context
+
+  if (api) {
+    api.resetHandlers()
+
+    if (msw) {
+      if (Array.isArray(msw) && msw.length > 0) {
+        // Support an Array of request handlers (backwards compatability).
+        api.use(...msw)
+      } else if ('handlers' in msw && msw.handlers) {
+        // Support an Array named request handlers handlers
+        // or an Object of named request handlers with named arrays of handlers
+        const handlers = Object.values(msw.handlers)
+          .filter(Boolean)
+          .reduce<RequestHandler[]>(
+            (handlers, handlersList) => handlers.concat(handlersList),
+            []
+          )
+
+        if (handlers.length > 0) {
+          api.use(...handlers)
+        }
+      }
+    }
+  }
+
+  if (
+    typeof window !== 'undefined' &&
+    'navigator' in window &&
+    navigator.serviceWorker.controller
+  ) {
+    // No need to rely on the MSW Promise exactly
+    // since only 1 worker can control 1 scope at a time.
+    await navigator.serviceWorker.ready
+  }
+
+  return {}
+}

packages/msw-addon/tsup.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig } from 'tsup'
+
+const browser = defineConfig({
+  entry: {
+    'index.browser': './src/index.new.ts',
+  },
+  outDir: './build',
+  target: ['chrome112'],
+  format: 'cjs',
+  esbuildOptions(options) {
+    options.alias = {
+      ...(options.alias || {}),
+      '@build-time/initialize': './src/initialize.browser.ts',
+    }
+  },
+  bundle: true,
+})
+
+const node = defineConfig({
+  entry: {
+    'index.node': './src/index.new.ts',
+  },
+  outDir: './build',
+  target: 'node18',
+  format: 'cjs',
+  esbuildOptions(options) {
+    options.alias = {
+      ...(options.alias || {}),
+      '@build-time/initialize': './src/initialize.node.ts',
+    }
+  },
+  bundle: true,
+})
+
+const reactNative = defineConfig({
+  entry: {
+    'index.react-native': './src/index.new.ts',
+  },
+  outDir: './build',
+  target: 'esnext',
+  format: 'cjs',
+  esbuildOptions(options) {
+    options.alias = {
+      ...(options.alias || {}),
+      '@build-time/initialize': './src/initialize.react-native.ts',
+    }
+  },
+  bundle: true,
+})
+
+export default [browser, node, reactNative]