feat!(msw-addon): fix package exports and generate esm build (#138)

this updates conditional exports so that both types and dependencies can be resolved. this also migrates build to generating esm by default for a more standards based packaging approach with strong support in modern tooling like webpack and vite. resolves #137
mswjs · Feb 21, 2024 · 7ca8425 · 7ca8425
1 parent 0f49e5c
commit 7ca8425
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 26 deletions.
diff --git a/packages/msw-addon/package.json b/packages/msw-addon/package.json
@@ -2,20 +2,16 @@
   "name": "msw-storybook-addon",
   "description": "Mock API requests in Storybook with Mock Service Worker.",
   "version": "1.6.0",
+  "type": "module",
   "main": "./dist/index.browser.js",
   "types": "./dist/index.browser.d.ts",
   "exports": {
-    "browser": {
+    ".": {
       "types": "./dist/index.browser.d.ts",
+      "browser": "./dist/index.browser.js",
+      "react-native": "./dist/index.react-native.js",
+      "node": "./dist/index.node.js",
       "default": "./dist/index.browser.js"
-    },
-    "react-native": {
-      "types": "./dist/index.react-native.d.ts",
-      "default": "./dist/index.react-native.js"
-    },
-    "node": {
-      "types": "./dist/index.node.d.ts",
-      "default": "./dist/index.node.js"
     }
   },
   "scripts": {

diff --git a/packages/msw-addon/src/applyRequestHandlers.ts b/packages/msw-addon/src/applyRequestHandlers.ts
@@ -1,6 +1,6 @@
 import type { RequestHandler } from 'msw'
 import { api } from '@build-time/initialize'
-import type { Context } from './decorator'
+import type { Context } from './decorator.js'
 
 export function applyRequestHandlers(
   handlersListOrObject: Context['parameters']['msw']

diff --git a/packages/msw-addon/src/augmentInitializeOptions.ts b/packages/msw-addon/src/augmentInitializeOptions.ts
@@ -1,4 +1,4 @@
-import { InitializeOptions } from "./initialize";
+import { InitializeOptions } from "./initialize.js";
 
 const fileExtensionPattern = /\.(js|jsx|ts|tsx|mjs|woff|woff2|ttf|otf|eot)$/;
 const filteredURLSubstrings = [

diff --git a/packages/msw-addon/src/decorator.ts b/packages/msw-addon/src/decorator.ts
@@ -1,5 +1,5 @@
 import type { RequestHandler } from 'msw'
-import { applyRequestHandlers } from './applyRequestHandlers'
+import { applyRequestHandlers } from './applyRequestHandlers.js'
 
 export type MswParameters = {
   msw?:

diff --git a/packages/msw-addon/src/index.ts b/packages/msw-addon/src/index.ts
@@ -1,3 +1,3 @@
 export { initialize, InitializeOptions, getWorker } from '@build-time/initialize'
-export * from './decorator'
-export * from './loader'
+export * from './decorator.js'
+export * from './loader.js'
diff --git a/packages/msw-addon/src/initialize.browser.ts b/packages/msw-addon/src/initialize.browser.ts
@@ -1,7 +1,7 @@
 import type { RequestHandler } from 'msw'
 import type { SetupWorker } from 'msw/browser'
 import { setupWorker } from 'msw/browser'
-import { augmentInitializeOptions } from './augmentInitializeOptions'
+import { augmentInitializeOptions } from './augmentInitializeOptions.js'
 
 export let api: SetupWorker
 

diff --git a/packages/msw-addon/src/initialize.node.ts b/packages/msw-addon/src/initialize.node.ts
@@ -1,7 +1,7 @@
 import type { RequestHandler } from 'msw'
 import type { SetupServer } from 'msw/node'
 import { setupServer } from 'msw/node'
-import { augmentInitializeOptions } from './augmentInitializeOptions'
+import { augmentInitializeOptions } from './augmentInitializeOptions.js'
 
 export let api: SetupServer
 

diff --git a/packages/msw-addon/src/initialize.react-native.ts b/packages/msw-addon/src/initialize.react-native.ts
@@ -1,7 +1,7 @@
 import type { RequestHandler } from 'msw'
 import type { SetupServer } from 'msw/node'
 import { setupServer } from 'msw/native'
-import { augmentInitializeOptions } from './augmentInitializeOptions'
+import { augmentInitializeOptions } from './augmentInitializeOptions.js'
 
 export let api: SetupServer
 

diff --git a/packages/msw-addon/src/loader.ts b/packages/msw-addon/src/loader.ts
@@ -1,5 +1,5 @@
-import type { Context } from './decorator'
-import { applyRequestHandlers } from './applyRequestHandlers'
+import type { Context } from './decorator.js'
+import { applyRequestHandlers } from './applyRequestHandlers.js'
 
 export const mswLoader = async (context: Context) => {
   applyRequestHandlers(context.parameters.msw)

diff --git a/packages/msw-addon/tsconfig.json b/packages/msw-addon/tsconfig.json
@@ -3,12 +3,9 @@
     "strict": true,
     "outDir": "./dist",
     "noImplicitAny": true,
-    "module": "commonjs",
+    "module": "Node16",
     "target": "es5",
-    "skipLibCheck": true,
     "allowJs": true,
-    "moduleResolution": "node",
-    "allowSyntheticDefaultImports": true,
     "declaration": true,
     "baseUrl": ".",
     "paths": {

diff --git a/packages/msw-addon/tsup.config.ts b/packages/msw-addon/tsup.config.ts
@@ -6,7 +6,7 @@ const browser = defineConfig({
   },
   outDir: './dist',
   target: ['chrome112'],
-  format: 'cjs',
+  format: 'esm',
   esbuildOptions(options) {
     options.alias = {
       ...(options.alias || {}),
@@ -24,7 +24,7 @@ const node = defineConfig({
   },
   outDir: './dist',
   target: 'node18',
-  format: 'cjs',
+  format: 'esm',
   esbuildOptions(options) {
     options.alias = {
       ...(options.alias || {}),
@@ -42,7 +42,7 @@ const reactNative = defineConfig({
   },
   outDir: './dist',
   target: 'esnext',
-  format: 'cjs',
+  format: 'esm',
   esbuildOptions(options) {
     options.alias = {
       ...(options.alias || {}),