From a7a17d88e921e5fcd19ee88c4c87b03c1ce84be5 Mon Sep 17 00:00:00 2001
From: Valentin Kruglikov <dev.n@bk.ru>
Date: Sun, 5 Jan 2025 01:52:50 +0700
Subject: [PATCH] README.md
---
README.md | 59 ++++++++++++++++++++++++++++++++++++++
media/chrome-devtools.svg | 1 +
media/chrome-extension.svg | 2 ++
media/msw-logo.svg | 11 +++++++
packages/demo/src/index.ts | 9 ++++--
5 files changed, 80 insertions(+), 2 deletions(-)
create mode 100644 README.md
create mode 100644 media/chrome-devtools.svg
create mode 100644 media/chrome-extension.svg
create mode 100644 media/msw-logo.svg
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9db73e4
--- /dev/null
+++ b/README.md
@@ -0,0 +1,59 @@
+<p align="center">
+ <img src="media/chrome-devtools.svg" width="100" alt="Mock Service Worker logo" />
+ <img src="media/msw-logo.svg" width="100" alt="Mock Service Worker logo" />
+ <img src="media/chrome-extension.svg" width="100" alt="Mock Service Worker logo" />
+</p>
+
+<h1 align="center">Mock Service Worker DevTools Extension</h1>
+
+> **⚠️ WARNING: Pre-release Version**
+> In this pre-release version, every update clears the configuration storage!
+> Be cautious and make sure to save your JSON configurations locally to avoid losing them. 💾
+
+### Overview
+
+This Chrome extension simplifies working with [Mock Service Worker (MSW)](https://mswjs.io/). Instead of manually writing handlers, you can upload JSON files with mock requests, manage multiple configurations, and switch between them seamlessly. 🛠️
+
+### Key Features 🌟
+
+- **📂 JSON Import**: Easily upload JSON files containing mock request configurations.
+- **🔄 Multi-JSON Support**: Switch seamlessly between multiple JSON configurations within the same host environment.
+- **🤝 User-Friendly Interface**: A convenient tool for developers and testers alike, saving time and effort when working with [MSW](https://mswjs.io/).
+- **⚡ Enhanced Productivity**: Focus more on your development and testing tasks without the hassle of manually writing mock handlers.
+
+### Motivation 💡
+
+This extension is a game-changer for both developers and QA testers working with [MSW](https://mswjs.io/). 🧑💻👩💻
+Instead of manually defining handlers for every request, you can now upload pre-configured JSON files, whether it's a single file or multiple files for different scenarios. Switching between configurations is quick and easy, making this tool highly efficient for various development and testing workflows. 🚀
+
+## Get started 🚀
+
+### Installation
+
+```bash
+npm install @msw-devtools/connect --save
+```
+
+### Integrate to existing MSW setup
+
+Just add the response resolver handler from `@msw-devtools/connect`
+
+```javascript
+import { setupWorker } from 'msw/browser'
+import { createResponseResolver } from '@msw-devtools/connect'
+import { http } from 'msw'
+
+const handlers = [
+ http.all('*', createResponseResolver())
+]
+
+setupWorker(...handlers).start({
+ onUnhandledRequest: 'bypass'
+})
+```
+
+### Install Chrome Extension
+
+Install the extension from the Chrome Web Store or load the unpacked extension from the `dist` directory.:
+
+[](https://chrome.google.com/webstore/detail/TODO)
\ No newline at end of file
diff --git a/media/chrome-devtools.svg b/media/chrome-devtools.svg
new file mode 100644
index 0000000..e2ddcdc
--- /dev/null
+++ b/media/chrome-devtools.svg
@@ -0,0 +1 @@
+<svg width="256" height="256" fill="none" xmlns="http://www.w3.org/2000/svg"><style>.conditional{display:none}@media (min-width:1px) and (max-width:23px){#g-1-23{display:block}}@media (min-width:24px) and (max-width:63px){#g-24-63{display:block}}@media (min-width:64px) and (max-width:127px){#g-64-127{display:block}}@media (min-width:128px){#g-128-plus{display:block}}</style><g class="conditional" id="g-1-23"><rect width="256" height="256" rx="53.333" fill="#1A73E8"/><path d="M128 223.997c53.018 0 95.997-42.979 95.997-95.997S181.018 32.003 128 32.003 32.003 74.983 32.003 128c0 53.018 42.98 95.997 95.997 95.997Z" stroke="#fff" stroke-width="16"/><path d="M128 168.32c22.268 0 40.32-18.052 40.32-40.32S150.268 87.68 128 87.68 87.68 105.733 87.68 128s18.052 40.32 40.32 40.32ZM163.124 147.81l-43.733 75.749M93.038 148.14 49.306 72.391M128.417 87.68h87.466" stroke="#fff" stroke-width="16"/></g><g class="conditional" id="g-24-63"><rect width="256" height="256" rx="53.333" fill="#1A73E8"/><path d="M127.999 223.997c53.018 0 95.998-42.979 95.998-95.997s-42.98-95.997-95.998-95.997c-53.017 0-95.997 42.98-95.997 95.997 0 53.018 42.98 95.997 95.997 95.997Z" stroke="#fff" stroke-width="13.333"/><path d="M128 168.32c22.267 0 40.319-18.052 40.319-40.32S150.267 87.68 128 87.68c-22.268 0-40.32 18.052-40.32 40.32s18.052 40.32 40.32 40.32ZM163.123 147.81l-43.733 75.748M93.037 148.14 49.304 72.391M128.416 87.68h87.467" stroke="#fff" stroke-width="10.24"/></g><g class="conditional" id="g-64-127"><g clip-path="url(#clip-64-127)"><rect width="256" height="256" rx="56" fill="#1A73E8"/><path d="m5.917 5.92 244.167 244.166M250.095 5.903 5.907 250.091M178.525 0v256M77.472 0v256M256.001 178.526h-256M255.998 77.474h-256M127.998 199.396c39.432 0 71.397-31.965 71.397-71.396s-31.965-71.397-71.397-71.397c-39.43 0-71.396 31.966-71.396 71.397 0 39.431 31.965 71.396 71.396 71.396ZM-.002 128h256M127.998 0v256" stroke="#fff" stroke-opacity=".3"/><path fill-rule="evenodd" clip-rule="evenodd" d="M128 226c54.124 0 98-43.876 98-98s-43.876-98-98-98-98 43.876-98 98 43.876 98 98 98Z" stroke="#fff" stroke-width="4"/><path d="M128 177.763c27.483 0 49.763-22.28 49.763-49.763 0-27.483-22.28-49.763-49.763-49.763-27.483 0-49.763 22.28-49.763 49.763 0 27.483 22.28 49.763 49.763 49.763Z" stroke="#fff" stroke-width="4"/><path d="M128 165.04c20.456 0 37.039-16.584 37.039-37.04S148.456 90.96 128 90.96c-20.457 0-37.04 16.584-37.04 37.04s16.583 37.04 37.04 37.04ZM171.115 152.925l-42.161 73.026M84.832 152.921 42.671 79.895M128.001 78.237h84.323" stroke="#fff" stroke-width="4"/></g><defs><clipPath id="clip-64-127"><rect width="256" height="256" rx="56" fill="#fff"/></clipPath></defs></g><g class="conditional" id="g-128-plus"><g clip-path="url(#clip-128-plus)"><rect width="256" height="256" rx="56" fill="#1A73E8"/><path d="m5.917 5.92 244.167 244.166M250.095 5.903 5.907 250.091M178.525 0v256M77.472 0v256M256.001 178.526h-256M255.998 77.474h-256M127.998 199.396c39.432 0 71.397-31.965 71.397-71.396s-31.965-71.397-71.397-71.397c-39.43 0-71.396 31.966-71.396 71.397 0 39.431 31.965 71.396 71.396 71.396ZM-.002 128h256M127.998 0v256" stroke="#fff" stroke-opacity=".3" stroke-width=".5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M128 227.368c54.88 0 99.368-44.488 99.368-99.368 0-54.88-44.488-99.368-99.368-99.368-54.88 0-99.368 44.488-99.368 99.368 0 54.88 44.488 99.368 99.368 99.368Z" stroke="#fff" stroke-width="3"/><path d="M128 178.458c27.867 0 50.458-22.591 50.458-50.458 0-27.867-22.591-50.458-50.458-50.458-27.867 0-50.458 22.591-50.458 50.458 0 27.867 22.591 50.458 50.458 50.458Z" stroke="#fff" stroke-width="3"/><path d="M128 167.57c21.853 0 39.569-17.716 39.569-39.57S149.853 88.43 128 88.43c-21.854 0-39.57 17.716-39.57 39.57s17.716 39.57 39.57 39.57ZM171.717 153.273l-42.75 74.046M84.23 153.269 41.48 79.224M128.001 77.542h85.5" stroke="#fff" stroke-width="3"/></g><defs><clipPath id="clip-128-plus"><rect width="256" height="256" rx="56" fill="#fff"/></clipPath></defs></g></svg>
\ No newline at end of file
diff --git a/media/chrome-extension.svg b/media/chrome-extension.svg
new file mode 100644
index 0000000..6f96461
--- /dev/null
+++ b/media/chrome-extension.svg
@@ -0,0 +1,2 @@
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="192" viewBox="0 0 192 192" width="192"><path d="M0 0h192v192H0z" fill="none"/><defs><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" id="a"/></defs><clipPath id="b"><use overflow="visible" xlink:href="#a"/></clipPath><path clip-path="url(#b)" d="M8 20h176v152H8z" fill="#eee"/><path clip-path="url(#b)" d="M116 36H76c-4.42 0-8 3.58-8 8s3.58 8 8 8h40c4.42 0 8-3.58 8-8s-3.58-8-8-8z" fill="#fff"/><g clip-path="url(#b)"><defs><circle cx="96" cy="160" id="c" r="76"/></defs><clipPath id="d"><use overflow="visible" xlink:href="#c"/></clipPath><path clip-path="url(#d)" d="M32.07 84v93.27h34.01L96 125.45h76V84zm0 0v93.27h34.01L96 125.45h76V84z" fill="#DB4437"/><path clip-path="url(#d)" d="M20 236h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24zm0 0h72.34l33.58-33.58v-25.14l-59.84-.01L20 98.24z" fill="#0F9D58"/><path clip-path="url(#d)" d="M96 125.45l29.92 51.82L92.35 236H172V125.45zm0 0l29.92 51.82L92.35 236H172V125.45z" fill="#FFCD40"/><g clip-path="url(#d)"><circle cx="96" cy="160" fill="#F1F1F1" r="34.55"/><circle cx="96" cy="160" fill="#4285F4" r="27.64"/></g></g><path clip-path="url(#b)" d="M8 20h176v76H8z" fill="#212121" fill-opacity=".05"/><path d="M8 95h176v1H8z" fill="#212121" fill-opacity=".02"/><path d="M8 96h176v1H8z" fill="#fff" fill-opacity=".05"/><path d="M116 52H76c-4.25 0-7.72-3.32-7.97-7.5-.02.17-.03.33-.03.5 0 4.42 3.58 8 8 8h40c4.42 0 8-3.58 8-8 0-.17-.01-.33-.03-.5-.25 4.18-3.72 7.5-7.97 7.5zM8 20v1h176v-1H8z" fill="#212121" fill-opacity=".02"/><path d="M76 36h40c4.25 0 7.72 3.32 7.97 7.5.01-.17.03-.33.03-.5 0-4.42-3.58-8-8-8H76c-4.42 0-8 3.58-8 8 0 .17.01.33.03.5.25-4.18 3.72-7.5 7.97-7.5zm96 135H20c-6.6 0-12-5.4-12-12v1c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12v-1c0 6.6-5.4 12-12 12z" fill="#231F20" fill-opacity=".1"/><radialGradient cx="7.502" cy="19.344" gradientUnits="userSpaceOnUse" id="e" r="227.596"><stop offset="0" stop-color="#fff" stop-opacity=".1"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient><path d="M8 20v140c0 6.6 5.4 12 12 12h152c6.6 0 12-5.4 12-12V20H8zm108 32H76c-4.42 0-8-3.58-8-8s3.58-8 8-8h40c4.42 0 8 3.58 8 8s-3.58 8-8 8z" fill="url(#e)"/></svg>
\ No newline at end of file
diff --git a/media/msw-logo.svg b/media/msw-logo.svg
new file mode 100644
index 0000000..9a4ba91
--- /dev/null
+++ b/media/msw-logo.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <title>msw-logo</title>
+ <g id="msw-logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <rect id="BACKGROUND" fill="#000000" fill-rule="nonzero" x="0" y="0" width="128" height="128" rx="24"></rect>
+ <g id="ARROWS" transform="translate(6.467, -0.2985)" fill-rule="nonzero">
+ <path d="M19.0525974,45.8361396 C19.5987729,40.587564 22.2024255,35.8647334 26.2184532,32.6057549 C30.234481,29.3467764 35.3921975,27.7713099 40.6407728,28.3174855 C45.4797409,28.8210365 49.9601106,31.1009895 53.2154963,34.7164617 L87.1143513,72.3649543 C90.6452979,76.2864678 92.4076059,81.3833692 92.1369253,86.5482655 C91.8662445,91.7131615 89.5808194,96.5979303 85.6593058,100.128877 C82.0438338,103.384263 77.3496882,105.1834 72.484593,105.178393 L26.532594,105.130992 C23.2299492,105.127586 20.1147037,103.806159 17.8282981,101.515033 C15.5418935,99.2239076 14.2268949,96.1059431 14.2302943,92.8032983 L14.2302943,92.3426362 L19.0525974,45.8361396 Z M37.5606407,46.5826925 C37.2147797,46.8633562 37.0029076,47.2476763 36.956273,47.6958143 L32.8660594,87.1373928 L72.5031561,87.1783929 C72.862396,87.1783929 73.2105907,87.0625661 73.496423,86.8494716 L73.6149549,86.7522702 C73.9523063,86.4485176 74.1382826,86.0510199 74.1615936,85.6062185 C74.1849047,85.1614166 74.041497,84.7466565 73.7377445,84.4093052 L39.8388895,46.7608126 C39.5641713,46.4557071 39.1860781,46.2633046 38.7777231,46.2208105 C38.3262104,46.1738253 37.9065016,46.3020288 37.5606407,46.5826925 Z" id="BACK" fill="#7A1818"></path>
+ <path d="M26.063604,23.401657 L88.5334052,23.4660904 C91.8360501,23.4694964 94.9512957,24.7909233 97.2377012,27.0820494 C99.5241021,29.3731713 100.8391,32.4911291 100.835707,35.7937665 L100.835707,36.2548849 L100.787626,36.7135403 L94.3037628,99.1900401 C93.9619297,102.474949 92.3282188,105.438378 89.8148507,107.477959 C87.3014833,109.517539 84.0651766,110.506095 80.7802689,110.164262 C77.7489906,109.848822 74.9423496,108.42059 72.9030761,106.155747 L16.8990746,43.957002 C14.6891726,41.5026572 13.5833791,38.3045099 13.7527804,35.0721413 C13.9221816,31.8397726 15.3562149,28.774732 17.8105597,26.5648301 C20.0753982,24.5255603 23.0159475,23.3985273 26.063604,23.401657 Z M38.8298748,41.4136587 L77.7198748,84.6056587 L82.1978748,41.4586587 L38.8298748,41.4136587 Z" id="FRONT" fill="#FF6A33"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/packages/demo/src/index.ts b/packages/demo/src/index.ts
index 88df8fc..7221174 100644
--- a/packages/demo/src/index.ts
+++ b/packages/demo/src/index.ts
@@ -1,8 +1,13 @@
import { setupWorker } from 'msw/browser'
import { createResponseResolver } from '@msw-devtools/connect'
-import { http } from 'msw'
+import { http, HttpResponse } from 'msw'
-const handlers = [http.all('*', createResponseResolver())]
+const handlers = [
+ http.get('/user', () => {
+ return HttpResponse.json({ ping: 'pong' })
+ }),
+ http.all('*', createResponseResolver())
+]
setupWorker(...handlers).start({
onUnhandledRequest: 'bypass',