msw-dev-tool 1.1.3 → 1.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/index.js +28242 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/msw-dev-tool.css +1 -1
- package/dist/esm/index.js +28226 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/msw-dev-tool.css +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +7 -4
- package/dist/cjs/_virtual/_commonjsHelpers.js +0 -6
- package/dist/cjs/_virtual/_commonjsHelpers.js.map +0 -1
- package/dist/cjs/_virtual/lodash.js +0 -6
- package/dist/cjs/_virtual/lodash.js.map +0 -1
- package/dist/cjs/const/handler.js +0 -10
- package/dist/cjs/const/handler.js.map +0 -1
- package/dist/cjs/hook/useFlattenHandlersTable.js +0 -71
- package/dist/cjs/hook/useFlattenHandlersTable.js.map +0 -1
- package/dist/cjs/lib/handlerStore.js +0 -66
- package/dist/cjs/lib/handlerStore.js.map +0 -1
- package/dist/cjs/lib/util.js +0 -64
- package/dist/cjs/lib/util.js.map +0 -1
- package/dist/cjs/node_modules/@tanstack/react-table/build/lib/index.js +0 -137
- package/dist/cjs/node_modules/@tanstack/react-table/build/lib/index.js.map +0 -1
- package/dist/cjs/node_modules/@tanstack/table-core/build/lib/index.js +0 -3012
- package/dist/cjs/node_modules/@tanstack/table-core/build/lib/index.js.map +0 -1
- package/dist/cjs/node_modules/lodash/lodash.js +0 -17209
- package/dist/cjs/node_modules/lodash/lodash.js.map +0 -1
- package/dist/cjs/store/uiControlStore.js +0 -13
- package/dist/cjs/store/uiControlStore.js.map +0 -1
- package/dist/cjs/ui/DevToolContent/DevToolContentContainer.js +0 -18
- package/dist/cjs/ui/DevToolContent/DevToolContentContainer.js.map +0 -1
- package/dist/cjs/ui/DevToolContent/HttpControl.js +0 -21
- package/dist/cjs/ui/DevToolContent/HttpControl.js.map +0 -1
- package/dist/cjs/ui/MSWDevTool.js +0 -16
- package/dist/cjs/ui/MSWDevTool.js.map +0 -1
- package/dist/cjs/ui/Table/PreviewHandler/KeyValueInputList.js +0 -73
- package/dist/cjs/ui/Table/PreviewHandler/KeyValueInputList.js.map +0 -1
- package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js +0 -22
- package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js.map +0 -1
- package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js +0 -68
- package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js.map +0 -1
- package/dist/cjs/ui/Table/PreviewHandler/index.js +0 -61
- package/dist/cjs/ui/Table/PreviewHandler/index.js.map +0 -1
- package/dist/cjs/utils/url.js +0 -43
- package/dist/cjs/utils/url.js.map +0 -1
- package/dist/esm/_virtual/_commonjsHelpers.js +0 -4
- package/dist/esm/_virtual/_commonjsHelpers.js.map +0 -1
- package/dist/esm/_virtual/lodash.js +0 -4
- package/dist/esm/_virtual/lodash.js.map +0 -1
- package/dist/esm/const/handler.js +0 -7
- package/dist/esm/const/handler.js.map +0 -1
- package/dist/esm/hook/useFlattenHandlersTable.js +0 -69
- package/dist/esm/hook/useFlattenHandlersTable.js.map +0 -1
- package/dist/esm/lib/handlerStore.js +0 -63
- package/dist/esm/lib/handlerStore.js.map +0 -1
- package/dist/esm/lib/util.js +0 -58
- package/dist/esm/lib/util.js.map +0 -1
- package/dist/esm/node_modules/@tanstack/react-table/build/lib/index.js +0 -75
- package/dist/esm/node_modules/@tanstack/react-table/build/lib/index.js.map +0 -1
- package/dist/esm/node_modules/@tanstack/table-core/build/lib/index.js +0 -2970
- package/dist/esm/node_modules/@tanstack/table-core/build/lib/index.js.map +0 -1
- package/dist/esm/node_modules/lodash/lodash.js +0 -17207
- package/dist/esm/node_modules/lodash/lodash.js.map +0 -1
- package/dist/esm/store/uiControlStore.js +0 -11
- package/dist/esm/store/uiControlStore.js.map +0 -1
- package/dist/esm/ui/DevToolContent/DevToolContentContainer.js +0 -16
- package/dist/esm/ui/DevToolContent/DevToolContentContainer.js.map +0 -1
- package/dist/esm/ui/DevToolContent/HttpControl.js +0 -19
- package/dist/esm/ui/DevToolContent/HttpControl.js.map +0 -1
- package/dist/esm/ui/MSWDevTool.js +0 -14
- package/dist/esm/ui/MSWDevTool.js.map +0 -1
- package/dist/esm/ui/Table/PreviewHandler/KeyValueInputList.js +0 -71
- package/dist/esm/ui/Table/PreviewHandler/KeyValueInputList.js.map +0 -1
- package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js +0 -20
- package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js.map +0 -1
- package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js +0 -66
- package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js.map +0 -1
- package/dist/esm/ui/Table/PreviewHandler/index.js +0 -59
- package/dist/esm/ui/Table/PreviewHandler/index.js.map +0 -1
- package/dist/esm/utils/url.js +0 -39
- package/dist/esm/utils/url.js.map +0 -1
@@ -1,13 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var zustand = require('zustand');
|
4
|
-
|
5
|
-
const useUiControlStore = zustand.create((set) => ({
|
6
|
-
isOpen: false,
|
7
|
-
openModal: () => set({ isOpen: true }),
|
8
|
-
closeModal: () => set({ isOpen: false }),
|
9
|
-
toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),
|
10
|
-
}));
|
11
|
-
|
12
|
-
module.exports = useUiControlStore;
|
13
|
-
//# sourceMappingURL=uiControlStore.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"uiControlStore.js","sources":["../../../src/store/uiControlStore.ts"],"sourcesContent":["import { create } from \"zustand\";\n\nexport type UiControlState = {\n isOpen: boolean;\n openModal: () => void;\n closeModal: () => void;\n toggleModal: () => void;\n};\n\nconst useUiControlStore = create<UiControlState>((set) => ({\n isOpen: false,\n openModal: () => set({ isOpen: true }),\n closeModal: () => set({ isOpen: false }),\n toggleModal: () => set((state) => ({ isOpen: !state.isOpen })),\n}));\n\nexport default useUiControlStore;\n"],"names":["create"],"mappings":";;;;AASM,MAAA,iBAAiB,GAAGA,cAAM,CAAiB,CAAC,GAAG,MAAM;AACzD,IAAA,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;IACtC,UAAU,EAAE,MAAM,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;IACxC,WAAW,EAAE,MAAM,GAAG,CAAC,CAAC,KAAK,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;AAC/D,CAAA,CAAC;;;;"}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
var reactDom = require('react-dom');
|
5
|
-
var uiControlStore = require('../../store/uiControlStore.js');
|
6
|
-
var HttpControl = require('./HttpControl.js');
|
7
|
-
|
8
|
-
const DevToolContentContainer = () => {
|
9
|
-
const { toggleModal } = uiControlStore();
|
10
|
-
return reactDom.createPortal(React.createElement("div", { className: "msw-dev-tool-container" },
|
11
|
-
React.createElement("div", { className: "msw-dev-tool-title-container" },
|
12
|
-
React.createElement("p", null, "MSW DEV TOOL"),
|
13
|
-
React.createElement("button", { onClick: toggleModal }, "X")),
|
14
|
-
React.createElement(HttpControl.HttpControl, null)), document.body);
|
15
|
-
};
|
16
|
-
|
17
|
-
exports.DevToolContentContainer = DevToolContentContainer;
|
18
|
-
//# sourceMappingURL=DevToolContentContainer.js.map
|
@@ -1 +0,0 @@
|
|
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":["useUiControlStore","createPortal","HttpControl"],"mappings":";;;;;;;AAKO,MAAM,uBAAuB,GAAG,MAAK;AAC1C,IAAA,MAAM,EAAE,WAAW,EAAE,GAAGA,cAAiB,EAAE,CAAC;AAC5C,IAAA,OAAOC,qBAAY,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,CAAAC,uBAAW,OAAG,CACX,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
var index = require('../../node_modules/@tanstack/react-table/build/lib/index.js');
|
5
|
-
var useFlattenHandlersTable = require('../../hook/useFlattenHandlersTable.js');
|
6
|
-
var handlerStore = require('../../lib/handlerStore.js');
|
7
|
-
|
8
|
-
const HttpControl = () => {
|
9
|
-
const table = useFlattenHandlersTable.useFlattenHandlersTable();
|
10
|
-
const { resetMSWDevTool } = handlerStore.useHandlerStore();
|
11
|
-
return (React.createElement("div", null,
|
12
|
-
React.createElement("button", { onClick: () => resetMSWDevTool() }, "Reset Dev tool"),
|
13
|
-
React.createElement("table", null,
|
14
|
-
React.createElement("thead", null, table.getHeaderGroups().map((headerGroup) => (React.createElement("tr", { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement("th", { key: header.id }, header.isPlaceholder
|
15
|
-
? null
|
16
|
-
: index.flexRender(header.column.columnDef.header, header.getContext())))))))),
|
17
|
-
React.createElement("tbody", null, table.getRowModel().rows.map((row) => (React.createElement("tr", { key: row.id }, row.getVisibleCells().map((cell) => (React.createElement("td", { key: cell.id }, index.flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
|
18
|
-
};
|
19
|
-
|
20
|
-
exports.HttpControl = HttpControl;
|
21
|
-
//# sourceMappingURL=HttpControl.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"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\";\nimport { useHandlerStore } from \"../../lib/handlerStore\";\n\nexport const HttpControl = () => {\n const table = useFlattenHandlersTable();\n const { resetMSWDevTool } = useHandlerStore();\n\n return (\n <div>\n <button onClick={() => resetMSWDevTool()}>Reset Dev tool</button>\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":["useFlattenHandlersTable","useHandlerStore","flexRender"],"mappings":";;;;;;;AAKO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,KAAK,GAAGA,+CAAuB,EAAE,CAAC;AACxC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAGC,4BAAe,EAAE,CAAC;AAE9C,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,MAAM,eAAe,EAAE,EAAyB,EAAA,gBAAA,CAAA;AACjE,QAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA;AACE,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,MACvC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAI,GAAG,EAAE,WAAW,CAAC,EAAE,EAAA,EACpB,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,MAC9B,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,MAAM,CAAC,EAAE,EACf,EAAA,MAAM,CAAC,aAAa;AACnB,kBAAE,IAAI;kBACJC,gBAAU,CACR,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAC9B,MAAM,CAAC,UAAU,EAAE,CACpB,CACF,CACN,CAAC,CACC,CACN,CAAC,CACI;AACR,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EACG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,MAChC,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,GAAG,CAAC,EAAE,IACZ,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,MAC9B,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,GAAG,EAAE,IAAI,CAAC,EAAE,EAAA,EACbA,gBAAU,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;;;;"}
|
@@ -1,16 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
var reactDom = require('react-dom');
|
5
|
-
var uiControlStore = require('../store/uiControlStore.js');
|
6
|
-
var DevToolContentContainer = require('./DevToolContent/DevToolContentContainer.js');
|
7
|
-
|
8
|
-
const MSWDevTool = () => {
|
9
|
-
const { isOpen, toggleModal } = uiControlStore();
|
10
|
-
return reactDom.createPortal(React.createElement(React.Fragment, null,
|
11
|
-
React.createElement("div", { className: "entry-msw-dev-tool", onClick: toggleModal }, "M"),
|
12
|
-
isOpen && React.createElement(DevToolContentContainer.DevToolContentContainer, null)), document.body);
|
13
|
-
};
|
14
|
-
|
15
|
-
exports.MSWDevTool = MSWDevTool;
|
16
|
-
//# sourceMappingURL=MSWDevTool.js.map
|
@@ -1 +0,0 @@
|
|
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":["useUiControlStore","createPortal","DevToolContentContainer"],"mappings":";;;;;;;AAKO,MAAM,UAAU,GAAG,MAAK;IAC7B,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAGA,cAAiB,EAAE,CAAC;AACpD,IAAA,OAAOC,qBAAY,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,CAAAC,+CAAuB,EAAG,IAAA,CAAA,CACrC,EACH,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}
|
@@ -1,73 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
|
5
|
-
const KeyValueInputList = ({ items, setItems, }) => {
|
6
|
-
const [key, setKey] = React.useState("");
|
7
|
-
const [value, setValue] = React.useState("");
|
8
|
-
const handleAdd = () => {
|
9
|
-
if (!key.trim() || !value.trim())
|
10
|
-
return;
|
11
|
-
setItems((prev) => ({
|
12
|
-
...prev,
|
13
|
-
[key]: value,
|
14
|
-
}));
|
15
|
-
setKey("");
|
16
|
-
setValue("");
|
17
|
-
};
|
18
|
-
const handleDelete = (keyToDelete) => {
|
19
|
-
setItems((prev) => {
|
20
|
-
const newItems = { ...prev };
|
21
|
-
delete newItems[keyToDelete];
|
22
|
-
return newItems;
|
23
|
-
});
|
24
|
-
};
|
25
|
-
return (React.createElement("div", null,
|
26
|
-
React.createElement("div", { style: {
|
27
|
-
display: "flex",
|
28
|
-
gap: "8px",
|
29
|
-
width: "100%",
|
30
|
-
alignItems: "center",
|
31
|
-
} },
|
32
|
-
React.createElement("input", { type: "text", value: key, onChange: (e) => setKey(e.target.value), placeholder: "Key", style: {
|
33
|
-
padding: "8px",
|
34
|
-
borderRadius: "4px",
|
35
|
-
border: "1px solid #ccc",
|
36
|
-
width: "100px",
|
37
|
-
} }),
|
38
|
-
React.createElement("input", { type: "text", value: value, onChange: (e) => setValue(e.target.value), placeholder: "Value", style: {
|
39
|
-
padding: "8px",
|
40
|
-
borderRadius: "4px",
|
41
|
-
border: "1px solid #ccc",
|
42
|
-
width: "100px",
|
43
|
-
} }),
|
44
|
-
React.createElement("button", { onClick: handleAdd, style: {
|
45
|
-
padding: "8px 16px",
|
46
|
-
backgroundColor: "#0066ff",
|
47
|
-
color: "white",
|
48
|
-
border: "none",
|
49
|
-
borderRadius: "4px",
|
50
|
-
cursor: "pointer",
|
51
|
-
} }, "Add")),
|
52
|
-
React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(items).map(([key, value]) => (React.createElement("div", { key: key, style: {
|
53
|
-
display: "flex",
|
54
|
-
alignItems: "center",
|
55
|
-
padding: "8px",
|
56
|
-
backgroundColor: "#f5f5f5",
|
57
|
-
borderRadius: "4px",
|
58
|
-
gap: "8px",
|
59
|
-
} },
|
60
|
-
React.createElement("span", { style: { flex: 1 } }, key),
|
61
|
-
React.createElement("span", { style: { flex: 1 } }, value),
|
62
|
-
React.createElement("button", { onClick: () => handleDelete(key), style: {
|
63
|
-
padding: "4px 8px",
|
64
|
-
backgroundColor: "#ff4444",
|
65
|
-
color: "white",
|
66
|
-
border: "none",
|
67
|
-
borderRadius: "4px",
|
68
|
-
cursor: "pointer",
|
69
|
-
} }, "Delete")))))));
|
70
|
-
};
|
71
|
-
|
72
|
-
exports.KeyValueInputList = KeyValueInputList;
|
73
|
-
//# sourceMappingURL=KeyValueInputList.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"KeyValueInputList.js","sources":["../../../../../src/ui/Table/PreviewHandler/KeyValueInputList.tsx"],"sourcesContent":["import React, { useState } from \"react\";\n\ninterface KeyValueInputListProps {\n items: Record<string, string>;\n setItems: React.Dispatch<React.SetStateAction<Record<string, string>>>;\n}\n\nexport const KeyValueInputList = ({\n items,\n setItems,\n}: KeyValueInputListProps) => {\n const [key, setKey] = useState(\"\");\n const [value, setValue] = useState(\"\");\n\n const handleAdd = () => {\n if (!key.trim() || !value.trim()) return;\n\n setItems((prev) => ({\n ...prev,\n [key]: value,\n }));\n setKey(\"\");\n setValue(\"\");\n };\n\n const handleDelete = (keyToDelete: string) => {\n setItems((prev) => {\n const newItems = { ...prev };\n delete newItems[keyToDelete];\n return newItems;\n });\n };\n\n return (\n <div>\n <div\n style={{\n display: \"flex\",\n gap: \"8px\",\n width: \"100%\",\n alignItems: \"center\",\n }}\n >\n <input\n type=\"text\"\n value={key}\n onChange={(e) => setKey(e.target.value)}\n placeholder=\"Key\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100px\",\n }}\n />\n <input\n type=\"text\"\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder=\"Value\"\n style={{\n padding: \"8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100px\",\n }}\n />\n <button\n onClick={handleAdd}\n style={{\n padding: \"8px 16px\",\n backgroundColor: \"#0066ff\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Add\n </button>\n </div>\n\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(items).map(([key, value]) => (\n <div\n key={key}\n style={{\n display: \"flex\",\n alignItems: \"center\",\n padding: \"8px\",\n backgroundColor: \"#f5f5f5\",\n borderRadius: \"4px\",\n gap: \"8px\",\n }}\n >\n <span style={{ flex: 1 }}>{key}</span>\n <span style={{ flex: 1 }}>{value}</span>\n <button\n onClick={() => handleDelete(key)}\n style={{\n padding: \"4px 8px\",\n backgroundColor: \"#ff4444\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n }}\n >\n Delete\n </button>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["useState"],"mappings":"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"}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
|
5
|
-
const PathParamSetter = ({ paramValues, onParamChange, }) => {
|
6
|
-
return (paramValues &&
|
7
|
-
Object.keys(paramValues).length > 0 && (React.createElement(React.Fragment, null,
|
8
|
-
React.createElement("h3", null, "Path Parameters"),
|
9
|
-
React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(paramValues).map(([key, value]) => (React.createElement("div", { key: key, style: { display: "flex", alignItems: "center", gap: "8px" } },
|
10
|
-
React.createElement("label", { htmlFor: `param-${key}`, style: { minWidth: "100px" } },
|
11
|
-
key,
|
12
|
-
":"),
|
13
|
-
React.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), placeholder: "value of path param", style: {
|
14
|
-
padding: "4px 8px",
|
15
|
-
borderRadius: "4px",
|
16
|
-
border: "1px solid #ccc",
|
17
|
-
width: "100%",
|
18
|
-
} }))))))));
|
19
|
-
};
|
20
|
-
|
21
|
-
exports.PathParamSetter = PathParamSetter;
|
22
|
-
//# sourceMappingURL=PathParamSetter.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"PathParamSetter.js","sources":["../../../../../src/ui/Table/PreviewHandler/PathParamSetter.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React from \"react\";\n\nexport const PathParamSetter = ({\n paramValues,\n onParamChange,\n}: {\n paramValues?: PathParams<string>;\n onParamChange: (key: string, value: string) => void;\n}) => {\n return (\n paramValues &&\n Object.keys(paramValues).length > 0 && (\n <>\n <h3>Path Parameters</h3>\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: \"8px\" }}>\n {Object.entries(paramValues).map(([key, value]) => (\n <div\n key={key}\n style={{ display: \"flex\", alignItems: \"center\", gap: \"8px\" }}\n >\n <label htmlFor={`param-${key}`} style={{ minWidth: \"100px\" }}>\n {key}:\n </label>\n <input\n id={`param-${key}`}\n type=\"text\"\n value={value}\n onChange={(e) => onParamChange(key, e.target.value)}\n placeholder=\"value of path param\"\n style={{\n padding: \"4px 8px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n width: \"100%\",\n }}\n />\n </div>\n ))}\n </div>\n </>\n )\n );\n};\n"],"names":[],"mappings":";;;;AAGa,MAAA,eAAe,GAAG,CAAC,EAC9B,WAAW,EACX,aAAa,GAId,KAAI;AACH,IAAA,QACE,WAAW;QACX,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,GAAG,CAAC,KACjC,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;QACE,KAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxB,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EACjE,EAAA,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,MAC5C,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,EAAA;AAE5D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,OAAO,EAAE,CAAS,MAAA,EAAA,GAAG,CAAE,CAAA,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAA;gBACzD,GAAG;AACE,gBAAA,GAAA,CAAA;AACR,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,CAAA,MAAA,EAAS,GAAG,CAAA,CAAE,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,KAAK,aAAa,CAAC,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACnD,WAAW,EAAC,qBAAqB,EACjC,KAAK,EAAE;AACL,oBAAA,OAAO,EAAE,SAAS;AAClB,oBAAA,YAAY,EAAE,KAAK;AACnB,oBAAA,MAAM,EAAE,gBAAgB;AACxB,oBAAA,KAAK,EAAE,MAAM;AACd,iBAAA,EAAA,CACD,CACE,CACP,CAAC,CACE,CACL,CACJ,EACD;AACJ;;;;"}
|
@@ -1,68 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
var url = require('../../../utils/url.js');
|
5
|
-
|
6
|
-
const RequestPreview = ({ url: url$1, paramValues, headers = {}, searchParams = {}, }) => {
|
7
|
-
const [loading, setLoading] = React.useState(false);
|
8
|
-
const [error, setError] = React.useState(null);
|
9
|
-
const [response, setResponse] = React.useState(null);
|
10
|
-
const finalPath = url.getPathWithParams(url$1, paramValues);
|
11
|
-
const searchParamsString = url.getSearchParams(searchParams);
|
12
|
-
const totalUrl = url.getTotalUrl(url$1.origin, finalPath, searchParamsString);
|
13
|
-
const handleFetch = () => {
|
14
|
-
setLoading(true);
|
15
|
-
setError(null);
|
16
|
-
fetch(totalUrl, {
|
17
|
-
headers: {
|
18
|
-
'Content-Type': 'application/json',
|
19
|
-
...headers,
|
20
|
-
},
|
21
|
-
})
|
22
|
-
.then((res) => res.json())
|
23
|
-
.then((data) => {
|
24
|
-
setResponse(data);
|
25
|
-
setLoading(false);
|
26
|
-
})
|
27
|
-
.catch((err) => {
|
28
|
-
setError(err instanceof Error ? err : new Error("Failed to fetch"));
|
29
|
-
setLoading(false);
|
30
|
-
});
|
31
|
-
};
|
32
|
-
return (React.createElement("div", { style: { marginTop: "20px" } },
|
33
|
-
React.createElement("h3", null, "Response"),
|
34
|
-
React.createElement("div", { style: {
|
35
|
-
fontFamily: "monospace",
|
36
|
-
wordBreak: "break-all",
|
37
|
-
} },
|
38
|
-
React.createElement("button", { onClick: handleFetch, disabled: loading, style: {
|
39
|
-
padding: "4px 12px",
|
40
|
-
borderRadius: "4px",
|
41
|
-
border: "1px solid #ccc",
|
42
|
-
backgroundColor: loading ? "#f5f5f5" : "white",
|
43
|
-
cursor: loading ? "not-allowed" : "pointer",
|
44
|
-
} }, loading ? "Fetching..." : "Send Request"),
|
45
|
-
error && (React.createElement("div", { style: {
|
46
|
-
marginTop: "8px",
|
47
|
-
color: "#f44336",
|
48
|
-
backgroundColor: "#f5f5f5",
|
49
|
-
} },
|
50
|
-
"Error: ",
|
51
|
-
error.message)),
|
52
|
-
response && (React.createElement("div", { style: {
|
53
|
-
marginTop: "8px",
|
54
|
-
maxHeight: "200px",
|
55
|
-
overflow: "scroll",
|
56
|
-
backgroundColor: "#f5f5f5",
|
57
|
-
} },
|
58
|
-
React.createElement("pre", { style: {
|
59
|
-
margin: 0,
|
60
|
-
overflow: "auto",
|
61
|
-
borderRadius: "4px",
|
62
|
-
fontFamily: "monospace",
|
63
|
-
wordBreak: "break-all",
|
64
|
-
} }, JSON.stringify(response, null, 2)))))));
|
65
|
-
};
|
66
|
-
|
67
|
-
exports.RequestPreview = RequestPreview;
|
68
|
-
//# sourceMappingURL=RequestPreview.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"RequestPreview.js","sources":["../../../../../src/ui/Table/PreviewHandler/RequestPreview.tsx"],"sourcesContent":["import { PathParams } from \"msw\";\nimport React, { useState } from \"react\";\nimport { getPathWithParams, getSearchParams, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n url,\n paramValues,\n headers = {},\n searchParams = {},\n}: {\n url: URL;\n paramValues?: PathParams<string>;\n headers?: Record<string, string>;\n searchParams?: Record<string, string>;\n}) => {\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState<Error | null>(null);\n const [response, setResponse] = useState<any>(null);\n\n const finalPath = getPathWithParams(url, paramValues);\n const searchParamsString = getSearchParams(searchParams);\n const totalUrl = getTotalUrl(url.origin, finalPath, searchParamsString);\n\n const handleFetch = () => {\n setLoading(true);\n setError(null);\n\n fetch(totalUrl, {\n headers: {\n 'Content-Type': 'application/json',\n ...headers,\n },\n })\n .then((res) => res.json())\n .then((data) => {\n setResponse(data);\n setLoading(false);\n })\n .catch((err) => {\n setError(err instanceof Error ? err : new Error(\"Failed to fetch\"));\n setLoading(false);\n });\n };\n\n return (\n <div style={{ marginTop: \"20px\" }}>\n <h3>Response</h3>\n <div\n style={{\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n <button\n onClick={handleFetch}\n disabled={loading}\n style={{\n padding: \"4px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ccc\",\n backgroundColor: loading ? \"#f5f5f5\" : \"white\",\n cursor: loading ? \"not-allowed\" : \"pointer\",\n }}\n >\n {loading ? \"Fetching...\" : \"Send Request\"}\n </button>\n\n {error && (\n <div\n style={{\n marginTop: \"8px\",\n color: \"#f44336\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n Error: {error.message}\n </div>\n )}\n\n {response && (\n <div\n style={{\n marginTop: \"8px\",\n maxHeight: \"200px\",\n overflow: \"scroll\",\n backgroundColor: \"#f5f5f5\",\n }}\n >\n <pre\n style={{\n margin: 0,\n overflow: \"auto\",\n borderRadius: \"4px\",\n fontFamily: \"monospace\",\n wordBreak: \"break-all\",\n }}\n >\n {JSON.stringify(response, null, 2)}\n </pre>\n </div>\n )}\n </div>\n </div>\n );\n};"],"names":["url","useState","getPathWithParams","getSearchParams","getTotalUrl"],"mappings":"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"}
|
@@ -1,61 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
var React = require('react');
|
4
|
-
var reactDom = require('react-dom');
|
5
|
-
var msw = require('msw');
|
6
|
-
var PathParamSetter = require('./PathParamSetter.js');
|
7
|
-
var RequestPreview = require('./RequestPreview.js');
|
8
|
-
var KeyValueInputList = require('./KeyValueInputList.js');
|
9
|
-
|
10
|
-
const PreviewHandler = ({ handler, onClose }) => {
|
11
|
-
const path = handler.info.path;
|
12
|
-
const url = new URL(String(path), location.href);
|
13
|
-
const { params } = msw.matchRequestUrl(url, path, url.origin);
|
14
|
-
const [paramValues, setParamValues] = React.useState(params
|
15
|
-
? Object.keys(params).reduce((acc, key) => ({
|
16
|
-
...acc,
|
17
|
-
[key]: "",
|
18
|
-
}), {})
|
19
|
-
: undefined);
|
20
|
-
const [headers, setHeaders] = React.useState({});
|
21
|
-
const [searchParams, setSearchParams] = React.useState({});
|
22
|
-
const handleParamChange = (key, value) => {
|
23
|
-
setParamValues((prev) => ({
|
24
|
-
...prev,
|
25
|
-
[key]: value,
|
26
|
-
}));
|
27
|
-
};
|
28
|
-
return reactDom.createPortal(React.createElement("div", { style: {
|
29
|
-
padding: "20px",
|
30
|
-
position: "fixed",
|
31
|
-
zIndex: 9999,
|
32
|
-
backgroundColor: "white",
|
33
|
-
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
34
|
-
borderRadius: "8px",
|
35
|
-
width: "320px",
|
36
|
-
maxHeight: "500px",
|
37
|
-
overflow: "scroll",
|
38
|
-
} },
|
39
|
-
React.createElement("div", { style: { position: "relative" } },
|
40
|
-
React.createElement("button", { onClick: onClose, style: {
|
41
|
-
position: "absolute",
|
42
|
-
right: 0,
|
43
|
-
top: 0,
|
44
|
-
background: "none",
|
45
|
-
border: "none",
|
46
|
-
cursor: "pointer",
|
47
|
-
fontSize: "1.2rem",
|
48
|
-
padding: "4px",
|
49
|
-
} }, "\u2715"),
|
50
|
-
React.createElement("h2", { style: { marginBottom: "20px", paddingRight: "24px" } }, "Handler Preview"),
|
51
|
-
React.createElement("p", { style: { fontSize: "0.8rem", color: "#666", overflow: "scroll" } }, url.toString()),
|
52
|
-
React.createElement(PathParamSetter.PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
|
53
|
-
React.createElement("h3", null, "Search Params"),
|
54
|
-
React.createElement(KeyValueInputList.KeyValueInputList, { items: searchParams, setItems: setSearchParams }),
|
55
|
-
React.createElement("h3", null, "Headers"),
|
56
|
-
React.createElement(KeyValueInputList.KeyValueInputList, { items: headers, setItems: setHeaders }),
|
57
|
-
React.createElement(RequestPreview.RequestPreview, { url: url, paramValues: paramValues, headers: headers, searchParams: searchParams }))), document.body);
|
58
|
-
};
|
59
|
-
|
60
|
-
exports.PreviewHandler = PreviewHandler;
|
61
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/ui/Table/PreviewHandler/index.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { HttpHandler, matchRequestUrl, PathParams } from \"msw\";\nimport { PathParamSetter } from \"./PathParamSetter\";\nimport { RequestPreview } from \"./RequestPreview\";\nimport { KeyValueInputList } from \"./KeyValueInputList\";\n\ninterface PreviewHandlerProps {\n handler: HttpHandler;\n onClose: () => void;\n}\n\nexport const PreviewHandler = ({ handler, onClose }: PreviewHandlerProps) => {\n const path = handler.info.path;\n const url = new URL(String(path), location.href);\n const { params } = matchRequestUrl(url, path, url.origin);\n\n const [paramValues, setParamValues] = useState<\n PathParams<string> | undefined\n >(\n params\n ? Object.keys(params).reduce(\n (acc, key) => ({\n ...acc,\n [key]: \"\",\n }),\n {}\n )\n : undefined\n );\n const [headers, setHeaders] = useState<Record<string, string>>({});\n const [searchParams, setSearchParams] = useState<Record<string, string>>({});\n\n const handleParamChange = (key: string, value: string) => {\n setParamValues((prev) => ({\n ...prev,\n [key]: value,\n }));\n };\n\n return createPortal(\n <div\n style={{\n padding: \"20px\",\n position: \"fixed\",\n zIndex: 9999,\n backgroundColor: \"white\",\n boxShadow: \"0 2px 10px rgba(0, 0, 0, 0.1)\",\n borderRadius: \"8px\",\n width: \"320px\",\n maxHeight: \"500px\",\n overflow: \"scroll\",\n }}\n >\n <div style={{ position: \"relative\" }}>\n <button\n onClick={onClose}\n style={{\n position: \"absolute\",\n right: 0,\n top: 0,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.2rem\",\n padding: \"4px\",\n }}\n >\n ✕\n </button>\n\n <h2 style={{ marginBottom: \"20px\", paddingRight: \"24px\" }}>\n Handler Preview\n </h2>\n <p style={{ fontSize: \"0.8rem\", color: \"#666\", overflow: \"scroll\" }}>\n {url.toString()}\n </p>\n <PathParamSetter\n paramValues={paramValues}\n onParamChange={handleParamChange}\n />\n <h3>Search Params</h3>\n <KeyValueInputList items={searchParams} setItems={setSearchParams} />\n <h3>Headers</h3>\n <KeyValueInputList items={headers} setItems={setHeaders} />\n <RequestPreview\n url={url}\n paramValues={paramValues}\n headers={headers}\n searchParams={searchParams}\n />\n </div>\n </div>,\n document.body\n );\n};\n"],"names":["matchRequestUrl","useState","createPortal","PathParamSetter","KeyValueInputList","RequestPreview"],"mappings":"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"}
|
package/dist/cjs/utils/url.js
DELETED
@@ -1,43 +0,0 @@
|
|
1
|
-
'use strict';
|
2
|
-
|
3
|
-
/**
|
4
|
-
* Replace path parameters with path object and formatted path
|
5
|
-
*/
|
6
|
-
const getPathWithParams = (url, paramValues) => {
|
7
|
-
if (!paramValues)
|
8
|
-
return url.pathname;
|
9
|
-
return url.pathname
|
10
|
-
.split("/")
|
11
|
-
.map((segment) => {
|
12
|
-
if (segment.startsWith(":")) {
|
13
|
-
const paramName = segment.slice(1); // remove ':'
|
14
|
-
return paramValues[paramName] || "undefined"; // replace with param value if exists, otherwise "undefined"
|
15
|
-
}
|
16
|
-
return segment;
|
17
|
-
})
|
18
|
-
.join("/");
|
19
|
-
};
|
20
|
-
const getSearchParams = (searchParams) => {
|
21
|
-
if (!searchParams || Object.keys(searchParams).length === 0)
|
22
|
-
return "";
|
23
|
-
const urlSearchParams = new URLSearchParams();
|
24
|
-
Object.entries(searchParams).forEach(([key, value]) => {
|
25
|
-
urlSearchParams.set(key, value);
|
26
|
-
});
|
27
|
-
return urlSearchParams.toString();
|
28
|
-
};
|
29
|
-
/**
|
30
|
-
* Create full URL string
|
31
|
-
*/
|
32
|
-
const getTotalUrl = (origin, path, searchParams) => {
|
33
|
-
const url = new URL(`${origin}${path}`);
|
34
|
-
if (searchParams) {
|
35
|
-
url.search = searchParams;
|
36
|
-
}
|
37
|
-
return url.toString();
|
38
|
-
};
|
39
|
-
|
40
|
-
exports.getPathWithParams = getPathWithParams;
|
41
|
-
exports.getSearchParams = getSearchParams;
|
42
|
-
exports.getTotalUrl = getTotalUrl;
|
43
|
-
//# sourceMappingURL=url.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"url.js","sources":["../../../src/utils/url.ts"],"sourcesContent":["import { PathParams } from \"msw\";\n\n/**\n * Replace path parameters with path object and formatted path\n */\nexport const getPathWithParams = (\n url: URL,\n paramValues?: PathParams<string>\n): string => {\n if (!paramValues) return url.pathname;\n\n return url.pathname\n .split(\"/\")\n .map((segment) => {\n if (segment.startsWith(\":\")) {\n const paramName = segment.slice(1); // remove ':'\n return paramValues[paramName] || \"undefined\"; // replace with param value if exists, otherwise \"undefined\"\n }\n return segment;\n })\n .join(\"/\");\n};\n\nexport const getSearchParams = (\n searchParams?: Record<string, string>\n): string => {\n if (!searchParams || Object.keys(searchParams).length === 0) return \"\";\n\n const urlSearchParams = new URLSearchParams();\n Object.entries(searchParams).forEach(([key, value]) => {\n urlSearchParams.set(key, value);\n });\n\n return urlSearchParams.toString();\n};\n/**\n * Create full URL string\n */\nexport const getTotalUrl = (\n origin: string,\n path: string,\n searchParams: string\n): string => {\n const url = new URL(`${origin}${path}`);\n if (searchParams) {\n url.search = searchParams;\n }\n return url.toString();\n};\n"],"names":[],"mappings":";;AAEA;;AAEG;MACU,iBAAiB,GAAG,CAC/B,GAAQ,EACR,WAAgC,KACtB;AACV,IAAA,IAAI,CAAC,WAAW;QAAE,OAAO,GAAG,CAAC,QAAQ,CAAC;IAEtC,OAAO,GAAG,CAAC,QAAQ;SAChB,KAAK,CAAC,GAAG,CAAC;AACV,SAAA,GAAG,CAAC,CAAC,OAAO,KAAI;AACf,QAAA,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;YAC3B,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;YACnC,OAAO,WAAW,CAAC,SAAS,CAAC,IAAI,WAAW,CAAC;SAC9C;AACD,QAAA,OAAO,OAAO,CAAC;AACjB,KAAC,CAAC;SACD,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,EAAE;AAEW,MAAA,eAAe,GAAG,CAC7B,YAAqC,KAC3B;AACV,IAAA,IAAI,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,MAAM,KAAK,CAAC;AAAE,QAAA,OAAO,EAAE,CAAC;AAEvE,IAAA,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;AAC9C,IAAA,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,KAAI;AACpD,QAAA,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAClC,KAAC,CAAC,CAAC;AAEH,IAAA,OAAO,eAAe,CAAC,QAAQ,EAAE,CAAC;AACpC,EAAE;AACF;;AAEG;AACU,MAAA,WAAW,GAAG,CACzB,MAAc,EACd,IAAY,EACZ,YAAoB,KACV;IACV,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,CAAG,EAAA,MAAM,CAAG,EAAA,IAAI,CAAE,CAAA,CAAC,CAAC;IACxC,IAAI,YAAY,EAAE;AAChB,QAAA,GAAG,CAAC,MAAM,GAAG,YAAY,CAAC;KAC3B;AACD,IAAA,OAAO,GAAG,CAAC,QAAQ,EAAE,CAAC;AACxB;;;;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"lodash.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"handler.js","sources":["../../../src/const/handler.ts"],"sourcesContent":["import { http } from \"msw\";\n\nexport const dummyUrl = \"/msw-dev-tool-dummy\";\n\nexport const dummyHandler = http.get(dummyUrl, () => {});\n"],"names":[],"mappings":";;AAEO,MAAM,QAAQ,GAAG,sBAAsB;AAEvC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAO,GAAC;;;;"}
|
@@ -1,69 +0,0 @@
|
|
1
|
-
import { useReactTable } from '../node_modules/@tanstack/react-table/build/lib/index.js';
|
2
|
-
import { useHandlerStore } from '../lib/handlerStore.js';
|
3
|
-
import React__default, { useMemo, useState } from 'react';
|
4
|
-
import { PreviewHandler } from '../ui/Table/PreviewHandler/index.js';
|
5
|
-
import { createColumnHelper, getCoreRowModel } from '../node_modules/@tanstack/table-core/build/lib/index.js';
|
6
|
-
|
7
|
-
const useFlattenHandlersTable = () => {
|
8
|
-
const { flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange, } = useHandlerStore();
|
9
|
-
const columnHelper = createColumnHelper();
|
10
|
-
const columns = useMemo(() => {
|
11
|
-
return [
|
12
|
-
columnHelper.accessor("enabled", {
|
13
|
-
header: ({ table }) => (React__default.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
14
|
-
cell: ({ row }) => (React__default.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
15
|
-
}),
|
16
|
-
columnHelper.accessor("path", {
|
17
|
-
header: "Protocol",
|
18
|
-
cell: ({ row }) => {
|
19
|
-
console.log(row.original.path);
|
20
|
-
const protocol = new URL(row.original.path, location.href).protocol;
|
21
|
-
return React__default.createElement("div", { className: "msw-dev-tool-center" }, protocol);
|
22
|
-
},
|
23
|
-
}),
|
24
|
-
columnHelper.accessor("path", {
|
25
|
-
header: "Host",
|
26
|
-
cell: ({ row }) => {
|
27
|
-
const host = new URL(row.original.path, location.href).host;
|
28
|
-
return React__default.createElement("div", { className: "msw-dev-tool-center" }, host);
|
29
|
-
},
|
30
|
-
}),
|
31
|
-
columnHelper.accessor("path", {
|
32
|
-
header: "Path",
|
33
|
-
cell: ({ row }) => {
|
34
|
-
const path = new URL(row.original.path, location.href).pathname;
|
35
|
-
return React__default.createElement("div", { className: "msw-dev-tool-center" }, path);
|
36
|
-
},
|
37
|
-
}),
|
38
|
-
columnHelper.accessor("method", {
|
39
|
-
header: "Method",
|
40
|
-
cell: ({ row }) => (React__default.createElement("div", { className: "msw-dev-tool-center" }, row.original.method)),
|
41
|
-
}),
|
42
|
-
columnHelper.accessor("handler", {
|
43
|
-
header: "Preview",
|
44
|
-
cell: ({ row }) => {
|
45
|
-
const handler = row.original.handler;
|
46
|
-
const [isOpen, setIsOpen] = useState(false);
|
47
|
-
return (React__default.createElement(React__default.Fragment, null,
|
48
|
-
React__default.createElement("button", { onClick: () => setIsOpen(true) }, "Preview"),
|
49
|
-
isOpen && (React__default.createElement(PreviewHandler, { handler: handler, onClose: () => setIsOpen(false) }))));
|
50
|
-
},
|
51
|
-
}),
|
52
|
-
];
|
53
|
-
}, []);
|
54
|
-
const table = useReactTable({
|
55
|
-
columns,
|
56
|
-
data: flattenHandlers,
|
57
|
-
getCoreRowModel: getCoreRowModel(),
|
58
|
-
state: {
|
59
|
-
rowSelection: handlerRowSelection,
|
60
|
-
},
|
61
|
-
onRowSelectionChange: handleHandlerRowSelectionChange,
|
62
|
-
getRowId: (row) => row.id,
|
63
|
-
enableRowSelection: true,
|
64
|
-
});
|
65
|
-
return table;
|
66
|
-
};
|
67
|
-
|
68
|
-
export { useFlattenHandlersTable };
|
69
|
-
//# sourceMappingURL=useFlattenHandlersTable.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"useFlattenHandlersTable.js","sources":["../../../src/hook/useFlattenHandlersTable.tsx"],"sourcesContent":["import {\n ColumnDef,\n createColumnHelper,\n getCoreRowModel,\n useReactTable,\n} from \"@tanstack/react-table\";\nimport { useHandlerStore } from \"../lib/handlerStore\";\nimport { FlattenHandler } from \"../lib\";\nimport React, { useMemo, useState } from \"react\";\nimport { PreviewHandler } from \"../ui/Table/PreviewHandler\";\n\nexport const useFlattenHandlersTable = () => {\n const {\n flattenHandlers,\n handlerRowSelection,\n handleHandlerRowSelectionChange,\n } = useHandlerStore();\n\n const columnHelper = createColumnHelper<FlattenHandler>();\n const columns: ColumnDef<FlattenHandler, any>[] = useMemo(() => {\n return [\n columnHelper.accessor(\"enabled\", {\n header: ({ table }) => (\n <input\n type=\"checkbox\"\n checked={table.getIsAllRowsSelected()}\n onChange={(e) => table.toggleAllRowsSelected(e.target.checked)}\n />\n ),\n cell: ({ row }) => (\n <input\n type=\"checkbox\"\n checked={row.getIsSelected()}\n onChange={(e) => row.toggleSelected(e.target.checked)}\n />\n ),\n }),\n columnHelper.accessor(\"path\", {\n header: \"Protocol\",\n cell: ({ row }) => {\n console.log(row.original.path);\n const protocol = new URL(row.original.path, location.href).protocol;\n return <div className=\"msw-dev-tool-center\">{protocol}</div>;\n },\n }),\n columnHelper.accessor(\"path\", {\n header: \"Host\",\n cell: ({ row }) => {\n const host = new URL(row.original.path,location.href).host;\n return <div className=\"msw-dev-tool-center\">{host}</div>;\n },\n }),\n columnHelper.accessor(\"path\", {\n header: \"Path\",\n cell: ({ row }) => {\n const path = new URL(row.original.path, location.href).pathname;\n return <div className=\"msw-dev-tool-center\">{path}</div>;\n },\n }),\n columnHelper.accessor(\"method\", {\n header: \"Method\",\n cell: ({ row }) => (\n <div className=\"msw-dev-tool-center\">{row.original.method}</div>\n ),\n }),\n columnHelper.accessor(\"handler\", {\n header: \"Preview\",\n cell: ({ row }) => {\n const handler = row.original.handler;\n const [isOpen, setIsOpen] = useState(false);\n return (\n <>\n <button onClick={() => setIsOpen(true)}>Preview</button>\n {isOpen && (\n <PreviewHandler\n handler={handler}\n onClose={() => setIsOpen(false)}\n />\n )}\n </>\n );\n },\n }),\n ];\n }, []);\n\n const table = useReactTable({\n columns,\n data: flattenHandlers,\n getCoreRowModel: getCoreRowModel(),\n state: {\n rowSelection: handlerRowSelection,\n },\n onRowSelectionChange: handleHandlerRowSelectionChange,\n getRowId: (row) => row.id,\n enableRowSelection: true,\n });\n\n return table;\n};\n"],"names":["React"],"mappings":"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"}
|
@@ -1,63 +0,0 @@
|
|
1
|
-
import { create } from 'zustand';
|
2
|
-
import { initMSWDevToolStore, getTotalEnableHandlers, updateEnableHandlers } from './util.js';
|
3
|
-
import { l as lodashExports } from '../node_modules/lodash/lodash.js';
|
4
|
-
|
5
|
-
const useHandlerStore = create((set, get) => ({
|
6
|
-
flattenHandlers: [],
|
7
|
-
worker: null,
|
8
|
-
restHandlers: [],
|
9
|
-
handlerRowSelection: {},
|
10
|
-
initMSWDevTool: (_worker) => {
|
11
|
-
const { worker, flattenHandlers, handlerRowSelection, unsupportedHandlers, } = initMSWDevToolStore(_worker);
|
12
|
-
set({ worker });
|
13
|
-
set({ flattenHandlers });
|
14
|
-
set({
|
15
|
-
handlerRowSelection,
|
16
|
-
});
|
17
|
-
set({ restHandlers: unsupportedHandlers });
|
18
|
-
return worker;
|
19
|
-
},
|
20
|
-
resetMSWDevTool: () => {
|
21
|
-
const _worker = get().getWorker();
|
22
|
-
_worker.resetHandlers();
|
23
|
-
const { worker, flattenHandlers, handlerRowSelection, unsupportedHandlers, } = initMSWDevToolStore(_worker);
|
24
|
-
set({ worker });
|
25
|
-
set({ flattenHandlers });
|
26
|
-
set({
|
27
|
-
handlerRowSelection,
|
28
|
-
});
|
29
|
-
set({ restHandlers: unsupportedHandlers });
|
30
|
-
},
|
31
|
-
handleHandlerRowSelectionChange: (updater) => {
|
32
|
-
const worker = get().getWorker();
|
33
|
-
if (lodashExports.isFunction(updater)) {
|
34
|
-
set(({ handlerRowSelection }) => {
|
35
|
-
const next = updater(handlerRowSelection);
|
36
|
-
const current = get().flattenHandlers.map((handler) => next[handler.id]
|
37
|
-
? { ...handler, enabled: true }
|
38
|
-
: { ...handler, enabled: false });
|
39
|
-
return { handlerRowSelection: next, flattenHandlers: current };
|
40
|
-
});
|
41
|
-
}
|
42
|
-
else {
|
43
|
-
const current = get().flattenHandlers.map((handler) => updater[handler.id]
|
44
|
-
? { ...handler, enabled: true }
|
45
|
-
: { ...handler, enabled: false });
|
46
|
-
set({ handlerRowSelection: updater, flattenHandlers: current });
|
47
|
-
}
|
48
|
-
const flattenHandlers = get().flattenHandlers;
|
49
|
-
const restHandlers = get().restHandlers;
|
50
|
-
const totalEnableHandlers = getTotalEnableHandlers(flattenHandlers, restHandlers);
|
51
|
-
updateEnableHandlers(worker, totalEnableHandlers);
|
52
|
-
},
|
53
|
-
getWorker: () => {
|
54
|
-
const worker = get().worker;
|
55
|
-
if (!worker)
|
56
|
-
throw new Error("Worker is not initialized");
|
57
|
-
return worker;
|
58
|
-
},
|
59
|
-
}));
|
60
|
-
const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;
|
61
|
-
|
62
|
-
export { initMSWDevTool, useHandlerStore };
|
63
|
-
//# sourceMappingURL=handlerStore.js.map
|