chore!: upgrade to node 20x

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.10.0

example/index.tsx

@@ -3,12 +3,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { MSWToolbar } from '../.';
 import { Button, ChakraProvider, HStack } from '@chakra-ui/react';
-import type { SetupWorkerApi } from 'msw';
+import type { SetupWorker } from 'msw/browser';
 import { APP_NAME } from './constants';
 
 const isDev = process.env.NODE_ENV === 'development';
 
-let worker: SetupWorkerApi;
+let worker: SetupWorker;
 
 // An example of deferring app mounting until the worker has been loaded in development only
 const prepareWorker = async () => {

example/mocks/browser.ts

@@ -1,4 +1,5 @@
-import { rest, setupWorker } from 'msw';
+import { setupWorker } from 'msw/browser';
+import {http, HttpResponse} from 'msw';
 import { createUtils } from '../../';
 import { APP_NAME } from '../constants';
 
@@ -7,9 +8,7 @@ const { json } = createUtils(APP_NAME);
 export const getWorker = () => {
   return setupWorker(
     ...[
-      rest.get('http://www.example.com', (_req, res, ctx) => {
-        return json(res, ctx, { okay: 'there' });
-      }),
+      http.get('http://www.example.com', () => HttpResponse.json({ okay: 'there' })),
     ]
   );
 };

example/package.json

@@ -27,7 +27,7 @@
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
     "copyfiles": "^2.4.1",
-    "msw": "^0.35.0",
+    "msw": "^2.0.11",
     "parcel": "^1.12.3",
     "prettier": "^2.4.1",
     "typescript": "^3.4.5"

package.json

@@ -62,7 +62,7 @@
     "autoprefixer": "^10.4.0",
     "babel-jest": "^27.4.5",
     "husky": "^7.0.0",
-    "msw": "^0.35.0",
+    "msw": "^2.0.11",
     "postcss": "^8.3.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/component/MSWToolbar.tsx

@@ -1,11 +1,6 @@
 import * as React from 'react';
-import { rest } from 'msw';
-import {
-  SetupWorkerApi,
-  MockedRequest,
-  ResponseComposition,
-  RestContext,
-} from 'msw';
+import {http, HttpResponse} from 'msw';
+import {SetupWorker} from 'msw/browser';
 import { usePrevious } from './hooks';
 import styles from './styles.module.css';
 import { WorkerMode } from '../types';
@@ -39,7 +34,7 @@ export const MSWToolbar = ({
     );
   }
 
-  const workerRef = React.useRef<SetupWorkerApi>();
+  const workerRef = React.useRef<SetupWorker>();
 
   const [isReady, setIsReady] = React.useState(isEnabled ? false : true);
 
@@ -94,14 +89,10 @@ export const MSWToolbar = ({
       case 'error':
         workerRef.current?.use(
           ...['get', 'post', 'put', 'patch', 'delete'].map(method =>
-            (rest as any)[method as any](
+            (http as any)[method as any](
               `${apiUrl}/*`,
-              (
-                _req: MockedRequest<any>,
-                res: ResponseComposition<any>,
-                _ctx: RestContext
-              ) => {
-                return res.networkError('Fake error');
+              () => {
+                return new HttpResponse('Fake error', { status: 500 })
               }
             )
           )

src/types.ts

@@ -1,4 +1,4 @@
-import { SetupWorkerApi } from 'msw';
+import type { SetupWorker } from 'msw/browser';
 import React from 'react';
 
 export interface MSWToolbarProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -23,7 +23,7 @@ export interface MSWToolbarProps extends React.ComponentPropsWithoutRef<'div'> {
   /**
    * An instance of the MSW worker returned from `setupWorker`.
    */
-  worker: SetupWorkerApi | undefined;
+  worker: SetupWorker | undefined;
 
   /**
    * This component takes children so that it can ensure the worker has started before rendering the tree. This guarantees that

src/utils/index.ts

@@ -1,4 +1,4 @@
-import { ResponseComposition, RestContext } from 'msw';
+import { HttpResponse, delay } from 'msw'
 import { get } from '../helpers';
 
 /**
@@ -8,23 +8,25 @@ export const createUtils = (prefix: string = '') => {
   /**
    * A small helper that returns ctx.delay with the value from the toolbar
    */
-  function getDelay(ctx: RestContext) {
-    return ctx.delay(Number(get(prefix, 'delay', '0')));
+  function getDelay() {
+    return delay(Number(get(prefix, 'delay', '0')));
   }
 
   return {
     getDelay,
     /**
      * A small helper that returns the given data with the delay from the toolbar
      */
-    json(res: ResponseComposition<any>, ctx: RestContext, data?: any) {
-      return res(ctx.json(data), getDelay(ctx));
+    async json(data?: any) {
+      await getDelay()
+      return HttpResponse.json(data);
     },
     /**
      * Returns a 404 with the delay from the toolbar
      */
-    notFound(res: ResponseComposition<any>, ctx: RestContext) {
-      return res(ctx.status(404), getDelay(ctx));
+    async notFound() {
+      await getDelay()
+      return new HttpResponse(null, { status: 404 });
     },
   };
 };