Update readme

.changeset/big-hotels-scream.md

@@ -0,0 +1,5 @@
+---
+'@msw-devtools/demo': patch
+---
+
+Update demo page

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/demo/src/App.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
 import { Button } from '@msw-devtools/extension/src/popup/Button/Button'
-import { JsonData } from 'json-edit-react'
 
 import { JsonEditor } from './components/JsonEditor/JsonEditor'
 
@@ -68,7 +67,16 @@ export const App = () => {
   return (
     <div className={styles.wrapper}>
       <center>
-        <MswLogo />
+        <a
+          target="_blank"
+          style={{
+            all: 'unset',
+            cursor: 'pointer'
+          }}
+          href="https://github.com/vkruglikov/msw-devtools-extension?tab=readme-ov-file#get-started-"
+        >
+          <MswLogo />
+        </a>
         <h1>MSW Devtools Extension</h1>
       </center>
       <h2>

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)