msw-dev-tool 1.1.6 → 1.1.8

package/dist/cjs/index.js

@@ -27960,13 +27960,14 @@ const useUiControlStore = zustand.create((set) => ({
 const HttpControl = () => {
     const table = useFlattenHandlersTable();
     const { setDebuggerHandler } = useUiControlStore();
+    const currentHandler = useUiControlStore((state) => state.currentHandler);
     return (React.createElement(p$3, { style: { flex: 3, overflowY: "auto" }, direction: "column", gap: "4" },
         React.createElement(r$8, { as: "h2", size: "5" }, "Handlers"),
         React.createElement(m, { onDragStart: (e) => e.stopPropagation(), style: { userSelect: "text" } },
             React.createElement(d, null, table.getHeaderGroups().map((headerGroup) => (React.createElement(P, { key: headerGroup.id }, headerGroup.headers.map((header) => (React.createElement(f$1, { key: header.id }, header.isPlaceholder
                 ? null
                 : flexRender(header.column.columnDef.header, header.getContext())))))))),
-            React.createElement(b, null, table.getRowModel().rows.map((row) => (React.createElement(P, { key: row.id, align: "center", className: "msw-dt-http-control-row", onClick: () => {
+            React.createElement(b, null, table.getRowModel().rows.map((row) => (React.createElement(P, { key: row.id, align: "center", className: `msw-dt-http-control-row ${row.original.handler === currentHandler && "msw-dt-current-row"}`, onClick: () => {
                     setDebuggerHandler(row.original.handler);
                 } }, row.getVisibleCells().map((cell) => (React.createElement(T, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext())))))))))));
 };
@@ -28129,41 +28130,35 @@ const RequestPreview = ({ url, paramValues, headers = {}, searchParams = {}, })
                     } }, JSON.stringify(response, null, 2)))))));
 };
 
+/**
+ * - It uses `zustand` global state.
+ * - remounting of the inner component that uses local states.
+ * - To force a component to be remounted, use `key` prop.
+ */
 const HandlerDebugger = () => {
-    var _a;
     const { currentHandler: handler } = useUiControlStore();
-    const path = (_a = handler === null || handler === void 0 ? void 0 : handler.info.path) !== null && _a !== void 0 ? _a : "";
+    const key = `${handler === null || handler === void 0 ? void 0 : handler.info.path}-${handler === null || handler === void 0 ? void 0 : handler.info.method}`;
+    return (React.createElement(Container, null, handler ? (React.createElement(_HandlerDebugger, { handler: handler, key: key })) : (React.createElement(p$b, null, "Select a handler from the table to debug"))));
+};
+const _HandlerDebugger = ({ handler }) => {
+    const path = handler === null || handler === void 0 ? void 0 : handler.info.path;
     const url = new URL(String(path), location.href);
     const { params } = msw.matchRequestUrl(url, path, url.origin);
-    const [paramValues, setParamValues] = React.useState(undefined);
+    const [paramValues, setParamValues] = React.useState(params
+        ? Object.keys(params).reduce((acc, key) => ({
+            ...acc,
+            [key]: "",
+        }), {})
+        : undefined);
     const [headers, setHeaders] = React.useState({});
     const [searchParams, setSearchParams] = React.useState({});
-    /**
-     * Initialize state to clear previous handler data
-     */
-    React.useEffect(() => {
-        if (params) {
-            setParamValues(Object.keys(params).reduce((acc, key) => ({
-                ...acc,
-                [key]: "",
-            }), {}));
-        }
-        else {
-            setParamValues(undefined);
-        }
-        setHeaders({});
-        setSearchParams({});
-    }, [handler]);
     const handleParamChange = (key, value) => {
         setParamValues((prev) => ({
             ...prev,
             [key]: value,
         }));
     };
-    if (!handler)
-        return (React.createElement(Container, null,
-            React.createElement(p$b, null, "Select a handler from the table to debug")));
-    return (React.createElement(Container, null,
+    return (React.createElement(React.Fragment, null,
         React.createElement(p$b, { className: "msw-dt-sub-text", style: { overflowX: "scroll" } }, url.toString()),
         React.createElement(PathParamSetter, { paramValues: paramValues, onParamChange: handleParamChange }),
         React.createElement(KeyValueInputList, { items: searchParams, setItems: setSearchParams, title: "Search Params" }),
@@ -28208,6 +28203,7 @@ const MSWDevTool = () => {
                         borderRadius: "50%",
                         width: "3.5rem",
                         height: "3.5rem",
+                        margin: "1rem",
                     } }, "M")),
             React.createElement(Drawer.Portal, null,
                 React.createElement(ThemeProvider, null,