msw-dev-tool 1.0.18 → 1.0.19
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/hook/useFlattenHandlersTable.js +41 -0
- package/dist/cjs/hook/useFlattenHandlersTable.js.map +1 -0
- package/dist/cjs/lib/handlerStore.js +6 -5
- package/dist/cjs/lib/handlerStore.js.map +1 -1
- package/dist/cjs/lib/util.js.map +1 -1
- package/dist/cjs/ui/DevToolContent/HttpControl.js +2 -30
- package/dist/cjs/ui/DevToolContent/HttpControl.js.map +1 -1
- package/dist/esm/hook/useFlattenHandlersTable.js +39 -0
- package/dist/esm/hook/useFlattenHandlersTable.js.map +1 -0
- package/dist/esm/lib/handlerStore.js +6 -5
- package/dist/esm/lib/handlerStore.js.map +1 -1
- package/dist/esm/lib/util.js.map +1 -1
- package/dist/esm/ui/DevToolContent/HttpControl.js +4 -32
- package/dist/esm/ui/DevToolContent/HttpControl.js.map +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var index = require('../node_modules/@tanstack/react-table/build/lib/index.js');
|
|
4
|
+
var handlerStore = require('../lib/handlerStore.js');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var index$1 = require('../node_modules/@tanstack/table-core/build/lib/index.js');
|
|
7
|
+
|
|
8
|
+
const useFlattenHandlersTable = () => {
|
|
9
|
+
const { flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange, } = handlerStore.useHandlerStore();
|
|
10
|
+
const columnHelper = index$1.createColumnHelper();
|
|
11
|
+
const columns = React.useMemo(() => {
|
|
12
|
+
return [
|
|
13
|
+
columnHelper.accessor("enabled", {
|
|
14
|
+
header: ({ table }) => (React.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
|
15
|
+
cell: ({ row }) => (React.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
|
16
|
+
}),
|
|
17
|
+
columnHelper.accessor("path", {
|
|
18
|
+
header: "End point",
|
|
19
|
+
}),
|
|
20
|
+
columnHelper.accessor("method", {
|
|
21
|
+
header: "Method",
|
|
22
|
+
cell: ({ row }) => (React.createElement("div", { className: "msw-dev-tool-center" }, row.original.method)),
|
|
23
|
+
}),
|
|
24
|
+
];
|
|
25
|
+
}, []);
|
|
26
|
+
const table = index.useReactTable({
|
|
27
|
+
columns,
|
|
28
|
+
data: flattenHandlers,
|
|
29
|
+
getCoreRowModel: index$1.getCoreRowModel(),
|
|
30
|
+
state: {
|
|
31
|
+
rowSelection: handlerRowSelection,
|
|
32
|
+
},
|
|
33
|
+
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
34
|
+
getRowId: (row) => row.id,
|
|
35
|
+
enableRowSelection: true,
|
|
36
|
+
});
|
|
37
|
+
return table;
|
|
38
|
+
};
|
|
39
|
+
|
|
40
|
+
exports.useFlattenHandlersTable = useFlattenHandlersTable;
|
|
41
|
+
//# sourceMappingURL=useFlattenHandlersTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 } from \"react\";\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: \"End point\",\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 ];\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":["useHandlerStore","createColumnHelper","useMemo","useReactTable","getCoreRowModel"],"mappings":";;;;;;;AAUO,MAAM,uBAAuB,GAAG,MAAK;IAC1C,MAAM,EACJ,eAAe,EACf,mBAAmB,EACnB,+BAA+B,GAChC,GAAGA,4BAAe,EAAE,CAAC;AAEtB,IAAA,MAAM,YAAY,GAAGC,0BAAkB,EAAkB,CAAC;AAC1D,IAAA,MAAM,OAAO,GAAqCC,aAAO,CAAC,MAAK;QAC7D,OAAO;AACL,YAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE;AAC/B,gBAAA,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAChB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAC9D,CACH;AACD,gBAAA,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MACZ,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GACrD,CACH;aACF,CAAC;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;AAC5B,gBAAA,MAAM,EAAE,WAAW;aACpB,CAAC;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE;AAC9B,gBAAA,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MACZ,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAO,CACjE;aACF,CAAC;SACH,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAGC,mBAAa,CAAC;QAC1B,OAAO;AACP,QAAA,IAAI,EAAE,eAAe;QACrB,eAAe,EAAEC,uBAAe,EAAE;AAClC,QAAA,KAAK,EAAE;AACL,YAAA,YAAY,EAAE,mBAAmB;AAClC,SAAA;AACD,QAAA,oBAAoB,EAAE,+BAA+B;QACrD,QAAQ,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;AACzB,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,KAAK,CAAC;AACf;;;;"}
|
|
@@ -12,15 +12,16 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
|
12
12
|
handlerRowSelection: {},
|
|
13
13
|
initMSWDevTool: (_worker) => {
|
|
14
14
|
const worker = _worker;
|
|
15
|
-
set({ worker });
|
|
16
15
|
const handlers = worker.listHandlers();
|
|
17
16
|
const { flattenHandlers, unsupportedHandlers } = util.convertHandlers(handlers);
|
|
17
|
+
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
|
18
|
+
acc[handler.id] = handler.enabled;
|
|
19
|
+
return acc;
|
|
20
|
+
}, {});
|
|
21
|
+
set({ worker });
|
|
18
22
|
set({ flattenHandlers });
|
|
19
23
|
set({
|
|
20
|
-
handlerRowSelection
|
|
21
|
-
acc[handler.id] = handler.enabled;
|
|
22
|
-
return acc;
|
|
23
|
-
}, {}),
|
|
24
|
+
handlerRowSelection,
|
|
24
25
|
});
|
|
25
26
|
set({ restHandlers: unsupportedHandlers });
|
|
26
27
|
return worker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"handlerStore.js","sources":["../../../src/lib/handlerStore.ts"],"sourcesContent":["import { SetupWorker } from \"msw/browser\";\nimport { create } from \"zustand\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { convertHandlers } from \"./util\";\nimport { dummyHandler } from \"../const/handler\";\nimport { HttpHandler } from \"msw\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n worker: SetupWorker | null;\n /**\n * GraphQL or WebSocketHandler\n *\n * **Currently not supported**\n */\n restHandlers: Handler[];\n flattenHandlers: FlattenHandler[];\n handlerRowSelection: RowSelectionState;\n initMSWDevTool: (worker: SetupWorker) => SetupWorker;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n getTotalEnableHandlers: () => (Handler | HttpHandler)[];\n /**\n * This has to do with `msw` internal workings.\n * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.\n * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!\n */\n updateEnableHandlers: () => void;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const worker = _worker;\n
|
|
1
|
+
{"version":3,"file":"handlerStore.js","sources":["../../../src/lib/handlerStore.ts"],"sourcesContent":["import { SetupWorker } from \"msw/browser\";\nimport { create } from \"zustand\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { convertHandlers } from \"./util\";\nimport { dummyHandler } from \"../const/handler\";\nimport { HttpHandler } from \"msw\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n worker: SetupWorker | null;\n /**\n * GraphQL or WebSocketHandler\n *\n * **Currently not supported**\n */\n restHandlers: Handler[];\n flattenHandlers: FlattenHandler[];\n handlerRowSelection: RowSelectionState;\n initMSWDevTool: (worker: SetupWorker) => SetupWorker;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n getTotalEnableHandlers: () => (Handler | HttpHandler)[];\n /**\n * This has to do with `msw` internal workings.\n * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.\n * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!\n */\n updateEnableHandlers: () => void;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const worker = _worker;\n const handlers = worker.listHandlers() as Handler[];\n const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);\n const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {\n acc[handler.id] = handler.enabled;\n return acc;\n }, {} as RowSelectionState);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n \n return worker;\n },\n handleHandlerRowSelectionChange: (updater) => {\n if (isFunction(updater)) {\n set(({ handlerRowSelection }) => {\n const next = updater(handlerRowSelection);\n const current = get().flattenHandlers.map((handler) =>\n next[handler.id]\n ? { ...handler, enabled: true }\n : { ...handler, enabled: false }\n );\n return { handlerRowSelection: next, flattenHandlers: current };\n });\n } else {\n const current = get().flattenHandlers.map((handler) =>\n updater[handler.id]\n ? { ...handler, enabled: true }\n : { ...handler, enabled: false }\n );\n set({ handlerRowSelection: updater, flattenHandlers: current });\n }\n get().updateEnableHandlers();\n },\n getWorker: () => {\n const worker = get().worker;\n if (!worker) throw new Error(\"Worker is not initialized\");\n return worker;\n },\n getTotalEnableHandlers: () => {\n const checkedHttpHandlers = get()\n .flattenHandlers.filter((h) => h.enabled)\n .map((h) => h.handler);\n const otherProtocolHandlers = get().restHandlers;\n return [...checkedHttpHandlers, ...otherProtocolHandlers];\n },\n updateEnableHandlers: () => {\n const worker = get().getWorker();\n const totalEnableHandlers = get().getTotalEnableHandlers();\n if (totalEnableHandlers.length === 0) {\n worker.resetHandlers(dummyHandler);\n return;\n }\n\n worker.resetHandlers(...totalEnableHandlers);\n },\n}));\n\nexport const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;\n"],"names":["create","convertHandlers","isFunction","dummyHandler"],"mappings":";;;;;;;AA8BO,MAAM,eAAe,GAAGA,cAAM,CAAoB,CAAC,GAAG,EAAE,GAAG,MAAM;AACtE,IAAA,eAAe,EAAE,EAAE;AACnB,IAAA,MAAM,EAAE,IAAI;AACZ,IAAA,YAAY,EAAE,EAAE;AAChB,IAAA,mBAAmB,EAAE,EAAE;AACvB,IAAA,cAAc,EAAE,CAAC,OAAO,KAAI;QAC1B,MAAM,MAAM,GAAG,OAAO,CAAC;AACvB,QAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,EAAe,CAAC;QACpD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAGC,oBAAe,CAAC,QAAQ,CAAC,CAAC;QAC3E,MAAM,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;YAClE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,YAAA,OAAO,GAAG,CAAC;SACZ,EAAE,EAAuB,CAAC,CAAC;AAE5B,QAAA,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;AAChB,QAAA,GAAG,CAAC,EAAE,eAAe,EAAE,CAAC,CAAC;AACzB,QAAA,GAAG,CAAC;YACF,mBAAmB;AACpB,SAAA,CAAC,CAAC;AACH,QAAA,GAAG,CAAC,EAAE,YAAY,EAAE,mBAAmB,EAAE,CAAC,CAAC;AAE3C,QAAA,OAAO,MAAM,CAAC;KACf;AACD,IAAA,+BAA+B,EAAE,CAAC,OAAO,KAAI;AAC3C,QAAA,IAAIC,+BAAU,CAAC,OAAO,CAAC,EAAE;AACvB,YAAA,GAAG,CAAC,CAAC,EAAE,mBAAmB,EAAE,KAAI;AAC9B,gBAAA,MAAM,IAAI,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAC1C,gBAAA,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,KAChD,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;sBACZ,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;sBAC7B,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CACnC,CAAC;gBACF,OAAO,EAAE,mBAAmB,EAAE,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC;AACjE,aAAC,CAAC,CAAC;SACJ;aAAM;AACL,YAAA,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,OAAO,KAChD,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC;kBACf,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;kBAC7B,EAAE,GAAG,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CACnC,CAAC;YACF,GAAG,CAAC,EAAE,mBAAmB,EAAE,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,CAAC,CAAC;SACjE;AACD,QAAA,GAAG,EAAE,CAAC,oBAAoB,EAAE,CAAC;KAC9B;IACD,SAAS,EAAE,MAAK;AACd,QAAA,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC;AAC5B,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;AAC1D,QAAA,OAAO,MAAM,CAAC;KACf;IACD,sBAAsB,EAAE,MAAK;QAC3B,MAAM,mBAAmB,GAAG,GAAG,EAAE;aAC9B,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;aACxC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;AACzB,QAAA,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC;AACjD,QAAA,OAAO,CAAC,GAAG,mBAAmB,EAAE,GAAG,qBAAqB,CAAC,CAAC;KAC3D;IACD,oBAAoB,EAAE,MAAK;AACzB,QAAA,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;AACjC,QAAA,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,sBAAsB,EAAE,CAAC;AAC3D,QAAA,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,YAAA,MAAM,CAAC,aAAa,CAACC,oBAAY,CAAC,CAAC;YACnC,OAAO;SACR;AAED,QAAA,MAAM,CAAC,aAAa,CAAC,GAAG,mBAAmB,CAAC,CAAC;KAC9C;AACF,CAAA,CAAC,EAAE;AAES,MAAA,cAAc,GAAG,eAAe,CAAC,QAAQ,EAAE,CAAC;;;;;"}
|
package/dist/cjs/lib/util.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\n\nexport const getRowId = ({ path, method }: { path: string; method: string }) =>\n JSON.stringify({\n path,\n method,\n });\n\nexport const getObjFromRowId = (rowId: string) =>\n JSON.parse(rowId) as { path: string; method: string };\n\nexport const convertHandlers = (handlers: Handler[]) => {\n const unsupportedHandlers: Handler[] = [];\n const flattenHandlers: FlattenHandler[] = handlers.reduce((acc, _handler) => {\n // Current, GraphQL & WebSocketHandler is not supported.\n const handler = _handler as HttpHandler;\n if (!(\"info\" in handler && handler.info.method && handler.info.path)) {\n unsupportedHandlers.push(handler);\n return acc;\n }\n const { method: _method, path: _path } = handler.info;\n const [method, path] = [_method.toString(), _path.toString()];\n acc.push({\n id: getRowId({ path, method }),\n path,\n method,\n enabled: true,\n handler,\n });\n return acc;\n }, [] as FlattenHandler[]);\n return { flattenHandlers, unsupportedHandlers };\n};\n"],"names":[],"mappings":";;AAGa,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAoC,KACzE,IAAI,CAAC,SAAS,CAAC;IACb,IAAI;IACJ,MAAM;AACP,CAAA,EAAE;AAKQ,MAAA,eAAe,GAAG,CAAC,QAAmB,KAAI;IACrD,MAAM,mBAAmB,GAAc,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAqB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;;QAE1E,MAAM,OAAO,GAAG,QAAuB,CAAC;AACxC,QAAA,IAAI,EAAE,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACpE,YAAA,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,OAAO,GAAG,CAAC;SACZ;
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\n\nexport const getRowId = ({ path, method }: { path: string; method: string }) =>\n JSON.stringify({\n path,\n method,\n });\n\nexport const getObjFromRowId = (rowId: string) =>\n JSON.parse(rowId) as { path: string; method: string };\n\nexport const convertHandlers = (handlers: Handler[]) => {\n const unsupportedHandlers: Handler[] = [];\n const flattenHandlers: FlattenHandler[] = handlers.reduce((acc, _handler) => {\n // Current, GraphQL & WebSocketHandler is not supported.\n const handler = _handler as HttpHandler;\n if (!(\"info\" in handler && handler.info.method && handler.info.path)) {\n unsupportedHandlers.push(handler);\n return acc;\n }\n\n const { method: _method, path: _path } = handler.info;\n const [method, path] = [_method.toString(), _path.toString()];\n acc.push({\n id: getRowId({ path, method }),\n path,\n method,\n enabled: true,\n handler,\n });\n\n return acc;\n }, [] as FlattenHandler[]);\n return { flattenHandlers, unsupportedHandlers };\n};\n"],"names":[],"mappings":";;AAGa,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAoC,KACzE,IAAI,CAAC,SAAS,CAAC;IACb,IAAI;IACJ,MAAM;AACP,CAAA,EAAE;AAKQ,MAAA,eAAe,GAAG,CAAC,QAAmB,KAAI;IACrD,MAAM,mBAAmB,GAAc,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAqB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;;QAE1E,MAAM,OAAO,GAAG,QAAuB,CAAC;AACxC,QAAA,IAAI,EAAE,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACpE,YAAA,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,OAAO,GAAG,CAAC;SACZ;AAED,QAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;AACtD,QAAA,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9D,GAAG,CAAC,IAAI,CAAC;YACP,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC9B,IAAI;YACJ,MAAM;AACN,YAAA,OAAO,EAAE,IAAI;YACb,OAAO;AACR,SAAA,CAAC,CAAC;AAEH,QAAA,OAAO,GAAG,CAAC;KACZ,EAAE,EAAsB,CAAC,CAAC;AAC3B,IAAA,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC;AAClD;;;;;"}
|
|
@@ -2,38 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
4
|
var index = require('../../node_modules/@tanstack/react-table/build/lib/index.js');
|
|
5
|
-
var
|
|
6
|
-
var index$1 = require('../../node_modules/@tanstack/table-core/build/lib/index.js');
|
|
5
|
+
var useFlattenHandlersTable = require('../../hook/useFlattenHandlersTable.js');
|
|
7
6
|
|
|
8
7
|
const HttpControl = () => {
|
|
9
|
-
const
|
|
10
|
-
const columnHelper = index$1.createColumnHelper();
|
|
11
|
-
const columns = React.useMemo(() => {
|
|
12
|
-
return [
|
|
13
|
-
columnHelper.accessor("enabled", {
|
|
14
|
-
header: ({ table }) => (React.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
|
15
|
-
cell: ({ row }) => (React.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
|
16
|
-
}),
|
|
17
|
-
columnHelper.accessor("path", {
|
|
18
|
-
header: "End point",
|
|
19
|
-
}),
|
|
20
|
-
columnHelper.accessor("method", {
|
|
21
|
-
header: "Method",
|
|
22
|
-
cell: ({ row }) => (React.createElement("div", { className: "msw-dev-tool-center" }, row.original.enabled)),
|
|
23
|
-
}),
|
|
24
|
-
];
|
|
25
|
-
}, []);
|
|
26
|
-
const table = index.useReactTable({
|
|
27
|
-
columns,
|
|
28
|
-
data: flattenHandlers,
|
|
29
|
-
getCoreRowModel: index$1.getCoreRowModel(),
|
|
30
|
-
state: {
|
|
31
|
-
rowSelection: handlerRowSelection,
|
|
32
|
-
},
|
|
33
|
-
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
34
|
-
getRowId: (row) => row.id,
|
|
35
|
-
enableRowSelection: true,
|
|
36
|
-
});
|
|
8
|
+
const table = useFlattenHandlersTable.useFlattenHandlersTable();
|
|
37
9
|
return (React.createElement("div", null,
|
|
38
10
|
React.createElement("table", null,
|
|
39
11
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HttpControl.js","sources":["../../../../src/ui/DevToolContent/HttpControl.tsx"],"sourcesContent":["import React
|
|
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\";\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":["useFlattenHandlersTable","flexRender"],"mappings":";;;;;;AAIO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,KAAK,GAAGA,+CAAuB,EAAE,CAAC;AAExC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,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;;;;"}
|
|
@@ -0,0 +1,39 @@
|
|
|
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 } from 'react';
|
|
4
|
+
import { createColumnHelper, getCoreRowModel } from '../node_modules/@tanstack/table-core/build/lib/index.js';
|
|
5
|
+
|
|
6
|
+
const useFlattenHandlersTable = () => {
|
|
7
|
+
const { flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange, } = useHandlerStore();
|
|
8
|
+
const columnHelper = createColumnHelper();
|
|
9
|
+
const columns = useMemo(() => {
|
|
10
|
+
return [
|
|
11
|
+
columnHelper.accessor("enabled", {
|
|
12
|
+
header: ({ table }) => (React__default.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
|
13
|
+
cell: ({ row }) => (React__default.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
|
14
|
+
}),
|
|
15
|
+
columnHelper.accessor("path", {
|
|
16
|
+
header: "End point",
|
|
17
|
+
}),
|
|
18
|
+
columnHelper.accessor("method", {
|
|
19
|
+
header: "Method",
|
|
20
|
+
cell: ({ row }) => (React__default.createElement("div", { className: "msw-dev-tool-center" }, row.original.method)),
|
|
21
|
+
}),
|
|
22
|
+
];
|
|
23
|
+
}, []);
|
|
24
|
+
const table = useReactTable({
|
|
25
|
+
columns,
|
|
26
|
+
data: flattenHandlers,
|
|
27
|
+
getCoreRowModel: getCoreRowModel(),
|
|
28
|
+
state: {
|
|
29
|
+
rowSelection: handlerRowSelection,
|
|
30
|
+
},
|
|
31
|
+
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
32
|
+
getRowId: (row) => row.id,
|
|
33
|
+
enableRowSelection: true,
|
|
34
|
+
});
|
|
35
|
+
return table;
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export { useFlattenHandlersTable };
|
|
39
|
+
//# sourceMappingURL=useFlattenHandlersTable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 } from \"react\";\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: \"End point\",\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 ];\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":";;;;;AAUO,MAAM,uBAAuB,GAAG,MAAK;IAC1C,MAAM,EACJ,eAAe,EACf,mBAAmB,EACnB,+BAA+B,GAChC,GAAG,eAAe,EAAE,CAAC;AAEtB,IAAA,MAAM,YAAY,GAAG,kBAAkB,EAAkB,CAAC;AAC1D,IAAA,MAAM,OAAO,GAAqC,OAAO,CAAC,MAAK;QAC7D,OAAO;AACL,YAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE;AAC/B,gBAAA,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,MAChBA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,KAAK,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GAC9D,CACH;AACD,gBAAA,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MACZA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,GAAG,CAAC,aAAa,EAAE,EAC5B,QAAQ,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,GACrD,CACH;aACF,CAAC;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;AAC5B,gBAAA,MAAM,EAAE,WAAW;aACpB,CAAC;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE;AAC9B,gBAAA,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,MACZA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAO,CACjE;aACF,CAAC;SACH,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,OAAO;AACP,QAAA,IAAI,EAAE,eAAe;QACrB,eAAe,EAAE,eAAe,EAAE;AAClC,QAAA,KAAK,EAAE;AACL,YAAA,YAAY,EAAE,mBAAmB;AAClC,SAAA;AACD,QAAA,oBAAoB,EAAE,+BAA+B;QACrD,QAAQ,EAAE,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE;AACzB,QAAA,kBAAkB,EAAE,IAAI;AACzB,KAAA,CAAC,CAAC;AAEH,IAAA,OAAO,KAAK,CAAC;AACf;;;;"}
|
|
@@ -10,15 +10,16 @@ const useHandlerStore = create((set, get) => ({
|
|
|
10
10
|
handlerRowSelection: {},
|
|
11
11
|
initMSWDevTool: (_worker) => {
|
|
12
12
|
const worker = _worker;
|
|
13
|
-
set({ worker });
|
|
14
13
|
const handlers = worker.listHandlers();
|
|
15
14
|
const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);
|
|
15
|
+
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
|
16
|
+
acc[handler.id] = handler.enabled;
|
|
17
|
+
return acc;
|
|
18
|
+
}, {});
|
|
19
|
+
set({ worker });
|
|
16
20
|
set({ flattenHandlers });
|
|
17
21
|
set({
|
|
18
|
-
handlerRowSelection
|
|
19
|
-
acc[handler.id] = handler.enabled;
|
|
20
|
-
return acc;
|
|
21
|
-
}, {}),
|
|
22
|
+
handlerRowSelection,
|
|
22
23
|
});
|
|
23
24
|
set({ restHandlers: unsupportedHandlers });
|
|
24
25
|
return worker;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"handlerStore.js","sources":["../../../src/lib/handlerStore.ts"],"sourcesContent":["import { SetupWorker } from \"msw/browser\";\nimport { create } from \"zustand\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { convertHandlers } from \"./util\";\nimport { dummyHandler } from \"../const/handler\";\nimport { HttpHandler } from \"msw\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n worker: SetupWorker | null;\n /**\n * GraphQL or WebSocketHandler\n *\n * **Currently not supported**\n */\n restHandlers: Handler[];\n flattenHandlers: FlattenHandler[];\n handlerRowSelection: RowSelectionState;\n initMSWDevTool: (worker: SetupWorker) => SetupWorker;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n getTotalEnableHandlers: () => (Handler | HttpHandler)[];\n /**\n * This has to do with `msw` internal workings.\n * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.\n * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!\n */\n updateEnableHandlers: () => void;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const worker = _worker;\n
|
|
1
|
+
{"version":3,"file":"handlerStore.js","sources":["../../../src/lib/handlerStore.ts"],"sourcesContent":["import { SetupWorker } from \"msw/browser\";\nimport { create } from \"zustand\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { convertHandlers } from \"./util\";\nimport { dummyHandler } from \"../const/handler\";\nimport { HttpHandler } from \"msw\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n worker: SetupWorker | null;\n /**\n * GraphQL or WebSocketHandler\n *\n * **Currently not supported**\n */\n restHandlers: Handler[];\n flattenHandlers: FlattenHandler[];\n handlerRowSelection: RowSelectionState;\n initMSWDevTool: (worker: SetupWorker) => SetupWorker;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n getTotalEnableHandlers: () => (Handler | HttpHandler)[];\n /**\n * This has to do with `msw` internal workings.\n * If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.\n * Therefore, I proposed the `clear` method, but unfortunately it was not accepted!\n */\n updateEnableHandlers: () => void;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const worker = _worker;\n const handlers = worker.listHandlers() as Handler[];\n const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);\n const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {\n acc[handler.id] = handler.enabled;\n return acc;\n }, {} as RowSelectionState);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n \n return worker;\n },\n handleHandlerRowSelectionChange: (updater) => {\n if (isFunction(updater)) {\n set(({ handlerRowSelection }) => {\n const next = updater(handlerRowSelection);\n const current = get().flattenHandlers.map((handler) =>\n next[handler.id]\n ? { ...handler, enabled: true }\n : { ...handler, enabled: false }\n );\n return { handlerRowSelection: next, flattenHandlers: current };\n });\n } else {\n const current = get().flattenHandlers.map((handler) =>\n updater[handler.id]\n ? { ...handler, enabled: true }\n : { ...handler, enabled: false }\n );\n set({ handlerRowSelection: updater, flattenHandlers: current });\n }\n get().updateEnableHandlers();\n },\n getWorker: () => {\n const worker = get().worker;\n if (!worker) throw new Error(\"Worker is not initialized\");\n return worker;\n },\n getTotalEnableHandlers: () => {\n const checkedHttpHandlers = get()\n .flattenHandlers.filter((h) => h.enabled)\n .map((h) => h.handler);\n const otherProtocolHandlers = get().restHandlers;\n return [...checkedHttpHandlers, ...otherProtocolHandlers];\n },\n updateEnableHandlers: () => {\n const worker = get().getWorker();\n const totalEnableHandlers = get().getTotalEnableHandlers();\n if (totalEnableHandlers.length === 0) {\n worker.resetHandlers(dummyHandler);\n return;\n }\n\n worker.resetHandlers(...totalEnableHandlers);\n },\n}));\n\nexport const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;\n"],"names":["isFunction"],"mappings":"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"}
|
package/dist/esm/lib/util.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\n\nexport const getRowId = ({ path, method }: { path: string; method: string }) =>\n JSON.stringify({\n path,\n method,\n });\n\nexport const getObjFromRowId = (rowId: string) =>\n JSON.parse(rowId) as { path: string; method: string };\n\nexport const convertHandlers = (handlers: Handler[]) => {\n const unsupportedHandlers: Handler[] = [];\n const flattenHandlers: FlattenHandler[] = handlers.reduce((acc, _handler) => {\n // Current, GraphQL & WebSocketHandler is not supported.\n const handler = _handler as HttpHandler;\n if (!(\"info\" in handler && handler.info.method && handler.info.path)) {\n unsupportedHandlers.push(handler);\n return acc;\n }\n const { method: _method, path: _path } = handler.info;\n const [method, path] = [_method.toString(), _path.toString()];\n acc.push({\n id: getRowId({ path, method }),\n path,\n method,\n enabled: true,\n handler,\n });\n return acc;\n }, [] as FlattenHandler[]);\n return { flattenHandlers, unsupportedHandlers };\n};\n"],"names":[],"mappings":"AAGa,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAoC,KACzE,IAAI,CAAC,SAAS,CAAC;IACb,IAAI;IACJ,MAAM;AACP,CAAA,EAAE;AAKQ,MAAA,eAAe,GAAG,CAAC,QAAmB,KAAI;IACrD,MAAM,mBAAmB,GAAc,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAqB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;;QAE1E,MAAM,OAAO,GAAG,QAAuB,CAAC;AACxC,QAAA,IAAI,EAAE,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACpE,YAAA,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,OAAO,GAAG,CAAC;SACZ;
|
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\n\nexport const getRowId = ({ path, method }: { path: string; method: string }) =>\n JSON.stringify({\n path,\n method,\n });\n\nexport const getObjFromRowId = (rowId: string) =>\n JSON.parse(rowId) as { path: string; method: string };\n\nexport const convertHandlers = (handlers: Handler[]) => {\n const unsupportedHandlers: Handler[] = [];\n const flattenHandlers: FlattenHandler[] = handlers.reduce((acc, _handler) => {\n // Current, GraphQL & WebSocketHandler is not supported.\n const handler = _handler as HttpHandler;\n if (!(\"info\" in handler && handler.info.method && handler.info.path)) {\n unsupportedHandlers.push(handler);\n return acc;\n }\n\n const { method: _method, path: _path } = handler.info;\n const [method, path] = [_method.toString(), _path.toString()];\n acc.push({\n id: getRowId({ path, method }),\n path,\n method,\n enabled: true,\n handler,\n });\n\n return acc;\n }, [] as FlattenHandler[]);\n return { flattenHandlers, unsupportedHandlers };\n};\n"],"names":[],"mappings":"AAGa,MAAA,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAoC,KACzE,IAAI,CAAC,SAAS,CAAC;IACb,IAAI;IACJ,MAAM;AACP,CAAA,EAAE;AAKQ,MAAA,eAAe,GAAG,CAAC,QAAmB,KAAI;IACrD,MAAM,mBAAmB,GAAc,EAAE,CAAC;IAC1C,MAAM,eAAe,GAAqB,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,QAAQ,KAAI;;QAE1E,MAAM,OAAO,GAAG,QAAuB,CAAC;AACxC,QAAA,IAAI,EAAE,MAAM,IAAI,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;AACpE,YAAA,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,YAAA,OAAO,GAAG,CAAC;SACZ;AAED,QAAA,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC;AACtD,QAAA,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC9D,GAAG,CAAC,IAAI,CAAC;YACP,EAAE,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;YAC9B,IAAI;YACJ,MAAM;AACN,YAAA,OAAO,EAAE,IAAI;YACb,OAAO;AACR,SAAA,CAAC,CAAC;AAEH,QAAA,OAAO,GAAG,CAAC;KACZ,EAAE,EAAsB,CAAC,CAAC;AAC3B,IAAA,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,CAAC;AAClD;;;;"}
|
|
@@ -1,37 +1,9 @@
|
|
|
1
|
-
import React__default
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { createColumnHelper, getCoreRowModel } from '../../node_modules/@tanstack/table-core/build/lib/index.js';
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
|
|
3
|
+
import { useFlattenHandlersTable } from '../../hook/useFlattenHandlersTable.js';
|
|
5
4
|
|
|
6
5
|
const HttpControl = () => {
|
|
7
|
-
const
|
|
8
|
-
const columnHelper = createColumnHelper();
|
|
9
|
-
const columns = useMemo(() => {
|
|
10
|
-
return [
|
|
11
|
-
columnHelper.accessor("enabled", {
|
|
12
|
-
header: ({ table }) => (React__default.createElement("input", { type: "checkbox", checked: table.getIsAllRowsSelected(), onChange: (e) => table.toggleAllRowsSelected(e.target.checked) })),
|
|
13
|
-
cell: ({ row }) => (React__default.createElement("input", { type: "checkbox", checked: row.getIsSelected(), onChange: (e) => row.toggleSelected(e.target.checked) })),
|
|
14
|
-
}),
|
|
15
|
-
columnHelper.accessor("path", {
|
|
16
|
-
header: "End point",
|
|
17
|
-
}),
|
|
18
|
-
columnHelper.accessor("method", {
|
|
19
|
-
header: "Method",
|
|
20
|
-
cell: ({ row }) => (React__default.createElement("div", { className: "msw-dev-tool-center" }, row.original.enabled)),
|
|
21
|
-
}),
|
|
22
|
-
];
|
|
23
|
-
}, []);
|
|
24
|
-
const table = useReactTable({
|
|
25
|
-
columns,
|
|
26
|
-
data: flattenHandlers,
|
|
27
|
-
getCoreRowModel: getCoreRowModel(),
|
|
28
|
-
state: {
|
|
29
|
-
rowSelection: handlerRowSelection,
|
|
30
|
-
},
|
|
31
|
-
onRowSelectionChange: handleHandlerRowSelectionChange,
|
|
32
|
-
getRowId: (row) => row.id,
|
|
33
|
-
enableRowSelection: true,
|
|
34
|
-
});
|
|
6
|
+
const table = useFlattenHandlersTable();
|
|
35
7
|
return (React__default.createElement("div", null,
|
|
36
8
|
React__default.createElement("table", null,
|
|
37
9
|
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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HttpControl.js","sources":["../../../../src/ui/DevToolContent/HttpControl.tsx"],"sourcesContent":["import React
|
|
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\";\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;;;;"}
|