Update readme

README.md

@@ -77,3 +77,7 @@ Chrome Extension is not yet published to Chrome Web Store, because it's in waiti
 You can only install it downloading the build and loading it as an unpacked extension.
 
 [![Download Chrome Extension](https://img.shields.io/badge/download-chrome_extension_dist-ff6a33)](https://github.com/vkruglikov/msw-devtools-extension/releases/tag/%40msw-devtools%2Fextension%40latest)
+
+### Upload JSON Config to extension
+
+[@msw-devtools/json-config](./packages/json-config/README.md)

package.json

@@ -10,6 +10,7 @@
     "build": "turbo check-types build",
     "changeset": "changeset",
     "dev": "turbo dev",
+    "docs": "turbo docs",
     "clean": "rimraf packages/*/{node_modules,dist,.turbo} node_modules .turbo"
   },
   "author": "Valentin Kruglikov",

packages/extension/README.md

@@ -1,3 +1,4 @@
+![Private](https://img.shields.io/badge/status-private-red?)
 ### Start dev server
 
 ```bash

packages/json-config/README.md

@@ -1,3 +1,44 @@
-### @msw-devtools/json-config
+![Private](https://img.shields.io/badge/status-private-red?)
+## @msw-devtools/json-config
+
+JSON config used by the extension to configure the responses.
+
+### Example config
+```json
+{
+  "version": 1,
+  "name": "example",
+  "handlers": {
+    "/profile": {
+      "method": "GET",
+      "body": {
+        "name": "Valentin",
+        "surname": "Kruglikov",
+        "location": "World"
+      },
+      "init": {
+        "headers": {
+          "Content-Type": "application/json"
+        }
+      }
+    },
+    "/forbidden": {
+      "method": "GET",
+      "body": "403 Forbidden",
+      "init": {
+        "status": 403,
+        "headers": {
+          "Content-Type": "application/json"
+        }
+      }
+    }
+  }
+}
+```
+
+### ZOD Schema 
+[MSW JSON Config reference](./docs/README.md)
+
+### Create your own config
+[DEMO page](https://vkruglikov.github.io/msw-devtools-extension/)
 
-WIP

packages/json-config/docs/README.md

@@ -0,0 +1,29 @@
+# MSW JSON Config reference
+
+## JsonConfigHandler
+
+Response configuration.
+
+_Object containing the following properties:_
+
+| Property          | Description                                        | Type                                                                                                                                                                                                                 |
+| :---------------- | :------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`method`** (\*) | HTTP method to intercept.                          | `'GET' \| 'POST' \| 'PUT' \| 'DELETE' \| 'PATCH' \| 'HEAD' \| 'OPTIONS'`                                                                                                                                             |
+| **`body`** (\*)   | Response's body. Can be a string or a JSON object. | _Object with properties:_<ul></ul> _or_ `string`                                                                                                                                                                     |
+| **`init`** (\*)   | Response init object.                              | _Object with properties:_<ul><li>`headers`: _Object with properties:_<ul><li>`Content-Type`: `string`</li></ul> - Response headers.</li><li>`status`: `number` (_int, ≥100, ≤599_) - Response status code.</li></ul> |
+
+_(\*) Required._
+
+## JsonConfig
+
+JSON configuration schema.
+
+_Object containing the following properties:_
+
+| Property            | Description                                                                                                | Type                                                                                                     |
+| :------------------ | :--------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- |
+| **`version`** (\*)  | Major version of the config. If it changes, the config should not be compatible with the previous version. | `1`                                                                                                      |
+| **`name`** (\*)     | Name of the config. This name displayed in the extension's list of configs. Should be unique per host.     | `string` (_min length: 3, max length: 50_)                                                               |
+| **`handlers`** (\*) | List of handlers to intercept.                                                                             | _Object with dynamic keys of type_ `string` _and values of type_ [JsonConfigHandler](#jsonconfighandler) |
+
+_(\*) Required._

packages/json-config/package.json

@@ -11,10 +11,14 @@
     "dist"
   ],
   "scripts": {
+    "docs": "npx zod2md --entry src/index.ts --title \"MSW JSON Config reference\" --output docs/README.md",
     "build": "microbundle --no-pkg-main -f modern",
     "dev": "microbundle watch --no-pkg-main -f modern"
   },
   "dependencies": {
     "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "zod2md": "^0.1.4"
   }
 }

packages/json-config/src/index.ts

@@ -1,36 +1,5 @@
-import { z } from 'zod'
-
-export const MAJOR_CONFIG_VERSION = 1
-
-export const jsonConfigSchema = z.object({
-  version: z.literal(MAJOR_CONFIG_VERSION),
-  name: z.string().min(3).max(50),
-  handlers: z.record(
-    z.string(),
-    z.object({
-      method: z.enum([
-        'GET',
-        'POST',
-        'PUT',
-        'DELETE',
-        'PATCH',
-        'HEAD',
-        'OPTIONS'
-      ]),
-      body: z.union([z.object({}).catchall(z.any()), z.string()]),
-      init: z.object({
-        headers: z
-          .object({
-            'Content-Type': z.string()
-          })
-          .catchall(z.union([z.string(), z.null()])),
-        status: z.number().int().min(100).max(599).optional()
-      })
-    })
-  )
-})
-
-export type JsonConfig = z.infer<typeof jsonConfigSchema>
+export * from './schemas'
+import { jsonConfigSchema, JsonConfig } from './schemas'
 
 export const validateJsonConfig = (data: any): JsonConfig =>
   jsonConfigSchema.parse(data)

packages/json-config/src/schemas.ts

@@ -0,0 +1,66 @@
+import { z } from 'zod'
+
+const MAJOR_CONFIG_VERSION = 1
+
+export type JsonConfig = z.infer<typeof jsonConfigSchema>
+
+/**
+ * Every time, don't forget to run `npm run docs`
+ */
+export const jsonConfigHandler = z
+  .object({
+    method: z
+      .enum(['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS'])
+      .describe('HTTP method to intercept.'),
+    body: z
+      .union([z.object({}).catchall(z.any()), z.string()])
+      .describe("Response's body. Can be a string or a JSON object."),
+    init: z
+      .object({
+        headers: z
+          .object({
+            'Content-Type': z.string()
+          })
+          .catchall(z.union([z.string(), z.null()]))
+          .describe('Response headers.'),
+        status: z
+          .number()
+          .int()
+          .min(100)
+          .max(599)
+          .optional()
+          .describe('Response status code.')
+      })
+      .describe('Response init object.')
+  })
+  .describe('Response configuration.')
+
+export const jsonConfigSchema = z
+  .object({
+    version: z
+      .literal(MAJOR_CONFIG_VERSION)
+      .describe(
+        'Major version of the config. If it changes, the config should ' +
+          'not be compatible with the previous version.'
+      ),
+    name: z
+      .string()
+      .min(3)
+      .max(50)
+      .describe(
+        "Name of the config. This name displayed in the extension's list " +
+          'of configs. Should be unique per host.'
+      ),
+    handlers: z
+      .record(
+        z
+          .string()
+          .describe(
+            'Url path or full URL to intercept. ' +
+              'Example: "/api", "http://localhost:3000/api"'
+          ),
+        jsonConfigHandler
+      )
+      .describe('List of handlers to intercept.')
+  })
+  .describe('JSON configuration schema.')

packages/wds-extension-client/README.md

@@ -1,3 +1,4 @@
+![Private](https://img.shields.io/badge/status-private-red?)
 ## Webpack dev server chrome extension client
 
 Calls `chrome.runtime.reload()` every time the dev server sends a reload message.