msw-dev-tool 1.0.17 → 1.0.19

package/dist/esm/ui/DevToolContent/DevToolContentContainer.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React__default from 'react';
 import { createPortal } from 'react-dom';
 import useUiControlStore from '../../store/uiControlStore.js';
 import { HttpControl } from './HttpControl.js';
 
 const DevToolContentContainer = () => {
     const { toggleModal } = useUiControlStore();
-    return createPortal(React.createElement("div", { className: "msw-dev-tool-container" },
-        React.createElement("div", { className: "msw-dev-tool-title-container" },
-            React.createElement("p", null, "MSW DEV TOOL"),
-            React.createElement("button", { onClick: toggleModal }, "X")),
-        React.createElement(HttpControl, null)), document.body);
+    return createPortal(React__default.createElement("div", { className: "msw-dev-tool-container" },
+        React__default.createElement("div", { className: "msw-dev-tool-title-container" },
+            React__default.createElement("p", null, "MSW DEV TOOL"),
+            React__default.createElement("button", { onClick: toggleModal }, "X")),
+        React__default.createElement(HttpControl, null)), document.body);
 };
 
 export { DevToolContentContainer };

package/dist/esm/ui/DevToolContent/DevToolContentContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"DevToolContentContainer.js","sources":["../../../../src/ui/DevToolContent/DevToolContentContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../../store/uiControlStore\";\nimport { HttpControl } from \"./HttpControl\";\n\nexport const DevToolContentContainer = () => {\n  const { toggleModal } = useUiControlStore();\n  return createPortal(\n    <div className=\"msw-dev-tool-container\">\n      <div className=\"msw-dev-tool-title-container\">\n        <p>MSW DEV TOOL</p>\n        <button onClick={toggleModal}>X</button>\n      </div>\n      <HttpControl />\n    </div>,\n    document.body\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,uBAAuB,GAAG,MAAK;AAC1C,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAC5C,IAAA,OAAO,YAAY,CACjB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA;QACrC,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;YAC3C,KAAmB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,cAAA,CAAA;AACnB,YAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,WAAW,EAAA,EAAA,GAAA,CAAY,CACpC;QACN,KAAC,CAAA,aAAA,CAAA,WAAW,OAAG,CACX,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
+{"version":3,"file":"DevToolContentContainer.js","sources":["../../../../src/ui/DevToolContent/DevToolContentContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../../store/uiControlStore\";\nimport { HttpControl } from \"./HttpControl\";\n\nexport const DevToolContentContainer = () => {\n  const { toggleModal } = useUiControlStore();\n  return createPortal(\n    <div className=\"msw-dev-tool-container\">\n      <div className=\"msw-dev-tool-title-container\">\n        <p>MSW DEV TOOL</p>\n        <button onClick={toggleModal}>X</button>\n      </div>\n      <HttpControl />\n    </div>,\n    document.body\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAKO,MAAM,uBAAuB,GAAG,MAAK;AAC1C,IAAA,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AAC5C,IAAA,OAAO,YAAY,CACjBA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,wBAAwB,EAAA;QACrCA,cAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,8BAA8B,EAAA;YAC3CA,cAAmB,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAA,cAAA,CAAA;AACnB,YAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,WAAW,EAAA,EAAA,GAAA,CAAY,CACpC;QACNA,cAAC,CAAA,aAAA,CAAA,WAAW,OAAG,CACX,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}

package/dist/esm/ui/DevToolContent/HttpControl.js

@@ -1,25 +1,15 @@
-import React from 'react';
-import { useHandlerStore } from '../../lib/handlerStore.js';
-import { flatHandlerMap } from '../../utils/handlerMap.js';
-import { dummyUrl } from '../../const/handler.js';
+import React__default from 'react';
+import { flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
+import { useFlattenHandlersTable } from '../../hook/useFlattenHandlersTable.js';
 
 const HttpControl = () => {
-    const { handlerMap } = useHandlerStore();
-    return (React.createElement("div", null, flatHandlerMap(handlerMap).map((flat) => {
-        const { url, method } = flat;
-        if (url === dummyUrl) {
-            return React.createElement(React.Fragment, null);
-        }
-        return (React.createElement(HttpControlElement, { key: `${url}-${method}`, url: url, method: method }));
-    })));
-};
-const HttpControlElement = ({ url, method, }) => {
-    const { getIsChecked, toggleIsChecked } = useHandlerStore();
-    return (React.createElement("div", null,
-        React.createElement("p", null, url),
-        React.createElement("label", null,
-            method,
-            React.createElement("input", { type: "checkbox", checked: getIsChecked(url, method), onChange: () => toggleIsChecked(url, method) }))));
+    const table = useFlattenHandlersTable();
+    return (React__default.createElement("div", null,
+        React__default.createElement("table", null,
+            React__default.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React__default.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React__default.createElement("th", { key: header.id }, header.isPlaceholder
+                ? null
+                : flexRender(header.column.columnDef.header, header.getContext())))))))),
+            React__default.createElement("tbody", null, table.getRowModel().rows.map((row) => (React__default.createElement("tr", { key: row.id }, row.getVisibleCells().map((cell) => (React__default.createElement("td", { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
 };
 
 export { HttpControl };

package/dist/esm/ui/DevToolContent/HttpControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"HttpControl.js","sources":["../../../../src/ui/DevToolContent/HttpControl.tsx"],"sourcesContent":["import React from \"react\";\nimport { useHandlerStore } from \"../../lib\";\nimport { flatHandlerMap } from \"../../utils/handlerMap\";\nimport { dummyUrl } from \"../../const/handler\";\n\nexport const HttpControl = () => {\n  const { handlerMap } = useHandlerStore();\n  return (\n    <div>\n      {flatHandlerMap(handlerMap).map((flat) => {\n        const { url, method } = flat;\n        if (url === dummyUrl) {\n          return <></>;\n        }\n        return (\n          <HttpControlElement\n            key={`${url}-${method}`}\n            url={url}\n            method={method}\n          />\n        );\n      })}\n    </div>\n  );\n};\n\nconst HttpControlElement = ({\n  url,\n  method,\n}: {\n  url: string;\n  method: string;\n}) => {\n  const { getIsChecked, toggleIsChecked } = useHandlerStore();\n  return (\n    <div>\n      <p>{url}</p>\n      <label>\n        {method}\n        <input\n          type=\"checkbox\"\n          checked={getIsChecked(url, method)}\n          onChange={() => toggleIsChecked(url, method)}\n        />\n      </label>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAC;AACzC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EACG,cAAc,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,KAAI;AACvC,QAAA,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;AAC7B,QAAA,IAAI,GAAG,KAAK,QAAQ,EAAE;AACpB,YAAA,OAAO,yCAAK,CAAC;SACd;QACD,QACE,oBAAC,kBAAkB,EAAA,EACjB,GAAG,EAAE,CAAA,EAAG,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,EACvB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,CAAA,EACF;KACH,CAAC,CACE,EACN;AACJ,EAAE;AAEF,MAAM,kBAAkB,GAAG,CAAC,EAC1B,GAAG,EACH,MAAM,GAIP,KAAI;IACH,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;AAC5D,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,IAAA,EAAI,GAAG,CAAK;AACZ,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;YACG,MAAM;AACP,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,YAAY,CAAC,GAAG,EAAE,MAAM,CAAC,EAClC,QAAQ,EAAE,MAAM,eAAe,CAAC,GAAG,EAAE,MAAM,CAAC,EAC5C,CAAA,CACI,CACJ,EACN;AACJ,CAAC;;;;"}
+{"version":3,"file":"HttpControl.js","sources":["../../../../src/ui/DevToolContent/HttpControl.tsx"],"sourcesContent":["import React from \"react\";\nimport { flexRender } from \"@tanstack/react-table\";\nimport { useFlattenHandlersTable } from \"../../hook/useFlattenHandlersTable\";\n\nexport const HttpControl = () => {\n  const table = useFlattenHandlersTable();\n\n  return (\n    <div>\n      <table>\n        <thead>\n          {table.getHeaderGroups().map((headerGroup) => (\n            <tr key={headerGroup.id}>\n              {headerGroup.headers.map((header) => (\n                <th key={header.id}>\n                  {header.isPlaceholder\n                    ? null\n                    : flexRender(\n                        header.column.columnDef.header,\n                        header.getContext()\n                      )}\n                </th>\n              ))}\n            </tr>\n          ))}\n        </thead>\n        <tbody>\n          {table.getRowModel().rows.map((row) => (\n            <tr key={row.id}>\n              {row.getVisibleCells().map((cell) => (\n                <td key={cell.id}>\n                  {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;AAIO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,KAAK,GAAG,uBAAuB,EAAE,CAAC;AAExC,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;AACE,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,MACvCA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,WAAW,CAAC,EAAE,EAAA,EACpB,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAC9BA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,MAAM,CAAC,EAAE,EACf,EAAA,MAAM,CAAC,aAAa;AACnB,kBAAE,IAAI;kBACJ,UAAU,CACR,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,CACF,CACN,CAAC,CACC,CACN,CAAC,CACI;AACR,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChCA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,IACZ,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9BA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,EAAA,EACb,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CACvD,CACN,CAAC,CACC,CACN,CAAC,CACI,CACF,CACJ,EACN;AACJ;;;;"}

package/dist/esm/ui/MSWDevTool.js

@@ -1,13 +1,13 @@
-import React from 'react';
+import React__default from 'react';
 import { createPortal } from 'react-dom';
 import useUiControlStore from '../store/uiControlStore.js';
 import { DevToolContentContainer } from './DevToolContent/DevToolContentContainer.js';
 
 const MSWDevTool = () => {
     const { isOpen, toggleModal } = useUiControlStore();
-    return createPortal(React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "entry-msw-dev-tool", onClick: toggleModal }, "M"),
-        isOpen && React.createElement(DevToolContentContainer, null)), document.body);
+    return createPortal(React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "entry-msw-dev-tool", onClick: toggleModal }, "M"),
+        isOpen && React__default.createElement(DevToolContentContainer, null)), document.body);
 };
 
 export { MSWDevTool };

package/dist/esm/ui/MSWDevTool.js.map

@@ -1 +1 @@
-{"version":3,"file":"MSWDevTool.js","sources":["../../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../store/uiControlStore\";\nimport { DevToolContentContainer } from \"./DevToolContent/DevToolContentContainer\";\n\nexport const MSWDevTool = () => {\n  const { isOpen, toggleModal } = useUiControlStore();\n  return createPortal(\n    <>\n      <div className=\"entry-msw-dev-tool\" onClick={toggleModal}>\n        M\n      </div>\n      {isOpen && <DevToolContentContainer />}\n    </>,\n    document.body\n  );\n};\n"],"names":[],"mappings":";;;;;AAKO,MAAM,UAAU,GAAG,MAAK;IAC7B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACpD,IAAA,OAAO,YAAY,CACjB,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,WAAW,EAElD,EAAA,GAAA,CAAA;QACL,MAAM,IAAI,KAAC,CAAA,aAAA,CAAA,uBAAuB,EAAG,IAAA,CAAA,CACrC,EACH,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
+{"version":3,"file":"MSWDevTool.js","sources":["../../../src/ui/MSWDevTool.tsx"],"sourcesContent":["import React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport useUiControlStore from \"../store/uiControlStore\";\nimport { DevToolContentContainer } from \"./DevToolContent/DevToolContentContainer\";\n\nexport const MSWDevTool = () => {\n  const { isOpen, toggleModal } = useUiControlStore();\n  return createPortal(\n    <>\n      <div className=\"entry-msw-dev-tool\" onClick={toggleModal}>\n        M\n      </div>\n      {isOpen && <DevToolContentContainer />}\n    </>,\n    document.body\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAKO,MAAM,UAAU,GAAG,MAAK;IAC7B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,iBAAiB,EAAE,CAAC;AACpD,IAAA,OAAO,YAAY,CACjBA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAC,OAAO,EAAE,WAAW,EAElD,EAAA,GAAA,CAAA;QACL,MAAM,IAAIA,cAAC,CAAA,aAAA,CAAA,uBAAuB,EAAG,IAAA,CAAA,CACrC,EACH,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}

package/dist/types/index.d.ts

@@ -1,43 +1,17 @@
 import React from 'react';
-import { HttpHandler, RequestHandler, WebSocketHandler } from 'msw';
-import * as zustand from 'zustand';
+import { HttpHandler } from 'msw';
 import { SetupWorker } from 'msw/browser';
 
 declare const MSWDevTool: () => React.ReactPortal;
 
-type HandlerMap = Record<string, Record<string, {
+type FlattenHandler = {
+    id: string;
+    path: string;
+    method: string;
+    enabled: boolean;
     handler: HttpHandler;
-    checked: boolean;
-}>>;
-type Handler = RequestHandler | WebSocketHandler;
+};
 
-interface HandlerStoreState {
-    worker: SetupWorker | null;
-    /**
-     * HTTP handler map
-     */
-    handlerMap: HandlerMap;
-    /**
-     * GraphQL or WebSocketHandler
-     *
-     * **Currently not supported**
-     */
-    restHandlers: Handler[];
-    initMSWDevTool: (worker: SetupWorker) => SetupWorker;
-    setHandlerMap: (handlers: HandlerMap) => HandlerMap;
-    getIsChecked: (url: string, method: string) => boolean;
-    setIsChecked: (url: string, method: string, isChecked: boolean) => void;
-    toggleIsChecked: (url: string, method: string) => void;
-    getWorker: () => SetupWorker;
-    getTotalEnableHandlers: () => (Handler | HttpHandler)[];
-    /**
-     * This has to do with `msw` internal workings.
-     * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.
-     * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!
-     */
-    updateEnableHandlers: () => void;
-}
-declare const useHandlerStore: zustand.UseBoundStore<zustand.StoreApi<HandlerStoreState>>;
 declare const initMSWDevTool: (worker: SetupWorker) => SetupWorker;
 
-export { HandlerMap, MSWDevTool, initMSWDevTool, useHandlerStore };
+export { FlattenHandler, MSWDevTool, initMSWDevTool };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "msw-dev-tool",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -52,6 +52,8 @@
   "dependencies": {
     "@tanstack/react-table": "^8.20.6",
     "@tanstack/table-core": "^8.20.5",
-    "immer": "^10.1.1"
+    "@types/lodash": "^4.17.15",
+    "immer": "^10.1.1",
+    "lodash": "^4.17.21"
   }
 }