msw-dev-tool 1.0.21 → 1.0.23

package/dist/cjs/hook/useFlattenHandlersTable.js

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('../node_modules/@tanstack/react-table/build/lib/index.js');
+var index$1 = require('../node_modules/@tanstack/react-table/build/lib/index.js');
 var handlerStore = require('../lib/handlerStore.js');
 var React = require('react');
-var index$1 = require('../node_modules/@tanstack/table-core/build/lib/index.js');
+var index = require('../ui/Table/PreviewHandler/index.js');
+var index$2 = require('../node_modules/@tanstack/table-core/build/lib/index.js');
 
 const useFlattenHandlersTable = () => {
     const { flattenHandlers, handlerRowSelection, handleHandlerRowSelectionChange, } = handlerStore.useHandlerStore();
-    const columnHelper = index$1.createColumnHelper();
+    const columnHelper = index$2.createColumnHelper();
     const columns = React.useMemo(() => {
         return [
             columnHelper.accessor("enabled", {
@@ -21,12 +22,22 @@ const useFlattenHandlersTable = () => {
                 header: "Method",
                 cell: ({ row }) => (React.createElement("div", { className: "msw-dev-tool-center" }, row.original.method)),
             }),
+            columnHelper.accessor("handler", {
+                header: "Preview",
+                cell: ({ row }) => {
+                    const handler = row.original.handler;
+                    const [isOpen, setIsOpen] = React.useState(false);
+                    return (React.createElement(React.Fragment, null,
+                        React.createElement("button", { onClick: () => setIsOpen(true) }, "Preview"),
+                        isOpen && (React.createElement(index.PreviewHandler, { handler: handler, onClose: () => setIsOpen(false) }))));
+                },
+            }),
         ];
     }, []);
-    const table = index.useReactTable({
+    const table = index$1.useReactTable({
         columns,
         data: flattenHandlers,
-        getCoreRowModel: index$1.getCoreRowModel(),
+        getCoreRowModel: index$2.getCoreRowModel(),
         state: {
             rowSelection: handlerRowSelection,
         },

package/dist/cjs/hook/useFlattenHandlersTable.js.map

@@ -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;;;;"}
+{"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: \"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      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":["useHandlerStore","createColumnHelper","useMemo","useState","PreviewHandler","useReactTable","getCoreRowModel"],"mappings":";;;;;;;;AAWO,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;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE;AAC/B,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAChB,oBAAA,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC;oBACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC,CAAC;AAC5C,oBAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;wBACE,KAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAkB,EAAA,SAAA,CAAA;wBACvD,MAAM,KACL,KAAC,CAAA,aAAA,CAAAC,oBAAc,IACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,SAAS,CAAC,KAAK,CAAC,EAC/B,CAAA,CACH,CACA,EACH;iBACH;aACF,CAAC;SACH,CAAC;KACH,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,KAAK,GAAGC,qBAAa,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;;;;"}

package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var React = require('react');
+
+const PathParamSetter = ({ paramValues, onParamChange, }) => {
+    return (paramValues &&
+        Object.keys(paramValues).length > 0 && (React.createElement(React.Fragment, null,
+        React.createElement("h3", null, "Path Parameters"),
+        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" } },
+            React.createElement("label", { htmlFor: `param-${key}`, style: { minWidth: "100px" } },
+                key,
+                ":"),
+            React.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), style: {
+                    padding: "4px 8px",
+                    borderRadius: "4px",
+                    border: "1px solid #ccc",
+                    width: "100%",
+                } }))))))));
+};
+
+exports.PathParamSetter = PathParamSetter;
+//# sourceMappingURL=PathParamSetter.js.map

package/dist/cjs/ui/Table/PreviewHandler/PathParamSetter.js.map

@@ -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                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,CAAS,MAAA,EAAA,GAAG,EAAE,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,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;;;;"}

package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var React = require('react');
+var url = require('../../../utils/url.js');
+
+const RequestPreview = ({ url: url$1, paramValues, }) => {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    const [response, setResponse] = React.useState(null);
+    const finalPath = url.getPathWithParams(url$1, paramValues);
+    const totalUrl = url.getTotalUrl(url$1.origin, finalPath);
+    const handleFetch = () => {
+        setLoading(true);
+        setError(null);
+        fetch(totalUrl)
+            .then((res) => res.json())
+            .then((data) => {
+            setResponse(data);
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(err instanceof Error ? err : new Error("Failed to fetch"));
+            setLoading(false);
+        });
+    };
+    return (React.createElement("div", { style: { marginTop: "20px" } },
+        React.createElement("h3", null, "Response"),
+        React.createElement("div", { style: {
+                fontFamily: "monospace",
+                wordBreak: "break-all",
+            } },
+            React.createElement("button", { onClick: handleFetch, disabled: loading, style: {
+                    padding: "4px 12px",
+                    borderRadius: "4px",
+                    border: "1px solid #ccc",
+                    backgroundColor: loading ? "#f5f5f5" : "white",
+                    cursor: loading ? "not-allowed" : "pointer",
+                } }, loading ? "Fetching..." : "Send Request"),
+            error && (React.createElement("div", { style: {
+                    marginTop: "8px",
+                    color: "#f44336",
+                    backgroundColor: "#f5f5f5",
+                } },
+                "Error: ",
+                error.message)),
+            response && (React.createElement("div", { style: {
+                    marginTop: "8px",
+                    maxHeight: "200px",
+                    overflow: "scroll",
+                    backgroundColor: "#f5f5f5",
+                } },
+                React.createElement("pre", { style: {
+                        margin: 0,
+                        overflow: "auto",
+                        borderRadius: "4px",
+                        fontFamily: "monospace",
+                        wordBreak: "break-all",
+                    } }, JSON.stringify(response, null, 2)))))));
+};
+
+exports.RequestPreview = RequestPreview;
+//# sourceMappingURL=RequestPreview.js.map

package/dist/cjs/ui/Table/PreviewHandler/RequestPreview.js.map

@@ -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, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n  url,\n  paramValues,\n}: {\n  url: URL;\n  paramValues?: PathParams<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 totalUrl = getTotalUrl(url.origin, finalPath);\n\n  const handleFetch = () => {\n    setLoading(true);\n    setError(null);\n\n    fetch(totalUrl)\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};\n"],"names":["url","useState","getPathWithParams","getTotalUrl"],"mappings":"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"}

package/dist/cjs/ui/Table/PreviewHandler/index.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var React = require('react');
+var reactDom = require('react-dom');
+var msw = require('msw');
+var PathParamSetter = require('./PathParamSetter.js');
+var RequestPreview = require('./RequestPreview.js');
+
+const PreviewHandler = ({ handler, onClose }) => {
+    const path = handler.info.path;
+    const url = new URL(String(path), location.href);
+    const { params } = msw.matchRequestUrl(url, path, url.origin);
+    const [paramValues, setParamValues] = React.useState(params
+        ? Object.keys(params).reduce((acc, key) => ({
+            ...acc,
+            [key]: "",
+        }), {})
+        : undefined);
+    const handleParamChange = (key, value) => {
+        setParamValues((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    };
+    return reactDom.createPortal(React.createElement("div", { style: {
+            padding: "20px",
+            position: "fixed",
+            zIndex: 9999,
+            backgroundColor: "white",
+            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+            borderRadius: "8px",
+            width: "320px",
+        } },
+        React.createElement("div", { style: { position: "relative" } },
+            React.createElement("button", { onClick: onClose, style: {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "1.2rem",
+                    padding: "4px",
+                } }, "\u2715"),
+            React.createElement("h2", { style: { marginBottom: "20px", paddingRight: "24px" } }, "Handler Preview"),
+            React.createElement("p", { style: { fontSize: "0.8rem", color: "#666", overflow: "scroll" } }, url.toString()),
+            React.createElement(PathParamSetter.PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
+            React.createElement(RequestPreview.RequestPreview, { url: url, paramValues: paramValues }))), document.body);
+};
+
+exports.PreviewHandler = PreviewHandler;
+//# sourceMappingURL=index.js.map

package/dist/cjs/ui/Table/PreviewHandler/index.js.map

@@ -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\";\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\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      }}\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        <RequestPreview url={url} paramValues={paramValues} />\n      </div>\n    </div>,\n    document.body\n  );\n};\n"],"names":["matchRequestUrl","useState","createPortal","PathParamSetter","RequestPreview"],"mappings":";;;;;;;;AAWa,MAAA,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAuB,KAAI;AAC1E,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,IAAA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,EAAE,MAAM,EAAE,GAAGA,mBAAe,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAG5C,MAAM;AACJ,UAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,GAAG,MAAM;AACb,YAAA,GAAG,GAAG;YACN,CAAC,GAAG,GAAG,EAAE;SACV,CAAC,EACF,EAAE,CACH;UACD,SAAS,CACd,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAE,KAAa,KAAI;AACvD,QAAA,cAAc,CAAC,CAAC,IAAI,MAAM;AACxB,YAAA,GAAG,IAAI;YACP,CAAC,GAAG,GAAG,KAAK;AACb,SAAA,CAAC,CAAC,CAAC;AACN,KAAC,CAAC;AAEF,IAAA,OAAOC,qBAAY,CACjB,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,eAAe,EAAE,OAAO;AACxB,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA,EAAA;AAED,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAClC,YAAA,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,UAAU,EAAE,MAAM;AAClB,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,MAAM,EAAE,SAAS;AACjB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,KAAK;iBACf,EAGM,EAAA,QAAA,CAAA;YAET,KAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,EAEpD,EAAA,iBAAA,CAAA;YACL,KAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,EAChE,GAAG,CAAC,QAAQ,EAAE,CACb;YACJ,KAAC,CAAA,aAAA,CAAAC,+BAAe,IACd,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,iBAAiB,EAChC,CAAA;AACF,YAAA,KAAA,CAAA,aAAA,CAACC,6BAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAA,CAAI,CAClD,CACF,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}

package/dist/cjs/utils/url.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * Replace path parameters with path object and formatted path
+ */
+const getPathWithParams = (url, paramValues) => {
+    if (!paramValues)
+        return url.pathname;
+    return url.pathname
+        .split("/")
+        .map((segment) => {
+        if (segment.startsWith(":")) {
+            const paramName = segment.slice(1); // remove ':'
+            return paramValues[paramName] || "undefined"; // replace with param value if exists, otherwise "undefined"
+        }
+        return segment;
+    })
+        .join("/");
+};
+/**
+ * Create full URL string
+ */
+const getTotalUrl = (origin, path) => {
+    return `${origin}${path}`;
+};
+
+exports.getPathWithParams = getPathWithParams;
+exports.getTotalUrl = getTotalUrl;
+//# sourceMappingURL=url.js.map

package/dist/cjs/utils/url.js.map

@@ -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\n/**\n * Create full URL string\n */\nexport const getTotalUrl = (origin: string, path: string): string => {\n  return `${origin}${path}`;\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;AAEF;;AAEG;MACU,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,KAAY;AAClE,IAAA,OAAO,CAAG,EAAA,MAAM,CAAG,EAAA,IAAI,EAAE,CAAC;AAC5B;;;;;"}

package/dist/esm/hook/useFlattenHandlersTable.js

@@ -1,6 +1,7 @@
 import { useReactTable } from '../node_modules/@tanstack/react-table/build/lib/index.js';
 import { useHandlerStore } from '../lib/handlerStore.js';
-import React__default, { useMemo } from 'react';
+import React__default, { useMemo, useState } from 'react';
+import { PreviewHandler } from '../ui/Table/PreviewHandler/index.js';
 import { createColumnHelper, getCoreRowModel } from '../node_modules/@tanstack/table-core/build/lib/index.js';
 
 const useFlattenHandlersTable = () => {
@@ -19,6 +20,16 @@ const useFlattenHandlersTable = () => {
                 header: "Method",
                 cell: ({ row }) => (React__default.createElement("div", { className: "msw-dev-tool-center" }, row.original.method)),
             }),
+            columnHelper.accessor("handler", {
+                header: "Preview",
+                cell: ({ row }) => {
+                    const handler = row.original.handler;
+                    const [isOpen, setIsOpen] = useState(false);
+                    return (React__default.createElement(React__default.Fragment, null,
+                        React__default.createElement("button", { onClick: () => setIsOpen(true) }, "Preview"),
+                        isOpen && (React__default.createElement(PreviewHandler, { handler: handler, onClose: () => setIsOpen(false) }))));
+                },
+            }),
         ];
     }, []);
     const table = useReactTable({

package/dist/esm/hook/useFlattenHandlersTable.js.map

@@ -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;;;;"}
+{"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: \"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      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":";;;;;;AAWO,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;AACF,YAAA,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE;AAC/B,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,KAAI;AAChB,oBAAA,MAAM,OAAO,GAAG,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC;oBACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC5C,oBAAA,QACEA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;wBACEA,cAAQ,CAAA,aAAA,CAAA,QAAA,EAAA,EAAA,OAAO,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,EAAkB,EAAA,SAAA,CAAA;wBACvD,MAAM,KACLA,cAAC,CAAA,aAAA,CAAA,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,MAAM,SAAS,CAAC,KAAK,CAAC,EAC/B,CAAA,CACH,CACA,EACH;iBACH;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;;;;"}

package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js

@@ -0,0 +1,20 @@
+import React__default from 'react';
+
+const PathParamSetter = ({ paramValues, onParamChange, }) => {
+    return (paramValues &&
+        Object.keys(paramValues).length > 0 && (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("h3", null, "Path Parameters"),
+        React__default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, Object.entries(paramValues).map(([key, value]) => (React__default.createElement("div", { key: key, style: { display: "flex", alignItems: "center", gap: "8px" } },
+            React__default.createElement("label", { htmlFor: `param-${key}`, style: { minWidth: "100px" } },
+                key,
+                ":"),
+            React__default.createElement("input", { id: `param-${key}`, type: "text", value: value, onChange: (e) => onParamChange(key, e.target.value), style: {
+                    padding: "4px 8px",
+                    borderRadius: "4px",
+                    border: "1px solid #ccc",
+                    width: "100%",
+                } }))))))));
+};
+
+export { PathParamSetter };
+//# sourceMappingURL=PathParamSetter.js.map

package/dist/esm/ui/Table/PreviewHandler/PathParamSetter.js.map

@@ -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                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":["React"],"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,KACjCA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA;QACEA,cAAwB,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EAAA,iBAAA,CAAA;QACxBA,cAAK,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,MAC5CA,cACE,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,YAAAA,cAAA,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,YAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,EAAE,EAAE,CAAS,MAAA,EAAA,GAAG,EAAE,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,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;;;;"}

package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js

@@ -0,0 +1,60 @@
+import React__default, { useState } from 'react';
+import { getPathWithParams, getTotalUrl } from '../../../utils/url.js';
+
+const RequestPreview = ({ url, paramValues, }) => {
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [response, setResponse] = useState(null);
+    const finalPath = getPathWithParams(url, paramValues);
+    const totalUrl = getTotalUrl(url.origin, finalPath);
+    const handleFetch = () => {
+        setLoading(true);
+        setError(null);
+        fetch(totalUrl)
+            .then((res) => res.json())
+            .then((data) => {
+            setResponse(data);
+            setLoading(false);
+        })
+            .catch((err) => {
+            setError(err instanceof Error ? err : new Error("Failed to fetch"));
+            setLoading(false);
+        });
+    };
+    return (React__default.createElement("div", { style: { marginTop: "20px" } },
+        React__default.createElement("h3", null, "Response"),
+        React__default.createElement("div", { style: {
+                fontFamily: "monospace",
+                wordBreak: "break-all",
+            } },
+            React__default.createElement("button", { onClick: handleFetch, disabled: loading, style: {
+                    padding: "4px 12px",
+                    borderRadius: "4px",
+                    border: "1px solid #ccc",
+                    backgroundColor: loading ? "#f5f5f5" : "white",
+                    cursor: loading ? "not-allowed" : "pointer",
+                } }, loading ? "Fetching..." : "Send Request"),
+            error && (React__default.createElement("div", { style: {
+                    marginTop: "8px",
+                    color: "#f44336",
+                    backgroundColor: "#f5f5f5",
+                } },
+                "Error: ",
+                error.message)),
+            response && (React__default.createElement("div", { style: {
+                    marginTop: "8px",
+                    maxHeight: "200px",
+                    overflow: "scroll",
+                    backgroundColor: "#f5f5f5",
+                } },
+                React__default.createElement("pre", { style: {
+                        margin: 0,
+                        overflow: "auto",
+                        borderRadius: "4px",
+                        fontFamily: "monospace",
+                        wordBreak: "break-all",
+                    } }, JSON.stringify(response, null, 2)))))));
+};
+
+export { RequestPreview };
+//# sourceMappingURL=RequestPreview.js.map

package/dist/esm/ui/Table/PreviewHandler/RequestPreview.js.map

@@ -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, getTotalUrl } from \"../../../utils/url\";\n\nexport const RequestPreview = ({\n  url,\n  paramValues,\n}: {\n  url: URL;\n  paramValues?: PathParams<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 totalUrl = getTotalUrl(url.origin, finalPath);\n\n  const handleFetch = () => {\n    setLoading(true);\n    setError(null);\n\n    fetch(totalUrl)\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};\n"],"names":["React"],"mappings":"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"}

package/dist/esm/ui/Table/PreviewHandler/index.js

@@ -0,0 +1,50 @@
+import React__default, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { matchRequestUrl } from 'msw';
+import { PathParamSetter } from './PathParamSetter.js';
+import { RequestPreview } from './RequestPreview.js';
+
+const PreviewHandler = ({ handler, onClose }) => {
+    const path = handler.info.path;
+    const url = new URL(String(path), location.href);
+    const { params } = matchRequestUrl(url, path, url.origin);
+    const [paramValues, setParamValues] = useState(params
+        ? Object.keys(params).reduce((acc, key) => ({
+            ...acc,
+            [key]: "",
+        }), {})
+        : undefined);
+    const handleParamChange = (key, value) => {
+        setParamValues((prev) => ({
+            ...prev,
+            [key]: value,
+        }));
+    };
+    return createPortal(React__default.createElement("div", { style: {
+            padding: "20px",
+            position: "fixed",
+            zIndex: 9999,
+            backgroundColor: "white",
+            boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+            borderRadius: "8px",
+            width: "320px",
+        } },
+        React__default.createElement("div", { style: { position: "relative" } },
+            React__default.createElement("button", { onClick: onClose, style: {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontSize: "1.2rem",
+                    padding: "4px",
+                } }, "\u2715"),
+            React__default.createElement("h2", { style: { marginBottom: "20px", paddingRight: "24px" } }, "Handler Preview"),
+            React__default.createElement("p", { style: { fontSize: "0.8rem", color: "#666", overflow: "scroll" } }, url.toString()),
+            React__default.createElement(PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
+            React__default.createElement(RequestPreview, { url: url, paramValues: paramValues }))), document.body);
+};
+
+export { PreviewHandler };
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Table/PreviewHandler/index.js.map

@@ -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\";\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\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      }}\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        <RequestPreview url={url} paramValues={paramValues} />\n      </div>\n    </div>,\n    document.body\n  );\n};\n"],"names":["React"],"mappings":";;;;;;AAWa,MAAA,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,EAAuB,KAAI;AAC1E,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,IAAA,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;AACjD,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,GAAG,EAAE,IAAI,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAE1D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAG5C,MAAM;AACJ,UAAE,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,GAAG,MAAM;AACb,YAAA,GAAG,GAAG;YACN,CAAC,GAAG,GAAG,EAAE;SACV,CAAC,EACF,EAAE,CACH;UACD,SAAS,CACd,CAAC;AAEF,IAAA,MAAM,iBAAiB,GAAG,CAAC,GAAW,EAAE,KAAa,KAAI;AACvD,QAAA,cAAc,CAAC,CAAC,IAAI,MAAM;AACxB,YAAA,GAAG,IAAI;YACP,CAAC,GAAG,GAAG,KAAK;AACb,SAAA,CAAC,CAAC,CAAC;AACN,KAAC,CAAC;AAEF,IAAA,OAAO,YAAY,CACjBA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE;AACL,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,eAAe,EAAE,OAAO;AACxB,YAAA,SAAS,EAAE,+BAA+B;AAC1C,YAAA,YAAY,EAAE,KAAK;AACnB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA,EAAA;AAED,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAA;AAClC,YAAAA,cAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;AACL,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,UAAU,EAAE,MAAM;AAClB,oBAAA,MAAM,EAAE,MAAM;AACd,oBAAA,MAAM,EAAE,SAAS;AACjB,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,OAAO,EAAE,KAAK;iBACf,EAGM,EAAA,QAAA,CAAA;YAETA,cAAI,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,EAEpD,EAAA,iBAAA,CAAA;YACLA,cAAG,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,EAChE,GAAG,CAAC,QAAQ,EAAE,CACb;YACJA,cAAC,CAAA,aAAA,CAAA,eAAe,IACd,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,iBAAiB,EAChC,CAAA;AACF,YAAAA,cAAA,CAAA,aAAA,CAAC,cAAc,EAAC,EAAA,GAAG,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAA,CAAI,CAClD,CACF,EACN,QAAQ,CAAC,IAAI,CACd,CAAC;AACJ;;;;"}

package/dist/esm/utils/url.js

@@ -0,0 +1,26 @@
+/**
+ * Replace path parameters with path object and formatted path
+ */
+const getPathWithParams = (url, paramValues) => {
+    if (!paramValues)
+        return url.pathname;
+    return url.pathname
+        .split("/")
+        .map((segment) => {
+        if (segment.startsWith(":")) {
+            const paramName = segment.slice(1); // remove ':'
+            return paramValues[paramName] || "undefined"; // replace with param value if exists, otherwise "undefined"
+        }
+        return segment;
+    })
+        .join("/");
+};
+/**
+ * Create full URL string
+ */
+const getTotalUrl = (origin, path) => {
+    return `${origin}${path}`;
+};
+
+export { getPathWithParams, getTotalUrl };
+//# sourceMappingURL=url.js.map

package/dist/esm/utils/url.js.map

@@ -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\n/**\n * Create full URL string\n */\nexport const getTotalUrl = (origin: string, path: string): string => {\n  return `${origin}${path}`;\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;AAEF;;AAEG;MACU,WAAW,GAAG,CAAC,MAAc,EAAE,IAAY,KAAY;AAClE,IAAA,OAAO,CAAG,EAAA,MAAM,CAAG,EAAA,IAAI,EAAE,CAAC;AAC5B;;;;"}

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "msw-dev-tool",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
+  "repository": "https://github.com/nayounsang/msw-dev-tool",
   "files": [
     "dist",
     "LICENSE",