feat: presets selected feature add (#10)

minsgy · Jun 9, 2024 · 618d63f · 618d63f
2 parents 8da66fd + 6b12fbd
commit 618d63f
Show file tree

Hide file tree

Showing 16 changed files with 249 additions and 106 deletions.
diff --git a/example/package.json b/example/package.json
@@ -10,23 +10,27 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "msw-devtools": "link:../",
+    "@types/node": "20.12.7",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.6",
-    "@types/node": "20.12.7",
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
     "msw": "2.2.13",
+    "msw-devtools": "link:../",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   },
   "msw": {
     "workerDirectory": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.40.1",
+    "react-json-view-lite": "^1.4.0"
   }
 }
diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,31 +1,48 @@
+import { useQuery } from "@tanstack/react-query"
+import { JsonView, darkStyles } from "react-json-view-lite"
 import "./App.css"
+import { useState } from "react"
 
 function App() {
-  const testFetchVite = async () => {
-    try {
-      const response = await fetch("https://api.example.com/user", {
-        method: "GET",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      })
-      const data = await response.json()
-      console.log(data)
-    } catch (error) {
-      console.error(error)
-    }
-  }
+  const [error, setError] = useState<string | null>(null)
+  const { data } = useQuery({
+    queryKey: ["test"],
+    queryFn: async () => {
+      try {
+        const response = await fetch("https://json-test.com/v1/user")
+        setError(null)
+        return response.json()
+      } catch (e) {
+        const error = e as Error
+        setError(error.message)
+      }
+    },
+    gcTime: 0,
+    staleTime: 0,
+  })
 
   return (
     <>
       <div></div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => testFetchVite()}>Test Fetch Vite</button>
+      <h1>MSW Devtools</h1>
+      <div
+        style={{
+          textAlign: "left",
+        }}
+      >
+        <JsonView style={darkStyles} data={data} />
+        {error && (
+          <p
+            style={{
+              color: "red",
+              fontSize: "1.2rem",
+              fontWeight: "bold",
+            }}
+          >
+            {error}
+          </p>
+        )}
       </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
     </>
   )
 }

diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -1,9 +1,11 @@
 import { MSWDevtools } from "msw-devtools"
 import "msw-devtools/styles"
+import "react-json-view-lite/dist/index.css"
 
 import React from "react"
 import ReactDOM from "react-dom/client"
 import App from "./App.tsx"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import "./index.css"
 
 const isDev = process.env.NODE_ENV === "development"
@@ -17,12 +19,22 @@ const prepareWorker = async () => {
   return undefined
 }
 
+const queryClient = new QueryClient()
 prepareWorker().then((worker) =>
   ReactDOM.createRoot(document.getElementById("root")!).render(
     <React.StrictMode>
-      <MSWDevtools worker={worker} isEnabled={isDev}>
-        <App />
-      </MSWDevtools>
+      <QueryClientProvider client={queryClient}>
+        <MSWDevtools
+          worker={worker}
+          isEnabled={isDev}
+          onRouteUpdate={() => {
+            console.log("[MSW Devtools] Route updated")
+            queryClient.resetQueries()
+          }}
+        >
+          <App />
+        </MSWDevtools>
+      </QueryClientProvider>
     </React.StrictMode>
   )
 )
diff --git a/example/src/mocks/browser.ts b/example/src/mocks/browser.ts
@@ -1,5 +1,5 @@
 // src/mocks/browser.js
-import { setupWorker } from "msw/browser";
-import { handlers } from "./handlers";
+import { setupWorker } from "msw/browser"
+import { handlers } from "./handlers"
 
-export const worker = setupWorker(...handlers);
+export const worker = setupWorker(...handlers)
diff --git a/example/src/mocks/handlers.ts b/example/src/mocks/handlers.ts
@@ -3,10 +3,10 @@ import { http } from "msw-devtools"
 
 export const handlers = [
   http
-    .get("https://api.example.com/user", () => {
+    .get("https://json-test.com/v1/user", () => {
       return HttpResponse.json({
-        firstName: "John",
-        lastName: "Maverick",
+        firstName: "zzz",
+        lastName: "zzz",
       })
     })
     .presets([
@@ -18,24 +18,19 @@ export const handlers = [
           lastName: "Maverick",
         },
       },
+      {
+        status: 401,
+        description: "Unauthorized",
+        response: {
+          error: "Unauthorized",
+        },
+      },
+      {
+        status: 404,
+        description: "Not Found",
+        response: {
+          error: "Not Found",
+        },
+      },
     ]),
-  http.post("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.put("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-
-  http.delete("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.patch("https://api.example.com/user/:id", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.options("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
-  http.head("https://api.example.com/user", () => {
-    return HttpResponse.json({ success: true })
-  }),
 ]
diff --git a/package.json b/package.json
@@ -84,7 +84,6 @@
     "react-dom": ">=18"
   },
   "engines": {
-    "node": ">=20.11.1",
-    "pnpm": ">=9.0.6"
+    "node": ">=20.11.1"
   }
 }
diff --git a/src/app/MSWDevtools.tsx b/src/app/MSWDevtools.tsx
@@ -7,6 +7,7 @@ export const MSWDevtools = ({
   isEnabled = false,
   children,
   worker,
+  onRouteUpdate,
 }: MSWDevtoolsProps) => {
   if ((isEnabled && !worker) || (isEnabled && worker && !worker)) {
     console.warn(
@@ -20,7 +21,11 @@ export const MSWDevtools = ({
 
   return (
     <>
-      <MswDevToolsProvider isEnabled={isEnabled} worker={worker}>
+      <MswDevToolsProvider
+        isEnabled={isEnabled}
+        worker={worker}
+        onRouteUpdate={onRouteUpdate}
+      >
         <MSWDevtoolsPanel />
       </MswDevToolsProvider>
       {children}

diff --git a/src/features/DevtoolsHandlerList.tsx b/src/features/DevtoolsHandlerList.tsx
@@ -16,7 +16,7 @@ import { Label } from "@/shared/ui/label"
 import { Switch } from "@/shared/ui/switch"
 
 export const DevtoolsHandlerList = () => {
-  const { routes, onToggleHandler } = useRoute()
+  const { routes, onToggleHandler, onSelectHandler } = useRoute()
   const { onOpenEditPanel } = useEditorRouteState()
 
   return (
@@ -29,7 +29,7 @@ export const DevtoolsHandlerList = () => {
       {routes.map((route) => (
         <li key={route.id} className="p-[12px] flex items-center">
           <Switch
-            checked={route.isSkip}
+            checked={route.enabled}
             onCheckedChange={(checked) => {
               onToggleHandler(route.id, checked)
             }}
@@ -43,10 +43,11 @@ export const DevtoolsHandlerList = () => {
             <div className="ml-auto flex items-center">
               <InputContainer label="delay" />
               <HandlerSelect
-                options={route.handlers ?? []}
-                defaultValue={
-                  route.handlers?.[route.selectedHandlerIndex]?.id ?? undefined
+                onValueChange={(handlerId) =>
+                  onSelectHandler(route.id, handlerId)
                 }
+                options={route.handlers ?? []}
+                defaultValue={route.handlers?.[0]?.id ?? undefined}
               />
               <Button
                 className="ml-[12px]"