msw - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

cli/init.js

@@ -5,5 +5,7 @@ const fs = require('fs')
 const invariant = require('./invariant')
+const { SERVICE_WORKER_BUILD_PATH } = require('../config/constants')
+
 const cwd = process.cwd()
 
-module.exports = function(args) {
+module.exports = function init(args) {
   const { publicDir } = args
@@ -20,10 +22,9 @@ const resolvedPublicDir = path.resolve(cwd, publicDir)
   console.log(
-    chalk.gray('Creating Mock Service Worker at "%s"...'),
+    'Initializing the Mock Service Worker at "%s"...',
     resolvedPublicDir,
   )
 
-  const swSrcFilepath = path.resolve(__dirname, '../mockServiceWorker.js')
-  const swFilename = path.basename(swSrcFilepath)
+  const swFilename = path.basename(SERVICE_WORKER_BUILD_PATH)
   const swDestFilepath = path.resolve(resolvedPublicDir, swFilename)
-  fs.copyFile(swSrcFilepath, swDestFilepath, (error) => {
+  fs.copyFile(SERVICE_WORKER_BUILD_PATH, swDestFilepath, (error) => {
     invariant(typeof error !== null, 'Failed to copy Service Worker. %s', error)
@@ -33,4 +34,6 @@
 ${chalk.green('Service Worker successfully created!')}
-Continue by creating a mocking module and starting the Service Worker:
+${chalk.gray(swDestFilepath)}
 
+Continue by creating a mocking definition module in your application:
+
   ${chalk.cyan.bold('https://redd.gitbook.io/msw/getting-started#define-mocks')}
@@ -37,0 +40,0 @@ `)

lib/index.d.ts

@@ -1,6 +0,6 @@
-export * from './handlers/requestHandler';
 export { composeMocks } from './composeMocks';
 export { MockedResponse, ResponseTransformer, response } from './response';
 export * as context from './context';
+export * from './handlers/requestHandler';
 export { default as rest, restContext, RESTMethods } from './handlers/rest';
 export { default as graphql, graphqlContext } from './handlers/graphql';

package.json

 {
   "name": "msw",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Deviation-less client-side runtime API mocking using Service Workers.",
@@ -27,3 +27,2 @@ "main": "lib/index.js",
     "lib",
-    "mockServiceWorker.js",
     "LICENSE.md",
@@ -33,2 +32,3 @@ "README.md"
   "dependencies": {
+    "@open-draft/until": "^1.0.0",
     "chalk": "^3.0.0",
@@ -51,2 +51,3 @@ "graphql": "^14.6.0",
     "babel-loader": "8.0.6",
+    "babel-minify": "^0.5.1",
     "babel-plugin-ramda": "2.0.0",
@@ -53,0 +54,0 @@ "cross-env": "^7.0.0",

README.md

@@ -37,4 +37,6 @@ <p align="center">
 
-## Quick look
+## Quick start
 
+Install the library in your application:
+
 ```bash
@@ -44,3 +46,3 @@ $ npm install msw --save-dev
 
-Now we have to put the `mockServiceWorker.js` file in your **public directory**. That is usually a directory being served by your server (i.e. `public/` or `dist/`). The placing of the file is done by running the following command from your project's root directory:
+Now we have to copy the Service Worker file that's responsible for requests interception. To do so, run the following command in your project's root directory:
 
@@ -51,8 +53,16 @@ ```bash
 
-> For example, in a Create React App you would have to run: `npx msw init public/`.
+> Provide the path to your public directory instead of the `<PUBLIC_DIR>` placeholder above. Your public directory is usually a directory being served by a server (i.e. `./public` or `./dist`). Running this command will place the `mockServiceWorker.js` file into given directory.
+>
+> For example, in [Create React App](https://github.com/facebook/create-react-app) you would run: `npx msw init ./public`
 
-MSW workflow consist of three phases:
+Once the Service Worker has been copied, we can continue with creating a mocking definition file. For the purpose of this short tutorial we are going to keep all our mocking logic in the `mocks.js` file, but the end file structure is up to you.
 
+```bash
+$ touch mock.js
+```
+
+Open that file and follow the example below to create your first mocking definition:
+
 ```js
-// src/mocks.js
+// mocks.js
 // 1. Import mocking utils
@@ -78,10 +88,12 @@ import { composeMocks, rest } from 'msw'
 
-Import the `mocks.js` module into your application to enable the mocking.
+Import the `mocks.js` module into your application to enable the mocking. You can import the mocking definition file conditionally, so it's never loaded on production:
 
 ```js
 // src/index.js
-import './mocks'
+if (process.env.NODE_ENV === 'development') {
+  require('./mocks')
+}
 ```
 
-Once enabled, any requests matching the defined paths will be intercepted by Service Worker, which would respond with mocked responses.
+Verify the MSW is running by seeing a successful Service Worker activation message in the browser's console. Now any outgoing request of your application are intercepted by the Service Worker, signaled to the client-side library, and matched against the mocking definition. If a request matches any definition, its response is being mocked and returned to the browser.
 
@@ -92,3 +104,3 @@ ![Chrome DevTools Network screenshot with the request mocked](https://github.com/open-draft/msw/blob/master/media/msw-quick-look-network.png?raw=true)
 
-There is a set of step-by-step tutorials to get you started with mocking the API type you need. Please refer to those tutorials below for more detailed instructions.
+We have prepared a set of step-by-step tutorials to get you started with mocking the API type you need. For example, did you know you can mock a GraphQL API using MSW? Find detailed instructions in the respective tutorials below.
 
@@ -95,0 +107,0 @@ ## Tutorials

No alert changes

Improved metrics

Total package byte prevSize

183182

increased by4.95%

Lines of code

4965

increased by3.68%

Number of lines in readme file

110

increased by12.24%

Worsened metrics

Dependency count

7

increased by16.67%

Dev dependency count

24

increased by4.35%

Dependency changes

• + Added@open-draft/until@^1.0.0

• + Added@open-draft/until@1.0.3(transitive)