msw-dev-tool 1.0.19 → 1.0.21
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/lib/handlerStore.js +17 -25
- package/dist/cjs/lib/handlerStore.js.map +1 -1
- package/dist/cjs/lib/util.js +32 -0
- package/dist/cjs/lib/util.js.map +1 -1
- package/dist/cjs/ui/DevToolContent/HttpControl.js +3 -0
- package/dist/cjs/ui/DevToolContent/HttpControl.js.map +1 -1
- package/dist/esm/lib/handlerStore.js +18 -26
- package/dist/esm/lib/handlerStore.js.map +1 -1
- package/dist/esm/lib/util.js +30 -1
- package/dist/esm/lib/util.js.map +1 -1
- package/dist/esm/ui/DevToolContent/HttpControl.js +3 -0
- package/dist/esm/ui/DevToolContent/HttpControl.js.map +1 -1
- package/package.json +1 -1
@@ -2,7 +2,6 @@
|
|
2
2
|
|
3
3
|
var zustand = require('zustand');
|
4
4
|
var util = require('./util.js');
|
5
|
-
var handler = require('../const/handler.js');
|
6
5
|
var lodash = require('../node_modules/lodash/lodash.js');
|
7
6
|
|
8
7
|
const useHandlerStore = zustand.create((set, get) => ({
|
@@ -11,13 +10,7 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
11
10
|
restHandlers: [],
|
12
11
|
handlerRowSelection: {},
|
13
12
|
initMSWDevTool: (_worker) => {
|
14
|
-
const worker = _worker;
|
15
|
-
const handlers = worker.listHandlers();
|
16
|
-
const { flattenHandlers, unsupportedHandlers } = util.convertHandlers(handlers);
|
17
|
-
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
18
|
-
acc[handler.id] = handler.enabled;
|
19
|
-
return acc;
|
20
|
-
}, {});
|
13
|
+
const { worker, flattenHandlers, handlerRowSelection, unsupportedHandlers, } = util.initMSWDevToolStore(_worker);
|
21
14
|
set({ worker });
|
22
15
|
set({ flattenHandlers });
|
23
16
|
set({
|
@@ -26,7 +19,19 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
26
19
|
set({ restHandlers: unsupportedHandlers });
|
27
20
|
return worker;
|
28
21
|
},
|
22
|
+
resetMSWDevTool: () => {
|
23
|
+
const _worker = get().getWorker();
|
24
|
+
_worker.resetHandlers();
|
25
|
+
const { worker, flattenHandlers, handlerRowSelection, unsupportedHandlers, } = util.initMSWDevToolStore(_worker);
|
26
|
+
set({ worker });
|
27
|
+
set({ flattenHandlers });
|
28
|
+
set({
|
29
|
+
handlerRowSelection,
|
30
|
+
});
|
31
|
+
set({ restHandlers: unsupportedHandlers });
|
32
|
+
},
|
29
33
|
handleHandlerRowSelectionChange: (updater) => {
|
34
|
+
const worker = get().getWorker();
|
30
35
|
if (lodash.lodashExports.isFunction(updater)) {
|
31
36
|
set(({ handlerRowSelection }) => {
|
32
37
|
const next = updater(handlerRowSelection);
|
@@ -42,7 +47,10 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
42
47
|
: { ...handler, enabled: false });
|
43
48
|
set({ handlerRowSelection: updater, flattenHandlers: current });
|
44
49
|
}
|
45
|
-
get().
|
50
|
+
const flattenHandlers = get().flattenHandlers;
|
51
|
+
const restHandlers = get().restHandlers;
|
52
|
+
const totalEnableHandlers = util.getTotalEnableHandlers(flattenHandlers, restHandlers);
|
53
|
+
util.updateEnableHandlers(worker, totalEnableHandlers);
|
46
54
|
},
|
47
55
|
getWorker: () => {
|
48
56
|
const worker = get().worker;
|
@@ -50,22 +58,6 @@ const useHandlerStore = zustand.create((set, get) => ({
|
|
50
58
|
throw new Error("Worker is not initialized");
|
51
59
|
return worker;
|
52
60
|
},
|
53
|
-
getTotalEnableHandlers: () => {
|
54
|
-
const checkedHttpHandlers = get()
|
55
|
-
.flattenHandlers.filter((h) => h.enabled)
|
56
|
-
.map((h) => h.handler);
|
57
|
-
const otherProtocolHandlers = get().restHandlers;
|
58
|
-
return [...checkedHttpHandlers, ...otherProtocolHandlers];
|
59
|
-
},
|
60
|
-
updateEnableHandlers: () => {
|
61
|
-
const worker = get().getWorker();
|
62
|
-
const totalEnableHandlers = get().getTotalEnableHandlers();
|
63
|
-
if (totalEnableHandlers.length === 0) {
|
64
|
-
worker.resetHandlers(handler.dummyHandler);
|
65
|
-
return;
|
66
|
-
}
|
67
|
-
worker.resetHandlers(...totalEnableHandlers);
|
68
|
-
},
|
69
61
|
}));
|
70
62
|
const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;
|
71
63
|
|
@@ -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 {
|
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 {\n convertHandlers,\n getTotalEnableHandlers,\n initMSWDevToolStore,\n updateEnableHandlers,\n} from \"./util\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n /**\n * @remarks ⚠️ To be safe, access `getWorker()` rather than `get().worker` directly.\n */\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 resetMSWDevTool: () => void;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const {\n worker,\n flattenHandlers,\n handlerRowSelection,\n unsupportedHandlers,\n } = initMSWDevToolStore(_worker);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n\n return worker;\n },\n resetMSWDevTool: () => {\n const _worker = get().getWorker();\n _worker.resetHandlers();\n \n const {\n worker,\n flattenHandlers,\n handlerRowSelection,\n unsupportedHandlers,\n } = initMSWDevToolStore(_worker);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n },\n handleHandlerRowSelectionChange: (updater) => {\n const worker = get().getWorker();\n\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\n const flattenHandlers = get().flattenHandlers;\n const restHandlers = get().restHandlers;\n const totalEnableHandlers = getTotalEnableHandlers(\n flattenHandlers,\n restHandlers\n );\n updateEnableHandlers(worker, totalEnableHandlers);\n },\n getWorker: () => {\n const worker = get().worker;\n if (!worker) throw new Error(\"Worker is not initialized\");\n return worker;\n },\n}));\n\nexport const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;\n"],"names":["create","initMSWDevToolStore","isFunction","getTotalEnableHandlers","updateEnableHandlers"],"mappings":"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"}
|
package/dist/cjs/lib/util.js
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
'use strict';
|
2
2
|
|
3
|
+
var handler = require('../const/handler.js');
|
4
|
+
|
3
5
|
const getRowId = ({ path, method }) => JSON.stringify({
|
4
6
|
path,
|
5
7
|
method,
|
@@ -26,7 +28,37 @@ const convertHandlers = (handlers) => {
|
|
26
28
|
}, []);
|
27
29
|
return { flattenHandlers, unsupportedHandlers };
|
28
30
|
};
|
31
|
+
const getTotalEnableHandlers = (flattenHandlers, restHandlers) => {
|
32
|
+
const checkedHttpHandlers = flattenHandlers
|
33
|
+
.filter((h) => h.enabled)
|
34
|
+
.map((h) => h.handler);
|
35
|
+
return [...checkedHttpHandlers, ...restHandlers];
|
36
|
+
};
|
37
|
+
/**
|
38
|
+
* This has to do with `msw` internal workings.
|
39
|
+
* If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.
|
40
|
+
* Therefore, I proposed the `clear` method, but unfortunately it was not accepted!
|
41
|
+
*/
|
42
|
+
const updateEnableHandlers = (worker, totalEnableHandlers) => {
|
43
|
+
if (totalEnableHandlers.length === 0) {
|
44
|
+
worker.resetHandlers(handler.dummyHandler);
|
45
|
+
return;
|
46
|
+
}
|
47
|
+
worker.resetHandlers(...totalEnableHandlers);
|
48
|
+
};
|
49
|
+
const initMSWDevToolStore = (worker) => {
|
50
|
+
const handlers = worker.listHandlers();
|
51
|
+
const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);
|
52
|
+
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
53
|
+
acc[handler.id] = handler.enabled;
|
54
|
+
return acc;
|
55
|
+
}, {});
|
56
|
+
return { worker, flattenHandlers, unsupportedHandlers, handlerRowSelection };
|
57
|
+
};
|
29
58
|
|
30
59
|
exports.convertHandlers = convertHandlers;
|
31
60
|
exports.getRowId = getRowId;
|
61
|
+
exports.getTotalEnableHandlers = getTotalEnableHandlers;
|
62
|
+
exports.initMSWDevToolStore = initMSWDevToolStore;
|
63
|
+
exports.updateEnableHandlers = updateEnableHandlers;
|
32
64
|
//# sourceMappingURL=util.js.map
|
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\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":"
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { dummyHandler } from \"../const/handler\";\nimport { SetupWorker } from \"msw/lib/browser\";\nimport { initial } from \"lodash\";\nimport { RowSelectionState } from \"@tanstack/react-table\";\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\nexport const getTotalEnableHandlers = (\n flattenHandlers: FlattenHandler[],\n restHandlers: Handler[]\n) => {\n const checkedHttpHandlers = flattenHandlers\n .filter((h) => h.enabled)\n .map((h) => h.handler);\n return [...checkedHttpHandlers, ...restHandlers];\n};\n\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 */\nexport const updateEnableHandlers = (\n worker: SetupWorker,\n totalEnableHandlers: Handler[]\n) => {\n if (totalEnableHandlers.length === 0) {\n worker.resetHandlers(dummyHandler);\n return;\n }\n\n worker.resetHandlers(...totalEnableHandlers);\n};\n\nexport const initMSWDevToolStore = (worker: SetupWorker) => {\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 return { worker, flattenHandlers, unsupportedHandlers, handlerRowSelection };\n};\n"],"names":["dummyHandler"],"mappings":";;;;AAOa,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,EAAE;MAEW,sBAAsB,GAAG,CACpC,eAAiC,EACjC,YAAuB,KACrB;IACF,MAAM,mBAAmB,GAAG,eAAe;SACxC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;SACxB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;AACzB,IAAA,OAAO,CAAC,GAAG,mBAAmB,EAAE,GAAG,YAAY,CAAC,CAAC;AACnD,EAAE;AAEF;;;;AAIG;MACU,oBAAoB,GAAG,CAClC,MAAmB,EACnB,mBAA8B,KAC5B;AACF,IAAA,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,CAAC,aAAa,CAACA,oBAAY,CAAC,CAAC;QACnC,OAAO;KACR;AAED,IAAA,MAAM,CAAC,aAAa,CAAC,GAAG,mBAAmB,CAAC,CAAC;AAC/C,EAAE;AAEW,MAAA,mBAAmB,GAAG,CAAC,MAAmB,KAAI;AACzD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,EAAe,CAAC;IACpD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC3E,MAAM,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;QAClE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,QAAA,OAAO,GAAG,CAAC;KACZ,EAAE,EAAuB,CAAC,CAAC;IAE5B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;AAC/E;;;;;;;;"}
|
@@ -3,10 +3,13 @@
|
|
3
3
|
var React = require('react');
|
4
4
|
var index = require('../../node_modules/@tanstack/react-table/build/lib/index.js');
|
5
5
|
var useFlattenHandlersTable = require('../../hook/useFlattenHandlersTable.js');
|
6
|
+
var handlerStore = require('../../lib/handlerStore.js');
|
6
7
|
|
7
8
|
const HttpControl = () => {
|
8
9
|
const table = useFlattenHandlersTable.useFlattenHandlersTable();
|
10
|
+
const { resetMSWDevTool } = handlerStore.useHandlerStore();
|
9
11
|
return (React.createElement("div", null,
|
12
|
+
React.createElement("button", { onClick: () => resetMSWDevTool() }, "Reset Dev tool"),
|
10
13
|
React.createElement("table", null,
|
11
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
|
12
15
|
? null
|
@@ -1 +1 @@
|
|
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":"
|
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,6 +1,5 @@
|
|
1
1
|
import { create } from 'zustand';
|
2
|
-
import {
|
3
|
-
import { dummyHandler } from '../const/handler.js';
|
2
|
+
import { initMSWDevToolStore, getTotalEnableHandlers, updateEnableHandlers } from './util.js';
|
4
3
|
import { l as lodashExports } from '../node_modules/lodash/lodash.js';
|
5
4
|
|
6
5
|
const useHandlerStore = create((set, get) => ({
|
@@ -9,13 +8,7 @@ const useHandlerStore = create((set, get) => ({
|
|
9
8
|
restHandlers: [],
|
10
9
|
handlerRowSelection: {},
|
11
10
|
initMSWDevTool: (_worker) => {
|
12
|
-
const worker = _worker;
|
13
|
-
const handlers = worker.listHandlers();
|
14
|
-
const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);
|
15
|
-
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
16
|
-
acc[handler.id] = handler.enabled;
|
17
|
-
return acc;
|
18
|
-
}, {});
|
11
|
+
const { worker, flattenHandlers, handlerRowSelection, unsupportedHandlers, } = initMSWDevToolStore(_worker);
|
19
12
|
set({ worker });
|
20
13
|
set({ flattenHandlers });
|
21
14
|
set({
|
@@ -24,7 +17,19 @@ const useHandlerStore = create((set, get) => ({
|
|
24
17
|
set({ restHandlers: unsupportedHandlers });
|
25
18
|
return worker;
|
26
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
|
+
},
|
27
31
|
handleHandlerRowSelectionChange: (updater) => {
|
32
|
+
const worker = get().getWorker();
|
28
33
|
if (lodashExports.isFunction(updater)) {
|
29
34
|
set(({ handlerRowSelection }) => {
|
30
35
|
const next = updater(handlerRowSelection);
|
@@ -40,7 +45,10 @@ const useHandlerStore = create((set, get) => ({
|
|
40
45
|
: { ...handler, enabled: false });
|
41
46
|
set({ handlerRowSelection: updater, flattenHandlers: current });
|
42
47
|
}
|
43
|
-
get().
|
48
|
+
const flattenHandlers = get().flattenHandlers;
|
49
|
+
const restHandlers = get().restHandlers;
|
50
|
+
const totalEnableHandlers = getTotalEnableHandlers(flattenHandlers, restHandlers);
|
51
|
+
updateEnableHandlers(worker, totalEnableHandlers);
|
44
52
|
},
|
45
53
|
getWorker: () => {
|
46
54
|
const worker = get().worker;
|
@@ -48,22 +56,6 @@ const useHandlerStore = create((set, get) => ({
|
|
48
56
|
throw new Error("Worker is not initialized");
|
49
57
|
return worker;
|
50
58
|
},
|
51
|
-
getTotalEnableHandlers: () => {
|
52
|
-
const checkedHttpHandlers = get()
|
53
|
-
.flattenHandlers.filter((h) => h.enabled)
|
54
|
-
.map((h) => h.handler);
|
55
|
-
const otherProtocolHandlers = get().restHandlers;
|
56
|
-
return [...checkedHttpHandlers, ...otherProtocolHandlers];
|
57
|
-
},
|
58
|
-
updateEnableHandlers: () => {
|
59
|
-
const worker = get().getWorker();
|
60
|
-
const totalEnableHandlers = get().getTotalEnableHandlers();
|
61
|
-
if (totalEnableHandlers.length === 0) {
|
62
|
-
worker.resetHandlers(dummyHandler);
|
63
|
-
return;
|
64
|
-
}
|
65
|
-
worker.resetHandlers(...totalEnableHandlers);
|
66
|
-
},
|
67
59
|
}));
|
68
60
|
const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;
|
69
61
|
|
@@ -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 {
|
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 {\n convertHandlers,\n getTotalEnableHandlers,\n initMSWDevToolStore,\n updateEnableHandlers,\n} from \"./util\";\nimport { OnChangeFn, RowSelectionState, Updater } from \"@tanstack/react-table\";\nimport { isFunction } from \"lodash\";\n\nexport interface HandlerStoreState {\n /**\n * @remarks ⚠️ To be safe, access `getWorker()` rather than `get().worker` directly.\n */\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 resetMSWDevTool: () => void;\n handleHandlerRowSelectionChange: OnChangeFn<RowSelectionState>;\n getWorker: () => SetupWorker;\n}\nexport const useHandlerStore = create<HandlerStoreState>((set, get) => ({\n flattenHandlers: [],\n worker: null,\n restHandlers: [],\n handlerRowSelection: {},\n initMSWDevTool: (_worker) => {\n const {\n worker,\n flattenHandlers,\n handlerRowSelection,\n unsupportedHandlers,\n } = initMSWDevToolStore(_worker);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n\n return worker;\n },\n resetMSWDevTool: () => {\n const _worker = get().getWorker();\n _worker.resetHandlers();\n \n const {\n worker,\n flattenHandlers,\n handlerRowSelection,\n unsupportedHandlers,\n } = initMSWDevToolStore(_worker);\n\n set({ worker });\n set({ flattenHandlers });\n set({\n handlerRowSelection,\n });\n set({ restHandlers: unsupportedHandlers });\n },\n handleHandlerRowSelectionChange: (updater) => {\n const worker = get().getWorker();\n\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\n const flattenHandlers = get().flattenHandlers;\n const restHandlers = get().restHandlers;\n const totalEnableHandlers = getTotalEnableHandlers(\n flattenHandlers,\n restHandlers\n );\n updateEnableHandlers(worker, totalEnableHandlers);\n },\n getWorker: () => {\n const worker = get().worker;\n if (!worker) throw new Error(\"Worker is not initialized\");\n return worker;\n },\n}));\n\nexport const initMSWDevTool = useHandlerStore.getState().initMSWDevTool;\n"],"names":["isFunction"],"mappings":"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"}
|
package/dist/esm/lib/util.js
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
import { dummyHandler } from '../const/handler.js';
|
2
|
+
|
1
3
|
const getRowId = ({ path, method }) => JSON.stringify({
|
2
4
|
path,
|
3
5
|
method,
|
@@ -24,6 +26,33 @@ const convertHandlers = (handlers) => {
|
|
24
26
|
}, []);
|
25
27
|
return { flattenHandlers, unsupportedHandlers };
|
26
28
|
};
|
29
|
+
const getTotalEnableHandlers = (flattenHandlers, restHandlers) => {
|
30
|
+
const checkedHttpHandlers = flattenHandlers
|
31
|
+
.filter((h) => h.enabled)
|
32
|
+
.map((h) => h.handler);
|
33
|
+
return [...checkedHttpHandlers, ...restHandlers];
|
34
|
+
};
|
35
|
+
/**
|
36
|
+
* This has to do with `msw` internal workings.
|
37
|
+
* If I spread an empty array in `resetHandlers`, it will be replaced by `initialHandler`.
|
38
|
+
* Therefore, I proposed the `clear` method, but unfortunately it was not accepted!
|
39
|
+
*/
|
40
|
+
const updateEnableHandlers = (worker, totalEnableHandlers) => {
|
41
|
+
if (totalEnableHandlers.length === 0) {
|
42
|
+
worker.resetHandlers(dummyHandler);
|
43
|
+
return;
|
44
|
+
}
|
45
|
+
worker.resetHandlers(...totalEnableHandlers);
|
46
|
+
};
|
47
|
+
const initMSWDevToolStore = (worker) => {
|
48
|
+
const handlers = worker.listHandlers();
|
49
|
+
const { flattenHandlers, unsupportedHandlers } = convertHandlers(handlers);
|
50
|
+
const handlerRowSelection = flattenHandlers.reduce((acc, handler) => {
|
51
|
+
acc[handler.id] = handler.enabled;
|
52
|
+
return acc;
|
53
|
+
}, {});
|
54
|
+
return { worker, flattenHandlers, unsupportedHandlers, handlerRowSelection };
|
55
|
+
};
|
27
56
|
|
28
|
-
export { convertHandlers, getRowId };
|
57
|
+
export { convertHandlers, getRowId, getTotalEnableHandlers, initMSWDevToolStore, updateEnableHandlers };
|
29
58
|
//# sourceMappingURL=util.js.map
|
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\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":"
|
1
|
+
{"version":3,"file":"util.js","sources":["../../../src/lib/util.ts"],"sourcesContent":["import { HttpHandler } from \"msw\";\nimport { FlattenHandler, Handler } from \"./type\";\nimport { dummyHandler } from \"../const/handler\";\nimport { SetupWorker } from \"msw/lib/browser\";\nimport { initial } from \"lodash\";\nimport { RowSelectionState } from \"@tanstack/react-table\";\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\nexport const getTotalEnableHandlers = (\n flattenHandlers: FlattenHandler[],\n restHandlers: Handler[]\n) => {\n const checkedHttpHandlers = flattenHandlers\n .filter((h) => h.enabled)\n .map((h) => h.handler);\n return [...checkedHttpHandlers, ...restHandlers];\n};\n\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 */\nexport const updateEnableHandlers = (\n worker: SetupWorker,\n totalEnableHandlers: Handler[]\n) => {\n if (totalEnableHandlers.length === 0) {\n worker.resetHandlers(dummyHandler);\n return;\n }\n\n worker.resetHandlers(...totalEnableHandlers);\n};\n\nexport const initMSWDevToolStore = (worker: SetupWorker) => {\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 return { worker, flattenHandlers, unsupportedHandlers, handlerRowSelection };\n};\n"],"names":[],"mappings":";;AAOa,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,EAAE;MAEW,sBAAsB,GAAG,CACpC,eAAiC,EACjC,YAAuB,KACrB;IACF,MAAM,mBAAmB,GAAG,eAAe;SACxC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC;SACxB,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;AACzB,IAAA,OAAO,CAAC,GAAG,mBAAmB,EAAE,GAAG,YAAY,CAAC,CAAC;AACnD,EAAE;AAEF;;;;AAIG;MACU,oBAAoB,GAAG,CAClC,MAAmB,EACnB,mBAA8B,KAC5B;AACF,IAAA,IAAI,mBAAmB,CAAC,MAAM,KAAK,CAAC,EAAE;AACpC,QAAA,MAAM,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;QACnC,OAAO;KACR;AAED,IAAA,MAAM,CAAC,aAAa,CAAC,GAAG,mBAAmB,CAAC,CAAC;AAC/C,EAAE;AAEW,MAAA,mBAAmB,GAAG,CAAC,MAAmB,KAAI;AACzD,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,YAAY,EAAe,CAAC;IACpD,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,eAAe,CAAC,QAAQ,CAAC,CAAC;IAC3E,MAAM,mBAAmB,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO,KAAI;QAClE,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,QAAA,OAAO,GAAG,CAAC;KACZ,EAAE,EAAuB,CAAC,CAAC;IAE5B,OAAO,EAAE,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC;AAC/E;;;;"}
|
@@ -1,10 +1,13 @@
|
|
1
1
|
import React__default from 'react';
|
2
2
|
import { flexRender } from '../../node_modules/@tanstack/react-table/build/lib/index.js';
|
3
3
|
import { useFlattenHandlersTable } from '../../hook/useFlattenHandlersTable.js';
|
4
|
+
import { useHandlerStore } from '../../lib/handlerStore.js';
|
4
5
|
|
5
6
|
const HttpControl = () => {
|
6
7
|
const table = useFlattenHandlersTable();
|
8
|
+
const { resetMSWDevTool } = useHandlerStore();
|
7
9
|
return (React__default.createElement("div", null,
|
10
|
+
React__default.createElement("button", { onClick: () => resetMSWDevTool() }, "Reset Dev tool"),
|
8
11
|
React__default.createElement("table", null,
|
9
12
|
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
|
10
13
|
? null
|
@@ -1 +1 @@
|
|
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":"
|
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":["React"],"mappings":";;;;;AAKO,MAAM,WAAW,GAAG,MAAK;AAC9B,IAAA,MAAM,KAAK,GAAG,uBAAuB,EAAE,CAAC;AACxC,IAAA,MAAM,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAC;AAE9C,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA;AACE,QAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAQ,OAAO,EAAE,MAAM,eAAe,EAAE,EAAyB,EAAA,gBAAA,CAAA;AACjE,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;;;;"}
|