msw-dev-tool 1.1.6 → 1.1.7

package/dist/cjs/index.js

@@ -28129,41 +28129,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 +28202,7 @@ const MSWDevTool = () => {
                         borderRadius: "50%",
                         width: "3.5rem",
                         height: "3.5rem",
+                        margin: "1rem",
                     } }, "M")),
             React.createElement(Drawer.Portal, null,
                 React.createElement(ThemeProvider, null,