use tsup for building, migrate to vite, add default handlers (#111)

* use tsup for building, migrate to vite, add default handlers * upgrade chromatic version * fix build command * upgrade example and gh action to node 18 * update html file
mswjs · May 9, 2023 · 841fdee · 841fdee
1 parent d18629c
commit 841fdee
Show file tree

Hide file tree

Showing 20 changed files with 1,704 additions and 1,619 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -9,7 +9,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

diff --git a/.github/workflows/demo-tests.yml b/.github/workflows/demo-tests.yml
@@ -1,7 +1,7 @@
 name: 'Tests for Demos'
 on: push
 jobs:
-  jest:
+  test:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
@@ -10,4 +10,4 @@ jobs:
       - name: Build addon
         run: yarn workspace msw-storybook-addon build
       - name: Test Demos
-        run: yarn workspace msw-storybook-docs test --colors
+        run: yarn workspace msw-storybook-docs test
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1

diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
     "storybook": "yarn workspace msw-storybook-docs storybook",
     "msw:dev": "yarn workspace msw-storybook-addon dev",
     "start": "npm-run-all --parallel storybook msw:dev",
-    "build": "yarn workspace msw-storybook-addon build && yarn workspace msw-storybook-docs storybook-build"
+    "build": "yarn workspace msw-storybook-addon build && yarn workspace msw-storybook-docs build-storybook"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5"

diff --git a/packages/docs/.storybook/main.js b/packages/docs/.storybook/main.js
@@ -1,26 +1,17 @@
 /**
- * @type {import('@storybook/react-webpack5').StorybookConfig}
+ * @type {import('@storybook/react-vite').StorybookConfig}
  */
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
-    '@storybook/preset-create-react-app',
     '@storybook/addon-storysource',
   ],
   staticDirs: ['../public'],
-  webpackFinal: async (config) => {
-    config.resolve = config.resolve || {}
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      'msw-storybook-addon': require.resolve('../../msw-addon/dist'),
-    }
-    return config
-  },
   framework: {
-    name: '@storybook/react-webpack5',
+    name: '@storybook/react-vite',
     options: {},
   },
   docs: {

diff --git a/packages/docs/index.html b/packages/docs/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MSW Example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:watch": "vitest watch",
     "storybook": "storybook dev -p 6006",
-    "storybook-build": "storybook build",
+    "build-storybook": "storybook build",
     "msw:update": "msw init public"
   },
   "eslintConfig": {
@@ -41,36 +42,39 @@
   },
   "dependencies": {
     "@apollo/client": "^3.3.6",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
     "axios": "^0.21.1",
     "graphql": "^15.4.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-query": "^3.5.5",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
-    "urql": "^1.11.4",
-    "web-vitals": "^0.2.4"
+    "urql": "^1.11.4"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^7.0.7",
-    "@storybook/addon-actions": "^7.0.7",
     "@storybook/addon-essentials": "^7.0.7",
     "@storybook/addon-links": "^7.0.7",
     "@storybook/addon-storysource": "^7.0.7",
-    "@storybook/node-logger": "^7.0.7",
-    "@storybook/preset-create-react-app": "^7.0.7",
     "@storybook/react": "^7.0.7",
-    "@storybook/react-webpack5": "^7.0.7",
-    "chromatic": "^5.5.0",
+    "@storybook/react-vite": "^7.0.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "chromatic": "^6.17.4",
+    "jsdom": "^21.1.0",
     "msw": "^1.2.1",
     "storybook": "^7.0.7",
-    "webpack": "5"
+    "timers": "^0.1.1",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0",
+    "vitest": "^0.29.2"
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   }
 }
diff --git a/packages/docs/public/index.html b/packages/docs/public/index.html
diff --git a/packages/docs/src/demos/apollo/App.test.jsx b/packages/docs/src/demos/apollo/App.test.jsx
@@ -1,13 +1,18 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { vi } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'
 
 const { MockedSuccess, MockedError } = composeStories(stories)
 const server = getServer()
 
+afterAll(() => {
+  vi.restoreAllMocks()
+})
+
 it('renders film cards for each film', async () => {
   server.use(...MockedSuccess.parameters.msw.handlers)
   render(<MockedSuccess />)

diff --git a/packages/docs/src/demos/fetch/AddonOnNode.test.jsx b/packages/docs/src/demos/fetch/AddonOnNode.test.jsx
diff --git a/packages/docs/src/demos/fetch/App.jsx b/packages/docs/src/demos/fetch/App.jsx
@@ -18,7 +18,6 @@ function useFetchFilms() {
       })
       .then((res) => res.json())
       .then((data) => {
-        console.log({ data })
         setStatus('success');
         setData(data.results);
       })
@@ -36,7 +35,6 @@ function useFetchFilms() {
 export function App() {
   const { status, data: films } = useFetchFilms();
 
-  console.log({ status, films })
   if (status === 'loading') {
     return <p>Fetching Star Wars data...</p>;
   }

diff --git a/packages/docs/src/demos/fetch/App.stories.jsx b/packages/docs/src/demos/fetch/App.stories.jsx
@@ -1,6 +1,7 @@
 import { rest } from 'msw';
 import { App } from './App';
 
+// eslint-disable-next-line import/no-anonymous-default-export
 export default {
   title: 'Demos/Fetch',
   component: App,

diff --git a/packages/docs/src/demos/react-query/App.test.jsx b/packages/docs/src/demos/react-query/App.test.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { composeStories } from '@storybook/react'
+import { vi } from 'vitest'
 
 import { getServer } from '../../test-utils'
 import * as stories from './App.stories'
@@ -10,7 +11,7 @@ const { MockedSuccess, MockedError } = composeStories(stories)
 const server = getServer()
 
 afterAll(() => {
-  jest.restoreAllMocks()
+  vi.restoreAllMocks()
 })
 
 it('renders film cards for each film', async () => {
@@ -32,7 +33,7 @@ it('renders film cards for each film', async () => {
 
 it('renders error message if it cannot load the films', async () => {
   // get rid of the console.error for this test which adds clutter to the logs
-  jest.spyOn(console, 'error').mockImplementationOnce(() => {})
+  vi.spyOn(console, 'error').mockImplementationOnce(() => {})
 
   server.use(...MockedError.parameters.msw.handlers)
   render(<MockedError />)

diff --git a/packages/docs/vite.config.js b/packages/docs/vite.config.js
@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    clearMocks: true,
+    setupFiles: './src/setupTests.js',
+  },
+})
diff --git a/packages/msw-addon/package.json b/packages/msw-addon/package.json
@@ -3,16 +3,27 @@
   "description": "Mock API requests in Storybook with Mock Service Worker.",
   "version": "1.6.0",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "scripts": {
+    "build": "tsup",
     "dev": "yarn build --watch",
-    "build": "tsc",
     "prepublishOnly": "yarn build",
     "release": "auto shipit"
   },
   "files": [
-    "dist/"
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
   ],
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mswjs/msw-storybook-addon.git",
@@ -39,7 +50,8 @@
   "devDependencies": {
     "@auto-it/released": "^10.32.2",
     "auto": "^10.32.2",
-    "typescript": "^4.5.2"
+    "tsup": "^6.6.3",
+    "typescript": "^5.0.4"
   },
   "peerDependencies": {
     "msw": ">=0.35.0 <2.0.0"